/* ══ 145 PARK ════════════════════════════════════════════════════════════
   The house look, moved out of the bat apps and onto a public page.
     · #000 ground, ONE accent — house yellow #ffd400
     · hierarchy in white at opacity, never a grey hex
     · ALL CAPS micro labels, .18–.30em tracking. Prose stays sentence case:
       this page has real paragraphs and caps would make them unreadable.
     · corners 4px. Never pills.
     · faint yellow 44px grid + a soft radial glow top-right, both fixed
     · type: Proxima Nova if the machine has it (Dan's does), otherwise
       Avenir Next / Segoe UI — a geometric humanist that reads close.
       No web font is downloaded. No licence to worry about.
   Motion is transform + opacity only, fires once, and is off entirely under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --y:#ffd400;
  --y-dim:rgba(255,212,0,.42);
  --y-faint:rgba(255,212,0,.13);
  --bg:#000;
  --t1:#fff;
  --t2:rgba(255,255,255,.86);
  --t3:rgba(255,255,255,.70);
  --t4:rgba(255,255,255,.55);
  --t5:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --surf:rgba(255,255,255,.028);
  --surf2:rgba(255,255,255,.05);
  --ui:"Proxima Nova","Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,
       "Helvetica Neue",Arial,sans-serif;
  --r:4px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  /* the fixed header must not sit on top of an anchored section */
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--t3);
  font:400 16px/1.62 var(--ui);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100%;
}

/* ── the ground: house grid + corner glow. both fixed, both inert ──────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,212,0,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,212,0,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(130% 78% at 50% 0%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(130% 78% at 50% 0%,#000 8%,transparent 72%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 520px at 94% -16%,rgba(255,212,0,.10),transparent 62%),
    radial-gradient(620px 460px at -14% 38%,rgba(120,150,210,.045),transparent 62%);
}

main,.hdr,.foot{position:relative;z-index:1}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

img,video{max-width:100%;height:auto;display:block}

::selection{background:var(--y);color:#000}

a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--y);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--y);color:#000;padding:10px 18px;border-radius:0 0 var(--r) 0;
  font:700 11px/1 var(--ui);letter-spacing:.20em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ── micro label ───────────────────────────────────────────────────────── */
.eyebrow{
  color:var(--y);
  font:700 10px/1 var(--ui);
  letter-spacing:.26em;
  text-transform:uppercase;
}

/* ── hairline that draws in ────────────────────────────────────────────── */
.rule{
  display:block;height:1px;width:100%;
  background:linear-gradient(90deg,var(--y-dim),var(--line) 34%,transparent);
  transform-origin:0 50%;
}

/* ══ HEADER ═════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
}
.hdr-in{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:height .38s var(--ease);
}
.hdr.tight .hdr-in{height:62px}
.hdr-rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);
  opacity:0;transition:opacity .38s var(--ease);
}
.hdr.tight .hdr-rule{opacity:1}

.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:10px;height:10px;flex:0 0 auto;
  background:var(--y);
  box-shadow:0 0 0 4px rgba(255,212,0,.12);
  transition:transform .38s var(--ease);
}
.hdr.tight .brand-mark{transform:scale(.78)}
.brand-txt{
  color:var(--t1);
  font:700 14px/1 var(--ui);
  letter-spacing:.22em;text-transform:uppercase;
  transition:font-size .38s var(--ease),letter-spacing .38s var(--ease);
}
.hdr.tight .brand-txt{font-size:12.5px;letter-spacing:.19em}

.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav a{
  color:var(--t4);
  font:600 10.5px/1 var(--ui);
  letter-spacing:.18em;text-transform:uppercase;
  padding:8px 0;position:relative;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--y);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--t1)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a.nav-cta{
  color:var(--y);
  border:1px solid rgba(255,212,0,.32);
  border-radius:var(--r);
  padding:9px 15px;
}
.nav a.nav-cta::after{display:none}
.nav a.nav-cta:hover,.nav a.nav-cta:focus-visible{
  background:rgba(255,212,0,.09);border-color:var(--y);color:var(--y);
}

/* ══ HERO ═══════════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding:150px 0 90px;
}
.hero-in{display:flex;flex-direction:column;align-items:flex-start}

.hero-h{
  margin:22px 0 26px;
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:clamp(12px,1.8vw,26px);
  line-height:.88;
  color:var(--t1);
}
.hero-num{
  font-size:clamp(76px,15.5vw,206px);
  font-weight:800;
  letter-spacing:-.045em;
}
.hero-word{
  font-size:clamp(34px,6.4vw,86px);
  font-weight:200;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--t2);
}

.hero .rule{max-width:560px;margin-bottom:28px}

.hero-line{
  max-width:60ch;
  color:var(--t2);
  font-size:clamp(17px,1.9vw,23px);
  line-height:1.5;
  font-weight:300;
}
.hero-sub{
  margin-top:16px;max-width:60ch;
  color:var(--t4);
  font-size:15px;
}
.hero-sub strong{color:var(--t2);font-weight:600}

/* abstract mark — a timecode ruler. no footage, no stock. */
.ruler{
  position:relative;width:min(560px,100%);height:34px;margin-top:52px;
}
.ruler-line{
  position:absolute;left:0;right:0;top:16px;height:1px;background:var(--line2);
}
.ruler-ticks{
  position:absolute;left:0;right:0;top:6px;height:22px;
  background-image:linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:28px 100%;
  mask-image:linear-gradient(90deg,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);
}
.ruler-play{
  position:absolute;left:0;top:0;width:2px;height:34px;background:var(--y);
  box-shadow:0 0 14px rgba(255,212,0,.55);
  transform:translateX(0);
  animation:play 9s var(--ease) infinite alternate;
}
@keyframes play{
  0%,6%{transform:translateX(0)}
  94%,100%{transform:translateX(min(330px,58vw))}
}

.cue{
  margin-top:46px;
  display:inline-flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--t5);
  font:600 10px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase;
  transition:color .22s var(--ease);
  padding:4px 6px;
}
.cue:hover,.cue:focus-visible{color:var(--y)}
.cue-arrow{
  position:relative;
  width:1px;height:40px;
  background:linear-gradient(var(--line2),var(--y-dim));
  animation:cue 2.6s var(--ease) infinite;
}
.cue-arrow::after{
  content:"";position:absolute;left:-4px;bottom:0;
  width:9px;height:9px;
  border-bottom:1px solid var(--y-dim);border-right:1px solid var(--y-dim);
  transform:rotate(45deg) translate(-1px,-1px);
}
.cue:hover .cue-arrow::after,.cue:focus-visible .cue-arrow::after{
  border-color:var(--y);
}
@keyframes cue{
  0%,100%{transform:translateY(-5px);opacity:.55}
  50%    {transform:translateY(3px); opacity:1}
}

/* ══ SECTIONS ═══════════════════════════════════════════════════════════ */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-head{max-width:820px;margin-bottom:clamp(40px,5vw,66px)}
.sec-h{
  margin:18px 0 22px;
  color:var(--t1);
  font-size:clamp(27px,3.9vw,50px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.018em;
}
.sec-h-lg{font-size:clamp(30px,5.2vw,66px)}
.sec-b{margin-top:22px;max-width:66ch;color:var(--t3);font-size:16.5px}

/* a closing paragraph that sits UNDER a grid, not inside a .sec-head */
.sec-note{
  margin-top:clamp(30px,3.6vw,48px);
  max-width:72ch;
  color:var(--t3);
  font-size:16.5px;
  line-height:1.68;
}
.sec-note strong{color:var(--t1);font-weight:600}

/* ── grids ─────────────────────────────────────────────────────────────── */
.grid{list-style:none;display:grid;gap:1px;background:var(--line)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.disciplines,.stats{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}

.card{
  background:var(--bg);
  padding:clamp(24px,2.6vw,36px);
  position:relative;
  transition:background .3s var(--ease);
}
.card:hover{background:var(--surf)}
.card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--y);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .34s var(--ease);
}
.card:hover::after{transform:scaleY(1)}
.card-n{
  color:var(--y-dim);
  font:700 10px/1 var(--ui);letter-spacing:.26em;
  margin-bottom:18px;
}
.card-h{
  color:var(--t1);
  font:500 12px/1.35 var(--ui);
  letter-spacing:.20em;text-transform:uppercase;
  margin-bottom:12px;
}
.card-b{color:var(--t4);font-size:15px;line-height:1.6}
.card-quiet .card-h{color:var(--t3)}

/* ── the facts list ────────────────────────────────────────────────────── */
.facts{list-style:none;border-top:1px solid var(--line);margin-bottom:64px}
.fact{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:24px;
  padding:26px 4px;
  border-bottom:1px solid var(--line);
}
.fact-k{
  color:var(--y);
  font:700 10px/1.6 var(--ui);letter-spacing:.22em;text-transform:uppercase;
}
.fact-v{color:var(--t3);font-size:16px;line-height:1.6}

/* ── slots ─────────────────────────────────────────────────────────────── */
.slots{margin-bottom:72px}
.slot-lead{
  color:var(--t5);
  font:600 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
  margin-bottom:18px;
}
.slot{margin-bottom:16px}
/* a placeholder should not shout — cap it well short of the column */
.slot-reel{max-width:900px}
.slot-row{max-width:900px}
.slot-box{
  border:1px dashed var(--line2);
  border-radius:var(--r);
  background:var(--surf);
  aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:24px;
  position:relative;
}
.slot-box::before,.slot-box::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--y-dim);
}
.slot-box::before{left:10px;top:10px;border-right:0;border-bottom:0}
.slot-box::after{right:10px;bottom:10px;border-left:0;border-top:0}
.slot-still{aspect-ratio:4/3}
.slot-tag{
  color:var(--y);
  font:700 10px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;
}
.slot-note{color:var(--t5);font-size:13.5px;max-width:46ch;line-height:1.55}
.slot-note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--t3);
}
.slot-cap{
  margin-top:9px;color:var(--t5);
  font:600 9.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;
}
.slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ── the draft block ───────────────────────────────────────────────────── */
.draft{
  border:1px dashed rgba(255,212,0,.34);
  border-radius:var(--r);
  background:rgba(255,212,0,.028);
  padding:clamp(24px,3vw,40px);
}
.draft-flag{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--y);
  font:700 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
  margin-bottom:16px;
}
.draft-dot{
  width:7px;height:7px;background:var(--y);flex:0 0 auto;
  animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.draft-h{
  color:var(--t1);
  font:400 21px/1.3 var(--ui);
  margin-bottom:12px;
}
.draft-b{color:var(--t4);font-size:14.5px;max-width:74ch;margin-bottom:28px}
.draft-b code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--t3);
}

