/* Case-study detail pages — dark theme, matching the original black Framer source.
   Outside node 1:1988's stated scope (masthead through WORK); tokens for this
   surface live in tokens.css's supplementary section. All other values here
   still reference tokens.css — nothing hardcoded. */

body.dark{background:var(--dark-bg);color:var(--dark-ink)}
body.dark .brand-link{color:var(--dark-ink)}
body.dark nav.main a{color:var(--dark-dim)}
body.dark nav.main a:hover{color:var(--orange)}
body.dark .mobile-nav a{color:var(--dark-dim)}
body.dark .mobile-nav.is-open{background:var(--dark-bg)}
body.dark footer.site{border-top-color:var(--dark-rule)}
body.dark .fineprint{color:var(--dark-dim)}
body.dark .social-icon{color:var(--dark-dim)}
body.dark .social-icon:hover,body.dark .social-icon:focus-visible{color:var(--orange);background:transparent}
body.dark .fineprint a{color:var(--dark-ink);border-bottom:1px solid var(--orange)}

/* Case-study back link — a compact navigation label, not an editorial row,
   so its arrow stays inline (same exception as "ALL WRITING →"). */
.cs-back{font-family:var(--font-label);font-variation-settings:normal;font-weight:900;font-size:var(--type-label-size);letter-spacing:var(--type-label-tracking);text-transform:uppercase;margin-bottom:var(--space-32)}
.cs-back a{color:var(--dark-dim)}
.cs-back a:hover{color:var(--orange)}
/* .kicker retired — the case-study eyebrow it styled was replaced by
   .cs-back, and no element carries the class any more. */


/* Opening: the case study gets its own, shorter silence than the homepage —
   the kicker does the work the homepage gives to empty space. */
.cs-open{padding-top:64px;padding-bottom:24px}
.cs h1.display{color:var(--dark-ink);font-size:clamp(41.5px,6.6vw,87px);max-width:16em}
/* Inherits the shared .lede role entirely — size, leading, tracking, weight.
   Only what the dark ground genuinely requires is restated: colour, and a
   narrower measure because this lede sits above a full-bleed cover. */
.cs .lede{color:var(--dark-dim);max-width:640px;margin-top:24px}

/* A full-bleed figure escapes the text column and runs to the page gutters. */
/* Both margins cancel rail + padding, so a bleed reaches BOTH page edges.
   The right previously cancelled only --gutter-page and stopped short. */
.cs figure.full.bleed{margin-left:calc(-1 * var(--content-start));margin-right:calc(-1 * var(--content-start));border-radius:0}

.cs .next-wrap{margin:96px 0 120px}
.cs h2{font-family:var(--font-serif);font-variation-settings:var(--serif-row);font-weight:var(--serif-row-weight);font-size:clamp(28px,4vw,var(--type-case-title-size));letter-spacing:-.01em;color:var(--dark-ink);margin:64px 0 20px}
/* Running copy on the dark pages. Size is genuinely its own — a narrower
   measure on a dark ground reads denser — but the LEADING is the shared body
   ratio. The 1.81 that used to sit here was left over from a superseded
   calibration and set the case-study body looser than any other copy on the
   site for no stated reason. */
/* :not([class]) so this only claims UNCLASSED paragraphs. It used to claim every
   <p> inside .cs, which meant it also styled .lede and .cs-back — both of which
   are their own roles and were silently losing their size, face and weight to a
   body rule that simply sat later and more specific. */
.cs p:not([class]){max-width:680px;font-family:var(--font-grotesk);font-variation-settings:normal;font-size:15px;line-height:var(--type-body-leading-ratio);color:var(--dark-dim)}
.cs p:not([class])+p:not([class]){margin-top:16px}
.cs p:not([class]) b{color:var(--dark-ink)}
.cs ul{max-width:680px;margin:16px 0 0 22px;font-family:var(--font-grotesk);font-variation-settings:normal;font-size:15px;line-height:var(--type-body-leading-ratio);color:var(--dark-dim)}
.cs li{margin-bottom:var(--space-8)}
.cs li b{color:var(--dark-ink)}
.cs figure.full{background:var(--white);border-radius:4px;overflow:hidden;margin:40px 0 0}
.cs figure.full img{aspect-ratio:auto;height:auto;object-fit:contain;width:100%}
/* --dark-dim is tuned for the dark page ground (6.97:1) but these captions
   sit inside a white figure box, where it collapses to 2.68:1. --muted is the
   muted tone that still passes on white (5.05:1). */
.cs figcaption{font-family:var(--font-grotesk);font-variation-settings:normal;font-weight:500;font-size:var(--type-caption-size);letter-spacing:.4px;color:var(--muted);text-transform:uppercase;margin-top:12px}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--dark-rule);border:1px solid var(--dark-rule);margin:40px 0}
.stat div{background:var(--dark-bg);padding:24px}
.stat b{display:block;font-family:var(--font-serif);font-variation-settings:var(--serif-display);font-weight:var(--serif-display-weight);font-size:37.5px;color:var(--orange)}
.stat span{font-family:var(--font-grotesk);font-variation-settings:normal;font-weight:500;font-size:var(--type-caption-size);letter-spacing:.4px;color:var(--dark-dim);text-transform:uppercase}

.cs .next{font-family:var(--font-label);font-variation-settings:normal;font-weight:900;font-size:var(--type-label-size);letter-spacing:1.1px;text-transform:uppercase;color:var(--orange)}
.cs .next:hover{color:var(--dark-ink)}

.cs .pull{font-family:var(--font-serif);font-variation-settings:var(--serif-display);font-weight:var(--serif-display-weight);font-size:clamp(24px,3.4vw,36px);line-height:1.38;color:var(--dark-ink);max-width:920px;margin:64px 0}
.cs .pull .hot{color:var(--orange)}

.cs .imgrid{display:grid;gap:32px;margin:40px 0}
.cs .imgrid.cols-2{grid-template-columns:1fr 1fr}
.cs .imgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.cs .imgrid figure{margin:0}
.cs .imgrid img{width:100%;height:auto;display:block;background:var(--white);border-radius:4px}
.cs .imgrid h3{font-family:var(--font-serif);font-variation-settings:var(--serif-row);font-weight:var(--serif-row-weight);font-size:19px;color:var(--dark-ink);margin-top:var(--space-16)}
.cs .imgrid p{font-family:var(--font-grotesk);font-variation-settings:normal;font-size:var(--type-sub-size);line-height:var(--type-body-leading-ratio);margin-top:var(--space-8);color:var(--dark-dim);max-width:none}

.cs video{width:100%;display:block;background:#000;border-radius:4px;margin:40px 0}

@media(max-width:800px){
  .cs .imgrid.cols-2,.cs .imgrid.cols-3{grid-template-columns:1fr}
}