/* ============================================================
   case.css — the case-article + essay shell: article head with
   infobox stats, drop-cap lede, numbered sections, pillars, pull
   quotes, press notices, inline figures, and the next-case card.
   Shared chrome (masthead, crumb, reveal/word-rise, folio) lives
   in site.css. Loads after tokens.css + site.css. Paired with
   case.js. know-yourself-first.html (body.case.essay) reuses this
   shell as a single continuous read.
   Rebuilt 2026-08-05 for THE RECORD (broadsheet redesign) — the
   old plate/chapter-body/rail/flipbook system is retired; its
   code is recoverable from the pre-record-redesign tag.
   ============================================================ */

@layer page {
  /* ---- reading progress — a slim top bar, plus a chapter-position
     readout for the wayfinding the old fixed rail used to carry.
     Number-only (no invented per-section labels): "N / M" derived
     at runtime from however many .sec chapters the page actually
     has, so it costs no new copy and never disagrees with the
     content. Absent/inert on single-section pages (the essay). ---- */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
  .progress > i { display: block; height: 100%; background: var(--verm); transform: scaleX(0); transform-origin: left; }
  @supports (animation-timeline: scroll()) {
    .js .progress > i { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .chapter-pos { position: fixed; top: .55rem; right: var(--edge); z-index: 121; font-family: var(--fm); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--mut); background: var(--paper); padding: .15em .5em; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
  .chapter-pos.on { opacity: 1; }
  .chapter-pos .cn { color: var(--verm); }

  /* ---- article head ---- */
  .a-head { padding-block: clamp(3rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem); }
  .a-head .meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-family: var(--fm); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }
  .a-head .meta .no { color: var(--ink); font-weight: 500; }
  .a-head h1 { margin: 1.6rem 0 0; font-family: var(--fd); font-weight: 600; font-size: var(--t-display); line-height: .92; letter-spacing: -.04em; }
  .a-head .stand { margin: 2rem 0 0; font-family: var(--fs); font-style: italic; font-size: var(--t-mid); line-height: 1.35; max-width: 34ch; color: var(--ink-soft); }
  .a-head .stand em { color: var(--verm); }
  .infobox { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; border-top: 2px solid var(--ink); margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.4rem; max-width: 56rem; }
  .infobox .n { font-family: var(--fd); font-weight: 600; font-size: var(--t-sub); line-height: 1; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .infobox .n .u { font-size: .45em; vertical-align: .5em; color: var(--verm); }
  .infobox .k { margin-top: .5rem; font-family: var(--fm); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }
  @media (max-width: 620px) { .infobox { grid-template-columns: 1fr; gap: 1.4rem; } }

  /* ---- reading column + sections ---- */
  .read { max-width: var(--measure); margin-inline: auto; }
  .read p { margin: 0 0 1.4em; }
  .read p:last-child { margin-bottom: 0; }
  /* in-copy links: the tokens.css base strips all anchor styling, which
     leaves prose links invisible (hover-only affordance). Running text
     gets a visible verm hairline underline; chrome links stay bare. */
  .read a { text-decoration: underline; text-decoration-color: var(--verm); text-decoration-thickness: 1px; text-underline-offset: .16em; }
  .read a:hover, .read a:focus-visible { color: var(--verm); }
  /* essay pages (know-yourself-first.html): one continuous .sec holds several
     h2 subheadings as running prose, instead of one .sec-head per chapter */
  .read h2 { font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); letter-spacing: -.03em; line-height: 1.05; margin: 1.6em 0 .9em; padding-top: 1.6em; border-top: 1px solid var(--rule); }
  .read h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
  .read h3 { font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.02em; margin: 2em 0 .8em; }
  .read ul { margin: 0 0 1.4em; padding-left: 1.2em; }
  .read li { margin-bottom: .6em; }
  .read li::marker { color: var(--mut); }
  .sec { padding-block: var(--sp-section); border-top: 1px solid var(--rule); }
  .sec-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: clamp(2rem, 5vh, 3rem); max-width: var(--measure); margin-inline: auto; }
  .sec-head .no { font-family: var(--fm); font-size: 1rem; font-weight: 500; color: var(--mut); }
  .sec-head h2 { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); letter-spacing: -.03em; line-height: 1; }
  .lede { padding-block: var(--sp-section); }
  .lede .read p:first-of-type::first-letter { font-family: var(--fd); font-weight: 700; font-size: 3.6em; float: left; line-height: .78; padding: .06em .12em 0 0; color: var(--ink); }
  .lede .read p { font-size: var(--t-deck); }

  /* ---- figures ---- */
  .fig { margin: clamp(2.5rem, 6vh, 4rem) 0; }
  .fig img { display: block; width: 100%; height: auto; filter: saturate(.9) contrast(1.02); }
  .js .fig img { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.16,1,.3,1); }
  .js .fig.in img { clip-path: inset(0 0 0 0); }
  .fig figcaption { display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--ink); margin-top: .7rem; padding-top: .6rem; font-family: var(--fm); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }
  .fig.col { max-width: var(--measure); margin-inline: auto; }
  .fig.bleed { margin-inline: calc(50% - 50vw); }
  .fig.bleed img { max-height: 80vh; object-fit: cover; }
  .fig.bleed figcaption { margin-inline: var(--edge); }
  .figrow { display: grid; gap: 1.2rem; margin: clamp(2.5rem, 6vh, 4rem) 0; }
  .figrow .fig { margin: 0; }
  .figrow.r2 { grid-template-columns: repeat(2, 1fr); }
  .figrow.r3 { grid-template-columns: repeat(3, 1fr); }
  .figrow.r4 { grid-template-columns: repeat(4, 1fr); }
  .figrow.col { max-width: var(--measure); margin-inline: auto; }

  /* ---- plate viewer — click-to-inspect for figures. Each .figlink is a
     plain anchor to the full-size JPEG (the no-JS floor); case.js lifts
     the image off the page instead (FLIP) and settles it on an opaque
     paper plate-page: masthead rule, mono folio ("Fig. N / M"), the
     figure's own caption. No scrim — a page of the same paper, not a
     modal. Hover/focus draws verm crop marks: the print affordance for
     "marked for reproduction". ---- */
  .figlink { display: block; position: relative; cursor: zoom-in; }
  .figlink::before, .figlink::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .figlink::before { top: -6px; left: -6px; border-top: 2px solid var(--verm); border-left: 2px solid var(--verm); transform: translate(5px, 5px); }
  .figlink::after { bottom: -6px; right: -6px; border-bottom: 2px solid var(--verm); border-right: 2px solid var(--verm); transform: translate(-5px, -5px); }
  .figlink:hover::before, .figlink:hover::after,
  .figlink:focus-visible::before, .figlink:focus-visible::after { opacity: 1; transform: translate(0, 0); }

  .plate { position: fixed; inset: 0; z-index: 200; background: var(--paper); opacity: 0; transition: opacity .35s ease; }
  .plate.in { opacity: 1; }
  html.plate-open { overflow: hidden; }
  .plate-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: .75rem var(--edge); border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--fm); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }
  .plate-bar .pfolio { color: var(--verm); white-space: nowrap; }
  .plate-bar .pcap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plate-bar .pnav { display: flex; gap: .45rem; }
  .plate-bar button { font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: var(--r-0); padding: .25em .65em; cursor: pointer; }
  .plate-bar button:hover, .plate-bar button:focus-visible { color: var(--verm); border-color: var(--verm); }
  .plate-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 4.2rem var(--edge) 2.2rem; }
  .plate-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid var(--rule-soft); filter: saturate(.9) contrast(1.02); transition: transform .55s cubic-bezier(.16,1,.3,1), clip-path .55s cubic-bezier(.16,1,.3,1); }
  @media (max-width: 900px) { .figrow.r4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .figrow.r2, .figrow.r3 { grid-template-columns: 1fr; } }

  /* ---- pillars — numbered principle/finding cards ---- */
  .pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem clamp(1.6rem, 3vw, 3rem); margin: clamp(2.2rem, 5vh, 3.4rem) 0; border-top: 1px solid var(--rule); padding-top: 1.8rem; }
  .pillars.p4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pillars .no { font-family: var(--fm); font-size: .8rem; font-weight: 500; letter-spacing: .16em; color: var(--mut); }
  .pillars h3 { margin: .6rem 0 .5rem; font-family: var(--fd); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
  .pillars p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); }
  @media (max-width: 1080px) { .pillars, .pillars.p4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 620px) { .pillars, .pillars.p4 { grid-template-columns: 1fr; gap: 1.6rem; } }

  /* ---- pull quote ---- */
  .pull { margin: clamp(2.5rem, 6vh, 4rem) auto; max-width: 30ch; text-align: center; border-block: 2px solid var(--ink); padding-block: 2rem; }
  .pull p { margin: 0; font-family: var(--fs); font-style: italic; font-size: var(--t-mid); line-height: 1.3; }
  .pull cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--fm); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }

  /* ---- notices — press quotes ---- */
  .notices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; margin: clamp(2.2rem, 5vh, 3.4rem) 0; }
  .notices .n1 { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
  .notices p { margin: 0; font-family: var(--fs); font-style: italic; font-size: 1.2rem; line-height: 1.45; }
  .notices .h { margin-top: .8rem; font-family: var(--fm); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--mut); }
  @media (max-width: 900px) { .notices { grid-template-columns: 1fr; } }

  /* ---- next case ---- */
  .nextcase { border-top: 2px solid var(--ink); padding-block: clamp(3rem, 8vh, 5rem) 2rem; }
  .nextcase .k { font-family: var(--fm); font-size: .9rem; text-transform: uppercase; letter-spacing: .18em; color: var(--mut); }
  .nextcase .big { display: inline-block; margin-top: 1.4rem; font-family: var(--fd); font-weight: 600; font-size: var(--t-num); letter-spacing: -.04em; line-height: 1; }
  .nextcase .big:hover, .nextcase .big:focus-visible { color: var(--verm); }
  .nextcase .bridge { margin-top: 1.8rem; max-width: 52ch; font-size: var(--t-body); color: var(--ink-soft); }

  @media (prefers-reduced-motion: reduce) {
    .js .fig img { clip-path: none !important; transition: none !important; }
    /* plate viewer: no rule needed — the tokens.css base-layer kill switch
       already zeroes its fade, flight, and mark choreography (instant on/off) */
  }
}