/* ==========================================================================
   BREAKING THE WAVES — shared stylesheet
   Sections:
     01  Tokens & reset
     02  Paper sheet + grain
     03  Utility type
     04  Sticky nav / topbar
     05  Cover & masthead
     06  Featured (cover story)
     07  Plates (images + typographic fallback)
     08  Card grid
     09  Sections strip
     10  Newsletter
     11  Colophon
     12  Article page
     13  Print
   ========================================================================== */

/* ---------- 01  Tokens & reset ---------- */
:root{
  --paper:#F4F2EB;
  --paper-2:#EDEAE0;
  --ink:#1B1A17;
  --ink-soft:#3A3833;
  --fog:#86847C;
  --accent:#E7B00C;      /* chrome yellow — the Cahiers nod */
  --accent-ink:#1B1A17;  /* text that sits on the accent */
  --desk:#C9C6BD;
  --rule:rgba(27,26,23,.28);
  --rule-soft:rgba(27,26,23,.14);
  --grain:.5;

  --display:'Fraunces',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --utility:'Archivo',system-ui,sans-serif;

  --pad:clamp(1.1rem,4vw,3rem);
  --sheet:1060px;
}

html[data-theme="dark"]{
  --paper:#141310;
  --paper-2:#1C1B17;
  --ink:#EFEBE0;
  --ink-soft:#BDB8AB;
  --fog:#8A867B;
  --accent:#E7B00C;
  --accent-ink:#141310;
  --desk:#0A0A09;
  --rule:rgba(239,235,224,.30);
  --rule-soft:rgba(239,235,224,.14);
  --grain:.28;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth; scroll-padding-top:5rem}
body{
  background:var(--desk);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.65;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
svg,img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:1px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-family:var(--utility);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.skip-link:focus{left:.5rem; top:.5rem}

/* ---------- 02  Paper sheet + grain ---------- */
.sheet{
  max-width:var(--sheet);
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 18px 50px rgba(0,0,0,.28);
  position:relative;
}
.sheet::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  z-index:5;
}
html[data-theme="dark"] .sheet::before{mix-blend-mode:screen}
@media (min-width:1100px){ .sheet{margin:34px auto} }

/* ---------- 03  Utility type ---------- */
.eyebrow{
  font-family:var(--utility);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.rule-eyebrow{display:flex; align-items:center; gap:.9rem}
.rule-eyebrow::after{content:""; flex:1; height:1.5px; background:currentColor; opacity:.45}

.wave{display:block; width:100%; height:14px; color:var(--ink)}
.wave.accent{color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--utility);
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
  border:1.5px solid var(--ink);
  padding:.75rem 1.15rem;
  background:var(--paper);
  color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink)}
.btn.solid{background:var(--ink); color:var(--paper)}
.btn.solid:hover,.btn.solid:focus-visible{box-shadow:3px 3px 0 var(--accent)}

/* ---------- 04  Sticky nav / topbar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem var(--pad);
  border-bottom:1.5px solid var(--ink);
  font-family:var(--utility);
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  flex-wrap:wrap;
}
.topbar .price{color:var(--fog)}

.navbar{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1.5px solid var(--ink);
  display:flex; align-items:center; gap:1rem;
  padding:.6rem var(--pad);
  font-family:var(--utility);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.navbar .nav-mast{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; font-size:1rem; line-height:1; text-decoration:none;
  white-space:nowrap;
}
.navbar .nav-mast .w{font-style:italic; font-weight:600}
.navbar nav{display:flex; gap:1.3rem; margin-left:auto; flex-wrap:wrap}
.navbar nav a{text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent}
.navbar nav a:hover,.navbar nav a:focus-visible{border-bottom-color:var(--accent)}
.theme-toggle{
  border:1.5px solid var(--ink); padding:.4rem .6rem; line-height:1;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.45rem;
}
.theme-toggle:hover{background:var(--accent); color:var(--accent-ink)}
.theme-toggle .dot{width:.55em; height:.55em; border:1.5px solid currentColor; border-radius:50%; background:var(--accent)}
html[data-theme="dark"] .theme-toggle .dot{background:transparent}

/* on narrow screens the section list becomes a single scrolling row
   on its own line, so the bar stays two lines tall instead of five */
