:root {
  --white: #f5f3ee;
  --soft: rgba(245, 243, 238, 0.66);
  --faint: rgba(245, 243, 238, 0.4);
  --glass: rgba(16, 16, 18, 0.4);
  --glass-line: rgba(255, 255, 255, 0.1);
  --font: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.3, 1.22, 0.5, 1);
  --edge: clamp(16px, 3vw, 40px);
  --bar-h: 200px;
  --radius: 14px;
  /* chromatic aberration for the interface (never the footage) */
  --ca-r: rgba(255, 36, 92, 0.72);
  --ca-b: rgba(36, 206, 255, 0.72);
  /* Chromatic aberration is switched off site-wide; these stay as no-ops so it can be dialed back in. */
  --ca: 0 0 transparent;
  --ca-lg: 0 0 transparent;
  --ca-box: 0 0 0 0 transparent;
  --ca-icon: drop-shadow(0 0 0 transparent);
  /* track label colors, after the usual NLE defaults */
  --v1: #8b7cff;
  --v2: #2dd4bf;
  --v3: #f5a524;
  --a1: #34c759;
  --like: #ff375f;
  --comment: #0a84ff;
  --view: #bf5af2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #000; color: var(--white); font-family: var(--font); font-weight: 400; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-shadow: inherit; }
a { color: inherit; }
svg { width: 22px; height: 22px; fill: currentColor; display: block; }

.eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }

/* Stage: the video fills the window */
.stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
.stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .6s ease, top 1.1s var(--ease), height 1.1s var(--ease);
}
.stage video.on { opacity: 1; }
.stage.contain video { object-fit: contain; }
/* On a wide screen, a vertical spot sits between the header and the bar so nothing is hidden behind them. */
@media (orientation: landscape) {
  .stage { --fit-top: calc(var(--edge) * 0.7 + 74px); --fit-bottom: calc(var(--bar-h) + var(--edge) * 0.7 + 18px); }
  .stage.contain.vertical video { top: var(--fit-top); height: calc(100% - var(--fit-top) - var(--fit-bottom)); }
  body.idle .stage.contain.vertical video { top: 0; height: 100%; }
}
.backdrop {
  position: absolute; inset: -8%; background-size: cover; background-position: center;
  filter: blur(56px) brightness(0.42) saturate(1.25); opacity: 0; transition: opacity 1s ease, background-image .6s ease;
}
.stage.contain .backdrop { opacity: 1; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), transparent 22%),
    linear-gradient(to top, rgba(0,0,0,.65), transparent 45%);
  transition: opacity 1.2s ease;
}

/* Paused: a soft, feathered play button in the middle of the frame */
/* The disc and triangle fade on their own: fading the button as a whole suspends the frosted blur
   until the fade ends, which makes it pop on instead of easing in. */
.bigplay {
  position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: transform .9s var(--spring);
}
.bigplay::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 28px rgba(255,255,255,.08), 0 12px 44px rgba(0,0,0,.28), var(--ca-box);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: opacity .6s ease, background .4s ease, border-color .4s ease;
}
.bigplay svg { position: relative; width: 54px; height: 54px; transition: opacity .6s ease; filter: var(--ca-icon) drop-shadow(0 2px 14px rgba(0,0,0,.35)); }
.bigplay:hover { transform: scale(1.06); }
.bigplay:hover::before { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.24); }
body.playing .bigplay, body.at-black .bigplay { transform: scale(.82); pointer-events: none; }
body.playing .bigplay::before, body.playing .bigplay svg, body.at-black .bigplay::before, body.at-black .bigplay svg { opacity: 0; }

/* Chrome that fades away during playback */
.chrome { transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
body.idle .chrome { opacity: 0; pointer-events: none; }
body.idle .bar { transform: translateY(10px); }
body.idle .scrim { opacity: .35; }
body.idle { cursor: none; }

/* Top */
.top {
  position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--edge) * 0.7) var(--edge);
}
.brand {
  justify-self: start; display: flex; align-items: baseline; gap: 16px; text-decoration: none;
  font-size: clamp(21px, 2.85vw, 45px); font-weight: 500; line-height: 1; letter-spacing: -0.06em; text-transform: uppercase;
  text-shadow: var(--ca-lg);
}
.brand span { color: var(--faint); font-weight: 400; font-size: 13px; letter-spacing: 0.04em; text-shadow: var(--ca); }
.formats { grid-column: 2; }
.top nav { grid-column: 3; justify-self: end; display: flex; gap: clamp(16px, 2.2vw, 30px); }
.top nav button { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); transition: color .3s ease; }
.top nav button:hover { color: var(--white); }

