/* ==========================================================================
   MOMENTOUS — work.css
   Case-study pages (/work/*). Loaded AFTER site.css and built only from its tokens and
   components: .nav, .eyebrow, .h2, .lead, .btn, .tv/.screen/.osd/.vcr, .tape, .scene, .stats,
   .sheet, .cta, footer, .hud. Nothing here redefines the homepage look; it only composes it.
   ========================================================================== */

/* ---------- hero (the homepage hero, pointed at a case) ---------- */
.chero { position: relative; min-height: min(94svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; background: #000; }
.chero-media { position: absolute; inset: 0; z-index: -2; }
.chero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.chero.is-portrait .chero-media img { filter: blur(38px) brightness(0.42) saturate(1.3); transform: scale(1.25); }
.chero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 22%),
    linear-gradient(0deg, rgb(12 12 12 / 0.96) 0%, rgb(12 12 12 / 0.78) 22%, rgb(12 12 12 / 0) 58%); }
.chero-body { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 150px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px; }
.chero.is-portrait .chero-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.chero h1 { margin: 0 0 22px; font-family: var(--f-quin); font-weight: 900; text-transform: uppercase; font-size: clamp(3.2rem, 11vw, 10.5rem); line-height: 0.86; letter-spacing: -0.015em; text-wrap: balance; }
.chero h1.m { font-size: clamp(2.8rem, 8.4vw, 8rem); }
.chero h1.s { font-size: clamp(2.4rem, 6.4vw, 5.8rem); }
.chero h1 .o { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.chero .hl { margin: 0 0 22px; font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.chero .hl em { color: var(--pink-soft); }
.chero .sub { max-width: 46ch; color: var(--ink-80); font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: clamp(26px, 5vh, 52px) 0 clamp(26px, 5vh, 52px); border-top: 1px solid var(--ink-12); }
.facts div { padding: 16px 22px 0; border-left: 1px solid var(--ink-12); }
.facts div:first-child { padding-left: 0; border-left: 0; }
.facts dt { margin: 0 0 6px; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-40); }
.facts dd { margin: 0; font-size: 0.98rem; line-height: 1.35; color: var(--ink); }
@media (max-width: 760px) {
  .chero-body, .chero.is-portrait .chero-body { grid-template-columns: 1fr; padding-top: 130px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div, .facts div:first-child { padding: 14px 12px 0 0; border-left: 0; }
  .facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--ink-12); }
  .chero .hero-side { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* portrait fan: three stills tilted like tapes spilled on a desk */
.fan { position: relative; height: clamp(320px, 44vw, 560px); }
.fan figure { position: absolute; margin: 0; width: 43%; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 70px rgb(0 0 0 / 0.55), inset 0 0 0 1px var(--ink-12); }
.fan figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ink-12); pointer-events: none; }
.fan img { width: 100%; height: 100%; object-fit: cover; }
.fan figcaption { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.16em; color: var(--ink); text-shadow: 0 1px 6px #000; }
.fan figure:nth-child(1) { left: 0; bottom: 5%; transform: rotate(-5deg); z-index: 1; }
.fan figure:nth-child(2) { left: 28.5%; bottom: 0; transform: rotate(1.5deg); z-index: 3; }
.fan figure:nth-child(3) { right: 0; bottom: 7%; transform: rotate(6deg); z-index: 2; }
@media (max-width: 760px) { .fan { height: clamp(300px, 86vw, 440px); margin-top: 8px; } }

/* ---------- the deck: the homepage TV, loaded with this case's tapes ---------- */
.deck { padding-block: clamp(72px, 10vw, 150px) clamp(48px, 6vw, 90px); }
.deck-grid { display: grid; gap: clamp(26px, 3.6vw, 52px); }
.deck-grid.is-portrait { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); align-items: start; }
.deck-grid.is-portrait .screen { aspect-ratio: 9 / 16; max-height: min(82svh, 780px); }
.screen-facade .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform 1.1s var(--ease), opacity .4s; }
.screen-facade:hover .poster { transform: scale(1.03); }
.screen-facade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(12 12 12 / 0.55), transparent 48%); }
.screen-facade .snow { z-index: 1; }
.screen-facade .play { z-index: 2; }
.screen.playing .osd { display: none; }
.rack-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; color: var(--ink-40); }
.rack { display: grid; gap: clamp(16px, 1.8vw, 24px); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.deck-grid.is-portrait .rack { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.rack .tape { flex: none; width: 100%; display: block; text-align: left; }
.deck-grid.is-portrait .rack .tape .frame { aspect-ratio: 9 / 16; }
.rack .tape .frame { display: block; }
.rack .tape[aria-current="true"] .frame::after { box-shadow: inset 0 0 0 2px var(--pink); }
.rack .tape[aria-current="true"] .osd-p { opacity: 1; transform: none; }
.rack .tape .label b { font-size: 1rem; }
.deck-grid.is-portrait .rack .tape .label b { font-size: 0.92rem; }
.deck-grid.is-portrait .vcr { grid-template-columns: 1fr; text-align: center; gap: 12px; }
.deck-grid.is-portrait .vcr .brand { text-align: center; }
.deck-grid.is-portrait .vcr .slot { min-width: 0; display: block; line-height: 22px; text-align: center; text-overflow: ellipsis; letter-spacing: 0.1em; }
@media (max-width: 860px) { .deck-grid.is-portrait { grid-template-columns: 1fr; } .deck-grid.is-portrait .tv { max-width: 440px; width: 100%; margin-inline: auto; } .deck-grid.is-portrait .rack { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }

/* ---------- brief (the homepage thesis block) ---------- */
.thesis.brief .h2 { max-width: 18ch; font-size: clamp(2.8rem, 7.4vw, 6.6rem); }
.thesis-grid.one { grid-template-columns: minmax(0, 62ch); }
.thesis-grid .lead + .lead { margin-top: 22px; }

/* ---------- moves (the homepage "scenes") ---------- */
.scenes.moves { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.scenes.moves .scene { min-height: 440px; }
.scenes.moves .scene h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
@media (max-width: 960px) { .scenes.moves { grid-template-columns: 1fr; } .scenes.moves .scene { min-height: 0; } }

/* ---------- receipts (the homepage stats, one per fact) ---------- */
.stats.work { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 0; }
.stats.work .stat b { white-space: nowrap; }
.stats.work .stat b.md { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1; }
.stats.work .stat b.sm { font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1.1; }
.stats.work .stat span { max-width: 26ch; }
@media (max-width: 760px) { .stats.work { grid-template-columns: 1fr 1fr; } .stats.work .stat:nth-child(odd) { border-left: 0; padding-left: 0; } .stats.work .stat:nth-child(n+3) { margin-top: 24px; } }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); margin-top: clamp(36px, 5vw, 64px); }
.result .lead:only-child { grid-column: 1 / -1; max-width: 62ch; }
@media (max-width: 760px) { .result { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- contact sheet (the homepage stills sheet, clickable) ---------- */
.sheet.work figure { margin: 0 0 14px; }
.sheet.work .fr { display: block; width: 100%; position: relative; cursor: zoom-in; }
.sheet.work .fr img { display: block; }
.lbx { position: fixed; inset: 0; z-index: 400; background: rgb(12 12 12 / 0.96); display: none; place-items: center; padding: clamp(16px, 4vw, 56px); cursor: zoom-out; }
.lbx.on { display: grid; }
.lbx img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--ink-12); }
.lbx button { position: absolute; top: 18px; right: var(--gutter); height: 40px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-40); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.lbx button:hover { background: var(--ink); color: #000; }

/* ---------- end credits ---------- */
.credit-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); margin: clamp(32px, 5vw, 56px) 0 0; }
.credit-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--ink-12); }
.credit-list dt { margin: 0; color: var(--ink-40); }
.credit-list dd { margin: 0; font-family: var(--f-serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.05; text-align: right; }
.partners { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 32px; margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--ink-12); }
.partners .mono { color: var(--ink-40); }
.plist { display: flex; flex-wrap: wrap; font-family: var(--f-serif); font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.05; text-transform: uppercase; }
.plist span::after { content: "·"; color: var(--pink); padding: 0 0.45em; }
.plist span:last-child::after { content: none; }
@media (max-width: 760px) { .credit-list { grid-template-columns: 1fr; } .credit-list dd { text-align: right; } }

