blocks/cover_story.ninjatpl

@@ -1,15 +1,13 @@
-{# cover_story (magazine-bold) — asymmetric cover: mono folio kicker (top, always in frame), massive condensed headline CLAMPED to its reserved 8-col track so it never crosses the deck or bleeds off-viewport, deck in a reserved right column, duotone cover image, shop/read CTA. Fields: kicker, headline (richtext), deck (richtext), image (media), link, linkLabel. Image via {% img %} (media filter not registered in block render path). MID motion: mb-reveal + duotone hover, reduced-motion safe. #}
+{# cover_story (magazine-bold) — asymmetric cover: mono folio kicker, massive condensed headline, deck, duotone cover image, shop/read CTA. Fields: kicker, headline (richtext), deck (richtext), image (media), link, linkLabel. Image via {% img %} (media filter not registered in block render path). MID motion: mb-reveal + duotone hover, reduced-motion safe. #}
-<section data-block="magazine-bold:cover_story" class="w-full overflow-hidden py-10 md:py-14">
+<section data-block="magazine-bold:cover_story" class="w-full overflow-hidden py-10 md:py-12">
   <div class="mx-auto max-w-6xl px-4 sm:px-6">
-    {% if kicker %}<div class="mb-caps mb-4 md:mb-6 text-[hsl(var(--accent))]">{{ kicker }}</div>{% endif %}
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-end">
-    <div class="grid grid-cols-1 gap-y-6 gap-x-8 lg:grid-cols-12 lg:items-end">
+      <div class="lg:col-span-2">{% if kicker %}<div class="mb-caps text-muted-foreground">{{ kicker }}</div>{% endif %}</div>
-      <div class="min-w-0 lg:col-span-8"><h1 class="mb-cover-folio text-foreground">{% if headline %}{{ headline|safe }}{% else %}Cover story{% endif %}</h1></div>
+      <div class="lg:col-span-7"><h1 class="text-folio text-foreground">{% if headline %}{{ headline|safe }}{% else %}Cover story{% endif %}</h1></div>
-      <div class="min-w-0 lg:col-span-4 lg:pb-2">
+      <div class="lg:col-span-3">{% if deck %}<div class="text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif);font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1.3;">{{ deck|safe }}</div>{% endif %}</div>
-        {% if deck %}<div class="text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif);font-size:clamp(1rem,1.25vw,1.35rem);line-height:1.35;">{{ deck|safe }}</div>{% endif %}
-        {% if link %}<div class="mt-6"><a href="{{ link }}" class="mb-button">{{ linkLabel|default:"Read the story" }}</a></div>{% endif %}
-      </div>
     </div>
-    {% if image %}<div class="mb-reveal mb-duotone mt-8 md:mt-10 aspect-[16/9] w-full overflow-hidden">{% img image alt="" class="h-full w-full object-cover" layout="hero" %}</div>{% endif %}
+    {% if image %}<div class="mb-reveal mb-duotone mt-8 aspect-[16/9] w-full overflow-hidden">{% img image alt="" class="h-full w-full object-cover" layout="hero" %}</div>{% endif %}
+    {% if link %}<div class="mt-7"><a href="{{ link }}" class="mb-button">{{ linkLabel|default:"Read the story" }}</a></div>{% endif %}
   </div>
 </section>
 <script>

manifest.yaml

@@ -318,13 +318,11 @@ css:
         font-family: var(--font-heading, "Archivo Black", "Arial Black", sans-serif);
         color: hsl(var(--accent));
         float: left;
-        font-size: 4.4em;
+        font-size: 4.6em;
-        line-height: 0.72;
+        line-height: 0.78;
-        /* Horizontal clearance so wrapped lines (esp. the 3rd) never crowd the
+        padding-right: 0.1em;
-         * cap, plus a little breathing room below it. */
-        padding-right: 0.16em;
         padding-top: 0.02em;
-        margin-bottom: 0.04em;
+        margin-bottom: -0.08em;
       }
 
       /* --- Marginalia rail (mono side notes, MID motion reveal) --- */
@@ -368,20 +366,6 @@ css:
         overflow-wrap: break-word;
         word-break: break-word;
       }
-      /* Cover-story headline — CLAMPED so the longest single word fits its
-       * reserved 8-of-12 column (~740px at 1440) and never crosses the deck
-       * column or bleeds off-viewport. Deliberate grid-breaking scale kept, but
-       * bounded: the folio is big, not unbounded. word-break is a last-resort
-       * safety net; the clamp keeps whole words within the track. */
-      .mb-cover-folio {
-        font-family: var(--font-heading, "Archivo Black", "Arial Black", sans-serif);
-        font-size: clamp(2.75rem, 8vw, 8rem);
-        line-height: 0.86;
-        letter-spacing: -0.035em;
-        text-transform: uppercase;
-        overflow-wrap: break-word;
-        hyphens: none;
-      }
       .text-deck {
         font-family: var(--font-body, "Inter", system-ui, sans-serif);
         font-size: clamp(24px, 3vw, 44px);

plugin.mod

@@ -2,7 +2,7 @@
 name = "magazine-bold"
 display_name = "Magazine Bold"
 scope = "@themes"
-version = "0.4.0"
+version = "0.3.0"
 description = "A streetwear label's cover-story chrome: massive condensed uppercase headlines, duotone imagery, grid-breaking overlap and fluoro accent slabs. Newsprint plus voltage by day, ink-black plus fluoro by night. For fashion drops, lookbooks and culture publications."
 kind = "theme"
 categories = ["templates"]

seed/seed.json

@@ -6,12 +6,6 @@
       "tagline": "A streetwear label and its cover stories."
     }
   },
-  "media": [
-    { "id": "14eaa32d-782a-43f2-8a5d-be8f9ff67667", "file": "media/sneakers.jpg", "alt": "Three pairs of boots in a row, lit against black — the Drop 04 cover", "folder": "Demo" },
-    { "id": "ad24ad3b-6e03-405a-9b1c-1e185521ee19", "file": "media/editorial-figure.jpg", "alt": "Figure walking the block in the Drop 04 shell jacket", "folder": "Demo" },
-    { "id": "54cc7a27-5265-4b8c-9b53-bcd876ffaa8b", "file": "media/streetwear-look.jpg", "alt": "Styled look, Drop 04 cargo set", "folder": "Demo" },
-    { "id": "ea1eb2cf-b92f-4dbc-8779-e3968c6564cd", "file": "media/sneakers-street.jpg", "alt": "Detail shot on the street — Drop 04 footwear", "folder": "Demo" }
-  ],
   "data_tables": [
     {
       "key": "contact_submissions",
@@ -40,7 +34,6 @@
             "kicker": "Drop 04 / Spring",
             "headline": "Cut from the offcuts",
             "deck": "One drop. Made from last season's leftover cloth. Nothing reordered.",
-            "image": "14eaa32d-782a-43f2-8a5d-be8f9ff67667",
             "link": "/drops",
             "linkLabel": "See the drop"
           }
@@ -120,9 +113,9 @@
             "heading": "Drop 04 lookbook",
             "intro": "Shot on the block, styled in one colour.",
             "looks": [
-              { "image": "ad24ad3b-6e03-405a-9b1c-1e185521ee19", "caption": "Shell jacket, offcut nylon", "credit": "On Ari" },
+              { "caption": "Shell jacket, offcut nylon", "credit": "On Ari" },
-              { "image": "54cc7a27-5265-4b8c-9b53-bcd876ffaa8b", "caption": "Cargo set, reworked cotton", "credit": "On Dune" },
+              { "caption": "Cargo set, reworked cotton", "credit": "On Dune" },
-              { "image": "ea1eb2cf-b92f-4dbc-8779-e3968c6564cd", "caption": "Fleece half-zip", "credit": "On Lux" }
+              { "caption": "Fleece half-zip", "credit": "On Lux" }
             ]
           }
         },