/* Aspect switch, shown when a spot was delivered in two sizes */
.formats {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--ca-box);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  animation: rise .8s var(--ease) both;
}
.formats[hidden] { display: none; }
.formats button { position: relative; z-index: 1; padding: 7px 18px; font-size: 12px; color: var(--soft); transition: color .5s var(--ease); }
.formats button[aria-checked="true"] { color: #000; text-shadow: none; }
.formats-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 8px; background: var(--white);
  box-shadow: var(--ca-box); transition: transform .6s var(--spring);
}
.formats.alt .formats-thumb { transform: translateX(100%); }

/* Caption */
.caption { position: absolute; left: var(--edge); bottom: calc(var(--bar-h) + var(--edge) * 0.7 + 22px); max-width: min(760px, 58vw); }
.caption h1 { margin: 10px 0 12px; font-weight: 500; font-size: clamp(30px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.06em; text-shadow: var(--ca-lg); }
.caption .desc { margin: 0 0 14px; max-width: 48ch; font-size: 15px; line-height: 1.45; color: var(--soft); }
.caption .desc:empty { display: none; }
.caption .meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.03em; }
.caption .meta button { font-size: 12px; text-transform: uppercase; color: var(--white); border-bottom: 1px solid var(--faint); padding-bottom: 2px; transition: border-color .3s ease; }
.caption .meta button:hover { border-color: var(--white); }
.caption.swap > * { animation: rise 1.1s var(--ease) both; }
.caption.swap h1 { animation-delay: .07s; }
.caption.swap .desc { animation-delay: .14s; }
.caption.swap .meta { animation-delay: .2s; }
.caption.hidden { visibility: hidden; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Stats pop up from the bottom, right side */
.stats {
  position: absolute; right: var(--edge); bottom: calc(var(--bar-h) + var(--edge) * 0.7 + 22px);
  display: flex; gap: 10px; align-items: flex-end; pointer-events: none;
}
.stat {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 8px 18px 8px 8px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--ca-box);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  opacity: 0; transform: translateY(36px) scale(.94); will-change: opacity, transform;
  transition: opacity .8s var(--ease), transform 1.1s var(--spring);
  transition-delay: calc(var(--i) * 140ms);
}
.stats.show .stat { opacity: 1; transform: none; }
.stat i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c); box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 50%, transparent); }
.stat svg { width: 17px; height: 17px; fill: #fff; filter: var(--ca-icon); }
.stat b { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.stat span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.stat:hover { border-color: rgba(255,255,255,.25); }
.stats.show .stat i { animation: pop 1s var(--spring) both; animation-delay: calc(var(--i) * 140ms + .3s); }
@keyframes pop { 0% { transform: scale(.5); } 100% { transform: scale(1); } }

/* Glass timeline bar with stacked tracks */
.bar {
  position: absolute; left: var(--edge); right: var(--edge); bottom: calc(var(--edge) * 0.7);
  height: var(--bar-h); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 0 16px 0 24px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--ca-box);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
}
.heads { position: relative; width: 132px; height: 100%; }
.tc { position: absolute; top: 4px; left: 0; font-size: 14px; color: var(--white); font-variant-numeric: tabular-nums; }
.head {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 12px;
  border-radius: 6px; background: rgba(255,255,255,.04); font-size: 11px; color: var(--soft);
}
.head b { font-weight: 500; width: 22px; color: var(--white); }
.head i {
  width: 13px; height: 13px; background: currentColor; opacity: .55;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.head .eye { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.4 1.5 12c1.2 2.6 5 7 10.5 7s9.3-4.4 10.5-7C21.3 9.4 17.5 5 12 5zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E"); }
.head .lock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }
.head .m { -webkit-mask: none; mask: none; background: none; width: 16px; height: 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; font-style: normal; font-size: 9px; display: grid; place-items: center; }
.head::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--c); }
.head.v3, .clip.v3, .row.v3 { --c: var(--v3); top: 28px; height: 28px; }
.head.v2, .clip.v2, .row.v2 { --c: var(--v2); top: 60px; height: 28px; }
.head.v1, .clip.v1, .row.v1 { --c: var(--v1); top: 92px; height: 48px; }
.head.a1, .clip.a1, .row.a1 { --c: var(--a1); top: 146px; height: 30px; }
.scroller {
  position: relative; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.scroller::-webkit-scrollbar { display: none; }
.bar, .scroller, .lane, .clip, .ruler { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.scroller { touch-action: pan-x; }
.scroller.dragging { cursor: grabbing; }
.lane { position: relative; height: 100%; }
.clip {
  position: absolute; border-radius: 6px; overflow: hidden; --c: var(--v1);
  background-color: color-mix(in srgb, var(--c) 30%, #111); background-repeat: repeat-x; background-size: auto 100%;
  box-shadow: inset 0 3px 0 var(--c);
  opacity: .5; transition: opacity .6s ease, box-shadow .6s ease;
}
.clip.a1 { background-size: 100% 100%; background-color: color-mix(in srgb, var(--a1) 22%, #111); box-shadow: none; opacity: .4; pointer-events: none; }
.clip:hover { opacity: .85; }
.clip .lbl {
  position: absolute; left: 6px; right: 6px; top: 3px; font-size: 10px; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; text-transform: uppercase; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0,0,0,.9), var(--ca); pointer-events: none;
}
.clip.v1 { background-position: 0 16px; background-size: auto calc(100% - 16px); }
.clip.v1::before { content: ""; position: absolute; inset: 0 0 auto; height: 16px; background: color-mix(in srgb, var(--c) 55%, #111); }
.clip.v1 .lbl { z-index: 1; }
.clip.v2::after, .clip.v3::after { content: ""; position: absolute; inset: 0 0 auto; height: 16px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.clip.v2 .lbl, .clip.v3 .lbl { z-index: 1; }
.row { position: absolute; left: 0; right: 0; border-radius: 6px; background: rgba(255,255,255,.035); pointer-events: none; }
.ruler { position: absolute; left: 0; right: 0; top: 4px; height: 18px; pointer-events: none; font-size: 10px; color: var(--faint); }
.ruler i { position: absolute; bottom: 0; width: 1px; height: 4px; background: rgba(255,255,255,.22); }
.ruler i.mid { height: 7px; background: rgba(255,255,255,.35); }
.ruler i.big { height: 10px; background: rgba(255,255,255,.5); }
.ruler span { position: absolute; top: 0; transform: translateX(4px); font-variant-numeric: tabular-nums; }
.ruler b { position: absolute; bottom: 1px; width: 9px; height: 9px; margin-left: -4px; transform: rotate(45deg); border-radius: 2px; background: var(--like); box-shadow: 0 0 10px var(--like); }
.clip.cur { opacity: 1; box-shadow: inset 0 3px 0 var(--c), 0 0 0 1px rgba(255,255,255,.75), var(--ca-box); }
.clip.a1.cur { opacity: .75; box-shadow: none; }
.clip.black { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.playhead {
  position: absolute; top: 4px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--white); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 14px rgba(255,255,255,.4);
}
.playhead::before { content: ""; position: absolute; top: -2px; left: -5px; width: 12px; height: 9px; border-radius: 3px; background: var(--white); }
.ctrls { display: flex; align-items: center; gap: 2px; }
.ctrls button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; color: var(--soft); transition: color .3s ease, background .3s ease; }
.ctrls button:hover { color: var(--white); background: rgba(255,255,255,.08); }
.ctrls svg { width: 26px; height: 26px; filter: var(--ca-icon); }
.vol { display: flex; align-items: center; }
.vol input {
  -webkit-appearance: none; appearance: none; width: 0; opacity: 0; height: 3px; border-radius: 3px; margin: 0;
  background: linear-gradient(to right, var(--white) var(--p, 35%), rgba(255,255,255,.2) var(--p, 35%));
  transition: width .5s var(--ease), opacity .4s ease, margin .5s var(--ease); cursor: pointer;
}
.vol:hover input, .vol:focus-within input { width: 88px; opacity: 1; margin: 0 8px 0 6px; }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 0; box-shadow: var(--ca-box); }
.vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 0; }
.i-pause, body.playing .i-play { display: none !important; }
body.playing .i-pause { display: block !important; }
#muteBtn .on, body.unmuted #muteBtn .off { display: none; }
body.unmuted #muteBtn .on { display: block; }

/* End slate */
.slate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #000; text-align: center; padding: 24px; animation: rise 1.4s var(--ease) both;
}
.slate[hidden] { display: none; }
.slate-line { margin: 0; font-weight: 500; font-size: clamp(30px, 4.6vw, 68px); letter-spacing: -0.06em; text-shadow: var(--ca-lg); }
.slate-mail { font-size: 15px; color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; }
.slate-mail:hover { color: var(--white); }

/* Dialogs */
dialog { color: var(--white); padding: 0; border: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
dialog[open] { animation: rise .8s var(--ease) both; }
.close { position: absolute; top: 14px; right: 18px; font-size: 28px; font-weight: 400; color: var(--soft); line-height: 1; z-index: 2; }
.close:hover { color: var(--white); }
.sheet {
  width: min(640px, calc(100vw - 32px)); padding: 40px; border-radius: 20px;
  background: rgba(20,20,22,.74); border: 1px solid var(--glass-line); box-shadow: var(--ca-box);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
}
.sheet h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: -0.05em; line-height: 1.1; margin: 16px 0 18px; text-shadow: var(--ca-lg); }
.sheet p { color: var(--soft); line-height: 1.65; font-size: 14px; }
.sheet .clients { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 2; }
.sheet .hint { font-size: 12px; color: var(--faint); }
.big-link { font-size: clamp(18px, 2.6vw, 26px); color: var(--white); text-decoration: none; border-bottom: 1px solid var(--faint); }
.sheet.wide { width: min(1240px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 20px; }
.grid button { display: block; width: 100%; text-align: left; }
.grid .thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; position: relative; }
.grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease), opacity .5s ease; opacity: .85; }
.grid button:hover img { transform: scale(1.04); opacity: 1; }
.grid .fmt { position: absolute; right: 8px; bottom: 8px; font-size: 10px; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.6); color: var(--soft); }
.grid .g-client { display: block; margin-top: 12px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.grid .g-title { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; letter-spacing: -0.04em; }
.grid .g-ig { display: grid; place-items: center; height: 100%; font-size: 12px; letter-spacing: 0.2em; color: var(--faint); background: linear-gradient(135deg, #1a1a1d, #0c0c0d); }
.grid-sub { grid-column: 1 / -1; margin-top: 16px; padding-top: 22px; border-top: 1px solid var(--glass-line); }

.player { background: #000; border-radius: 14px; overflow: hidden; width: fit-content; max-width: calc(100vw - 32px); }
.player-frame { --r: 1.7778; aspect-ratio: var(--r); width: min(1280px, calc(100vw - 32px), calc((100dvh - 110px) * var(--r))); background: #000; }
.player-frame video, .player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-frame.ig { aspect-ratio: auto; width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); overflow-y: auto; background: #0c0c0d; padding: 14px; }
.player-frame.ig .instagram-media { margin: 0 auto !important; min-width: 0 !important; }
.player-cap { margin: 0; padding: 14px 18px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.player-cap button { font-size: 12px; text-transform: inherit; color: var(--white); border-bottom: 1px solid var(--faint); }
.player .close { text-shadow: 0 1px 4px #000; }

/* Phones */
@media (max-width: 700px) {
  :root { --bar-h: 140px; }
  .heads { display: none; }
  .clip.v3, .row.v3 { top: 24px; height: 20px; }
  .clip.v2, .row.v2 { top: 48px; height: 20px; }
  .clip.v1, .row.v1 { top: 72px; height: 34px; }
  .clip.a1, .row.a1 { top: 110px; height: 20px; }
  .clip .lbl { font-size: 9px; }
  .top { grid-template-columns: 1fr auto; row-gap: 12px; }
  .brand { font-size: 20px; }
  .brand span { display: none; }
  .formats { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .top nav { grid-column: 2; gap: 14px; }
  .top nav button { font-size: 11px; }
  .caption { bottom: calc(var(--bar-h) + 70px); max-width: calc(100vw - 2 * var(--edge)); }
  .caption .desc { font-size: 13px; }
  .stats { left: var(--edge); right: auto; bottom: calc(var(--bar-h) + 22px); }
  .stat { padding: 6px 14px 6px 6px; gap: 9px; border-radius: 12px; }
  .stat i { width: 28px; height: 28px; border-radius: 8px; }
  .stat b { font-size: 16px; }
  .bar { gap: 8px; padding: 0 6px 0 12px; bottom: max(12px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) auto; }
  .vol input { display: none; }
  .ctrls button { width: 40px; height: 40px; }
  .bigplay { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .bigplay svg { width: 46px; height: 46px; }
  .sheet { padding: 28px 22px; }
}

/* Phones held upright: a wide spot sits under the header, so the title, stats and timeline sit below it, not on it. */
@media (orientation: portrait) and (max-width: 700px) {
  .stage { --phone-top: 64px; }
  .stage.contain:not(.vertical) video { top: var(--phone-top); height: calc(100vw * 9 / 16); }
  .stage.contain:not(.vertical) .bigplay { top: calc(var(--phone-top) + 100vw * 9 / 32); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- Landing ---------- */
.landing { position: fixed; inset: 0; z-index: 20; display: none; background: #000; overflow: hidden; }
body.intro .landing { display: block; }
body.intro .stage .chrome { opacity: 0; pointer-events: none; }
body.intro .bigplay, body.dissolving .bigplay { visibility: hidden; }
.montage { transition: opacity .5s ease; }
.montage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.5) saturate(1.1); }
.montage video.on { opacity: 1; }
.montage .montage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(1.1); }
.landing-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.15) 65%), linear-gradient(to top, rgba(0,0,0,.6), transparent 50%);
}
.landing-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: calc(var(--edge) * 0.8) var(--edge);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--soft);
}
.landing-tc { color: var(--white); font-variant-numeric: tabular-nums; }
.landing-body { position: absolute; left: var(--edge); right: var(--edge); bottom: clamp(48px, 11vh, 120px); }
.landing-name {
  margin: 14px 0 22px; font-weight: 500; font-size: clamp(64px, 13vw, 230px); line-height: .84; letter-spacing: -0.075em; text-transform: uppercase;
  text-shadow: none;
  animation: none;
}
.landing-name span { display: block; }
/* Big type carries extra space on its left edge; pull it back so the D lines up with the small text. */
.landing-name { margin-left: -0.08em; }
.landing-line { margin: 0 0 32px; max-width: 46ch; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.5; color: var(--soft); }
.enter {
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--ca-box);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; transition: background .4s ease, transform .6s var(--spring);
}
.enter:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.enter i { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--white); color: #000; }
.enter i svg { width: 22px; height: 22px; }
.enter kbd { font: inherit; font-size: 11px; color: var(--faint); border: 1px solid var(--glass-line); border-radius: 5px; padding: 2px 6px; margin-left: 4px; }
.landing-hint { margin: 14px 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.landing-body > *, .landing-top { animation: rise 1.2s var(--ease) both; }
.landing-name span:nth-child(1) { animation: rise 1.2s var(--ease) .1s both; }
.landing-name span:nth-child(2) { animation: rise 1.2s var(--ease) .18s both; }
.landing-line { animation-delay: .3s; }
.enter { animation-delay: .42s; }
.landing-hint { animation-delay: .5s; }

/* Pixel dissolve between the landing and the reel */
.dissolve { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.dissolve[hidden] { display: none; }
.scan {
  position: fixed; inset: 0; z-index: 41; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode: multiply;
}
body.dissolving .scan { opacity: .55; }
@keyframes flicker { 50% { opacity: .82; } }
body.dissolving .stage .chrome { opacity: 0; pointer-events: none; }
/* During the dissolve the landing's text floats above it and fades in place; the rest is drawn by the canvas. */
body.dissolving .landing { z-index: 45; background: transparent; pointer-events: none; }
body.dissolving .montage, body.dissolving .landing-scrim, body.dissolving .landing-name { visibility: hidden; }
body.dissolving .landing-body > :not(.landing-name), body.dissolving .landing-top { animation: fade-out .7s ease forwards; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* The reel's interface arriving after the dissolve */
body.entering .top { animation: dropIn 1.1s var(--ease) .15s both; }
body.entering .bar { animation: barIn 1.3s var(--ease) .3s both; }
body.entering .caption > * { animation: rise 1.1s var(--ease) both; }
body.entering .caption .eyebrow { animation-delay: .4s; }
body.entering .caption h1 { animation-delay: .45s; }
body.entering .caption .desc { animation-delay: .52s; }
body.entering .caption .meta { animation-delay: .58s; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* ---------- About page ---------- */
.sheet.page { width: min(1240px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: clamp(28px, 4vw, 56px); }
.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.about h2 { font-size: clamp(28px, 3.4vw, 50px); margin: 18px 0 24px; line-height: 1.04; }
.about-bio p { font-size: 16px; line-height: 1.7; color: var(--soft); margin: 0 0 16px; max-width: 60ch; }
.about-links { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.about-links a {
  display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-size: 13px; text-transform: uppercase;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--ca-box); transition: background .3s ease;
}
.about-links a:hover { background: rgba(255,255,255,.1); }
.about-side { display: flex; flex-direction: column; gap: 34px; padding-top: 6px; }
.about-side section .eyebrow { margin-bottom: 14px; }
.edl-tag { margin-left: 8px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--glass-line); font-size: 10px; color: var(--faint); }
.edl { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.edl li { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--glass-line); }
.edl li:last-child { border-bottom: 1px solid var(--glass-line); }
.edl .n { color: var(--faint); }
.edl .when { color: var(--soft); font-variant-numeric: tabular-nums; }
.edl .what small { display: block; color: var(--soft); margin-top: 3px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 7px 11px; border-radius: 9px; border: 1px solid var(--glass-line); background: rgba(255,255,255,.03); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
#aboutExpWrap[hidden], #aboutEduWrap[hidden] { display: none; }

@media (max-width: 800px) {
  .about { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .enter kbd { display: none; }
}