@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   MORDAZ — opinion on sport, politics and economics
   ───────────────────────────────────────────────────────────────────────
   THE IDEA
   Every piece names the received wisdom it is attacking before it says
   anything else — stated plainly and fairly — and then explains what is
   wrong with it. That pairing is the structure, not a flourish: it drives
   the label above each headline, the archive rows, the block that opens an
   article, and what the plates render. The archive is readable because
   each row carries its own rebuttal rather than another headline.

   THE SIGNATURE — the bite
   One geometry, used structurally rather than decoratively: the cream
   ground eats a circle out of every red or near-black block where it meets
   the page. Hero panel, article header, About, responses, plates, pull
   quotes — the same radius, the same idea. See §4.

   COLOUR
   Ground:    cream. The page is paper; everything sits on it.
   Structure: red. Blocks and marks — the hero panel, the article header,
              the "They say" labels, rules, the drop cap. Not body text.
   Type:      near-black. Display headlines are black ON cream, which is
              what stops the page becoming a wall of red, and the only
              thing legible where the lead headline crosses its plate.

   TYPE
   Archivo variable at TWO WIDTHS as a system — the mark expanded
   (wdth 125), headlines condensed (wdth 75). Newsreader carries the
   reading, and the quoted received views, because it was drawn for text.

   MOTION
   Wipes, not fades. Nothing fades up by 20px. See §12.

   ── CONTRACTS, read before editing ──────────────────────────────────
   SPACING  Vertical rhythm comes from ONE place: `.band`. Never add block
            padding to a section via an element or type selector; use the
            `.band--tight` / `.band--flush` modifiers.
   COLOUR   The page is light. Red and near-black blocks need the `--*-inv`
            tokens — don't reach for a raw rgba(). Text on RED is always
            full `--cream`: the red is a mid-tone and anything dimmed drops
            below 4.5:1.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 0. FACES ──────────────────────────────────────────────────────
   Self-hosted, so the site makes no third-party request and nothing
   render-blocks on a domain we don't control. Both families are OFL.

   The unicode-range split is Google's own: browsers fetch `latin` for
   English text and only reach for `latin-ext` if a page actually uses a
   character in that block. Keep both — the IPA in the masthead gloss
   (ɾ, ˈ, ð) lives in latin-ext.

   font-stretch on Archivo MUST stay: it declares the width axis the whole
   type system runs on. Drop it and every wdth value silently does nothing.
   ─────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 900;
  font-stretch:62% 125%; font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 900;
  font-stretch:62% 125%; font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400 500;
  font-display:swap;
  src:url('../fonts/newsreader-it-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400 500;
  font-display:swap;
  src:url('../fonts/newsreader-it-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ─── 1. TOKENS ─────────────────────────────────────────────────────── */

:root{
  /* ground */
  --cream:      #F0E9DE;
  --cream-2:    #E6DDCF;   /* the sunk band — the archive */
  --cream-dim:  #DBD1C3;   /* secondary type on near-black only */

  /* structure */
  --red:        #C4202A;
  --red-deep:   #91161F;   /* red on the sunk band, where --red is only 4.3:1 */
  /* The red reaches only 3.1:1 against near-black, so red TYPE on an ink
     block lifts to this. Blocks of red are unaffected. */
  --red-lift:   #E8505A;

  /* type + the one dark note */
  --ink:        #171516;
  --ink-2:      #221F20;
  /* Both measured against cream AND the sunk band. #948C87 looked right and
     failed at 2.7:1 — greys on cream go darker than instinct suggests. */
  --grey:       #55504E;   /* meta on cream — 6.6:1 */
  --grey-lo:    #6E6763;   /* quieter meta on cream — 4.6:1 */

  /* hairlines — light context and inverted context */
  --rule:       rgba(23,21,22,.16);
  --rule-soft:  rgba(23,21,22,.09);
  --rule-inv:   rgba(240,233,222,.28);
  --rule-inv-s: rgba(240,233,222,.15);
  --type-inv:   rgba(240,233,222,.66);   /* safe on near-black only (7:1) */

  /* the bite — one radius, overridden per block in §4 */
  --bite:       2.4rem;

  /* type */
  --ff-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-util:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-read:    'Newsreader', Georgia, 'Times New Roman', serif;

  /* MORDAZ set in Archivo at wdth 125 / wght 900 measures 5.72em wide —
     measured, not estimated. Sizing that off the viewport breaks the moment
     the hero splits into columns, so it is sized off its own container
     instead (see .hero__mark) and fits by construction.
     Tuned to ~65% of the panel's content box: at ~87% it was the loudest
     thing on the page by a distance and crowded the panel. The mark should
     dominate the hero, not fill it — the white space around it is doing
     as much work as the letterforms.
     If you change the weight, width or the word, re-measure the 5.72em.
     This vw value is the fallback for browsers without container queries. */
  --fs-mark:    clamp(1.9rem, 11vw, 6rem);
  --fs-xl:      clamp(2.1rem, 5.2vw, 4.3rem);
  --fs-l:       clamp(1.55rem, 2.9vw, 2.35rem);
  --fs-m:       clamp(1.2rem, 1.9vw, 1.55rem);
  --fs-body:    clamp(1rem, .95rem + .25vw, 1.14rem);
  --fs-read:    clamp(1.06rem, 1rem + .42vw, 1.28rem);
  --fs-meta:    .715rem;

  /* rhythm — the single source of section spacing */
  --band-y:     clamp(4.5rem, 9vw, 8.5rem);
  --gut:        clamp(1.25rem, 4vw, 3.25rem);
  --wrap:       78rem;
  --measure:    34rem;

  /* motion */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-bite:  cubic-bezier(.34,1.42,.5,1);
  --t-fast:     .22s;
  --t-mid:      .45s;
  --t-slow:     .8s;

  --bar-h:      3.75rem;
}

@media (min-width:60em){ :root{ --bar-h: 4.25rem; --fs-mark: clamp(2rem, 3.7vw, 5.5rem); } }

/* Preferred: size the mark against the panel that holds it, not the window.
   cqw resolves against the container's CONTENT box, so fill% is simply
   5.79 × the cqw value — the mark holds its proportion at any panel width.
   Desktop runs a slightly higher ratio because the title column is narrow. */
@supports (container-type: inline-size){
  :root{ --fs-mark: clamp(1.9rem, 11cqw, 6rem); }
  @media (min-width:60em){ :root{ --fs-mark: clamp(2rem, 12.5cqw, 5.5rem); } }
}


/* ─── 2. RESET + BASE ───────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-h) + 1rem);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-util);
  font-size:var(--fs-body);
  line-height:1.55;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote,ol,ul,dl,dd{ margin:0; }
ol,ul{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Red ring on cream; the inverted blocks flip it to cream so it stays
   visible on red and near-black. */
:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}
.hero__mark :focus-visible,
.ahead :focus-visible,
.about :focus-visible,
.foot :focus-visible,
.resp :focus-visible,
.drawer :focus-visible{ outline-color:var(--cream); }

::selection{ background:var(--red); color:var(--cream); }


/* ─── 3. UTILITIES ──────────────────────────────────────────────────── */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* the only source of vertical section rhythm */
.band{ padding-block:var(--band-y); }
.band--tight{ padding-block:calc(var(--band-y) * .6); }
.band--flush{ padding-block:0; }
.band--sunk{ background:var(--cream-2); }

.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-120%);
  z-index:200; background:var(--red); color:var(--cream);
  padding:.7rem 1.4rem; font-size:var(--fs-meta);
  font-variation-settings:'wdth' 88,'wght' 800;
  letter-spacing:.12em; text-transform:uppercase;
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{ transform:translate(-50%,0); }

