/* ============================================================
   OKAY DEPARTMENT — flat hard color fields, award choreography
   Palette: #0F0F10 ink · #EDEAE4 bone · #FF3D2E red · #2E63FF blue · #FFC700 yellow
   No gradients. Hard shadows only. 24 fps taken personally.
   ============================================================ */

:root {
  --ink: #0F0F10;
  --bone: #EDEAE4;
  --red: #FF3D2E;
  --blue: #2E63FF;
  --yellow: #FFC700;
  --disp: "Archivo Black", "Arial Black", sans-serif;
  --anton: "Anton", "Arial Narrow", sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --hand: "Shantell Sans", "Comic Sans MS", cursive;
  --pad: clamp(20px, 4.5vw, 64px);
  --chrome-h: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--bone);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html.lock { overflow: hidden; }

::selection { background: var(--red); color: var(--bone); }

a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ============ SCENES — one flat field each ============ */
main { position: relative; }
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.scene--bone   { background: var(--bone);   color: var(--ink); }
.scene--ink    { background: var(--ink);    color: var(--bone); }
.scene--red    { background: var(--red);    color: var(--ink); }
.scene--blue   { background: var(--blue);   color: var(--bone); }
.scene--yellow { background: var(--yellow); color: var(--ink); }

.inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: calc(var(--chrome-h) + 16px) var(--pad) calc(var(--chrome-h) + 8px);
}

/* deck mode (JS, desktop, motion-ok): sticky stack, JS drives transitions */
html.deck .scene {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* ============ ENTRANCE RISE (per-scene choreography) ============ */
html.js .rise {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.16,1.1,.3,1);
}
html.js .scene.is-on .rise { opacity: 1; transform: none; }
html.js .scene.is-on .rise:nth-child(2), html.js .scene.is-on .rise:nth-of-type(2) { transition-delay: .07s; }
html.js .scene.is-on .rise:nth-child(3), html.js .scene.is-on .rise:nth-of-type(3) { transition-delay: .14s; }
html.js .scene.is-on .rise:nth-child(4), html.js .scene.is-on .rise:nth-of-type(4) { transition-delay: .21s; }
html.js .scene.is-on .rise:nth-child(5), html.js .scene.is-on .rise:nth-of-type(5) { transition-delay: .28s; }

