/* Santor Media Ventures: "Night Shift" (2026-10 redesign).
   One stylesheet for the homepage and every Discovery Log page.
   Brand: navy grounds, orange marks what matters, Roboto throughout.
   The /join/, /on-the-list/ and /wishlist/ pages keep their own CSS on purpose. */

:root{
  --orange:#F47A21; --deep:#D85C12; --navy:#0F1C2E; --night:#0A1422; --panel:#13233A;
  --cloud:#EEF1F4; --slate:#9AA6B2; --body:#C6D0DA; --soft:#AEBBC8;
  --line:rgba(255,255,255,.1);
  --wrap:1180px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* tilted cards and the rotated ticker poke past the edge on purpose; clip (not hidden) so nothing scrolls sideways and sticky still works */
html, body{ overflow-x:clip; }
body{
  font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
  background:var(--night); color:#fff; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--orange); color:var(--navy); padding:8px 14px; font-weight:700; z-index:99; border-radius:6px; }
.skip:focus{ left:12px; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* ---------- lockup (text, so the name stays editable) ---------- */
.lockup{ display:flex; align-items:center; gap:13px; }
/* Proportions follow Logos/SVG/lockup-primary-dark.svg: icon = 1.5x the wordmark size,
   subtitle = 0.24x, gap = 0.39x. site.js then measures the wordmark and sets the subtitle's
   letter-spacing so its edges line up with it (the guide: "set by measurement, not by eye").
   The letter-spacing here is only the no-JS fallback. */
.lockup img{ width:51px; height:51px; }
.lk-word{ display:block; font-weight:900; font-style:italic; font-size:34px; line-height:1; letter-spacing:-.012em; }
.lk-tor{ color:var(--orange); }
.lk-sub{ display:block; font-size:8.2px; font-weight:500; letter-spacing:.3em; color:var(--slate); margin-top:4px; text-transform:uppercase; white-space:nowrap; }

/* ---------- nav ---------- */
.nav{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; }
.navlinks{ display:flex; gap:26px; font-weight:500; font-size:15px; color:var(--cloud); align-items:center; }
.navlinks a:hover{ color:var(--orange); }
.navlinks a.hot{ position:relative; }
.navlinks a.hot::after{
  content:"new"; position:absolute; top:-11px; right:-20px; font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); background:var(--orange); padding:1px 5px; border-radius:3px; transform:rotate(8deg);
}
.navlinks a[aria-current="page"]{ color:var(--orange); }

/* ---------- sticky top bar ----------
   Always reachable, and it NEVER changes size or position on scroll: .scrolled only paints
   (background, blur, shadow). A bar that changes height on scroll fights Chrome's scroll
   anchoring and flip-flops at the threshold (seen 2026-10-16 at <=900px). */
.topbar{ position:sticky; top:0; z-index:50; background:var(--navy); transition:background .25s, box-shadow .25s; }
.topbar .nav{ padding:20px 0; }
.topbar.scrolled{ background:rgba(15,28,46,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line), 0 12px 30px rgba(0,0,0,.28); }
.navlinks a.active{ color:var(--orange); }
[id]{ scroll-margin-top:96px; }

/* ---------- buttons ---------- */
.btn{ display:inline-block; font-weight:700; font-size:16px; padding:15px 26px; border-radius:8px; transition:transform .15s ease, background .15s, color .15s, border-color .15s; }
.btn:hover{ transform:translateY(-2px) rotate(-1deg); }
.btn-o{ background:var(--orange); color:var(--navy); }
.btn-o:hover{ background:var(--deep); color:#fff; }
.btn-g{ border:1.5px solid rgba(255,255,255,.3); color:#fff; }
.btn-g:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- shared type ---------- */
.kicker{ color:var(--orange); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
h2.big{ font-weight:900; font-size:clamp(30px,3.6vw,48px); line-height:1.05; letter-spacing:-.02em; }
.lead{ font-size:18px; line-height:1.65; color:var(--soft); }
.lead + .lead{ margin-top:14px; }
.lead strong{ color:#fff; }
section{ position:relative; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--navy); overflow:hidden; }
.field{ position:absolute; inset:0; pointer-events:none; opacity:.55; }
.field svg{ width:100%; height:100%; }
.stage{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:56px 0 96px; }
.hero h1{ font-weight:900; font-size:clamp(40px,5.6vw,80px); line-height:.95; letter-spacing:-.03em; }
.hero h1 .o{ color:var(--orange); }
.hero h1 .line{ display:block; opacity:0; transform:translateY(40px); animation:rise .7s cubic-bezier(.2,.9,.25,1.15) forwards; }
.hero h1 .line:nth-child(2){ animation-delay:.12s; margin-left:.6em; }
.hero h1 .line:nth-child(3){ animation-delay:.24s; margin-left:.2em; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.hero .lede{ margin-top:28px; font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:#CBD5DF; max-width:44ch; opacity:0; transform:translateY(20px); animation:rise .7s .4s forwards; }
.hero .cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(20px); animation:rise .7s .55s forwards; }

/* flipbook: a 5x2 sprite of real keys, stepped like a pencil test */
.flip{ position:relative; justify-self:center; transform:rotate(3deg); animation:settle 1s .3s cubic-bezier(.2,.9,.25,1.3) both; }
@keyframes settle{ from{ transform:rotate(14deg) translateY(60px); opacity:0; } to{ transform:rotate(3deg); opacity:1; } }
.paper{ width:min(380px,74vw); aspect-ratio:1; border-radius:6px; background:#f3efe8 0 0/500% 200% no-repeat; box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 10px #f3efe8; }
.pegs{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); display:flex; gap:44px; align-items:center; }
.pegs i{ display:block; background:var(--navy); border-radius:20px; height:9px; width:34px; }
.pegs i:nth-child(2){ width:13px; height:13px; border-radius:50%; }
.xsheet{ position:absolute; left:-64px; bottom:30px; background:var(--orange); color:var(--navy); padding:12px 14px; border-radius:6px; transform:rotate(-7deg); box-shadow:0 12px 24px rgba(0,0,0,.35); min-width:120px; }
.xsheet b{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.xsheet .fr{ display:block; font-weight:900; font-size:30px; font-variant-numeric:tabular-nums; line-height:1.05; }
.xsheet .nm{ display:block; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-top:2px; }
.ticks{ display:flex; gap:3px; margin-top:6px; }
.ticks em{ width:7px; height:14px; background:rgba(15,28,46,.25); border-radius:1px; }
.ticks em.on{ background:var(--navy); }
.flip .caption{ position:absolute; z-index:3; right:-14px; bottom:-62px; font-size:12px; color:var(--slate); transform:rotate(-3deg); max-width:220px; text-align:right; line-height:1.45; }
.flip .caption::before{ content:""; display:inline-block; width:28px; height:1px; background:var(--slate); vertical-align:middle; margin-right:8px; }

/* ticker */
.ticker{ position:relative; z-index:2; background:var(--orange); color:var(--navy); transform:rotate(-1.4deg); margin:0 -20px -14px; overflow:hidden; white-space:nowrap; }
.track{ display:inline-block; padding:14px 0; font-weight:900; font-size:19px; letter-spacing:.02em; animation:tick 38s linear infinite; }
.track span{ margin:0 22px; }
.track .dot{ display:inline-block; width:8px; height:8px; margin:0; background:var(--navy); border-radius:1px; vertical-align:middle; opacity:.55; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- the stance ---------- */
.stance{ padding:120px 0 90px; }
.stance .split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:start; }
.stance h2{ font-weight:900; font-size:clamp(30px,3.8vw,52px); line-height:1.04; letter-spacing:-.025em; }
.stance h2 em{ font-style:normal; color:var(--orange); }

/* ---------- Discovery Log teaser ---------- */
.dlog{ padding:90px 0 130px; }
.dhead{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:end; }
.tagline{ font-weight:900; font-style:italic; color:var(--orange); font-size:20px; margin-top:16px; }
.frames{ display:grid; grid-template-columns:1.1fr .9fr 1fr; gap:34px; margin-top:64px; align-items:start; }
.frame{ display:block; background:var(--panel); border-radius:12px; overflow:hidden; transition:transform .25s cubic-bezier(.2,.9,.25,1.3), box-shadow .25s; }
.frames .frame:nth-child(1){ transform:rotate(-1.5deg); }
.frames .frame:nth-child(2){ transform:rotate(1.8deg) translateY(56px); }
.frames .frame:nth-child(3){ transform:rotate(-.6deg) translateY(18px); }
.frames .frame:hover{ transform:rotate(0) translateY(-6px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,.35); }
.frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; }
.frame .meta{ padding:18px 20px 22px; }
.stamp{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); border:1.5px solid var(--orange); padding:3px 7px; border-radius:4px; transform:rotate(-2deg); }
.frame h3{ font-weight:700; font-size:20px; line-height:1.2; margin-top:12px; }
.frame time{ display:block; color:var(--slate); font-size:13px; margin-top:8px; }
.more{ margin-top:110px; text-align:center; }
.more a{ font-weight:700; color:var(--orange); font-size:18px; border-bottom:2px solid; padding-bottom:3px; }

/* Discovery Log on hold (public build): a coming-soon card instead of entries */
.navlinks a.hot.soon::after{ content:"soon"; }
.soon-card{ margin-top:56px; border:2px dashed rgba(255,255,255,.18); border-radius:18px; padding:60px 28px; text-align:center; transform:rotate(-.6deg); }
.soon-stamp{ display:inline-block; font-weight:900; font-size:clamp(28px,4vw,44px); letter-spacing:.06em; text-transform:uppercase; color:var(--orange); border:3px solid var(--orange); padding:8px 22px; border-radius:8px; transform:rotate(-4deg); }
.soon-card p{ margin-top:24px; color:var(--soft); font-size:17px; }

/* hero bouncing-ball pencil test (drawn by site.js) */
.paper.ball-test{ background:#f3efe8; }
.ballsvg{ display:block; width:100%; height:100%; }

/* ---------- Reel Review ---------- */
.offer{ background:var(--cloud); color:var(--navy); padding:110px 0 100px; }
.offer .kicker{ color:var(--deep); }
.offer .lead{ color:rgba(15,28,46,.74); }
.offer .lead strong{ color:var(--navy); }
.offer-card{
  margin-top:48px; background:var(--navy); color:#fff; border-radius:18px; border-top:5px solid var(--orange);
  padding:44px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; transform:rotate(-.5deg);
  box-shadow:0 30px 60px rgba(15,28,46,.18);
}
.offer-card > *{ transform:rotate(.5deg); }
.offer-card h3{ font-weight:900; font-size:34px; letter-spacing:-.01em; margin:6px 0 12px; }
.offer-card .tag{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); }
.offer-card p{ color:var(--body); font-size:17px; }
.offer-card .btn{ margin-top:26px; }
.quote{ border-left:3px solid var(--orange); padding:3px 0 3px 18px; margin-top:34px; max-width:53ch; }
/* weight 400 is required: the font URL loads italic 400 and 900, and without it the quote picks 900 */
.quote p{ font-size:15px !important; line-height:1.62; color:#DDE5EC !important; font-style:italic; font-weight:400; }
.quote cite{ display:block; margin-top:13px; font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--orange); }
.incl{ list-style:none; align-self:center; }
.incl li{ position:relative; padding:10px 0 10px 26px; font-size:15.5px; color:#DBE3EA; line-height:1.5; border-top:1px solid var(--line); }
.incl li:first-child{ border-top:0; }
.incl li::before{ content:""; position:absolute; left:2px; top:19px; width:8px; height:8px; border-radius:1px; background:var(--orange); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:80px; }
.step:nth-child(2){ transform:translateY(22px); }
.step:nth-child(3){ transform:translateY(-12px); }
.step:nth-child(4){ transform:translateY(14px); }
.step .num{ width:44px; height:44px; border-radius:50%; background:var(--orange); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; margin-bottom:16px; transform:rotate(-6deg); }
.step h4{ font-size:18px; font-weight:700; margin-bottom:7px; }
.step p{ font-size:15px; color:rgba(15,28,46,.72); line-height:1.55; }
.promise{ margin-top:70px; display:flex; gap:34px; flex-wrap:wrap; border-top:2px solid var(--navy); padding-top:26px; }
.promise div{ flex:1 1 210px; }
.promise dt{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--deep); margin-bottom:6px; }
.promise dd{ font-size:15.5px; color:rgba(15,28,46,.8); line-height:1.5; }

/* ---------- Frontier band ----------
   Wears the newsletter's own Field Guide skin (its warm-night theme, the one issues ship in)
   so it reads as the same thing people get in their inbox. Colors from
   Automated Newsletter/brand/frontier/brand.json paletteDark. #2B2620 is the exact background
   of both header PNGs, so they sit in the band with no visible box. */
.frontier{ background:#2B2620; color:#F3EAD9; padding:96px 0 0; overflow:hidden; text-align:center; }
.fr-head{ max-width:760px; }
.fr-kicker{ font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#E8B375; }
.frontier h2{ margin:14px auto 0; max-width:640px; }
.frontier h2 img{ width:100%; height:auto; }
.fr-tag{ font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(20px,2.2vw,26px); line-height:1.35; color:#F3EAD9; margin-top:4px; }
.fr-sub{ font-size:17px; color:#CDBFA6; margin:14px auto 0; max-width:52ch; }
.fr-btn{ display:inline-block; margin-top:30px; background:#E8B375; color:#1C1813; font-weight:700; font-size:16px; padding:15px 26px; border-radius:8px; transition:transform .15s, background .15s; }
.fr-btn:hover{ background:#F3EAD9; transform:translateY(-2px) rotate(-1deg); }
/* the hero sits at half width, centered; its sides fade into the band so there's no hard box */
.fr-hero{ display:block; width:min(600px,100%); height:auto; margin:36px auto 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); }

/* ---------- about ---------- */
.about{ padding:120px 0 90px; }
.about .split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.creds{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.chip{ border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 18px; font-weight:500; font-size:15px; }
.chip b{ color:var(--orange); }
.creds .chip:nth-child(2){ transform:rotate(-2deg); } .creds .chip:nth-child(3){ transform:rotate(1.5deg); }
.chip i{ font-style:italic; color:var(--body); }
/* the film list reads like an end-credits card: three studios, staggered, not a ruled grid */
.reel{ margin-top:80px; max-width:900px; }
.reel-frame{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:14px 14px 0 rgba(244,122,33,.85), 0 30px 60px rgba(0,0,0,.4); }
.reel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.reel-note{ margin-top:22px; font-size:14px; color:var(--slate); }
.credits{ margin-top:80px; position:relative; }
.roll{ display:grid; grid-template-columns:1.35fr 1fr .8fr; gap:28px; align-items:start; }
.studio{ border-top:2px solid var(--orange); padding-top:18px; }
.studio.s2{ transform:translateY(26px); border-color:rgba(255,255,255,.35); }
.studio.s3{ transform:translateY(8px); border-color:rgba(255,255,255,.2); }
.studio h3{ font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:12px; }
.studio p{ color:var(--soft); font-size:16px; line-height:1.9; }
.studio i{ font-style:italic; font-weight:400; }
.studio p span{ white-space:nowrap; }
.studio p span:not(:last-child)::after{ content:" \00B7"; font-style:normal; color:var(--slate); }
.credits .aside{ margin-top:56px; font-size:13px; color:var(--slate); }

/* ---------- how this gets made ---------- */
.made{ padding:40px 0 110px; }
.made .card{ background:var(--panel); border-radius:18px; padding:48px; display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; position:relative; }
.made .card::before{ content:""; position:absolute; left:-10px; top:40px; width:6px; height:90px; background:var(--orange); border-radius:4px; }

/* ---------- contact + footer ---------- */
.contact{ text-align:center; padding:100px 0; background:var(--navy); }
.contact p{ color:var(--soft); font-size:18px; margin-top:16px; }
.contact .mail{ display:inline-block; margin-top:22px; font-size:clamp(20px,2.9vw,30px); font-weight:700; color:var(--orange); }
footer{ background:#070F1A; color:var(--slate); padding:44px 0 38px; font-size:14px; }
.frow{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; }
footer .lockup{ gap:12px; }
footer .lockup img{ width:45px; height:45px; }
footer .lk-word{ font-size:30px; }
footer .lk-sub{ font-size:7.3px; margin-top:4px; }
.fmeta{ text-align:right; line-height:1.65; }
.fmeta .legal{ color:var(--body); font-weight:500; }
.fbot{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; }
.fbot a:hover{ color:var(--orange); }

/* ---------- scroll reveal (JS adds .in; without JS everything shows) ---------- */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.25,1.1); }
.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   Discovery Log pages
   ========================================================= */
.dl-top{ background:var(--navy); }
.dl-index-head{ padding:50px 0 70px; }
.dl-index-head h1{ font-weight:900; font-size:clamp(44px,6vw,84px); line-height:.95; letter-spacing:-.03em; }
.dl-index-head h1 span{ color:var(--orange); }
.dl-index-head .lead{ max-width:58ch; margin-top:22px; }
.dl-index-head .feed{ display:inline-block; margin-top:18px; font-size:14px; font-weight:700; color:var(--orange); border-bottom:1.5px solid; }

.dl-list{ padding:70px 0 120px; display:flex; flex-direction:column; gap:70px; }
.dl-row{ display:grid; grid-template-columns:120px 1fr 1.05fr; gap:34px; align-items:center; max-width:1040px; }
.dl-row:nth-child(even){ margin-left:auto; }
.dl-row .n{ font-weight:900; font-size:84px; line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--orange); }
.dl-row h2{ font-weight:900; font-size:clamp(22px,2.4vw,30px); line-height:1.15; letter-spacing:-.01em; }
.dl-row p{ color:var(--soft); margin-top:10px; font-size:16px; }
.dl-row time{ display:block; color:var(--slate); font-size:13px; margin-top:12px; }
.dl-row .thumb{ border-radius:12px; overflow:hidden; transform:rotate(1.5deg); transition:transform .25s cubic-bezier(.2,.9,.25,1.3); }
.dl-row:nth-child(even) .thumb{ transform:rotate(-1.5deg); }
.dl-row:hover .thumb{ transform:rotate(0) scale(1.03); }
.dl-row .thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.dl-row:hover h2{ color:var(--orange); }

/* single post */
.post-head{ padding:34px 0 0; }
.post-head .inner{ max-width:820px; }
.post-head .back{ font-size:14px; font-weight:700; color:var(--slate); }
.post-head .back:hover{ color:var(--orange); }
.post-head .stamp{ margin-top:30px; }
.post-head h1{ font-weight:900; font-size:clamp(34px,4.6vw,62px); line-height:1.02; letter-spacing:-.025em; margin-top:16px; }
.post-head .dek{ font-size:clamp(18px,1.8vw,21px); color:#CBD5DF; margin-top:20px; line-height:1.55; max-width:58ch; }
.post-head time{ display:block; color:var(--slate); font-size:14px; margin-top:18px; }
.beforeafter{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin:50px 0 -60px; position:relative; z-index:2; }
.beforeafter figure:first-child{ transform:rotate(-2deg); }
.beforeafter figure:last-child{ transform:rotate(1.5deg) translateY(-14px); }
.beforeafter .arrow{ font-size:34px; color:var(--orange); font-weight:900; }
.beforeafter img{ border-radius:10px; box-shadow:0 20px 40px rgba(0,0,0,.4); }
.beforeafter figcaption{ font-size:13px; color:var(--slate); margin-top:10px; }

.post-body{ background:var(--night); padding:110px 0 40px; }
.prose{ max-width:700px; margin:0 auto; }
.prose > p{ font-size:19px; line-height:1.72; color:#D7DEE6; margin-top:22px; }
.prose > p:first-child{ margin-top:0; }
.prose h2{ font-weight:900; font-size:27px; line-height:1.2; letter-spacing:-.01em; margin-top:56px; }
.prose strong{ color:#fff; }
.prose a{ color:var(--orange); border-bottom:1px solid rgba(244,122,33,.5); }
.prose figure{ margin:40px -60px 0; }
.prose figure img{ width:100%; border-radius:12px; }
.prose figure.tilt-l{ transform:rotate(-.8deg); }
.prose figure.tilt-r{ transform:rotate(.8deg); }
.prose figcaption{ font-size:14px; color:var(--slate); margin-top:12px; padding:0 60px; line-height:1.5; }
.prose .verdict{ display:inline-block; margin-top:22px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--orange); padding:5px 10px; border-radius:4px; transform:rotate(-1.5deg); }
.prose .verdict.miss{ background:transparent; color:var(--orange); border:1.5px solid var(--orange); }

.watch{ display:block; position:relative; margin:40px -60px 0; width:calc(100% + 120px); border:0; padding:0; background:none; cursor:pointer; border-radius:12px; overflow:hidden; text-align:left; font:inherit; color:#fff; }
.watch img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .3s; }
.watch:hover img{ transform:scale(1.03); }
.watch .play{ position:absolute; left:24px; bottom:22px; display:flex; align-items:center; gap:12px; font-weight:900; font-size:18px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.watch .play::before{ content:""; width:52px; height:52px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230F1C2E'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow:0 8px 20px rgba(0,0,0,.35); }
.watch .len{ position:absolute; right:18px; top:16px; background:rgba(10,20,34,.8); font-size:12px; font-weight:700; padding:4px 8px; border-radius:4px; }

.learned{ max-width:820px; margin:70px auto 0; background:var(--panel); border-radius:18px; padding:40px 44px; position:relative; transform:rotate(-.4deg); }
.learned h2{ font-weight:700; font-size:24px; margin-bottom:8px; }
.learned ul{ list-style:none; }
.learned li{ padding:14px 0 14px 30px; border-top:1px solid var(--line); position:relative; color:var(--body); font-size:17px; line-height:1.6; }
.learned li:first-of-type{ border-top:0; }
.learned li::before{ content:""; position:absolute; left:2px; top:23px; width:8px; height:8px; border-radius:1px; background:var(--orange); }
.learned li strong{ color:#fff; }
.next-up{ max-width:700px; margin:50px auto 0; color:var(--soft); font-size:17px; }
.next-up strong{ color:#fff; }

.pager{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1040px; margin:80px auto 0; }
.pager a{ display:block; border:1px solid var(--line); border-radius:14px; padding:22px 24px; transition:border-color .2s, transform .2s; }
.pager a:hover{ border-color:var(--orange); transform:translateY(-3px); }
.pager small{ display:block; color:var(--slate); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.pager b{ display:block; margin-top:6px; font-size:17px; line-height:1.3; }
.pager .nx{ text-align:right; grid-column:2; }

.signup{ max-width:1040px; margin:90px auto 0; background:var(--navy); color:#fff; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:18px; padding:40px 44px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; transform:rotate(.4deg); }
.signup b{ display:block; font-weight:900; font-size:26px; line-height:1.15; }
.signup span{ display:block; margin-top:6px; font-size:16px; color:var(--soft); max-width:48ch; }
.signup .btn{ background:var(--orange); color:var(--navy); }
.signup .btn:hover{ background:var(--deep); color:#fff; }

/* video dialog */
dialog.player{ border:0; padding:0; background:transparent; max-width:min(1000px,94vw); width:100%; margin:auto; }
dialog.player::backdrop{ background:rgba(5,10,18,.86); }
dialog.player video{ width:100%; border-radius:12px; background:#000; }
dialog.player .bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; color:#fff; margin-bottom:10px; font-weight:700; }
dialog.player button{ background:var(--orange); color:var(--navy); border:0; font:inherit; font-weight:700; padding:8px 14px; border-radius:6px; cursor:pointer; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .prose figure, .watch{ margin-left:0; margin-right:0; width:100%; }
  .prose figcaption{ padding:0; }
}
@media (max-width:900px){
  .stage{ grid-template-columns:1fr; padding:30px 0 100px; gap:70px; }
  .xsheet{ left:-14px; bottom:-26px; transform:rotate(-7deg) scale(.78); transform-origin:left bottom; }
  .flip .caption{ right:0; }
  .stance .split, .about .split, .made .card, .dhead, .offer-card{ grid-template-columns:1fr; gap:22px; }
  .roll{ grid-template-columns:1fr; gap:26px; }
  .studio.s2, .studio.s3{ transform:none; }
  .credits{ margin-top:56px; }
  .reel{ margin-top:56px; }
  .reel-frame{ box-shadow:8px 8px 0 rgba(244,122,33,.85); }
  .frames{ grid-template-columns:1fr; gap:28px; }
  .frames .frame:nth-child(n){ transform:none; }
  .steps{ grid-template-columns:1fr 1fr; gap:30px; }
  .step:nth-child(n){ transform:none; }
  /* narrow screens: one fixed row, the icon plus all four links. Same in every scroll state. */
  .topbar .nav{ flex-wrap:nowrap; padding:10px 0; gap:14px; }
  .topbar .lockup img{ width:32px; height:32px; }
  .topbar .lockup > span{ display:none; }
  .navlinks{ flex:1; justify-content:flex-end; gap:14px; font-size:13.5px; }
  .navlinks a.hot::after{ display:none; }
  [id]{ scroll-margin-top:64px; }
  .dl-row{ grid-template-columns:1fr; gap:14px; }
  .dl-row .n{ font-size:56px; }
  .beforeafter{ grid-template-columns:1fr; margin-bottom:-40px; }
  .beforeafter .arrow{ transform:rotate(90deg); justify-self:center; }
  .made .card{ padding:32px 26px; }
  .offer-card{ padding:32px 26px; transform:none; } .offer-card > *{ transform:none; }
}
@media (max-width:560px){
  .wrap{ padding:0 16px; }
  .steps{ grid-template-columns:1fr; }
  .fmeta{ text-align:left; }
  .pager{ grid-template-columns:1fr; } .pager .nx{ grid-column:1; }
  .learned{ padding:30px 22px; transform:none; }
  .signup{ padding:30px 24px; transform:none; }
  .prose > p{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .hero h1 .line, .hero .lede, .hero .cta, .js .reveal{ opacity:1 !important; transform:none !important; }
}