/* arrow link */
.arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 92,'wght' 800;
  color:var(--red); padding-block:.4rem;
}
.arrow span{ position:relative; width:1.6rem; height:1px; background:currentColor; transition:width var(--t-fast) var(--ease); }
.arrow span::after{
  content:''; position:absolute; right:0; top:50%;
  width:.42rem; height:.42rem; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.arrow:hover span,.arrow:focus-visible span{ width:2.6rem; }
.about .arrow,.resp .arrow{ color:var(--cream); }


/* ═══════════════════════════════════════════════════════════════════
   4. THE BITE — the signature, as structure
   ───────────────────────────────────────────────────────────────────
   One circle, one radius, eaten out of a corner wherever a red or
   near-black block meets the cream page. A mask rather than an overlay,
   so it reveals whatever is genuinely behind the element instead of
   faking it with a matching-coloured disc.

   The hero keeps a real element (§5) because that one animates, and
   scaling a transform is cheaper and better supported than animating a
   gradient radius.
   ═══════════════════════════════════════════════════════════════════ */

.bite-tr,.bite-tl,.bite-br,.bite-bl{
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
.bite-tr{
  -webkit-mask-image:radial-gradient(circle var(--bite) at 100% 0, transparent 99%, #000 100%);
          mask-image:radial-gradient(circle var(--bite) at 100% 0, transparent 99%, #000 100%);
}
.bite-tl{
  -webkit-mask-image:radial-gradient(circle var(--bite) at 0 0, transparent 99%, #000 100%);
          mask-image:radial-gradient(circle var(--bite) at 0 0, transparent 99%, #000 100%);
}
.bite-br{
  -webkit-mask-image:radial-gradient(circle var(--bite) at 100% 100%, transparent 99%, #000 100%);
          mask-image:radial-gradient(circle var(--bite) at 100% 100%, transparent 99%, #000 100%);
}
.bite-bl{
  -webkit-mask-image:radial-gradient(circle var(--bite) at 0 100%, transparent 99%, #000 100%);
          mask-image:radial-gradient(circle var(--bite) at 0 100%, transparent 99%, #000 100%);
}

/* per-block radius, scaled to the block */
.ahead,.about,.resp{ --bite:clamp(2.4rem,5vw,4rem); }
/* smaller, because the title column is narrow — the same radius would eat it */
.hero__mark{ --bite:clamp(1.6rem,3vw,2.6rem); }
.card__fig{ --bite:clamp(1.5rem,3.5vw,2.2rem); }
.plate--wide{ --bite:clamp(2rem,4vw,3rem); }
.pull{ --bite:1.8rem; }

/* THE BITE at marker scale — a square with a crescent taken out of it */
.bite-mark{
  flex:none; width:.62em; height:.62em; background:currentColor;
  -webkit-mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
          mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
}


/* ═══════════════════════════════════════════════════════════════════
   5. THE CLAIM — what everybody says, and the rebuttal
   ───────────────────────────────────────────────────────────────────
   Every piece names the received wisdom it is attacking before it says
   anything else. The compact form (.claim) sits above a headline on the
   front page; the full form (.recv) opens an article, on the red ground.
   ═══════════════════════════════════════════════════════════════════ */

.claim{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .7rem;
}
.claim__label{
  flex:none; font-family:var(--ff-util); font-size:var(--fs-meta);
  letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 92,'wght' 800; color:var(--red);
}
/* the received line is set as speech — it is someone else's sentence */
.claim__text{
  quotes:'\201C' '\201D'; font-family:var(--ff-read); font-style:italic;
  font-size:clamp(1rem,1.6vw,1.14rem); line-height:1.35; color:var(--grey);
}

/* the meta line — beat, length, date */
.claim__meta{
  display:flex; align-items:center; gap:.5rem;
  font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 92,'wght' 700; color:var(--grey);
}
.claim__meta i{ font-style:normal; color:var(--grey-lo); }

/* ── the full form, on the article header's red ground ── */
.recv{ animation:up .7s var(--ease) both; max-width:46ch; }
.recv__row{
  display:grid; gap:.15rem .9rem; grid-template-columns:1fr;
  padding-block:.75rem;
}
@media (min-width:40em){ .recv__row{ grid-template-columns:7rem 1fr; gap:.9rem; } }
.recv__row + .recv__row{ border-top:1px solid var(--rule-inv); }
.recv__label{
  font-family:var(--ff-util); font-size:var(--fs-meta);
  letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 92,'wght' 800; color:var(--cream);
  padding-top:.28em;
}
.recv__text{
  font-family:var(--ff-read); font-style:italic;
  font-size:clamp(1.02rem,1.6vw,1.18rem); line-height:1.4; color:var(--cream);
}
/* the rebuttal is the point of the block — it gets the weight and drops
   the italic, because it is the site speaking rather than being quoted */
.recv__row--ours .recv__text{
  font-style:normal; font-size:clamp(1.12rem,2vw,1.42rem); line-height:1.32;
}


/* ─── 6. STICKY BAR ─────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
  transition:background var(--t-fast) linear;
}
/* reading-progress hairline, driven by --p (0→1) from JS */
.bar::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--red); transform:scaleX(var(--p,0)); transform-origin:0 50%;
  transition:transform .1s linear;
}
.bar__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  height:var(--bar-h); display:flex; align-items:center; gap:1.1rem;
}
.bar__mark{
  font-family:var(--ff-display); font-variation-settings:'wdth' 118,'wght' 900;
  font-size:1.02rem; letter-spacing:.03em; line-height:1; color:var(--ink);
}
.bar__mark:hover{ color:var(--red); }
.bar__gloss{
  font-size:var(--fs-meta); color:var(--grey-lo); letter-spacing:.1em;
  text-transform:uppercase; font-variation-settings:'wdth' 88,'wght' 500;
  padding-left:1.1rem; border-left:1px solid var(--rule);
}
.bar__gloss i{ font-style:italic; }
.bar__nav{ margin-left:auto; display:flex; gap:1.9rem; }
.bar__nav a{
  position:relative; font-size:var(--fs-meta); letter-spacing:.15em;
  text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 700;
  color:var(--grey); padding-block:.5rem;
}
.bar__nav a::after{
  content:''; position:absolute; left:0; bottom:.15rem; height:2px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-fast) var(--ease);
}
.bar__nav a:hover,.bar__nav a:focus-visible{ color:var(--ink); }
.bar__nav a:hover::after,.bar__nav a:focus-visible::after{ transform:scaleX(1); }

.bar__burger{ display:none; margin-left:auto; padding:.6rem; }
.bar__burger-box{ display:block; width:1.5rem; }
.bar__burger-box i{
  display:block; height:2px; background:var(--ink);
  transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) linear;
}
.bar__burger-box i+i{ margin-top:.36rem; }
.bar__burger[aria-expanded="true"] i:first-child{ transform:translateY(.19rem) rotate(45deg); }
.bar__burger[aria-expanded="true"] i:last-child{ transform:translateY(-.19rem) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--bar-h) 0 auto 0; z-index:99;
  background:var(--red); color:var(--cream);
  border-bottom:1px solid var(--rule-inv);
  padding:1.5rem var(--gut) 2.2rem;
}
.drawer[hidden]{ display:none; }
.drawer__nav{ display:grid; gap:.15rem; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:1rem; padding:.85rem 0;
  border-bottom:1px solid var(--rule-inv-s);
  font-family:var(--ff-display); font-variation-settings:'wdth' 80,'wght' 800;
  font-size:1.7rem; text-transform:uppercase; letter-spacing:.01em;
}
.drawer__nav em{
  font-style:normal; font-size:var(--fs-meta); color:var(--cream);
  font-variation-settings:'wdth' 90,'wght' 700; letter-spacing:.1em;
}
.drawer__foot{
  margin-top:1.4rem; font-size:var(--fs-meta); color:var(--cream);
  letter-spacing:.12em; text-transform:uppercase;
}
.drawer__foot i{ font-style:italic; }


/* ─── 7. HERO ───────────────────────────────────────────────────────── */

.hero{
  display:grid; grid-template-columns:1fr; align-items:stretch;
  min-height:calc(100svh - var(--bar-h));
}
/* grid items default to min-width:auto, which lets the oversized mark push
   its own track wider than the viewport. Pin it to 0 and the tracks hold. */
.hero > *{ min-width:0; }
/* The red panel is a title column, not half the page. Capped in rem as well
   as percent so it stays a consistent, restrained width instead of growing
   with the viewport — the feature piece takes the rest. */
@media (min-width:60em){ .hero{ grid-template-columns:clamp(16rem, 36%, 28rem) 1fr; } }

/* LEFT — the mark */
.hero__mark{
  position:relative; background:var(--red); color:var(--cream);
  padding:clamp(2.2rem,5vw,4rem) var(--gut) clamp(3.2rem,6vw,4rem);
  display:flex; flex-direction:column; justify-content:center;
  container-type:inline-size;          /* the mark sizes against this */
  animation:panelIn var(--t-slow) var(--ease) both;
}
@media (min-width:60em){
  /* Tighter inline padding than the page gutter: on a narrow title column the
     full gutter would eat most of the measure. The hero stays full-bleed
     rather than aligned to .wrap — a colour block that ignores the grid reads
     as intent, and a steady ratio keeps the mark's fit predictable. */
  .hero__mark{ padding-inline:clamp(1.5rem, 3vw, 3rem); }
}

.mark{ margin-bottom:1.4rem; }
.mark__word{
  display:flex; flex-wrap:nowrap;
  font-family:var(--ff-display); font-variation-settings:'wdth' 125,'wght' 900;
  font-size:var(--fs-mark); line-height:.82; letter-spacing:-.018em;
  color:var(--cream);
}
/* The mark rises letter by letter, then settles.
   Letters keep their intrinsic width deliberately: letting them flex-shrink
   silently overlaps the glyphs instead of surfacing a sizing error, and the
   container sizing above already leaves ~13% headroom. */
.mark__l{ display:block; flex:none; animation:letterUp .78s var(--ease) both; }
.mark__l:nth-child(1){ animation-delay:.10s }
.mark__l:nth-child(2){ animation-delay:.16s }
.mark__l:nth-child(3){ animation-delay:.22s }
.mark__l:nth-child(4){ animation-delay:.28s }
.mark__l:nth-child(5){ animation-delay:.34s }
/* the near-black note, at the largest scale on the site */
.mark__l:nth-child(6){ animation-delay:.40s; color:var(--ink); }

.mark__gloss{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem;
  padding-top:1.1rem; border-top:1px solid var(--rule-inv);
  font-family:var(--ff-read); font-size:.95rem;
  color:var(--cream); animation:up .7s var(--ease) .58s both;
}
.mark__phon{ font-family:var(--ff-read); }
.mark__pos{ font-style:italic; }
/* pretty, not balance — the column is narrow enough that the definition was
   dropping a single word onto its own last line */
.mark__def{ font-size:.9rem; text-wrap:pretty; }
.mark__blurb{ text-wrap:pretty; }

.mark__blurb{
  max-width:30rem; margin-top:1.5rem;
  font-family:var(--ff-read); font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.5;
  color:var(--cream); animation:up .7s var(--ease) .66s both;
}

.mark__by{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.9rem; animation:up .7s var(--ease) .74s both; }
.beat{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .85rem; border:1px solid var(--rule-inv);
  font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 700;
}
.beat::before{
  content:''; width:.5rem; height:.5rem; background:var(--cream);
  -webkit-mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
          mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
}
.beat b{ font-weight:inherit; }

.mark__sig{
  margin-top:1.6rem; font-size:var(--fs-meta); letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream);
  animation:up .7s var(--ease) .8s both;
}
.mark__sig a{ color:var(--cream); border-bottom:1px solid var(--cream); padding-bottom:1px; }
.mark__sig a:hover{ color:var(--ink); border-color:var(--ink); }

/* The hero panel takes its bite at a CORNER, from the .bite-br utility in §4,
   exactly like the article header and every other block.
   It used to be a full circle straddling the middle of the panel's edge, and
   sitting mid-edge rather than at a corner it read as a jigsaw tab — which was
   both louder than everything around it and unfortunate next to an entry
   called "puzzle". The corner cut says the same thing quietly, and it means
   there is now one bite geometry on the site rather than two.
   Its arrival is carried by the panelIn wipe, so nothing is lost on load. */

/* RIGHT — the lead entry */
.lead{ position:relative; display:flex; flex-direction:column; justify-content:center; background:var(--cream); }
/* capped against the viewport so the plate can't push the lead's call to
   action below the fold on a short screen */
/* Takes the slack the narrower title column freed up — the plate is the
   feature piece's presence on the page. Still capped against the viewport so
   it can't push the lead's call to action below the fold on a short screen. */
.lead__fig{
  position:relative; flex:1 1 auto;
  min-height:clamp(11rem,28vw,18rem); max-height:48svh;
}
/* Fades into the cream ground so the headline can cross the plate and stay
   readable. The ramp reaches ~97% cream before the headline starts — black
   type over the faded edge holds ~5:1, where red would have been ~2:1. */
.lead__fig::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(240,233,222,1) 0%, rgba(240,233,222,.97) 20%,
    rgba(240,233,222,.6) 40%, rgba(240,233,222,0) 70%);
}
.lead__body{
  position:relative; z-index:1; margin-top:clamp(-5.5rem,-8vw,-3.5rem);
  padding:0 var(--gut) clamp(2rem,4vw,3rem);
  display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;
}
@media (min-width:60em){
  .lead__body{ padding-right:max(var(--gut), calc((100vw - var(--wrap))/2 + var(--gut))); }
}

/* the headline crosses up over the plate */
.lead__hed{
  font-family:var(--ff-display); font-variation-settings:'wdth' 75,'wght' 800;
  /* its own scale rather than --fs-xl: at --fs-xl this broke to four lines
     and pushed the whole hero past the fold */
  font-size:clamp(1.85rem,4.8vw,4.1rem); line-height:.95; letter-spacing:-.012em;
  text-transform:uppercase; color:var(--ink);
  max-width:18ch; text-wrap:balance;
}
.lead__hed a{ background-image:linear-gradient(var(--red),var(--red));
  background-size:0 3px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t-mid) var(--ease); }
