/* Project pages — layout hierarchy (fresh). Loaded after case.css.
   Interactive blocks and animations are untouched: only structure, scale, spacing and weight change.

   Reading order:  1 title + facts  ->  2 result + problem + solution  ->  3 hero visual
                   ->  4 role / decision / scope  ->  5 decisions  ->  6 chapters (eyebrow, H2, lead, content)  */

body.case{
  --t-title:clamp(2.4rem,5vw,4.5rem);
  --t-h2:clamp(1.75rem,2.9vw,2.6rem);
  --t-lead:clamp(1.1rem,1.45vw,1.3rem);
  --t-label:.72rem;
  --measure:40rem;
  --gap-s:clamp(32px,4vw,56px);
  --gap-m:clamp(56px,7vw,96px);
  --gap-l:clamp(72px,10vw,136px);
  --wrap:1320px;
}

/* ---------- 1. masthead: title and facts ---------- */
.case-arrival{max-width:var(--wrap);margin-inline:auto;padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) var(--pad) 0}
.case-masthead{gap:clamp(18px,2.4vw,28px)}
.back-link{font-size:var(--t-label)}
.case-masthead-row{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:end}
.case-masthead .eyebrow{margin-bottom:1rem}
.case-masthead h1{font-size:var(--t-title);line-height:1.03;letter-spacing:-.03em;font-weight:700;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual;max-width:13em}
.case-deck{font-size:var(--t-lead);line-height:1.5;color:var(--ink2);max-width:28em;padding-bottom:.35rem}
.case-credits{gap:6px clamp(16px,3.5vw,48px);border-top:1px solid var(--fg);padding-top:14px;font-size:var(--t-label)}
.case-shortcuts{gap:6px 24px}
.case-shortcuts a{border:0;border-radius:0;padding:2px 0;border-bottom:1px solid var(--fg);font-size:.95rem;font-weight:600}
.case-shortcuts a:hover{background:none;color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- 2. result, problem, solution ---------- */
.case-lead{margin-top:var(--gap-s);display:flex;flex-direction:column;gap:var(--gap-s)}
.case-brief{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);border-top:1px solid var(--fg);padding-top:clamp(20px,2.4vw,32px)}
.case-brief h2{font-size:var(--t-label);color:var(--muted);margin-bottom:14px}
.case-brief p{font-size:1.02rem;line-height:1.6;color:var(--ink2);max-width:26em}
.brief-impact strong{font-size:clamp(3.6rem,7vw,6rem);margin-bottom:14px}
.brief-impact p{color:var(--fg);font-weight:500}

/* ---------- 3. hero visual ---------- */
.case-lead-visual{width:100%}
.case-lead .case-lead-visual{max-width:1040px}
.case-lead-caption{margin-top:12px}

/* ---------- 4. role, decision, scope: quiet supporting facts ---------- */
.case-at-a-glance{max-width:var(--wrap);margin-inline:auto;padding:var(--gap-s) var(--pad) var(--gap-m)}
.case-at-a-glance dl{gap:clamp(20px,4vw,64px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,32px)}
.case-at-a-glance dt{color:var(--muted);font-size:var(--t-label);margin-bottom:10px}
.case-at-a-glance dd{font-size:.98rem;line-height:1.6;color:var(--ink2);max-width:28em}
.case-at-a-glance div:nth-child(2) dd{color:var(--fg);font-weight:500}

/* ---------- 5. decisions: a calm section{background:none;border:0;border-top:1px solid var(--fg);color:var(--fg);max-width:var(--wrap);margin-inline:auto;padding:var(--gap-s) var(--pad) var(--gap-s);gap:var(--gap-s)}

/* ---------- 6. story: sidebar + reading column ---------- */
.case-body{max-width:var(--wrap);margin-inline:auto;grid-template-columns:200px minmax(0,1fr);gap:clamp(28px,5vw,88px)}
.case-sidebar{padding-top:var(--gap-m)}
.case-main .ch{padding:var(--gap-m) 0 0;gap:var(--gap-s)}
.case-main .ch:first-child{padding-top:var(--gap-m)}
/* each chapter: rule, then eyebrow, heading, lead, content, in one column */
.case-main .ch{border-top:1px solid var(--line);margin-top:var(--gap-s)}
.case-main .ch:first-child{border-top:0;margin-top:0}
.ch__open{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);max-width:var(--measure)}
.ch__eyebrow{margin-bottom:10px}
.case-main .ch h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.025em;max-width:15em}
.case-main .lead{font-size:var(--t-lead);line-height:1.55;font-weight:400;color:var(--ink2);max-width:var(--measure);padding-top:0}
.ch__note{max-width:var(--measure)}
.ch__note p{font-size:clamp(1.15rem,1.7vw,1.4rem)}

/* reading widths: prose stays narrow, visuals use the full column */
.prose,.ticks,.pull{max-width:var(--measure)}
.chart,.art,.cmp,.demo,.shots,.shot,.points,.phases,.stats-row,.sc{max-width:none}
.chart{padding:clamp(18px,2.4vw,30px);gap:18px}
.chart__head h3{font-size:1.1rem}
.points{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pt{padding:clamp(18px,2vw,26px)}
.pt h3{font-size:1.1rem}
.stats-row{padding-top:clamp(18px,2vw,26px)}
.fig__v{font-size:clamp(2.2rem,4vw,3.6rem)}

/* ---------- process and next ---------- */
.case-main .tl{margin-top:0}
.tl__i h3{font-size:1.1rem}
.next{min-height:clamp(260px,40vh,420px);margin-top:var(--gap-m)}
.next strong{font-size:clamp(2.2rem,6vw,5.4rem)}

/* ---------- small screens ---------- */
@media (max-width:1000px){
  .case-masthead-row{grid-template-columns:1fr}
  .case-brief{grid-template-columns:1fr 1fr}
  .brief-impact{grid-column:1/-1}
  .case-body{grid-template-columns:minmax(0,1fr)}
  .case-sidebar{padding-top:0}
  .case-at-a-glance dl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .case-brief{grid-template-columns:1fr}
  .case-masthead h1{font-size:clamp(2.1rem,10vw,3rem)}
}

/* when the lead visual already shows the headline result (no screenshots yet), don't repeat it */
.case-lead:has(.hero-fig) .brief-impact{display:none}
.case-lead:has(.hero-fig) .case-brief{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-lead:has(.hero-fig) .case-brief{order:2}
/* align every block to one left edge (the base stylesheet pads all <section>s) */
.case-masthead,.case-lead{padding:0}