@@ -148,7 +141,7 @@
       "blocks": [
         { "block_key": "text", "title": "Byline", "slot": "byline", "sort_order": 1, "content": { "text": "<p>By the OFFCUT studio. Drop 04.</p>" } },
         { "block_key": "text", "title": "Lead", "slot": "main", "sort_order": 1, "content": { "text": "<p>Most labels start with a colour card and a factory minimum. We start with a phone call about a roll of cloth that nobody wants. That is the whole method, and it shapes everything after it.</p>" } },
-        { "block_key": "rich-text", "title": "Body", "slot": "main", "sort_order": 2, "content": { "html": "<p>Mills end every season with rolls they cannot sell. Wrong shade, short length, last year's spec. To them it is dead stock, money tied up in a warehouse. We buy those rolls cheap and we buy them whole. Then we cut a drop around what we actually have.</p><p>That means the run is short. A roll makes forty jackets, not four hundred. When it is cut, the pattern retires. The next drop uses a different cloth and looks like a different label, because it is a different cloth.</p><p>We do not sketch a collection and then go hunting for fabric to match it. We work the other way round. The cloth lands first, we lay it out on the cutting table, and the drop is whatever that cloth wants to be. A stiff shell nylon becomes jackets. A soft brushed cotton becomes the fleece. The material writes the brief.</p><p>Short runs change how the studio works. There is no sampling round after round, no wholesale forecast to hit. We cut, we shoot, we post the drop, and we move on. The whole cycle is weeks, not seasons.</p><p>It changes the numbering too. Every piece carries its number out of a known total — 12 of 40, not one of an endless reprint. When the last one goes, that is the end of it. There is no restock email because there is nothing to restock.</p><p>People ask us to reorder. We cannot, and we would not. The limit is the point. A garment you can buy any day for the next three years is not the same object as one cut from a roll that no longer exists.</p><p>There is a waste argument here, and it is real — offcut cloth that would have been landfill becomes a jacket someone wears for years. But we do not lead with it. We lead with the clothes. The sustainability is a consequence of the method, not the pitch.</p><p>The method has limits we have made peace with. We cannot scale a hit. We cannot promise a colour will come back. We cannot build the kind of catalogue that a normal label leans on. What we can do is make every drop feel like the only one that will ever look like it, because it is.</p><p>That is the offcut method. Buy what nobody wants, cut it while it lasts, number it, and let it go. Then do it again with something else.</p>" } },
+        { "block_key": "rich-text", "title": "Body", "slot": "main", "sort_order": 2, "content": { "html": "<p>Mills end every season with rolls they cannot sell. Wrong shade, short length, last year's spec. We buy those rolls cheap and we buy them whole. Then we cut a drop around what we actually have.</p><p>That means the run is short. A roll makes forty jackets, not four hundred. When it is cut, the pattern retires. The next drop uses a different cloth and looks like a different label, because it is a different cloth.</p><p>People ask us to reorder. We cannot, and we would not. The limit is the point.</p>" } },
         { "block_key": "quote", "title": "Gutter quote", "slot": "marginalia", "sort_order": 1, "content": { "style": "pull", "align": "left", "quote": "A roll makes forty jackets, not four hundred.", "attribution": "Drop 04" } }
       ]
     },

templates/magazine-bold/article.ninjatpl

@@ -5,12 +5,8 @@
 	<div class="mb-progress" aria-hidden="true"></div>
 	{{ admin_banner_html|safe }}
 	{% if slots.header %}<header class="w-full">{{ slots.header|safe }}</header>{% endif %}