.lead__hed a:hover,.lead__hed a:focus-visible{ background-size:100% 3px; }
.lead__stand{
  font-family:var(--ff-read); font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.5; color:var(--grey); max-width:38ch;
}


/* ─── 8. PLATES ─────────────────────────────────────────────────────── */

.plate{ position:relative; overflow:hidden; background:var(--ink); }
.plate svg{ width:100%; height:100%; display:block; }

/* ── PHOTOGRAPHS ──────────────────────────────────────────────────────
   Drop any photograph into a .plate and it is graded into the site's own
   three colours — shadows to ink, midtones to red, highlights to cream.
   That is what stops a mix of your own pictures and stock reading as a
   scrapbook: everything arrives looking commissioned for this site.

   The tritone itself is an SVG filter injected once by plates.js. The
   grayscale here is the fallback, so with JavaScript off a photo still
   looks deliberate — black and white rather than an unrelated colour
   photo sitting next to a red block. */
.plate img{
  width:100%; height:100%; display:block; object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.07); transition:transform 1.1s var(--ease);
}
.plate.is-lit img{ transform:scale(1); }
.card__link:hover .plate.is-lit img,
.card__link:focus-visible .plate.is-lit img{ transform:scale(1.05); transition:transform .7s var(--ease); }

/* applied by plates.js once the filter exists */
.has-duo .plate img{ filter:url(#mordaz-duotone) contrast(1.04); }

/* a photograph carrying a caption credit */
.plate__credit{
  position:absolute; right:.6rem; bottom:.5rem; z-index:2;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(240,233,222,.7);
}
/* Without JavaScript the plate can't be generated, so the received view is
   set as plain text on the ink instead of leaving an empty panel.
   plates.js clears the node before drawing, so this only ever shows when the
   script hasn't run. */
.plate__fallback{
  display:flex; align-items:center; height:100%;
  padding:clamp(1rem,4%,2rem);
  font-family:var(--ff-read); font-style:italic; line-height:1.35;
  font-size:clamp(1rem,2.2vw,1.3rem); color:var(--cream);
}
/* a slow settle rather than a reveal — the plate is already in place, it
   just stops moving. Composes cleanly inside a card's wipe. */
.plate svg{ transform:scale(1.07); transition:transform 1.1s var(--ease); }
.plate.is-lit svg{ transform:scale(1); }
.plate--wide{ aspect-ratio:5/2; max-height:62vh; }


/* ─── 9. SECTION RULE ───────────────────────────────────────────────── */

.rule{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.rule__h{
  font-family:var(--ff-display); font-variation-settings:'wdth' 78,'wght' 800;
  font-size:var(--fs-l); text-transform:uppercase; letter-spacing:.01em; line-height:1;
}
.rule__line{ flex:1 1 auto; height:1px; background:var(--rule); }
.rule__meta{
  flex:none; font-size:var(--fs-meta); letter-spacing:.15em;
  text-transform:uppercase; color:var(--grey);
}
.about .rule__line,.resp .rule__line{ background:var(--rule-inv); }
.about .rule__meta,.resp .rule__meta{ color:var(--type-inv); }


/* ─── 10. CARDS ─────────────────────────────────────────────────────── */

/* The column count follows the number of cards, because for most of this
   site's life there will not be three of them. A fixed repeat(3,1fr) leaves
   a launch homepage — lead plus two — with a visibly empty third column.
   The max-width is inert at three cards and only bites at one or two, so a
   short run of pieces stays card-sized instead of stretching across the page. */
.cards{ display:grid; gap:clamp(2rem,4vw,2.6rem); grid-template-columns:1fr; }
@media (min-width:44em){ .cards{ grid-template-columns:repeat(min(var(--n,3),2),minmax(0,1fr)); } }
@media (min-width:68em){
  .cards{
    grid-template-columns:repeat(min(var(--n,3),3),minmax(0,1fr));
    max-width:calc(var(--n,3) * 28rem + (var(--n,3) - 1) * 2.6rem);
  }
}

.card__link{ display:flex; flex-direction:column; gap:.75rem; height:100%; }
.card__fig{ aspect-ratio:4/3; margin-bottom:.15rem; }
.card__link:hover .plate.is-lit svg,
.card__link:focus-visible .plate.is-lit svg{ transform:scale(1.05); transition:transform .7s var(--ease); }
.card__hed{
  font-family:var(--ff-display); font-variation-settings:'wdth' 78,'wght' 800;
  font-size:var(--fs-m); line-height:1.06; text-transform:uppercase; letter-spacing:.005em;
  transition:color var(--t-fast) linear;
}
.card__link:hover .card__hed,.card__link:focus-visible .card__hed{ color:var(--red); }
.card__stand{
  font-family:var(--ff-read); font-size:1rem; line-height:1.5;
  color:var(--grey); max-width:40ch;
}
.card__meta{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--rule);
}


/* ─── 11. THE ARCHIVE ───────────────────────────────────────────────── */

.arc__bar{
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem;
  align-items:center; justify-content:space-between; margin-bottom:1.6rem;
}
.filter{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  padding:.5rem 1rem; border:1px solid var(--rule);
  font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 700;
  transition:background var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.chip:hover{ border-color:var(--red-deep); color:var(--red-deep); }
.chip.is-on{ background:var(--red); color:var(--cream); border-color:var(--red); }

.arc{ border-top:1px solid var(--rule); }
.arc__row{ border-bottom:1px solid var(--rule-soft); }
.arc__row[hidden]{ display:none; }
.arc__row a{
  display:grid; gap:.2rem .9rem; padding:1.05rem .6rem;
  grid-template-columns:1fr; align-items:baseline;
  transition:background var(--t-fast) linear, padding-left var(--t-fast) var(--ease);
}
@media (min-width:52em){
  .arc__row a{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 6.5rem 3.5rem; }
}
.arc__row a:hover,.arc__row a:focus-visible{ background:rgba(196,32,42,.07); padding-left:1.1rem; }
/* the received line sets up; the rebuttal is the payoff, so it carries the
   weight — the reverse of a normal headline/standfirst pairing */
.arc__said{
  quotes:'\201C' '\201D';
  font-family:var(--ff-read); font-style:italic; font-size:1rem;
  line-height:1.4; color:var(--grey);
}
.arc__ours{
  position:relative;
  font-family:var(--ff-display); font-variation-settings:'wdth' 94,'wght' 800;
  font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.2; letter-spacing:-.005em;
  color:var(--ink); transition:color var(--t-fast) linear;
}
.arc__row a:hover .arc__ours{ color:var(--red-deep); }
/* stacked, the two lines need the relationship made explicit */
@media (max-width:51.99em){
  .arc__ours{ padding-left:1.3rem; margin-top:.15rem; }
  .arc__ours::before{
    content:'\2192'; position:absolute; left:0; top:0;
    color:var(--red); font-family:var(--ff-util); font-weight:700;
  }
}
.arc__beat,.arc__date{
  font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
@media (min-width:52em){ .arc__date{ text-align:right; } }
@media (max-width:51.99em){
  .arc__beat,.arc__date{ display:inline; }
  .arc__beat::after{ content:' · '; }
  .arc__date{ margin-left:-.6rem; }
}
.arc__empty{
  padding:2.5rem .6rem; color:var(--grey);
  font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase;
}


/* ─── 12. ABOUT — the near-black block ──────────────────────────────── */

.about{ background:var(--ink); color:var(--cream); }
.about__grid{ display:grid; gap:clamp(1.6rem,4vw,3.5rem); grid-template-columns:1fr; }
@media (min-width:60em){ .about__grid{ grid-template-columns:1fr 1.5fr; } }
.about__h{
  font-family:var(--ff-display); font-variation-settings:'wdth' 78,'wght' 800;
  font-size:var(--fs-l); text-transform:uppercase; line-height:1;
}
.about__h span{ display:block; font-variation-settings:'wdth' 125,'wght' 900; color:var(--red-lift); }
.about__r{ font-family:var(--ff-read); font-size:var(--fs-read); line-height:1.62; color:var(--cream-dim); }
.about__r p+p{ margin-top:1.1rem; }
.about__lede{ font-size:calc(var(--fs-read) * 1.14); color:var(--cream); }
.about__lede em{ color:var(--cream); font-style:italic; border-bottom:2px solid var(--red-lift); }
.about__by{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem;
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--rule-inv);
}
.about__by span{
  font-family:var(--ff-util); font-size:var(--fs-meta); letter-spacing:.16em;
  text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 800; color:var(--cream);
}


/* ─── 13. FOOTER ────────────────────────────────────────────────────── */

.foot{ background:var(--ink); color:var(--cream); border-top:1px solid var(--rule-inv-s); padding-block:clamp(2.5rem,5vw,4rem) 2rem; overflow:hidden; }
.foot__mark{
  font-family:var(--ff-display); font-variation-settings:'wdth' 125,'wght' 900;
  font-size:clamp(3rem,15vw,11rem); line-height:.8; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(240,233,222,.26);
  margin-bottom:2.2rem; user-select:none;
}
.foot__cols{ display:flex; flex-wrap:wrap; gap:2.5rem 4rem; }
.foot__cols h3{
  font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-lift); margin-bottom:.8rem; font-variation-settings:'wdth' 90,'wght' 800;
}
.foot__cols a{ display:block; padding:.28rem 0; color:var(--type-inv); font-size:.9rem; }
.foot__cols a:hover{ color:var(--cream); }
.foot__fine{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem;
  margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule-inv-s);
  font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--type-inv);
}
.foot__gloss i{ font-style:italic; }


