/*
  Case study template: a story told in stops along the guest's journey.
  Built on style.css tokens. Content is fully visible without JS; motion is layered on
  only after case.js adds .cs-on, and never when reduced motion is requested.
*/

/* ---------- opener ---------- */
.cs-head { padding-block: clamp(48px, 7vw, 96px) clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.cs-head h1 { font-size: clamp(44px, 7vw, 112px); line-height: .94; letter-spacing: -.02em; max-width: 12em; }
.cs-head h1 .serif { font-weight: 400; letter-spacing: -.01em; }
.cs-head .lede { grid-column: 1; max-width: 34em; margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--ink); }
.cs-client { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: clamp(150px, 16vw, 230px); mix-blend-mode: multiply; }
@media (max-width: 760px) { .cs-head { grid-template-columns: 1fr; } .cs-client { grid-column: 1; grid-row: auto; order: -1; width: 150px; } }

/* hero image: starts inset, opens to full bleed as you scroll */
.cs-hero { position: relative; margin-inline: auto; width: calc(100% - 2 * var(--gut)); max-width: 100%; overflow: hidden; background: var(--line); }
.cs-hero img { width: 100%; height: clamp(320px, 62vw, 860px); object-fit: cover; transform-origin: 50% 40%; }
.cs-on .cs-hero { width: calc(100% - 2 * var(--gut) * (1 - var(--open, 0))); }
.cs-on .cs-hero img { transform: scale(calc(1.14 - .14 * var(--open, 0))); }

/* fact strip under the hero */
.cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); }
.cs-facts > div { padding: 22px 24px 26px 0; border-right: 1px solid var(--line); min-width: 0; }
.cs-facts > div + div { padding-left: 24px; }
.cs-facts > div:last-child { border-right: 0; }
.cs-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.cs-facts dd { overflow-wrap: break-word; margin: 0; font-size: 17px; line-height: 1.4; color: var(--deep); font-weight: 500; }
@media (max-width: 480px) { .cs-facts { grid-template-columns: 1fr !important; } .cs-facts > div { border-right: 0 !important; padding-left: 0 !important; } .cs-facts > div + div { border-top: 1px solid var(--line); } }
@media (max-width: 860px) { .cs-facts { grid-template-columns: 1fr 1fr; } .cs-facts > div:nth-child(2) { border-right: 0; } .cs-facts > div:nth-child(3) { padding-left: 0; } .cs-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- the short version: three beats that ink in as you read ---------- */
.cs-story { padding-block: clamp(80px, 11vw, 160px); display: grid; gap: clamp(56px, 7vw, 96px); }
.cs-beat { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr); gap: 16px 40px; align-items: baseline; }
.cs-beat h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.cs-beat h2::before { content: ""; flex: none; width: 26px; height: 13px; border-radius: 999px; background: var(--accent); border: 2px solid var(--deep); }
.cs-beat p { margin: 0; max-width: 21em; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.12; letter-spacing: -.014em; font-weight: 600; color: var(--deep); text-wrap: balance; }
.cs-beat p em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
.cs-on .cs-ink .wd { color: color-mix(in srgb, var(--deep) 22%, var(--ground)); transition: color .35s linear; }
.cs-on .cs-ink .wd.lit { color: var(--deep); }
@media (max-width: 700px) { .cs-beat { grid-template-columns: 1fr; } }