-	{# Article template owns the page <h1> (seed carries no level-1 heading block); aligned to the article grid's left column edge. #}
+	{% if slots.byline %}<div class="mb-column w-full pt-6 pb-2">{{ slots.byline|safe }}</div>{% endif %}
-	<div class="mx-auto w-full max-w-[84rem] px-4 pt-10 md:pt-14">
+	<div class="mb-article-grid flex-grow py-8">
-		{% if title %}<h1 class="mb-heading text-4xl sm:text-5xl md:text-7xl" style="max-width:18ch;">{{ title }}</h1>{% endif %}
-		{% if slots.byline %}<div class="mt-5 mb-caps text-muted-foreground">{{ slots.byline|safe }}</div>{% endif %}
-	</div>
-	<div class="mb-article-grid flex-grow pt-6 pb-10 md:pt-8 md:pb-14">
 		<main class="mb-dropcap mb-prose">{% if slots.main %}{{ slots.main|safe }}{% else %}<p style="color: hsl(var(--muted-foreground));">This essay has no content yet.</p>{% endif %}</main>
 		<aside class="mb-marginalia">{{ slots.marginalia|safe }}</aside>
 	</div>

templates/overrides/magazine-bold/announcement-bar.ninjatpl

@@ -4,7 +4,7 @@
 <div data-block-override="magazine-bold:announcement-bar" data-bn-announcement data-bn-annkey="{{ variant|default:'info' }}:{{ message|slugify }}" class="bn-announcement w-full border-b border-[hsl(var(--border))] {{ anncls }} {{ class }}">
 <div class="max-w-7xl mx-auto px-10 py-2 relative flex items-center justify-center gap-2 text-sm text-center">
 <p class="mb-caps text-xs">{{ message }}{% if linkText and linkUrl %} <a href="{{ linkUrl }}" class="underline underline-offset-2 hover:opacity-80">{{ linkText }}</a>{% endif %}</p>
-{% if dismissable %}<button type="button" data-bn-ann-dismiss aria-label="Dismiss announcement" class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center justify-center p-1 rounded hover:bg-black/10 transition-colors"><svg width="16" height="16" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>{% endif %}
+{% if dismissable %}<button type="button" data-bn-ann-dismiss aria-label="Dismiss announcement" class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center justify-center p-1 rounded hover:bg-black/10 transition-colors"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>{% endif %}
 </div>
 </div>
 {% if dismissable %}<script>

templates/overrides/magazine-bold/audio-embed.ninjatpl

@@ -1,5 +1,5 @@
 {# audio-embed override — magazine-bold hairline player card. Fields + facade JS mirror builtin verbatim: url, media, artwork, title, artist, download. #}
-<figure data-block-override="magazine-bold:audio-embed" class="bn-audio mb-panel my-8 overflow-hidden bg-card text-card-foreground{% if class %} {{ class }}{% endif %}" data-bn-audio data-audio-url="{{ url|default:"" }}" data-audio-media="{% if media %}{{ media|mediaURL }}{% endif %}"><div class="flex items-center gap-4 p-4">{% if artwork %}<div class="h-16 w-16 shrink-0 overflow-hidden bg-muted">{% img artwork alt=title|default:"" class="h-full w-full object-cover" %}</div>{% endif %}<div class="min-w-0 flex-1">{% if title %}<p class="mb-caps truncate text-sm" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));">{{ title }}</p>{% endif %}{% if artist %}<p class="truncate text-sm italic" style="color:hsl(var(--muted-foreground));">{{ artist }}</p>{% endif %}<div class="mt-2 flex items-center gap-3" data-bn-audio-slot><button type="button" data-bn-audio-play class="mb-button inline-flex items-center gap-2 text-sm" aria-label="Play{% if title %}: {{ title }}{% endif %}"><svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#play"></use></svg> Play</button>{% if download %}<a href="{% if media %}{{ media|mediaURL }}{% else %}{{ url }}{% endif %}" download class="mb-link inline-flex items-center gap-1 text-sm"><svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#download"></use></svg> Download</a>{% endif %}</div></div></div></figure><script>
+<figure data-block-override="magazine-bold:audio-embed" class="bn-audio mb-panel my-8 overflow-hidden bg-card text-card-foreground{% if class %} {{ class }}{% endif %}" data-bn-audio data-audio-url="{{ url|default:"" }}" data-audio-media="{% if media %}{{ media|mediaURL }}{% endif %}"><div class="flex items-center gap-4 p-4">{% if artwork %}<div class="h-16 w-16 shrink-0 overflow-hidden bg-muted">{% img artwork alt=title|default:"" class="h-full w-full object-cover" %}</div>{% endif %}<div class="min-w-0 flex-1">{% if title %}<p class="mb-caps truncate text-sm" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));">{{ title }}</p>{% endif %}{% if artist %}<p class="truncate text-sm italic" style="color:hsl(var(--muted-foreground));">{{ artist }}</p>{% endif %}<div class="mt-2 flex items-center gap-3" data-bn-audio-slot><button type="button" data-bn-audio-play class="mb-button inline-flex items-center gap-2 text-sm" aria-label="Play{% if title %}: {{ title }}{% endif %}">::lucide:play:sm:: Play</button>{% if download %}<a href="{% if media %}{{ media|mediaURL }}{% else %}{{ url }}{% endif %}" download class="mb-link inline-flex items-center gap-1 text-sm">::lucide:download:sm:: Download</a>{% endif %}</div></div></div></figure><script>
 (function(){
   if(window.__bnAudioFacade)return;window.__bnAudioFacade=true;
   document.addEventListener('click',function(e){

templates/overrides/magazine-bold/auth-status.ninjatpl

@@ -4,7 +4,7 @@
   <button type="button" onclick="this.nextElementSibling.classList.toggle('hidden')" class="mb-caps flex items-center gap-2 text-xs opacity-90 hover:opacity-100 px-3 py-1.5 transition-colors">
     <span class="inline-flex h-7 w-7 items-center justify-center rounded-full text-[0.7rem] font-bold" style="border:1px solid hsl(var(--border));color:hsl(var(--accent));">{{ context.publicDisplayName|default:context.publicUsername|first|upper }}</span>
     <span>{{ context.publicDisplayName|default:context.publicUsername }}</span>
-    <svg width="16" height="16" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
   </button>
   <div id="auth-dropdown-menu" class="hidden absolute right-0 top-full mt-1 w-48 mb-panel bg-card py-1 z-50">
     <a href="/account" class="block px-4 py-2 text-sm text-foreground hover:bg-accent">My profile</a>

templates/overrides/magazine-bold/author-bio-hero.ninjatpl

@@ -12,10 +12,10 @@
 {% if author.location %}<span>{{ author.location }}</span>{% endif %}
 </div>
 {% if showSocial %}<div class="mt-6 flex items-center justify-center gap-4">
-{% if author.website_url %}<a href="{{ author.website_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Website"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/lucide.svg#globe"></use></svg></a>{% endif %}
+{% if author.website_url %}<a href="{{ author.website_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Website"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/lucide.svg#globe"></use></svg></a>{% endif %}
-{% if author.twitter_handle %}<a href="https://twitter.com/{{ author.twitter_handle|cut:"@" }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Twitter"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#x"></use></svg></a>{% endif %}
+{% if author.twitter_handle %}<a href="https://twitter.com/{{ author.twitter_handle|cut:"@" }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="Twitter"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#x"></use></svg></a>{% endif %}
-{% if author.linkedin_url %}<a href="{{ author.linkedin_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="LinkedIn"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#linkedin"></use></svg></a>{% endif %}
+{% if author.linkedin_url %}<a href="{{ author.linkedin_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="LinkedIn"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#linkedin"></use></svg></a>{% endif %}
-{% if author.github_url %}<a href="{{ author.github_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="GitHub"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#github"></use></svg></a>{% endif %}
+{% if author.github_url %}<a href="{{ author.github_url }}" target="_blank" rel="noopener noreferrer" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" title="GitHub"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/simple-icons.svg#github"></use></svg></a>{% endif %}
 </div>{% endif %}
 </div>
 </section>

templates/overrides/magazine-bold/breadcrumbs.ninjatpl

@@ -5,7 +5,7 @@
 {% if showHome %}<li class="flex items-center"><a href="/" class="mb-caps text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]">{{ homeLabel|default:"Home" }}</a></li>{% endif %}
 {% for item in breadcrumbs %}
 <li class="flex items-center">
-{% if showHome or not forloop.First %}{% if arrows %}<svg width="14" height="14" class="mx-2 h-3.5 w-3.5 text-[hsl(var(--accent))]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>{% else %}<span class="mx-2 text-[hsl(var(--accent))]">{{ separator|default:"/" }}</span>{% endif %}{% endif %}
+{% if showHome or not forloop.First %}{% if arrows %}<svg class="mx-2 h-3.5 w-3.5 text-[hsl(var(--accent))]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>{% else %}<span class="mx-2 text-[hsl(var(--accent))]">{{ separator|default:"/" }}</span>{% endif %}{% endif %}
 {% if item.is_current %}{% if showCurrent %}<span class="mb-caps text-foreground" aria-current="page">{{ item.label }}</span>{% endif %}{% else %}<a href="{{ item.url }}" class="mb-caps text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]">{{ item.label }}</a>{% endif %}
 </li>
 {% endfor %}

templates/overrides/magazine-bold/button.ninjatpl

@@ -2,9 +2,9 @@
 {% with align=align|default:"left" %}
 <div data-block-override="magazine-bold:button" class="bn-button flex {% if align == "center" %}justify-center{% elif align == "right" %}justify-end{% else %}justify-start{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if style == "ghost" or style == "link" or style == "secondary" %}
-  <a href="{{ link|default:'#' }}"{% if newTab %} target="_blank" rel="noopener"{% endif %} class="mb-link inline-flex items-center gap-2 text-sm">{% if icon and iconPosition != "right" %}<svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/{{ icon|split:":"|first }}.svg#{{ icon|split:":"|last }}"></use></svg>{% endif %}{{ label|default:"Learn more" }}{% if icon and iconPosition == "right" %}<svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/{{ icon|split:":"|first }}.svg#{{ icon|split:":"|last }}"></use></svg>{% endif %}</a>
+  <a href="{{ link|default:'#' }}"{% if newTab %} target="_blank" rel="noopener"{% endif %} class="mb-link inline-flex items-center gap-2 text-sm">{% if icon and iconPosition != "right" %}::{{ icon }}:sm::{% endif %}{{ label|default:"Learn more" }}{% if icon and iconPosition == "right" %}::{{ icon }}:sm::{% endif %}</a>
 {% else %}
-  <a href="{{ link|default:'#' }}"{% if newTab %} target="_blank" rel="noopener"{% endif %} class="mb-button inline-flex items-center gap-2">{% if icon and iconPosition != "right" %}<svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/{{ icon|split:":"|first }}.svg#{{ icon|split:":"|last }}"></use></svg>{% endif %}{{ label|default:"Learn more" }}{% if icon and iconPosition == "right" %}<svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/{{ icon|split:":"|first }}.svg#{{ icon|split:":"|last }}"></use></svg>{% endif %}</a>
+  <a href="{{ link|default:'#' }}"{% if newTab %} target="_blank" rel="noopener"{% endif %} class="mb-button inline-flex items-center gap-2">{% if icon and iconPosition != "right" %}::{{ icon }}:sm::{% endif %}{{ label|default:"Learn more" }}{% if icon and iconPosition == "right" %}::{{ icon }}:sm::{% endif %}</a>
 {% endif %}
 </div>
 {% endwith %}

templates/overrides/magazine-bold/card.ninjatpl

@@ -1,4 +1,4 @@
 {# card override — magazine-bold hairline panel; accent border on hover, fluoro link. Fields mirror builtin: layout, link, media, title, text, linkLabel. Media via {% img %}. #}
 {% with layout=layout|default:"vertical" %}
-<article data-block-override="magazine-bold:card" class="bn-card mb-panel overflow-hidden bg-card text-card-foreground transition-colors hover:border-[hsl(var(--accent))] {% if layout == "horizontal" %}flex flex-col sm:flex-row{% endif %}{% if class %} {{ class }}{% endif %}">{% if link %}<a href="{{ link }}" class="contents">{% endif %}{% if media %}<div class="overflow-hidden bg-muted {% if layout == "horizontal" %}sm:w-2/5 sm:shrink-0{% endif %}">{% if layout == "horizontal" %}{% img media alt=title|default:"" class="h-full w-full object-cover" %}{% else %}{% img media alt=title|default:"" class="aspect-video h-full w-full object-cover" %}{% endif %}</div>{% endif %}<div class="flex flex-col gap-2 p-5 md:p-6 {% if layout == "horizontal" %}justify-center{% endif %}">{% if title %}<h3 style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));font-size:1.25rem;line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase;">{{ title }}</h3>{% endif %}{% if text %}<div class="text-sm leading-relaxed" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<span class="mt-2 inline-flex items-center gap-1 text-sm mb-link">{{ linkLabel }}<svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></span>{% endif %}</div>{% if link %}</a>{% endif %}</article>
+<article data-block-override="magazine-bold:card" class="bn-card mb-panel overflow-hidden bg-card text-card-foreground transition-colors hover:border-[hsl(var(--accent))] {% if layout == "horizontal" %}flex flex-col sm:flex-row{% endif %}{% if class %} {{ class }}{% endif %}">{% if link %}<a href="{{ link }}" class="contents">{% endif %}{% if media %}<div class="overflow-hidden bg-muted {% if layout == "horizontal" %}sm:w-2/5 sm:shrink-0{% endif %}">{% if layout == "horizontal" %}{% img media alt=title|default:"" class="h-full w-full object-cover" %}{% else %}{% img media alt=title|default:"" class="aspect-video h-full w-full object-cover" %}{% endif %}</div>{% endif %}<div class="flex flex-col gap-2 p-5 md:p-6 {% if layout == "horizontal" %}justify-center{% endif %}">{% if title %}<h3 style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));font-size:1.25rem;line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase;">{{ title }}</h3>{% endif %}{% if text %}<div class="text-sm leading-relaxed" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ text|safe }}</div>{% endif %}{% if linkLabel and link %}<span class="mt-2 inline-flex items-center gap-1 text-sm mb-link">{{ linkLabel }}::lucide:arrow-right:sm::</span>{% endif %}</div>{% if link %}</a>{% endif %}</article>
 {% endwith %}

templates/overrides/magazine-bold/contact-card.ninjatpl

@@ -5,7 +5,7 @@
     <div class="mt-12 grid grid-cols-1 gap-6 text-left {% if columns == 3 %}sm:grid-cols-2 lg:grid-cols-3{% elif columns == 1 %}{% else %}sm:grid-cols-2{% endif %}">
       {% for channel in channels %}
       <div class="mb-panel flex items-start gap-4 rounded-none bg-card p-6 text-card-foreground">
-        {% if channel.icon %}<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-[hsl(var(--border))] text-[hsl(var(--accent))]"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
+        {% if channel.icon %}<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-none border border-[hsl(var(--border))] text-[hsl(var(--accent))]"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ channel.icon|split:":"|first }}.svg#{{ channel.icon|split:":"|last }}"></use></svg></span>{% endif %}
         <div class="min-w-0">
           {% if channel.label %}<div class="mb-caps text-xs tracking-[0.16em] text-muted-foreground">{{ channel.label }}</div>{% endif %}
           {% if channel.value %}<div class="mt-1 break-words text-lg text-foreground" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{% if channel.link %}<a href="{{ channel.link }}" class="mb-link transition-colors hover:text-[hsl(var(--accent))]">{{ channel.value }}</a>{% else %}{{ channel.value }}{% endif %}</div>{% endif %}

templates/overrides/magazine-bold/contact-form.ninjatpl

@@ -4,7 +4,7 @@
   <div class="mx-auto max-w-2xl px-4">
     {% if form.submitted %}
     <div class="mb-panel bg-card p-10 text-center">
-      <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full text-[hsl(var(--accent))]" style="box-shadow:inset 0 0 0 1px hsl(var(--accent));"><svg width="24" height="24" class="inline-block h-6 w-6" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg></div>
+      <div class="mx-auto mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full text-[hsl(var(--accent))]" style="box-shadow:inset 0 0 0 1px hsl(var(--accent));">::lucide:check:lg::</div>
       <p class="text-lg italic" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ form.message|default:successMessage|default:"Thank you. Your table request has been received." }}</p>
     </div>
     {% else %}