/* ═══════════════════════════════════════════════════════════════════
   14. ARTICLE
   ═══════════════════════════════════════════════════════════════════ */

.ahead{ background:var(--red); color:var(--cream); padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,4.5rem); position:relative; }
.ahead__in{ max-width:52rem; }
.ahead__hed{
  font-family:var(--ff-display); font-variation-settings:'wdth' 72,'wght' 800;
  font-size:clamp(2.4rem,7vw,5.2rem); line-height:.92; letter-spacing:-.015em;
  text-transform:uppercase; margin:1.6rem 0 0;
  animation:up .75s var(--ease) .1s both;
}
.ahead__stand{
  font-family:var(--ff-read); font-size:clamp(1.12rem,2vw,1.42rem); line-height:1.48;
  color:var(--cream); max-width:44ch; margin-top:1.4rem;
  animation:up .75s var(--ease) .2s both;
}
.ahead__by{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--rule-inv);
  font-size:var(--fs-meta); letter-spacing:.15em; text-transform:uppercase; color:var(--cream);
  animation:up .75s var(--ease) .28s both;
}
.ahead__by b{ font-variation-settings:'wdth' 90,'wght' 800; }

.afig{ background:var(--cream); }
/* padding-block, not the padding shorthand — the shorthand would reset the
   padding-inline this element inherits from .wrap and slam it to the edge */
