/* Classic view, case study pages: editorial chapters.
   Hero in the project's colour → a cover that grows to full screen as you scroll (the one pinned moment) →
   chapters that alternate cream and a deep shade of the project colour, each with a big outlined number →
   explanations beside their screens, screens opening up as they scroll in → a full-screen "next case study".
   Loaded after classic-case.css (component styles) and classic.css (page colours, header, cursor).
   classic-cs.js drives the scroll-linked parts through --p (cover), --r (screens) and --n (next cover). */

/* ---------- Hero ---------- */
.cs-hero { padding-block: clamp(118px, 17vh, 168px) clamp(28px, 5vh, 56px); }
.cs-hero-in { display: grid; gap: 22px; justify-items: start; }
.cs-title { max-width: 100%; margin: 6px 0 2px; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 8vw, 8rem); line-height: 0.9; letter-spacing: -0.05em; }
.cs-title.long { font-size: clamp(2.5rem, 6.2vw, 6.2rem); }
.cs-title .wd { display: inline-block; white-space: nowrap; }
.cs-title > span { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.cs-title .ch { display: inline-block; }
.cs-head { max-width: 24ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.45rem, 2.8vw, 2.4rem); line-height: 1.14; letter-spacing: -0.02em; }
.cs-hero .sub { max-width: 62ch; color: var(--soft); font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.cs-hero .meta { width: 100%; margin-top: 10px; }
.js .cs-title .ch { translate: 0 108%; transition: translate 1s var(--ease); transition-delay: calc(var(--i) * 38ms); }
.ready .cs-title .ch { translate: none; }

/* ---------- Cover: grows from a rounded card to the full width of the screen ---------- */
.cs-cover { position: relative; height: 190vh; }
.cs-cover-pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.cs-cover-fig {
  --w0: min(1100px, 84vw);
  /* never taller than the screen, so the cover keeps its shape and is never cropped */
  margin: 0; width: min(calc(var(--w0) + (100vw - var(--w0)) * var(--p, 0)), calc(100vh * 2240 / 1240)); aspect-ratio: 2240 / 1240;
  overflow: hidden; border-radius: calc(28px * (1 - var(--p, 0)));
  box-shadow: 0 40px 120px rgba(0, 0, 0, calc(0.35 * (1 - var(--p, 0))));
}
.cs-cover-fig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-cover-hint { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); opacity: calc(1 - var(--p, 0) * 3); }

/* ---------- Chapters ---------- */
.cs-ch.section { display: block; padding-block: clamp(96px, 15vh, 170px); scroll-margin-top: 0; }
/* Blocks in a chapter sit close, like paragraphs; screens get a little more air around them. */
.cs-ch > .c-wrap { display: grid; gap: clamp(26px, 4vh, 44px); }
.cs-ch-head { margin-bottom: clamp(8px, 2vh, 24px); }
.cs-pair, .cs-wide { margin-block: clamp(20px, 5vh, 56px); }
.cs-block .row.pair { max-width: none; }
.cs-block > .read { max-width: 760px; }
.cs-ch-head { display: grid; justify-items: start; }
.cs-ch-no { margin-bottom: -0.12em; font-family: var(--f-display); font-weight: 800; font-size: clamp(5rem, 11vw, 9.5rem); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); user-select: none; }
.cs-ch-head .read { display: grid; gap: 18px; max-width: 820px; }
.cs-ch-head h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; }
.cs-ch-head .read p:not(.eyebrow) { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.65; }
.cs-ch .eyebrow { font-size: 0.8rem; }
.cs-block { min-width: 0; }

/* Explanation beside its screen; sides alternate. The words stay in view while the screen scrolls past. */
.cs-pair { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 84px); }
.cs-pair.r { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.cs-pair.r .cs-pair-text { order: 2; }
.cs-pair-text { position: sticky; top: 26vh; }
.cs-pair-text .read { display: grid; gap: 12px; }
.cs-pair-text h3 { font-family: var(--f-display); font-weight: 750; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; }
.cs-pair-media, .cs-pair-media .grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.cs-wide .frame { max-width: 1120px; margin-inline: auto; }

/* Screens open up as they come into view: a clipped frame that widens to its full size, the picture settling in. */
.cs .frame .shot { transition: box-shadow .4s ease; }
.cs-js .cs-pair .frame .shot, .cs-js .cs-wide .frame .shot {
  clip-path: inset(calc((1 - var(--r, 1)) * 14%) calc((1 - var(--r, 1)) * 9%) round 14px);
}
.cs-js .cs-pair .frame .shot img, .cs-js .cs-wide .frame .shot img { scale: calc(1.08 - 0.08 * var(--r, 1)); transition: none; }
.cs .frame .shot:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }

/* "How might we": big, centred, lit word by word. */
.cs-ch .hmw { padding: clamp(32px, 5vw, 64px); text-align: center; border-radius: 32px; }
.cs-ch .hmw q { display: block; max-width: 28ch; margin-inline: auto; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; }
/* The words are spans, and .hmw span is the small "How might we" label: put them back to plain quote text. */
.cs-ch .hmw q .w { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.cs-js .cs-ch .hmw q .w { opacity: 0.18; transition: opacity .3s linear; }
.cs-js .cs-ch .hmw q .w.on { opacity: 1; }

.cs-ch .card { transition: translate .45s var(--ease), border-color .3s ease, background-color .3s ease; }
.cs-ch .card:hover { translate: 0 -4px; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- Chapter rail (wide screens) and chapter pill (everything else) ---------- */
.cs-rail { display: none; }
@media (min-width: 1380px) and (hover: hover) {
  .cs-rail { display: block; position: fixed; z-index: 35; right: 22px; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .4s ease; }
  .cs-rail.on { opacity: 1; }
  .cs-rail ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .cs-rail a { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 0; text-decoration: none; color: var(--soft); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; }
  .cs-rail .n { display: inline-flex; align-items: center; gap: 8px; }
  .cs-rail .n::before { content: ""; width: 12px; height: 1.5px; background: currentColor; transition: width .4s var(--ease), background-color .3s ease; }
  .cs-rail .t { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); white-space: nowrap; text-transform: uppercase; opacity: 0; translate: 8px 0; transition: opacity .3s ease, translate .4s var(--ease); }
  .cs-rail a:hover .t { opacity: 1; translate: none; } /* only on hover, so it never sits over a screen */
  .cs-rail a.on { color: var(--ink); }
  .cs-rail a.on .n::before { width: 28px; background: var(--accent); }
  .cs-hud { display: none; }
}

/* ---------- Next case study ---------- */
.cs-next { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding-top: clamp(100px, 16vh, 170px); }
.cs-next-in { display: grid; gap: 20px; }
.cs-next-link { display: grid; gap: 18px; text-decoration: none; }
.cs-next-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.25em; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6.6vw, 6.6rem); line-height: 0.92; letter-spacing: -0.045em; }
.cs-next-arrow svg { width: 0.5em; height: 0.5em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: translate .45s var(--ease); }
.cs-next-link:hover .cs-next-arrow svg { translate: 0.12em 0; }
.cs-next-head { max-width: 26ch; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.18; }
.cs-next-fig { margin: 10px 0 0; overflow: hidden; border-radius: 26px; aspect-ratio: 2240 / 1240; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3); transform-origin: 50% 0; scale: calc(0.86 + 0.14 * var(--n, 1)); transition: translate .6s var(--ease), box-shadow .6s ease; }
.cs-next-fig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-next-link:hover .cs-next-fig { translate: 0 -6px; box-shadow: 0 50px 110px rgba(0, 0, 0, 0.38); }
.cs-next-more { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 8px; font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-next-more a { color: var(--soft); text-decoration: none; }
.cs-next-more a:hover { color: var(--ink); }
.cs-next .c-foot { margin-top: clamp(64px, 10vh, 110px); }

/* ---------- Phones and tablets: one column, nothing pinned ---------- */
@media (max-width: 900px) {
  .cs-cover { height: auto; padding-bottom: 32px; }
  .cs-cover-pin { position: static; height: auto; }
  .cs-cover-fig { --p: 0; width: calc(100vw - 2 * var(--gutter)); border-radius: 20px; }
  .cs-cover-hint { display: none; }
  .cs-pair, .cs-pair.r { grid-template-columns: minmax(0, 1fr); }
  .cs-pair.r .cs-pair-text { order: 0; }
  .cs-pair-text { position: static; }
  .cs-ch-no { font-size: clamp(4rem, 22vw, 6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-cover { height: auto; padding-bottom: 40px; }
  .cs-cover-pin { position: static; height: auto; }
  .cs-cover-fig { --p: 0; border-radius: 26px; }
  .cs-cover-hint { display: none; }
  .js .cs-title .ch { translate: none; transition: none; }
  .cs-js .cs-pair .frame .shot, .cs-js .cs-wide .frame .shot { clip-path: none; }
  .cs-js .cs-pair .frame .shot img, .cs-js .cs-wide .frame .shot img { scale: 1; }
  .cs-js .cs-ch .hmw q .w { opacity: 1; }
  .cs-next-fig { scale: 1; }
}
.static .cs-title .ch { translate: none; }