templates/overrides/magazine-bold/countdown.ninjatpl

@@ -11,7 +11,7 @@
       </div>
       <div class="mt-8 hidden" data-countdown-expired>
         <p class="mb-caps text-xl" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{{ expiredMessage|default:"This has started." }}</p>
-        {% if expiredUrl and expiredLabel %}<a href="{{ expiredUrl }}" class="mb-button mt-4 inline-flex items-center gap-2">{{ expiredLabel }}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
+        {% if expiredUrl and expiredLabel %}<a href="{{ expiredUrl }}" class="mb-button mt-4 inline-flex items-center gap-2">{{ expiredLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
       </div>
     </div>
     <noscript><p class="mt-6 text-muted-foreground">Counting down to <time datetime="{{ target }}">{{ target }}</time>.</p></noscript>

templates/overrides/magazine-bold/cta.ninjatpl

@@ -6,7 +6,7 @@
         {% if text %}<p class="mt-3 text-lg {% if background == "band" %}text-muted-foreground{% else %}text-muted-foreground{% endif %}" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ text }}</p>{% endif %}
       </div>
       <div class="flex flex-wrap items-center justify-center gap-3 {% if background != "split" %}mt-8{% else %}shrink-0{% endif %}">
-        {% if primaryUrl and primaryLabel %}<a href="{{ primaryUrl }}" class="mb-button inline-flex items-center gap-2">{{ primaryLabel }}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
+        {% if primaryUrl and primaryLabel %}<a href="{{ primaryUrl }}" class="mb-button inline-flex items-center gap-2">{{ primaryLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
         {% if secondaryUrl and secondaryLabel %}<a href="{{ secondaryUrl }}" class="mb-link inline-flex items-center">{{ secondaryLabel }}</a>{% endif %}
       </div>
     </div>

templates/overrides/magazine-bold/divider.ninjatpl

@@ -2,7 +2,7 @@
 {% with variant=variant|default:"line" weight=weight|default:"thin" width=width|default:"full" %}
 {% if variant == "ornament" %}
 <div data-block-override="magazine-bold:divider" class="bn-divider mx-auto my-10 flex flex-col items-center gap-2 {% if width == "narrow" %}max-w-[200px]{% elif width == "wide" %}max-w-3xl{% else %}w-full{% endif %}{% if class %} {{ class }}{% endif %}" role="separator">
-  <div class="flex w-full items-center gap-4"><span class="mb-rule flex-1"></span><span style="color:hsl(var(--accent));"><svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/{{ icon|default:"lucide:diamond"|split:":"|first }}.svg#{{ icon|default:"lucide:diamond"|split:":"|last }}"></use></svg></span><span class="mb-rule flex-1"></span></div>
+  <div class="flex w-full items-center gap-4"><span class="mb-rule flex-1"></span><span style="color:hsl(var(--accent));">::{{ icon|default:"lucide:diamond" }}:sm::</span><span class="mb-rule flex-1"></span></div>
 </div>
 {% elif variant == "spacer-rule" %}
 <div data-block-override="magazine-bold:divider" class="bn-divider mx-auto py-10 flex justify-center {% if width == "narrow" %}max-w-[200px]{% elif width == "wide" %}max-w-3xl{% else %}w-full{% endif %}{% if class %} {{ class }}{% endif %}" role="separator"><span class="{% if weight == "thick" %}mb-rule{% else %}mb-rule{% endif %} w-16"></span></div>

templates/overrides/magazine-bold/event-list.ninjatpl

@@ -13,7 +13,7 @@
           <h3 class="text-xl text-foreground" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{{ event.title }}</h3>
           {% if event.venue %}<p class="mb-caps text-xs tracking-[0.14em] text-muted-foreground">{{ event.venue }}</p>{% endif %}
           {% if event.description %}<p class="text-sm text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ event.description }}</p>{% endif %}
-          {% if event.link %}<a href="{{ event.link }}" class="mb-link mt-auto inline-flex items-center gap-2 pt-3 text-sm text-[hsl(var(--accent))]">{{ event.linkLabel|default:"Details" }}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
+          {% if event.link %}<a href="{{ event.link }}" class="mb-link mt-auto inline-flex items-center gap-2 pt-3 text-sm text-[hsl(var(--accent))]">{{ event.linkLabel|default:"Details" }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
         </div>
       </article>
       {% endif %}{% endfor %}

templates/overrides/magazine-bold/faq.ninjatpl

@@ -7,7 +7,7 @@
       <details class="group py-2"{% if variant == "open-list" %} open{% endif %}>
         <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-3 text-lg font-medium marker:content-none [&::-webkit-details-marker]:hidden" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">
           <span>{{ item.question }}</span>
-          <svg width="20" height="20" class="h-5 w-5 shrink-0 text-[hsl(var(--accent))] transition-transform duration-200 group-open:rotate-180" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"></use></svg>
+          <svg class="h-5 w-5 shrink-0 text-[hsl(var(--accent))] transition-transform duration-200 group-open:rotate-180" aria-hidden="true"><use href="/icons/lucide.svg#chevron-down"></use></svg>
         </summary>
         <div class="pb-4 text-muted-foreground [&_a]:text-[hsl(var(--accent))] [&_a]:underline" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ item.answer|safe }}</div>
       </details>

templates/overrides/magazine-bold/feature-grid.ninjatpl

@@ -6,10 +6,10 @@
     <div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 {% if columns == 2 %}lg:grid-cols-2{% elif columns == 4 %}lg:grid-cols-4{% else %}lg:grid-cols-3{% endif %}">
       {% for item in items %}
       <div class="{% if layout == "card" %}mb-panel bg-card p-6 text-card-foreground hover:border-[hsl(var(--accent))] transition-shadow{% elif layout == "centered" %}text-center{% endif %}">
-        {% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center border border-[hsl(var(--border))] bg-muted text-[hsl(var(--accent))]{% if layout == "centered" %} mx-auto{% endif %}"><svg width="24" height="24" class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
+        {% if item.icon %}<div class="mb-4 inline-flex h-11 w-11 items-center justify-center border border-[hsl(var(--border))] bg-muted text-[hsl(var(--accent))]{% if layout == "centered" %} mx-auto{% endif %}"><svg class="h-6 w-6" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg></div>{% endif %}
         <h3 class="mb-caps text-lg text-foreground" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{% if item.linkUrl %}<a href="{{ item.linkUrl }}" class="transition-colors hover:text-[hsl(var(--accent))]">{{ item.title }}</a>{% else %}{{ item.title }}{% endif %}</h3>
         {% if item.text %}<p class="mt-2 text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ item.text }}</p>{% endif %}
-        {% if item.linkUrl and item.linkLabel %}<a href="{{ item.linkUrl }}" class="mb-link mt-3 inline-flex items-center gap-1 text-sm">{{ item.linkLabel }}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
+        {% if item.linkUrl and item.linkLabel %}<a href="{{ item.linkUrl }}" class="mb-link mt-3 inline-flex items-center gap-1 text-sm">{{ item.linkLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
       </div>
       {% endfor %}
     </div>

templates/overrides/magazine-bold/footer.ninjatpl

@@ -2,7 +2,7 @@
 {% set fl = layout %}
 {% if not fl %}{% if template == "centered" %}{% set fl = "centered" %}{% else %}{% set fl = "columns" %}{% endif %}{% endif %}
 {% set fbg = backgroundColor|default:"bg-card text-card-foreground" %}
-{% macro sociallinks(cls) %}{% if social_items %}<div class="flex items-center gap-4 {{ cls }}">{% for s in social_items %}<a href="{{ s.url }}" target="_blank" rel="noopener" title="{{ s.label }}" class="text-muted-foreground hover:text-[hsl(var(--accent))] transition-colors"><span class="sr-only">{{ s.label }}</span>{% if s.icon %}<svg width="20" height="20" class="inline-block h-5 w-5" aria-hidden="true"><use href="/icons/{{ s.icon|split:":"|first }}.svg#{{ s.icon|split:":"|last }}"></use></svg>{% else %}{{ s.label }}{% endif %}</a>{% endfor %}</div>{% endif %}{% endmacro %}
+{% macro sociallinks(cls) %}{% if social_items %}<div class="flex items-center gap-4 {{ cls }}">{% for s in social_items %}<a href="{{ s.url }}" target="_blank" rel="noopener" title="{{ s.label }}" class="text-muted-foreground hover:text-[hsl(var(--accent))] transition-colors"><span class="sr-only">{{ s.label }}</span>{% if s.icon %}::{{ s.icon }}::{% else %}{{ s.label }}{% endif %}</a>{% endfor %}</div>{% endif %}{% endmacro %}
 {% macro newsletter() %}{% if showNewsletter %}<div class="max-w-sm"><h3 class="mb-caps text-sm text-muted-foreground">{{ newsletterTitle|default:"Join the guest list" }}</h3>{% if newsletterDescription %}<p class="mt-1 text-sm italic text-muted-foreground">{{ newsletterDescription }}</p>{% endif %}<div class="mt-3">{% signup_form list=newsletterListSlug|default:"main" source="footer" submit=newsletterButtonText|default:"Subscribe" %}</div></div>{% endif %}{% endmacro %}
 {% macro legalbar() %}<div class="mt-10 pt-6 border-t border-[hsl(var(--border))] flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-muted-foreground"><p>{% if copyright %}&copy; {{ copyright }}{% else %}&copy; {{ companyName }}{% endif %}</p>{% if legal_items %}<nav class="flex flex-wrap items-center gap-x-4 gap-y-1">{% for l in legal_items %}<a href="{{ l.url|default:'#' }}"{% if l.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="hover:text-[hsl(var(--accent))] transition-colors">{{ l.label }}</a>{% endfor %}</nav>{% endif %}</div>{% endmacro %}
 <footer data-block-override="magazine-bold:footer" class="w-full border-t border-[hsl(var(--border))] {{ fbg }} {{ class }}">

templates/overrides/magazine-bold/hours-location.ninjatpl

@@ -19,11 +19,11 @@
         {% if specialHoursNote %}<p class="mt-4 border-t border-[hsl(var(--border))] pt-3 text-sm italic" style="color:hsl(var(--muted-foreground));">{{ specialHoursNote }}</p>{% endif %}
         {% if address %}<div class="mt-6"><div class="mb-caps text-xs" style="color:hsl(var(--muted-foreground));">Address</div><address class="mt-1 whitespace-pre-line not-italic" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ address }}</address></div>{% endif %}
         {% if phone %}<div class="mt-4"><div class="mb-caps text-xs" style="color:hsl(var(--muted-foreground));">Reservations</div><a href="tel:{{ phone }}" class="mb-link mt-1 inline-block">{{ phone }}</a></div>{% endif %}
-        {% if directionsUrl %}<a href="{{ directionsUrl }}" target="_blank" rel="noopener noreferrer" class="mb-button mt-6 inline-flex items-center gap-2"><svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#navigation"></use></svg> Get directions</a>{% endif %}
+        {% if directionsUrl %}<a href="{{ directionsUrl }}" target="_blank" rel="noopener noreferrer" class="mb-button mt-6 inline-flex items-center gap-2">::lucide:navigation:sm:: Get directions</a>{% endif %}
       </div>
       {% if mapEmbedUrl %}
       <div class="aspect-square w-full overflow-hidden bg-muted md:aspect-auto">
-        <button type="button" data-map-src="{{ mapEmbedUrl }}" onclick="var f=document.createElement('iframe');f.src=this.getAttribute('data-map-src');f.setAttribute('class','h-full w-full border-0');f.setAttribute('loading','lazy');f.setAttribute('referrerpolicy','no-referrer-when-downgrade');f.setAttribute('title','Map');this.parentNode.replaceChild(f,this);" class="mb-caps flex h-full min-h-[16rem] w-full items-center justify-center gap-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground" style="color:hsl(var(--muted-foreground));"><svg width="20" height="20" class="inline-block h-5 w-5" aria-hidden="true"><use href="/icons/lucide.svg#map-pin"></use></svg> {{ mapButtonLabel|default:"Load map" }}</button>
+        <button type="button" data-map-src="{{ mapEmbedUrl }}" onclick="var f=document.createElement('iframe');f.src=this.getAttribute('data-map-src');f.setAttribute('class','h-full w-full border-0');f.setAttribute('loading','lazy');f.setAttribute('referrerpolicy','no-referrer-when-downgrade');f.setAttribute('title','Map');this.parentNode.replaceChild(f,this);" class="mb-caps flex h-full min-h-[16rem] w-full items-center justify-center gap-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground" style="color:hsl(var(--muted-foreground));">::lucide:map-pin:md:: {{ mapButtonLabel|default:"Load map" }}</button>
       </div>
       {% endif %}
     </div>

templates/overrides/magazine-bold/navbar.ninjatpl

@@ -10,8 +10,8 @@
 {% set bg = backgroundColor|default:"bg-background" %}
 {% macro navlink(item) %}<a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}{% if item.title %} title="{{ item.title }}"{% endif %} class="mb-caps px-3 py-2 text-xs text-foreground/80 hover:text-[hsl(var(--accent))] transition-colors {{ item.css_class }}">{{ item.label }}</a>{% endmacro %}
 {% macro dropdown(item) %}<div class="relative group">
-<button type="button" class="mb-caps px-3 py-2 text-xs text-foreground/80 hover:text-[hsl(var(--accent))] transition-colors inline-flex items-center gap-1">{{ item.label }}<svg width="16" height="16" class="h-4 w-4 transition-transform group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
+<button type="button" class="mb-caps px-3 py-2 text-xs text-foreground/80 hover:text-[hsl(var(--accent))] transition-colors inline-flex items-center gap-1">{{ item.label }}<svg class="h-4 w-4 transition-transform group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
-{% if use_mega %}<div class="absolute left-1/2 -translate-x-1/2 mt-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"><div class="mb-panel p-6 bg-card grid gap-8" style="grid-template-columns:repeat({{ item.children|length|default:1 }},minmax(10rem,1fr));min-width:min(90vw,42rem)">{% for child in item.children %}<div class="space-y-1">{% if child.item_type == "header" %}<div class="mb-caps px-2 py-1 text-[0.65rem] text-muted-foreground border-b border-[hsl(var(--border))] mb-2">{{ child.label }}</div>{% else %}<a href="{{ child.url|default:'#' }}"{% if child.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="block px-2 py-2 hover:bg-accent transition-colors {{ child.css_class }}">{% if child.icon %}<span class="mr-1.5 text-[hsl(var(--accent))]"><svg width="20" height="20" class="inline-block h-5 w-5" aria-hidden="true"><use href="/icons/{{ child.icon|split:":"|first }}.svg#{{ child.icon|split:":"|last }}"></use></svg></span>{% endif %}<span class="text-sm font-medium text-foreground">{{ child.label }}</span>{% if child.description %}<span class="block text-xs text-muted-foreground mt-0.5">{{ child.description }}</span>{% endif %}</a>{% endif %}</div>{% endfor %}</div></div>
+{% if use_mega %}<div class="absolute left-1/2 -translate-x-1/2 mt-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"><div class="mb-panel p-6 bg-card grid gap-8" style="grid-template-columns:repeat({{ item.children|length|default:1 }},minmax(10rem,1fr));min-width:min(90vw,42rem)">{% for child in item.children %}<div class="space-y-1">{% if child.item_type == "header" %}<div class="mb-caps px-2 py-1 text-[0.65rem] text-muted-foreground border-b border-[hsl(var(--border))] mb-2">{{ child.label }}</div>{% else %}<a href="{{ child.url|default:'#' }}"{% if child.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="block px-2 py-2 hover:bg-accent transition-colors {{ child.css_class }}">{% if child.icon %}<span class="mr-1.5 text-[hsl(var(--accent))]">::{{ child.icon }}::</span>{% endif %}<span class="text-sm font-medium text-foreground">{{ child.label }}</span>{% if child.description %}<span class="block text-xs text-muted-foreground mt-0.5">{{ child.description }}</span>{% endif %}</a>{% endif %}</div>{% endfor %}</div></div>
 {% else %}<div class="absolute left-0 mt-1 w-56 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"><div class="mb-panel py-2 bg-card">{% for child in item.children %}{% if child.item_type == "header" %}<div class="mb-caps px-4 py-2 text-[0.65rem] text-muted-foreground">{{ child.label }}</div>{% else %}<a href="{{ child.url|default:'#' }}"{% if child.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="block px-4 py-2 text-sm text-foreground hover:bg-accent transition-colors {{ child.css_class }}">{{ child.label }}</a>{% endif %}{% endfor %}</div></div>{% endif %}
 </div>{% endmacro %}
 {% macro brand(size) %}<a href="/" class="flex-shrink-0 flex items-center">{% if logoType == "text" and logoText.text %}<span class="mb-caps text-xl {{ logoText.color }}" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));">{{ logoText.text }}</span>{% elif logo %}<img src="{{ logo }}" alt="{{ alt|default:companyName }}" class="{{ size }} w-auto"{% if logoMaxWidth or logoMaxHeight %} style="{% if logoMaxWidth %}max-width:{{ logoMaxWidth }};{% endif %}{% if logoMaxHeight %}max-height:{{ logoMaxHeight }};{% endif %}"{% endif %}/>{% elif companyName %}<span class="mb-caps text-xl" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif);color:hsl(var(--foreground));">{{ companyName }}</span>{% endif %}</a>{% endmacro %}
@@ -33,7 +33,7 @@
 <div class="hidden md:flex items-center gap-1">{% for item in menu.items %}{% if item.children %}{{ dropdown(item) }}{% else %}{{ navlink(item) }}{% endif %}{% endfor %}{{ ctabtn("ml-3") }}</div>
 {% endif %}
 <div class="flex items-center md:hidden">
-<label for="bn-navbar-toggle" data-bn-nav-open aria-controls="bn-navbar-drawer" aria-expanded="false" class="inline-flex items-center justify-center p-2 rounded-md cursor-pointer hover:bg-accent/50 transition-colors"><span class="sr-only">Open menu</span><svg width="24" height="24" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></label>
+<label for="bn-navbar-toggle" data-bn-nav-open aria-controls="bn-navbar-drawer" aria-expanded="false" class="inline-flex items-center justify-center p-2 rounded-md cursor-pointer hover:bg-accent/50 transition-colors"><span class="sr-only">Open menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></label>
 </div>
 </div>
 </div>
@@ -41,8 +41,8 @@
 <input type="checkbox" id="bn-navbar-toggle" class="bn-navbar-toggle" aria-hidden="true"/>
 <label for="bn-navbar-toggle" class="bn-navbar-overlay fixed inset-0 bg-black/50 z-40 md:hidden" aria-hidden="true"></label>
 <div id="bn-navbar-drawer" class="bn-navbar-drawer fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-background text-foreground z-50 shadow-xl md:hidden flex flex-col border-l border-[hsl(var(--border))]" role="dialog" aria-modal="true" aria-label="Site menu">
-<div class="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">{{ brand("h-8") }}<label for="bn-navbar-toggle" data-bn-nav-close class="p-2 rounded-md cursor-pointer text-muted-foreground hover:text-[hsl(var(--accent))] hover:bg-accent"><span class="sr-only">Close menu</span><svg width="24" height="24" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></label></div>
+<div class="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">{{ brand("h-8") }}<label for="bn-navbar-toggle" data-bn-nav-close class="p-2 rounded-md cursor-pointer text-muted-foreground hover:text-[hsl(var(--accent))] hover:bg-accent"><span class="sr-only">Close menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></label></div>
-<nav class="flex-1 overflow-y-auto py-4" aria-label="Mobile">{% for item in menu.items %}{% if item.children %}<details class="group/acc"><summary class="mb-caps flex items-center justify-between px-6 py-3 text-sm cursor-pointer hover:bg-accent transition-colors list-none">{{ item.label }}<svg width="16" height="16" class="h-4 w-4 transition-transform group-open/acc:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></summary><div class="pl-8 pb-2">{% for child in item.children %}{% if child.item_type != "header" %}<a href="{{ child.url|default:'#' }}"{% if child.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="block px-2 py-2 text-sm text-muted-foreground hover:text-[hsl(var(--accent))] transition-colors">{{ child.label }}</a>{% endif %}{% endfor %}</div></details>{% else %}<a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="mb-caps block px-6 py-3 text-sm hover:bg-accent transition-colors">{{ item.label }}</a>{% endif %}{% endfor %}</nav>
+<nav class="flex-1 overflow-y-auto py-4" aria-label="Mobile">{% for item in menu.items %}{% if item.children %}<details class="group/acc"><summary class="mb-caps flex items-center justify-between px-6 py-3 text-sm cursor-pointer hover:bg-accent transition-colors list-none">{{ item.label }}<svg class="h-4 w-4 transition-transform group-open/acc:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></summary><div class="pl-8 pb-2">{% for child in item.children %}{% if child.item_type != "header" %}<a href="{{ child.url|default:'#' }}"{% if child.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="block px-2 py-2 text-sm text-muted-foreground hover:text-[hsl(var(--accent))] transition-colors">{{ child.label }}</a>{% endif %}{% endfor %}</div></details>{% else %}<a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %} class="mb-caps block px-6 py-3 text-sm hover:bg-accent transition-colors">{{ item.label }}</a>{% endif %}{% endfor %}</nav>
 {% if cta_text %}<div class="p-4 border-t border-[hsl(var(--border))]"><a href="{{ cta_url|default:'#' }}" class="mb-button block w-full text-center">{{ cta_text }}</a></div>{% endif %}
 </div>
 </nav>

templates/overrides/magazine-bold/page-suggestions.ninjatpl

@@ -5,7 +5,7 @@
   <ul class="mt-6 space-y-3 max-w-lg mx-auto">
     {% for suggestion in suggestions %}
     <li class="flex items-start gap-3">
-      <span class="mt-0.5 shrink-0" style="color:hsl(var(--accent));"><svg width="16" height="16" class="inline-block h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#chevron-right"></use></svg></span>
+      <span class="mt-0.5 shrink-0" style="color:hsl(var(--accent));">::lucide:chevron-right:sm::</span>
       <div>
         <a href="{{ suggestion.slug }}" class="mb-link font-medium">{{ suggestion.title }}</a>
         {% if showDescription and suggestion.excerpt %}<p class="mt-1 text-sm italic" style="color:hsl(var(--muted-foreground));">{{ suggestion.excerpt }}</p>{% endif %}

templates/overrides/magazine-bold/pricing.ninjatpl

@@ -14,7 +14,7 @@
         </p>
         {% if tier.description %}<p class="mt-3 text-center text-sm text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ tier.description }}</p>{% endif %}
         {% if tier.features %}<ul class="mt-6 flex-1 space-y-3 text-sm">
-          {% for feature in tier.features %}<li class="flex items-start gap-2"><svg width="16" height="16" class="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg><span>{{ feature }}</span></li>{% endfor %}
+          {% for feature in tier.features %}<li class="flex items-start gap-2"><svg class="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/lucide.svg#check"></use></svg><span>{{ feature }}</span></li>{% endfor %}
         </ul>{% endif %}
         {% if tier.ctaUrl and tier.ctaLabel %}{% if tier.highlighted %}<a href="{{ tier.ctaUrl }}" class="mb-button mt-8 inline-flex w-full items-center justify-center">{{ tier.ctaLabel }}</a>{% else %}<a href="{{ tier.ctaUrl }}" class="mb-link mt-8 inline-flex w-full items-center justify-center">{{ tier.ctaLabel }}</a>{% endif %}{% endif %}
       </div>

templates/overrides/magazine-bold/rich-section.ninjatpl

@@ -4,7 +4,7 @@
       {% if eyebrow %}<div class="mb-3 flex items-center gap-4"><span class="mb-rule w-12"></span><p class="mb-caps text-xs text-muted-foreground">{{ eyebrow }}</p></div>{% endif %}
       {% if heading %}<h2 class="mb-caps mb-underline mt-2 text-3xl text-foreground md:text-4xl" style="font-family:var(--font-heading, 'Archivo Black', 'Arial Black', sans-serif)">{{ heading }}</h2>{% endif %}
       {% if body %}<div class="mt-4 space-y-4 text-lg text-muted-foreground [&_a]:text-[hsl(var(--accent))] [&_a]:underline [&_strong]:text-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ body|safe }}</div>{% endif %}
-      {% if ctaUrl and ctaLabel %}<a href="{{ ctaUrl }}" class="mb-button mt-6 inline-flex items-center gap-2">{{ ctaLabel }}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
+      {% if ctaUrl and ctaLabel %}<a href="{{ ctaUrl }}" class="mb-button mt-6 inline-flex items-center gap-2">{{ ctaLabel }}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#arrow-right"></use></svg></a>{% endif %}
     </div>
     <div class="{% if mediaPosition == "left" %}md:order-1{% else %}md:order-2{% endif %}">
       {% if media %}<div class="overflow-hidden">{% img media alt=mediaAlt class="w-full h-auto object-cover" %}</div>{% endif %}

templates/overrides/magazine-bold/sidebar-nav.ninjatpl

@@ -4,7 +4,7 @@
 {% if title %}<h3 class="mb-caps mb-underline {% if compact %}px-2 mb-4 text-xs text-muted-foreground{% else %}px-3 mb-5 text-sm text-foreground{% endif %}" style="font-family:var(--font-heading, &quot;Archivo Black&quot;, 'Arial Black', sans-serif)">{{ title }}</h3>{% endif %}
 <ul class="{% if compact %}space-y-0.5{% else %}space-y-1{% endif %}">
 {% for item in menu.items %}
-<li><a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}{% if item.title %} title="{{ item.title }}"{% endif %} data-bn-sidebar-link class="mb-caps flex items-center rounded-none text-sm text-muted-foreground transition-colors hover:text-[hsl(var(--accent))] hover:bg-accent {% if compact %}px-2 py-1.5{% else %}px-3 py-2{% endif %} {{ item.css_class }}">{% if item.icon %}<svg width="16" height="16" class="mr-2 h-4 w-4 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg>{% endif %}{{ item.label }}</a></li>
+<li><a href="{{ item.url|default:'#' }}"{% if item.open_in_new_tab %} target="_blank" rel="noopener"{% endif %}{% if item.title %} title="{{ item.title }}"{% endif %} data-bn-sidebar-link class="mb-caps flex items-center rounded-none text-sm text-muted-foreground transition-colors hover:text-[hsl(var(--accent))] hover:bg-accent {% if compact %}px-2 py-1.5{% else %}px-3 py-2{% endif %} {{ item.css_class }}">{% if item.icon %}<svg class="mr-2 h-4 w-4 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ item.icon|split:":"|first }}.svg#{{ item.icon|split:":"|last }}"></use></svg>{% endif %}{{ item.label }}</a></li>
 {% endfor %}
 </ul>
 </nav>

templates/overrides/magazine-bold/social-links.ninjatpl

@@ -4,7 +4,7 @@
     {% for link in links %}{% if link.url %}
     <li>
       <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ link.label|default:link.network }}" class="inline-flex items-center gap-2 rounded-none border border-[hsl(var(--border))] text-foreground transition-colors hover:border-[hsl(var(--accent))] hover:text-[hsl(var(--accent))] {% if style == "stack" %}w-full px-4 py-2.5{% else %}p-2.5{% endif %}">