.afig__cap{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding-block:.8rem;
  font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
}
.afig__cap b{
  font-family:var(--ff-display); font-variation-settings:'wdth' 94,'wght' 800;
  color:var(--red); text-transform:none; letter-spacing:0; font-size:.95rem;
}

/* the reading surface */
.read{ background:var(--cream); color:var(--ink); }
.read__col{ max-width:var(--measure); margin-inline:auto; }
.read__col > *{ margin-bottom:1.35em; }
.read__col > *:last-child{ margin-bottom:0; }

.read p{ font-family:var(--ff-read); font-size:var(--fs-read); line-height:1.68; }
.read p a{ border-bottom:2px solid var(--red); padding-bottom:1px; }
.read p a:hover{ background:var(--red); color:var(--cream); }

/* drop cap — red, the largest structural note in the reading column */
.read__open::first-letter{
  float:left; font-family:var(--ff-display); font-variation-settings:'wdth' 108,'wght' 900;
  font-size:4.6em; line-height:.78; margin:.06em .11em 0 0; color:var(--red);
}

.read h2{
  font-family:var(--ff-display); font-variation-settings:'wdth' 80,'wght' 800;
  font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.1; text-transform:uppercase;
  margin-top:2.4em; letter-spacing:.005em;
}
.read h2::before{
  content:''; display:block; width:2.4rem; height:3px; background:var(--red); margin-bottom:.7rem;
}