/* ---------- journey: chapter list + sticky tracker ---------- */
.cs-journey-head { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.cs-journey-head h2 { font-size: clamp(40px, 5.6vw, 88px); line-height: .96; letter-spacing: -.018em; max-width: 10em; }
.cs-journey-head p { max-width: 24em; margin: 0; color: var(--ink-2); font-size: 18px; }

.cs-track { position: sticky; top: 78px; z-index: 30; background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.cs-track ol { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); max-width: var(--max); padding-inline: var(--gut); }
.cs-track a { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 0 15px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s var(--ease); }
.cs-track a span { font-variant-numeric: tabular-nums; font-weight: 500; opacity: .7; }
.cs-track a::after { content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 3px; background: var(--deep); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cs-track a.done { color: var(--deep); }
.cs-track a.done::after { transform: scaleX(1); background: var(--line); }
.cs-track a.now { color: var(--deep); }
.cs-track a.now::after { transform: scaleX(1); background: var(--accent); }
@media (max-width: 860px) { .cs-track { display: none; } }

.cs-stop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 120px); scroll-margin-top: 130px; }
.cs-stop.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cs-stop.flip > .cs-shot, .cs-stop.flip > .cs-video { order: 2; }
.cs-stop + .cs-stop { border-top: 1px solid var(--line); }
.cs-copy { min-width: 0; max-width: 30em; }
.cs-where { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cs-where b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--deep); background: var(--accent); padding: 4px 11px; border-radius: 999px; letter-spacing: .08em; }
.cs-copy h3 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.016em; margin-bottom: 18px; }
.cs-copy h3 .serif { font-weight: 400; }
.cs-copy p { margin: 0; font-size: 18px; color: var(--ink); }
.cs-copy .cs-tag { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.cs-shot { margin: 0; min-width: 0; max-width: 100%; overflow: hidden; background: var(--paper); }
.cs-shot img { width: 100%; height: auto; }
.cs-shot--white { background: #fff; }
.cs-shot--clear { background: transparent; }
.cs-hero--clear { background: transparent; }
.cs-shot--small { display: flex; justify-content: center; align-items: center; padding-block: clamp(16px, 3vw, 40px); }
.cs-shot--small img { width: auto; max-width: 100%; height: auto; max-height: var(--mh, 380px); }
@media (max-width: 760px) {
  .cs-stop, .cs-stop.flip { grid-template-columns: 1fr; }
  .cs-stop.flip > .cs-shot, .cs-stop.flip > .cs-video { order: 0; }
}

/* wide stops: copy across the top, then a gallery of rows */
.cs-stop--wide { grid-template-columns: 1fr !important; align-items: start; gap: clamp(28px, 4vw, 52px); }
.cs-copy--wide { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px clamp(28px, 5vw, 80px); align-items: end; }
.cs-copy--wide h3 { margin-bottom: 0; }
.cs-copy--wide .cs-copy-body { max-width: 30em; }
@media (max-width: 760px) { .cs-copy--wide { grid-template-columns: 1fr; } }
.cs-media { display: grid; gap: clamp(14px, 2vw, 28px); min-width: 0; }
.cs-row { display: flex; align-items: stretch; gap: clamp(14px, 2vw, 28px); min-width: 0; }
.cs-row > .cs-shot { flex: var(--r, 1) 1 0; }
.cs-row > .cs-shot img { height: 100%; object-fit: cover; }
@media (max-width: 600px) { .cs-row:not(.cs-row--keep) { flex-direction: column; } .cs-row:not(.cs-row--keep) > .cs-shot { flex: none; } .cs-row--keep { gap: 10px; } }
.cs-link { display: inline-block; margin-top: 18px; font-weight: 600; font-size: 16px; color: var(--deep); text-decoration: none; }

/* video */
.cs-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--deep); overflow: hidden; }
.cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video .cs-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cs-video .cs-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--paper); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 16px; }
.cs-video .cs-play::before { content: ""; width: 74px; height: 74px; border-radius: 999px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%232f2d2b'/%3E%3C/svg%3E") center / 34px no-repeat; }
.cs-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(14px, 2vw, 28px); }

/* image reveal: a wipe up, then a slow settle. Hidden state only exists once JS is running */
.cs-on .cs-shot { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); }
.cs-on .cs-shot img { transform: scale(1.12) translateY(var(--py, 0px)); transition: transform 1.6s var(--ease); }
.cs-on .cs-shot.in { clip-path: inset(0 0 0 0); }
.cs-on .cs-shot.in img { transform: scale(1.02) translateY(var(--py, 0px)); transition: transform .2s linear; }

/* ---------- the big moment: 100 Forks ---------- */
.cs-moment { background: var(--deep); color: var(--on-dark); overflow: hidden; }
.cs-moment .wrap { padding-block: clamp(80px, 10vw, 150px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cs-count.is-text { font-size: clamp(64px, 9.5vw, 150px); line-height: .92; letter-spacing: -.035em; font-stretch: 90%; }
.cs-count { display: block; font-size: clamp(120px, 21vw, 330px); line-height: .8; font-weight: 800; letter-spacing: -.05em; color: var(--accent); font-variant-numeric: tabular-nums; font-stretch: 85%; }
.cs-moment h2 { color: var(--paper); font-size: clamp(34px, 4vw, 60px); line-height: 1; letter-spacing: -.016em; margin: 28px 0 22px; }
.cs-moment h2 .serif { color: var(--accent); font-weight: 400; }
.cs-moment p { margin: 0 0 1em; max-width: 28em; font-size: 18px; }
.cs-moment figure { margin: 0; min-width: 0; }
.cs-moment figcaption { margin-top: 14px; font-size: 14px; color: var(--on-dark-2); }
.cs-room { overflow: hidden; }
.cs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-content: center; }
.cs-chips li { padding: 12px 22px; border: 2px solid var(--accent); border-radius: 999px; color: var(--paper); font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); }
.cs-moment .wrap.solo { grid-template-columns: minmax(0, 1fr); }
.cs-moment .wrap.solo > div { max-width: 52em; }
.cs-room img { width: 100%; transform: translateY(var(--py, 0px)) scale(1.1); }
.cs-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: clamp(24px, 4vw, 48px); border-top: 1px solid #4a4744; }
.cs-detail .cs-shot { background: #fff; }
@media (max-width: 860px) { .cs-moment .wrap, .cs-detail { grid-template-columns: 1fr; } }

/* ---------- what we did ---------- */
.cs-did { padding-block: clamp(64px, 8vw, 110px) 0; display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr); gap: 16px 40px; align-items: baseline; }
.cs-did h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cs-did ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-did li { padding: 10px 18px; border: 2px solid var(--deep); border-radius: 999px; font-weight: 600; font-size: 16px; color: var(--deep); }
@media (max-width: 700px) { .cs-did { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .cs-shot, .cs-shot img, .cs-hero img, .cs-room img { clip-path: none !important; transform: none !important; transition: none !important; }
}