-        {% if link.network %}<svg width="20" height="20" class="h-5 w-5 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ link.network|split:":"|first }}.svg#{{ link.network|split:":"|last }}"></use></svg>{% endif %}
+        {% if link.network %}<svg class="h-5 w-5 text-[hsl(var(--accent))]" aria-hidden="true"><use href="/icons/{{ link.network|split:":"|first }}.svg#{{ link.network|split:":"|last }}"></use></svg>{% endif %}
         {% if style == "stack" and link.label %}<span class="mb-caps text-xs tracking-[0.14em]">{{ link.label }}</span>{% endif %}
       </a>
     </li>

templates/overrides/magazine-bold/team.ninjatpl

@@ -11,7 +11,7 @@
           {% if member.role %}<p class="mb-caps text-xs text-muted-foreground">{{ member.role }}</p>{% endif %}
           {% if member.bio %}<p class="mt-2 text-sm text-muted-foreground" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{{ member.bio }}</p>{% endif %}
           {% if member.socials %}<div class="mt-3 flex gap-3 {% if layout != "list" %}justify-center{% endif %}">
-            {% for social in member.socials %}{% if social.url %}<a href="{{ social.url }}" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" aria-label="Social link"><svg width="20" height="20" class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ social.icon|split:":"|first }}.svg#{{ social.icon|split:":"|last }}"></use></svg></a>{% endif %}{% endfor %}
+            {% for social in member.socials %}{% if social.url %}<a href="{{ social.url }}" class="text-muted-foreground transition-colors hover:text-[hsl(var(--accent))]" aria-label="Social link"><svg class="h-5 w-5" aria-hidden="true"><use href="/icons/{{ social.icon|split:":"|first }}.svg#{{ social.icon|split:":"|last }}"></use></svg></a>{% endif %}{% endfor %}
           </div>{% endif %}
         </div>
       </div>