/* pull quote — the near-black note inside the reading column.
   Its bite comes from the .bite-tr utility in §4, same as every other. */
.pull{
  position:relative; margin-block:2.2em; padding:1.6rem 1.8rem;
  background:var(--ink); color:var(--cream);
}
.pull q{
  quotes:none; font-family:var(--ff-display); font-variation-settings:'wdth' 88,'wght' 700;
  font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.18; text-transform:uppercase;
  display:block;
}
.pull cite{
  display:block; margin-top:.9rem; font-family:var(--ff-util); font-style:normal;
  font-size:var(--fs-meta); letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim);
}

.read ul.bul{ margin-block:1.4em; }
.read ul.bul li{
  position:relative; padding-left:1.6rem; margin-bottom:.6em;
  font-family:var(--ff-read); font-size:var(--fs-read); line-height:1.6;
}
.read ul.bul li::before{
  content:''; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem; background:var(--red);
  -webkit-mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
          mask-image:radial-gradient(circle at 100% 0, transparent 42%, #000 43%);
}

.fn{ font-size:.78em; vertical-align:super; line-height:0; color:var(--red);
  font-family:var(--ff-util); font-variation-settings:'wdth' 90,'wght' 800; padding-inline:.15em; }

.notes{ margin-top:3rem; padding-top:1.4rem; border-top:2px solid var(--ink); }
/* Scoped with .read so it out-specifies `.read h2` (0,2,0 beats 0,1,1).
   Notes are apparatus, not part of the argument — they get a small utility
   label, not a section heading, and no red rule above them. */
.read .notes__h{
  margin:0 0 .4rem; font-family:var(--ff-util); font-size:var(--fs-meta);
  letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800; color:var(--grey);
}
.read .notes__h::before{ display:none; }
.notes ol{ counter-reset:n; margin-top:1rem; }
.notes li{
  counter-increment:n; position:relative; padding-left:2rem; margin-bottom:.7rem;
  font-family:var(--ff-read); font-size:.94rem; line-height:1.55; color:var(--grey);
}
.notes li::before{
  content:counter(n); position:absolute; left:0; top:.05rem;
  font-family:var(--ff-util); font-variation-settings:'wdth' 90,'wght' 800;
  font-size:var(--fs-meta); color:var(--red);
}

.aend{ background:var(--cream); }
.aend__in{ max-width:var(--measure); margin-inline:auto; padding-bottom:clamp(2rem,4vw,3rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.aend__by{ font-size:var(--fs-meta); letter-spacing:.15em; text-transform:uppercase; color:var(--grey); }
.aend__by b{ color:var(--ink); font-variation-settings:'wdth' 90,'wght' 800; }


/* ═══════════════════════════════════════════════════════════════════
   15. RESPONSES — the reader's space, set apart in near-black
   ═══════════════════════════════════════════════════════════════════ */

.resp{ background:var(--ink); color:var(--cream); }
.resp__col{ max-width:44rem; margin-inline:auto; }

.resp__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem; margin-bottom:1.6rem; }
.resp__h{
  font-family:var(--ff-display); font-variation-settings:'wdth' 78,'wght' 800;
  font-size:var(--fs-l); text-transform:uppercase; line-height:1;
}
.resp__n{ font-size:var(--fs-meta); letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim); }
.resp__sort{ margin-left:auto; display:flex; gap:.4rem; }
.resp__sort button{
  padding:.4rem .8rem; font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase;
  color:var(--type-inv); border:1px solid transparent; font-variation-settings:'wdth' 90,'wght' 700;
}
.resp__sort button.is-on{ color:var(--cream); background:var(--red); }

/* composer */
.comp{ border:1px solid var(--rule-inv); padding:1.1rem; margin-bottom:2.2rem; background:var(--ink-2); }
.comp__row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.7rem; }
.comp input,.comp textarea{
  width:100%; background:var(--ink); color:var(--cream); font:inherit;
  border:1px solid var(--rule-inv); padding:.7rem .85rem;
  transition:border-color var(--t-fast) linear;
}
.comp input{ flex:1 1 12rem; width:auto; font-size:.92rem; }
.comp textarea{ resize:vertical; min-height:6.5rem; font-family:var(--ff-read); font-size:1.02rem; line-height:1.55; }
.comp input:focus,.comp textarea:focus{ border-color:var(--cream); outline:none; }
.comp input::placeholder,.comp textarea::placeholder{ color:var(--type-inv); }
.comp__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:.75rem; }
.comp__count{ font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--type-inv); }
/* a lighter red so "over the limit" still reads against the near-black */
.comp__count.is-over{ color:#F2887C; }
.comp__note{ font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--type-inv); flex:1 1 12rem; }