@media (max-width:760px){
  .navbar{flex-wrap:wrap; row-gap:.45rem; padding-bottom:.4rem; gap:.6rem}
  .navbar .nav-mast{order:0}
  .theme-toggle{order:1; margin-left:auto}
  .navbar nav{
    order:2; flex-basis:100%; margin-left:0;
    flex-wrap:nowrap; overflow-x:auto; gap:1.1rem;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .navbar nav::-webkit-scrollbar{display:none}
  .navbar nav a{white-space:nowrap}
}

/* reading-progress bar (article page) */
.progress{
  position:absolute; left:0; bottom:-1.5px; height:2.5px; width:0%;
  background:var(--accent); transition:width .1s linear;
}

/* ---------- 05  Cover & masthead ---------- */
.cover{padding:clamp(1.6rem,5vw,3.4rem) var(--pad) 0}
.masthead{
  font-family:var(--display);
  font-weight:900; line-height:.92; letter-spacing:-.015em;
  font-size:clamp(2.4rem,12.5vw,8.6rem);
  text-transform:uppercase;
}
.masthead .l2{display:block; padding-left:clamp(.9rem,8vw,7.5rem)}
.masthead .waves-word{font-style:italic; font-weight:600; letter-spacing:-.03em}
.masthead-wave{margin-top:clamp(.6rem,2vw,1.2rem)}

.coverlines{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  padding:.9rem 0 0;
  font-family:var(--utility);
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.coverlines span::before{content:"●"; font-size:.5rem; vertical-align:2px; margin-right:.55rem; color:var(--accent)}
.coverlines span:first-child::before{content:""; margin:0}

/* ---------- 06  Featured (cover story) ---------- */
.featured{
  margin:clamp(1.6rem,4vw,2.8rem) 0 0;
  background:var(--accent);
  color:var(--accent-ink);
  padding:clamp(1.4rem,4vw,2.6rem) var(--pad) clamp(1.8rem,4.5vw,3rem);
}
.featured a{color:inherit}
.featured .rule-eyebrow::after{background:var(--accent-ink); opacity:.5}
.featured-grid{
  display:grid; gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:1fr;
  align-items:start;
  margin-top:1.1rem;
}
@media (min-width:860px){
  .featured-grid{grid-template-columns:1.15fr .85fr; align-items:center}
  .featured-grid.no-plate{grid-template-columns:1fr}
}
.featured-title{
  font-family:var(--display); font-weight:640;
  font-size:clamp(1.9rem,5vw,3.4rem);
  line-height:1.04; letter-spacing:-.015em;
  margin:0 0 .85rem;
  max-width:20ch;
}
.featured-title em{font-style:italic; font-weight:520}
.featured-title a{text-decoration:none}
.featured-title a:hover,.featured-title a:focus-visible{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.featured-dek{font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.55; max-width:56ch}
.featured-meta{
  display:flex; flex-wrap:wrap; gap:.35rem 1.4rem;
  margin-top:1.1rem; padding-top:.85rem;
  border-top:1.5px solid var(--accent-ink);
  font-family:var(--utility); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
/* The yellow band keeps the same colours in both themes, so its contents
   use literal values rather than the theme tokens. */
.featured .btn{
  margin-top:1.4rem;
  background:#F4F2EB; color:#1B1A17; border-color:#1B1A17;
}
.featured .btn:hover,.featured .btn:focus-visible{box-shadow:3px 3px 0 #1B1A17}
html[data-theme] .featured .plate{border-color:#1B1A17}
html[data-theme] .featured .plate.empty{
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(27,26,23,.09) 9px 10px),
    rgba(244,242,235,.62);
}
html[data-theme] .featured .plate.empty .glyph{color:#1B1A17; opacity:.22}
html[data-theme] .featured .plate.empty .stamp{color:rgba(27,26,23,.6)}
.featured-grid .plate{aspect-ratio:2/3}          /* portrait orientation */
@media (max-width:859px){ .featured-grid .plate{aspect-ratio:4/5} }
html[data-theme] .featured figcaption{color:rgba(27,26,23,.62); text-decoration:none}
.featured a{text-decoration:none}

/* ---------- 07  Plates (images + typographic fallback) ---------- */
.plate{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--paper-2);
  border:1.5px solid currentColor;
}
.plate.tall{aspect-ratio:4/5}
.plate img{width:100%; height:100%; object-fit:cover; filter:grayscale(.18) contrast(1.04)}
figure{margin:0}
figure figcaption{
  font-family:var(--utility); font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--fog); margin-top:.5rem;
  text-decoration:none;                 /* plates are wrapped in links */
}
/* typographic fallback when no image is supplied */
.plate.empty{
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(27,26,23,.055) 9px 10px),
    var(--paper-2);
}
html[data-theme="dark"] .plate.empty{
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(239,235,224,.06) 9px 10px),
    var(--paper-2);
}
.plate.empty .glyph{
  font-family:var(--display); font-weight:900;
  font-size:clamp(3rem,9vw,6rem); line-height:1;
  color:var(--ink); opacity:.16; text-transform:uppercase;
}
.plate.empty .stamp{
  position:absolute; bottom:.6rem; left:.7rem;
  font-family:var(--utility); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fog);
}

/* ---------- 08  Card grid ---------- */
.strip{padding:clamp(1.6rem,4vw,2.6rem) var(--pad); border-bottom:1.5px solid var(--ink)}
.strip-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.strip-head .eyebrow{color:var(--fog)}
.strip-head .count{font-family:var(--utility); font-size:.64rem; letter-spacing:.2em; color:var(--fog); text-transform:uppercase}

.cards{
  display:grid; gap:1.6rem 1.4rem;
  grid-template-columns:1fr;
  margin-top:1.3rem;
}
@media (min-width:620px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }

.card{
  border-top:1.5px solid var(--ink);
  padding-top:.85rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.card .plate{border-color:var(--rule); margin-bottom:.25rem}
.card .folio{font-family:var(--utility); font-size:.63rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fog)}
.card .folio .sec{color:var(--accent-ink); background:var(--accent); padding:.18em .45em; margin-right:.5em}
html[data-theme="dark"] .card .folio .sec{color:#141310}
.card h3{
  font-family:var(--display); font-weight:600; font-size:1.16rem; line-height:1.25;
  letter-spacing:-.005em;
}
.card h3 em{font-style:italic; font-weight:520}
.card a{text-decoration:none}
.card a:hover h3,.card a:focus-visible h3{text-decoration:underline; text-underline-offset:3px}
.card p{font-size:.94rem; color:var(--ink-soft); line-height:1.5}
.card .byline{font-family:var(--utility); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog); margin-top:auto; padding-top:.4rem}
.card.ghost{color:var(--fog)}
.card.ghost h3{font-style:italic; font-weight:480}

/* the open call that closes every listing — deliberately louder than a card */
.card.pitch{
  border-top-width:3px;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(231,176,12,.16) 11px 12px);
  padding:1.1rem 1.1rem 1.2rem;
  margin-top:-.85rem;
}
.card.pitch .folio .sec{background:var(--ink); color:var(--paper)}
.card.pitch h3{
  font-size:1.6rem; font-weight:900; line-height:1.1;
  letter-spacing:-.015em; text-transform:uppercase;
}
.card.pitch p{color:var(--ink)}
.pitch-cta{
  align-self:flex-start; margin-top:auto;
  font-family:var(--utility); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none;
  background:var(--accent); color:#1B1A17;
  border:1.5px solid var(--ink);
  padding:.6rem .9rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pitch-cta:hover,.pitch-cta:focus-visible{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink)}