templates/overrides/magazine-bold/testimonial.ninjatpl

@@ -5,11 +5,11 @@
       {% for q in quotes %}
       <figure class="mb-panel flex flex-col bg-card p-6 text-card-foreground{% if layout == "carousel" %} min-w-[18rem] max-w-sm shrink-0 snap-start{% endif %}">
         {% if q.rating %}<div class="mb-3 flex justify-center gap-0.5" aria-label="Rated {{ q.rating }} out of 5">
-          <svg width="16" height="16" class="h-4 w-4 {% if q.rating >= 1 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
+          <svg class="h-4 w-4 {% if q.rating >= 1 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
-          <svg width="16" height="16" class="h-4 w-4 {% if q.rating >= 2 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
+          <svg class="h-4 w-4 {% if q.rating >= 2 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
-          <svg width="16" height="16" class="h-4 w-4 {% if q.rating >= 3 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
+          <svg class="h-4 w-4 {% if q.rating >= 3 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
-          <svg width="16" height="16" class="h-4 w-4 {% if q.rating >= 4 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
+          <svg class="h-4 w-4 {% if q.rating >= 4 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
-          <svg width="16" height="16" class="h-4 w-4 {% if q.rating >= 5 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
+          <svg class="h-4 w-4 {% if q.rating >= 5 %}text-[hsl(var(--accent))]{% else %}text-muted-foreground/30{% endif %}" aria-hidden="true"><use href="/icons/lucide.svg#star"></use></svg>
         </div>{% endif %}
         <blockquote class="flex-1 text-center text-lg leading-relaxed" style="font-family:var(--font-body, 'Inter', system-ui, sans-serif)">{% if q.quote %}&ldquo;{{ q.quote }}&rdquo;{% endif %}</blockquote>
         <div class="mx-auto my-4 flex items-center justify-center"><span class="mb-rule w-16"></span></div>

