/* ==========================================================================
   HOOTERS: THE MOVIE — site.css
   Art direction: Clearwater, 1983, meets a working film production office.
   Call sheets, bar walls, film strips, stripboards, slates, neon, end credits.
   Breakpoints: ≤760 phone, 761–900 tablet, ≥901 desktop.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{ font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/anton-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/anton-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/archivo-black-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/archivo-black-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face{ font-family:"Special Elite"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/special-elite-latin.woff2") format("woff2"); }
@font-face{ font-family:"Permanent Marker"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/permanent-marker-latin.woff2") format("woff2"); }
@font-face{ font-family:"Yellowtail"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/yellowtail-latin.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root{
  --orange:#ef5b24;
  --orange-deep:#c93f12;
  --orange-light:#f7854f;
  --rust:#9d2e2a;
  --teal:#0d292e;
  --teal-2:#173c42;
  --cream:#fff5d8;
  --cream-2:#fffaf0;
  --paper:#fbf2dc;
  --sand:#f5e8c7;
  --gold:#d7a72c;
  --ink:#0d292e;
  --chalk:#f2eee4;
  --film:#151210;

  --f-display:"Anton", Impact, "Arial Narrow Bold", sans-serif-condensed, sans-serif;
  --f-heavy:"Archivo Black", "Arial Black", Impact, sans-serif;
  --f-body:"Space Grotesk", "Trebuchet MS", Arial, sans-serif;
  --f-type:"Special Elite", "Courier New", monospace;
  --f-marker:"Permanent Marker", "Comic Sans MS", cursive;
  --f-script:"Yellowtail", "Brush Script MT", cursive;
  --f-mono:"Courier New", "Lucida Console", monospace;

  --wrap:1240px;
  --gutter:18px;
  --header-h:72px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --stripes:linear-gradient(180deg, var(--gold) 0 33.3%, var(--orange) 33.3% 66.6%, var(--rust) 66.6%);
}
@media (min-width:901px){
  :root{ --gutter:30px; --header-h:92px; }
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--header-h); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; min-width:0; overflow-x:clip;
  background:var(--teal); color:var(--cream);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Film grain over everything. Purely decorative; ignores the mouse. */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img,picture,canvas,svg{ display:block; max-width:100%; }
img{ height:auto; }
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; }
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.sheet :focus-visible, .page-sheet :focus-visible, .script :focus-visible, .prod .band__head :focus-visible{ outline-color:var(--ink); }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }

.skip{
  position:absolute; left:12px; top:-100px; z-index:100;
  padding:10px 14px; border-radius:8px; background:var(--orange); color:var(--ink);
  font-weight:700; text-decoration:none;
}
.skip:focus{ top:12px; }

/* honeypot */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.nowrap{ white-space:nowrap; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- Shared pieces ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 16px;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{ content:""; flex:none; width:38px; height:9px; background:var(--stripes); transform:skewX(-20deg); }
.eyebrow--ink::before{ box-shadow:0 0 0 1px rgba(13,41,46,.5); }

.h2{
  margin:0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(46px,11vw,104px); line-height:.9; letter-spacing:.005em; text-transform:uppercase;
  overflow-wrap:anywhere;
}
.h2__sub{
  display:block; margin-top:.15em; color:var(--cream);
  font-family:var(--f-script); text-transform:none; font-size:.5em; line-height:1; letter-spacing:0;
}
.h2__script{ font-family:var(--f-script); text-transform:none; color:var(--orange); font-size:.78em; letter-spacing:0; margin:0 .06em; }
.hl{ color:var(--orange); }
.band__head{ max-width:880px; margin-bottom:38px; }
.band__intro{ margin:20px 0 0; font-size:17px; line-height:1.55; }
@media (min-width:901px){
  .h2{ font-size:clamp(60px,7.4vw,116px); }
  .band__intro{ font-size:20px; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:12px 22px;
  border:2px solid var(--ink); border-radius:999px;
  background:var(--orange); color:var(--ink);
  font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  box-shadow:4px 5px 0 var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ background:var(--orange-light); transform:translate(2px,2px); box-shadow:2px 3px 0 var(--ink); }
.btn:active{ transform:translate(4px,5px); box-shadow:0 0 0 var(--ink); }
.btn--block{ width:100%; }
.btn--sm{ min-height:40px; padding:8px 16px; font-size:12px; box-shadow:3px 3px 0 var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:rgba(13,41,46,.08); }

.status{ display:flex; flex-wrap:wrap; gap:9px; margin:28px 0 0; }
.status--sm{ margin-top:16px; justify-content:center; }
.pill{
  padding:8px 12px; border:1.5px dashed rgba(255,245,216,.45); border-radius:4px;
  color:var(--cream); background:rgba(13,41,46,.35);
  font-family:var(--f-type); font-size:13px; letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
}
.status--sm .pill{ padding:6px 10px; font-size:12px; }
.pill.is-hot{ border:1.5px solid var(--ink); color:var(--ink); background:var(--orange); box-shadow:3px 3px 0 var(--ink); transform:rotate(-2deg); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  background:linear-gradient(180deg, rgba(13,41,46,.72), rgba(13,41,46,0));
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:rgba(13,41,46,.97);
  box-shadow:0 3px 0 var(--orange);
}
/* No backdrop-filter here: it would turn the header into the containing block for the fixed mobile menu. */
.site-header__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:100%; }
.site-logo{ display:block; flex:none; }
.site-logo img{ width:124px; height:auto; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.site-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.site-nav a:not(.btn){
  position:relative; padding:6px 0; color:var(--cream);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
}
.site-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn).is-current::after{ transform:scaleX(1); }
.nav-toggle{ display:none; }
.site-nav__cta{ white-space:nowrap; }

@media (min-width:901px){
  .site-logo img{ width:168px; }
}
@media (min-width:901px) and (max-width:1100px){
  .site-logo img{ width:146px; }
  .site-nav{ gap:14px; }
  .site-nav a:not(.btn){ font-size:12px; letter-spacing:.08em; }
  .site-nav__cta{ padding:8px 12px; letter-spacing:.04em; }
}
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex; align-items:center; gap:10px; z-index:2;
    padding:8px 12px; border:2px solid rgba(255,245,216,.6); border-radius:999px;
    background:rgba(13,41,46,.55); color:var(--cream);
    font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  }
  .nav-toggle__bars{ display:grid; gap:4px; width:18px; }
  .nav-toggle__bars i{ display:block; height:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .site-nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; justify-content:center; gap:22px;
    padding:var(--header-h) var(--gutter) 40px;
    background:var(--teal);
    background-image:radial-gradient(circle at 85% 15%, rgba(239,91,36,.25), transparent 40%);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .site-nav.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .site-nav a:not(.btn){ font-family:var(--f-display); font-size:clamp(34px,9vw,52px); font-weight:400; letter-spacing:.02em; }
  .site-nav a:not(.btn)::after{ height:5px; }
  .site-nav__cta{ margin-top:12px; font-size:14px; }
  body.nav-open{ overflow:hidden; }
}


.site-header.is-scrolled{ box-shadow:0 3px 0 var(--gold), 0 6px 0 var(--orange), 0 9px 0 var(--rust); }