.more-link{
  font-family:var(--utility); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px;
}
.more-link:hover,.more-link:focus-visible{border-bottom-color:var(--ink)}

/* ---------- archive page ---------- */
.archive-head{
  padding:clamp(2rem,5vw,3.4rem) var(--pad) clamp(1.4rem,3vw,2rem);
  border-bottom:1.5px solid var(--ink);
}
.archive-head .eyebrow{color:var(--fog)}
.archive-title{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem,7vw,4.4rem); line-height:.98; letter-spacing:-.02em;
  margin:.6rem 0 .7rem;
}
.archive-blurb{font-size:1.05rem; color:var(--ink-soft); max-width:52ch}
#arch-switch{margin-top:1.4rem}
#arch-switch a[aria-current="true"]{
  background:var(--accent); color:#1B1A17; border-color:var(--ink);
}

/* ---------- 09  Sections strip ---------- */
.sections{
  display:grid; gap:0; grid-template-columns:1fr;
  border-bottom:1.5px solid var(--ink);
}
@media (min-width:700px){ .sections{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} }
.sections a{
  padding:clamp(1.1rem,3vw,1.8rem) var(--pad);
  text-decoration:none;
  border-bottom:1px solid var(--rule-soft);
  transition:background .15s ease;
}
@media (min-width:700px){
  .sections a{border-bottom:none; border-right:1px solid var(--rule-soft); padding-inline:clamp(1rem,2vw,1.6rem)}
  .sections a:last-child{border-right:none}
}
.sections a:hover,.sections a:focus-visible{background:var(--paper-2)}
.sections .n{font-family:var(--utility); font-size:.6rem; letter-spacing:.24em; color:var(--fog); display:block}
.sections .s{font-family:var(--display); font-weight:640; font-size:1.15rem; display:block; margin-top:.3rem}
.sections .d{font-size:.88rem; color:var(--ink-soft); display:block; margin-top:.25rem; line-height:1.45}

