Refactor: replace all BEM CSS with Tailwind utility classes

Remove all BEM component classes (hero__*, card__*, issue-card__*, foot__*,
masthead__*, searchpop__*, lb__*) from CSS and templates. Replace with
Tailwind v4 utility classes inline in HTML. Create card.html partial to
avoid repeating verbose utility strings across grid templates. Rename
lightbox CSS to flat lb-* and search popup to sp-*.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

layouts/index.html

@@ -1,55 +1,24 @@
 {{ define "main" }}
-<section class="hero" id="hero">
-  <div class="hero__eyebrow">
+<section id="hero" class="px-[var(--pad)] pt-[clamp(36px,5vw,64px)] pb-[clamp(28px,3.5vw,48px)] border-b border-[var(--rule)]">
+  <div class="font-sans font-medium text-[10px] leading-none tracking-[.22em] uppercase text-ink-soft mb-4">
     № {{ .Site.Params.issueNumber }} · {{ .Site.Params.issueSeason }} ·
-    <a href="/issues/" style="border-bottom:1px solid currentColor;margin-left:6px">View all issues</a>
+    <a href="/issues/" class="border-b border-current ml-1">View all issues</a>
   </div>
-  <h1 class="hero__title">An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.</h1>
-  <p class="hero__lede">
+  <h1 class="font-display font-normal text-[clamp(48px,7vw,96px)] leading-[0.94] m-0 mb-4">
+    An almanac<br/>of <em>fabric, light</em>,<br/>and gesture.
+  </h1>
+  <p class="font-serif italic text-[clamp(13px,1vw,16px)] leading-[1.65] text-ink-2 max-w-[55ch] m-0">
     Roux is a slow-publishing fashion journal — one hundred photographs at a time,
     gathered from <em>ateliers, streets, glasshouses and quiet hotel corridors</em>.
     You are reading <em>{{ .Site.Params.issueName }}</em>, our № {{ .Site.Params.issueNumber }} issue.
   </p>
 </section>
 
-<section class="grid" id="grid" data-density="default">
+<section id="grid" data-density="default"
+         class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-[var(--gap)] px-[var(--pad)] py-[var(--gap)]">
   {{- $posts := where .Site.RegularPages "Section" "posts" }}
   {{- range $i, $p := $posts }}
-    {{- $img  := $p.Resources.GetMatch "*.png" }}
-    {{- $card := "" }}
-    {{- $full := "" }}
-    {{- if $img }}
-      {{- $c := $img.Resize "600x900 webp" }}
-      {{- $card = $c.RelPermalink }}
-    {{- end }}
-    <a class="card"
-       href="{{ $p.RelPermalink }}"
-       style="--d:{{ mul (math.Min $i 18) 24 }}ms"
-       data-id="{{ $p.Params.plate }}"
-       data-slug="{{ $p.Params.slug }}">
-      <div class="card__frame">
-        <picture>
-          {{- if $img }}
-            {{- $w := $img.Resize "600x900 webp" }}
-            <source srcset="{{ $w.RelPermalink }}" type="image/webp" />
-            <img class="card__img"
-                 loading="{{ if lt $i 8 }}eager{{ else }}lazy{{ end }}"
-                 src="{{ $w.RelPermalink }}"
-                 alt="{{ $p.Title }} — Roux Plate №{{ $p.Params.plate }}" />
-          {{- end }}
-        </picture>
-        <span class="card__num">PLATE №{{ $p.Params.plate }}</span>
-        <span class="card__cat">{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
-        <span class="card__issue">№ {{ index ($p.Params.issues | default (slice "01")) 0 }}</span>
-      </div>
-      <div class="card__meta">
-        <h2 class="card__title">{{ $p.Title }}</h2>
-        <div class="card__sub">
-          <span>{{ index ($p.Params.categories | default (slice "")) 0 }}</span>
-        </div>
-        <p class="card__desc">{{ $p.Params.description }}</p>
-      </div>
-    </a>
+    {{- partial "card.html" (dict "Page" $p "Index" $i) }}
   {{- end }}
 </section>
 {{ end }}