templates/overrides/magazine-bold/timeline.ninjatpl

@@ -6,7 +6,7 @@
       {% for step in steps %}
       <li class="{% if orientation == "horizontal" %}text-center{% else %}relative pl-14{% endif %}">
         <span class="mb-caps flex h-8 w-8 items-center justify-center border border-[hsl(var(--accent))] bg-card text-sm text-[hsl(var(--accent))] {% if orientation == "horizontal" %}mx-auto{% else %}absolute left-0 top-0 ring-4 ring-background{% endif %}">
-          {% if marker == "numbered" %}{{ forloop.counter }}{% elif marker == "dot" %}<span class="h-2 w-2 bg-[hsl(var(--accent))]"></span>{% else %}<svg width="16" height="16" class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#flag"></use></svg>{% endif %}
+          {% if marker == "numbered" %}{{ forloop.counter }}{% elif marker == "dot" %}<span class="h-2 w-2 bg-[hsl(var(--accent))]"></span>{% else %}<svg class="h-4 w-4" aria-hidden="true"><use href="/icons/lucide.svg#flag"></use></svg>{% endif %}
         </span>
         <div class="{% if orientation == "horizontal" %}mt-4{% else %}pt-1{% endif %}">
           {% if step.label %}<p class="mb-caps text-xs text-muted-foreground">{{ step.label }}</p>{% endif %}