/* ---------- 10  Newsletter ---------- */
.subscribe{
  padding:clamp(1.8rem,4.5vw,3rem) var(--pad);
  border-bottom:1.5px solid var(--ink);
  display:grid; gap:1.4rem; grid-template-columns:1fr; align-items:center;
}
@media (min-width:820px){ .subscribe{grid-template-columns:1.1fr .9fr; gap:2.4rem} }
.subscribe h2{
  font-family:var(--display); font-weight:640; letter-spacing:-.01em;
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.1; margin:.6rem 0 .6rem;
}
.subscribe p{color:var(--ink-soft); max-width:46ch; font-size:.98rem}
.sub-form{display:flex; gap:.6rem; flex-wrap:wrap}
.sub-form input{
  flex:1 1 14rem; min-width:0;
  font-family:var(--utility); font-size:.85rem;
  padding:.8rem .9rem;
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.sub-form input::placeholder{color:var(--fog)}
.sub-note{font-family:var(--utility); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); margin-top:.8rem}
.sub-ok{font-family:var(--utility); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.7rem; color:var(--ink)}

/* ---------- 11  Colophon ---------- */
.colophon{
  padding:clamp(1.6rem,4vw,2.4rem) var(--pad) clamp(2rem,5vw,3rem);
  display:grid; gap:1.6rem; grid-template-columns:1fr;
}
@media (min-width:760px){ .colophon{grid-template-columns:1.4fr 1fr 1fr} }
.colophon .mini-mast{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:1.5rem; line-height:1; letter-spacing:-.01em;
}
.colophon p{font-size:.92rem; color:var(--ink-soft); max-width:38ch; margin-top:.6rem}
.colophon .eyebrow{color:var(--fog); margin-bottom:.55rem}
.colophon ul{list-style:none}
.colophon li{margin:.3rem 0}
.colophon a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.barcode{
  margin-top:1rem; height:44px; width:150px;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px,
    var(--ink) 4px 7px, transparent 7px 9px,
    var(--ink) 9px 10px, transparent 10px 14px,
    var(--ink) 14px 16px, transparent 16px 17px);
}
.barcode-label{font-family:var(--utility); font-size:.6rem; letter-spacing:.3em; margin-top:.35rem; color:var(--fog)}

