/* ==========================================================================
   Daily Hem — one stylesheet for the whole journal.

   Merged from the two sheets the hand-built site carried (a 93-line sheet
   shared by 23 inner pages, and a 285-line homepage sheet). Where the two
   genuinely disagreed on the same component, the inner-page value wins —
   it was the norm across 23 of 24 pages. Where they disagreed because the
   component appears at two deliberate scales (nav under the big masthead,
   featured cards vs listing cards, hero byline vs article byline), the base
   rule is the inner-page scale and the larger treatment is scoped to its
   context rather than collapsed away.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#111110;
  --paper:#faf9f7;
  --paper-2:#f1efeb;
  --line:#dcd9d3;
  --accent:#a31f25;
  --muted:#524f49;
  --display:'Space Grotesk','Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --sans:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* ---------- reset & base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:2px;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}
.narrow{max-width:760px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}

/* ---------- top bar (homepage) ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;}
.topbar span b{color:var(--accent);font-weight:600;}

/* ---------- masthead (homepage) ---------- */
header.masthead{border-bottom:1px solid var(--ink);}
.masthead-inner{
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(28px,5vw,52px) 0 clamp(18px,3vw,30px);
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px,8vw,90px);
  letter-spacing:.02em;
  line-height:1;
  text-transform:uppercase;
  text-align:center;
}
.brand .dot{color:var(--accent);}
.tagline{margin-top:10px;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}

/* ---------- mini header (inner pages) ---------- */
header.mini{border-bottom:1px solid var(--ink);}
.mini-inner{display:flex;flex-direction:column;align-items:center;padding:26px 0 14px;}
.mini-brand{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);letter-spacing:.02em;text-transform:uppercase;}
.mini-brand .dot{color:var(--accent);}

/* ---------- navigation ---------- */
nav.mainnav{border-top:1px solid var(--line);}
nav.mainnav ul{
  display:flex;justify-content:center;gap:clamp(14px,3vw,40px);
  list-style:none;flex-wrap:wrap;
  padding:14px 0;
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
nav.mainnav a{position:relative;padding:4px 0;transition:color .2s;}
nav.mainnav a:hover,nav.mainnav a.here{color:var(--accent);}
/* Under the full masthead the nav sits at a more generous scale, with an
   animated underline. Scoped so the mini header keeps its tighter setting. */
.masthead nav.mainnav ul{gap:clamp(18px,3.5vw,44px);padding:16px 0;font-size:14.5px;}
.masthead nav.mainnav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s;
}
.masthead nav.mainnav a:hover::after{width:100%;}

/* ---------- topic sub-navigation ---------- */
/* A static strip, not a dropdown. Nothing opens, so it is keyboard- and
   screen-reader-correct by construction rather than by careful scripting.
   Sentence case on a lighter ground keeps it visibly subordinate to the
   uppercase section nav directly above it. */
.subnav{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.subnav .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav ul{
  display:flex;justify-content:center;gap:clamp(14px,2.6vw,30px);
  list-style:none;margin:0;padding:10px 0;
  font-size:13px;letter-spacing:.03em;white-space:nowrap;
}
.subnav a{position:relative;display:inline-block;color:var(--muted);padding:3px 0;transition:color .2s;}
.subnav a:hover{color:var(--accent);}
.subnav a.here{color:var(--ink);font-weight:600;}
.subnav a.here::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}
/* Centring plus horizontal overflow clips the first item on narrow screens,
   so start-align once the strip can no longer fit. */
@media (max-width:640px){
  .subnav ul{justify-content:flex-start;}
}

/* ---------- ticker (homepage) ---------- */
.ticker{
  background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.ticker-track{display:inline-block;padding:12px 0;animation:tick 38s linear infinite;}
.ticker-track span{margin:0 34px;}
.ticker-track i{color:var(--accent);font-style:normal;}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- buttons ----------
   Two variants. The inner pages previously baked the filled treatment into
   `.btn` because it was the only button they used; that is `.btn-solid` here,
   and the newsletter markup now asks for it explicitly. */
.btn{
  display:inline-block;border:1px solid var(--ink);
  padding:15px 36px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .25s,color .25s;
  background:transparent;cursor:pointer;font-family:var(--sans);
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);}

/* ---------- shared kicker ---------- */
.kicker{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;
  display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:44px;height:1px;background:var(--accent);}

/* ---------- photography (homepage surfaces) ---------- */
.art{background:var(--paper-2);position:relative;}
.art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(100%) contrast(1.04);
  transition:filter .6s ease,transform .6s cubic-bezier(.2,.6,.2,1);
}
.card:hover .art img,.story:hover .art img{filter:grayscale(0%) contrast(1);}