/* ============ FIXED CHROME ============ */
.chrome { position: fixed; inset: 0; pointer-events: none; z-index: 60; font-weight: 600; }
.chrome > div { position: fixed; display: flex; align-items: center; gap: 10px; }
.chrome__tl { top: 18px; left: var(--pad); pointer-events: auto; }
.chrome__tr { top: 18px; right: var(--pad); }
.chrome__bl { bottom: 16px; left: var(--pad); }
.chrome__br { bottom: 16px; right: var(--pad); }
.chrome, .chrome a { color: var(--bone); transition: color .35s steps(2, end); }
html[data-chrome="light"] .chrome, html[data-chrome="light"] .chrome a { color: var(--ink); }
.mark {
  font-family: var(--disp);
  font-size: 13px;
  letter-spacing: .06em;
  text-decoration: none;
}
.mark sup { font-size: 7px; font-family: var(--body); vertical-align: super; }
html .chrome a.mark:hover { color: var(--red); }
.tc, .chrome__bl, .chrome__br {
  font-size: 11px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.chrome__sep { opacity: .5; }
.rec { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; }
.rec__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .3; }
.rec__on { display: none; }
html.is-scrolling .rec__dot { background: var(--red); opacity: 1; animation: blink .5s steps(2, start) infinite; }
html.is-scrolling .rec__on { display: inline; }
html.is-scrolling .rec__off { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ============ CUSTOM CURSOR — viewfinder crosshair ============ */
.cur { display: none; }
html.cur-on.cur-live .cur { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 70; mix-blend-mode: difference; color: #fff; }
html.cur-on.cur-live * { cursor: none !important; }
#curx, #cury { position: fixed; background: #fff; opacity: .28; }
#curx { left: 0; top: 0; width: 100vw; height: 1px; }
#cury { left: 0; top: 0; width: 1px; height: 100vh; }
#curdot { position: fixed; left: 0; top: 0; }
.curdot__ring {
  position: absolute; left: -11px; top: -11px;
  width: 22px; height: 22px; border: 1.5px solid #fff; border-radius: 50%;
  display: block; transition: transform .18s cubic-bezier(.3,1.6,.4,1);
}
html.cur-hover .curdot__ring { transform: scale(1.8); }
.curdot__rec { position: absolute; left: 14px; top: -22px; width: 7px; height: 7px; border-radius: 50%; background: #fff; display: block; opacity: 0; }
#curdot em { position: absolute; left: 25px; top: -27px; font-style: normal; font-size: 9px; letter-spacing: .18em; font-weight: 700; opacity: 0; }
html.is-scrolling .curdot__rec, html.is-scrolling #curdot em { opacity: 1; animation: blink .5s steps(2, start) infinite; }

/* ============ SHARED TYPE ============ */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  margin-bottom: clamp(18px, 3vh, 34px);
}
.hand { font-family: var(--hand); letter-spacing: 0; text-transform: none; }

/* ============ SC01 · HERO ============ */
.hero { width: 100%; }
.hero__word { display: block; line-height: .86; }
.hero__okay {
  display: block;
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(96px, 24.5vw, 350px);
  letter-spacing: .015em;
  color: var(--ink);
}
.hero__dept {
  display: inline-block;
  font-family: var(--disp);
  font-size: clamp(21px, 5.75vw, 82px);
  letter-spacing: .033em;
  background: var(--ink);
  color: var(--bone);
  padding: .12em .18em .1em;
  margin-top: .12em;
}
.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(22px, 4vh, 44px);
}
.hero__tag { max-width: 46ch; font-size: clamp(15px, 1.25vw, 18px); font-weight: 500; }
.hero__note { display: flex; align-items: flex-start; gap: 10px; max-width: 240px; color: var(--ink); }
.note__arrow { width: 74px; flex: none; margin-top: 14px; }
.hero__note .hand { font-size: 15px; line-height: 1.35; transform: rotate(-2deg); }
.bars { display: flex; height: 14px; margin-top: clamp(20px, 3.5vh, 40px); }
.bars i { flex: 1; }
.b-red { background: var(--red); } .b-blue { background: var(--blue); }
.b-yellow { background: var(--yellow); } .b-ink { background: var(--ink); }
.b-bone { background: var(--bone); box-shadow: inset 0 0 0 2px var(--ink); }
.scene--ink .b-bone { box-shadow: inset 0 0 0 2px var(--bone); }
.scene--ink .b-ink { box-shadow: inset 0 0 0 2px var(--bone); }

/* ============ SC02 · PITCH ============ */
.pitch__head {
  font-family: var(--disp);
  font-size: clamp(26px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: .005em;
  max-width: 20ch;
}
.pitch__head em { font-style: normal; color: var(--red); }
.pitch__body {
  max-width: 54ch;
  margin-top: clamp(18px, 3vh, 32px);
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--bone);
}
.stats { display: flex; gap: clamp(24px, 5vw, 80px); margin-top: clamp(28px, 5vh, 56px); flex-wrap: wrap; }
.stats div { border-top: 3px solid var(--bone); padding-top: 12px; min-width: 150px; }
.stats dt { font-family: var(--anton); font-size: clamp(40px, 4.5vw, 64px); line-height: 1; }
.stats dd { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; font-weight: 600; }
.stats__note { display: inline-block; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--yellow); transform: rotate(-2deg) translateY(-1px); margin-left: 4px; }

/* ============ SC03–05 · RECENT FRAMES ============ */
.frame {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  width: 100%;
}
.frame--flip { grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); }
.frame--flip .frame__copy { order: 2; }
.frame--flip .clip { order: 1; }
.frame__title {
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 118px);
  line-height: .9;
  letter-spacing: .01em;
}
.frame__cap { max-width: 44ch; margin-top: clamp(14px, 2.5vh, 24px); font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; }
.frame__meta { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.clip { max-width: 780px; width: 100%; justify-self: end; }
.frame--flip .clip { justify-self: start; }
.clip video, .clip__poster { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 3px solid var(--ink); }
.scene--blue .clip video, .scene--blue .clip__poster { border-color: var(--ink); }
.clip__poster { display: none; }
.slate {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--bone);
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}
.slate__stripes { display: flex; gap: 5px; flex: none; }
.slate__stripes i { width: 12px; height: 14px; background: var(--bone); transform: skewX(-24deg); }
.slate__stripes i:nth-child(even) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bone); }
.slate__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slate__fr { margin-left: auto; flex: none; opacity: .75; }
.sprockets {
  display: block;
  height: 14px;
  background-color: var(--ink);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="14"><rect x="8" y="4" width="10" height="6" rx="1" fill="%23EDEAE4"/></svg>');
  background-repeat: repeat-x;
}

