/* Case study page. Skin-agnostic: reads only --cs-* roles defined by skin/<name>/skin.css. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cs-canvas); }
body { margin: 0; background: var(--cs-canvas); color: var(--cs-text); font-family: var(--cs-font-body); font-size: var(--cs-fs-md); line-height: var(--cs-lh); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--cs-focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--cs-s1); top: -100px; z-index: 10; background: var(--cs-accent); color: var(--cs-on-accent); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: var(--cs-s1); }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: clamp(16px, 6.7vw, 96px); }

/* small text: labels, captions, notes (sans on both skins) */
.eyebrow, .sec__phase, .meta dl, .numbers__label, .numbers span, .numbers__note, .decisions h4, .media figcaption, .shots figcaption, .alt, .foot { font-family: var(--cs-font-label); }

/* header + hero */
.ground { background: var(--cs-ground); color: var(--cs-on-ground); }
.site-head { display: flex; align-items: center; justify-content: space-between; padding-block: var(--cs-s3); }
.hero { padding-block: var(--cs-s5) var(--cs-s6); }
.eyebrow { margin: 0 0 var(--cs-s3); font-size: var(--cs-fs-sm); font-weight: 700; letter-spacing: .06em; color: var(--cs-accent); }
.hero h1 { margin: 0; max-width: 17ch; font-family: var(--cs-font-display); font-weight: var(--cs-display-weight); font-size: clamp(2.4rem, 6.2vw, 5.5rem); line-height: 1.04; letter-spacing: -.01em; }
.hero__sum { margin: var(--cs-s4) 0 0; max-width: 38em; font-size: var(--cs-fs-lg); line-height: 1.5; color: var(--cs-on-ground); }
.bleed { margin: 0; }
.bleed img { width: 100%; aspect-ratio: 1440 / 640; object-fit: cover; }
.bleed__cap { padding-block: var(--cs-s2) var(--cs-s3); font-size: var(--cs-fs-sm); }

/* metadata + numbers */
.meta { background: var(--cs-accent); color: var(--cs-on-accent); }
.meta dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cs-s3); margin: 0; padding-block: var(--cs-s4); }
.meta dt { font-size: var(--cs-fs-sm); font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.meta dd { margin: 0; font-size: var(--cs-fs-md); line-height: 1.4; }
.numbers { padding-block: var(--cs-s5) var(--cs-s4); }
.numbers__label { margin: 0 0 var(--cs-s2); font-size: var(--cs-fs-sm); font-weight: 700; letter-spacing: .04em; }
.numbers ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cs-s3); }
.numbers li { border-top: 2px solid var(--cs-rule); padding-top: var(--cs-s2); }
.numbers strong { display: block; font-family: var(--cs-font-display); font-weight: var(--cs-display-weight); font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 1; color: var(--cs-head); }
.numbers span { display: block; margin-top: var(--cs-s1); font-size: var(--cs-fs-md); max-width: 22em; }
.numbers__note { margin: var(--cs-s3) 0 0; font-size: var(--cs-fs-sm); max-width: 52em; }

/* sections */
.sec { border-top: 4px solid var(--cs-phase); padding-block: var(--cs-s5) var(--cs-s6); }
.sec--discover { --cs-phase: var(--cs-discover); }
.sec--define { --cs-phase: var(--cs-define); }
.sec--design { --cs-phase: var(--cs-design); }
.sec--reflect { --cs-phase: var(--cs-reflect); }
.sec__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--cs-s2); row-gap: var(--cs-s3); }
.sec__label { grid-column: 1 / span 4; }
.sec__phase { margin: 0 0 var(--cs-s1); font-size: var(--cs-fs-sm); font-weight: 700; letter-spacing: .04em; }
.sec h2 { margin: 0; font-family: var(--cs-font-display); font-weight: var(--cs-display-weight); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; color: var(--cs-head); }
.sec__body { grid-column: 5 / span 8; min-width: 0; }
.lead { margin: 0 0 var(--cs-s3); font-size: var(--cs-fs-xl); line-height: 1.35; font-weight: 600; color: var(--cs-head); max-width: 30em; }
/* one reading column, a comfortable measure (matches the sibling studies) */
.cols { max-width: 66ch; }
.cols p { margin: 0 0 var(--cs-s2); }
.cols p:last-child { margin-bottom: 0; }
.full { grid-column: 1 / -1; min-width: 0; }

/* decisions */
.decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cs-s4); }
.decisions li { border-top: 1px solid var(--cs-hair); padding-top: var(--cs-s2); }
.decisions h3 { margin: 0 0 var(--cs-s2); font-family: var(--cs-font-display); font-weight: var(--cs-display-weight); font-size: var(--cs-fs-xl); line-height: 1.2; color: var(--cs-head); }
.decisions__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-s3); }
.decisions h4 { margin: 0 0 6px; font-size: var(--cs-fs-sm); font-weight: 700; letter-spacing: .04em; color: var(--cs-head); }
.decisions p { margin: 0; }

/* media */
.media { margin: 0; }
.media video { width: 100%; aspect-ratio: 16 / 10; background: var(--cs-ground); border: 1px solid var(--cs-rule); border-radius: var(--cs-radius); }
.media figcaption, .shots figcaption { margin-top: var(--cs-s1); font-size: var(--cs-fs-sm); }
.alt { margin-top: var(--cs-s2); font-size: var(--cs-fs-sm); }
.alt summary { cursor: pointer; font-weight: 700; }
.alt ol { margin: var(--cs-s1) 0 0; padding-left: 1.2em; }
.flow { background: var(--cs-band); border-block: 1px solid var(--cs-hair); }
.flow img { width: 100%; height: auto; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-s3); margin: 0; padding: 0; list-style: none; }
.shots figure { margin: 0; }
.shots img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border: 1px solid var(--cs-rule); border-radius: var(--cs-radius); background: var(--cs-band); }
.shots strong { display: block; margin-top: var(--cs-s1); color: var(--cs-head); }
.shots p { margin: 4px 0 0; }
.context { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-s3); margin-top: var(--cs-s4); }
.context figure { margin: 0; }
.context img { width: 100%; height: auto; border-radius: var(--cs-radius); }

/* footer */
.foot { padding-block: var(--cs-s4); font-size: var(--cs-fs-sm); }
.foot p { margin: 0 0 8px; max-width: 60em; }

@media (max-width: 1100px) {
  .decisions__cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sec__label, .sec__body { grid-column: 1 / -1; }
  .meta dl, .numbers ul { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: 1fr; }
  .context { grid-template-columns: 1fr; }
  .bleed img { aspect-ratio: 1600 / 711; }
}
@media (max-width: 480px) {
  .meta dl, .numbers ul { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) { .sec { border-top-color: CanvasText; } }