/* ---------- hero (homepage) ---------- */
.hero{padding:clamp(40px,6vw,84px) 0;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center;}
.hero-art{position:relative;}
.hero-art .frame{border:1px solid var(--ink);padding:14px;background:var(--paper);}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.06;margin:18px 0 20px;letter-spacing:-.015em;
}
.hero h1 em{font-style:normal;font-weight:600;color:var(--accent);}
.hero .standfirst{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:52ch;margin-bottom:28px;line-height:1.65;}

/* ---------- byline ---------- */
.byline{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding-bottom:28px;
}
.byline b{color:var(--ink);font-weight:600;}
/* The hero byline is followed by a button rather than the article rule. */
.hero .byline{gap:18px;flex-wrap:nowrap;padding-bottom:0;margin-bottom:30px;}

/* ---------- section headings (homepage) ---------- */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(34px,4.5vw,58px) 0 26px;
}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;}
.sec-head .all{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.sec-head .all:hover{color:var(--accent);}

/* ---------- cards ----------
   Base scale is the listing card used on section and archive pages. The
   homepage runs the same component one step larger inside `.feat-grid`. */
.card{cursor:pointer;}
.card .im{border:1px solid var(--line);aspect-ratio:10/7;overflow:hidden;background:var(--paper-2);margin-bottom:14px;}
.card .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.04);transition:filter .5s,transform .5s;}
.card:hover .im img{filter:none;transform:scale(1.04);}
.card .cat{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px;}
.card h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,24px);line-height:1.3;margin-bottom:8px;transition:color .2s;}
.card:hover h3{color:var(--accent);}
.card p{font-size:15.5px;color:var(--muted);line-height:1.6;margin-bottom:8px;}
.card .meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

.feat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  padding-bottom:clamp(40px,5vw,70px);
}
.feat-grid .card .art{overflow:hidden;border:1px solid var(--line);margin-bottom:16px;aspect-ratio:10/7;}
.feat-grid .card:hover .art img{transform:scale(1.045);}
.feat-grid .card .cat{margin-bottom:8px;}
.feat-grid .card h3{font-size:clamp(20px,1.9vw,26px);line-height:1.28;margin-bottom:10px;}
.feat-grid .card p{font-size:16px;line-height:1.65;margin-bottom:12px;}

/* ---------- pull quote (homepage) ---------- */
.pull{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,110px) 0;text-align:center;}
.pull blockquote{
  font-family:var(--display);font-style:normal;font-weight:500;
  font-size:clamp(24px,3.6vw,44px);line-height:1.28;max-width:24ch;margin:0 auto 26px;letter-spacing:-.01em;
}
.pull blockquote mark{background:none;color:#e8888d;}
.pull cite{font-style:normal;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#c9c5bd;}

/* ---------- the edit list (homepage) ---------- */
.edit-layout{
  display:grid;grid-template-columns:2fr 1fr;gap:clamp(30px,5vw,80px);
  padding-bottom:clamp(44px,6vw,80px);
}
.story{
  display:grid;grid-template-columns:180px 1fr;gap:clamp(18px,2.5vw,34px);
  padding:26px 0;border-top:1px solid var(--line);align-items:center;cursor:pointer;
}
.story:last-child{border-bottom:1px solid var(--line);}
.story .art{border:1px solid var(--line);overflow:hidden;aspect-ratio:18/13;}
.story:hover .art img{transform:scale(1.05);}
.story h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,25px);line-height:1.3;margin:6px 0 8px;transition:color .2s;}
.story:hover h3{color:var(--accent);}
.story p{font-size:16px;color:var(--muted);line-height:1.65;}
.story .cat{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.story .meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

/* ---------- sidebar (homepage) ---------- */
aside .box{border:1px solid var(--ink);padding:28px;margin-bottom:28px;background:var(--paper);}
aside h4{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
aside h4::after{content:"";flex:1;height:1px;background:var(--line);}
.top-list{list-style:none;counter-reset:top;}
.top-list li{
  counter-increment:top;display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);
  align-items:baseline;cursor:pointer;
}
.top-list li:last-child{border-bottom:none;}
.top-list li::before{
  content:counter(top,decimal-leading-zero);
  font-family:var(--display);font-size:26px;font-weight:500;color:var(--line);
  transition:color .2s;
}
.top-list li:hover::before{color:var(--accent);}
.top-list a{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.35;}
.top-list a:hover{color:var(--accent);}
.tags{display:flex;flex-wrap:wrap;gap:10px;}
.tags a{
  border:1px solid var(--muted);padding:9px 18px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:all .2s;
}
.tags a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}