/* ============ SC06 · SERVICES — title cards ============ */
.cards { list-style: none; }
.card {
  display: grid;
  grid-template-columns: 90px minmax(180px, 320px) 1fr;
  gap: clamp(14px, 2.5vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 2.6vh, 26px) 14px;
  border-top: 3px solid var(--ink);
  transition: background .15s steps(2, end), color .15s steps(2, end);
}
.cards .card:last-child { border-bottom: 3px solid var(--ink); }
.card__no { font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.card__t { font-family: var(--disp); font-size: clamp(22px, 2.6vw, 36px); letter-spacing: .01em; }
.card__d { font-size: clamp(13px, 1.05vw, 16px); font-weight: 500; max-width: 52ch; }
.card:hover { background: var(--ink); color: var(--bone); }

/* ============ SC07 · DEPARTURES — split-flap board ============ */
.board {
  border: 3px solid var(--bone);
  padding: clamp(10px, 1.6vw, 22px);
  font-variant-numeric: tabular-nums;
}
.board__row {
  display: grid;
  grid-template-columns: 14fr 13fr 4fr 11fr;
  gap: clamp(8px, 1.4vw, 24px);
  padding: 7px 0;
}
.board__row + .board__row { border-top: 1px solid rgba(237, 234, 228, .22); }
.board__head { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--yellow); }
.fcell { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.flap {
  flex: none;
  width: 1.05ch;
  text-align: center;
  font-weight: 600;
  font-size: clamp(11px, 1.15vw, 16px);
  line-height: 1.5;
  color: var(--yellow);
  background: #1B1B1D;
  position: relative;
  border-radius: 1px;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.flap.blank { background: #161618; }
.board__foot { margin-top: 14px; font-size: 10px; font-weight: 700; letter-spacing: .22em; opacity: .6; }

/* ============ SC08 · CASTING SHEETS ============ */
.sheets { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.sheet {
  background: #FBFAF7;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(18px, 2vw, 28px);
  transform: rotate(-1deg);
  transition: transform .2s cubic-bezier(.3,1.5,.4,1);
}
.sheet:nth-child(2) { transform: rotate(.7deg); }
.sheet:nth-child(3) { transform: rotate(-.5deg); }
.sheet:hover { transform: rotate(0) translateY(-4px); }
.sheet__head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px;
}
.sheet__role { font-family: var(--disp); font-size: clamp(18px, 1.6vw, 23px); margin-top: 14px; line-height: 1.1; }
.sheet__as { font-size: 13px; margin-top: 4px; }
.sheet__as .hand { font-size: 15px; color: var(--red); font-style: normal; }
.sheet__reads { font-size: 13.5px; margin-top: 12px; }
.sheet__must { margin: 12px 0 16px 0; list-style: none; font-size: 13px; }
.sheet__must li { padding: 5px 0 5px 18px; position: relative; border-top: 1px solid rgba(15,15,16,.15); }
.sheet__must li::before { content: "■"; position: absolute; left: 0; font-size: 8px; top: 9px; color: var(--red); }
.sheet__cta {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-decoration: none;
  background: var(--ink); color: var(--bone);
  padding: 9px 12px;
  transition: background .15s steps(2,end);
}
.sheet__cta:hover { background: var(--red); }

/* ============ SC09 · CREDITS ============ */
.credits { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 5vw; }
.credits > * { grid-column: 1; }
.fin {
  grid-column: 2; grid-row: 1 / span 5;
  align-self: center; justify-self: center;
  border: 3px solid var(--bone);
  padding: clamp(28px, 3.5vw, 56px) clamp(32px, 4vw, 64px);
  text-align: center;
}
.fin__word { display: block; font-family: var(--anton); font-size: clamp(64px, 7.5vw, 120px); line-height: 1; }
.fin__word i { font-style: normal; color: var(--red); }
.fin__note { display: block; margin-top: 10px; font-size: 16px; opacity: .8; transform: rotate(-2deg); }
.fin__sub { display: block; margin-top: 16px; font-size: 9px; font-weight: 700; letter-spacing: .3em; opacity: .55; }
.credits__head { font-family: var(--anton); font-weight: 400; font-size: clamp(64px, 11vw, 160px); line-height: .88; }
.dot-red { color: var(--red); }
.credits__pitch { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; margin-top: clamp(14px, 2.5vh, 26px); }
.credits__list { margin-top: clamp(20px, 3.5vh, 40px); max-width: 640px; }
.credits__list div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid rgba(237,234,228,.25); font-size: clamp(13px, 1.1vw, 15px); }
.credits__list dt { font-weight: 700; letter-spacing: .16em; font-size: 11px; padding-top: 3px; }
.credits__list dd a { text-decoration-color: var(--red); text-underline-offset: 3px; }
.credits__list dd a:hover { color: var(--yellow); }
.credits .bars { max-width: 640px; height: 10px; }
.foot { margin-top: clamp(18px, 3vh, 30px); }
.foot__wit { font-size: 10px; font-weight: 700; letter-spacing: .2em; opacity: .55; }
.foot__credit { margin-top: 10px; font-size: 12.5px; opacity: .75; }
.foot__credit a { text-underline-offset: 3px; }
.foot__credit a:hover { color: var(--yellow); }

/* ============ INTRO TITLE SEQUENCE ============ */
#intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#intro.out { transform: translateY(-100%); transition: transform .45s cubic-bezier(.7,0,.18,1); }
.intro__slabs i { position: absolute; left: 0; width: 100%; height: 25.5%; transform: scaleX(0); transform-origin: left; }
.intro__slabs .s1 { top: 0;    background: var(--ink); }
.intro__slabs .s2 { top: 25%;  background: var(--red); transform-origin: right; }
.intro__slabs .s3 { top: 50%;  background: var(--blue); }
.intro__slabs .s4 { top: 75%;  background: var(--yellow); transform-origin: right; }
#intro.go .intro__slabs i { animation: slab .62s cubic-bezier(.75,0,.16,1) forwards; }
#intro.go .s2 { animation-delay: .07s; }
#intro.go .s3 { animation-delay: .14s; }
#intro.go .s4 { animation-delay: .21s; }
@keyframes slab { 0% { transform: scaleX(0); } 46% { transform: scaleX(1); transform-origin: inherit; } 100% { transform: scaleX(1); } }
.intro__word { position: relative; text-align: center; z-index: 2; }
.intro__okay { display: block; font-family: var(--anton); font-size: clamp(90px, 17vw, 240px); line-height: .9; color: var(--bone); }
.intro__okay b { display: inline-block; font-weight: 400; transform: translateY(115%); opacity: 0; }
#intro.go .intro__okay b { animation: pop .55s cubic-bezier(.18,1.4,.3,1) forwards; }
#intro.go .intro__okay b:nth-child(1) { animation-delay: .34s; }
#intro.go .intro__okay b:nth-child(2) { animation-delay: .41s; }
#intro.go .intro__okay b:nth-child(3) { animation-delay: .48s; }
#intro.go .intro__okay b:nth-child(4) { animation-delay: .55s; }
@keyframes pop { to { transform: none; opacity: 1; } }
.intro__dept {
  display: inline-block;
  font-family: var(--disp);
  font-size: clamp(22px, 4.2vw, 58px);
  letter-spacing: .04em;
  background: var(--bone); color: var(--ink);
  padding: .1em .25em;
  margin-top: 10px;
  transform: translateX(-130%);
  opacity: 0;
}
#intro.go .intro__dept { animation: slide .5s cubic-bezier(.2,1.25,.3,1) .78s forwards; }
@keyframes slide { to { transform: none; opacity: 1; } }
.intro__meta { display: block; margin-top: 18px; font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--bone); opacity: 0; }
#intro.go .intro__meta { animation: fadein .35s 1.15s forwards; }
@keyframes fadein { to { opacity: .85; } }
#skip {
  position: absolute; right: 24px; bottom: 20px;
  font: 700 11px/1 var(--body); letter-spacing: .2em;
  background: none; border: 2px solid var(--bone); color: var(--bone);
  padding: 10px 14px; cursor: pointer; z-index: 3;
}
#skip:hover { background: var(--bone); color: var(--ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  .frame, .frame--flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fin { display: none; }
  .frame--flip .frame__copy { order: 1; }
  .frame--flip .clip { order: 2; }
  .clip { justify-self: start; max-width: 640px; }
  .card { grid-template-columns: 70px 1fr; }
  .card__d { grid-column: 2; }
  .sheets { grid-template-columns: 1fr 1fr; }
  .sheets .sheet:last-child { grid-column: span 2; max-width: 480px; }
}
@media (max-width: 700px) {
  :root { --chrome-h: 48px; }
  .chrome > .chrome__bl { display: none; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__note { max-width: none; }
  .frame__title { font-size: clamp(48px, 15vw, 72px); }
  .stats { gap: 18px; }
  .stats div { min-width: 120px; }
  .board__row { grid-template-columns: 14fr 11fr; row-gap: 4px; }
  .board__row [data-w="13"], .board__head span:nth-child(2) { display: none; }
  .board__head span:nth-child(3) { text-align: left; }
  .flap { font-size: 11px; }
  .card { grid-template-columns: 1fr; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .card__d { grid-column: 1; }
  .sheets { grid-template-columns: 1fr; }
  .sheets .sheet:last-child { grid-column: auto; max-width: none; }
  .sheet, .sheet:nth-child(2), .sheet:nth-child(3) { transform: none; }
  .credits__list div { flex-direction: column; gap: 2px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html.js .rise { opacity: 1; transform: none; }
  .clip video { display: none; }
  .clip__poster { display: block; }
  #intro { display: none !important; }
}

/* ============ NO-JS ============ */
html:not(.js) .chrome__bl, html:not(.js) .chrome__br, html:not(.js) .chrome__tr { display: none; }