/* Page-specific styles for the public case-study overview pages. Tokens, reset,
   base type, the header/footer chrome, AND the shared .case / .exhibit grammar all
   come from site.css. The overview is the homepage continued: every section wraps
   its content in <div class="container"> exactly like index.html, so each block's
   LEFT edge lands on the same x as the wordmark on every viewport (no width jump),
   and each story beat is a homepage .case row with its own inline-SVG plate. */

main.ov{display:block}            /* no width/padding here; .container does alignment */

/* ---------- HERO: three tiers, one focal point ---------- */
.ov-hero{padding:clamp(64px,10vw,116px) 0 clamp(36px,5vw,52px)}
.ov-hero .label{color:var(--accent-deep);display:block;margin-bottom:14px}
.ov-hero .eyrole{font-size:.85rem;color:var(--ink-3);margin:0 0 22px}
.ov-hero .eyrole b{color:var(--ink);font-weight:600}
.ov-thesis{
  font-family:var(--serif);font-weight:450;
  font-size:clamp(1.9rem,4.2vw,3.05rem);line-height:1.22;letter-spacing:-.012em;
  color:var(--ink);max-width:20em;margin-bottom:24px;text-wrap:balance;
}
.ov-hero .sub{max-width:39em;font-size:1.06rem;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.ov-hero .sub strong{color:var(--ink);font-weight:600}
/* the one Staff+ level signal, impossible to miss, right under the title */
.ov-hero .signal{max-width:30em;font-family:var(--serif);font-weight:475;font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.34;letter-spacing:-.006em;color:var(--ink);margin:0 0 18px}
/* the quiet transferable "why it matters" line */
.ov-why{font-size:.92rem;line-height:1.55;color:var(--ink-3);margin:0}
.ov-why b{color:var(--ink-2);font-weight:600}
.ov-topcta{margin:0}
.ov-topcta a{font-size:.92rem;font-weight:500}
.ov-topcta .arr{display:inline-block;transition:transform .2s ease}
.ov-topcta a:hover .arr{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.ov-topcta .arr{transition:none}.ov-topcta a:hover .arr{transform:none}}

/* ---------- AT A GLANCE: one full-width fact band, no backgrounds ---------- */
.glance{margin-top:clamp(8px,2vw,16px)}
.glance .sec-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:16px}
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:18px 18px 20px;border-left:1px solid var(--line-soft)}
.fact:first-child{border-left:none;padding-left:0}
.fact .k{display:block;font-size:.64rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:9px}
.fact .v{font-family:var(--serif);font-size:1.04rem;color:var(--ink);line-height:1.34}
.fact.win .v{font-weight:600}
.fact.win .k{color:var(--accent)}
@media(max-width:900px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3n+1){border-left:none;padding-left:0}
  .fact:nth-child(n+4){border-top:1px solid var(--line-soft)}
}
@media(max-width:560px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact{border-left:1px solid var(--line-soft);padding-left:18px}
  .fact:nth-child(2n+1){border-left:none;padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ---------- THE STORY: beats as homepage .case rows ---------- */
/* .case / .case-text .label / .flip / .exhibit / 860px collapse are INHERITED from
   site.css. Here we only set the beat-prose measure + emphasis and the section seam.
   Seniority beats (What I did, The outcome) use plain .case so their prose stays on
   the LEFT rail aligned to the wordmark; only beats 1 and 3 carry .flip. */
.story{padding-top:clamp(36px,5vw,52px)}
.story > .container > .sec-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:2px}
.story .case:first-of-type{border-top:1px solid var(--line)}
.story .case-text p.body{font-size:1.05rem;line-height:1.7;max-width:38em;margin:0}
.story .case-text p.body b{color:var(--ink);font-weight:600}
.story .case-text .demo-link{display:inline-block;margin-top:14px;font-size:.9rem}

/* single-column beat: a short frame, then the real artifact below at generous width,
   same shape every beat so the eye runs straight down (used by the rebuilt cases) */
.sbeat{border-top:1px solid var(--line);padding-top:clamp(32px,4vw,46px);margin-top:clamp(40px,5vw,60px)}
.sbeat:first-of-type{margin-top:clamp(10px,2vw,18px)}
.sbeat .label{color:var(--accent-deep);display:block;margin-bottom:13px}
.sbeat p{max-width:42em;font-size:1.07rem;line-height:1.7;color:var(--ink-2);margin:0}
.sbeat p b{color:var(--ink);font-weight:600}
.sbeat figure{margin:clamp(22px,3vw,30px) 0 0;max-width:840px}
.sbeat figure.wide{max-width:960px}
.sbeat figure.sm{max-width:430px}
.sbeat figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 6px rgba(31,30,27,.04),0 18px 40px rgba(31,30,27,.09)}
.sbeat figcaption{font-size:.8rem;color:var(--ink-3);margin-top:10px;max-width:42em}
/* a paragraph that resumes after a figure or another paragraph (e.g. a merged takeaway) needs breathing room */
.sbeat figure + p{margin-top:clamp(22px,3vw,30px)}
.sbeat p + p{margin-top:clamp(22px,3vw,30px)}
/* a line-diagram (inline SVG) sits flat, no frame, like the homepage exhibits */
.sbeat figure.diagram{max-width:560px;border:none;box-shadow:none}
.sbeat figure.diagram svg{display:block;width:100%;height:auto;border:none;box-shadow:none}
/* a flat diagram pulled from a deck slide (PNG on the paper background): no frame,
   no shadow, so it reads as a graphic rather than a screenshot */
