@import url("assets/tokens.css");
/* Approved case-study look (Figma node 7:2): sky hero, full-bleed image, yellow metadata band, numbers strip on light ground, 4px phase rules. Same structure as case-study-template and beth-tasks. */
:root{--gutter:96px;--gap:24px;--surface:var(--color-ink-50);--hair:var(--color-ink-300);--p-discover:var(--color-sky-500);--p-define:var(--color-yellow-500);--p-design:var(--color-orange-500);--p-reflect:var(--color-navy-800)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text-default);font-family:var(--font-sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
figure{margin:0}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--link-default);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--color-navy-800);color:var(--color-ink-50);padding:var(--spacing-12) var(--spacing-16);z-index:5}
.skip:focus{top:var(--spacing-12)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--font-sans);font-size:.9375rem;font-weight:600;margin:0}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
/* hero */
.hero{background:var(--color-sky-500)}
.hero .wrap{padding-top:56px;padding-bottom:var(--spacing-96)}
.bar{display:flex;justify-content:space-between;align-items:baseline;font-size:.9375rem;font-weight:500;margin-bottom:var(--spacing-128)}
.bar a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-ink-950)}
h1{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.875rem,6.6vw,6rem);line-height:1.04;letter-spacing:-.01em;margin:20px 0 40px;max-width:15ch}
.lede{font-family:var(--font-serif);font-size:clamp(1.3125rem,1.9vw,1.625rem);line-height:1.4;max-width:34ch;margin:0}
/* full-bleed figure */
.bleed img{width:100%}
figcaption{font-size:.875rem;line-height:1.45;color:var(--text-muted);margin-top:var(--spacing-12);max-width:70ch}
.bleed figcaption{padding:14px var(--gutter) 18px;margin:0;max-width:none}
/* metadata */
.meta{background:var(--color-yellow-500)}
.meta dl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:0;padding:var(--spacing-32) 0}
.meta dl>div{border-left:1px solid var(--color-ink-950);padding-left:20px}
.meta dl>div:first-child{border-left:0;padding-left:0}
.meta dt{font-size:.875rem;font-weight:600}
.meta dd{margin:6px 0 0;font-family:var(--font-serif);font-size:1.25rem;line-height:1.35}
/* numbers */
.nums{padding:72px 0 40px}
.nums .label{margin-bottom:28px}
.nums ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.nums li{border-top:1px solid var(--color-ink-950);padding-top:20px;min-width:0}
.nums .n{display:block;font-family:var(--font-serif);font-weight:500;font-size:clamp(3rem,5.4vw,5rem);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.nums .n small{font-size:.38em;letter-spacing:0}
.nums .c{display:block;font-size:.9375rem;line-height:1.4;color:var(--text-muted);margin-top:14px;max-width:24ch}
.nums .miss{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.1em}
.nums .src{font-size:.8125rem;color:var(--color-ink-700);margin:var(--spacing-24) 0 0}
/* sections */
.sec{padding-bottom:var(--spacing-96)}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);border-top:4px solid var(--phase,var(--color-ink-950));padding-top:var(--spacing-32)}
.p-discover{--phase:var(--p-discover)}.p-define{--phase:var(--p-define)}.p-design{--phase:var(--p-design)}.p-reflect{--phase:var(--p-reflect)}
.head{grid-column:1/5}
.head h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(2.25rem,4.2vw,3.75rem);line-height:1.05;letter-spacing:-.01em;margin:10px 0 0;padding-right:var(--spacing-16)}
.body{grid-column:5/13}
.body p{margin:0 0 var(--spacing-16);max-width:64ch}
.body ul{margin:0 0 var(--spacing-16);padding-left:1.2em;max-width:64ch}
.body li{margin-bottom:var(--spacing-8)}
.body.two{columns:2;column-gap:var(--gap)}
.body.two p{break-inside:avoid}
blockquote{margin:var(--spacing-24) 0;padding:0}
blockquote p{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.2;margin:0 0 var(--spacing-12);max-width:none}
blockquote footer{font-size:.875rem;color:var(--text-muted)}
/* decisions */
.dec{border-top:1px solid var(--hair);padding:20px 0 var(--spacing-8);display:grid;grid-template-columns:5fr 7fr;column-gap:var(--gap)}
.dec:first-child{border-top:0;padding-top:0}
.dec h3{font-family:var(--font-serif);font-weight:500;font-size:1.625rem;line-height:1.15;margin:0}
.dec p{margin:0 0 var(--spacing-12)}
.dec .cost{font-size:.9375rem;color:var(--text-muted)}
.dec .cost b{font-weight:600;color:var(--text-default)}
/* figures inside sections */
.wide{grid-column:1/13;margin-top:var(--spacing-48)}
.wide img{width:100%}
.video{grid-column:1/13;margin-top:var(--spacing-48)}
.video video{width:100%;background:var(--color-navy-900)}
.video details{font-size:.9375rem;margin-top:var(--spacing-12);max-width:70ch}
.video summary{cursor:pointer;font-weight:600}
.shots{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-48) var(--gap);margin-top:var(--spacing-48)}
.shots picture{display:block}
.shots img{width:100%}
.shots h3{font-family:var(--font-serif);font-weight:500;font-size:1.625rem;margin:var(--spacing-16) 0 var(--spacing-8)}
.shots p{font-size:1rem;line-height:1.55;margin:0;max-width:52ch}
.try{display:inline-block;margin-top:var(--spacing-8);font-weight:600;background:var(--color-ink-950);color:var(--color-ink-50);padding:var(--spacing-12) var(--spacing-24);text-decoration:none}
.try:hover{background:var(--color-navy-700)}
footer.end{border-top:1px solid var(--color-ink-950)}
footer.end .wrap{padding-top:40px;padding-bottom:80px;font-size:.9375rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-16)}
.scroll:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media (max-width:1100px){
 :root{--gutter:48px}
 .head{grid-column:1/13}.body{grid-column:1/13;margin-top:20px}
 .meta dl,.nums ul{grid-template-columns:1fr 1fr;row-gap:28px}
 .meta dl>div:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:900px){
 .body.two{columns:1}
 .dec{grid-template-columns:1fr}.dec h3{margin-bottom:var(--spacing-12)}
 .shots{grid-template-columns:1fr}
 .scroll{overflow-x:auto}
 .scroll img{width:960px;max-width:none}
}
@media (max-width:640px){
 :root{--gutter:20px}
 .bar{margin-bottom:72px}
 .hero .wrap{padding-top:28px;padding-bottom:56px}
 h1{margin-bottom:24px}
 .nums{padding:48px 0 24px}
 .nums .n{font-size:2.625rem}
 .meta dl{grid-template-columns:1fr}.meta dl>div{border-left:0;padding-left:0}
 .row{padding-top:20px}.sec{padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}