.wall{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.wall-i{
  display:inline-flex;align-items:baseline;gap:11px;
  border:1px solid var(--line);
  border-left:2px solid var(--c,var(--line2));
  border-radius:var(--r);
  padding:11px 16px;
  background:var(--bg);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.wall-i:hover{background:var(--surf2)}
.wall-n{
  color:var(--c,var(--t2));
  /* the darker house colours (navy, maroon) die on a black ground — lift
     them just enough to read without breaking Dan's palette */
  filter:brightness(1.5) saturate(1.05);
  font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
}
.wall-c{
  color:var(--t5);
  font:500 11px/1 var(--ui);letter-spacing:.06em;
}

/* ══ NUMBERS ════════════════════════════════════════════════════════════ */
.stat{
  background:var(--bg);
  padding:clamp(26px,3vw,44px) clamp(20px,2.4vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.stat-v{
  color:var(--y);
  font-size:clamp(40px,5.2vw,68px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-k{
  color:var(--t4);
  font:600 10px/1.6 var(--ui);letter-spacing:.20em;text-transform:uppercase;
  max-width:22ch;
}
.nums-foot{
  margin-top:26px;color:var(--t5);font-size:14px;
}

/* ══ WHO ════════════════════════════════════════════════════════════════ */
.who{display:grid;grid-template-columns:1fr 360px;gap:clamp(30px,4vw,64px);align-items:start}
.who-role{
  color:var(--y);
  font:700 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
  margin-bottom:20px;
}
.who-b{color:var(--t3);font-size:16.5px;max-width:60ch;margin-bottom:18px}

.btn{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:14px 22px;
  color:var(--t2);
  font:600 10.5px/1 var(--ui);letter-spacing:.20em;text-transform:uppercase;
  transition:border-color .26s var(--ease),color .26s var(--ease),
             background .26s var(--ease);
}
.btn:hover,.btn:focus-visible{
  border-color:var(--y);color:var(--y);background:rgba(255,212,0,.07);
}
.btn-arrow{
  width:18px;height:1px;background:currentColor;position:relative;
  transition:transform .26s var(--ease);
}
.btn-arrow::after{
  content:"";position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid currentColor;
  border-right:1px solid currentColor;transform:rotate(45deg);
}
.btn:hover .btn-arrow{transform:translateX(5px)}

.who-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surf);
  padding:clamp(22px,2.4vw,32px);
}
.who-card .eyebrow{margin-bottom:20px;display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;font-size:14px}
.kv dt{
  color:var(--t5);
  font:600 9.5px/1.7 var(--ui);letter-spacing:.18em;text-transform:uppercase;
}
.kv dd{color:var(--t2)}

/* ══ CONTACT ════════════════════════════════════════════════════════════ */
.sec-contact{padding-bottom:clamp(70px,9vw,120px)}
.contact{max-width:760px}
.tel{
  display:inline-flex;flex-direction:column;gap:12px;
  border-left:2px solid var(--y);
  padding:6px 0 6px 22px;
  transition:padding-left .26s var(--ease);
}
.tel:hover,.tel:focus-visible{padding-left:28px}
.tel-k{
  color:var(--y);
  font:700 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;
}
.tel-v{
  color:var(--t1);
  font-size:clamp(28px,4.2vw,52px);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1;
}
.contact-b{margin-top:30px;color:var(--t4);font-size:16px;max-width:58ch}

/* ══ FOOTER ═════════════════════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line);padding:34px 0}
.foot-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.foot-c,.foot-nav a{
  color:var(--t5);
  font:600 10px/1.8 var(--ui);letter-spacing:.18em;text-transform:uppercase;
}
.foot-nav{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.foot-nav a{transition:color .22s var(--ease)}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--y)}

/* ══ REVEALS ════════════════════════════════════════════════════════════
   Everything with [data-r] starts down + transparent and comes up once.
   The .ready class is set by main.js — with JS off, nothing is hidden.
   ═══════════════════════════════════════════════════════════════════════ */
.js .r[data-r]{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  transition-delay:calc(var(--d,0) * 65ms);
  will-change:opacity,transform;
}
.js .rule.r[data-r]{transform:scaleX(0);opacity:1}
.js .r.in[data-r]{opacity:1;transform:none;will-change:auto}
.js .rule.r.in[data-r]{transform:scaleX(1)}

/* the client wall lights in its own colour as it arrives */
.js .wall-i.r[data-r]{border-left-color:var(--line)}
.js .wall-i.r.in[data-r]{
  border-left-color:var(--c);
  transition:opacity .62s var(--ease),transform .62s var(--ease),
             border-left-color .7s var(--ease) .18s;
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .who{grid-template-columns:1fr}
  .who-card{max-width:460px}
}
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  html{scroll-padding-top:78px}
  .hdr-in{height:70px}
  .hdr.tight .hdr-in{height:58px}
  .nav{gap:14px}
  .nav a{font-size:9.5px;letter-spacing:.14em}
  .nav a.nav-cta{padding:8px 11px}
  .fact{grid-template-columns:1fr;gap:9px}
  .slot-row{grid-template-columns:1fr}
  .slot-still{aspect-ratio:16/9}
}
@media (max-width:620px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .hero-h{gap:12px}
  .nav a:not(.nav-cta){display:none}   /* keep one target on a phone */
  .foot-in{flex-direction:column;align-items:flex-start}
  .stat-k{max-width:none}
}

/* ══ REDUCED MOTION ═════════════════════════════════════════════════════
   Nothing moves. Nothing is hidden. Counters print their final value.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .r[data-r],
  .js .rule.r[data-r],
  .js .wall-i.r[data-r]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    border-left-color:var(--c)!important;
  }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .ruler-play{animation:none;transform:translateX(0)}
  .cue-arrow{animation:none;transform:none;opacity:.8}
  .draft-dot{animation:none}
}


/* ── the real wordmark ────────────────────────────────────────────────────
   Dan, 2026-09-19: "let's use the actual vector logo for 145 park". It is
   inlined rather than an <img> so its own Illustrator layers (each character,
   the pause bar, the play triangle) can be moved. currentColor carries the
   white, so the mark inherits whatever its container says.
   The play triangle and the pause bar are drawn INTO the letterforms — the
   animation was already in the logo, it just needed running. */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.logo { display:block; color:#fff; width:100%; height:auto; }
.logo-hero { width:min(820px, 74vw); max-width:100%; }
.hero-h { line-height:0; display:block; }
@media (max-width: 820px) { .logo-hero { width:88vw; } }
.logo-hdr { width:auto; height:22px; }
.brand { display:flex; align-items:center; gap:0; }

/* Each character arrives in order, the play triangle last.
   Dan, 2026-09-19: "make the animation 2x slower... i'm seeing some
   staircasing on the angles." The stepping was the animation, not the art:
   a transform on an SVG group gives it its own composited layer, which Chrome
   rasterises at the group's own size and then scales — so every diagonal in
   the 4, the 5, the A and the K came back hard-edged. OPACITY ONLY here, no
   transform on anything inside the mark, and the vector stays vector.
   Everything is at double the old duration. */
.logo-hero #lg-1, .logo-hero #lg-4, .logo-hero #lg-5, .logo-hero #lg-bar,
.logo-hero #lg-p, .logo-hero #lg-a, .logo-hero #lg-r, .logo-hero #lg-k,
.logo-hero #lg-play {
  opacity:0;
  animation:logo-in 1.24s cubic-bezier(.22,.9,.26,1) forwards;
}
.logo-hero #lg-1    { animation-delay:.12s }
.logo-hero #lg-4    { animation-delay:.24s }
.logo-hero #lg-5    { animation-delay:.36s }
.logo-hero #lg-p    { animation-delay:.48s }
.logo-hero #lg-a    { animation-delay:.60s }
.logo-hero #lg-r    { animation-delay:.72s }
.logo-hero #lg-k    { animation-delay:.84s }
.logo-hero #lg-bar  { animation-delay:.60s }
.logo-hero #lg-play { animation-delay:1.24s; animation-duration:1.5s; }
@keyframes logo-in { to { opacity:1 } }

/* the vector itself: no rasterised shortcuts on the diagonals */
.logo svg, .logo { shape-rendering:geometricPrecision; }

@media (prefers-reduced-motion: reduce) {
  .logo-hero #lg-1, .logo-hero #lg-4, .logo-hero #lg-5, .logo-hero #lg-bar,
  .logo-hero #lg-p, .logo-hero #lg-a, .logo-hero #lg-r, .logo-hero #lg-k,
  .logo-hero #lg-play { opacity:1; transform:none; animation:none; }
}


/* ── the logo film ───────────────────────────────────────────────────────
   Dan, 2026-09-19: "show me with the halation." His own logo animation — the
   WE ARE HUMAN halation pass — plays once in the hero and holds on its last
   frame. The inline SVG sits underneath as the poster-weight fallback and as
   the reduced-motion state, so the mark is never missing.
   The film is 374 KB at 1920 and 158 KB at 1280; it is muted, plays inline,
   and never loops — a logo that keeps replaying reads as a screensaver. */
.mark { position:relative; width:min(820px, 74vw); max-width:100%; }
.mark-film { display:block; width:100%; height:auto; }
.mark-svg  { display:none; }
.mark-svg .logo { width:100%; }
.no-film .mark-film { display:none; }
.no-film .mark-svg  { display:block; }
@media (max-width: 820px) { .mark { width:88vw; } }
@media (prefers-reduced-motion: reduce) {
  .mark-film { display:none; }
  .mark-svg  { display:block; }
}


/* ── the opening, and the house rules that follow from it ─────────────────
   Dan, 2026-09-19: "make it large and centered... don't need the logo on the
   top left or NEW YORK CITY... the navigation bar looks too corporate up
   there, better to see the logo animation first."
   So the page opens on the film alone: no chrome, nothing in the corners. The
   header is not removed — it arrives once the hero is behind you, which is
   when navigation is useful rather than corporate. */
.hdr { transition:transform .45s cubic-bezier(.22,.9,.26,1), opacity .35s ease; }
.hdr.away { transform:translateY(-104%); opacity:0; pointer-events:none; }

.hero { min-height:100svh; display:flex; align-items:center; }
.hero-in.centred { align-items:center; text-align:center; }
.hero-in.centred .mark { width:min(1100px, 86vw); margin:0 auto; }
.hero-in.centred .rule { margin-left:auto; margin-right:auto; }
.hero-in.centred .hero-line { max-width:none; font-size:clamp(19px,2vw,26px); }
.hero-in.centred .hero-sub { margin-left:auto; margin-right:auto; }
.hero-in.centred .ruler { margin-left:auto; margin-right:auto; }
.hero-in.centred .scroll-cue, .hero-in.centred .cue { margin-left:auto; margin-right:auto; }

/* the same principle down the page: the headings large, the measure centred,
   the prose still a readable width rather than a banner of text */
.sec-h, .sec-lead, .sec-note { text-align:center; }
.sec-h { font-size:clamp(30px,4.2vw,58px); }
.sec-lead, .sec-note { margin-left:auto; margin-right:auto; max-width:62ch; }
.sec-label { text-align:center; }
.sec-label::after, .sec-label::before { margin-left:auto; margin-right:auto; }

@media (prefers-reduced-motion: reduce) {
  .hdr { transition:none; }
}


/* the whole opening has to land inside one screen: the film is capped by the
   viewport's height, not just its width, so nothing important sits below the
   fold on a laptop. 16:9, so height drives width. */
.hero-in.centred .mark {
  width:min(1100px, 86vw, calc((100svh - 300px) * 16 / 9));
}
.hero { padding-top:0; }


/* The film is white-on-black with a bloom, so SCREEN blending drops its black
   into the page and leaves only the light — the mark floats on the ground and
   the faint grid shows through it, instead of sitting in a visible box. */
.mark-film { mix-blend-mode:screen; }


/* ── the old way / the new way / the in-between ──────────────────────────
   Three columns that carry the argument. The first two are stated plainly and
   sit back; the third is where the company is, so it is the only one that
   lights. On a phone they stack and the yellow one still reads last. */
.ways-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
             gap:clamp(18px,2.4vw,34px); margin-top:clamp(30px,4vw,56px); }
.way { text-align:left; border:1px solid var(--line); border-radius:4px;
       padding:clamp(22px,2.4vw,34px); background:rgba(255,255,255,.012);
       display:flex; flex-direction:column; gap:12px; }
.way-k { font:600 10px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase;
         color:var(--t5); }
.way-h { font:600 clamp(19px,1.7vw,24px)/1.22 var(--ui); color:var(--t2);
         letter-spacing:.01em; }
.way-b { font:400 clamp(14px,1.05vw,16px)/1.65 var(--ui); color:var(--t4);
         text-transform:none; letter-spacing:.005em; }
.way:nth-child(1), .way:nth-child(2) { opacity:.72; }
.way:nth-child(1) .way-h, .way:nth-child(2) .way-h { color:var(--t3); }

/* the one we are */
.way-us { border-color:rgba(255,212,0,.42); background:rgba(255,212,0,.035);
          box-shadow:0 0 0 1px rgba(255,212,0,.06), 0 24px 60px rgba(0,0,0,.45); }
.way-us .way-k { color:var(--y); }
.way-us .way-h { color:#fff; }
.way-us .way-b { color:var(--t3); }
.way-sig { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,212,0,.22);
           font:600 11px/1.5 var(--ui); letter-spacing:.14em; text-transform:uppercase;
           color:var(--y); }

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


/* Dan, 2026-09-19: "can you make the opening any bigger?"
   Two changes. The film is now CROPPED to the mark itself (the mov carried
   ~30% black around it, so a third of every pixel on screen was margin), which
   is 2.76:1 rather than 16:9 — so the height cap lets it run much wider. And
   the caps themselves are looser: it fills the screen, with room for the line
   underneath and nothing below the fold. */
.hero-in.centred .mark {
  width:min(1500px, 94vw, calc((100svh - 290px) * 2.76));
}
.hero-in.centred .hero-line { font-size:clamp(20px,2.1vw,28px); max-width:30ch; margin-inline:auto; }
.hero .rule { margin-top:clamp(26px,3vw,44px); }


/* The crop is tight, so the film's own edge became a visible rectangle on a
   page whose black is not quite the film's black. Feather the last few per
   cent of every edge and there is no rectangle to see — belt and braces with
   the screen blend, and it survives any browser that ignores blending. */
.mark-film {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite: intersect;
}


/* Dan, 2026-09-19: "keep this but let me see it even bigger."
   The mark now breaks out of the page's side padding and runs edge to edge.
   Beyond this the only limit is the window itself. */
.hero-in.centred .mark {
  width:min(1800px, 100vw, calc((100svh - 170px) * 2.76));
  margin-inline:calc(-1 * var(--pad));
  max-width:none;
}
.hero .wrap { overflow:visible; }
.hero-in.centred .rule { margin-top:clamp(20px,2.4vw,34px); }


/* ── the opening, on a clock ──────────────────────────────────────────────
   Dan, 2026-09-19: "Bring the glowing line up about 2 seconds and the yellow
   arrow that encourages someone to scroll after that."
   The film runs ~5s. The hairline draws at 2s, while the mark is still
   settling; the line of copy and the credit follow it; the arrow arrives last,
   once there is nothing left to watch. These override the generic 65ms
   stagger for the hero only — the rest of the page keeps its own rhythm. */
.js .hero .rule.r[data-r]      { transition-duration:1.1s; transition-delay:2s; }
.js .hero .hero-line.r[data-r] { transition-delay:2.45s; }
.js .hero .hero-sub.r[data-r]  { transition-delay:2.9s; }
.js .hero .cue.r[data-r]       { transition-delay:3.6s; transition-duration:.9s; }

/* the arrow keeps a slow nudge once it is there, so the eye is invited down
   without anything blinking */
.hero .cue.in .cue-arrow { animation:cue-nudge 2.6s ease-in-out 4.6s infinite; }
@keyframes cue-nudge {
  0%,72%,100% { transform:translateY(0) }
  84%         { transform:translateY(5px) }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .rule.r[data-r], .js .hero .hero-line.r[data-r],
  .js .hero .hero-sub.r[data-r], .js .hero .cue.r[data-r] { transition-delay:0s; }
  .hero .cue.in .cue-arrow { animation:none; }
}


/* The arrow that invites the scroll cannot itself be below the fold — and it
   was, because the mark's height cap only reserved 170px for everything under
   it. The line, the copy, the credit and the arrow need about 330. On a
   1440-wide window the WIDTH cap still binds, so the mark stays edge to edge;
   on a tall window it simply grows less. */
.hero-in.centred .mark {
  width:min(1800px, 100vw, calc((100svh - 330px) * 2.76));
}


/* Measured at 1440x900: mark 522, then 483px of stack under it — 90 of that is
   the hero's own bottom padding and 126 is three lines of copy squeezed into
   30ch. Two lines and tighter gaps bring the whole opening inside one screen
   with the mark still edge to edge, which is what makes the arrow do its job. */
.hero { padding-bottom:clamp(24px,3vh,40px); }
.hero-in.centred .hero-line { max-width:52ch; font-size:clamp(18px,1.55vw,22px); }
.hero .rule { margin-top:clamp(16px,2vh,26px); margin-bottom:clamp(14px,1.8vh,22px); }
.hero-in.centred .hero-sub { margin-top:10px; }
.hero .cue { margin-top:clamp(18px,2.6vh,34px); }


/* ── the three lines ──────────────────────────────────────────────────────
   Dan's own words, 2026-09-19, and the spine of the whole site:
     Reverence for the old way. Passion for the new way.
     Navigating the space between.
   Set as a stanza, not a paragraph — one line each, centred, the third in the
   house yellow because that is where the company actually stands. They arrive
   one after another after the hairline draws. */
.hero-in.centred .hero-line { max-width:none; display:flex; flex-direction:column;
                              gap:clamp(4px,.7vh,10px); text-transform:uppercase; }
.hl-l { font:600 clamp(15px,1.5vw,21px)/1.25 var(--ui); letter-spacing:.2em;
        color:var(--t3); }
.hl-us { color:var(--y); }

/* each line lands in turn, after the line draws and before the arrow */
.js .hero .hero-line.r[data-r] .hl-l { opacity:0; transition:opacity .8s var(--ease); }
.js .hero .hero-line.r.in[data-r] .hl-l { opacity:1; }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-child(1) { transition-delay:2.45s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-child(2) { transition-delay:2.85s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-child(3) { transition-delay:3.25s }
.js .hero .hero-sub.r[data-r] { transition-delay:3.75s; }
.js .hero .cue.r[data-r] { transition-delay:4.35s; }
.hero .cue.in .cue-arrow { animation-delay:5.4s; }
.hero .cue-txt { letter-spacing:.24em; }

@media (prefers-reduced-motion: reduce) {
  .js .hero .hero-line.r[data-r] .hl-l { opacity:1; transition:none; }
}


/* ── the stanza, and the space between ───────────────────────────────────
   Dan, 2026-09-19: "less padding before the glowing line... make the line
   wider and the glow work its way over a longer distance. Make reverence and
   passion bolder like WE ARE and the rest lighter like HUMAN. Then figure out
   how to make the navigating line a hair different... maybe put a glowing line
   on top and bottom and remove it from before reverence — play on words,
   that's the space between."
   The weight split is the logo's own: the first word heavy like WE ARE, the
   rest light like HUMAN. The two lines bracket the third, so the words are
   in the space they name. */
.hero-in.centred .hero-line { margin-top:clamp(10px,1.2vh,18px); gap:clamp(6px,.9vh,12px); }
.hl-l { font-size:clamp(15px,1.5vw,21px); line-height:1.3; letter-spacing:.2em; }
.hl-l b      { font-weight:800; color:var(--t1); letter-spacing:.18em; }
.hl-l span   { font-weight:200; color:var(--t3); letter-spacing:.22em; }
.hl-us b     { color:var(--y); }
.hl-us span  { color:rgba(255,212,0,.78); }

/* the rules: wider than before, and the glow takes its time crossing them */
.glow { display:block; position:relative; width:min(1180px, 92vw); height:1px;
        margin:clamp(12px,1.6vh,22px) auto; overflow:hidden;
        background:linear-gradient(90deg, transparent, rgba(255,212,0,.26) 22%,
                   rgba(255,212,0,.26) 78%, transparent);
        transform:scaleX(0); transform-origin:50% 50%;
        transition:transform 1.5s cubic-bezier(.22,.9,.26,1); }
.glow i { position:absolute; inset:-2px 0; display:block;
          background:radial-gradient(closest-side at 50% 50%,
                     rgba(255,246,190,.95), rgba(255,212,0,.55) 45%, rgba(255,212,0,0) 100%);
          background-size:16% 400%; background-repeat:no-repeat;
          background-position:-18% 50%; opacity:0; }
.js .hero-line.in .glow { transform:scaleX(1); }
.js .hero-line.in .glow i { animation:glow-cross 3.2s cubic-bezier(.35,0,.25,1) forwards; }
@keyframes glow-cross {
  0%   { background-position:-18% 50%; opacity:0 }
  12%  { opacity:1 }
  88%  { opacity:1 }
  100% { background-position:118% 50%; opacity:0 }
}

/* the sequence, with the words first and the space between arriving last */
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:1.9s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:2.3s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:3.3s }
.js .hero-line.in .g-top   { transition-delay:2.8s }
.js .hero-line.in .g-top i { animation-delay:2.8s }
.js .hero-line.in .g-bot   { transition-delay:3.7s }
.js .hero-line.in .g-bot i { animation-delay:3.7s }
.js .hero .hero-sub.r[data-r] { transition-delay:4.5s; }
.js .hero .cue.r[data-r] { transition-delay:5.1s; }
.hero .cue.in .cue-arrow { animation-delay:6.2s; }

@media (prefers-reduced-motion: reduce) {
  .glow { transform:scaleX(1); transition:none; }
  .glow i { display:none; }
}


/* The stanza was sitting 42px right of centre: it is a flex item whose width
   comes from the 1180px rules, and the column was not centring it. Pin it. */
.hero-in.centred .hero-line { width:min(1180px, 92vw); align-self:center;
                              margin-left:auto; margin-right:auto; }
.hero-in.centred .glow { width:100%; }
/* and nine pixels over one screen: take them off the gaps, not the mark */
.hero { padding-bottom:clamp(16px,2.2vh,30px); }
.hero-in.centred .hero-sub { margin-top:8px; }


/* The stanza is wider than .wrap's content box (1096 at 1440), so it was
   starting at the left edge and overflowing right — 42px off centre. Let it
   break out of the wrap's padding on BOTH sides, then centre the rules inside
   it. Measured after: every part of the hero centres on 720. */
.hero-in.centred .hero-line {
  width:auto; align-self:stretch;
  margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));
}
.hero-in.centred .glow { width:min(1180px, 92vw); margin-left:auto; margin-right:auto; }
.hero-in.centred .hl-l { width:100%; }


/* ── halation on the type, grain over the whole opening ──────────────────
   Dan, 2026-09-19: "the animation needs to be slower and sleeker, as does the
   glowing line... any way to add halation or glow/film grain to the text you
   put in, to match the feel of the site. right now the difference is too
   stark."
   The film is warm white with a bloom and a little grain; the type was pure
   #fff with hard edges, so it read as a different medium. Now the type carries
   the same warm cast and the same halo, and one grain layer sits over the
   whole hero — film and type together — so they share a surface. */
.hl-l b {
  color:#fdf6e6;
  text-shadow:0 0 1px rgba(255,246,220,.55),
              0 0 14px rgba(255,238,198,.42),
              0 0 38px rgba(255,206,110,.20);
}
.hl-l span {
  color:rgba(247,241,229,.80);
  text-shadow:0 0 12px rgba(255,240,205,.26), 0 0 34px rgba(255,206,110,.12);
}
.hl-us b {
  color:#ffdf5a;
  text-shadow:0 0 2px rgba(255,214,60,.6), 0 0 16px rgba(255,205,40,.5),
              0 0 44px rgba(255,180,0,.26);
}
.hl-us span {
  color:rgba(255,220,120,.82);
  text-shadow:0 0 14px rgba(255,205,60,.32), 0 0 38px rgba(255,180,0,.16);
}
.hero-sub, .hero .cue-txt {
  color:rgba(240,234,222,.72);
  text-shadow:0 0 12px rgba(255,240,210,.22), 0 0 30px rgba(255,200,90,.10);
}
.hero-sub strong { color:#fdf6e6; text-shadow:0 0 14px rgba(255,240,210,.3); }

/* the rules pick up the same bloom */
.glow { background:linear-gradient(90deg, transparent, rgba(255,222,120,.30) 20%,
                                   rgba(255,222,120,.30) 80%, transparent);
        box-shadow:0 0 14px rgba(255,205,60,.18); }

/* film grain over the hero — film and type on one surface.
   An SVG turbulence tile, very low, drifting in steps so it reads as grain
   rather than a pattern. It never covers the interface: pointer-events none. */
.hero { position:relative; isolation:isolate; }
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:160px 160px;
  opacity:.055; mix-blend-mode:overlay;
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0%   { transform:translate3d(0,0,0) }
  25%  { transform:translate3d(-3%,2%,0) }
  50%  { transform:translate3d(2%,-3%,0) }
  75%  { transform:translate3d(-2%,-2%,0) }
  100% { transform:translate3d(0,0,0) }
}

/* ── slower, sleeker ─────────────────────────────────────────────────────
   Every beat stretched: the words take 1.5s to arrive instead of .8, the
   rules draw over 2.6s, and the glow crosses them over 5s. Nothing snaps. */
.js .hero .hero-line.r[data-r] .hl-l { transition:opacity 1.5s cubic-bezier(.25,.6,.2,1); }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:2.1s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:2.9s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:4.6s }
.glow { transition:transform 2.6s cubic-bezier(.16,.8,.24,1); }
.js .hero-line.in .g-top   { transition-delay:3.7s }
.js .hero-line.in .g-bot   { transition-delay:5.2s }
.js .hero-line.in .glow i  { animation:glow-cross 5s cubic-bezier(.45,0,.3,1) forwards; }
.js .hero-line.in .g-top i { animation-delay:3.9s }
.js .hero-line.in .g-bot i { animation-delay:5.4s }
.js .hero .hero-sub.r[data-r] { transition:opacity 1.5s ease; transition-delay:6.4s }
.js .hero .cue.r[data-r] { transition:opacity 1.6s ease; transition-delay:7.2s }
.hero .cue.in .cue-arrow { animation-delay:8.6s; animation-duration:3.2s; }

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation:none; }
}