/* ---------- keep watching + /work index (the homepage tape card, in a grid) ---------- */
.tape-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.tape-grid .tape { flex: none; display: block; }
.tape-grid .tape .frame img { transition: transform .9s var(--ease), filter .6s; }
@media (max-width: 960px) { .tape-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tape-grid { grid-template-columns: 1fr; } }
.more-row { margin-top: clamp(32px, 4vw, 52px); }

/* ---------- /work index head ---------- */
.idx-head { padding-top: clamp(130px, 18vw, 220px); padding-bottom: clamp(36px, 5vw, 64px); }
.idx-head h1 { margin: 0 0 24px; font-family: var(--f-quin); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 12vw, 11rem); line-height: 0.86; letter-spacing: -0.015em; }
.idx-head h1 .o { -webkit-text-stroke: 2px var(--ink); color: transparent; }

/* ---------- hero legibility: a left-side scrim so the headline never sits on a bright wall or blown-out frame ---------- */
.chero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(12 12 12 / 0.72) 0%, rgb(12 12 12 / 0.42) 45%, rgb(12 12 12 / 0) 78%); }
@media (max-width: 760px) { .chero::after { background: linear-gradient(0deg, rgb(12 12 12 / 0.35), rgb(12 12 12 / 0.35)); } }

/* a vertical cut playing inside the widescreen TV */
.screen.vert { aspect-ratio: 9 / 16; max-height: min(82svh, 780px); width: min(100%, calc(min(82svh, 780px) * 9 / 16)); margin-inline: auto; }
.rack .tape.v .frame img { object-fit: contain; background: #000; }