.sbeat figure.flat{max-width:900px}
.sbeat figure.flat img{border:none;border-radius:0;box-shadow:none}

/* split beat: a short frame on the left, paired small artifacts on the right
   (e.g. the data and the tracker), for when two images belong side by side */
.sbeat.split{display:grid;grid-template-columns:4fr 6fr;gap:clamp(26px,4vw,52px);align-items:start}
.sbeat.split .t{min-width:0}
.sbeat.split .t p{max-width:30em}
.sbeat.split .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0;margin-top:6px}
.sbeat.split .pair figure{margin:0;max-width:none}
.sbeat.split .pair figcaption{font-size:.74rem;margin-top:10px}
@media(max-width:680px){.sbeat.split{grid-template-columns:1fr;gap:18px}.sbeat.split .pair{gap:12px}}

/* Beat 5 "What lasted": a quiet text-only coda, not a .case, so five illustrated
   rows never read as a five-card catalog. */
.coda{border-top:1px solid var(--line-soft);padding:clamp(36px,4vw,48px) 0 0}
.coda .label{color:var(--accent-deep);display:block;margin-bottom:14px}
.coda p{font-size:1.05rem;line-height:1.7;max-width:46em;color:var(--ink-2);margin:0}
.coda p b{color:var(--ink);font-weight:600}

/* ---------- bottom CTA + case-to-case navigation ---------- */
.cta{margin-top:clamp(44px,6vw,68px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line)}
.cta p{font-size:1rem;color:var(--ink-2);margin-bottom:18px;max-width:42em}
.cta a.btn{display:inline-block;font-size:.92rem;font-weight:600;color:var(--accent-deep);text-decoration:none;border:1px solid var(--accent-deep);border-radius:999px;padding:9px 22px;transition:background .15s ease,color .15s ease}
.cta a.btn:hover{background:var(--accent-deep);color:#fff;text-decoration:none}

.case-nav{display:flex;justify-content:space-between;gap:24px;margin:clamp(48px,6vw,72px) 0 clamp(8px,2vw,20px)}
.case-nav a{position:relative;text-decoration:none;color:var(--ink-2);max-width:47%}
.case-nav a:hover .ttl{color:var(--accent-deep)}
.case-nav .dir{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.case-nav .ttl{font-family:var(--serif);font-size:1.02rem;color:var(--ink);line-height:1.3}
.case-nav .prev{padding-left:40px}
.case-nav .prev::before{content:"\2190";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:1.9rem;color:var(--ink-3);line-height:1}
.case-nav .next{margin-left:auto;text-align:right;padding-right:40px}
.case-nav .next::after{content:"\2192";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.9rem;color:var(--ink-3);line-height:1}
.case-nav .prev:hover::before,.case-nav .next:hover::after{color:var(--accent-deep)}
/* mobile: side-by-side titles collide in the middle, so stack them full-width */
@media(max-width:600px){
  .case-nav{flex-direction:column;gap:22px}
  .case-nav a{max-width:none}
  .case-nav .next{margin-left:0}
}