/* ── ramp it up: the glyph EDGES, not just a halo ────────────────────────
   Dan, 2026-09-19: "still looks different, still need to ramp it up on the
   text below... edges are too sharp." text-shadow only paints a halo behind a
   razor-crisp glyph, which is exactly the tell. The SVG filter above softens
   the glyph itself (0.55px) and lays two warm blurred copies under it — the
   same thing a bloom does on film. Subpixel antialiasing goes greyscale under
   a filter, which is part of why it stops looking like a screenshot. */
.fx-defs { position:absolute; width:0; height:0; overflow:hidden; }
.hero-line, .hero .hero-sub, .hero .cue-txt { filter:url(#fx-halation); }
@supports not (filter: url(#fx-halation)) {
  .hero-line, .hero .hero-sub, .hero .cue-txt { filter:blur(.4px); }
}

/* and the halo itself goes up a stop */
.hl-l b      { text-shadow:0 0 2px rgba(255,246,220,.65), 0 0 20px rgba(255,238,198,.55),
                           0 0 54px rgba(255,206,110,.30); }
.hl-l span   { text-shadow:0 0 16px rgba(255,240,205,.34), 0 0 46px rgba(255,206,110,.18); }
.hl-us b     { text-shadow:0 0 3px rgba(255,214,60,.7), 0 0 22px rgba(255,205,40,.6),
                           0 0 58px rgba(255,180,0,.34); }
.hl-us span  { text-shadow:0 0 18px rgba(255,205,60,.4), 0 0 50px rgba(255,180,0,.2); }
.hero-sub, .hero .cue-txt { text-shadow:0 0 15px rgba(255,240,210,.3), 0 0 40px rgba(255,200,90,.16); }

/* a touch more grain over the type than the film needs, same layer */
.hero::after { opacity:.07; }


/* The light half of each line was still thin and sharp — on film the light
   weight blooms too, it just blooms softer. Give it a little more body and a
   real halo rather than a whisper of one. */
.hl-l span { font-weight:300; color:rgba(250,245,236,.86);
             text-shadow:0 0 3px rgba(255,246,225,.5),
                         0 0 20px rgba(255,238,198,.42),
                         0 0 52px rgba(255,206,110,.22); }
.hl-us span { color:rgba(255,226,140,.9);
              text-shadow:0 0 4px rgba(255,214,90,.55),
                          0 0 22px rgba(255,205,60,.5),
                          0 0 56px rgba(255,180,0,.26); }
.hero-sub, .hero .cue-txt { color:rgba(246,240,228,.8);
  text-shadow:0 0 3px rgba(255,246,225,.4), 0 0 18px rgba(255,240,210,.34),
              0 0 44px rgba(255,200,90,.2); }


/* Dan, 2026-09-19: "much better, try splitting the difference." So: halfway
   between the crisp first pass and the full bloom. The glyph is softened 0.32
   rather than 0.55, the blurred copies are lighter, and the halos come down
   about a third — enough that the type still belongs to the film, not so much
   that it goes woolly. */
.hl-l b      { text-shadow:0 0 2px rgba(255,246,220,.5), 0 0 16px rgba(255,238,198,.38),
                           0 0 44px rgba(255,206,110,.20); }
.hl-l span   { font-weight:300; color:rgba(248,243,233,.84);
               text-shadow:0 0 2px rgba(255,246,225,.34), 0 0 15px rgba(255,238,198,.28),
                           0 0 40px rgba(255,206,110,.15); }
.hl-us b     { text-shadow:0 0 2px rgba(255,214,60,.55), 0 0 18px rgba(255,205,40,.42),
                           0 0 48px rgba(255,180,0,.24); }
.hl-us span  { color:rgba(255,224,132,.88);
               text-shadow:0 0 3px rgba(255,214,90,.38), 0 0 17px rgba(255,205,60,.34),
                           0 0 44px rgba(255,180,0,.18); }
.hero-sub, .hero .cue-txt { color:rgba(244,238,226,.78);
  text-shadow:0 0 2px rgba(255,246,225,.28), 0 0 14px rgba(255,240,210,.24),
              0 0 36px rgba(255,200,90,.14); }
.hero::after { opacity:.062; }


/* Dan, 2026-09-19: lighter weight on the three words, the credit gone, less
   air under the film, and the two top lines closer together. */
.hl-l b  { font-weight:600; letter-spacing:.2em; }
.hl-us b { font-weight:600; }

/* the film and the words belong together — almost no gap */
.hero-in.centred .hero-line { margin-top:clamp(0px,.2vh,6px); gap:0; }
.hl-l { line-height:1.14; }
.hl-l + .hl-l { margin-top:clamp(1px,.35vh,5px); }   /* reverence → passion, tight */
.glow.g-top { margin-top:clamp(14px,1.9vh,26px); }   /* the space between keeps its air */

/* the cue no longer waits on a credit that is not there */
.js .hero .cue.r[data-r] { transition-delay:6.6s }
.hero .cue.in .cue-arrow { animation-delay:8s; }


/* ── the light on the line: a bat signal, not a flash ────────────────────
   Dan, 2026-09-19: "don't need the flashier quicker glow animation when the
   lines fade in... just very slow movement of lighter portion back and forth,
   subtle, like a bat signal in the sky, would move slowly not fast."
   So the one-shot sweep is gone. The brighter part of each line simply drifts
   from side to side, 22 seconds out and 22 back, for as long as the page is
   open. Wide and soft, so it reads as light moving rather than a highlight
   travelling. */
.glow i {
  background-size:52% 400%;
  background-position:30% 50%;
  background-image:radial-gradient(closest-side at 50% 50%,
      rgba(255,246,205,.55), rgba(255,212,0,.22) 55%, rgba(255,212,0,0) 100%);
  opacity:0;
  animation:none;
}
.js .hero-line.in .glow i {
  animation:glow-breathe 1.8s ease forwards, glow-drift 44s ease-in-out infinite alternate;
}
@keyframes glow-breathe { to { opacity:1 } }
@keyframes glow-drift {
  from { background-position:24% 50% }
  to   { background-position:76% 50% }
}
.js .hero-line.in .g-top i { animation-delay:3.9s, 3.9s }
.js .hero-line.in .g-bot i { animation-delay:5.4s, 5.4s }

@media (prefers-reduced-motion: reduce) {
  .js .hero-line.in .glow i { animation:none; opacity:.8; }
}


/* Dan, 2026-09-19: "let's have the two lines animate from opposite sides, but
   at the same time. After they're built then bring on navigating."
   So the rules draw together — the top from the left, the bottom from the
   right — and the words arrive into the space they have just made. */
.glow      { transform-origin:0% 50%; }      /* top: draws left to right */
.glow.g-bot{ transform-origin:100% 50%; }    /* bottom: draws right to left */
.glow      { transition:transform 2.6s cubic-bezier(.16,.8,.24,1); }
.js .hero-line.in .g-top { transition-delay:3.8s }
.js .hero-line.in .g-bot { transition-delay:3.8s }   /* together, not one then the other */

/* the light starts drifting once each line exists */
.js .hero-line.in .g-top i { animation-delay:4.4s, 4.4s }
.js .hero-line.in .g-bot i { animation-delay:4.4s, 4.4s }

/* and only when both are built does the third line arrive */
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:6.6s }
.js .hero .cue.r[data-r] { transition-delay:8.2s }
.hero .cue.in .cue-arrow { animation-delay:9.6s; }


/* Dan, 2026-09-19: "we don't need the location change for reverence line, just
   fade, same with passion." The site-wide reveal rises 16px as it fades; in
   the hero that read as the stanza shifting under the film. The words now only
   fade — nothing in the hero moves except the two rules drawing, which is the
   one movement that means something. */
.js .hero .hero-line.r[data-r],
.js .hero .cue.r[data-r] { transform:none; }
.js .hero .hero-line.r[data-r] .hl-l { transform:none; }


/* Dan, 2026-09-19: "bring them on at one second mark not two second mark."
   The whole sequence moves 1.1s earlier — the words start while the film is
   still settling rather than after it, which is the difference between a
   caption and a title. */
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:1.0s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:1.8s }
.js .hero-line.in .g-top { transition-delay:2.7s }
.js .hero-line.in .g-bot { transition-delay:2.7s }
.js .hero-line.in .g-top i { animation-delay:3.3s, 3.3s }
.js .hero-line.in .g-bot i { animation-delay:3.3s, 3.3s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:5.5s }
.js .hero .cue.r[data-r] { transition-delay:7.1s }
.hero .cue.in .cue-arrow { animation-delay:8.5s; }


/* Dan, 2026-09-19: "lines need to still come on separately. Entire animation
   needs to start sooner for the bottom lines. Show me with no padding between
   film and lines."
   REVERENCE and PASSION were 0.8s apart but fading over 1.5s, so they overlapped
   and read as one arrival. The fade is now 1.05s with 1.2s between them — each
   one lands before the next begins. Everything starts earlier, and the stanza
   sits right under the film with nothing between them. */
.js .hero .hero-line.r[data-r] .hl-l { transition:opacity 1.05s cubic-bezier(.25,.6,.2,1); }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:.6s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:1.8s }
.glow { transition:transform 2.2s cubic-bezier(.16,.8,.24,1); }
.js .hero-line.in .g-top { transition-delay:2.5s }
.js .hero-line.in .g-bot { transition-delay:2.5s }
.js .hero-line.in .g-top i { animation-delay:3.0s, 3.0s }
.js .hero-line.in .g-bot i { animation-delay:3.0s, 3.0s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:4.8s }
.js .hero .cue.r[data-r] { transition-delay:6.2s }
.hero .cue.in .cue-arrow { animation-delay:7.6s; }