/* ---------- article ---------- */
.art-head{padding:clamp(36px,6vw,64px) 0 0;}
.art-head h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.1;letter-spacing:-.015em;margin:16px 0 18px;}
.art-head .dek{font-size:clamp(17px,1.6vw,21px);color:var(--muted);line-height:1.6;margin-bottom:22px;}
figure.lead{margin:0 0 8px;}
figure.lead .ph{border:1px solid var(--ink);padding:12px;background:var(--paper);}
figure.lead img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2);}
figure.lead figcaption{font-size:12.5px;color:var(--muted);padding-top:10px;letter-spacing:.04em;}

/* In-article figures. Same frame language as the lead image but in the hairline
   rule rather than full ink, so a mid-article diagram reads as supporting the
   argument instead of competing with the hero above it. */
.prose figure{margin:clamp(30px,4.5vw,46px) 0;}
.prose figure .ph{border:1px solid var(--line);padding:10px;background:var(--paper);}
.prose figure img{width:100%;height:auto;display:block;}
.prose figcaption{
  font-size:12.5px;color:var(--muted);padding-top:10px;
  letter-spacing:.04em;line-height:1.5;
}
.prose{padding:clamp(28px,4vw,44px) 0 clamp(40px,6vw,64px);}
.prose p{font-size:18px;line-height:1.85;margin-bottom:26px;color:#1c1b19;}
.prose p:first-of-type::first-letter{font-family:var(--display);font-weight:700;font-size:3.1em;line-height:.85;float:left;padding:6px 12px 0 0;color:var(--ink);}
.prose blockquote{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.4vw,28px);line-height:1.4;letter-spacing:-.01em;border-left:3px solid var(--accent);padding:6px 0 6px 26px;margin:36px 0;color:var(--ink);}
.tagrow{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:40px;}
.tagrow a{border:1px solid var(--muted);padding:8px 16px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;transition:all .2s;}
.tagrow a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.next{border-top:1px solid var(--ink);background:var(--paper-2);padding:clamp(36px,5vw,56px) 0;}
.next h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,28px);margin-bottom:26px;letter-spacing:-.01em;}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);}
.ncard .cat{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px;}
.ncard h3{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.9vw,23px);line-height:1.3;}
.ncard h3 a:hover{color:var(--accent);}
.ncard .meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;}

/* ---------- listing pages ---------- */
.list-head{padding:clamp(36px,6vw,64px) 0 clamp(24px,3vw,36px);}
.list-head h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.015em;margin-top:14px;}
.list-head p{color:var(--muted);font-size:17px;max-width:60ch;margin-top:10px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);padding-bottom:clamp(40px,6vw,70px);}

/* ---------- static pages ---------- */
.page{padding:clamp(28px,4vw,44px) 0 clamp(44px,6vw,72px);}
.page p{font-size:18px;line-height:1.85;margin-bottom:24px;color:#1c1b19;}
.page h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,27px);margin:34px 0 14px;letter-spacing:-.01em;}
.person{border-top:1px solid var(--line);padding:24px 0;}
.person:last-child{border-bottom:1px solid var(--line);}
.person h3{font-family:var(--display);font-weight:600;font-size:21px;}
.person .role{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:4px 0 8px;}
.person p{font-size:16px;color:var(--muted);line-height:1.7;margin:0;}

/* ---------- newsletter ---------- */
.news{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper-2);}
.news .wrap{
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,60px);align-items:center;
  padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px);
}
.news h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,38px);line-height:1.15;margin-bottom:8px;letter-spacing:-.01em;}
.news p{color:var(--muted);font-size:17px;max-width:46ch;}
.news form{display:flex;min-width:min(420px,100%);}
.news input{
  flex:1;border:1px solid var(--ink);border-right:none;background:var(--paper);
  padding:15px 18px;font-family:var(--sans);font-size:15px;outline:none;
}
.news input::placeholder{color:var(--muted);text-transform:uppercase;font-size:12.5px;letter-spacing:.12em;}
.news .note{font-size:13.5px;color:var(--muted);margin-top:12px;}

