*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
:focus-visible{outline:3px solid var(--focus,#E9916F);outline-offset:2px;}
button{font:inherit;}
:root{
--bg:#0C0D08; --surface:#181A12; --fg:#F2F3EA; --fg-muted:#A0A492; --border:#2A2D20;
--accent:#C9B978; --accent2:#8F9A82; --accent-text:#D8C98A; --on-accent:#14150C;
--focus:#D8C98A;
--scrim:#0A0B06; --poster-fg:#FFFFFF; --poster-dek:#DCDDCC;
--poster-kick:#E4D9A6; --poster-kick-bg:#14150C;
--hairline:rgba(216,201,138,.30);
--foil:linear-gradient(100deg,#F5EDCB 0%,#D8C98A 28%,#AB923F 46%,#EFE3B4 62%,#C9B978 80%,#96833B 100%);
--wm:rgba(216,201,138,.09);
--shadow:0 1px 2px rgba(0,0,0,.55);
--lift:0 26px 60px -30px rgba(0,0,0,.9);
--blob:radial-gradient(58% 70% at 78% 18%,rgba(201,185,120,.22),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(143,154,130,.20),transparent 72%);
--metal:radial-gradient(40% 34% at 30% 24%,rgba(255,255,255,.92),rgba(255,255,255,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(216,201,138,.55),rgba(216,201,138,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(10,11,6,.55),rgba(10,11,6,0) 72%),
conic-gradient(from 218deg at 50% 42%,#757B66,#EDEBDC 12%,#8B907C 26%,#F5F3E7 38%,#565B49 52%,#D3CFB8 64%,#6E7362 78%,#E9E6D4 90%,#757B66);
--metal-shadow:inset -16px -20px 36px rgba(0,0,0,.32),inset 10px 12px 26px rgba(255,255,255,.10),
0 30px 60px -34px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
--bg:#F5F5EF; --surface:#FFFFFF; --fg:#111208; --fg-muted:#565946; --border:#DEDFD2;
--accent:#6B5A17; --accent2:#6F7A63; --accent-text:#6B5A17; --on-accent:#FFFFFF;
--focus:#6B5A17;
--hairline:rgba(107,90,23,.32);
--foil:linear-gradient(100deg,#3E340A 0%,#6B5A17 30%,#8A752A 48%,#57470F 64%,#7A671F 82%,#4A3E0E 100%);
--wm:rgba(107,90,23,.09);
--shadow:0 1px 2px rgba(17,18,8,.08);
--lift:0 22px 50px -26px rgba(17,18,8,.28);
--blob:radial-gradient(58% 70% at 78% 18%,rgba(107,90,23,.10),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(111,122,99,.12),transparent 72%);
--metal:radial-gradient(40% 34% at 30% 24%,rgba(255,255,255,.96),rgba(255,255,255,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(154,140,78,.45),rgba(154,140,78,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(17,18,8,.28),rgba(17,18,8,0) 72%),
conic-gradient(from 218deg at 50% 42%,#B4B7A4,#FFFFFF 12%,#C6C9B6 26%,#FBFAF2 38%,#8F947E 52%,#EDEBDC 64%,#A6AA96 78%,#FFFFFF 90%,#B4B7A4);
--metal-shadow:inset -16px -20px 36px rgba(17,18,8,.16),inset 10px 12px 26px rgba(255,255,255,.55),
0 26px 54px -30px rgba(17,18,8,.30);
}
}
:root[data-theme="light"]{
--bg:#F5F5EF; --surface:#FFFFFF; --fg:#111208; --fg-muted:#565946; --border:#DEDFD2;
--accent:#6B5A17; --accent2:#6F7A63; --accent-text:#6B5A17; --on-accent:#FFFFFF;
--focus:#6B5A17;
--hairline:rgba(107,90,23,.32);
--foil:linear-gradient(100deg,#3E340A 0%,#6B5A17 30%,#8A752A 48%,#57470F 64%,#7A671F 82%,#4A3E0E 100%);
--wm:rgba(107,90,23,.09);
--shadow:0 1px 2px rgba(17,18,8,.08);
--lift:0 22px 50px -26px rgba(17,18,8,.28);
--blob:radial-gradient(58% 70% at 78% 18%,rgba(107,90,23,.10),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(111,122,99,.12),transparent 72%);
--metal:radial-gradient(40% 34% at 30% 24%,rgba(255,255,255,.96),rgba(255,255,255,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(154,140,78,.45),rgba(154,140,78,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(17,18,8,.28),rgba(17,18,8,0) 72%),
conic-gradient(from 218deg at 50% 42%,#B4B7A4,#FFFFFF 12%,#C6C9B6 26%,#FBFAF2 38%,#8F947E 52%,#EDEBDC 64%,#A6AA96 78%,#FFFFFF 90%,#B4B7A4);
--metal-shadow:inset -16px -20px 36px rgba(17,18,8,.16),inset 10px 12px 26px rgba(255,255,255,.55),
0 26px 54px -30px rgba(17,18,8,.30);
}
body{
background:var(--bg); color:var(--fg);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:800;letter-spacing:-0.035em;}
.wrap{max-width:1300px;margin:0 auto;padding:0 20px;}
/* ---------------- masthead: the ENORMOUS lowercase wordmark -------------
The wordmark IS the masthead. Very large, tracking-tight, lowercase, over a
hairline gold nav strip. Not sticky: a 60px wordmark pinned to every scroll
would eat the poster book, and the luxe register wants the page to open like
a cover, not a toolbar. */
.masthead{background:var(--bg);border-bottom:1px solid var(--hairline);}
.mast-in{max-width:1300px;margin:0 auto;padding:22px 20px 8px;display:flex;align-items:center;gap:16px;}
.brand{font-size:33px;font-weight:900;letter-spacing:-0.06em;text-transform:lowercase;
text-decoration:none;color:var(--fg);flex:1 1 auto;min-width:0;line-height:.95;}
.brand:hover{color:var(--accent-text);}
.icons{margin-left:auto;flex:0 0 auto;}
.theme-btn{background:transparent;border:1px solid var(--hairline);border-radius:999px;
width:44px;height:44px;cursor:pointer;color:var(--fg);}
.theme-btn:hover{border-color:var(--accent);color:var(--accent-text);}
.nav{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch;}
.nav a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:11px;font-weight:700;
color:var(--fg-muted);padding:0 14px;min-height:44px;white-space:nowrap;flex:0 0 auto;
border-radius:0;text-transform:uppercase;letter-spacing:.22em;background:none;}
.nav a:hover{color:var(--fg);background:none;}
.nav a[aria-current]{color:var(--accent-text);background:none;box-shadow:inset 0 -1px 0 var(--accent);}
.nav-strip{max-width:1300px;margin:0 auto;padding:0 14px;border-top:1px solid var(--hairline);}
.navlink{border-radius:0;text-transform:uppercase;letter-spacing:.22em;font-size:11px;}
.nav .dropdown{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--lift);}
.masthead .nav .dropdown a{border-radius:10px;text-transform:none;letter-spacing:.02em;font-size:13px;}
/* ---------------- ticker (styled even though this aura runs without it) -- */
.ticker{background:var(--bg);border-bottom:1px solid var(--hairline);display:flex;
align-items:center;gap:14px;padding:0 20px;overflow:hidden;}
.ticker-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
text-transform:uppercase;letter-spacing:.24em;color:var(--accent-text);flex:0 0 auto;}
.ticker-track{display:flex;gap:26px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.ticker-track a{font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:none;}
.ticker-track a:hover{color:var(--accent-text);}
/* ---------------- hero: liquid-chrome blob behind a split lead ----------- */
.hero{padding:34px 0 10px;position:relative;isolation:isolate;}
/* The glow bleeds to the edge of .wrap's 20px gutter and no further. A wider
negative inset pushed the page 20px past the viewport and produced a
horizontal scrollbar at 390px. The metal blob below obeys the same -20px cap. */
.hero::before{content:"";position:absolute;inset:-30px -20px 0;z-index:-2;background:var(--blob);
filter:blur(6px);pointer-events:none;}
/* Liquid-chrome blob peeking out from behind the hero image's top-left corner.
z-index -1 inside the isolated hero keeps it under the image and under every
line of text; on mobile it sits entirely within the image band. */
.hero::after{content:"";position:absolute;z-index:-1;top:2px;left:-14px;width:172px;height:150px;
background:var(--metal);border-radius:62% 38% 56% 44%/48% 62% 38% 52%;
box-shadow:var(--metal-shadow);transform:rotate(-16deg);pointer-events:none;}
.hero > div{display:grid;gap:20px;}
.hero .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--border);border-radius:22px;
box-shadow:var(--lift);border:1px solid var(--hairline);}
.ratio-img{width:100%;height:100%;object-fit:cover;}
.htext{min-width:0;}
.hero h1{font-size:33px;line-height:1.04;margin:12px 0;letter-spacing:-0.05em;}
.hero h1 a{text-decoration:none;color:var(--fg);}
.hero h1 a:hover{color:var(--accent-text);}
/* Gold foil text-gradient, hero H1 ONLY. Solid var(--fg) fallback above wins
wherever background-clip:text is unsupported; excluded from contrast pairs. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero h1 a{background-image:var(--foil);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;}
.hero h1 a:hover{-webkit-text-fill-color:var(--accent-text);}
}
.hero .dek{color:var(--fg-muted);font-size:16.5px;margin:0 0 12px;line-height:1.5;}
.hero .meta{display:flex;gap:14px;font-size:10.5px;color:var(--fg-muted);font-weight:700;
flex-wrap:wrap;text-transform:uppercase;letter-spacing:.16em;}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.24em;color:var(--accent-text);text-decoration:none;
background:none;border:1px solid var(--hairline);padding:7px 15px;border-radius:999px;}
.kicker:hover{border-color:var(--accent);}
@media(min-width:768px){
.hero{padding:46px 0 12px;}
.hero::after{top:12px;left:-20px;width:300px;height:262px;}
.hero > div{grid-template-columns:1.15fr 1fr;align-items:center;gap:34px;}
.hero h1{font-size:48px;}
.brand{font-size:46px;}
.mast-in{padding:26px 20px 12px;}
}
@media(min-width:1280px){.hero h1{font-size:60px;}.brand{font-size:58px;}}
/* ---------------- section headings with a gold hairline ------------------ */
.sec{padding:26px 0;}
.sec-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.26em;
margin:0 0 20px;color:var(--fg-muted);display:flex;align-items:center;gap:12px;}
.sec-h a{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none;}
.sec-h a:hover{color:var(--accent-text);}
.sec-h .ic{color:var(--accent-text);}
.sec-h::after{content:"";flex:1 1 auto;height:1px;
background:linear-gradient(90deg,var(--accent),var(--hairline) 45%,transparent 100%);}
/* ---------------- POSTER STACK (this aura's unique composition) ---------
.poster .ratio is a 16/9 positioned frame. .poster-img fills it absolutely,
.poster-scrim is an absolutely positioned gradient that ramps to a fully
opaque floor, and .poster-txt is pinned to the bottom above both.
Every text element is line-clamped, so the text block is height-bounded and
can never overflow the panel or climb above the dark part of the scrim. */
.posterstack{display:grid;gap:16px;position:relative;counter-reset:poster;}
/* Two more liquid-chrome blobs float in the seams BETWEEN poster panels, at
negative z-index so the panels overlap them; only crescents surface in the
gaps and gutters. Horizontal offsets capped at -20px (the .wrap gutter). */
.posterstack::before,.posterstack::after{content:"";position:absolute;z-index:-1;
background:var(--metal);box-shadow:var(--metal-shadow);pointer-events:none;}
/* NB: no transform on this right-edge blob. Rotating the box extends its
BOUNDING RECT past right:-20px and reintroduces the horizontal scrollbar
at 390px; the tilted look comes from the asymmetric radii instead. */
.posterstack::before{top:21%;right:-20px;width:220px;height:196px;
border-radius:64% 36% 42% 58%/46% 64% 36% 54%;}
.posterstack::after{top:68%;left:-20px;width:190px;height:172px;
border-radius:44% 56% 48% 52%/58% 44% 56% 42%;transform:rotate(-14deg);}
.poster{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--hairline);
background:var(--surface);box-shadow:var(--lift);counter-increment:poster;}
/* Editorial index numeral (01, 02 ...) stamped over the art at low opacity.
It paints UNDER the scrim and the text layers, so the measured contrast on
the opaque scrim floor is untouched. Alt-text syntax silences it for AT
where supported; overflow:hidden on .poster clips it inside the panel. */
.poster::before{content:counter(poster,decimal-leading-zero);
content:counter(poster,decimal-leading-zero) / "";
position:absolute;top:-10px;right:8px;z-index:1;pointer-events:none;
font-size:clamp(96px,20vw,220px);line-height:1;font-weight:900;letter-spacing:-0.06em;
color:rgba(255,220,197,0.17);font-variant-numeric:tabular-nums;}
.poster .ratio{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--border);}
.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.poster-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,
rgba(54,17,3,0.2) 0%,
rgba(54,17,3,0.52) 22%,
rgba(54,17,3,0.88) 42%,
rgba(54,17,3,0.97) 72%,
#361103 100%);}
.poster-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 16px 14px;
display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.poster .kicker{color:var(--poster-kick);background:var(--poster-kick-bg);
border-color:rgba(255,175,145,0.42);}
.poster .kicker:hover{border-color:var(--poster-kick);}
.poster h3{margin:0;font-size:21px;line-height:1.12;letter-spacing:-0.05em;font-weight:900;}
.poster h3 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
overflow:hidden;text-decoration:none;color:var(--poster-fg);min-height:44px;}
.poster h3 a:hover{color:var(--poster-kick);}
.poster .dek{margin:0;color:var(--poster-dek);font-size:12.5px;line-height:1.4;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;}
@media(min-width:768px){
.posterstack{gap:22px;}
.posterstack::before{width:320px;height:284px;}
.posterstack::after{width:270px;height:244px;}
.poster{border-radius:28px;}
.poster-txt{padding:0 26px 22px;gap:8px;}
.poster h3{font-size:34px;line-height:1.08;}
.poster .dek{font-size:14px;line-height:1.5;-webkit-line-clamp:2;line-clamp:2;}
}
@media(min-width:1280px){
.poster-txt{padding:0 40px 30px;gap:10px;max-width:1020px;}
.poster h3{font-size:54px;line-height:1.06;}
.poster h3 a{-webkit-line-clamp:3;line-clamp:3;}
.poster .dek{font-size:16px;}
}
/* ---------------- card river: no boxes, gold hairline shelves ----------- */
.grid,.feed{display:grid;gap:26px 20px;grid-template-columns:1fr;}
@media(min-width:768px){.grid,.feed{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1280px){.grid,.feed{grid-template-columns:repeat(3,1fr);}}
.item,.card{background:none;border:0;border-top:1px solid var(--hairline);border-radius:0;
overflow:visible;box-shadow:none;padding-top:16px;transition:border-color .2s ease;}
.item:hover,.card:hover{border-top-color:var(--accent);}
.item .ratio,.card .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--border);
border-radius:18px;border:1px solid var(--hairline);}
.item-img,.card-img{width:100%;height:100%;object-fit:cover;}
.item-body,.card-body{padding:14px 2px 0;}
.item h3,.card h3{font-size:17.5px;margin:8px 0 6px;line-height:1.26;font-weight:800;letter-spacing:-0.03em;}
.item h3 a,.card h3 a{text-decoration:none;color:var(--fg);}
.item h3 a:hover,.card h3 a:hover{color:var(--accent-text);}
.item .dek{color:var(--fg-muted);font-size:13.5px;margin:2px 0 10px;line-height:1.5;}
.item .meta,.card .meta{display:flex;gap:12px;font-size:10px;color:var(--fg-muted);
font-weight:700;text-transform:uppercase;letter-spacing:.16em;flex-wrap:wrap;}
/* ---------------- columns, rails, panels -------------------------------- */
.cols{display:block;}
.side{margin-top:28px;}
@media(min-width:1280px){
.cols{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;}
.side{position:sticky;top:24px;margin-top:0;}
}
.panel{background:none;border:0;border-top:1px solid var(--hairline);border-radius:0;
padding:18px 0 6px;margin-bottom:20px;box-shadow:none;}
.panel h4{margin:0 0 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.26em;
color:var(--fg-muted);font-weight:800;display:inline-flex;align-items:center;gap:9px;}
.panel h4 .ic{color:var(--accent-text);}
.trending ol{list-style:none;margin:0;padding:0;}
.trending li{display:flex;gap:13px;padding:0;border-top:1px solid var(--border);align-items:center;}
.trending li:first-child{border-top:0;}
.tnum{font-weight:900;color:var(--accent-text);width:24px;flex:0 0 24px;font-size:12px;
letter-spacing:-0.02em;}
.trending a{text-decoration:none;font-size:13.5px;font-weight:600;line-height:1.35;}
.trending a:hover{color:var(--accent-text);}
.newsletter p{font-size:13.5px;color:var(--fg-muted);margin:0 0 13px;}
.nl-form{display:flex;gap:9px;flex-wrap:wrap;}
.nl-form input{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--hairline);
border-radius:999px;background:var(--bg);color:var(--fg);min-height:44px;}
.nl-form button{background:var(--accent);color:var(--on-accent);border:0;padding:10px 24px;
min-height:44px;cursor:pointer;font-weight:800;border-radius:999px;font-size:11.5px;
text-transform:uppercase;letter-spacing:.18em;}
.nl-form button:hover{filter:brightness(1.08);}
/* ---------------- article ---------------------------------------------- */
.breadcrumb{font-size:10.5px;color:var(--fg-muted);padding:20px 0 6px;font-weight:700;
text-transform:uppercase;letter-spacing:.16em;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--accent-text);}
.bc-sep{margin:0 9px;opacity:.5;}
.article-full{padding:8px 0 30px;max-width:800px;}
.article-full h1{font-size:33px;line-height:1.06;margin:12px 0;letter-spacing:-0.05em;font-weight:900;}
.article-full .dek{font-size:18.5px;color:var(--fg-muted);margin:0 0 18px;line-height:1.45;}
.byline{display:flex;flex-wrap:wrap;gap:16px;font-size:10.5px;color:var(--fg-muted);
border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:14px 0;
margin-bottom:22px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;}
.byline .author a{text-decoration:none;font-weight:800;color:var(--accent-text);}
.article-full .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--border);
margin-bottom:24px;border-radius:22px;border:1px solid var(--hairline);}
.hero-img{width:100%;height:100%;object-fit:cover;}
.body{font-size:17.5px;line-height:1.76;}
.body p{margin:0 0 19px;}
.body h2{font-size:25px;margin:34px 0 13px;letter-spacing:-0.04em;}
.body h3{font-size:19px;margin:26px 0 10px;}
.body a{color:var(--accent-text);font-weight:700;}
.body blockquote{margin:28px 0;padding:4px 0 4px 24px;border-radius:0;background:none;
border:0;border-left:1px solid var(--accent);}
.body blockquote p{margin:0 0 7px;font-size:18.5px;line-height:1.5;}
.body blockquote cite{font-size:10.5px;color:var(--fg-muted);font-style:normal;
text-transform:uppercase;letter-spacing:.18em;font-weight:700;}
.pullquote{position:relative;font-size:25px;font-weight:900;letter-spacing:-0.045em;
line-height:1.22;padding:24px 0 22px;margin:28px 0;border-bottom:1px solid var(--hairline);}
.pullquote::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,var(--accent),var(--hairline) 55%,transparent 100%);}
.body ul{margin:0 0 19px;padding-left:22px;}
.body li{margin:0 0 9px;}
.body figure{margin:26px 0;}
.figure-img{width:100%;object-fit:cover;aspect-ratio:16/9;border-radius:18px;
border:1px solid var(--hairline);}
.body figcaption{font-size:10.5px;color:var(--fg-muted);padding-top:9px;
text-transform:uppercase;letter-spacing:.16em;font-weight:700;}
.jumpbox{background:none;border:1px solid var(--hairline);border-radius:18px;
padding:17px 21px;margin:24px 0;}
.jumpbox h4{margin:0 0 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.24em;
color:var(--fg-muted);}
.jumpbox ul{margin:0;padding-left:19px;}
.jumpbox a{text-decoration:none;font-weight:700;}
/* ---------------- chips, prev/next, hubs -------------------------------- */
.chiprow{padding:22px 0;border-top:1px solid var(--hairline);}
.chiprow-h{font-size:10.5px;text-transform:uppercase;color:var(--fg-muted);margin:0 0 12px;
font-weight:800;letter-spacing:.26em;}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.18em;padding:0 18px;background:none;
border:1px solid var(--hairline);border-radius:999px;margin:0 8px 9px 0;
text-decoration:none;min-height:44px;color:var(--fg);}
.chip .ic{color:var(--accent-text);}
.chip:hover{border-color:var(--accent);color:var(--accent-text);}
.chip-active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.chip-active .ic{color:var(--on-accent);}
.chip-active:hover{color:var(--on-accent);}
.prevnext{display:flex;justify-content:space-between;gap:14px;padding:20px 0;
border-top:1px solid var(--hairline);font-size:13.5px;font-weight:700;}
.prevnext a{text-decoration:none;max-width:45%;color:var(--fg);display:flex;align-items:center;
min-height:44px;}
.prevnext a:hover{color:var(--accent-text);}
.hub-head{padding:30px 0 14px;}
.hub-head h1{font-size:34px;margin:0 0 12px;letter-spacing:-0.05em;font-weight:900;}
.hub-head .dek{color:var(--fg-muted);font-size:16px;max-width:740px;line-height:1.6;}
.more-list{list-style:none;margin:0;padding:0;}
.more-list li{padding:0;border-top:1px solid var(--border);}
.more-list a{text-decoration:none;font-weight:600;}
.more-list a:hover{color:var(--accent-text);}
.empty{color:var(--fg-muted);padding:22px 0;}
/* ---------------- footer with the giant watermark wordmark, static ------- */
.site-footer{background:var(--bg);border-top:1px solid var(--hairline);margin-top:56px;
overflow:hidden;}
/* The wordmark repeated at giant size as a low-contrast gold watermark line
above the columns. Purely decorative brand repetition (the accessible brand
is the masthead link); alt-text syntax silences it for AT where supported,
and overflow:hidden on .site-footer guards the viewport. */
.site-footer::before{content:"sneakers report";content:"sneakers report" / "";
display:block;white-space:nowrap;text-align:center;font-size:12.5vw;line-height:.85;
font-weight:900;letter-spacing:-0.06em;text-transform:lowercase;color:var(--wm);
padding:34px 0 0;pointer-events:none;}
.footer-in{max-width:1300px;margin:0 auto;padding:30px 20px 44px;display:grid;gap:28px;
grid-template-columns:1fr;}
@media(min-width:768px){.footer-in{grid-template-columns:repeat(4,1fr);}}
.fcol h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.26em;margin:0 0 12px;
color:var(--accent-text);font-weight:800;}
.fcol ul{list-style:none;margin:0;padding:0;}
.fcol a{color:var(--fg);text-decoration:none;font-size:13.5px;}
.fcol a:hover{color:var(--accent-text);}
.fine{max-width:1300px;margin:0 auto;padding:0 20px 30px;font-size:12px;color:var(--fg-muted);}
.static-page .body,.static-page{font-size:16.5px;line-height:1.72;max-width:750px;}
.static-page h1{font-size:30px;letter-spacing:-0.05em;font-weight:900;}
.ic{flex:0 0 auto;vertical-align:middle;}
.navitem{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
.navlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
text-decoration:none;font-size:13.5px;font-weight:700;color:var(--fg-muted);
white-space:nowrap;border-radius:16px;}
/* _NAVBAR_ONE_ROW_2026_08_21: tint of the bar's own text colour, so this works on a
dark masthead and a light one. var(--surface) is a page-panel colour and
rendered as a bright filled blob on every dark theme. */
.navlink:hover{color:var(--fg);background:rgba(147,138,134,0.2);
background:color-mix(in srgb, currentColor 13%, transparent);}
.navlink[aria-current]{color:var(--fg);background:rgba(147,138,134,0.26);
background:color-mix(in srgb, currentColor 17%, transparent);}
.navcaret{opacity:.55;}
.dropdown{position:absolute;top:100%;left:0;min-width:224px;background:var(--surface);
border:1px solid var(--border);border-radius:16px;padding:8px;display:none;
flex-direction:column;z-index:40;box-shadow:0 18px 40px -18px rgba(33,29,28,0.6);}
.nav .dropdown a{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 12px;
border-radius:16px;text-decoration:none;font-size:13px;font-weight:600;
color:var(--fg);white-space:nowrap;background:none;}
.nav .dropdown a:hover{background:var(--bg);color:var(--accent-text);}
.nav .dropdown .ic{color:var(--accent-text);}
@media(min-width:768px){
/* _NAVBAR_SPECIFICITY_2026_08_21: qualified with header.masthead (0,2,1) so it beats
every theme's bare .nav{overflow-x:auto} (0,1,0) no matter where the
theme CSS is injected. terminal's lands at byte 38472, after this. */
header.masthead .nav{overflow:visible;flex-wrap:wrap;}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{display:flex;}
}
.pulse{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.glance{display:flex;flex-wrap:wrap;gap:9px;padding:2px 0 6px;}
.glance-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
color:var(--fg-muted);background:var(--surface);border:1px solid var(--border);
border-radius:999px;padding:8px 14px;}
.glance-pill .ic{color:var(--accent-text);}
.sign{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.07em;padding:4px 9px;border-radius:6px;}
.sign-new{color:var(--accent-text);background:var(--surface);border:1px solid var(--border);}
.htext{min-width:0;}
.sec-more{margin-top:12px;}
/* Full-width pages (sidebar:"none" / river-wide) must NOT inherit the aura's
1fr+sidebar grid, or the lone column keeps the empty sidebar track and the
content sits off-centre. Declared after the aura CSS so it wins on order. */
@media(min-width:768px){.trending-h ol{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;}}
@media(min-width:1280px){.trending-h ol{grid-template-columns:repeat(4,1fr);}}
/* Skip link: first focusable element on the page, visible only on focus, so a
keyboard user can jump the masthead and nav straight to the article. */
.cols-full{display:block;}
.cols-full > div{min-width:0;}
.skip-link{position:fixed;left:-9999px;top:0;z-index:100;background:var(--surface);
color:var(--fg);border:2px solid var(--accent);padding:12px 18px;font-weight:700;
text-decoration:none;border-radius:16px;}
.skip-link:focus{left:12px;top:12px;}
/* Theme toggle shows the state it will switch TO. Inline SVG across all three
states (system light, system dark, explicit override), so the control never
depends on a platform font glyph. */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;}
.ic-sun{display:none;}
.ic-moon{display:block;}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ic-sun{display:block;}
:root:not([data-theme="light"]) .ic-moon{display:none;}
}
:root[data-theme="dark"] .ic-sun{display:block;}
:root[data-theme="dark"] .ic-moon{display:none;}
:root[data-theme="light"] .ic-sun{display:none;}
:root[data-theme="light"] .ic-moon{display:block;}
/* Dense text-link lists (trending rail, deep footer, ticker) are interactive
targets too. Give each link its own 44px hit area rather than relying on the
row padding, which left the anchors themselves at 18-38px. */
.trending a{display:flex;align-items:center;min-height:44px;}
.brand{display:inline-flex;align-items:center;min-height:44px;}
.sigcat,.dgcat{min-height:44px;}
/* Card headline links measured 21-43px, well under the floor, and they are the
primary way a reader opens a story from a feed. Rather than pad the headline
and bloat the card, the headline's ::after overlays the WHOLE card, so the
entire card becomes the tap target. The nested category link is lifted above
the overlay so it stays independently clickable. */
.item,.card{position:relative;}
.item h3 a::after,.card h3 a::after{content:"";position:absolute;inset:0;}
.item .kicker,.card .kicker,.item .meta,.card .meta,
.item .dek a,.card .dek a{position:relative;z-index:1;}
/* --- _LEAD_FOOTER_2026_08_20: the 44px tap floor is for FINGERS. Applying it to
every footer link on desktop made a 10-item column 440px tall and turned the
footer into a field of gaps. Coarse pointers keep the full target. */
/* --- _BLOB_SECTIONS_2026_08_20: decorative hero blobs must never cover the photo.
Five auras position a 290x250 organic shape on .hero with no z-index,
and .hero > div has none either, so paint order decided it and on
sitech the blob landed on the subject's face. Decoration 0, content 1. */
/* --- _MARKDOWN_BLOCKS_2026_08_21: article data tables. They carry the numbers a
reader came for, so they get real styling and scroll inside their own box
rather than forcing the page sideways on a phone. */
/* --- _NAV_CAROUSEL_2026_08_21: nav row holds the nav AND the icons, so the theme
toggle sits at the end of the navigation instead of alone above it. */
/* --- _MD_LINEWISE_2026_08_21: the masthead row was flex-wrap:wrap, so a
1025px nav in a 1280px row pushed the icons onto a second line (measured
navTop 11 / iconsTop 69). Moving them in the markup could not fix that. The
row no longer wraps and the nav shrinks and scrolls instead. */
/* --- _NAVBAR_NOWRAP_2026_08_21: measured on a live page - the container was already
nowrap, but .nav is itself a flex container and ITS items were wrapping
(nav height 92, brand height 64, icons at left 1531 outside a 1280 box). The
name must never break, the nav scrolls rather than stacks. */
/* --- _NAVBAR_ONE_ROW_2026_08_21 -----------------------------------------
ONE rule per selector. The five rules this replaces were duplicates of each
other at equal specificity, so only the last of each applied and every
earlier "fix" was dead CSS. See _patch_navbar_onerow.py for the measurements.
NOTHING in the masthead may clip: the hover dropdowns are absolutely
positioned and must escape both .nav and .mast-in. overflow:hidden here is
what made them unclickable (hit test returned the ticker link behind them).
Because the nav therefore cannot scroll, the content has to fit, which is
what the icon rule below is for. */
/* --- _MAST_ALIGNS_CONTENT_2026_08_21: max-width:100% was overriding every theme's own
masthead width, so the brand and nav sat 313px outside the content
column on each side (measured .mast-in 0-1905 vs .wrap 313-1593).
Each theme already sets .mast-in and .wrap to the SAME width, so the
alignment is theirs to define, not this rule's. */
.mast-in{flex-wrap:nowrap;}
.brand{white-space:nowrap;flex:0 0 auto;}
/* MASTREST_2026_09_01: the .navrow wrapper and every override that existed to
manage it are gone. The approved masthead has the nav strip as a direct
child of .masthead, so each theme's own .nav-strip rules (band background,
borders, max-width, margin, padding) apply untouched, and per-link nav
icons are back per the approved boards. Dropdown unclipping lives in the
min-width:768px masthead nav rule above; mobile keeps the :has() hamburger. */
.mast-in .nav{flex:0 1 auto;min-width:0;}
.mast-in .icons{flex:0 0 auto;margin-left:auto;}
/* ONELINE_2026_09_01: with the strip nav inline in the brand row, its own
full-band centering (margin:0 auto, max-width) would fight the flex row.
Only margin/max-width are neutralised; the theme's padding, background,
borders and pill styling stay, so the band stretches brand-to-toggle. */
.mast-in .nav.nav-strip{flex:1 1 auto;margin:0 10px;max-width:none;width:auto;min-width:0;}
/* REVIEW1_2026_09_02 G1: inside the one-row masthead a band background reads
as a stray dark box behind the buttons; item/pill styling stays. */
.mast-in .nav.nav-strip{background:transparent;border:0;box-shadow:none;}
/* NAVFIT_SPACING_2026_09_01: the one-row masthead needs the nav to actually
fit. Horizontal padding and icon size compress slightly; type, colors and
each theme's band/pill styling are untouched. */
header.masthead .nav>.navitem>.navlink,header.masthead .nav>a{padding-left:9px;padding-right:9px;}
header.masthead .nav .ic{width:14px;height:14px;}
/* NAVFIT_SPACING_2026_09_01: every theme measured 0px between the masthead
band and the first widget row; all widgets get breathing room. */
main.wrap{padding-top:20px;}
/* REVIEW1_2026_09_02 G6: dividers must never sit flush on a card grid. */
.sec>.grid{margin-bottom:20px;}
/* REVIEW1_2026_09_02 G9: DAILY BRIEF header alignment. */
.newsletter h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;}
@media(min-width:1200px){header.masthead .nav{flex-wrap:nowrap;}}
/* carousel arrows: the scrollbar is hidden by design, so a mouse needs these */
/* --- _CAR_NAV_FIXED_TOP_2026_08_24: was top:50%+translateY(-50%), vertically centered on
the whole slide independent of .car-txt, which is bottom-anchored and grows
taller as a headline wraps -- a 3-line headline could rise into the arrow.
A fixed top offset can never compete with the bottom-anchored caption
regardless of caption height. (hover:none already hides these on real
touch devices; this is for the narrow-desktop-window case where they show.) */
/* --- _CAR_NAV_PROPORTIONAL_CENTER_2026_08_24: measured live, the caption's worst-case top (390px in a 563px carousel) sits well below 38% (214px), so this stays clear of a growing caption while reading as vertically centred instead of pinned to the top corner, scaling with each theme's own carousel height. */
.car-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:2;
width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:rgba(54,17,3,0.62);color:#FBF5F3;font-size:20px;line-height:1;}
.car-nav:hover{background:rgba(54,17,3,0.85);}
/* --- _CAR_CLICK_LAYERING_2026_08_24: z-index:1 lifts the stretched link above the
absolutely-positioned .ratio-img, which otherwise painted over it (both
z-index:auto, image later in DOM) and made the whole photo unclickable. */
.car-slide-link{position:absolute;inset:0;z-index:1;}
/* --- _CARD_PHOTO_CLICKABLE_2026_08_24: the photo is the biggest, most obviously clickable part
of every article card and was in no link at all (measured: elementFromPoint at
a .duocell image centre hit IMG.ratio-img, resolving to no ). Stretched-link
pattern: the headline link paints an invisible ::after over the whole card, so
the photo follows it. Links that must keep their OWN target -- the .kicker
section tag, meta/byline links -- sit above it at z-index:2. */
.card,.magbig,.duocell,.hubcard,.qfeat,.qcell,.poster,.item{position:relative;}
.card h3>a::after,.card h2>a::after,.magbig h3>a::after,.magbig h2>a::after,.duocell h3>a::after,.duocell h2>a::after,.hubcard h3>a::after,.hubcard h2>a::after,.qfeat h3>a::after,.qfeat h2>a::after,.qcell h3>a::after,.qcell h2>a::after,.poster h3>a::after,.poster h2>a::after,.item h3>a::after,.item h2>a::after{content:"";position:absolute;inset:0;z-index:1;}
.card .kicker,.card .meta a,.card .dek a,.magbig .kicker,.magbig .meta a,.magbig .dek a,.duocell .kicker,.duocell .meta a,.duocell .dek a,.hubcard .kicker,.hubcard .meta a,.hubcard .dek a,.qfeat .kicker,.qfeat .meta a,.qfeat .dek a,.qcell .kicker,.qcell .meta a,.qcell .dek a,.poster .kicker,.poster .meta a,.poster .dek a,.item .kicker,.item .meta a,.item .dek a{position:relative;z-index:2;}
.poster-scrim{pointer-events:none;}
.poster-link{position:absolute;inset:0;z-index:1;}
.poster-txt{z-index:2;}
/* --- _CARD_BODY_NOT_CONTAINING_BLOCK_2026_08_24: the stretched ::after above resolves against its NEAREST
positioned ancestor. These inner text wrappers are position:relative in several
themes, which trapped the overlay inside the text block so it never reached the
photo (measured on cycleandcare.com: .magbig relative BUT .magbody relative too).
They carry no absolutely positioned children, so dropping to static is inert for
layout -- verified bounding boxes identical before/after -- and hands the
containing block back to the card. .car-txt/.poster-txt are absolute by design
and deliberately excluded. */
.magbody,.duobody,.item-body,.qbody,.hubbody,.cardbody{position:static;}
/* --- _CARD_PHOTO_CLICKABLE_REMAINING_2026_08_24: same stretched-link treatment for the card components
the first pass did not enumerate (found by re-auditing rather than trusting the
sampled set): .ixrow .magrow .mcard .rail-card .spoke .zzrow and their wrappers. */
.ixrow,.magrow,.mcard,.rail-card,.spoke,.zzrow{position:relative;}
.ixrow h3>a::after,.ixrow h2>a::after,.magrow h3>a::after,.magrow h2>a::after,.mcard h3>a::after,.mcard h2>a::after,.rail-card h3>a::after,.rail-card h2>a::after,.spoke h3>a::after,.spoke h2>a::after,.zzrow h3>a::after,.zzrow h2>a::after{content:"";position:absolute;inset:0;z-index:1;}
.ixrow .kicker,.ixrow .meta a,.ixrow .dek a,.magrow .kicker,.magrow .meta a,.magrow .dek a,.mcard .kicker,.mcard .meta a,.mcard .dek a,.rail-card .kicker,.rail-card .meta a,.rail-card .dek a,.spoke .kicker,.spoke .meta a,.spoke .dek a,.zzrow .kicker,.zzrow .meta a,.zzrow .dek a{position:relative;z-index:2;}
.arbody,.ixbody,.tlbody,.zzbody,.card-body{position:static;}
/* _CARD_PHOTO_CLICKABLE_FINAL_2026_08_24: .card-body is hyphenated in the builder; an earlier pass
wrote .cardbody, so this wrapper kept trapping the stretched overlay inside
the text block (measured on grantseason.com: H3 static -> .card-body relative
-> .card relative). */
.ixrow>.body,.magrow>.body,.mcard>.body,.rail-card>.body,.spoke>.body,.zzrow>.body{position:static;}
.car-prev{left:10px;} .car-next{right:10px;}
.car-dot.is-on span{background:var(--accent,#FBF5F3);transform:scale(1.35);}
@media (hover:none){.car-nav{display:none;}}
.tablewrap{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch;}
.tablewrap table{border-collapse:collapse;width:100%;min-width:420px;
font-size:.94rem;}
.tablewrap th,.tablewrap td{padding:9px 12px;text-align:left;
border-bottom:1px solid var(--border,rgba(147,138,134,0.28));}
.tablewrap thead th{font-weight:700;white-space:nowrap;
border-bottom-width:2px;}
.tablewrap tbody tr:last-child td{border-bottom:0;}
.hero::before,.hero::after{z-index:0;}
.hero > div{position:relative;z-index:1;}
.fcol a{display:flex;align-items:center;min-height:0;padding:5px 0;
line-height:1.35;}
.fcol li{padding:0;}
@media (pointer:coarse){.fcol a{min-height:44px;padding:0;}}
/* Latest prints real headlines; clamp them so one long title cannot set the
height of the whole footer. */
.fcol-latest a{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;
overflow:hidden;align-items:flex-start;}
.footer-in{align-items:start;}
.ticker-track{padding-top:0;padding-bottom:0;}
.ticker-track a{display:inline-flex;align-items:center;min-height:44px;}
.ticker-label{min-height:44px;}
.more-list a{display:flex;align-items:center;min-height:44px;}
/* ---- No visible scrollbar tracks anywhere. The grey UA scrollbar under the
nav and the ticker was reading as broken chrome on both mobile and desktop. */
.nav,.ticker-track,.rail,.boardwrap,.digest,.ixlist,
.masthead .nav,.ticker .ticker-track{scrollbar-width:none !important;-ms-overflow-style:none !important;}
.masthead .nav::-webkit-scrollbar,.ticker .ticker-track::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important;}
.nav::-webkit-scrollbar,.ticker-track::-webkit-scrollbar,.rail::-webkit-scrollbar,
.boardwrap::-webkit-scrollbar{width:0;height:0;display:none;}
/* ---- Ticker auto-scrolls instead of exposing a scrollbar. The track holds the
items twice, so translating by half its width loops seamlessly. */
/* --- _TICKER_ALIGNS_CONTENT_2026_08_21: the LIVE strip used to run to the screen edge while the
nav and content started well inside it. The band still spans the full width;
its contents now sit in the theme's own .wrap, so every site aligns at its own
width with no number chosen here. The padding override is qualified
(.masthead + .ticker, 0-2-1) because theme CSS is injected at inconsistent
points and source order cannot be trusted. */
.ticker{max-width:100%;overflow:hidden;}
.masthead + .ticker{padding-left:0;padding-right:0;}
.ticker > .ticker-in{display:flex;align-items:center;gap:12px;
min-width:0;width:100%;}
.ticker-track{overflow:hidden !important;padding-left:0;padding-right:0;min-width:0;flex:1 1 auto;}
.ticker-marquee{display:flex;align-items:center;gap:26px;white-space:nowrap;width:max-content;
padding-left:16px;animation:tickerscroll 45s linear infinite;}
.ticker-dup{display:flex;align-items:center;gap:26px;}
@keyframes tickerscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker:hover .ticker-marquee,.ticker:focus-within .ticker-marquee{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
.ticker-marquee{animation:none;}
.ticker-track{overflow-x:auto !important;}
}
/* ---- Mobile drawer. Base (390px) hides the nav behind a hamburger; from 768px
the control disappears and the nav is always visible. Pure CSS, so it works
with JavaScript disabled. */
/* the hamburger adds 44px to the masthead, so a long wordmark set to
flex:0 0 auto pushed the icons past the viewport. Let it shrink and wrap. */
.mast-in{min-width:0;}
.brand{flex:0 1 auto;min-width:0;}
/* .icons must be the positioning context: without it the absolutely positioned
checkbox anchored to the sticky masthead and sat invisibly on top of the
wordmark, swallowing clicks meant for the home link. */
.icons{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;gap:6px;}
.navtoggle{position:absolute;left:0;top:50%;transform:translateY(-50%);
width:44px;height:44px;margin:0;opacity:0;z-index:3;cursor:pointer;}
.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;padding:0 10px;cursor:pointer;flex:0 0 44px;}
.hbar{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
transition:transform .2s ease,opacity .2s ease;}
/* --- _NAVTOGGLE_HAS_FIX_2026_08_24: was .navtoggle:checked ~ .mast-in ... (general-sibling
combinator). The checkbox is always a DESCENDANT of .mast-in (or of .navrow
for nav_pos=stacked) via .icons, never its sibling in any of the three
masthead() layouts, so ~ could never match -- confirmed live, 0 of 7 and 0
of 14 real nav links reachable via the hamburger on two different sites/
layouts. :has() matches on descendant state instead of sibling position, so
it works from wherever the checkbox actually sits, in every layout, with no
HTML change. */
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(2){opacity:0;}
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
header.masthead:has(.navtoggle:focus-visible) .hamburger{outline:3px solid var(--focus,#FFAF91);outline-offset:2px;}
.masthead .nav{display:none;}
header.masthead:has(.navtoggle:checked) .nav{display:flex;flex-direction:column;align-items:stretch;
overflow:visible;flex-wrap:nowrap;width:100%;padding-bottom:8px;}
header.masthead:has(.navtoggle:checked) .nav .navitem{width:100%;}
header.masthead:has(.navtoggle:checked) .nav .navlink,
header.masthead:has(.navtoggle:checked) .nav > a{width:100%;justify-content:flex-start;}
/* submenus stay desktop-only: their targets are all reachable from the footer */
.masthead .dropdown{display:none;}
@media(min-width:768px){
.navtoggle,.hamburger{display:none;}
.masthead .nav{display:flex;}
}
/* ---- Featured carousel. CSS scroll-snap so it is swipeable on touch and fully
linked with JavaScript disabled; the dots are real in-page anchors. */
.sec-car{padding-top:14px;}
.carousel{position:relative;}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;}
.car-track::-webkit-scrollbar{width:0;height:0;display:none;}
.car-slide{scroll-snap-align:center;position:relative;min-width:0;}
.car-slide .ratio{position:relative;aspect-ratio:16/9;overflow:hidden;}
.car-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* _CAR_CLICK_LAYERING_2026_08_24: decorative gradient only - it covered inset:0 and was
swallowing every click aimed at the slide beneath it. */
.car-scrim{pointer-events:none;position:absolute;inset:0;background:linear-gradient(to top,
rgba(54,17,3,0.94) 6%,rgba(54,17,3,0.55) 46%,rgba(54,17,3,0.06) 82%);}
/* _CAR_CLICK_LAYERING_2026_08_24: z-index:2 keeps the kicker and headline links above the
stretched slide link, so they keep their own separate destinations. */
.car-txt{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;z-index:2;}
.car-txt h3{margin:8px 0 6px;font-size:19px;line-height:1.22;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.car-txt h3 a{color:#FBF5F3;text-decoration:none;}
.car-txt h3 a::after{content:"";position:absolute;inset:0;}
.car-txt .dek{color:#FFE8D2;font-size:13.5px;margin:0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.car-txt .kicker{position:relative;z-index:1;}
.car-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 2px;}
.car-dot{display:inline-flex;align-items:center;justify-content:center;
width:30px;height:44px;text-decoration:none;}
.car-dot span{display:block;width:9px;height:9px;border-radius:50%;
background:var(--fg-muted);opacity:.45;transition:opacity .2s ease,transform .2s ease;}
.car-dot:hover span,.car-dot:focus-visible span{opacity:1;transform:scale(1.25);}
@media(min-width:768px){
.car-txt{padding:24px 26px 26px;}
.car-txt h3{font-size:27px;}
.car-txt .dek{font-size:15px;}
}
@media(min-width:1280px){.car-txt h3{font-size:31px;}}
/* ---- FAQ, native so it opens with no script and is keyboard operable */
.faq{display:grid;gap:8px;}
.faq-item{border:1px solid var(--border);background:var(--surface);border-radius:10px;
padding:0 14px;}
.faq-item summary{display:flex;align-items:center;gap:9px;min-height:52px;
cursor:pointer;font-weight:700;font-size:15px;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-caret{color:var(--accent-text);transition:transform .2s ease;flex:0 0 auto;}
.faq-item[open] .faq-caret{transform:rotate(180deg);}
.faq-a{padding:0 0 14px 24px;color:var(--fg-muted);font-size:14.5px;line-height:1.6;}
.faq-a p{margin:0;}
/* ---- Share row */
.sharerow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 0;
border-top:1px solid var(--border);}
.share-label{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-muted);
margin-right:4px;}
.share-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:9px;}
.share-btn:hover{border-color:var(--accent);color:var(--accent-text);}
.share-btn .ic{color:var(--accent-text);}
/* ---- Pagination for long indexes */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:20px 0;
border-top:1px solid var(--border);}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;padding:0 12px;text-decoration:none;font-weight:700;
font-size:14px;border:1px solid var(--border);border-radius:8px;color:var(--fg);}
.pager a:hover{border-color:var(--accent);color:var(--accent-text);}
.pg-current{background:var(--accent);color:var(--accent-on,#FBF5F3);border-color:var(--accent);}
/* Honour a reduced-motion preference across every aura, not only the ones that
happen to declare an animation of their own. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
}
:root{--font-display:"Baskervville",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-body:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
body{font-family:var(--font-body);}
h1,h2,h3,.brand{font-family:var(--font-display);}
:root{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#1A1310;--fg-muted:#746B67;--border:#E2DBD8;--accent:#B85C38;--accent-text:#361103;--accent-on:#FFFFFF;--accent2:#A65130;--primary:#B85C38;--secondary:#FFE8D2;--tertiary:#1A1310;--surface-raised:#FFFFFF;--border-strong:#B2A9A5;--focus-ring:#B85C38;--selection-bg:#FFDCC5;}
:root[data-theme="light"]{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#1A1310;--fg-muted:#746B67;--border:#E2DBD8;--accent:#B85C38;--accent-text:#361103;--accent-on:#FFFFFF;--accent2:#A65130;--primary:#B85C38;--secondary:#FFE8D2;--tertiary:#1A1310;--surface-raised:#FFFFFF;--border-strong:#B2A9A5;--focus-ring:#B85C38;--selection-bg:#FFDCC5;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#211D1C;--surface:#393432;--fg:#FBF5F3;--fg-muted:#CCC4C0;--border:#554E4B;--accent:#E9916F;--accent-text:#FFE8D2;--accent-on:#211D1C;--accent2:#CC6F4B;--primary:#E9916F;--secondary:#393432;--tertiary:#FBF5F3;--surface-raised:#554E4B;--border-strong:#746B67;--focus-ring:#A65130;--selection-bg:#59230C;}}
:root[data-theme="dark"]{--bg:#211D1C;--surface:#393432;--fg:#FBF5F3;--fg-muted:#CCC4C0;--border:#554E4B;--accent:#E9916F;--accent-text:#FFE8D2;--accent-on:#211D1C;--accent2:#CC6F4B;--primary:#E9916F;--secondary:#393432;--tertiary:#FBF5F3;--surface-raised:#554E4B;--border-strong:#746B67;--focus-ring:#A65130;--selection-bg:#59230C;}
.brandmark{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.brandtext{min-width:0;}
.markwrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;}
.markwrap svg{width:100%;height:100%;display:block;}
.mark-plate{background:#FBF5F3;border-radius:6px;padding:3px;}
@media(min-width:768px){.markwrap{width:34px;height:34px;}}
.brand-monogram{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-on,#FBF5F3);font-weight:800;font-size:13px;flex:0 0 auto;}.hero h1{font-size:clamp(33.0px,7.2vw,60.0px);}
:root:root:root{--on-accent:#FBF5F3;--focus:#7E381C;--hairline:rgba(126,56,28,0.32);--foil:linear-gradient(100deg,#361103 0%,#7E381C 30%,#7E381C 48%,#59230C 64%,#7E381C 82%,#59230C 100%);--wm:rgba(126,56,28,0.09);--shadow:0 1px 2px rgba(54,17,3,0.08);--lift:0 22px 50px -26px rgba(54,17,3,0.28);--blob:radial-gradient(58% 70% at 78% 18%,rgba(126,56,28,0.1),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(116,107,103,0.12),transparent 72%);--metal:radial-gradient(40% 34% at 30% 24%,rgba(251,245,243,0.96),rgba(251,245,243,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(166,81,48,0.45),rgba(166,81,48,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(54,17,3,0.28),rgba(54,17,3,0) 72%),
conic-gradient(from 218deg at 50% 42%,#B2A9A5,#FBF5F3 12%,#FFAF91 26%,#FFE8D2 38%,#938A86 52%,#FFDCC5 64%,#B2A9A5 78%,#FBF5F3 90%,#B2A9A5);--metal-shadow:inset -16px -20px 36px rgba(54,17,3,0.16),inset 10px 12px 26px rgba(251,245,243,0.55),
0 26px 54px -30px rgba(54,17,3,0.3);--scrim:#361103;--poster-fg:#FBF5F3;--poster-dek:#FFC9AF;--poster-kick:#FFAF91;--poster-kick-bg:#361103;}
:root:root:root[data-theme="light"]{--on-accent:#FBF5F3;--focus:#7E381C;--hairline:rgba(126,56,28,0.32);--foil:linear-gradient(100deg,#361103 0%,#7E381C 30%,#7E381C 48%,#59230C 64%,#7E381C 82%,#59230C 100%);--wm:rgba(126,56,28,0.09);--shadow:0 1px 2px rgba(54,17,3,0.08);--lift:0 22px 50px -26px rgba(54,17,3,0.28);--blob:radial-gradient(58% 70% at 78% 18%,rgba(126,56,28,0.1),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(116,107,103,0.12),transparent 72%);--metal:radial-gradient(40% 34% at 30% 24%,rgba(251,245,243,0.96),rgba(251,245,243,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(166,81,48,0.45),rgba(166,81,48,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(54,17,3,0.28),rgba(54,17,3,0) 72%),
conic-gradient(from 218deg at 50% 42%,#B2A9A5,#FBF5F3 12%,#FFAF91 26%,#FFE8D2 38%,#938A86 52%,#FFDCC5 64%,#B2A9A5 78%,#FBF5F3 90%,#B2A9A5);--metal-shadow:inset -16px -20px 36px rgba(54,17,3,0.16),inset 10px 12px 26px rgba(251,245,243,0.55),
0 26px 54px -30px rgba(54,17,3,0.3);--scrim:#361103;--poster-fg:#FBF5F3;--poster-dek:#FFC9AF;--poster-kick:#FFAF91;--poster-kick-bg:#361103;}
@media (prefers-color-scheme: dark){:root:root:root:not([data-theme="light"]){--on-accent:#361103;--focus:#E9916F;--scrim:#361103;--poster-fg:#FBF5F3;--poster-dek:#FFC9AF;--poster-kick:#FFAF91;--poster-kick-bg:#361103;--hairline:rgba(233,145,111,0.3);--foil:linear-gradient(100deg,#FFDCC5 0%,#E9916F 28%,#A65130 46%,#FFC9AF 62%,#E9916F 80%,#A65130 100%);--wm:rgba(233,145,111,0.09);--shadow:0 1px 2px rgba(33,29,28,0.55);--lift:0 26px 60px -30px rgba(33,29,28,0.9);--blob:radial-gradient(58% 70% at 78% 18%,rgba(233,145,111,0.22),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(147,138,134,0.2),transparent 72%);--metal:radial-gradient(40% 34% at 30% 24%,rgba(251,245,243,0.92),rgba(251,245,243,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(233,145,111,0.55),rgba(233,145,111,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(54,17,3,0.55),rgba(54,17,3,0) 72%),
conic-gradient(from 218deg at 50% 42%,#746B67,#FFDCC5 12%,#938A86 26%,#FFE8D2 38%,#554E4B 52%,#FFAF91 64%,#746B67 78%,#FFDCC5 90%,#746B67);--metal-shadow:inset -16px -20px 36px rgba(33,29,28,0.32),inset 10px 12px 26px rgba(251,245,243,0.1),
0 30px 60px -34px rgba(33,29,28,0.6);}}
:root:root:root[data-theme="dark"]{--on-accent:#361103;--focus:#E9916F;--scrim:#361103;--poster-fg:#FBF5F3;--poster-dek:#FFC9AF;--poster-kick:#FFAF91;--poster-kick-bg:#361103;--hairline:rgba(233,145,111,0.3);--foil:linear-gradient(100deg,#FFDCC5 0%,#E9916F 28%,#A65130 46%,#FFC9AF 62%,#E9916F 80%,#A65130 100%);--wm:rgba(233,145,111,0.09);--shadow:0 1px 2px rgba(33,29,28,0.55);--lift:0 26px 60px -30px rgba(33,29,28,0.9);--blob:radial-gradient(58% 70% at 78% 18%,rgba(233,145,111,0.22),transparent 70%),
radial-gradient(52% 64% at 12% 82%,rgba(147,138,134,0.2),transparent 72%);--metal:radial-gradient(40% 34% at 30% 24%,rgba(251,245,243,0.92),rgba(251,245,243,0) 56%),
radial-gradient(20% 18% at 64% 30%,rgba(233,145,111,0.55),rgba(233,145,111,0) 74%),
radial-gradient(52% 48% at 70% 80%,rgba(54,17,3,0.55),rgba(54,17,3,0) 72%),
conic-gradient(from 218deg at 50% 42%,#746B67,#FFDCC5 12%,#938A86 26%,#FFE8D2 38%,#554E4B 52%,#FFAF91 64%,#746B67 78%,#FFDCC5 90%,#746B67);--metal-shadow:inset -16px -20px 36px rgba(33,29,28,0.32),inset 10px 12px 26px rgba(251,245,243,0.1),
0 30px 60px -34px rgba(33,29,28,0.6);}
:root:root:root{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#1A1310;--fg-muted:#746B67;--border:#E2DBD8;--accent:#B85C38;--accent-text:#361103;--accent-on:#FFFFFF;--accent2:#A65130;--primary:#B85C38;--secondary:#FFE8D2;--tertiary:#1A1310;--surface-raised:#FFFFFF;--border-strong:#B2A9A5;--focus-ring:#B85C38;--selection-bg:#FFDCC5;}
:root:root:root[data-theme="light"]{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#1A1310;--fg-muted:#746B67;--border:#E2DBD8;--accent:#B85C38;--accent-text:#361103;--accent-on:#FFFFFF;--accent2:#A65130;--primary:#B85C38;--secondary:#FFE8D2;--tertiary:#1A1310;--surface-raised:#FFFFFF;--border-strong:#B2A9A5;--focus-ring:#B85C38;--selection-bg:#FFDCC5;}
@media (prefers-color-scheme: dark){:root:root:root:not([data-theme="light"]){--bg:#211D1C;--surface:#393432;--fg:#FBF5F3;--fg-muted:#CCC4C0;--border:#554E4B;--accent:#E9916F;--accent-text:#FFE8D2;--accent-on:#211D1C;--accent2:#CC6F4B;--primary:#E9916F;--secondary:#393432;--tertiary:#FBF5F3;--surface-raised:#554E4B;--border-strong:#746B67;--focus-ring:#A65130;--selection-bg:#59230C;}}
:root:root:root[data-theme="dark"]{--bg:#211D1C;--surface:#393432;--fg:#FBF5F3;--fg-muted:#CCC4C0;--border:#554E4B;--accent:#E9916F;--accent-text:#FFE8D2;--accent-on:#211D1C;--accent2:#CC6F4B;--primary:#E9916F;--secondary:#393432;--tertiary:#FBF5F3;--surface-raised:#554E4B;--border-strong:#746B67;--focus-ring:#A65130;--selection-bg:#59230C;}
:root{--mark-accent:#A65130;--mark-ink:#1A1310;--mark-ground:#F3F2F2;--mark-grey:#938A86;--favicon-tile:#B85C38;--on-accent:#FFFFFF;}
:root[data-theme="light"]{--mark-accent:#A65130;--mark-ink:#1A1310;--mark-ground:#F3F2F2;--mark-grey:#938A86;--favicon-tile:#B85C38;--on-accent:#FFFFFF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mark-accent:#A65130;--mark-ink:#FBF5F3;--mark-ground:#211D1C;--mark-grey:#B2A9A5;--favicon-tile:#E9916F;--on-accent:#211D1C;}}
:root[data-theme="dark"]{--mark-accent:#A65130;--mark-ink:#FBF5F3;--mark-ground:#211D1C;--mark-grey:#B2A9A5;--favicon-tile:#E9916F;--on-accent:#211D1C;}
header.masthead .nav>.navitem>.navlink,header.masthead .nav>a{letter-spacing:1px;padding-left:6px;padding-right:6px;}.mast-in .brand .brandtext{font-size:24px;}
button[type="submit"]{background:#0369a1;}
.empty{padding:44px 22px;border:1px solid var(--border);border-radius:14px;
background:var(--surface);text-align:center;}
.empty h1{margin:0 0 10px;}
/* NICHE_HOME_META_2026_09_17: the homepage page heading. One modest line above the
composition, so the H1 names the subject instead of a section label. */
.home-h1{font-family:var(--font-display,inherit);font-weight:700;
font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.25;letter-spacing:-.01em;
margin:0 0 14px;color:var(--fg);}
.empty p{margin:0 auto 8px;max-width:56ch;color:var(--fg-muted);}
.empty .meta{font-size:13px;opacity:.85;}
.markwrap{color:var(--mark-accent,var(--accent));}
.brandmark .markwrap svg{color:inherit;}