/* no padding at all between the film and the first line */
.hero-in.centred .hero-line { margin-top:0; }


/* The 26px under the film was the <h1>'s own bottom margin, not the stanza's.
   Zero it: the words sit directly against the film. */
.hero-in.centred .hero-h { margin:0; }


/* Dan, 2026-09-19: "animation on sooner... REVERENCE for the old way first,
   let it settle, then PASSION, let it settle, then the lines, then CREATING,
   then TAKE ME THERE."
   So it is five beats with a breath between each, and it starts almost at
   once: each thing finishes and sits for about four tenths of a second before
   the next begins. Nothing overlaps. */
.js .hero .hero-line.r[data-r] .hl-l { transition:opacity 1s cubic-bezier(.25,.6,.2,1); }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:.25s }  /* in by 1.25 */
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:1.65s } /* in by 2.65 */
.glow { transition:transform 1.9s cubic-bezier(.16,.8,.24,1); }
.js .hero-line.in .g-top { transition-delay:3.05s }                               /* built by 4.95 */
.js .hero-line.in .g-bot { transition-delay:3.05s }
.js .hero-line.in .g-top i { animation-delay:3.5s, 3.5s }
.js .hero-line.in .g-bot i { animation-delay:3.5s, 3.5s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:5.15s } /* in by 6.15 */
.js .hero .cue.r[data-r] { transition:opacity 1.1s ease; transition-delay:6.6s }
.hero .cue.in .cue-arrow { animation-delay:8.2s; }


/* THE BUG behind "the reverence and passion lines are still animating on at
   the exact same time" (Dan, 2026-09-19): the per-line delays were right
   (0.25s / 1.65s) but the CONTAINER they sit in was itself a [data-r] reveal
   with a 2.45s delay left over from an earlier pass. So both lines finished
   their own fades while their parent was still transparent, and the parent
   then revealed them together at 2.45s. The stanza must never fade — only its
   lines do. */
.js .hero .hero-line.r[data-r],
.js .hero .hero-line.r.in[data-r] { opacity:1 !important; transition:none !important; transform:none !important; }


/* Dan, 2026-09-19: "delay animation of lines by one second." The two rules
   (and everything that waits on them) move a second later, so PASSION gets a
   longer breath before the lines start drawing. The words keep their timing. */