.btn{
  padding:.72rem 1.5rem; background:var(--red); color:var(--cream);
  font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800;
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) linear;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); background:var(--red-deep); }
/* the grey ground is what signals "disabled" — the label stays readable */
.btn:disabled{ background:#4A4446; color:var(--cream-dim); cursor:not-allowed; }
.btn--ghost{ background:none; color:var(--cream-dim); border:1px solid var(--rule-inv); }
.btn--ghost:hover{ background:none; color:var(--cream); border-color:var(--cream); }

/* thread */
.thread{ display:grid; gap:1.5rem; }
.cmt{ animation:cmtIn .45s var(--ease) both; }
.cmt__top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.cmt__who{
  font-size:var(--fs-meta); letter-spacing:.15em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800; color:var(--cream);
}
.cmt__mine{ padding:.1rem .4rem; background:var(--red); color:var(--cream); font-size:.6rem; letter-spacing:.12em; }
.cmt__when{ font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--type-inv); }
.cmt__body{ font-family:var(--ff-read); font-size:1.04rem; line-height:1.6; color:var(--cream-dim); }
.cmt__acts{ display:flex; align-items:center; gap:1.2rem; margin-top:.6rem; }
.cmt__act{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--fs-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--type-inv);
  transition:color var(--t-fast) linear;
}
.cmt__act:hover{ color:var(--cream); }
.cmt__act.is-on{ color:var(--red-lift); }
.cmt__act svg{ width:.85rem; height:.85rem; fill:currentColor; transition:transform var(--t-fast) var(--ease-bite); }
.cmt__act.is-on svg{ transform:scale(1.25); }
.cmt__kids{ margin-top:1.1rem; padding-left:1.2rem; border-left:2px solid var(--rule-inv-s); display:grid; gap:1.2rem; }
@media (min-width:40em){ .cmt__kids{ margin-left:.6rem; padding-left:1.6rem; } }
.cmt__reply{ margin-top:.9rem; }
.resp__empty{ padding:2rem 0; color:var(--type-inv); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; }