/* ---------- 12  Article page ---------- */
.article{padding:0 var(--pad) clamp(2rem,5vw,3.4rem)}
.running-head{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--utility);
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fog);
}
.running-head a{text-decoration:none}
.running-head a:hover,.running-head a:focus-visible{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

.article-head{padding:clamp(1.8rem,4.5vw,3rem) 0 0; max-width:56rem}
.kicker{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.kicker b{background:var(--ink); color:var(--paper); padding:.28em .6em; font-weight:600}
.article-title{
  font-family:var(--display); font-weight:660;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.05; letter-spacing:-.015em;
  margin:1.1rem 0 1rem;
}
.article-title em{font-style:italic; font-weight:540}
.standfirst{
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  line-height:1.55; font-style:italic; color:var(--ink-soft);
  max-width:60ch;
}
.byline-row{
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
  margin:1.4rem 0 0; padding:1rem 0;
  border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--rule);
  font-family:var(--utility);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.byline-row .muted{color:var(--fog)}

.lede-plate{margin:clamp(1.4rem,3.5vw,2.2rem) 0 0}
.lede-plate .plate{aspect-ratio:21/9; border-color:var(--rule)}
@media (max-width:700px){ .lede-plate .plate{aspect-ratio:16/10} }

/* two-column layout: body + film file */
.article-layout{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:1fr;
  margin-top:clamp(1.6rem,4vw,2.4rem);
  align-items:start;
}
@media (min-width:960px){
  .article-layout{grid-template-columns:minmax(0,1fr) 16rem}
}

/* the measure is set on the text, not the container, so stills can run
   the full width of the column */
.article-body{font-size:1.08rem}
.article-body > p,
.article-body > .qa-item,
.article-body > .pullquote{max-width:66ch}
.article-body p{margin-bottom:1.05em}
/* drop cap on essays and reviews only — a Q&A opens on a question */
.article-body.prose > p:first-of-type::first-letter{
  font-family:var(--display); font-weight:700;
  font-size:4.2em; line-height:.78;
  float:left; padding:.06em .1em 0 0;
}
.article-body h2{
  font-family:var(--display); font-weight:640; font-size:1.5rem;
  line-height:1.2; margin:2rem 0 .8rem;
}

/* ---- Q&A transcripts ---- */
.qa-item{margin-bottom:2.2rem}
.qa-item:last-child{margin-bottom:0}
.qa-q{
  display:flex; gap:.8rem; align-items:flex-start;
  font-family:var(--display); font-weight:640;
  font-size:1.12rem; line-height:1.35; letter-spacing:-.005em;
  margin:0 0 .9rem;
}
.qa-mark{
  flex:none;
  font-family:var(--utility); font-weight:700; font-size:.7rem;
  letter-spacing:0; line-height:1;
  width:1.55em; height:1.55em;
  display:grid; place-items:center;
  background:var(--accent); color:#1B1A17;
  border:1.5px solid var(--ink);
  margin-top:.22em;
}
.qa-a{padding-left:2.35rem; border-left:1.5px solid var(--rule-soft)}
.qa-a p:last-child{margin-bottom:0}
@media (max-width:640px){
  .qa-a{padding-left:1.1rem}
  .qa-q{gap:.6rem; font-size:1.06rem}
}

.draft-badge{
  background:#B3261E; color:#fff;
  padding:.28em .6em; font-weight:600; letter-spacing:.14em;
}

.pullquote{
  margin:2rem 0 2.2rem;
  padding:1.6rem 0 1.4rem;
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  text-align:center;
}
.pullquote blockquote{
  font-family:var(--display); font-style:italic; font-weight:520;
  font-size:clamp(1.1rem,1.9vw,1.4rem); line-height:1.35;
  max-width:34ch; margin:0 auto;
}
.pullquote .wave{max-width:180px; margin:1.1rem auto 0}
.endmark{
  display:inline-block; width:.55em; height:.55em;
  background:var(--accent); outline:1.5px solid var(--ink);
  margin-left:.5em; vertical-align:baseline;
}

/* stills dropped into the body of a piece */
.body-figure{margin:2rem 0 2.2rem}
.body-figure .plate{aspect-ratio:auto; border-color:var(--rule)}
.body-figure img{width:100%; height:auto; filter:none}

/* a portrait-shaped image sits in the sidebar rather than as a wide lede */
.side-plate{margin-bottom:1.2rem}
.side-plate .plate{aspect-ratio:2/3; border-color:var(--ink)}
@media (max-width:959px){
  .side-plate{max-width:16rem; margin-bottom:1.6rem}
}

/* film file (sidebar) */
.filefile{position:sticky; top:5.2rem}
@media (max-width:959px){ .filefile{position:static} }
.filecard{
  border:1.5px solid var(--ink);
  padding:1.1rem 1.1rem 1.2rem;
  background:var(--paper-2);
}
.filecard h3{
  font-family:var(--utility); font-size:.66rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  padding-bottom:.6rem; margin-bottom:.8rem;
  border-bottom:1.5px solid var(--ink);
}
.filecard dl{display:grid; grid-template-columns:auto 1fr; gap:.45rem .9rem; font-size:.88rem}
.filecard dt{font-family:var(--utility); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fog); padding-top:.28em}
.filecard dd{color:var(--ink)}
.rating{display:flex; align-items:center; gap:.35rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--rule-soft)}
.rating .star{width:.95rem; height:.95rem; color:var(--accent)}
.rating .star.off{opacity:.25}
.rating .val{font-family:var(--utility); font-size:.62rem; letter-spacing:.16em; color:var(--fog); margin-left:.4rem; text-transform:uppercase}