.js .hero-line.in .g-top { transition-delay:4.05s }
.js .hero-line.in .g-bot { transition-delay:4.05s }
.js .hero-line.in .g-top i { animation-delay:4.5s, 4.5s }
.js .hero-line.in .g-bot i { animation-delay:4.5s, 4.5s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(3) { transition-delay:6.15s }
.js .hero .cue.r[data-r] { transition-delay:7.6s }
.hero .cue.in .cue-arrow { animation-delay:9.2s; }


/* Dan, 2026-09-19: "NO" — he meant the TEXT lines, not just the rules. So the
   whole stanza moves a second later, every beat by the same second, and the
   rhythm between them is untouched. */
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(1) { transition-delay:1.25s }
.js .hero .hero-line.r.in[data-r] .hl-l:nth-of-type(2) { transition-delay:2.65s }

/* ── THE REEL ───────────────────────────────────────────────────────────
   Dan, 2026-09-19: the reel that is live on the site today, playing right
   under the opening. Our own player, in the site's language: the lit yellow
   disc, a warm hairline, halation on the glow. Quiet until you press it. */
.sec-reel{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(70px,9vw,120px)}
.sec-reel .eyebrow{display:block;text-align:center;margin-bottom:clamp(18px,2.2vw,30px)}

.reel{position:relative;margin-inline:auto;max-width:1320px}
.reel-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#000;border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(255,214,110,.05), 0 40px 120px -40px rgba(0,0,0,.9);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.reel-frame.playing{border-color:rgba(255,214,110,.14)}
.reel-v{width:100%;height:100%;object-fit:cover;display:block}

/* the press-to-play mark — the same lit disc the apps carry */
.reel-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,.58));
  border:0;cursor:pointer;
  transition:opacity .55s var(--ease), background .55s var(--ease);
}
.reel-disc{
  position:absolute;width:clamp(74px,7.4vw,104px);aspect-ratio:1;border-radius:50%;
  background:var(--y);
  box-shadow:0 0 0 0 rgba(255,212,0,.34), 0 0 46px rgba(255,206,110,.34), 0 0 120px rgba(255,190,80,.18);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.reel-tri{
  position:relative;width:0;height:0;margin-left:.22em;
  border-left:clamp(22px,2.2vw,30px) solid #0a0a0a;
  border-top:clamp(13px,1.3vw,18px) solid transparent;
  border-bottom:clamp(13px,1.3vw,18px) solid transparent;
  transition:transform .5s var(--ease);
}
.reel-play:hover .reel-disc{transform:scale(1.06);box-shadow:0 0 0 10px rgba(255,212,0,.07), 0 0 64px rgba(255,206,110,.46), 0 0 150px rgba(255,190,80,.24)}
.reel-play:hover .reel-tri{transform:scale(1.06)}
.reel-frame.playing .reel-play{opacity:0;pointer-events:none}

/* the controls — only while the pointer is on the picture */
.reel-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:26px clamp(14px,1.6vw,22px) clamp(12px,1.4vw,18px);
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.reel-frame.playing.hot .reel-bar,
.reel-frame.playing.paused .reel-bar{opacity:1;transform:none;pointer-events:auto}
.reel-bar button{
  flex:none;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;
  opacity:.72;transition:opacity .22s var(--ease)
}
.reel-bar button:hover{opacity:1}
.reel-pp{
  border-left:7px solid #fff !important;border-right:7px solid #fff !important;
  width:19px !important;height:17px !important;background:none;box-sizing:border-box
}
.reel-frame.paused .reel-pp{
  border:0 !important;width:0 !important;height:0 !important;margin-left:3px;
  border-left:15px solid #fff !important;
  border-top:9px solid transparent !important;border-bottom:9px solid transparent !important
}
.reel-track{flex:1;height:2px;background:rgba(255,255,255,.18);cursor:pointer;position:relative}
.reel-track i{
  display:block;height:100%;width:0;background:var(--y);
  box-shadow:0 0 10px rgba(255,206,110,.7)
}
.reel-time{flex:none;color:rgba(255,255,255,.72);font:500 11.5px/1 var(--ui);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.reel-sound{
  background:none;
  border-left:6px solid #fff !important;border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;width:0 !important;height:0 !important;
  position:relative
}
.reel-sound::after{
  content:"";position:absolute;left:8px;top:-4px;width:7px;height:8px;
  border:1.6px solid #fff;border-left:0;border-radius:0 7px 7px 0
}
.reel-frame.muted .reel-sound::after{
  border:0;width:9px;height:1.6px;background:#fff;top:-1px;left:8px;transform:rotate(-38deg);border-radius:0
}
.reel-full{border:1.6px solid #fff !important;border-radius:1px;width:17px !important;height:13px !important}

@media (max-width:640px){
  .reel-bar{gap:10px;padding-top:20px}
  .reel-time{display:none}
}
@media (prefers-reduced-motion: reduce){
  .reel-disc,.reel-tri,.reel-bar,.reel-play{transition:none}
}

/* the two right-hand controls as real glyphs — the CSS-border speaker read as
   a stray play arrow on screen */
.reel-sound, .reel-full{
  width:20px !important;height:20px !important;border:0 !important;background:none !important
}
.reel-sound svg, .reel-full svg{width:20px;height:20px;display:block}
.reel-sound svg path, .reel-full svg path{
  fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round
}
.reel-sound .spk{fill:#fff;stroke-width:1.2}
.reel-sound .x{opacity:0}
.reel-frame.muted .reel-sound .wv{opacity:0}
.reel-frame.muted .reel-sound .x{opacity:1}
.reel-sound::after{content:none !important}

/* ── the three choices ──────────────────────────────────────────────────
   Dan, 2026-09-19: the opening ends with a choice instead of one arrow.
   Same halation as the type above them, same warm hairline, and they light
   one at a time so the row never shouts. */
.choices{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.5vw,22px);
  margin-top:clamp(26px,3.4vw,52px);
  filter:url(#fx-halation);
}
.choice{
  position:relative;display:inline-block;
  padding:clamp(11px,1.1vw,15px) clamp(18px,2.1vw,30px);
  border:1px solid rgba(255,214,110,.20);
  color:rgba(248,243,233,.80);
  font:300 clamp(11px,1.06vw,13.5px)/1 var(--ui);
  letter-spacing:.20em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(to bottom, rgba(255,206,110,.030), rgba(255,206,110,0));
  transition:color .6s var(--ease), border-color .6s var(--ease),
             background .6s var(--ease), box-shadow .6s var(--ease);
}
.choice::after{                       /* the glow that wakes under it */
  content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:1px;
  background:linear-gradient(to right, transparent, rgba(255,214,110,.85), transparent);
  opacity:0;transition:opacity .6s var(--ease);
}
.choice:hover,.choice:focus-visible{
  color:#fdf6e6;border-color:rgba(255,214,110,.42);
  background:linear-gradient(to bottom, rgba(255,206,110,.085), rgba(255,206,110,.015));
  box-shadow:0 0 34px -8px rgba(255,206,110,.34);
  outline:none;
}
.choice:hover::after,.choice:focus-visible::after{opacity:1}

/* it arrives where the arrow used to, and the three fade in one after another */
.js .hero .choices.r[data-r]{opacity:0;transition:opacity 1.1s ease;transition-delay:7.6s}
.js .hero .choices.r.in[data-r]{opacity:1}
.js .hero .choices.r[data-r] .choice{opacity:0;transition:opacity 1s var(--ease), color .6s var(--ease), border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease)}
.js .hero .choices.r.in[data-r] .choice{opacity:1}
.js .hero .choices.r.in[data-r] .choice:nth-child(1){transition-delay:7.6s}
.js .hero .choices.r.in[data-r] .choice:nth-child(2){transition-delay:8.0s}
.js .hero .choices.r.in[data-r] .choice:nth-child(3){transition-delay:8.4s}

@media (max-width:560px){
  .choices{flex-direction:column;align-items:stretch;gap:9px;padding:0 6vw}
  .choice{text-align:center;white-space:normal}
}
@media (prefers-reduced-motion: reduce){
  .js .hero .choices.r[data-r],.js .hero .choices.r[data-r] .choice{opacity:1;transition:none}
}

/* the stanza breaks out of the page padding, which left a 4px sideways scroll
   on a phone. Clip it at the hero — nothing real lives out there. */
.hero{overflow-x:clip}
html,body{overflow-x:clip}

/* ── the play mark, lit rather than flat ────────────────────────────────
   Dan, 2026-09-19: "don't need THE REEL. Play button needs to be sleeker,
   too flat right now." So it stops being a yellow circle stamped on the
   picture: a bloom under it, a thin ring breathing around it, a disc with
   light falling across it, and the same halation the type carries. */
.sec-reel{padding-top:clamp(28px,3.4vw,54px)}

.reel-play{background:radial-gradient(64% 64% at 50% 50%, rgba(0,0,0,.24), rgba(0,0,0,.54))}
.reel-play > *{filter:url(#fx-halation)}

.reel-halo{
  position:absolute;width:clamp(230px,22vw,340px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,214,120,.26), rgba(255,196,80,.10) 46%, rgba(255,180,60,0) 72%);
  opacity:.9;transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.reel-ring{
  position:absolute;width:clamp(108px,10.6vw,148px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,220,140,.34);
  box-shadow:0 0 22px rgba(255,206,110,.20), inset 0 0 22px rgba(255,206,110,.10);
  animation:reel-breathe 5.2s ease-in-out infinite;
  transition:transform .7s var(--ease), border-color .7s var(--ease);
  pointer-events:none;
}
@keyframes reel-breathe{
  0%,100%{transform:scale(1);opacity:.62}
  50%{transform:scale(1.055);opacity:1}
}
.reel-disc{
  width:clamp(72px,7.1vw,100px);
  background:
    radial-gradient(58% 48% at 50% 22%, #fff6d2 0%, #ffe07a 34%, #ffc81e 66%, #eda400 100%);
  box-shadow:
    0 0 0 1px rgba(255,236,180,.42),
    0 10px 30px -8px rgba(0,0,0,.72),
    0 0 52px rgba(255,206,110,.34),
    0 0 130px rgba(255,186,70,.18),
    inset 0 -10px 22px -10px rgba(140,86,0,.55),
    inset 0 7px 14px -7px rgba(255,255,255,.72);
}
.reel-tri{
  border-left-color:rgba(18,12,0,.88);
  filter:drop-shadow(0 1px 0 rgba(255,244,200,.30));
}
.reel-play:hover .reel-halo{opacity:1;transform:scale(1.10)}
.reel-play:hover .reel-ring{transform:scale(1.16);border-color:rgba(255,226,160,.56)}
.reel-play:hover .reel-disc{transform:scale(1.045)}
.reel-frame.playing .reel-ring{animation:none}

/* the control bar picks up the same warmth instead of plain white */
.reel-bar{background:linear-gradient(to top, rgba(6,4,0,.80), rgba(6,4,0,.30) 55%, transparent)}
.reel-bar button{filter:drop-shadow(0 0 7px rgba(255,206,110,.30))}
.reel-pp{border-left-color:#fdf3dd !important;border-right-color:#fdf3dd !important}
.reel-sound svg path,.reel-full svg path{stroke:#fdf3dd}
.reel-sound .spk{fill:#fdf3dd}
.reel-time{color:rgba(253,243,221,.74)}
.reel-track{background:rgba(253,243,221,.16)}

@media (prefers-reduced-motion: reduce){ .reel-ring{animation:none} }

/* ── the top bar, in the same light ─────────────────────────────────────
   Dan, 2026-09-19: "same with the top bar, needs the same halation character
   for the entire site." The header was clean and cold next to everything
   below it — now it glows the same way the type does. */
.hdr{
  background:linear-gradient(to bottom, rgba(6,5,2,.80), rgba(6,5,2,.52));
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
}
.hdr::after{                       /* a warm bloom spilling off the bar */
  content:"";position:absolute;left:0;right:0;top:100%;height:70px;
  background:linear-gradient(to bottom, rgba(255,198,90,.055), rgba(255,198,90,0));
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.hdr.tight::after{opacity:1}
.hdr .brand,.hdr .nav{filter:url(#fx-halation)}
.logo-hdr{color:#fdf6e6;filter:drop-shadow(0 0 12px rgba(255,232,180,.26)) drop-shadow(0 0 34px rgba(255,200,90,.16))}
.nav a{color:rgba(248,243,233,.62);text-shadow:0 0 14px rgba(255,238,198,.14)}
.nav a:hover,.nav a:focus-visible{color:#fdf6e6;text-shadow:0 0 3px rgba(255,246,220,.5),0 0 18px rgba(255,238,198,.4)}
.nav a::after{box-shadow:0 0 12px rgba(255,206,110,.85)}
.nav a.nav-cta{box-shadow:0 0 26px -8px rgba(255,206,110,.45)}

/* the hairline under it: a lit filament, brightest in the middle */
.hdr-rule{
  height:1px;
  background:linear-gradient(to right,
    transparent, rgba(255,214,120,.16) 12%, rgba(255,226,160,.46) 50%,
    rgba(255,214,120,.16) 88%, transparent);
  box-shadow:0 0 18px rgba(255,206,110,.30);
}

/* the SVG halation filter draws its own region, and on the translucent header
   that region showed as a faint box around the logo. Same look, no box: the
   glow goes on the ink itself. */
.hdr .brand,.hdr .nav{filter:none}
.logo-hdr{
  filter:
    drop-shadow(0 0 1.5px rgba(255,246,220,.55))
    drop-shadow(0 0 13px rgba(255,236,186,.34))
    drop-shadow(0 0 38px rgba(255,200,90,.20));
}

/* ── THE INSPIRATION — the timeline ─────────────────────────────────────
   Dan, 2026-09-19: "just the yellow line with vertical ticks." So that is all
   it is: one lit rule running across the dark, ticks standing on it, and a
   playhead that never moves while the years slide under it. */
.sec-tl{padding:clamp(90px,12vw,170px) 0}
.tl{position:relative;display:flex;flex-direction:column;align-items:center}

/* the rail */
.tl-view{
  position:relative;width:100%;height:96px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
}
.tl-rail{
  position:absolute;top:0;left:50%;height:100%;
  will-change:transform;
  transition:transform 1.25s cubic-bezier(.22,.86,.26,1);
}
.tl-line{
  position:absolute;left:0;top:47px;height:1px;
  background:linear-gradient(to right, rgba(255,214,110,.22), rgba(255,226,160,.60), rgba(255,214,110,.22));
  box-shadow:0 0 16px rgba(255,206,110,.34);
}
.tl-tick{
  position:absolute;top:47px;width:1px;height:9px;
  background:rgba(255,214,110,.30);
  transition:height .5s var(--ease), background .5s var(--ease), opacity .5s var(--ease);
}
.tl-tick.maj{height:17px;background:rgba(255,226,160,.52)}
.tl-tick.beat{height:23px;background:rgba(255,226,160,.72);box-shadow:0 0 10px rgba(255,206,110,.45)}
.tl-tick.done{background:var(--y);box-shadow:0 0 14px rgba(255,206,110,.75)}
.tl-span{
  position:absolute;top:44px;height:3px;
  background:linear-gradient(to right, rgba(255,212,0,.16), rgba(255,212,0,.40));
  opacity:0;transition:opacity .8s var(--ease);
}
.tl-span.done{opacity:1}
.tl-lab{
  position:absolute;top:70px;transform:translateX(-50%);
  color:rgba(248,243,233,.34);
  font:500 10px/1 var(--ui);letter-spacing:.16em;
  opacity:0;transition:opacity .6s var(--ease),color .6s var(--ease);
}
.tl-lab.show{opacity:1}
.tl-lab.done{color:rgba(255,226,160,.85)}

/* the playhead sits still in the middle and the years run past it */
.tl-head{
  position:absolute;left:50%;top:26px;width:1px;height:43px;
  transform:translateX(-.5px);
  background:linear-gradient(to bottom, rgba(255,246,220,0), #fff6dc 30%, #fff6dc 70%, rgba(255,246,220,0));
  box-shadow:0 0 18px rgba(255,214,120,.9);
}
.tl-head i{
  position:absolute;left:50%;top:21px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--y);
  box-shadow:0 0 0 4px rgba(255,212,0,.13), 0 0 22px rgba(255,206,110,.85);
}

/* the year under the playhead */
.tl-year{
  margin:12px 0 0;
  color:#fdf6e6;
  font:200 clamp(34px,5.4vw,70px)/1 var(--ui);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 3px rgba(255,246,220,.42), 0 0 26px rgba(255,238,198,.30), 0 0 70px rgba(255,206,110,.16);
  transition:opacity .35s var(--ease);
}

/* the beat that is showing */
.tl-stack{
  position:relative;width:100%;max-width:760px;
  min-height:clamp(150px,17vw,210px);
  margin-top:clamp(14px,1.8vw,24px);
}
.tl-card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:16px;text-align:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.tl-card.on{opacity:1;transform:none;pointer-events:auto}
.tl-t{
  margin:0;max-width:56ch;
  color:rgba(248,243,233,.86);
  font:300 clamp(16px,1.66vw,22px)/1.56 var(--ui);
  letter-spacing:.005em;
  text-shadow:0 0 22px rgba(255,238,198,.13);
}
.tl-logo{width:min(330px,58%);color:#fdf6e6;
  filter:drop-shadow(0 0 2px rgba(255,246,220,.5)) drop-shadow(0 0 22px rgba(255,236,186,.3)) drop-shadow(0 0 60px rgba(255,200,90,.18))}

/* the run of titles, 2007 to 2014 */
.tl-chain{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 0;margin:2px 0 0;padding:0;list-style:none}
.tl-chain li{
  display:inline-flex;align-items:center;
  color:rgba(248,243,233,.62);
  font:400 clamp(10px,1.02vw,12.5px)/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateY(5px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s var(--ease);
}
.tl-chain li.on{opacity:1;transform:none}
.tl-chain li:last-child.on{color:#fdf6e6;text-shadow:0 0 16px rgba(255,238,198,.45)}
.tl-chain li::after{
  content:"";width:26px;height:1px;margin:0 11px;
  background:linear-gradient(to right, rgba(255,214,110,.14), rgba(255,214,110,.55));
}
.tl-chain li:last-child::after{display:none}

/* the statuettes */
.tl-emmys{display:flex;justify-content:center;gap:clamp(14px,1.8vw,26px);margin-top:6px;flex-wrap:wrap}
.tl-emmy{
  display:flex;flex-direction:column;align-items:center;gap:7px;max-width:170px;
  opacity:0;transform:translateY(9px) scale(.9);
  transition:opacity .6s var(--ease), transform .7s cubic-bezier(.2,1.5,.35,1);
}
.tl-emmy.on{opacity:1;transform:none}
.tl-emmy svg{width:clamp(26px,2.6vw,34px);height:auto;color:var(--y);
  filter:drop-shadow(0 0 10px rgba(255,206,110,.7)) drop-shadow(0 0 30px rgba(255,186,70,.35))}
.tl-emmy span{
  color:rgba(248,243,233,.52);
  font:400 9.5px/1.4 var(--ui);letter-spacing:.13em;text-transform:uppercase
}

/* the two buttons, in the language of the three in the opening */
.tl-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,18px);margin-top:clamp(24px,3vw,42px)}
.tl-btn{cursor:pointer;font-family:var(--ui)}
.tl-btn[disabled]{opacity:.26;pointer-events:none}
.tl-btn.live{color:#fdf6e6;border-color:rgba(255,214,110,.42);box-shadow:0 0 34px -8px rgba(255,206,110,.34)}
.tl-reset{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.tl-reset.show{opacity:1;pointer-events:auto}

@media (max-width:560px){
  .tl-view{height:84px}
  .tl-chain li::after{width:14px;margin:0 7px}
  .tl-ctl{width:100%}
  .tl-btn{flex:1 1 40%}
}
@media (prefers-reduced-motion: reduce){
  .tl-rail,.tl-card,.tl-emmy,.tl-chain li{transition:none}
}

/* the statuettes standing on the rail itself */
.tl-pot{
  position:absolute;bottom:52px;transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:2px;pointer-events:none;
}
.tl-pot i{
  display:block;width:13px;
  opacity:0;transform:translateY(7px) scale(.72);
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.2,1.6,.35,1);
}
.tl-pot.on i{opacity:1;transform:none}
.tl-pot svg{width:13px;height:auto;display:block;color:var(--y);
  filter:drop-shadow(0 0 6px rgba(255,206,110,.75)) drop-shadow(0 0 16px rgba(255,186,70,.4))}
.tl-view{height:120px}
.tl-line,.tl-tick,.tl-span{top:82px}
.tl-lab{top:104px}
.tl-head{top:60px;height:44px}
.tl-t em{font-style:normal;color:#fdf6e6;text-shadow:0 0 16px rgba(255,238,198,.35)}
@media (max-width:760px){ .tl-pot i,.tl-pot svg{width:9px} }

/* the reset sits under the two choices instead of inside the row — hidden it
   was still taking its width and pushing Before/After off centre */
.tl-ctl{position:relative;padding-bottom:52px}
.tl-reset{
  position:absolute;left:50%;top:calc(100% - 44px);transform:translateX(-50%);
  border-color:rgba(255,214,110,.12);
  font-size:clamp(9.5px,.86vw,11px);padding:9px 18px;
}

/* the rail is a thing you can take hold of */
.tl-view{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tl.dragging .tl-view{cursor:grabbing}
.tl.dragging .tl-head{box-shadow:0 0 26px rgba(255,214,120,1)}
.tl.dragging .tl-head i{box-shadow:0 0 0 6px rgba(255,212,0,.18), 0 0 30px rgba(255,206,110,1)}
.tl.dragging .tl-card{transition:opacity .28s var(--ease), transform .28s var(--ease)}
.tl.dragging .tl-chain li{transition:opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease)}
/* while a hand is on it the year should keep up, not glide */
.tl-hint{
  margin:10px 0 0;color:rgba(248,243,233,.26);
  font:400 9.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .5s var(--ease);
}
.tl.dragging .tl-hint{opacity:0}

/* the statuette needs a touch more size on the rail to read as one */
.tl-pot i,.tl-pot svg{width:15px}
.tl-pot{gap:1px;bottom:50px}
@media (max-width:760px){ .tl-pot i,.tl-pot svg{width:10px} }

/* ── ONE MOTION LANGUAGE ────────────────────────────────────────────────
   Dan, 2026-09-19: "motion needs to be consistent throughout."

   The page had grown twelve different easing curves — three near-identical
   ones on the header alone, plus two springy ones that made the statuettes
   pop with a bounce nothing else had. Everything that moves now shares the
   one curve. Durations stay as staged, because the opening's rhythm is his
   and the timing is the choreography, not the character. */
*, *::before, *::after{ transition-timing-function:var(--ease) !important }

/* the two springs are gone with it — these arrive the same way as the rest */
.tl-emmy{transition:opacity .6s var(--ease), transform .6s var(--ease)}
.tl-pot i{transition:opacity .5s var(--ease), transform .5s var(--ease)}

/* the glow that draws under CREATING kept its own curve; same one now */
.glow{transition:transform 1.9s var(--ease)}

/* ── the reel sits quiet until you go near it ───────────────────────────
   Dan, 2026-09-19: "play button for reel should only expose over hover, same
   with outline, that way when mouse isn't over it it fades into the black of
   the site." So at rest there is no frame and no button: just the picture,
   edge to edge with the dark. Everything comes up together under the cursor.

   Only where there is a real cursor — on a phone there is no hover, and a
   button you can never see is a button you can never press. */
@media (hover:hover) and (pointer:fine){
  .reel-frame{
    border-color:transparent;
    box-shadow:none;
    transition:border-color .55s var(--ease), box-shadow .55s var(--ease);
  }
  .reel-frame:hover,
  .reel-frame:focus-within{
    border-color:rgba(255,214,110,.20);
    box-shadow:0 0 0 1px rgba(255,214,110,.05), 0 40px 120px -40px rgba(0,0,0,.9);
  }
  .reel-frame.playing:hover,
  .reel-frame.playing:focus-within{border-color:rgba(255,214,110,.14)}

  .reel-play{opacity:0;transition:opacity .55s var(--ease), background .55s var(--ease)}
  .reel-frame:hover .reel-play,
  .reel-frame:focus-within .reel-play{opacity:1}

  /* once it is running the mark stays out of the way, hover or not */
  .reel-frame.playing .reel-play,
  .reel-frame.playing:hover .reel-play,
  .reel-frame.playing:focus-within .reel-play{opacity:0;pointer-events:none}
}

/* ── THE LINE THAT BECOMES THE MENU BAR ─────────────────────────────────
   Dan, 2026-09-19: "the menu bar should steal the CREATING THE SPACE BETWEEN
   bar when scrolling down, keep the bottom glow line, but dock it and build
   the navigation bar."

   So the bottom rule of the stanza is not a decoration that scrolls away. It
   is the same object as the header's edge. It draws under CREATING, rides up
   with the page, widens as it reaches the top, and stops there. The bar and
   its links build underneath it once it has landed. */
.g-bot{visibility:hidden}                    /* the real one keeps its space */

.dock{
  position:fixed;z-index:41;height:1px;display:block;pointer-events:none;
  overflow:hidden;
  background:linear-gradient(90deg, transparent, rgba(255,222,120,.30) 20%,
             rgba(255,222,120,.30) 80%, transparent);
  box-shadow:0 0 14px rgba(255,205,60,.18);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform 2.6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
  transition-delay:5.2s, 0s, 0s;
}
.dock.in{transform:scaleX(1)}
.dock i{
  position:absolute;inset:-2px 0;display:block;
  background:radial-gradient(closest-side at 50% 50%,
             rgba(255,246,190,.95), rgba(255,212,0,.55) 45%, rgba(255,212,0,0) 100%);
  background-size:16% 400%;background-repeat:no-repeat;
  background-position:-18% 50%;opacity:0;
}
.dock.in i{animation:glow-cross 5s var(--ease) forwards, glow-drift 44s ease-in-out 5.4s infinite alternate;
           animation-delay:5.4s, 5.4s}
/* docked, it is a hairline across the whole top, brightest in the middle */
.dock.docked{
  background:linear-gradient(to right, transparent, rgba(255,214,120,.16) 12%,
             rgba(255,226,160,.46) 50%, rgba(255,214,120,.16) 88%, transparent);
  box-shadow:0 0 18px rgba(255,206,110,.30);
}
.dock.docked i{opacity:0;transition:opacity .8s var(--ease)}

/* the bar builds under the line instead of sliding in over the page */
.hdr{transition:opacity .5s var(--ease), transform .5s var(--ease)}
.hdr.away{transform:translateY(-8px);opacity:0;pointer-events:none}
.hdr-rule{display:none}                      /* the dock line is the edge now */
.hdr .nav a{opacity:0;transform:translateY(-4px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .22s var(--ease)}
.hdr.built .nav a{opacity:1;transform:none}
.hdr.built .nav a:nth-child(1){transition-delay:.04s}
.hdr.built .nav a:nth-child(2){transition-delay:.10s}
.hdr.built .nav a:nth-child(3){transition-delay:.16s}
.hdr.built .nav a:nth-child(4){transition-delay:.22s}
.hdr.built .nav a:nth-child(5){transition-delay:.28s}
.hdr.built .nav a:nth-child(6){transition-delay:.34s}
.hdr .brand{opacity:0;transition:opacity .5s var(--ease)}
.hdr.built .brand{opacity:1;transition-delay:.02s}

@media (prefers-reduced-motion: reduce){
  .dock{transition:none}
  .hdr .nav a,.hdr .brand{opacity:1;transform:none;transition:none}
}

/* ── no step in the bar ─────────────────────────────────────────────────
   Dan, 2026-09-19: "the bar jumps at one point, make sure it's smooth."
   It did: the header snapped from 88px to 62px the moment a class flipped,
   and the docked line sat on that edge, so the line jumped 26px with it.
   Height and line are now the same continuous value — the scroll position
   itself — so there is no threshold left to jump at. */
.hdr{--h-open:88px;--h-tight:62px}
.hdr .hdr-in,
.hdr.tight .hdr-in{
  height:calc(var(--h-open) - (var(--h-open) - var(--h-tight)) * var(--p, 0));
  transition:none;
}
.hdr .brand-txt,.hdr.tight .brand-txt{transition:none}
@media (max-width:640px){ .hdr{--h-open:70px;--h-tight:58px} }

/* ── the reel dissolves into the page ───────────────────────────────────
   Dan, 2026-09-19: "reel should be the opening frame, feathered to black so
   it fades into the site until hovering." The poster is frame one of the cut
   now — his own title card, already sitting on black — and a feather carries
   its edges into the page so there is no rectangle at rest. Go near it and
   the feather lifts, the frame draws, the mark comes up. */
.reel-frame{background:#000}
.reel-feather{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right,  #000 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, #000 100%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, #000 100%),
    radial-gradient(130% 130% at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30));
  transition:opacity .75s var(--ease);
}
.reel-play{z-index:3}
.reel-bar{z-index:4}

@media (hover:hover) and (pointer:fine){
  .reel-frame:hover .reel-feather,
  .reel-frame:focus-within .reel-feather,
  .reel-frame.playing .reel-feather{opacity:0}
}
@media not all and (hover:hover){          /* touch: never hide the picture */
  .reel-feather{opacity:0}
}
@media (prefers-reduced-motion: reduce){ .reel-feather{transition:none} }

/* ── THE CARD ───────────────────────────────────────────────────────────
   Dan, 2026-09-19: his headshot and the facts, between the reel and the
   timeline. Same language as everything else: dark plate, one warm hairline,
   halation on the type, portrait feathered into the page so it sits in the
   black rather than on it. */
.sec-card{padding:clamp(60px,7vw,110px) 0 clamp(30px,4vw,60px)}
.idcard{
  display:grid;grid-template-columns:minmax(200px,300px) 1fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  max-width:1000px;margin-inline:auto;
}
.idc-port{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:#000;
  display:grid;place-items:center;
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9);
}
.idc-img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.04);
}
.idc-port.empty .idc-img{display:none}
.idc-fallback{
  display:none;
  color:rgba(255,226,160,.30);
  font:200 clamp(52px,6vw,86px)/1 var(--ui);letter-spacing:.12em;
  text-shadow:0 0 3px rgba(255,246,220,.25),0 0 40px rgba(255,206,110,.20);
}
.idc-port.empty .idc-fallback{display:block}
.idc-port.empty{
  border:1px solid rgba(255,214,110,.12);
  background:radial-gradient(120% 120% at 50% 30%, rgba(255,206,110,.045), rgba(0,0,0,0) 70%), #000;
}
.idc-feather{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,  #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, #000 100%),
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 84%, #000 100%),
    radial-gradient(130% 130% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
}

.idc-body{filter:url(#fx-halation)}
.idc-name{
  margin:14px 0 6px;color:#fdf6e6;
  font:200 clamp(30px,4vw,52px)/1.04 var(--ui);letter-spacing:-.012em;
  text-shadow:0 0 3px rgba(255,246,220,.4),0 0 30px rgba(255,238,198,.22);
}
.idc-role{
  margin:0;color:rgba(255,226,160,.78);
  font:400 clamp(11px,1.06vw,13px)/1.5 var(--ui);
  letter-spacing:.17em;text-transform:uppercase;
}
.idc-rule{
  display:block;height:1px;width:88px;margin:clamp(18px,2.2vw,26px) 0;
  background:linear-gradient(to right, rgba(255,226,160,.62), rgba(255,214,110,0));
  box-shadow:0 0 14px rgba(255,206,110,.35);
}
.idc-b{
  margin:0;max-width:52ch;color:rgba(248,243,233,.76);
  font:300 clamp(14.5px,1.16vw,16.5px)/1.68 var(--ui);
}
.idc-stats{
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
  gap:clamp(18px,2.6vw,40px);margin:clamp(22px,2.8vw,34px) 0 0;
}
.idc-stats div{display:flex;flex-direction:column;gap:6px}
.idc-stats dt{
  order:2;color:rgba(248,243,233,.40);
  font:500 9.5px/1.3 var(--ui);letter-spacing:.17em;text-transform:uppercase;
}
.idc-stats dd{
  order:1;margin:0;color:#fdf6e6;
  font:200 clamp(24px,2.5vw,34px)/1 var(--ui);font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(255,238,198,.22);
}
.idc-links{display:flex;flex-wrap:wrap;gap:clamp(9px,1.2vw,15px);margin-top:clamp(24px,3vw,36px)}
.idc-links .choice{filter:none}

@media (max-width:820px){
  .idcard{grid-template-columns:1fr;gap:clamp(20px,4vw,34px);text-align:center;justify-items:center}
  .idc-port{width:min(280px,72vw)}
  .idc-rule{margin-inline:auto}
  .idc-b{margin-inline:auto}
  .idc-stats{grid-template-columns:repeat(2,auto);justify-content:center}
  .idc-links{justify-content:center}
}

/* the three counts are the point; the city is a caption, not a headline */
.idc-place dd{
  font-size:clamp(14px,1.16vw,16.5px);font-weight:300;
  color:rgba(248,243,233,.80);align-self:end;padding-bottom:5px;
}
.idc-port.empty{background:radial-gradient(120% 120% at 50% 30%, rgba(255,206,110,.075), rgba(9,9,9,0) 72%), #090909}
.idc-fallback{color:rgba(255,226,160,.42)}

/* ── the card, as a card ────────────────────────────────────────────────
   Dan, 2026-09-19: "should be in its own card so there's a border, no WHO
   RUNS IT, just Founder 145 Park. Emmy icon 23, laurel icon 5, Telly icon 10,
   to match the start frame of the reel. Have a text and an email button."
   The three marks are the three on his own title card, in the same order. */
.idcard{
  border:1px solid rgba(255,214,110,.16);
  padding:clamp(22px,2.8vw,44px);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,206,110,.035), rgba(255,206,110,0) 62%),
    rgba(255,255,255,.012);
  box-shadow:0 0 0 1px rgba(255,214,110,.04), 0 44px 120px -56px rgba(0,0,0,.95);
  transition:border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.idcard:hover{
  border-color:rgba(255,214,110,.26);
  box-shadow:0 0 0 1px rgba(255,214,110,.06), 0 44px 130px -50px rgba(0,0,0,.95),
             0 0 60px -22px rgba(255,206,110,.18);
}
.idc-name{margin-top:0}

/* the three marks */
.idc-awards{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(22px,3.2vw,46px);
  margin:clamp(22px,2.8vw,34px) 0 0;padding:0;list-style:none;
}
.idc-awards li{display:flex;align-items:center;gap:11px}
.idc-awards svg{
  width:auto;height:clamp(34px,3.4vw,46px);display:block;color:var(--y);
  filter:drop-shadow(0 0 9px rgba(255,206,110,.55)) drop-shadow(0 0 28px rgba(255,186,70,.28));
}
.idc-awards .aw-laurel{height:clamp(30px,3vw,40px)}
.idc-awards span{
  color:#fdf6e6;
  font:200 clamp(26px,2.7vw,38px)/1 var(--ui);font-variant-numeric:tabular-nums;
  text-shadow:0 0 3px rgba(255,246,220,.35), 0 0 26px rgba(255,238,198,.22);
}

@media (max-width:820px){
  .idc-awards{justify-content:center;gap:clamp(18px,5vw,30px)}
}
@media (max-width:420px){
  .idc-awards{gap:16px}
  .idc-awards svg{height:30px}
  .idc-awards span{font-size:24px}
}

/* the laurel needs the same height as the statuettes or the leaves close up */
.idc-awards .aw-laurel{height:clamp(36px,3.6vw,48px)}

/* ── the real marks ─────────────────────────────────────────────────────
   Dan, 2026-09-19: "make the marks look like the first frame of the reel, but
   just yellow — yours look fake." They were. These are lifted straight out of
   frame one of the reel and recoloured, so the card and the timeline carry the
   same three marks his own title card does. The bloom is in the artwork, so
   the CSS only adds a little warmth around it. */
.idc-awards img{
  width:auto;height:clamp(40px,4vw,54px);display:block;
  filter:drop-shadow(0 0 14px rgba(255,206,110,.35));
}
.idc-awards li:nth-child(2) img{height:clamp(32px,3.2vw,43px)}   /* the wreath is wider than it is tall */

.tl-pot i{width:auto}
.tl-pot img{width:auto;height:22px;display:block;
  filter:drop-shadow(0 0 5px rgba(255,206,110,.55))}
.tl-pot{gap:0;bottom:48px}
.tl-emmy img{width:auto;height:clamp(30px,3vw,40px);display:block;
  filter:drop-shadow(0 0 10px rgba(255,206,110,.45))}
@media (max-width:760px){ .tl-pot img{height:15px} }

/* ── what he does ───────────────────────────────────────────────────────
   Dan, 2026-09-19: the five disciplines as marks instead of a paragraph
   claiming them. Line drawings, deliberately plain, so they read as labels
   and leave the three award marks below as the only gold on the card. */
.idc-roles{
  display:flex;flex-wrap:wrap;
  gap:clamp(16px,2.4vw,34px);
  margin:clamp(6px,1vw,14px) 0 0;padding:0;list-style:none;
}
.idc-roles li{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:rgba(248,243,233,.62);
  transition:color .5s var(--ease);
}
.idc-roles li:hover{color:#fdf6e6}
.idc-roles svg{
  width:clamp(26px,2.4vw,32px);height:auto;display:block;
  filter:drop-shadow(0 0 12px rgba(255,238,198,.16));
}
.idc-roles span{
  font:500 9px/1 var(--ui);letter-spacing:.17em;text-transform:uppercase;
  color:rgba(248,243,233,.42);white-space:nowrap;
  transition:color .5s var(--ease);
}
.idc-roles li:hover span{color:rgba(248,243,233,.76)}

.idc-awards{margin-top:clamp(26px,3.2vw,40px)}

@media (max-width:820px){ .idc-roles{justify-content:center} }
@media (max-width:420px){
  .idc-roles{gap:14px}
  .idc-roles svg{width:24px}
  .idc-roles span{font-size:8px;letter-spacing:.12em}
}

/* each crop carries its own bloom margin, so the statuette is only about 80%
   of the image — the marks need the extra height to read at all */
.idc-awards img{height:clamp(62px,6.2vw,86px)}
.idc-awards li:nth-child(2) img{height:clamp(46px,4.4vw,62px)}
.idc-awards{gap:clamp(18px,2.6vw,38px)}
.idc-awards li{gap:6px}
.tl-pot img{height:26px}
.tl-emmy img{height:clamp(40px,4vw,54px)}
@media (max-width:760px){ .tl-pot img{height:17px} }

/* Cinematographer is a long word for a five-across row — a touch tighter so
   the five still sit on one line beside the portrait */
.idc-roles{gap:clamp(13px,1.9vw,26px)}
.idc-roles span{font-size:8.6px;letter-spacing:.13em}
@media (max-width:1180px){ .idc-roles span{letter-spacing:.1em} }

/* ── no orphan ──────────────────────────────────────────────────────────
   Dan, 2026-09-19: "editor should not be an orphan." On a phone the five
   broke four and one. A six-column grid lets three sit over two, centred,
   so the row always breaks evenly. */
@media (max-width:820px){
  .idc-roles{
    display:grid;grid-template-columns:repeat(6,1fr);
    row-gap:clamp(16px,3vw,22px);column-gap:4px;width:100%;
  }
  .idc-roles li{grid-column:span 2}
  .idc-roles li:nth-child(4){grid-column:2 / span 2}
  .idc-roles li:nth-child(5){grid-column:4 / span 2}
  .idc-roles span{white-space:normal;text-align:center;line-height:1.3}
}

/* the contact card button carries a little more weight than the other three */
.choice-vcf{
  border-color:rgba(255,214,110,.34);
  background:linear-gradient(to bottom, rgba(255,206,110,.075), rgba(255,206,110,.015));
  color:#fdf6e6;
}

/* Dan, 2026-11-04: "PAGE NEEDS TO BE BLACK SO THERE'S A NATURAL BLEND FROM THE VIDEO… I'M SEEING SOME HARD EDGES ON
   THE HALATION". The film's black is true 0; the page was #050505 with the house grid and a corner glow over it, so
   the film sat in a visibly darker box. Pure black everywhere, no grid, no glow — the films melt into the page. */
html,body{background:#000}
body::before,body::after{display:none}

/* ── the award marks (Dan, 2026-11-04: "IT'S NOT ELEGANT, THERE'S TOO MUCH PADDING… THE ICONS AND THEIR NUMBERS
   SHOULD BE INDIVIDUAL BUTTONS… A LIGHTBOX WITH THE AWARDS SO THAT THE PHOTO DOESN'T MOVE"). Each mark + its number is
   a button in the same language as CALL / TEXT / EMAIL; it opens that type's list in a lightbox, so the card itself
   never grows. The card's spacing is tightened so it reads as one block. ─────────────────────────────────────────── */
.idc-name{letter-spacing:.03em}
.idc-rule{margin:14px 0 18px}
.idc-awards.idc-awards-pick{gap:10px;margin:20px 0 0}
.idc-awards-pick li{gap:0}
.idc-awards-pick .aw-b{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:9px;
  height:54px;padding:0 18px 0 12px;cursor:pointer;
  border:1px solid rgba(255,214,110,.20);
  background:linear-gradient(to bottom, rgba(255,206,110,.030), rgba(255,206,110,0));
  transition:border-color .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease)}
.idc-awards-pick .aw-b::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:1px;
  background:linear-gradient(to right, transparent, rgba(255,214,110,.85), transparent);opacity:0;transition:opacity .6s var(--ease)}
.idc-awards-pick .aw-b:hover,.idc-awards-pick .aw-b:focus-visible,.idc-awards-pick .aw-b[aria-expanded="true"]{
  border-color:rgba(255,214,110,.42);
  background:linear-gradient(to bottom, rgba(255,206,110,.085), rgba(255,206,110,.015));
  box-shadow:0 0 34px -8px rgba(255,206,110,.34)}
.idc-awards-pick .aw-b:hover::after,.idc-awards-pick .aw-b:focus-visible::after,.idc-awards-pick .aw-b[aria-expanded="true"]::after{opacity:1}
.idc-awards-pick .aw-b img{height:42px;filter:drop-shadow(0 0 8px rgba(255,206,110,.30))}
.idc-awards-pick li:nth-child(2) .aw-b img{height:31px}
.idc-awards-pick .aw-b span{font:200 23px/1 var(--ui);font-variant-numeric:tabular-nums}
.idc-links{margin-top:10px;gap:10px}
@media (max-width:820px){ .idc-awards.idc-awards-pick{justify-content:center} }

/* the lightbox */
.aw-box{position:fixed;inset:0;margin:auto;width:min(640px,calc(100vw - 32px));height:min(680px,calc(100vh - 48px));
  padding:0;border:1px solid rgba(255,214,110,.18);background:#000;color:#fdf6e6;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,214,110,.04), 0 40px 140px -30px rgba(0,0,0,1), 0 0 90px -30px rgba(255,206,110,.22);
  opacity:0;transform:translateY(8px) scale(.985);transition:opacity .35s var(--ease), transform .35s var(--ease)}
.aw-box[open]{display:flex;flex-direction:column}
.aw-box.on{opacity:1;transform:none}
.aw-box::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* the three marks centred over the list (Dan: "CENTER THE BUTTONS FOR THE AWARDS IN THE LIGHTBOX"); × sits in the corner */
.aw-box-hd{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 56px 0}
.aw-tabs{display:flex;align-items:center;justify-content:center;gap:8px}
.aw-tab.aw-all{height:28px;padding:0 18px;font:600 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:#fdf6e6}
.aw-tab{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 8px;cursor:pointer;
  border:1px solid transparent;opacity:.45;transition:opacity .3s, border-color .3s}
.aw-tab:hover,.aw-tab:focus-visible{opacity:.8}
.aw-tab[aria-selected="true"]{opacity:1;border-color:rgba(255,214,110,.32)}
.aw-tab img{height:30px;width:auto;display:block}
.aw-tab:nth-child(2) img{height:22px}
.aw-tab span{font:200 17px/1 var(--ui);font-variant-numeric:tabular-nums}
.aw-x{all:unset;position:absolute;top:16px;right:14px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:rgba(253,246,230,.55);transition:color .3s}
.aw-x:hover,.aw-x:focus-visible{color:#fdf6e6}
.aw-x svg{width:16px;height:16px}
.aw-k{text-align:center;margin:16px 22px 8px;font:600 10px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,212,0,.85)}
.aw-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px 22px}
/* switching types: the list fades out and the new one fades in; the panel itself never changes size */
.aw-body{flex:1;min-height:0;display:flex;flex-direction:column;transition:opacity .18s var(--ease), transform .18s var(--ease)}
.aw-body.swap{opacity:0;transform:translateY(5px)}
.aw-yr{display:grid;grid-template-columns:46px 1fr;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.06)}
.aw-yr:first-child{border-top:0}
.aw-y{color:rgba(255,226,160,.6);font:500 11px/20px var(--ui);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.aw-yr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.aw-yr li{display:grid;gap:2px}
/* ALL: the award's own mark beside each line */
.aw-yr li.has-i{grid-template-columns:30px 1fr;column-gap:12px;align-items:start}
.aw-tx{display:grid;gap:2px}
.aw-i{height:34px;width:auto;justify-self:center;margin-top:-6px;filter:drop-shadow(0 0 6px rgba(255,206,110,.28))}
.aw-i-fest{height:22px;margin-top:0}
/* Dan, 2026-11-04: "ALL CAPS" in the award lists */
.aw-t{color:rgba(253,246,230,.92);font:300 14px/20px var(--ui);letter-spacing:.06em;text-transform:uppercase}
.aw-p{color:rgba(253,246,230,.78);font:500 10px/16px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.aw-p i{font-style:normal;color:rgba(255,212,0,.6);margin-right:4px}
.aw-c{color:rgba(253,246,230,.5);font:500 10px/16px var(--ui);letter-spacing:.14em;text-transform:uppercase}
.aw-c i{font-style:normal;color:rgba(255,212,0,.45)}
.aw-n{color:rgba(255,212,0,.75);font:500 11px/1 var(--ui);letter-spacing:.06em;margin-left:7px}
.aw-none{color:rgba(255,255,255,.55);font:300 14px/1.4 var(--ui);padding:10px 0}

/* ── even spacing (Dan, 2026-11-04: "THE ICONS DON'T SEEM TO BE EQUALLY SPACED"). They were spaced by their label
   widths, so CINEMATOGRAPHER pushed its neighbours out and the three award buttons were three different widths. Now
   every row on the card is one even grid of the same width: five equal columns for the roles (icons centred), three
   equal award buttons, and CALL / TEXT / EMAIL in the same three columns with ADD TO CONTACTS across the bottom. */
.idc-body{--row:min(100%,460px)}
@media (min-width:821px){
  .idc-roles{display:grid;grid-template-columns:repeat(5,1fr);gap:0;width:var(--row)}
  .idc-roles li{justify-self:center}
}
.idc-awards.idc-awards-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:var(--row)}
.idc-awards-pick li{display:block}
.idc-awards-pick .aw-b{width:100%;justify-content:center;padding:0 12px}
.idc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:var(--row)}
.idc-links .choice{text-align:center;padding-inline:8px}
.idc-links .choice-vcf{grid-column:1 / -1}
@media (max-width:820px){
  .idc-awards.idc-awards-pick,.idc-links{margin-inline:auto}
}

/* ── a sleeker scroll bar (Dan, 2026-11-04: "CAN WE HAVE A SLEEKER SCROLL BAR?"): a thin warm line, no track —
   on the awards list and on the page itself. Safari/Chrome take the ::-webkit rules; Firefox takes the thin one. */
html::-webkit-scrollbar,.aw-list::-webkit-scrollbar{width:6px;height:6px}
html::-webkit-scrollbar-track,.aw-list::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb,.aw-list::-webkit-scrollbar-thumb{background:rgba(255,214,110,.20);border-radius:3px}
html::-webkit-scrollbar-thumb:hover,.aw-list:hover::-webkit-scrollbar-thumb{background:rgba(255,214,110,.42)}
html::-webkit-scrollbar-corner,.aw-list::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  html,.aw-list{scrollbar-width:thin;scrollbar-color:rgba(255,214,110,.30) transparent}
}
.aw-list{padding-right:14px}

/* ── Dan, 2026-11-04: "ICONS ARE STILL NOT EQUALLY SPACED… I DON'T LIKE HOW THE AWARDS ARE THE SAME SIZE AS CALL TEXT
   EMAIL ADD TO CONTACTS… LINKEDIN SHOULD BE ON THAT CARD AS WELL".
   · the marks were centred as mark+number, and the laurel is wider than the statuettes, so the three marks landed at
     uneven steps. Each mark now has a fixed slot and each number a fixed slot, so all three groups are the same width
     and the marks sit at equal steps (same in the lightbox).
   · the awards are the bigger, prouder buttons; CALL / TEXT / EMAIL / LINKEDIN are a quieter row of four under them,
     ADD TO CONTACTS across the bottom. */
.idc-awards.idc-awards-pick{margin-top:22px}
.idc-awards-pick .aw-b{height:76px;gap:10px}
.idc-awards-pick .aw-b img{height:54px;width:60px;object-fit:contain}
.idc-awards-pick li:nth-child(2) .aw-b img{height:40px;width:60px}
.idc-awards-pick .aw-b span{width:36px;text-align:left;font-size:30px}
.idc-links{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.idc-links .choice{padding:11px 4px;font-size:10px;letter-spacing:.18em}
.aw-tab{width:82px;justify-content:center;gap:6px;padding:0}
.aw-tab img{width:34px;object-fit:contain}
.aw-tab span{width:22px;text-align:left}
.aw-tab.aw-all{width:auto;padding:0 18px}

/* ── the role icons lead (Dan, 2026-11-04: "MAKE THE ICONS LARGER SO THAT THEY DRIVE THE CENTERING AND ARE LARGER THAN
   THE TEXT"). The labels were wider than the drawings, so the words set the rhythm. The drawings are now the big
   thing — each centred in its fifth of the row — with a finer line so they stay elegant at size, and the labels are
   a small caption under them. */
.idc-roles{margin-top:4px}
.idc-roles li{gap:9px}
.idc-roles svg{width:48px;filter:drop-shadow(0 0 14px rgba(255,238,198,.14))}
.idc-roles svg g{stroke-width:1.05}
.idc-roles span{font-size:7.6px;letter-spacing:.12em}
@media (max-width:820px){ .idc-roles svg{width:40px} }
@media (max-width:420px){ .idc-roles svg{width:32px} .idc-roles span{font-size:7px} }

/* LinkedIn: the black-and-white logo in the card's top right corner (white plate, the "in" cut out to the black) */
.idcard{position:relative}
.idc-li{position:absolute;top:18px;right:18px;width:24px;height:24px;display:block;color:rgba(253,246,230,.72);
  transition:color .4s var(--ease), filter .4s var(--ease)}
.idc-li svg{width:100%;height:100%;display:block;fill:currentColor;fill-rule:evenodd}
.idc-li:hover,.idc-li:focus-visible{color:#fff;filter:drop-shadow(0 0 10px rgba(255,238,198,.35));outline:none}
/* contact: CALL / TEXT / EMAIL / ADD TO CONTACTS on one quiet line */
.idc-links{grid-template-columns:1fr 1fr 1fr 2fr}
.idc-links .choice-vcf{grid-column:auto}

/* Dan, 2026-11-04: "FOR THEM TO BALANCE, THE CAMERA ICON NEEDS TO BE WIDER THAN CINEMATOGRAPHER". Every drawing is now
   wider than its longest caption: the drawings scale with the row (up to 70px), the captions are set smaller and
   tighter so CINEMATOGRAPHER sits inside the camera's width. The line stays fine at any size. */
.idc-roles{container-type:inline-size}
.idc-roles li{gap:8px}
.idc-roles svg{width:min(70px,15.5cqi)}
.idc-roles svg g,.idc-roles svg g *{vector-effect:non-scaling-stroke;stroke-width:1.4px}
.idc-roles span{font-size:min(6.6px,1.46cqi);letter-spacing:.04em}
@media (max-width:820px){
  .idc-roles svg{width:66px}
  .idc-roles span{font-size:6.4px;letter-spacing:.03em}
}

/* Dan, 2026-11-04: "LINKEDIN SHOULD BE A HAIRLINE AND INSET" — the mark drawn in a hairline, like the role drawings,
   and set in from the corner so it lines up with the card's inner edge */
.idc-li{top:clamp(22px,2.8vw,44px);right:clamp(22px,2.8vw,44px);width:26px;height:26px}
.idc-li svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.idc-li svg *{vector-effect:non-scaling-stroke;stroke-width:1px}

/* …the drawings' empty margin is cropped off (one shared crop, so they keep one scale), so the camera's visible width
   is wider than CINEMATOGRAPHER under it */
.idc-roles svg{width:min(72px,16cqi)}
.idc-roles span{font-size:min(6.2px,1.35cqi);letter-spacing:.03em}
@media (max-width:820px){ .idc-roles svg{width:76px} .idc-roles span{font-size:6.2px} }

/* Dan, 2026-11-04: "THEY LOOK MORE BALANCED NOW BUT TOO CARTOONY". Redrawn finer: hairline strokes (one pixel at any
   size, like the LinkedIn mark), crisp corners, and the real details — clips under a playhead, reel hubs and a matte
   box, a ruled slate, a lens in two rings — so they read as drawings, not cartoons. Same size, same balance. */
.idc-roles svg g,.idc-roles svg g *{stroke-width:1px}
.idc-roles li{color:rgba(248,243,233,.7)}
.idc-roles svg{filter:drop-shadow(0 0 10px rgba(255,238,198,.10))}

/* the roles as words (Dan, 2026-11-04: "MAYBE DITCH THE ICONS ALL TOGETHER… JUST HAVE THE WORDS SEPARATED WITH A
   BULLET"): one line, spread across the same width as the buttons under it, a gold point between each */
.idc-roles.idc-roles-words{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;
  width:var(--row);gap:0;margin:2px 0 0;padding:0;list-style:none;container-type:normal}
.idc-roles-words li{grid-column:auto;display:block;gap:0;color:rgba(248,243,233,.74);
  font:500 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.idc-roles-words li.dot{color:rgba(255,212,0,.6);letter-spacing:0}
@media (max-width:820px){
  .idc-roles.idc-roles-words{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;width:100%;margin-inline:auto}
}
/* on a narrower card the line shrinks a touch rather than spilling past the buttons */
@media (min-width:821px){
  .idc-roles.idc-roles-words{container-type:inline-size}
  .idc-roles-words li{font-size:min(10px,2.2cqi)}
}

/* ── Dan, 2026-11-04 (on his phone): "TEXT ON MOBILE SEEMS NOT CRISP AND FADED ON CONTACT CARD, THE BUTTONS FOR THE
   AWARDS ARE NOT CENTERED WHEN OPENED UP ON MOBILE… THE ALL BUTTON IS TOO SMALL. ON BOTH MOBILE AND DESKTOP, THERE
   SHOULD BE FADED OUTLINES TO SHOW THAT THE AWARDS ARE BUTTONS" ─────────────────────────────────────────────────── */
/* every award button carries a faded outline, open or not; the open one is brighter */
.aw-tab{border-color:rgba(255,214,110,.18);opacity:.62}
.aw-tab:hover,.aw-tab:focus-visible{opacity:.9;border-color:rgba(255,214,110,.3)}
.aw-tab[aria-selected="true"]{opacity:1;border-color:rgba(255,214,110,.45)}
.idc-awards-pick .aw-b{border-color:rgba(255,214,110,.26)}
/* ALL: a real button */
.aw-tab.aw-all{height:36px;padding:0 30px;font-size:11px;letter-spacing:.3em}
@media (max-width:820px){
  /* phones blur an SVG filter, so the card drops the halation and keeps its text sharp and bright */
  .idc-body{filter:none}
  .idc-name{text-shadow:0 0 18px rgba(255,238,198,.18)}
  .idc-role{color:rgba(255,226,160,.9)}
  .idc-roles-words li{color:rgba(248,243,233,.9);font-size:10px}
  /* the roles break cleanly into two lines — no point left hanging at the end of the first */
  .idc-roles-words li.dot:nth-child(6){flex-basis:100%;height:0;overflow:hidden;font-size:0}
  /* TEXT / EMAIL / CALL in a row, ADD TO CONTACTS across the bottom */
  .idc-links{grid-template-columns:repeat(3,1fr)}
  .idc-links .choice-vcf{grid-column:1 / -1}
  .idc-links .choice{font-size:11px;color:rgba(248,243,233,.92);padding:13px 4px}
  /* the lightbox: the × sits above the marks, so the three marks centre in the full width */
  .aw-box-hd{padding:52px 12px 0}
  .aw-tabs{gap:8px}
  .aw-tab{width:88px}
  .aw-c{color:rgba(253,246,230,.62)}
}

/* ── the reel's tap controls: back 10 · play/pause · forward 10, in the middle of the picture ──────────────────── */
.reel-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(30px,9vw,80px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.reel-frame.playing.hot .reel-mid,.reel-frame.playing.paused .reel-mid{opacity:1}
.reel-frame.playing.hot .reel-mid button,.reel-frame.playing.paused .reel-mid button{pointer-events:auto}
.reel-mid button{all:unset;cursor:pointer;display:grid;place-items:center;color:#fff;border-radius:50%;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(255,206,110,.25));transition:transform .15s}
.reel-mid button:active{transform:scale(.92)}
.reel-skip{width:52px;height:52px}
.reel-skip svg{width:44px;height:44px}
.reel-skip .arc path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reel-skip text{fill:currentColor;font:700 8.4px/1 var(--ui);text-anchor:middle;letter-spacing:.02em}
.reel-big{width:72px;height:72px;border:1.5px solid rgba(255,255,255,.9) !important;background:rgba(0,0,0,.28) !important}
.reel-big svg{width:40px;height:40px;fill:currentColor}
.reel-big .pl{display:none}
.reel-frame.paused .reel-big .pl{display:block}
.reel-frame.paused .reel-big .pa{display:none}
.reel-frame.paused .reel-big svg{transform:translateX(2px)}

/* ── Dan, 2026-11-04 (on his phone): "ON MOBILE, SAME ISSUE FOR THE OLD WAY, FOR THE NEW WAY, THE SPACE BETWEEN AND THE
   WORK BUTTON… THE WORK BUTTON SHOULD BE LARGER ON MOBILE FOR A THUMB… YEAH THEY ARE TOO FADED ON MOBILE" ──────────── */
@media (max-width:820px){
  /* phones blur an SVG filter: the opening's type, the button and the menu go without it, sharp and brighter */
  .hero-line,.hero .hero-sub,.hero .cue-txt,.choices,.hdr .brand,.hdr .nav,.reel-play > *{filter:none}
  .hl-l b{color:#fff}
  .hl-l span{font-weight:300;color:rgba(255,255,255,.88)}
  .hl-us span{color:rgba(255,212,0,.95)}
  /* THE WORK: a thumb-sized button */
  .choices .choice{min-width:min(78vw,320px);padding:20px 28px;font-size:15px;font-weight:400;letter-spacing:.24em;
    color:#fdf6e6;border-color:rgba(255,214,110,.42);text-align:center}
  /* the player's controls at full strength */
  .reel-bar button{opacity:1}
  .reel-track{height:3px;background:rgba(255,255,255,.32)}
}

/* Dan, 2026-11-04: "THE GAP BETWEEN THE ROWS OF BUTTONS SHOULD ALL BE EQUAL… AWARDS, TEXT EMAIL CALL / ADD TO CONTACTS".
   One gap for everything in the button block: between the award buttons, between the rows, inside the contact rows. */
.idc-body{--gap:10px}
.idc-awards.idc-awards-pick{gap:var(--gap)}
.idc-links{margin-top:var(--gap);gap:var(--gap)}

/* ── the reel's play mark, classier (Dan, 2026-11-04: "THE PLAY BUTTON SHOULD BE MORE CLASSY THAT'S HOVERING ON THE 145
   PARK REEL… NOT YELLOW, CLEAR, NOT REALLY A HALO"). No yellow disc, no bloom, no breathing ring: a clear glass circle
   — the picture shows through it, softened — with a hairline white edge and a white triangle. */
.reel-halo,.reel-ring{display:none}
.reel-play{background:radial-gradient(70% 70% at 50% 50%, rgba(0,0,0,.10), rgba(0,0,0,.38))}
.reel-play > *{filter:none}
.reel-disc{width:clamp(76px,7vw,96px);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease)}
.reel-tri{margin-left:.3em;border-left:clamp(20px,1.9vw,26px) solid #fff;
  border-top:clamp(12px,1.15vw,15px) solid transparent;border-bottom:clamp(12px,1.15vw,15px) solid transparent;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.reel-play:hover .reel-disc,.reel-play:focus-visible .reel-disc{transform:scale(1.04);background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.9);box-shadow:0 10px 34px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.28)}
.reel-play:hover .reel-tri{transform:none}

/* ── Dan, 2026-11-04: "ON MOBILE, CARD NEEDS TO BE SMALL ENOUGH THAT IT SHOWS ALL OPTIONS WHEN SOMEONE HITS CONTACT…
   RIGHT NOW I JUST SEE THE AWARDS, I'M MISSING TEXT EMAIL CALL ADD TO CONTACTS". On a phone the whole card — photo to
   ADD TO CONTACTS — fits on one screen under the menu: the photo sizes itself to what's left of the screen's height,
   the spacing tightens, and CONTACT lands the card just under the menu. */
@media (max-width:820px){
  .sec-card{padding:10px 0 28px}
  #card{scroll-margin-top:64px}
  .idcard{gap:12px;padding:16px 16px 18px}
  .idc-port{width:clamp(120px, calc((100svh - 500px) * .8), 62vw)}
  .idc-name{font-size:28px;margin:0}
  .idc-role{margin-top:4px}
  .idc-rule{margin:10px auto 12px}
  .idc-awards.idc-awards-pick{margin-top:14px}
  .idc-awards-pick .aw-b{height:58px}
  .idc-awards-pick .aw-b img{height:42px}
  .idc-awards-pick li:nth-child(2) .aw-b img{height:31px}
  .idc-awards-pick .aw-b span{font-size:25px}
  .idc-links .choice{padding:12px 4px}
  .idc-li{top:14px;right:14px}
}

/* Dan, 2026-11-04: "LESS LEADING BETWEEN LINES ON MOBILE FOR MY ROLES" — the gap was counted twice (once each side of
   the hidden line break); now the two lines sit close, like one caption */
@media (max-width:820px){
  .idc-roles.idc-roles-words{row-gap:0}
  .idc-roles-words li{line-height:1.75}
}

/* Dan, 2026-11-04: "CAN YOU MAKE THE 10 SECOND EITHER WAY PLAY PAUSE BUTTONS LARGER" — about half again the size,
   scaled to the picture so they stay in proportion on a phone and on a big screen */
.reel-mid{gap:clamp(36px,10vw,110px)}
.reel-skip{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px)}
.reel-skip svg{width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px)}
.reel-skip .arc path{stroke-width:1.5}
.reel-big{width:clamp(92px,11vw,132px);height:clamp(92px,11vw,132px)}
.reel-big svg{width:clamp(50px,6vw,72px);height:clamp(50px,6vw,72px)}
/* (the reset on .reel-mid button out-ranked the sizes above — same sizes, stated at its weight) */
.reel-mid .reel-skip{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px)}
.reel-mid .reel-big{width:clamp(92px,11vw,132px);height:clamp(92px,11vw,132px)}

/* the reel taking the whole screen when a phone is turned sideways while it plays (main.js adds .reel-theatre) */
html.reel-theatre,html.reel-theatre body{overflow:hidden}
html.reel-theatre .hdr{opacity:0;pointer-events:none}
html.reel-theatre .reel,html.reel-theatre .sec-reel,html.reel-theatre .sec-reel .wrap,html.reel-theatre main{transform:none !important;filter:none !important}
html.reel-theatre .reel-frame{position:fixed;inset:0;z-index:2000;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;
  border:0;box-shadow:none;background:#000}
html.reel-theatre .reel-v{object-fit:contain}
html.reel-theatre .reel-feather{display:none}
html.reel-theatre .reel-bar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));
  padding-bottom:max(12px,env(safe-area-inset-bottom))}

/* ── the reel's tap controls, redesigned (Dan, 2026-11-04: "DO WE HAVE ANY BETTER DESIGNED BUTTONS? THEY LOOK OK ON
   MOBILE BUT BAD ON DESKTOP"). Same language as the play mark: three clear glass circles — the picture shows through,
   softened — each with a hairline white edge; finer skip arrows. One steady size (they no longer balloon on a big
   screen), the centre one larger. */
.reel-mid{gap:clamp(26px,4.6vw,60px)}
.reel-mid button{border-radius:50%;filter:none;
  background:rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s var(--ease), background .3s var(--ease), border-color .3s var(--ease)}
.reel-mid button:hover,.reel-mid button:focus-visible{background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.9) !important;outline:none}
.reel-mid .reel-skip{width:62px;height:62px}
.reel-mid .reel-skip svg{width:38px;height:38px}
.reel-skip .arc path{stroke-width:1.25}
.reel-skip text{font:600 7.6px/1 var(--ui);letter-spacing:.04em}
.reel-mid .reel-big{width:88px;height:88px}
.reel-mid .reel-big svg{width:38px;height:38px}
@media (max-width:820px){
  .reel-mid .reel-skip{width:60px;height:60px}
  .reel-mid .reel-big{width:84px;height:84px}
}
.reel-mid .reel-skip svg{width:46px;height:46px}
.reel-skip text{font-size:8px}

/* the way out of the sideways full screen: a clear glass shrink button in the corner, always there while it's on */
.reel-exit{display:none}
html.reel-theatre .reel-exit{all:unset;position:absolute;z-index:6;cursor:pointer;display:grid;place-items:center;
  top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px -10px rgba(0,0,0,.7)}
html.reel-theatre .reel-exit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.reel-theatre .reel-exit:active{transform:scale(.92)}
/* in the full screen the bar's full-screen mark reads as "shrink" */
html.reel-theatre .reel-full svg path{d:path("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5")}

/* Dan, 2026-11-04: "IF I TURN PHONE HORIZONTAL ON MOBILE THE TEXT LOOKS FADED AGAIN". A phone on its side is wider than
   the phone layout's cut-off, so the soft glow came back. The sharp, bright type now follows the device, not the width:
   any touch screen (and any short, sideways window) gets it, whichever way it's held. */
@media (hover:none) and (pointer:coarse), (orientation:landscape) and (max-height:540px){
  .hero-line,.hero .hero-sub,.hero .cue-txt,.choices,.hdr .brand,.hdr .nav,.reel-play > *,.idc-body{filter:none}
  .hl-l b{color:#fff}
  .hl-l span{font-weight:300;color:rgba(255,255,255,.88)}
  .hl-us span{color:rgba(255,212,0,.95)}
  .idc-name{text-shadow:0 0 18px rgba(255,238,198,.18)}
  .idc-role{color:rgba(255,226,160,.9)}
  .idc-roles-words li{color:rgba(248,243,233,.9)}
  .idc-links .choice{color:rgba(248,243,233,.92)}
  .aw-c{color:rgba(253,246,230,.62)}
  .reel-bar button{opacity:1}
}
@media (hover:none) and (pointer:coarse), (orientation:landscape) and (max-height:540px){
  .choices .choice{min-width:min(60vw,320px);padding:18px 28px;font-size:14px;font-weight:400;letter-spacing:.24em;
    color:#fdf6e6;border-color:rgba(255,214,110,.42);text-align:center}
}

/* true full screen: the whole picture (never cropped), the way out always in the corner, the bar's mark reads "shrink".
   One rule per spelling of full screen, so a browser that doesn't know one spelling still reads the other. */
.reel-frame:fullscreen{width:100%;height:100%;aspect-ratio:auto;border:0;background:#000}
.reel-frame:fullscreen .reel-v{object-fit:contain}
.reel-frame:fullscreen .reel-feather{display:none}
.reel-frame:fullscreen .reel-exit{all:unset;position:absolute;z-index:6;cursor:pointer;display:grid;place-items:center;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;color:#fff;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px -10px rgba(0,0,0,.7)}
.reel-frame:fullscreen .reel-exit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reel-frame:fullscreen .reel-exit:active{transform:scale(.92)}
.reel-frame:fullscreen .reel-full svg path{d:path("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5")}
.reel-frame:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;border:0;background:#000}
.reel-frame:-webkit-full-screen .reel-v{object-fit:contain}
.reel-frame:-webkit-full-screen .reel-feather{display:none}
.reel-frame:-webkit-full-screen .reel-exit{all:unset;position:absolute;z-index:6;cursor:pointer;display:grid;place-items:center;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:46px;height:46px;border-radius:50%;color:#fff;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 24px -10px rgba(0,0,0,.7)}
.reel-frame:-webkit-full-screen .reel-exit svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reel-frame:-webkit-full-screen .reel-exit:active{transform:scale(.92)}
.reel-frame:-webkit-full-screen .reel-full svg path{d:path("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5")}
/* the glass carries a faint smoke so the white marks still read over a bright frame */
.reel-mid button{background:rgba(16,16,16,.24) !important}
.reel-mid button:hover,.reel-mid button:focus-visible{background:rgba(16,16,16,.36) !important}
html.reel-theatre .reel-exit{background:rgba(16,16,16,.3)}
.reel-frame:fullscreen .reel-exit{background:rgba(16,16,16,.3)}
.reel-frame:-webkit-full-screen .reel-exit{background:rgba(16,16,16,.3)}

/* Dan, 2026-11-04: "TEXT AND NUMBERS ARE NOT BRIGHT ENOUGH ON THE CONTACT CARD ON MOBILE". The hairline weights (200/300)
   read as grey on a phone. On touch screens and phone widths the card's type goes up a weight and to full white/gold. */
@media (max-width:820px), (hover:none) and (pointer:coarse){
  .idc-name{color:#fff;font-weight:300}
  .idc-role{color:#ffd400;font-weight:600}
  .idc-roles-words li{color:#fff;font-weight:600}
  .idc-roles-words li.dot{color:#ffd400}
  .idc-awards-pick .aw-b span{color:#fff;font-weight:300;text-shadow:none}
  .idc-awards-pick .aw-b img{filter:drop-shadow(0 0 6px rgba(255,206,110,.35)) brightness(1.15)}
  .idc-links .choice{color:#fff;font-weight:500}
  .idc-links .choice-vcf{color:#fff}
}

/* ── the phone's short opening (Dan, 2026-11-04: "IT ALSO IS LOADING SLOW"; main.js adds html.hero-quick on phones
   and touch screens). Same order — logo, the three lines, the two lines of light, THE WORK — on a clock of about three
   seconds from the moment the logo has formed, instead of nine. */
html.hero-quick .hero .hero-line.r[data-r]{transition-delay:0s !important}
html.hero-quick .hero .hero-line.r.in[data-r] .hl-l:nth-child(1){transition-delay:.1s !important}
html.hero-quick .hero .hero-line.r.in[data-r] .hl-l:nth-child(2){transition-delay:.4s !important}
html.hero-quick .hero .hero-line.r.in[data-r] .hl-l:nth-child(4){transition-delay:.75s !important}
html.hero-quick .hero .hero-line.r.in[data-r] .hl-l:nth-child(3){transition-delay:.75s !important}
html.hero-quick .hero-line.in .g-top{transition-delay:.9s !important}
html.hero-quick .hero-line.in .g-top i{animation-delay:1.2s,1.2s !important}
html.hero-quick .hero-line.in .g-bot{transition-delay:.9s !important}
html.hero-quick .dock{transition-delay:.9s,0s,0s !important}
html.hero-quick .dock.in i{animation-delay:1.3s,1.3s !important}
html.hero-quick .hero .hero-sub.r[data-r]{transition-delay:1.3s !important}
html.hero-quick .hero .choices.r[data-r]{transition-delay:1.7s !important}
html.hero-quick .hero .choices.r.in[data-r] .choice{transition-delay:1.7s !important}
html.hero-quick .hero .cue.r[data-r]{transition-delay:2.2s !important}

/* ── a smooth reel (Dan, 2026-11-04: "THE REEL SEEMS TO BE STUTTERING") ──────────────────────────────────────────────
   · hidden glass is truly hidden: the blur behind a see-through button is costly to draw over moving video, and at
     opacity 0 the browser still draws it — so when the controls are away they are visibility:hidden too
   · while the reel plays, the drifting light on the lines and the header stops (html.reel-on, set by main.js) */
.reel-mid{visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.reel-frame.playing.hot .reel-mid,.reel-frame.playing.paused .reel-mid{visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.reel-frame.playing .reel-play{visibility:hidden}
.reel-frame.playing:not(.hot):not(.paused) .reel-bar{visibility:hidden}
html.reel-on .glow i,html.reel-on .dock i{animation-play-state:paused}
html.reel-on .hdr .brand,html.reel-on .hdr .nav{filter:none}