/* ---------- footer ---------- */
footer{padding:clamp(36px,5vw,56px) 0 28px;}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px);
  padding-bottom:36px;border-bottom:1px solid var(--line);
}
.foot-brand{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px;}
.foot-brand .dot{color:var(--accent);}
.foot-grid>div>p{font-size:15.5px;color:var(--muted);max-width:34ch;}
.foot-grid h5{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:14px;}
.foot-grid ul{list-style:none;}
.foot-grid ul li{margin-bottom:11px;}
.foot-grid ul a{font-size:15.5px;color:var(--muted);transition:color .2s;}
.foot-grid ul a:hover{color:var(--accent);}
.credits{padding-top:22px;font-size:14px;color:var(--muted);line-height:1.9;letter-spacing:.02em;}
.credits a{text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.credits a:hover{color:var(--accent);}
.colophon{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ---------- reveal on scroll ----------
   Scoped to `.js-reveal`, which the inline head script adds to <html>. With no
   JS — or if site.js fails to load and the watchdog strips the class — these
   rules never apply and the content is simply visible. */
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.js-reveal .reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;max-width:560px;}
  .feat-grid{grid-template-columns:1fr 1fr;}
  .edit-layout{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .news .wrap{grid-template-columns:1fr;}
  .next-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .feat-grid{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .story{grid-template-columns:1fr;}
  .story .art{max-width:100%;}
  .foot-grid{grid-template-columns:1fr;}
  .news form{flex-direction:column;}
  .news input{border-right:1px solid var(--ink);border-bottom:none;}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
  .js-reveal .reveal{opacity:1;transform:none;transition:none;}
  .art img,.card h3,.story h3,.card .im img{transition:none;}
}

/* ---------- commerce: ad slots, disclosure, shop module ----------
   Added when the journal took affiliate links and display advertising.
   Ad frames reserve their height so late-loading creative cannot shift
   the article text under the reader. */
.ad{margin:clamp(28px,4vw,40px) 0;}
.ad-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.ad-frame{
  min-height:250px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);background:var(--paper-2);
}
.ad-empty{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

.disclosure-banner{
  border-left:3px solid var(--accent);padding:10px 0 10px 16px;margin-top:clamp(20px,3vw,28px);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}

.shop{border-top:1px solid var(--ink);padding:clamp(28px,4vw,40px) 0 clamp(8px,2vw,16px);}
.shop-head{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;}
.shop-disclosure{font-size:14px;color:var(--muted);line-height:1.7;margin:10px 0 22px;max-width:62ch;}
.shop-list{list-style:none;}
.shop-item{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px);
  padding:20px 0;border-top:1px solid var(--line);flex-wrap:wrap;
}
.shop-item:last-child{border-bottom:1px solid var(--line);}
.shop-brand{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.shop-name{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,21px);line-height:1.3;margin-top:4px;}
.shop-item-note{font-size:15.5px;color:var(--muted);line-height:1.6;margin-top:6px;max-width:52ch;}
.shop-price{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.shop-cta{white-space:nowrap;}
.shop-note{font-size:13px;color:var(--muted);margin-top:18px;letter-spacing:.02em;}

@media(max-width:600px){
  .shop-item{flex-direction:column;align-items:flex-start;}
  .shop-cta{width:100%;text-align:center;}
  .ad-frame{min-height:200px;}
}

/* ---------- consent banner ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--ink);color:var(--paper);border-top:1px solid var(--ink);
}
.consent-inner{
  max-width:1280px;margin:0 auto;padding:clamp(18px,3vw,26px) clamp(20px,4vw,56px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,40px);align-items:center;
}
.consent h2{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:6px;}
.consent p{font-size:14.5px;line-height:1.65;color:#c9c5bd;max-width:70ch;}
.consent-toggle{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--paper);cursor:pointer;}
.consent-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap;}
.consent-actions .btn{border-color:var(--paper);color:var(--paper);padding:12px 22px;font-size:12px;}
.consent-actions .btn:hover{background:var(--paper);color:var(--ink);}
.consent-actions .btn-solid{background:var(--paper);color:var(--ink);}
.consent-actions .btn-solid:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
/* An ad frame the reader declined shouldn't hold 250px of empty space. */
.ad-frame[data-consent="denied"]{min-height:0;padding:14px;border-style:dotted;}
.ad-frame[data-consent="denied"] .ad-empty::after{content:" (advertising cookies declined)";}
@media(max-width:760px){
  .consent-inner{grid-template-columns:1fr;}
  .consent-actions .btn{flex:1;text-align:center;}
}

/* Image provenance line inside a caption. Set apart from the editorial caption
   so a reader can tell at a glance which part is the argument and which part is
   the disclosure. */
.prose figcaption .fig-credit,
figure.lead figcaption .fig-credit{
  display:block;margin-top:5px;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;opacity:.72;
}

/* Sitewide affiliate disclosure. Sits above the colophon rather than inside
   it: link transformation can monetise any outbound link, so this is a
   standing statement, not a piece of small print among the legal links. */
.foot-disclosure{
  font-size:13px;color:var(--muted);line-height:1.55;
  max-width:70ch;margin:0 0 18px;padding-top:22px;
  border-top:1px solid var(--line);
}

/* Visually hidden but still rendered. Clipped rather than display:none so the
   node stays in the render tree for text extractors; paired with aria-hidden
   at the call site so it is never announced. */
.vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}