templates/overrides/magazine-bold/utility-bar.ninjatpl

@@ -1,7 +1,7 @@
 {# utility-bar override — quiet contact strip on a hairline-bordered panel, small-caps labels. Fields mirror builtin: variant, showOnMobile, leftItems/rightItems {icon,label,link}. #}
 {% set ubcls = "mb-panel" %}
 {% if variant == "primary" %}{% set ubcls = "mb-panel" %}{% elif variant == "dark" %}{% set ubcls = "mb-panel" %}{% endif %}
-{% macro ubitem(it) %}{% if it.link %}<a href="{{ it.link }}" class="mb-caps inline-flex items-center gap-1.5 hover:text-[hsl(var(--accent))] transition-colors">{% if it.icon %}<svg width="20" height="20" class="inline-block h-5 w-5" aria-hidden="true"><use href="/icons/{{ it.icon|split:":"|first }}.svg#{{ it.icon|split:":"|last }}"></use></svg>{% endif %}{% if it.label %}<span>{{ it.label }}</span>{% endif %}</a>{% else %}<span class="mb-caps inline-flex items-center gap-1.5">{% if it.icon %}<svg width="20" height="20" class="inline-block h-5 w-5" aria-hidden="true"><use href="/icons/{{ it.icon|split:":"|first }}.svg#{{ it.icon|split:":"|last }}"></use></svg>{% endif %}{% if it.label %}<span>{{ it.label }}</span>{% endif %}</span>{% endif %}{% endmacro %}
+{% macro ubitem(it) %}{% if it.link %}<a href="{{ it.link }}" class="mb-caps inline-flex items-center gap-1.5 hover:text-[hsl(var(--accent))] transition-colors">{% if it.icon %}::{{ it.icon }}::{% endif %}{% if it.label %}<span>{{ it.label }}</span>{% endif %}</a>{% else %}<span class="mb-caps inline-flex items-center gap-1.5">{% if it.icon %}::{{ it.icon }}::{% endif %}{% if it.label %}<span>{{ it.label }}</span>{% endif %}</span>{% endif %}{% endmacro %}
 <div data-block-override="magazine-bold:utility-bar" class="w-full text-[0.7rem] {% if not showOnMobile %}hidden sm:block{% endif %} {{ ubcls }} {{ class }}">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-9 flex items-center justify-between gap-4">
 <div class="flex items-center gap-5 flex-wrap">{% for it in leftItems %}{{ ubitem(it) }}{% endfor %}</div>

templates/overrides/magazine-bold/video-embed.ninjatpl

@@ -1,5 +1,5 @@
 {# video-embed override — magazine-bold hairline frame; fluoro play medallion. Fields + facade JS mirror builtin verbatim: aspect, url, media, poster, title, caption. #}
-{% with aspect=aspect|default:"16:9" %}<figure data-block-override="magazine-bold:video-embed" class="bn-video my-8{% if class %} {{ class }}{% endif %}">{% if url or media %}<div class="bn-video-frame relative w-full overflow-hidden bg-muted {% if aspect == "4:3" %}aspect-[4/3]{% elif aspect == "1:1" %}aspect-square{% elif aspect == "21:9" %}aspect-[21/9]{% else %}aspect-video{% endif %}" data-bn-video data-video-url="{{ url|default:"" }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}"><button type="button" data-bn-video-play class="group absolute inset-0 flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" aria-label="Play video{% if title %}: {{ title }}{% endif %}">{% if poster %}{% img poster alt=title|default:"" class="absolute inset-0 h-full w-full object-cover" %}{% endif %}<span class="absolute inset-0 bg-foreground/10 transition-colors group-hover:bg-foreground/20" aria-hidden="true"></span><span class="relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-background/90 text-[hsl(var(--accent))] transition-transform group-hover:scale-105 motion-reduce:transform-none"><svg width="32" height="32" class="inline-block h-8 w-8" aria-hidden="true"><use href="/icons/lucide.svg#play"></use></svg></span></button></div>{% endif %}{% if caption %}<figcaption class="mt-3 text-center text-sm italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ caption }}</figcaption>{% endif %}</figure><script>
+{% with aspect=aspect|default:"16:9" %}<figure data-block-override="magazine-bold:video-embed" class="bn-video my-8{% if class %} {{ class }}{% endif %}">{% if url or media %}<div class="bn-video-frame relative w-full overflow-hidden bg-muted {% if aspect == "4:3" %}aspect-[4/3]{% elif aspect == "1:1" %}aspect-square{% elif aspect == "21:9" %}aspect-[21/9]{% else %}aspect-video{% endif %}" data-bn-video data-video-url="{{ url|default:"" }}" data-video-media="{% if media %}{{ media|mediaURL }}{% endif %}"><button type="button" data-bn-video-play class="group absolute inset-0 flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" aria-label="Play video{% if title %}: {{ title }}{% endif %}">{% if poster %}{% img poster alt=title|default:"" class="absolute inset-0 h-full w-full object-cover" %}{% endif %}<span class="absolute inset-0 bg-foreground/10 transition-colors group-hover:bg-foreground/20" aria-hidden="true"></span><span class="relative inline-flex h-16 w-16 items-center justify-center rounded-full bg-background/90 text-[hsl(var(--accent))] transition-transform group-hover:scale-105 motion-reduce:transform-none">::lucide:play:xl::</span></button></div>{% endif %}{% if caption %}<figcaption class="mt-3 text-center text-sm italic" style="color:hsl(var(--muted-foreground));font-family:var(--font-body, 'Inter', system-ui, sans-serif);">{{ caption }}</figcaption>{% endif %}</figure><script>
 (function(){
   if(window.__bnVideoFacade)return;window.__bnVideoFacade=true;
   function yt(u){var m=u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/);return m?m[1]:null;}