/* ═══════════════════════════════════════════════════════════════════
   16. MOTION — wipes, not fades
   ───────────────────────────────────────────────────────────────────
   The hero panel arrives by clip-path, so everything else follows the
   same gesture: content is wiped in from the left like ink being laid
   down. Nothing translates upward and fades, which is the one move the
   brief rules out and the one the first pass used everywhere.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes letterUp{ from{ transform:translateY(88%); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes up{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes panelIn{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes cmtIn{ from{ transform:translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

/* Scroll reveals — opt-in via `js`, so with JS off the page is fully
   visible rather than permanently blank.
   The resting state uses NEGATIVE insets: clip-path clips the focus ring
   too, and inset(0) would leave every link inside a revealed block with an
   invisible outline. */
.js [data-reveal]{ clip-path:inset(0 100% 0 0); }
.js [data-reveal].is-in{
  clip-path:inset(-12px);
  transition:clip-path .8s var(--ease);
  transition-delay:var(--d,0ms);
}


/* ─── REDUCED MOTION — everything arrives, nothing moves ────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-reveal].is-in{ clip-path:none; }
  .plate svg{ transform:scale(1); }
}


/* ─── SMALL SCREENS ─────────────────────────────────────────────────── */

@media (max-width:59.99em){
  .bar__gloss,.bar__nav{ display:none; }
  .bar__burger{ display:block; }
  .hero{ min-height:0; }
  /* Stacked, the panel's bitten corner sits directly above the lead plate.
     This gap keeps a little cream between the red block and the dark plate so
     the cut reads as a cut rather than a sliver caught between two blocks. */
  .lead{ padding-top:1.75rem; }
  .lead__body{ margin-top:-2.5rem; }
  .plate--wide{ aspect-ratio:2/1; }
}

@media (max-width:29.99em){
  :root{ --fs-meta:.68rem; }
  .lead__hed{ max-width:none; }
  .comp input{ flex:1 1 100%; }
}

/* very wide screens: keep the measure honest */
@media (min-width:100em){ :root{ --wrap:86rem; } }