valknar/roux
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: replace all BEM CSS with Tailwind utility classes

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2026-05-18 18:06:55 +02:00
parent e3e9cf6742
commit 54a87dc4ed
15 changed files with 590 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+84 -236
View File
@@ -53,206 +53,72 @@ body {
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
/* ── paper grain overlay ── */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .06;
mix-blend-mode: multiply;
pointer-events: none; z-index: 1; opacity: .06; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ── masthead ── */
.masthead {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(14px) saturate(1.05);
background: color-mix(in oklab, var(--paper) 86%, transparent);
border-bottom: 1px solid var(--rule);
}
.masthead__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(12px, 2vw, 24px);
padding: 14px var(--pad);
}
.masthead__left, .masthead__right {
display: flex; align-items: center; gap: 18px;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-soft);
min-width: 0;
}
.masthead__left > *, .masthead__right > * { white-space: nowrap; }
.mh-link { position: relative; padding-bottom: 2px; transition: color .2s; }
.mh-link::after {
/* ── nav link animated underline ── */
.nav-link { position: relative; padding-bottom: 2px; transition: color .2s; }
.nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor; transform: scaleX(.5); transform-origin: left;
height: 1px; background: currentColor;
transform: scaleX(.5); transform-origin: left;
transition: transform .25s, background .2s;
}
.mh-link:hover { color: var(--ink); }
.mh-link:hover::after { transform: scaleX(1); background: var(--roux); }
.masthead__right { justify-content: flex-end; }
.masthead__date { font-variant-numeric: tabular-nums; }
.masthead__logo { display: block; line-height: 1; color: var(--ink); justify-self: center; }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); background: var(--roux); }
.logo { display: grid; grid-template-columns: auto; justify-items: center; gap: 4px; text-align: center; }
.logo__mark { width: 30px; height: 30px; display: block; }
.logo__word { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .045em; color: var(--ink); }
.logo__tag { font: 500 8.5px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
/* ── card animation (uses --d CSS custom property for stagger) ── */
@keyframes rouxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { animation: rouxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.card:hover .card-img { transform: scale(1.025); }
@media (max-width: 620px) {
.logo__mark { width: 22px; height: 22px; }
.logo__word { font-size: 22px; }
.logo__tag { font-size: 7.5px; letter-spacing: .28em; }
/* ── issue card animation ── */
[data-issue-card] {
opacity: 0; transform: translateY(8px);
animation: rouxIn .65s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: var(--d, 0ms);
}
@media (max-width: 1100px) { .masthead__left .mh-issue, .masthead__right .mh-city { display: none; } }
@media (max-width: 820px) { .masthead__left .mh-pub, .masthead__left .mh-sep, .masthead__right .mh-sep { display: none; } }
@media (max-width: 620px) { .masthead__inner { padding: 12px var(--pad); } .masthead__left { font-size: 10px; gap: 10px; } .masthead__right { font-size: 10px; gap: 10px; } }
@media (max-width: 460px) { .masthead__inner { grid-template-columns: 1fr; } .masthead__left, .masthead__right { display: none; } .masthead__logo { justify-self: center; } }
@supports (animation-timeline: view()) { [data-issue-card] { opacity: 1; transform: none; animation: none; } }
/* subhead: search bar */
.subhead {
display: flex; align-items: stretch;
border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule);
background: color-mix(in oklab, var(--paper) 95%, transparent);
position: relative;
}
.subhead__search {
flex: 1; display: flex; align-items: center; gap: 12px;
padding: 10px var(--pad); border-right: 1px solid var(--rule-2); min-width: 0;
}
.subhead__search input {
flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
font: 400 16px/1 var(--serif); font-style: italic; color: var(--ink); letter-spacing: .005em; padding: 6px 0;
}
.subhead__search input::placeholder { color: var(--ink-soft); opacity: .9; }
.subhead__kbd { flex: 0 0 auto; font: 500 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--rule); padding: 5px 7px; border-radius: 3px; color: var(--ink-soft); }
.subhead__count { display: flex; align-items: center; padding: 0 var(--pad); font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.subhead__count b { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (max-width: 720px) { .subhead__count { display: none; } .subhead__kbd { display: none; } .subhead__search input { font-size: 15px; } }
/* tabs */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--pad); border-bottom: 1px solid var(--rule-2); background: var(--paper); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.tabs button:hover { color: var(--ink); }
/* ── tabs: JS drives aria-pressed, CSS drives the active look ── */
.tabs button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
/* ── hero strip ── */
.hero {
padding: clamp(40px, 8vw, 96px) var(--pad) clamp(28px, 5vw, 64px);
display: grid; grid-template-columns: 1fr; gap: 18px;
border-bottom: 1px solid var(--rule);
}
.hero__eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.hero__eyebrow::before { content: ""; height: 1px; width: 36px; background: var(--ink-soft); }
.hero__title { margin: 0; font: 400 clamp(48px, 9vw, 132px)/0.92 var(--display); letter-spacing: -0.01em; }
.hero__title em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--roux); }
.hero__lede { max-width: 56ch; font: 400 clamp(16px, 1.4vw, 19px)/1.5 var(--serif); color: var(--ink-2); margin-top: 6px; }
.hero__lede em { color: var(--roux); font-style: italic; }
/* ── photo grid ── */
.grid {
padding: clamp(20px, 3vw, 40px) var(--pad) 80px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--gap);
row-gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
.grid[data-density="cozy"] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 88px; }
.grid[data-density="compact"] { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 56px; }
@media (max-width: 1200px) { .grid[data-density="cozy"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-density="compact"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid[data-density="cozy"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid[data-density="compact"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid[data-density="cozy"] { grid-template-columns: 1fr; } .grid[data-density="compact"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* card */
.card { display: block; cursor: pointer; }
.card__frame { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--paper-2); border-radius: 1px; }
.card__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(22,17,13,.04); pointer-events: none; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.1,1), filter .6s; filter: saturate(.92) contrast(1.02); }
.card:hover .card__img { transform: scale(1.025); }
.card__num { position: absolute; top: 10px; left: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; color: var(--paper); mix-blend-mode: difference; font-variant-numeric: tabular-nums; }
.card__cat { position: absolute; top: 10px; right: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); mix-blend-mode: difference; }
.card__issue { position: absolute; bottom: 10px; left: 10px; font: 500 10px/1 var(--sans); letter-spacing: .18em; color: var(--paper); mix-blend-mode: difference; font-variant-numeric: tabular-nums; }
.card__meta { margin-top: 14px; display: grid; gap: 4px; }
.card__title { font: 400 clamp(20px, 1.6vw, 26px)/1.1 var(--display); letter-spacing: 0; margin: 0; }
.card__title em { font-family: var(--serif); font-style: italic; color: var(--roux); }
.card__sub { font: 400 12px/1.4 var(--sans); letter-spacing: .04em; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.card__sub .dot { width: 3px; height: 3px; background: var(--ink-soft); border-radius: 50%; opacity: .5; }
.card__desc { font: 400 13px/1.5 var(--serif); color: var(--ink-2); font-style: italic; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* highlight matches */
/* ── search highlight ── */
mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 1px; }
/* ── issues archive ── */
.issues-grid {
padding: clamp(20px, 3vw, 40px) var(--pad) 80px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(36px, 5vw, 64px);
/* ── search popup (position + display driven by JS) ── */
.searchpop {
position: absolute; top: calc(100% - 1px); left: 0; right: 0;
background: var(--paper); border: 1px solid var(--rule); border-top: 0;
max-height: min(70vh, 620px); overflow: auto; display: none; z-index: 60;
box-shadow: 0 24px 60px -30px rgba(22,17,13,.35);
}
@media (max-width: 820px) { .issues-grid { grid-template-columns: 1fr; } }
.issue-card {
display: grid; grid-template-columns: 240px 1fr;
gap: clamp(20px, 2.4vw, 36px); align-items: start;
color: inherit;
padding-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--rule-2);
}
@media (max-width: 560px) { .issue-card { grid-template-columns: 160px 1fr; } }
.issue-card--forthcoming { color: var(--ink-soft); cursor: default; }
.issue-card__cover { aspect-ratio: 2/3; overflow: hidden; background: var(--paper-2); position: relative; }
.issue-card__cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(22,17,13,.04); }
.issue-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.1,1); }
.issue-card:not(.issue-card--forthcoming):hover .issue-card__cover img { transform: scale(1.025); }
.issue-card__forth { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--ink-soft); font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; border: 1px dashed var(--rule); margin: 12px; }
.issue-card__forth svg { opacity: .5; }
.issue-card__meta { padding-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.issue-card__num { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.issue-card__title { margin: 0; font: 400 clamp(28px, 3vw, 44px)/1.0 var(--display); letter-spacing: -0.005em; }
.issue-card__title em { font-family: var(--serif); font-style: italic; color: var(--roux); font-weight: 300; }
.issue-card--forthcoming .issue-card__title { color: var(--ink-soft); }
.issue-card__blurb { font: 400 14.5px/1.55 var(--serif); font-style: italic; color: var(--ink-2); margin: 0; max-width: 52ch; }
.issue-card__foot { margin-top: 4px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font: 500 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); width: 100%; }
.issue-card__foot > span:first-child { flex: 1; min-width: 0; }
.issue-card__cta { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; letter-spacing: .14em; }
.issue-card__cta--muted { color: var(--ink-soft); border-bottom-color: var(--rule); }
/* ── empty state ── */
.empty { grid-column: 1/-1; padding: 80px 0; text-align: center; color: var(--ink-soft); }
.empty h3 { font: 400 28px/1.2 var(--display); color: var(--ink); margin: 0 0 8px; }
.empty button { margin-top: 16px; border: 1px solid var(--ink); padding: 9px 18px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.empty button:hover { background: var(--ink); color: var(--paper); }
/* ── search popup ── */
.searchpop { position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--rule); border-top: 0; max-height: min(70vh, 620px); overflow: auto; display: none; z-index: 60; box-shadow: 0 24px 60px -30px rgba(22,17,13,.35); }
.searchpop[data-open="true"] { display: block; }
.searchpop__section { padding: 12px var(--pad); border-bottom: 1px solid var(--rule-2); }
.searchpop__section:last-child { border-bottom: 0; }
.searchpop__label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.searchpop__label small { font-family: var(--mono); letter-spacing: 0; font-size: 10px; }
.searchpop__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.searchpop__chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.searchpop__chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.searchpop__chip b { color: var(--roux); font-weight: 600; }
.searchpop__hits { display: grid; gap: 2px; }
.searchpop__hit { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 3px; text-align: left; width: 100%; }
.searchpop__hit:hover { background: var(--paper-2); }
.searchpop__hit img { width: 44px; height: 66px; object-fit: cover; background: var(--paper-2); }
.searchpop__hit .t { font: 400 18px/1.1 var(--display); }
.searchpop__hit .s { font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px; }
.searchpop__hit .n { font: 500 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .1em; }
.sp-section { padding: 12px var(--pad); border-bottom: 1px solid var(--rule-2); }
.sp-section:last-child { border-bottom: 0; }
.sp-label { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.sp-label small { font-family: var(--mono); letter-spacing: 0; font-size: 10px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.sp-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-chip b { color: var(--roux); font-weight: 600; }
.sp-hits { display: grid; gap: 2px; }
.sp-hit { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 8px 6px; border-radius: 3px; text-align: left; width: 100%; }
.sp-hit:hover { background: var(--paper-2); }
.sp-hit img { width: 44px; height: 66px; object-fit: cover; background: var(--paper-2); }
.sp-hit .t { font: 400 18px/1.1 var(--display); }
.sp-hit .s { font: 400 12px/1.3 var(--sans); color: var(--ink-soft); margin-top: 3px; }
.sp-hit .n { font: 500 10px/1 var(--mono); color: var(--ink-soft); letter-spacing: .1em; }
/* ── lightbox ── */
.lb {
@@ -267,68 +133,50 @@ mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color:
@media (max-width: 920px) {
.lb { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "topbar" "stage" "meta" "thumbs"; }
}
.lb__topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(236,231,221,.08); }
.lb__brand { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c8c0b1; }
.lb__brand svg { height: 18px; }
.lb__index { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #c8c0b1; font-variant-numeric: tabular-nums; }
.lb__index b { color: #ece7dd; }
.lb__close { width: 36px; height: 36px; border: 1px solid rgba(236,231,221,.18); border-radius: 50%; display: grid; place-items: center; color: #ece7dd; }
.lb__close:hover { background: rgba(236,231,221,.08); }
.lb__stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; min-height: 0; }
.lb__track { position: absolute; inset: 0; display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
.lb__slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.lb__frame { position: relative; aspect-ratio: 2/3; height: 100%; max-width: 100%; background: #1a1411; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(236,231,221,.04); }
.lb__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(236,231,221,.06); border: 1px solid rgba(236,231,221,.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #ece7dd; z-index: 5; transition: background .2s; }
.lb__nav:hover { background: rgba(236,231,221,.14); }
.lb__nav--prev { left: 18px; }
.lb__nav--next { right: 18px; }
.lb__meta { grid-area: meta; padding: 28px 28px 22px; border-left: 1px solid rgba(236,231,221,.08); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
@media (max-width: 920px) { .lb__meta { border-left: 0; border-top: 1px solid rgba(236,231,221,.08); padding: 18px 22px; max-height: 38vh; } }
.lb__cat { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--roux); }
.lb__cat::after { content: ""; display: block; height: 1px; width: 30px; background: var(--roux); margin-top: 8px; }
.lb__title { margin: 0; font: 400 clamp(32px, 3vw, 44px)/1 var(--display); letter-spacing: -0.005em; color: #f5f0e6; }
.lb__title em { font-family: var(--serif); font-style: italic; color: #d99e8e; font-weight: 300; }
.lb__desc { font: 400 16px/1.55 var(--serif); font-style: italic; color: #c8c0b1; }
.lb__factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid rgba(236,231,221,.08); border-bottom: 1px solid rgba(236,231,221,.08); padding: 16px 0; }
.lb__fact dt { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9b9384; margin-bottom: 5px; }
.lb__fact dd { margin: 0; font: 400 14px/1.3 var(--serif); color: #ece7dd; }
.lb__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb__tag { padding: 5px 10px; border: 1px solid rgba(236,231,221,.18); border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: lowercase; color: #ece7dd; }
.lb__tag:hover { background: rgba(236,231,221,.08); }
.lb__share { margin-top: auto; display: flex; gap: 8px; }
.lb__sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(236,231,221,.2); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ece7dd; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lb__sh--primary { flex: 1; min-width: 0; }
.lb__sh:not(.lb__sh--primary) { width: 44px; padding: 11px 0; flex: 0 0 auto; }
.lb__sh:hover { background: #ece7dd; color: #0c0907; border-color: #ece7dd; }
.lb__sh.is-ok { background: rgba(236,231,221,.08); color: #ece7dd; border-color: rgba(236,231,221,.32); }
.lb__thumbs { grid-area: thumbs; display: flex; gap: 6px; padding: 12px 22px 16px; overflow-x: auto; border-top: 1px solid rgba(236,231,221,.08); scrollbar-width: thin; scrollbar-color: rgba(236,231,221,.16) transparent; }
.lb__thumb { flex: 0 0 auto; width: 42px; aspect-ratio: 2/3; background: #1a1411; border: 1px solid transparent; opacity: .45; transition: opacity .2s, border-color .2s; position: relative; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb[aria-current="true"] { opacity: 1; border-color: var(--roux); }
.lb__thumb[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--roux); }
/* ── footer ── */
.foot { border-top: 1px solid var(--rule); padding: 36px var(--pad) 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; font: 400 12px/1.5 var(--sans); color: var(--ink-soft); }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot h4 { font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.foot a:hover { color: var(--ink); }
.foot__roux { font: 400 clamp(60px, 8vw, 110px)/0.92 var(--display); color: var(--ink); margin: 0 0 14px; }
.foot__roux em { font-family: var(--serif); font-style: italic; color: var(--roux); font-weight: 300; }
.lb-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(236,231,221,.08); }
.lb-brand { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #c8c0b1; }
.lb-brand svg { height: 18px; }
.lb-index { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: #c8c0b1; font-variant-numeric: tabular-nums; }
.lb-index b { color: #ece7dd; }
.lb-close { width: 36px; height: 36px; border: 1px solid rgba(236,231,221,.18); border-radius: 50%; display: grid; place-items: center; color: #ece7dd; }
.lb-close:hover { background: rgba(236,231,221,.08); }
.lb-stage { grid-area: stage; position: relative; overflow: hidden; display: grid; place-items: center; padding: 24px; min-height: 0; }
.lb-track { position: absolute; inset: 0; display: flex; transition: transform .55s cubic-bezier(.4,.0,.2,1); will-change: transform; }
.lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; min-width: 0; }
.lb-frame { position: relative; aspect-ratio: 2/3; height: 100%; max-width: 100%; background: #1a1411; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(236,231,221,.04); }
.lb-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(236,231,221,.06); border: 1px solid rgba(236,231,221,.16); backdrop-filter: blur(8px); display: grid; place-items: center; color: #ece7dd; z-index: 5; transition: background .2s; }
.lb-nav:hover { background: rgba(236,231,221,.14); }
.lb-nav-prev { left: 18px; }
.lb-nav-next { right: 18px; }
.lb-meta { grid-area: meta; padding: 28px 28px 22px; border-left: 1px solid rgba(236,231,221,.08); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
@media (max-width: 920px) { .lb-meta { border-left: 0; border-top: 1px solid rgba(236,231,221,.08); padding: 18px 22px; max-height: 38vh; } }
.lb-cat { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--roux); }
.lb-cat::after { content: ""; display: block; height: 1px; width: 30px; background: var(--roux); margin-top: 8px; }
.lb-title { margin: 0; font: 400 clamp(32px,3vw,44px)/1 var(--display); letter-spacing: -0.005em; color: #f5f0e6; }
.lb-title em { font-family: var(--serif); font-style: italic; color: #d99e8e; font-weight: 300; }
.lb-desc { font: 400 16px/1.55 var(--serif); font-style: italic; color: #c8c0b1; }
.lb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid rgba(236,231,221,.08); border-bottom: 1px solid rgba(236,231,221,.08); padding: 16px 0; }
.lb-fact dt { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #9b9384; margin-bottom: 5px; }
.lb-fact dd { margin: 0; font: 400 14px/1.3 var(--serif); color: #ece7dd; }
.lb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-tag { padding: 5px 10px; border: 1px solid rgba(236,231,221,.18); border-radius: 999px; font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: lowercase; color: #ece7dd; }
.lb-tag:hover { background: rgba(236,231,221,.08); }
.lb-share { margin-top: auto; display: flex; gap: 8px; }
.lb-sh { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid rgba(236,231,221,.2); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ece7dd; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lb-sh-primary { flex: 1; min-width: 0; }
.lb-sh:not(.lb-sh-primary) { width: 44px; padding: 11px 0; flex: 0 0 auto; }
.lb-sh:hover { background: #ece7dd; color: #0c0907; border-color: #ece7dd; }
.lb-sh.is-ok { background: rgba(236,231,221,.08); color: #ece7dd; border-color: rgba(236,231,221,.32); }
.lb-thumbs { grid-area: thumbs; display: flex; gap: 6px; padding: 12px 22px 16px; overflow-x: auto; border-top: 1px solid rgba(236,231,221,.08); scrollbar-width: thin; scrollbar-color: rgba(236,231,221,.16) transparent; }
.lb-thumb { flex: 0 0 auto; width: 42px; aspect-ratio: 2/3; background: #1a1411; border: 1px solid transparent; opacity: .45; transition: opacity .2s, border-color .2s; position: relative; }
.lb-thumb:hover { opacity: .8; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb[aria-current="true"] { opacity: 1; border-color: var(--roux); }
.lb-thumb[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--roux); }
/* ── ribbon ── */
.ribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; transform: translateY(0); transition: transform .4s; }
.ribbon.hidden { transform: translateY(100%); }
.ribbon a { color: var(--roux); font-weight: 600; }
.ribbon button { color: var(--paper); opacity: .7; }
.ribbon button:hover { opacity: 1; }
/* ── animations ── */
@keyframes rouxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { animation: rouxIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.issue-card { opacity: 0; transform: translateY(8px); animation: rouxIn .65s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0ms); }
@supports (animation-timeline: view()) { .issue-card { opacity: 1; transform: none; animation: none; } }
/* ── view transitions ── */
::view-transition-old(root) { animation: 150ms ease-out roux-fade-out; }