/* ==========================================================================
   HERO — the poster
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; padding:calc(var(--header-h) + 34px) 0 110px;
  display:flex; align-items:center;
  color:var(--cream-2);
}
.hero__bg{ position:absolute; inset:0; z-index:-3; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:62% 50%; filter:grayscale(.35) sepia(.35) saturate(1.15) contrast(1.06) brightness(.85); }
.hero__shade{
  position:absolute; inset:0; z-index:-2;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(13,41,46,.5) 0%, rgba(13,41,46,.92) 55%, rgba(13,41,46,.98) 100%);
}
/* Striped '80s sunset, rising behind the call sheet */
.hero__sun{
  position:absolute; z-index:-1; right:-24vw; top:calc(var(--header-h) - 70px);
  width:min(84vw,460px); aspect-ratio:1; border-radius:50%;
  background:linear-gradient(180deg, #ffd166 0%, #ff9e3d 34%, var(--orange) 62%, var(--rust) 100%);
  opacity:.34;
  -webkit-mask:linear-gradient(#000 0 46%, transparent 46%), repeating-linear-gradient(180deg, #000 0 15px, transparent 15px 23px);
          mask:linear-gradient(#000 0 46%, transparent 46%), repeating-linear-gradient(180deg, #000 0 15px, transparent 15px 23px);
}
.hero__grid{ display:grid; grid-template-columns:1fr; gap:64px; align-items:center; }
.hero__copy{ position:relative; min-width:0; }

.hero__title{ margin:0; font-weight:400; line-height:.82; }
.hero__word{
  position:relative; display:inline-block;
  font-family:var(--f-display); font-size:clamp(84px,24.5vw,140px); letter-spacing:.01em; text-transform:uppercase;
  color:var(--orange);
  /* the 3D extrude: cream sides, then an ink drop */
  text-shadow:
    .006em .006em 0 var(--cream), .012em .012em 0 var(--cream), .018em .018em 0 var(--cream), .024em .024em 0 var(--cream),
    .03em .03em 0 var(--ink), .036em .036em 0 var(--ink), .042em .042em 0 var(--ink), .048em .048em 0 var(--ink),
    .06em .08em .12em rgba(0,0,0,.55);
}
/* The sunset-gradient face sits on top of the extruded word. */
.hero__word::after{
  content:attr(data-face); content:attr(data-face) / ""; position:absolute; left:0; top:0; pointer-events:none; text-shadow:none;
  background:linear-gradient(180deg, #ffe08a 0%, #ffab4a 34%, var(--orange) 58%, var(--orange-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__reg{
  position:absolute; top:.08em; right:-.42em;
  font-family:var(--f-body); font-size:.14em; font-weight:700; line-height:1;
  color:var(--cream); text-shadow:none;
}
.hero__script{
  position:relative; z-index:2; display:block; width:max-content;
  margin:-.12em 0 0 18%;
  font-family:var(--f-script); font-size:clamp(50px,14vw,82px); line-height:1; letter-spacing:0;
  color:var(--cream-2); transform:rotate(-7deg);
  text-shadow:0 0 .08em rgba(255,255,255,.6), 0 0 .2em rgba(239,91,36,.95), 0 0 .5em rgba(239,91,36,.7), .05em .06em 0 var(--rust);
}
.hero__lede{ max-width:600px; margin:30px 0 0; color:rgba(255,250,240,.94); font-size:clamp(17px,1.7vw,21px); line-height:1.5; text-shadow:0 0 14px rgba(13,41,46,.95), 0 1px 2px rgba(13,41,46,.9); }
.stamp{
  position:relative; display:inline-block; margin:26px 0 0 6px; z-index:1;
  padding:10px 14px; border:3px solid var(--gold); border-radius:6px;
  color:var(--gold); background:rgba(13,41,46,.35);
  font-family:var(--f-heavy); font-size:14px; line-height:1.15; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  box-shadow:inset 0 0 0 2px rgba(13,41,46,.6), inset 0 0 0 4px rgba(215,167,44,.6);
  transform:rotate(-4deg); opacity:.95;
  -webkit-mask-image:radial-gradient(circle at 30% 40%, #000 92%, transparent 100%); mask-image:radial-gradient(circle at 30% 40%, #000 92%, transparent 100%);
}
.stamp em{ font-style:normal; color:var(--cream-2); }

/* ---------- The call sheet (signup) ---------- */
#signup{ scroll-margin-top:48px; }   /* on top of scroll-padding: clears the clip and tape above the sheet */
.sheet{
  position:relative; width:100%; max-width:540px; justify-self:center;
  padding:40px 22px 26px; border-radius:3px;
  color:var(--ink);
  background:
    radial-gradient(circle at 88% 91%, transparent 0 31px, rgba(130,80,30,.16) 32px 35px, rgba(130,80,30,.06) 36px 38px, transparent 39px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(13,41,46,.055) 27px 28px),
    linear-gradient(180deg, #fdf7e6, #f5e8c9);
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 28px 50px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.25);
  transform:rotate(1.2deg);
}
/* the page underneath */
.sheet::before{
  content:""; position:absolute; inset:6px -6px -8px 8px; z-index:-1; border-radius:3px;
  background:#efe1bf; box-shadow:0 10px 30px rgba(0,0,0,.35); transform:rotate(-3deg);
}
.sheet__clip{
  position:absolute; left:50%; top:-20px; z-index:3; width:96px; height:34px; transform:translateX(-50%);
  border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, #3a3a3a, #111);
  box-shadow:0 3px 6px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.18);
}
.sheet__clip::before{
  content:""; position:absolute; left:16px; right:16px; top:-16px; height:24px;
  border:3px solid #b9b9b9; border-bottom:0; border-radius:12px 12px 0 0;
}
.sheet__tape{
  position:absolute; left:-14px; top:6px; z-index:3; padding:8px 18px;
  background:rgba(239,220,165,.92); color:var(--rust);
  font-family:var(--f-marker); font-size:15px; line-height:1; white-space:nowrap;
  box-shadow:0 2px 4px rgba(0,0,0,.18); transform:rotate(-9deg);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent);
          mask-image:linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent);
}
.sheet__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:4px double var(--ink); }
.signup__title{ font-family:var(--f-display); font-weight:400; font-size:clamp(44px,12vw,62px); line-height:.86; text-transform:uppercase; color:var(--ink); }
.sheet__pre{ display:block; font-family:var(--f-script); font-size:.52em; line-height:1; text-transform:none; color:var(--orange-deep); transform:rotate(-4deg); transform-origin:left; margin-bottom:.06em; }
.sheet__no{ flex:none; padding:6px 10px; border:2px solid var(--ink); font-family:var(--f-type); font-size:13px; line-height:1.15; text-align:center; text-transform:uppercase; }
.sheet__meta{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:12px 0 4px; }
.sheet__meta div{ padding:7px 0; border-bottom:1px dashed rgba(13,41,46,.35); }
.sheet__meta dt{ font-family:var(--f-type); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.sheet__meta dd{ font-family:var(--f-type); font-size:15px; line-height:1.25; }
.signup__desc{ margin:14px 0 16px; font-size:15px; line-height:1.5; }
.signup__row{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.field{ display:block; margin-bottom:12px; }
.field__label{ display:block; margin:0 0 2px; font-family:var(--f-type); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.field__req{ letter-spacing:.04em; text-transform:none; opacity:.75; }
.field__input{
  width:100%; min-height:46px; padding:8px 4px 6px;
  border:0; border-bottom:2px solid var(--ink); border-radius:0;
  background:transparent; color:var(--ink);
  font-family:var(--f-type); font-size:19px;
}
.field__input::placeholder{ color:rgba(13,41,46,.34); font-style:italic; }
.field--email .field__input{ font-size:21px; }
.field__input:focus{ outline:none; background:rgba(239,91,36,.09); border-bottom-color:var(--orange-deep); box-shadow:0 3px 0 var(--orange-deep); }
.field__input[aria-invalid="true"]{ border-bottom-color:var(--rust); background:rgba(157,46,42,.07); }

/* Submit: a rubber stamp in brand orange */
.signup__submit{
  position:relative; width:100%; min-height:62px; margin-top:10px; padding:10px 18px;
  border:3px solid var(--ink); border-radius:6px;
  background:var(--orange); color:var(--ink);
  font-family:var(--f-display); font-size:clamp(22px,6vw,27px); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:inset 0 0 0 3px var(--orange), inset 0 0 0 5px var(--ink), 5px 6px 0 var(--ink);
  transform:rotate(-1.2deg);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.signup__submit:hover{ background:var(--orange-light); box-shadow:inset 0 0 0 3px var(--orange-light), inset 0 0 0 5px var(--ink), 3px 4px 0 var(--ink); transform:rotate(0) translate(2px,2px); }
.signup__submit:active{ transform:rotate(0) translate(5px,6px) scale(.98); box-shadow:inset 0 0 0 3px var(--orange-light), inset 0 0 0 5px var(--ink), 0 0 0 var(--ink); }
/* Turnstile: takes no space unless Cloudflare asks for an interaction */
.sheet__human{ max-height:0; overflow:hidden; transition:max-height .25s ease, margin .25s ease; }
.sheet__human.is-visible{ max-height:90px; margin:6px 0 4px; }
.signup__submit-busy{ display:none; }
.signup__form.is-busy .signup__submit{ pointer-events:none; opacity:.8; }
.signup__form.is-busy .signup__submit-label{ display:none; }
.signup__form.is-busy .signup__submit-busy{ display:inline; }
.signup__msg{ min-height:1.4em; margin:12px 0 0; font-family:var(--f-type); font-size:15px; color:var(--rust); }
.signup__msg:empty{ min-height:0; margin:0; }  /* stays in the accessibility tree so the live region announces */
.signup__foot{ margin:14px 0 0; font-family:var(--f-type); font-size:13px; line-height:1.45; text-align:center; opacity:.8; }
.signup__legal{ display:inline-block; margin-top:6px; font-family:var(--f-body); font-size:12px; }
.signup__legal a{ color:inherit; text-underline-offset:2px; }
.signup__done{ padding:8px 0 4px; text-align:center; }
.signup__done .signup__title{ font-size:clamp(36px,9vw,50px); }
.signup__done .signup__desc{ margin:14px auto 22px; max-width:380px; }
.signup__done-mark{
  display:inline-block; margin:6px auto 18px; padding:8px 18px;
  border:4px solid var(--rust); border-radius:8px; color:var(--rust);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--rust);
  font-family:var(--f-display); font-size:44px; line-height:1; letter-spacing:.06em; text-transform:uppercase;
  transform:rotate(-10deg);
  animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes stamp{ from{ transform:rotate(-10deg) scale(2.6); opacity:0; } 60%{ opacity:1; } to{ transform:rotate(-10deg) scale(1); opacity:1; } }

@media (min-width:761px){
  .sheet{ padding:44px 34px 30px; }
}
@media (max-width:359px){
  .signup__submit{ font-size:20px; letter-spacing:.03em; padding-inline:10px; }
}
@media (min-width:901px){
  .hero{ padding:calc(var(--header-h) + 40px) 0 130px; }
  .hero__shade{
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
      linear-gradient(90deg, rgba(13,41,46,.97) 0%, rgba(13,41,46,.86) 40%, rgba(13,41,46,.45) 100%);
  }
  .hero__sun{ right:2vw; top:auto; bottom:-8vw; width:min(52vw,760px); opacity:.6; }
  .hero__grid{ grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr); gap:clamp(40px,5vw,80px); }
  .hero__word{ font-size:clamp(132px,13.4vw,196px); }
  .hero__script{ font-size:clamp(74px,6.6vw,112px); margin-left:24%; }
  .stamp{ font-size:15px; padding:12px 16px; }
  .sheet{ justify-self:end; }
}
@media (min-width:1280px) and (min-height:780px){
  /* Wide, tall screens: slap the stamp above the title, clear of the eyebrow, the H1 and the header. */
  .stamp{ position:absolute; right:0; top:-86px; margin:0; transform:rotate(8deg); }
}

/* ==========================================================================
   TICKER — two bands of tape crossing the seam
   ========================================================================== */
.ticker{
  position:relative; z-index:4;
  height:calc(84px + 9vw); margin:calc(-1 * (42px + 4.5vw)) 0;
  overflow:hidden; pointer-events:none;
}
.ticker__band{
  position:absolute; left:-6%; width:112%; top:50%;
  display:flex; overflow:hidden; padding:10px 0;
  border-block:3px solid var(--ink);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.ticker__band--a{ z-index:2; background:var(--orange); color:var(--ink); transform:translateY(-50%) rotate(-4deg); }
.ticker__band--b{ z-index:1; background:var(--cream); color:var(--rust); transform:translateY(-50%) rotate(3.2deg); }
.ticker__track{
  flex:none; display:flex; align-items:center; gap:26px; min-width:100%; padding-right:26px;
  font-family:var(--f-display); font-size:clamp(20px,2.6vw,32px); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  animation:ticker 38s linear infinite;
}
.ticker__band--b .ticker__track{ animation-direction:reverse; animation-duration:46s; }
.ticker__track i{ font-style:normal; font-size:.6em; color:var(--cream-2); }
.ticker__band--b .ticker__track i{ font-family:var(--f-script); font-size:1.15em; text-transform:none; color:var(--orange-deep); letter-spacing:0; }
.ticker.is-paused .ticker__track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-100%); } }
.ticker__pause{
  position:absolute; right:12px; bottom:4px; z-index:5; width:36px; height:36px; padding:0; pointer-events:auto;
  display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%;
  color:var(--ink); background:var(--cream); box-shadow:2px 2px 0 var(--ink);
}
.ticker__pause:focus-visible{ outline-color:var(--cream); }
@media (pointer:coarse){ .ticker__pause{ width:44px; height:44px; } }
.ticker__pause span{ display:block; width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.ticker__pause[aria-pressed="true"] span{ width:0; height:0; margin-left:3px; border:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; }

/* ==========================================================================
   STORY — the bar wall
   ========================================================================== */
.story{
  position:relative; overflow:hidden; padding:calc(70px + 4vw) 0 90px; color:var(--cream);
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(255,196,120,.22), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.3), transparent 18%, transparent 82%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 2px, rgba(255,255,255,.05) 2px 3px, transparent 3px 124px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px, rgba(0,0,0,.06) 8px 9px, transparent 9px 21px),
    linear-gradient(90deg, #6a391b, #7b4526 28%, #633418 55%, #74401f 80%, #683819);
}
.story *{ min-width:0; }
.story__grid{ display:grid; grid-template-columns:1fr; gap:56px; }
.story .h2{ font-size:clamp(40px,10.5vw,58px); line-height:.95; text-shadow:3px 4px 0 rgba(0,0,0,.35); }
.story .hl{ color:#ffa866; }   /* brand orange is only ~2.5:1 on the wood; this clears 3:1 for large text */
.story__copy > p:not([class]){ margin-top:18px; font-size:16px; line-height:1.65; color:rgba(255,245,216,.9); }

.pile{ position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:22px 4%; padding-bottom:10px; }
.photo{
  position:relative; z-index:5; width:100%; padding:10px;
  border:12px solid #2a170b; border-radius:3px; background:#0f0b08;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.55);
  transition:transform .25s ease;
}
.photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.95) contrast(1.04); }
.photo figcaption{
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); z-index:2; white-space:nowrap;
  padding:6px 16px; border-radius:3px; color:#2a1a08;
  background:linear-gradient(180deg, #f3d98d, #c99a37 55%, #e7c66d);
  box-shadow:0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  font-family:var(--f-type); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.sticker{
  position:absolute; right:-10px; top:-26px; z-index:8; width:84px; height:84px; display:grid; place-items:center;
  border:3px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--orange);
  font-family:var(--f-heavy); font-size:12px; line-height:1; text-align:center; text-transform:uppercase;
  box-shadow:3px 4px 0 var(--ink); transform:rotate(12deg);
}
.snap{
  position:relative; width:46%; padding:8px 8px 34px;
  background:#f7f2e6; box-shadow:0 10px 20px rgba(0,0,0,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.snap::before{
  content:""; position:absolute; left:50%; top:-11px; z-index:2; width:64px; height:22px; transform:translateX(-50%) rotate(-4deg);
  background:rgba(241,226,184,.82); box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.snap img{ width:100%; filter:saturate(.9) contrast(1.03) sepia(.08); }
.snap figcaption{
  position:absolute; left:8px; right:8px; bottom:7px; text-align:center;
  font-family:var(--f-marker); font-size:15px; line-height:1.1; color:#1d2a2c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.snap-a{ transform:rotate(-4deg); }
.snap-b{ transform:rotate(3deg); }
.snap-b::before{ transform:translateX(-50%) rotate(5deg); }

/* the napkin */
.quote{
  position:relative; max-width:470px; margin:30px 0 0 4px; padding:22px 24px 24px;
  color:#1d2a2c; background:#fbfaf4;
  background-image:linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.06) 49.8% 50.2%, transparent 50.4%), linear-gradient(180deg, transparent 49.4%, rgba(0,0,0,.06) 49.7% 50.3%, transparent 50.6%);
  box-shadow:0 12px 22px rgba(0,0,0,.4);
  font-family:var(--f-marker); font-size:clamp(19px,2vw,24px); line-height:1.3;
  transform:rotate(-2deg);
}
.quote::after{ content:"— scribbled on a napkin, probably"; display:block; margin-top:10px; font-family:var(--f-type); font-size:12px; letter-spacing:.04em; opacity:.78; }

/* coasters */
.coasters__label{ margin:36px 0 12px; font-family:var(--f-marker); font-size:18px; color:#ffd36b; transform:rotate(-2deg); }
.hotspots{ display:flex; flex-wrap:wrap; gap:14px; }
.hotspots button{
  display:grid; place-items:center; width:104px; aspect-ratio:1; padding:0; border-radius:50%;
  border:2px solid rgba(0,0,0,.35); color:var(--ink);
  background:radial-gradient(circle, #f6e7c4 0 52%, var(--orange) 53% 60%, #f6e7c4 61% 66%, #dcc79a 67% 100%);
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 12px 18px rgba(0,0,0,.3);
  font-family:var(--f-heavy); font-size:11px; line-height:1.1; text-transform:uppercase; text-align:center;
  transition:transform .25s var(--ease-pop), background .2s ease, color .2s ease;
}
.hotspots button span{ max-width:68%; }
.hotspots button:nth-child(1){ transform:rotate(-8deg); }
.hotspots button:nth-child(2){ transform:rotate(5deg) translateY(6px); }
.hotspots button:nth-child(3){ transform:rotate(-3deg); }
.hotspots button:hover{ transform:rotate(0) translateY(-6px); }
.hotspots button[aria-pressed="true"]{
  color:var(--cream-2); background:radial-gradient(circle, var(--ink) 0 52%, var(--orange) 53% 60%, var(--ink) 61% 100%);
  transform:rotate(0) scale(1.08);
}
/* the index card */
.hotspots__out{
  min-height:70px; margin:22px 0 0; padding:30px 18px 14px; color:#1d2a2c; max-width:520px;
  background:
    linear-gradient(180deg, transparent 0 20px, rgba(200,60,60,.55) 20px 22px, transparent 22px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(70,110,180,.22) 25px 26px),
    #fffdf6;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
  font-family:var(--f-type); font-size:16px; line-height:26px;
  transform:rotate(.8deg);
}

@media (min-width:901px){
  .story{ padding:calc(100px + 4vw) 0 130px; }
  .story__grid{ display:flex; align-items:center; gap:clamp(40px,6vw,90px); }
  .pile{ display:block; flex:1 1 56%; padding:clamp(130px,12vw,180px) 0 clamp(150px,14vw,200px); }
  .story__copy{ flex:1 1 44%; }
  .story .h2{ font-size:clamp(46px,4.6vw,74px); }
  .story__copy > p:not([class]){ font-size:18px; line-height:1.7; }
  .photo{ transform:rotate(-1.5deg); }
  .sticker{ right:-18px; top:-30px; width:108px; height:108px; font-size:15px; box-shadow:5px 6px 0 var(--ink); }
  .snap{ position:absolute; width:auto; z-index:6; }
  .snap img{ width:auto; height:clamp(140px,13vw,190px); }
  /* Scatter map. Tweak offsets to re-shuffle; .pile padding controls the spread. */
  .snap-a{ top:0;    left:-4%;  transform:rotate(-7deg); }
  .snap-b{ bottom:0; right:-3%; transform:rotate(5deg); }
  .hotspots button{ width:122px; font-size:12px; }
  @media (hover:hover){
    .snap:hover{ z-index:9; transform:rotate(0) scale(1.3); box-shadow:0 22px 40px rgba(0,0,0,.55); }
    .photo:hover{ z-index:9; transform:rotate(0) scale(1.02); }
  }
}

/* ==========================================================================
   TIMELINE — the film strip
   ========================================================================== */
.hist{
  position:relative; overflow:hidden; padding:80px 0 70px; color:var(--cream);
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(239,91,36,.18), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(215,167,44,.1), transparent 70%),
    var(--teal);
}
.hist .h2{ color:var(--cream-2); }
.hist__head{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); }
.hist__kicker{ margin:0 0 10px; font-family:var(--f-type); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.leader{
  position:relative; flex:none; display:grid; place-items:center; width:clamp(84px,11vw,140px); aspect-ratio:1; border-radius:50%;
  border:4px solid var(--cream); color:var(--cream-2);
  background:
    linear-gradient(var(--cream), var(--cream)) center / 2px 100% no-repeat,
    linear-gradient(var(--cream), var(--cream)) center / 100% 2px no-repeat,
    conic-gradient(rgba(239,91,36,.7) 0 118deg, rgba(255,245,216,.08) 118deg 360deg);
  box-shadow:0 0 0 6px var(--teal), 0 0 0 8px rgba(255,245,216,.35);
}
.leader::after{ content:""; position:absolute; inset:16%; border:2px solid rgba(255,245,216,.6); border-radius:50%; }
.leader span{ position:relative; z-index:1; padding:0 .1em; font-family:var(--f-display); font-size:clamp(34px,4.6vw,58px); line-height:1; background:var(--teal); }
.hist .band__intro{ color:rgba(255,250,240,.85); }
.reel{
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);
  padding:16px 0 26px; scrollbar-width:thin; scrollbar-color:var(--orange) transparent;
}
.reel:focus-visible{ outline-offset:-3px; }
.timeline{
  position:relative; display:flex; width:max-content; margin:0 var(--gutter); padding:40px 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, var(--teal) 12px 26px, transparent 26px 34px) 0 13px / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 12px, var(--teal) 12px 26px, transparent 26px 34px) 0 calc(100% - 13px) / 100% 13px no-repeat,
    var(--film);
  border-radius:4px; box-shadow:0 22px 40px rgba(0,0,0,.45);
}
.tcard{
  position:relative; flex:0 0 min(76vw,290px); margin:0 5px; scroll-snap-align:center;
  min-height:290px; padding:30px 16px 22px; border-radius:6px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,170,80,.16), transparent 60%),
    linear-gradient(165deg, #3b2b1d, #1b1511);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .25s ease, background .25s ease;
}
.tcard__edge{ position:absolute; top:8px; left:12px; font-family:var(--f-mono); font-size:10px; font-weight:700; letter-spacing:.12em; color:#e8a03a; opacity:.85; }
.tcard__pic{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:#0c0a08; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.tcard__pic img{ width:100%; height:100%; object-fit:cover; filter:sepia(.35) contrast(1.08) saturate(.9); }
.tcard__pic::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }
.tcard__pic--rec{ display:grid; place-items:center; text-align:center; color:var(--chalk); background:repeating-linear-gradient(-55deg, var(--chalk) 0 14px, #1c1c1c 14px 28px) top / 100% 20px no-repeat, #1c1c1c; font-family:var(--f-marker); font-size:clamp(24px,2.4vw,30px); line-height:1.15; }
.tcard__pic--rec::after{ display:none; }
.year{ position:relative; z-index:1; display:block; margin:-.62em 0 8px 4px; font-family:var(--f-display); font-size:56px; line-height:1; color:var(--gold); text-shadow:3px 3px 0 var(--film), -1px -1px 0 var(--film); }
.tcard h3{ margin:0 0 8px; color:var(--cream-2); font-family:var(--f-type); font-weight:400; font-size:17px; letter-spacing:.06em; line-height:1.2; text-transform:uppercase; }
.tcard p{ color:rgba(255,250,240,.8); line-height:1.55; }
.tcard--now{ background:linear-gradient(165deg, var(--orange-light), var(--orange)); border-color:rgba(255,255,255,.2); }
.tcard--now .year{ color:var(--ink); text-shadow:3px 3px 0 var(--cream-2); }
.tcard--now h3{ color:var(--ink); }
.tcard--now p{ color:var(--ink); }
.tcard--now .tcard__edge{ color:var(--ink); }
.tcard--now::after{ content:"REC"; position:absolute; top:8px; right:12px; font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--ink); }
.tcard--now::before{ content:""; position:absolute; top:10px; right:48px; width:10px; height:10px; border-radius:50%; background:#c4161c; animation:rec 1.4s steps(2, jump-none) infinite; }
@keyframes rec{ 50%{ opacity:0; } }
@media (hover:hover){
  .tcard:hover{ transform:translateY(-6px); }
}
.reel__hint{ margin:4px 0 0; font-family:var(--f-marker); font-size:16px; color:var(--gold); }
.reel__arrow{ display:inline-block; animation:nudge 1.4s ease-in-out infinite; }
.reel.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; -webkit-user-select:none; }
.reel img{ -webkit-user-drag:none; user-select:none; }
@media (hover:hover) and (pointer:fine){ .reel{ cursor:grab; } }
@keyframes nudge{ 50%{ transform:translateX(6px); } }
.source{ margin:18px 0 0; max-width:760px; color:rgba(255,250,240,.62); font-size:13px; line-height:1.55; }
.source a{ color:var(--cream); }
@media (min-width:1180px){
  .hist{ padding:clamp(90px,9vw,130px) 0 110px; }
  .reel{ overflow:visible; padding:30px 0 34px; }
  .timeline{ width:auto; max-width:calc(var(--wrap) + 40px); margin:0 auto; transform:rotate(-1.3deg); }
  .tcard{ flex:1 1 0; min-width:0; min-height:320px; }
  .reel__hint{ display:none; }
}

/* ==========================================================================
   PRODUCTION — slate + stripboard
   ========================================================================== */
.prod{
  position:relative; padding:80px 0 90px; color:var(--ink);
  background:
    linear-gradient(rgba(13,41,46,.07) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(13,41,46,.07) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(180deg, #f6ecd4, #efdfba);
}
.prod .hl{ color:var(--orange-deep); }
.prod__wrap{ display:grid; grid-template-columns:1fr; gap:28px; }
.prod__left{ display:grid; gap:24px; align-content:start; padding-top:30px; }
.report-stamp{ display:inline-block; margin:0 0 20px; padding:7px 14px; border:3px solid var(--rust); border-radius:4px; color:var(--rust); box-shadow:inset 0 0 0 2px #f3e6c6, inset 0 0 0 4px var(--rust); font-family:var(--f-type); font-size:15px; letter-spacing:.1em; text-transform:uppercase; transform:rotate(-3deg); }
.report-stamp span{ margin-left:.6em; opacity:.85; }

/* the clapperboard */
.slate{ position:relative; border-radius:10px; color:var(--chalk); background:#1c1c1c; box-shadow:8px 10px 0 var(--orange), 0 18px 30px rgba(0,0,0,.25); }
.slate__sticks{ position:relative; height:58px; }
.slate__sticks span{
  position:absolute; left:0; right:0; height:27px; border-radius:6px 6px 2px 2px;
  background:repeating-linear-gradient(-55deg, var(--chalk) 0 22px, #1c1c1c 22px 44px);
  box-shadow:inset 0 0 0 2px #1c1c1c;
}
.slate__sticks span:first-child{ top:0; transform-origin:4px 100%; transform:rotate(-14deg); }
.slate__sticks span:last-child{ bottom:2px; }
.slate.is-clapped .slate__sticks span:first-child{ animation:clap .9s cubic-bezier(.5,0,.3,1) .2s both; }
@keyframes clap{ 0%{ transform:rotate(-14deg); } 45%{ transform:rotate(0); } 58%{ transform:rotate(-5deg); } 72%{ transform:rotate(0); } 100%{ transform:rotate(-7deg); } }
.slate__body{ padding:6px 20px 22px; }
.slate__row{ display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:2px solid rgba(242,238,228,.3); }
.slate__k{ flex:none; font-family:var(--f-type); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.slate__v{ font-family:var(--f-marker); font-size:20px; line-height:1.15; }
.slate__row--big .slate__v{ font-size:clamp(46px,13vw,64px); line-height:1; color:#ffb87a; }
.slate__row--big .slate__v.is-long{ font-size:clamp(30px,8.4vw,44px); line-height:1.05; }
.slate__row--split{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:0; }
.slate__row--split > span{ padding:9px 0 9px 10px; border-left:2px solid rgba(242,238,228,.3); white-space:nowrap; }
.slate__row--split > span:first-child{ padding-left:0; border-left:0; }
.meter__bar{ --meter:36%; height:18px; margin:16px 0 12px; padding:3px; border:2px solid var(--chalk); border-radius:999px; overflow:hidden; }
.meter__bar span{ position:relative; display:block; height:100%; width:var(--meter); overflow:hidden; border-radius:inherit; animation:fill 1.8s ease-out both; }
.meter__bar span::before{ content:""; position:absolute; inset:0 0 0 -48px; background:repeating-linear-gradient(135deg,var(--orange) 0 12px,var(--gold) 12px 24px); background-size:48px 48px; animation:stripes 3s linear infinite; }
@keyframes fill{ from{ width:0; } }
@keyframes stripes{ to{ transform:translateX(48px); } }
.meter__text{ font-size:14px; line-height:1.5; color:rgba(242,238,228,.85); }

/* the script page */
.script{
  position:relative; padding:26px 22px 24px 42px; color:#1d1d1d; background:#fffdf7;
  background-image:radial-gradient(circle at 18px 34px, #d9cfb8 0 6px, transparent 7px), radial-gradient(circle at 18px 50%, #d9cfb8 0 6px, transparent 7px), radial-gradient(circle at 18px calc(100% - 34px), #d9cfb8 0 6px, transparent 7px);
  box-shadow:0 14px 26px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.06);
  font-family:var(--f-type);
}
.script__slug{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
.script h3{ margin:18px 0 6px; font-family:var(--f-type); font-weight:400; font-size:16px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.script .prod__text{ margin:0 auto; max-width:30ch; font-size:15px; line-height:1.55; }
.prod__detail.is-swapping{ animation:swap .35s ease; }
@keyframes swap{ from{ transform:translateY(-6px); opacity:.3; } }

/* the stripboard */
.board{ padding:14px 14px 18px; border-radius:10px; background:linear-gradient(180deg, #3a2f26, #2a221c); box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), 0 20px 36px rgba(0,0,0,.28); }
.board__title{ display:flex; justify-content:space-between; gap:12px; margin:2px 4px 12px; font-family:var(--f-type); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); opacity:.8; }
.steps{ display:grid; gap:6px; }
.step{
  --strip:#fbf7ec;
  display:grid; grid-template-columns:40px 1fr; gap:6px 12px; align-items:center;
  padding:12px 14px 12px 30px; border:0; border-radius:3px;
  color:var(--ink); text-align:left;
  background:
    radial-gradient(circle at 12px 50%, #2a221c 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(0,0,0,.08) 0 22px, transparent 22px),
    var(--strip);
  box-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.step:nth-child(4){ --strip:#f6d873; }
.step:nth-child(5){ --strip:#fbf7ec; }
.step:nth-child(6){ --strip:#a9cbe0; }
.step:nth-child(7){ --strip:#bcd89f; }
.step.is-done{ --strip:#cfd3c6; color:rgba(13,41,46,.9); }
.step.is-done strong{ text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(13,41,46,.45); }
.step.is-now{ --strip:var(--orange); position:relative; }
.step.is-now::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 22px rgba(239,91,36,.8); opacity:0; animation:glow 2.4s ease-in-out infinite; }
@keyframes glow{ 50%{ opacity:1; } }
.step.is-active{ transform:translateX(4px) rotate(-.6deg); box-shadow:-6px 6px 0 rgba(0,0,0,.45); }
@media (min-width:901px){ .step.is-active{ transform:translateX(10px) rotate(-.6deg); } }
.step__num{ font-family:var(--f-type); font-size:18px; }
.step__body{ display:block; }
.step__body strong{ display:block; margin:0 0 2px; font-family:var(--f-display); font-weight:400; font-size:22px; line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.step__body span{ display:block; font-size:13px; line-height:1.35; }
.step__status{ grid-column:2; justify-self:start; padding:3px 8px; border:1.5px solid currentColor; border-radius:3px; font-family:var(--f-type); font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
@media (hover:hover){ .step:hover{ transform:translateX(6px); } .step.is-active:hover{ transform:translateX(10px) rotate(-.6deg); } }
@media (min-width:901px){
  .prod{ padding:clamp(90px,9vw,130px) 0; }
  .prod__wrap{ grid-template-columns:.86fr 1.14fr; gap:clamp(30px,5vw,70px); align-items:start; }
  .step{ grid-template-columns:52px 1fr auto; gap:16px; padding:14px 18px 14px 34px; }
  .step__num{ font-size:20px; }
  .step__body strong{ font-size:26px; }
  .step__status{ grid-column:auto; justify-self:auto; }
}

/* ==========================================================================
   PAINT THE BOAT
   ========================================================================== */
.paint{
  position:relative; z-index:2; padding:80px 0 50px; color:var(--ink);
  background:linear-gradient(135deg, rgba(255,255,255,.1) 25%, transparent 25%) 0 0 / 22px 22px, var(--orange);
}
.paint__intro{ display:grid; grid-template-columns:1fr; gap:18px; align-items:end; margin-bottom:26px; }
.paint__title{ color:var(--ink); font-size:clamp(52px,14vw,120px); }
.paint__title span{ display:inline-block; font-family:var(--f-script); text-transform:none; color:var(--cream-2); font-size:1.02em; letter-spacing:0; transform:rotate(-6deg) translateY(.06em); text-shadow:.04em .05em 0 var(--ink); }
.paint__lede{ max-width:520px; margin:14px 0 0; font-size:17px; line-height:1.5; }
.paint__badge{
  justify-self:start; width:92px; height:92px; display:grid; place-items:center;
  border:3px solid var(--ink); border-radius:50%; color:var(--cream); background:var(--rust);
  font-family:var(--f-heavy); font-size:11px; text-align:center; text-transform:uppercase; line-height:1.1;
  transform:rotate(8deg); box-shadow:3px 4px 0 var(--ink);
}
.paint__frame{ padding:12px; border:4px solid var(--ink); border-radius:18px 6px 18px 6px; background:var(--cream); box-shadow:8px 9px 0 rgba(13,41,46,.85); }
.drips{ position:absolute; left:0; bottom:calc(-1 * max(6.25vw, 34px) + 1px); width:100%; height:max(6.25vw, 34px); fill:var(--orange); pointer-events:none; }
@media (min-width:761px){
  .paint{ padding:clamp(90px,9vw,130px) 0 60px; }
  .paint__intro{ grid-template-columns:1fr auto; gap:24px; margin-bottom:30px; }
  .paint__lede{ font-size:19px; }
  .paint__badge{ width:124px; height:124px; font-size:14px; box-shadow:5px 6px 0 var(--ink); }
  .paint__frame{ padding:clamp(14px,2vw,22px); box-shadow:14px 16px 0 rgba(13,41,46,.85); }
}

/* ---------- painter (canvas tool) ---------- */
.painter{ --paper:#f2e2bb; width:100%; color:#20373b; }
.painter__toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:14px;
  border:1px solid rgba(32,55,59,.28); border-bottom:0; border-radius:18px 18px 0 0;
  background:radial-gradient(circle at 10% 20%, rgba(255,255,255,.38), transparent 22%), var(--paper);
}
.painter__tool, .painter__btn{
  min-height:44px; padding:9px 15px; border:1px solid rgba(32,55,59,.32); border-radius:999px;
  color:#20373b; background:rgba(255,255,255,.46);
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}
.painter__tool:hover, .painter__btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.76); }
.painter__tool{ display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.painter__tool.is-active, .painter__save{ border-color:var(--orange-deep); color:#fff; background:var(--orange-deep); }
.painter__tool.is-active:hover, .painter__save:hover{ background:var(--rust); }
.can{ position:relative; display:inline-block; width:15px; height:24px; border:2px solid currentColor; border-radius:3px 3px 5px 5px; }
.can::before{ content:""; position:absolute; left:2px; top:-6px; width:8px; height:5px; border:2px solid currentColor; border-bottom:0; border-radius:2px 2px 0 0; }
.can span{ position:absolute; left:2px; right:2px; top:7px; height:5px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
.painter__size{ display:grid; grid-template-columns:auto minmax(120px,220px); align-items:center; gap:10px; font-weight:600; }
.painter__size input{ width:100%; accent-color:var(--orange); }
.painter__check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.painter__check input{ width:18px; height:18px; accent-color:var(--orange); }
.painter__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.painter__btn:disabled{ cursor:not-allowed; opacity:.45; transform:none; }
.painter__stage{
  position:relative; overflow:hidden; width:100%; aspect-ratio:1448/1086;
  border:1px solid rgba(32,55,59,.28); border-radius:0 0 18px 18px; background:#d9c8a1;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.painter.is-paint-enabled .painter__stage{ touch-action:none; }
.painter__canvas{ width:100%; height:100%; cursor:crosshair; }
.painter__loading{ position:absolute; inset:0; display:grid; place-items:center; padding:30px; text-align:center; background:var(--paper); }
.painter.is-ready .painter__loading{ display:none; }
.painter__hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); max-width:calc(100% - 32px);
  padding:8px 13px; border-radius:999px; color:#fff; background:rgba(18,39,43,.76);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  font-size:14px; pointer-events:none; transition:opacity .25s ease;
}
.painter.has-painted .painter__hint{ opacity:0; }
.painter__ring{ position:absolute; left:0; top:0; width:50px; height:50px; border:1px dashed rgba(239,90,36,.9); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; }
.painter__cursor{ position:absolute; left:0; top:0; width:25px; height:48px; transform:translate(18px,-8px) rotate(-18deg); transform-origin:50% 100%; pointer-events:none; opacity:0; filter:drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
.painter__cursor-body{ position:absolute; inset:8px 0 0; border:2px solid rgba(255,255,255,.9); border-radius:4px 4px 7px 7px; background:var(--orange); }
.painter__cursor-body::after{ content:""; position:absolute; left:3px; right:3px; top:16px; height:8px; border-top:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9); }
.painter__cursor-cap{ position:absolute; left:7px; top:1px; width:11px; height:9px; border-radius:3px 3px 0 0; background:#20373b; }
.painter__stage.is-hovering .painter__ring, .painter__stage.is-hovering .painter__cursor{ opacity:1; }
.painter__stage.is-spraying .painter__cursor{ transform:translate(18px,-8px) rotate(-25deg) scale(.97); }
.painter__status{ min-height:1.4em; margin:9px 4px 0; font-size:14px; opacity:.78; }

@media (max-width:760px){
  .painter__toolbar{ align-items:stretch; gap:10px; padding:10px; border-radius:14px 14px 0 0; }
  .painter__tool, .painter__size, .painter__check, .painter__actions{ width:100%; }
  .painter__tool, .painter__btn{ min-height:46px; padding:8px 11px; font-size:13px; }
  .painter__tool{ justify-content:center; }
  .painter__size{ grid-template-columns:82px minmax(0,1fr); font-size:13px; }
  .painter__check{ min-height:42px; font-size:13px; }
  .painter__actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-left:0; }
  .painter__actions .painter__btn{ width:100%; }
  .painter__actions .painter__save{ grid-column:1 / -1; }
  .painter__stage{ border-radius:0 0 14px 14px; }
  .painter__hint{ bottom:9px; padding:7px 10px; font-size:11px; text-align:center; }
  .painter__status{ font-size:12px; }
  .painter__cursor{ display:none; }
}


/* ==========================================================================
   MARQUEE (letter board)
   ========================================================================== */
.marq{ position:relative; isolation:isolate; overflow:hidden; padding:56px 0 0; color:var(--cream-2); }
.marq__bg{ position:absolute; inset:0; z-index:-2; }
.marq__bg img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; opacity:.62; filter:saturate(.8); }
.marq__shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(13,41,46,.55) 0%, rgba(13,41,46,.95) 60%); }
.marq__copy{ max-width:760px; margin-bottom:8px; }
.marq__lede{ margin:16px 0 0; color:rgba(255,250,240,.88); font-size:16px; line-height:1.5; }
.marq__stage{
  position:relative; margin:0 auto -6px; width:min(520px,86%);
  transform:translateY(70%) rotate(0); transform-origin:50% 100%; opacity:0;
  transition:transform 1.1s cubic-bezier(.22,.9,.3,1.05), opacity .7s ease;
  will-change:transform;
}
.marq__stage.is-in{ transform:translateY(0) rotate(-2.5deg); opacity:1; }
.marq__stage.is-settled{ will-change:auto; }
.marq__img{
  width:100%; user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 0 18px rgba(255,245,216,.85)) drop-shadow(0 0 42px rgba(255,245,216,.55)) drop-shadow(0 0 90px rgba(239,91,36,.28));
}
/* The clickable board sits over the blank white panel of the sign.
   --board-* are percentages of the image box; tune if the text drifts off the panel. */
.marq__board{
  --board-top:52%; --board-left:21%; --board-width:39%; --board-height:25%;
  position:absolute; top:var(--board-top); left:var(--board-left); width:var(--board-width); height:var(--board-height);
  display:grid; place-items:center; padding:2%; border:0; background:transparent;
}
.marq__board:focus-visible{ outline:3px solid rgba(239,91,36,.8); outline-offset:4px; }
.marq__lines{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35em; width:100%; }
.marq__row{ display:flex; justify-content:center; gap:.14em; }
.marq__ch{
  display:inline-block; min-width:.62em; text-align:center; color:#20373b;
  font-family:var(--f-mono); font-weight:700; font-size:clamp(11px,2.6vw,21px); line-height:1;
  text-transform:uppercase; letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.marq__ch.is-flipping{ animation:flip .09s linear infinite; }
@keyframes flip{ 50%{ transform:scaleY(.2); } }
.marq__hint{
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%) rotate(2.5deg);
  padding:7px 12px; border-radius:999px; white-space:nowrap;
  color:var(--cream); background:rgba(18,39,43,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-size:12px; font-weight:700; letter-spacing:.04em; transition:opacity .3s ease;
}
.marq__stage.has-shuffled .marq__hint{ opacity:0; }
@media (min-width:901px){
  .marq{ padding:clamp(80px,9vw,120px) 0 0; }
  .marq__shade{ background:linear-gradient(90deg, rgba(13,41,46,.97) 0%, rgba(13,41,46,.81) 23%, rgba(13,41,46,.18) 55%); }
  .marq__grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(30px,5vw,80px); align-items:end; }
  .marq__copy{ margin-bottom:60px; }
  .h2__sub{ margin-top:.3em; }
  .marq__lede{ font-size:18px; }
  .marq__stage{ width:clamp(420px,36vw,560px); margin:0; }
  .marq__ch{ font-size:clamp(13px,1.1vw,21px); }
  .marq__hint{ font-size:13px; }
}


/* Night-time additions on top of the letter-board styles */
.marq{ padding-top:calc(56px + max(6.25vw, 34px)); }
.marq__stars{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.8;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 26%, #ffe9c4 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 36%, #fff 50%, transparent 51%);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{ to{ opacity:.35; } }
.neon{
  color:#fff4e2;
  text-shadow:0 0 4px #fff, 0 0 10px #ffb070, 0 0 22px var(--orange), 0 0 44px var(--orange), 0 0 70px var(--rust);
  animation:flicker 7s linear infinite;
}
.neon .h2__sub{ color:var(--cream); text-shadow:0 0 6px rgba(255,255,255,.6), 0 0 18px rgba(215,167,44,.8); }
@keyframes flicker{
  0%, 91%, 93.5%, 96%, 100%{ opacity:1; }
  92%{ opacity:.55; } 95%{ opacity:.7; }
}
@media (min-width:901px){ .marq{ padding-top:calc(clamp(80px,9vw,120px) + 6.25vw); } }

/* ==========================================================================
   FOOTER — end credits
   ========================================================================== */
.foot{
  position:relative; overflow:hidden; padding:96px 0 40px; text-align:center; color:var(--cream);
  background:radial-gradient(ellipse 70% 40% at 50% 0%, rgba(239,91,36,.16), transparent 70%), #0b0a09;
}
.foot::before{ content:""; position:absolute; left:0; right:0; top:0; height:9px; background:var(--stripes); }
.foot__in{ display:flex; flex-direction:column; align-items:center; }
.foot p, .foot a{ overflow-wrap:anywhere; }
.foot__wrap-title{ font-family:var(--f-script); font-size:clamp(56px,14vw,104px); line-height:1; color:var(--orange); text-shadow:0 0 22px rgba(239,91,36,.45); transform:rotate(-4deg); }
.foot__wrap-title span{ display:block; margin-top:6px; font-family:var(--f-type); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); text-shadow:none; transform:rotate(4deg); }
.foot__logo{ width:min(150px,50%); margin:40px 0 0; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6)); }
.foot__tag{ margin:16px 0 0; max-width:340px; color:rgba(255,250,240,.78); font-size:15px; line-height:1.55; }
.credits{ width:100%; max-width:640px; margin:56px 0 0; }
.credits div{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:5px 0; }
.credits__gap{ margin-top:28px; }
.credits dt{ text-align:right; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); line-height:1.9; }
.credits dd{ text-align:left; font-family:var(--f-display); font-size:19px; letter-spacing:.05em; line-height:1.45; text-transform:uppercase; }
.credits a{ color:var(--orange-light); text-decoration:none; border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease; }
.credits a:hover{ color:var(--cream-2); border-color:var(--orange); }
.foot .foot__ig{ overflow-wrap:normal; white-space:nowrap; }
@media (max-width:400px){ .credits div{ grid-template-columns:.8fr 1.2fr; gap:14px; } }
.foot__cta{ display:inline-block; margin:52px 0 0; padding:14px 26px; border:3px solid var(--ink); border-radius:6px; color:var(--ink); background:var(--orange); box-shadow:inset 0 0 0 3px var(--orange), inset 0 0 0 5px var(--ink), 0 0 0 3px var(--orange), 6px 7px 0 3px rgba(239,91,36,.35); font-family:var(--f-display); font-size:clamp(24px,5vw,34px); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transform:rotate(-2deg); transition:transform .15s ease, background .15s ease; }
.foot__cta:hover{ background:var(--orange-light); transform:rotate(0) scale(1.03); }
.foot__ig{ display:inline-flex; align-items:center; gap:7px; }
.foot__ig svg{ flex:none; }
.foot__scenes{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:56px 0 0; }
.foot__h{ flex-basis:100%; margin:0 0 4px; font-family:var(--f-type); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.foot__scenes a{ color:rgba(255,250,240,.85); text-decoration:none; font-family:var(--f-display); font-size:20px; letter-spacing:.04em; text-transform:uppercase; border-bottom:3px solid transparent; }
.foot__scenes a:hover{ color:var(--cream-2); border-color:var(--orange); }
.foot__disclaimer{ margin:48px 0 0; font-family:var(--f-type); font-size:13px; color:rgba(255,250,240,.66); }
.foot__bottom{ display:grid; justify-items:center; gap:12px; width:100%; margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,250,240,.14); font-size:12px; color:rgba(255,250,240,.66); }
.foot__bottom p{ max-width:620px; line-height:1.55; }
.foot__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.foot__links a{ color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(255,245,216,.4); }
.foot__links a:hover{ border-color:var(--orange); }
@media (min-width:901px){
  .foot{ padding:clamp(110px,10vw,150px) 0 46px; }
  .credits dd{ font-size:22px; }
}

/* ==========================================================================
   SIMPLE PAGES (privacy, terms, thanks, 404)
   ========================================================================== */
.page{ min-height:100svh; padding:calc(var(--header-h) + 40px) 0 80px; }
.page .wrap{ max-width:760px; }
.page h1{ font-family:var(--f-display); font-weight:400; font-size:clamp(44px,10vw,96px); line-height:.92; text-transform:uppercase; color:var(--orange); text-shadow:4px 4px 0 var(--cream), 8px 8px 0 rgba(13,41,46,.8); }
.page h2{ margin:36px 0 10px; font-family:var(--f-heavy); font-weight:400; font-size:20px; text-transform:uppercase; color:var(--gold); }
.page p, .page li{ margin:12px 0; color:rgba(255,250,240,.86); font-size:17px; line-height:1.65; }
.page ul{ list-style:disc; padding-left:22px; }
.page a:not(.btn){ color:var(--cream); text-decoration-color:var(--orange); text-underline-offset:3px; }
.page .btn{ margin-top:24px; }
.page--center{ display:grid; place-items:center; text-align:center; }
.page--center .wrap{ display:grid; justify-items:center; }
.page .page__meta{ font-size:13px; opacity:.6; }
/* thanks + 404: a call sheet on the desk */
.page-sheet{ max-width:540px; margin:0 auto; padding:44px 28px 34px; text-align:center; }
.page .page-sheet h1{ color:var(--ink); text-shadow:none; font-size:clamp(40px,10vw,58px); line-height:.92; }
.page .page-sheet p{ color:var(--ink); font-size:16px; }
.page .page-sheet .signup__done-mark{ color:var(--rust); font-size:40px; margin:0 auto 16px; }



/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .ticker__track{ animation:none; }
  .ticker__track + .ticker__track, .ticker__pause{ display:none; }
  .marq__stage{ transform:translateY(0) rotate(-2.5deg); opacity:1; will-change:auto; }
  .marq__ch.is-flipping{ animation:none; }
  .meter__bar span, .meter__bar span::before, .neon, .marq__stars, .step.is-now::after, .tcard--now::before, .reel__arrow{ animation:none; }
  .slate__sticks span:first-child{ transform:rotate(-7deg); }
  .snap:hover, .photo:hover, .tcard:hover, .step:hover, .hotspots button:hover{ transform:none; }
}

/* ==========================================================================
   PHONE HERO: the call sheet comes right after the title
   ========================================================================== */
@media (max-width:900px){
  .hero{ padding-top:calc(var(--header-h) + 14px); }
  .hero__grid{ gap:0; }
  .hero__copy{ display:contents; }
  .hero__copy > .eyebrow{ order:1; justify-self:start; margin-bottom:12px; }
  .hero__title{ order:2; }
  .sheet{ order:3; margin-top:48px; }
  .hero__lede{ order:4; margin-top:46px; }
  .hero .status{ order:5; }
  .stamp{ order:6; justify-self:start; }
}
@media (max-width:599px){
  .sheet__meta-x{ display:none; }
  .sheet{ padding-top:36px; }
  .signup__desc{ margin:10px 0 12px; font-size:14px; }
}
.no-anton .hero__word{ font-size:clamp(48px,15vw,140px); }

/* ==========================================================================
   PAINTER TOOLBAR: a workbench, not an app kit
   ========================================================================== */
.painter__toolbar{ border:0; color:var(--cream); background:linear-gradient(180deg, #262321, #1a1816); }
.painter__tool, .painter__btn{ border:2px solid rgba(255,245,216,.45); border-radius:4px; color:var(--cream); background:transparent; font-family:var(--f-type); font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
.painter__tool:hover, .painter__btn:hover{ background:rgba(255,245,216,.1); }
.painter__tool.is-active{ border-color:var(--orange); color:var(--ink); background:var(--orange); }
.painter__tool.is-active:hover{ background:var(--orange-light); }
.painter__save{ border-color:var(--ink); color:var(--ink); background:var(--orange); box-shadow:inset 0 0 0 2px var(--orange), inset 0 0 0 4px var(--ink); font-family:var(--f-display); font-size:17px; letter-spacing:.08em; }
.painter__save:hover{ background:var(--orange-light); }
.painter__size, .painter__check{ font-family:var(--f-type); font-weight:400; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.painter__btn:disabled{ opacity:.4; }
@media (max-width:760px){
  .painter__toolbar{ display:grid; grid-template-columns:1fr auto; align-items:center; }
  .painter__tool{ grid-column:1 / -1; }
  .painter__size, .painter__check{ grid-column:1 / -1; width:auto; }
  .painter__size{ grid-template-columns:auto minmax(120px,1fr); }
  .painter__check{ min-height:36px; }
  .painter__actions{ grid-column:1 / -1; grid-template-columns:repeat(3,1fr); }
  .painter__actions .painter__save{ grid-column:auto; font-size:15px; }
}