.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.tags a{
  font-family:var(--utility); font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1.5px solid var(--rule); padding:.32rem .55rem; text-decoration:none;
}
.tags a:hover,.tags a:focus-visible{border-color:var(--ink); background:var(--accent); color:var(--accent-ink)}

.share{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--rule-soft)}
.share .eyebrow{color:var(--fog); margin-bottom:.55rem}
.share-row{display:flex; flex-wrap:wrap; gap:.4rem}
.share-row a,.share-row button{
  font-family:var(--utility); font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1.5px solid var(--rule); padding:.4rem .6rem; text-decoration:none;
}
.share-row a:hover,.share-row button:hover,
.share-row a:focus-visible,.share-row button:focus-visible{border-color:var(--ink); background:var(--ink); color:var(--paper)}

.folios{
  display:flex; justify-content:space-between;
  margin-top:clamp(1.8rem,4vw,2.6rem); padding-top:.8rem;
  border-top:1px solid var(--rule);
  font-family:var(--utility);
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fog);
}

.bio{
  margin-top:2rem; padding:1.2rem 0 0;
  border-top:1.5px solid var(--ink);
  display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
}
.bio .initials{
  font-family:var(--display); font-weight:900; font-size:1.4rem;
  width:3rem; height:3rem; display:grid; place-items:center;
  border:1.5px solid var(--ink); background:var(--accent); color:var(--accent-ink);
  flex:none;
}
.bio .who{font-family:var(--utility); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.bio p{font-size:.94rem; color:var(--ink-soft); max-width:52ch; margin-top:.3rem}

.missing{padding:clamp(3rem,10vw,6rem) var(--pad); text-align:center}
.missing h2{font-family:var(--display); font-weight:660; font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:.8rem}
.missing p{color:var(--ink-soft); margin-bottom:1.6rem}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .topbar{font-size:.58rem; letter-spacing:.12em; gap:.4rem .9rem; padding:.7rem 1.1rem}
  .navbar{font-size:.62rem; letter-spacing:.12em}
  .coverlines{font-size:.62rem; letter-spacing:.14em; gap:.35rem .9rem}
  .article-body{font-size:1.04rem}
  .article-body p:first-of-type::first-letter{font-size:3.6em}
  .byline-row{gap:.35rem 1.2rem; font-size:.64rem}
  .running-head{font-size:.56rem; letter-spacing:.14em}
  .folios{font-size:.56rem; letter-spacing:.14em}
  .btn{width:100%; justify-content:center}
  .featured .btn{width:auto}
  .pullquote blockquote{font-size:1.08rem}
}

/* ---------- 13  Print ---------- */
@media print{
  body{background:#fff}
  .sheet{box-shadow:none; max-width:none; margin:0}
  .sheet::before,.navbar,.subscribe,.share,.sections,.theme-toggle,.skip-link{display:none!important}
  .article-layout{grid-template-columns:1fr}
  .filefile{break-inside:avoid}
  a[href]::after{content:""}
}