/* Direction 1 — SIGNAL LOST. Role layer + components. Seasonal re-key is one attribute on : data-key="halloween|thanksgiving|christmas". Nothing below hardcodes a holiday colour. */ /* ---------- keys ---------- */ [data-key="halloween"] { --key-deep:#12081C; --key-field:#2D0C42; --key-mid:#5B2E8F; --key-hot:#FF7A1A; --key-glow:#FFB02E; --key-spark:#6BFF7A; } [data-key="thanksgiving"] { --key-deep:#17100B; --key-field:#2E1A10; --key-mid:#6B3A1E; --key-hot:#C0442A; --key-glow:#F0C24B; --key-spark:#E8D7B0; } [data-key="christmas"] { --key-deep:#070B1E; --key-field:#101B3D; --key-mid:#1E3A6E; --key-hot:#C8102E; --key-glow:#FFD24A; --key-spark:#FFE6B0; } /* ---------- roles ---------- */ :root { --ink: var(--key-deep); --field: var(--key-field); --field-raised: var(--key-mid); --accent: var(--key-hot); --accent-quiet: var(--key-glow); --spark: var(--key-spark); --text-primary:#fff; --text-secondary: var(--static-400); --text-on-accent: var(--key-deep); /* NEVER white on orange — 2.6:1 */ --hairline: rgb(255 255 255 / .14); --paper: var(--static-050); --font-body:'Archivo','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif; --font-brand:'Baloo 2',system-ui,sans-serif; --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace; } body{background:var(--ink);color:var(--text-primary);font-family:var(--font-body); font-size:16px;line-height:1.65} .wrap{max-width:1240px;margin:0 auto;padding-inline:var(--margin-page)} h1,h2,h3{margin:0} .lead{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:60ch;color:#EDE9F2} .small{font-size:14px;color:var(--text-secondary);font-family:var(--font-brand);font-weight:500} .kicker{font-family:var(--font-brand);font-weight:600;letter-spacing:var(--track-eyebrow); text-transform:uppercase;font-size:13px;color:var(--accent-quiet);margin-bottom:14px} .sect-title{font-family:'Luckiest Guy',Impact,sans-serif; font-size:clamp(2rem,4.4vw,3.4rem);line-height:.95;letter-spacing:var(--track-title)} section{padding-block:clamp(64px,8vw,116px)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-brand); font-weight:700;font-size:17px;min-height:52px;padding:0 26px;border-radius:var(--r-md); text-decoration:none;border:0;cursor:pointer;transition:transform var(--dur-state) var(--ease-out)} .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--accent);color:var(--text-on-accent); box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--accent-quiet)} .btn-ghost{background:transparent;color:var(--accent-quiet);box-shadow:inset 0 0 0 2px var(--accent-quiet)} .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:20;background:rgb(45 12 66 / .92); backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)} .hdr{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px} .brandmark{font-family:var(--font-brand);font-weight:700;letter-spacing:var(--track-eyebrow); color:var(--series-gold);font-size:13px;text-transform:uppercase;text-decoration:none} .hdr nav{display:flex;gap:26px;font-family:var(--font-brand);font-weight:600;font-size:15px} .hdr nav a{color:#D8D2E4;text-decoration:none} .hdr nav a[aria-current="page"]{color:var(--accent-quiet)} .hdr .btn{min-height:40px;font-size:15px;padding:0 18px} @media (max-width:860px){ .hdr nav{display:none} } /* ---------- hero ---------- */ .hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden} .hero-plate{position:absolute;inset:0} .hero-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .hero-plate::after{content:"";position:absolute;inset:0;background:var(--scrim-top)} .hero-bot{position:absolute;inset:auto 0 0 0;height:52%;background:var(--scrim-bottom)} .hero-rail{position:absolute;top:26px;left:0;right:0;display:flex;justify-content:space-between; align-items:flex-start;padding-inline:var(--margin-page);z-index:3;gap:16px} .hero-rail .eyebrow{font-size:13px} .hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,6vw,80px)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:end} .hero h1{font-size:clamp(4rem,12vw,9.5rem)} .hero .sub{font-family:var(--font-brand);font-weight:700;color:var(--accent-quiet); letter-spacing:var(--track-subtitle);font-size:clamp(1.05rem,1.9vw,1.5rem); text-transform:uppercase;margin:6px 0 18px} .hero-book{justify-self:end;width:min(300px,80%);transform:rotate(-3deg);border-radius:4px; overflow:hidden;box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--accent-quiet),0 40px 70px -20px rgb(0 0 0 / .8)} .status-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-brand); font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--spark); background:rgb(18 8 28 / .7);border:1px solid rgb(107 255 122 / .4); border-radius:var(--r-pill);padding:6px 14px;margin-bottom:26px} .status-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--spark)} @media (max-width:860px){ .hero{min-height:74svh} .hero-grid{grid-template-columns:1fr;gap:var(--sp-5)} .hero-book{justify-self:start;width:min(210px,55%)} .hero .cta-row .btn{width:100%;justify-content:center} } /* ---------- act II: the drain ---------- */ .act-static{position:relative;background:var(--ink);overflow:hidden} .drain{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center} .drain-plate{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--elev-2)} .drain-plate img{width:100%;display:block} .drain-plate .grey{position:absolute;inset:0;filter:grayscale(1) contrast(1.15) brightness(.8); clip-path:inset(0 0 0 0);transition:clip-path var(--dur-scene) var(--ease-out)} .drain-plate.restored .grey{clip-path:inset(0 100% 0 0)} .signal{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--static-400)} @media (max-width:860px){ .drain{grid-template-columns:1fr} } /* ---------- generic blocks ---------- */ .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center} .split.rev{grid-template-columns:1.15fr .85fr} .paper-card{background:#fff;border-radius:var(--r-lg);padding:14px;box-shadow:0 0 0 3px var(--ink)} .quote{font-family:'Luckiest Guy',Impact,sans-serif;font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.08;color:var(--accent-quiet);margin:22px 0} @media (max-width:860px){ .split,.split.rev{grid-template-columns:1fr} } .beats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-7)} .beat{background:var(--field);border:1px solid var(--hairline);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column} .beat img{aspect-ratio:4/3;object-fit:cover;width:100%} .beat.drained img{filter:grayscale(1) contrast(1.12) brightness(.82)} .beat .body{padding:22px 22px 26px} .beat h3{font-family:'Luckiest Guy',Impact,sans-serif;font-size:1.45rem;margin-bottom:8px} .beat p{margin:0;font-size:15.5px;color:#D6D0E0} @media (max-width:860px){ .beats{grid-template-columns:1fr} } .pages{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-6)} .pages figure{margin:0;background:#fff;border-radius:var(--r-md);padding:10px;box-shadow:0 0 0 2px var(--ink)} .pages figcaption{font-family:var(--font-brand);font-weight:600;font-size:12.5px; color:var(--static-600);text-align:center;padding-top:8px} @media (max-width:860px){ .pages{grid-template-columns:repeat(2,1fr)} } /* ---------- cast rail (ARIA tabs) ---------- */ .rail{display:flex;gap:12px;overflow-x:auto;padding-block:var(--sp-5) var(--sp-3); scroll-snap-type:x mandatory;scrollbar-width:thin} .chip{flex:0 0 auto;min-width:118px;min-height:76px;border-radius:var(--r-md);padding:12px 14px; background:transparent;box-shadow:inset 0 0 0 2px var(--static-700);scroll-snap-align:start; display:flex;flex-direction:column;justify-content:center;cursor:pointer; scroll-margin-inline:24px;transition:box-shadow var(--dur-state) var(--ease-out)} .chip .nm{font-family:'Luckiest Guy',Impact,sans-serif;font-size:1.05rem;color:#CFC8DC} .chip .hol{font-family:var(--font-mono);font-size:11px;color:var(--static-500); letter-spacing:.06em;margin-top:2px} .chip:hover{box-shadow:inset 0 0 0 3px var(--static-600)} .chip[aria-selected="true"]{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)} .chip[aria-selected="true"] .nm{color:var(--ink)} .chip[aria-selected="true"] .hol{color:rgb(18 8 28 / .72)} .stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px);align-items:center; background:var(--field);border:1px solid var(--hairline);border-radius:var(--r-xl); padding:clamp(24px,3vw,44px);margin-top:var(--sp-5)} .stage img{border-radius:var(--r-lg);width:100%} .stage .hol{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent-quiet)} /* display:grid on .stage beats the UA [hidden] rule, so every tab panel rendered at once. This has to win. */ [hidden]{display:none !important} .stage h2,.stage h3{font-family:'Luckiest Guy',Impact,sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);margin:6px 0 2px} .stage .power{font-family:var(--font-brand);font-weight:700;letter-spacing:var(--track-subtitle); text-transform:uppercase;color:var(--accent);font-size:14px;margin-bottom:14px} @media (max-width:860px){ .stage{grid-template-columns:1fr} } /* ---------- calendar ---------- */ .cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-7)} .bk{border-radius:var(--r-lg);overflow:hidden;background:var(--field); border:1px solid var(--hairline);display:flex;flex-direction:column;text-decoration:none;color:inherit} .bk .art{position:relative;aspect-ratio:17/22;overflow:hidden} .bk .art img{width:100%;height:100%;object-fit:cover;transition:filter var(--dur-state) var(--ease-out)} .bk.soon .art img{filter:grayscale(1) contrast(1.15) brightness(.78)} .bk.soon:hover .art img,.bk.soon:focus-within .art img{filter:grayscale(.15) contrast(1.02)} .bk.soon .art::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:repeating-linear-gradient(0deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px)} .bk .tag{position:absolute;top:10px;left:10px;font-family:var(--font-brand);font-weight:700; font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill)} .tag.out{background:var(--spark);color:var(--ink)} .tag.next{background:var(--series-gold);color:var(--ink)} .tag.soon{background:rgb(18 8 28 / .82);color:var(--static-300);box-shadow:inset 0 0 0 1px var(--static-600)} .bk .meta{padding:14px 16px 18px} .bk .t{font-family:'Luckiest Guy',Impact,sans-serif;font-size:1.15rem} .bk .s{font-family:var(--font-brand);font-weight:600;font-size:12.5px;color:var(--text-secondary); text-transform:uppercase;letter-spacing:.06em} .bk.out{box-shadow:0 0 0 3px var(--accent)} .finale{margin-top:var(--sp-5);display:grid;grid-template-columns:.72fr 1.28fr; gap:clamp(24px,4vw,56px);align-items:center;background:var(--field); border:1px solid var(--hairline);border-radius:var(--r-xl);padding:clamp(22px,3vw,40px)} .finale img{border-radius:var(--r-md);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--series-gold)} @media (max-width:860px){ .cal-grid{grid-template-columns:repeat(2,1fr)} .finale{grid-template-columns:1fr} } /* ---------- forms ---------- */ .form{background:var(--ink);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:26px} .form label{display:block;font-family:var(--font-brand);font-weight:700;font-size:14.5px;margin-bottom:6px} .form input[type=email]{width:100%;height:50px;border-radius:var(--r-md); border:2px solid var(--static-700);background:var(--field);color:#fff;padding:0 14px; font-size:16px;font-family:var(--font-body)} .form input[type=email]:focus-visible{border-color:var(--accent-quiet)} .consent{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:13.5px;color:#C9C2D6} .consent input{margin-top:4px;width:20px;height:20px;flex:0 0 auto} .fine{font-size:12.5px;color:var(--text-secondary);margin-top:12px} .err{color:#FFB4B4;font-size:14px;margin-top:8px;display:none} .honey{position:absolute;left:-9999px} .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .thumbs img{background:#fff;border-radius:var(--r-sm);padding:6px;box-shadow:0 0 0 2px var(--ink)} /* ---------- spec + faq ---------- */ .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin:var(--sp-6) 0} .spec-cell{border:1px solid var(--hairline);border-radius:var(--r-md);padding:16px} .spec-cell .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em; color:var(--text-secondary);text-transform:uppercase} .spec-cell .v{font-family:var(--font-brand);font-weight:700;font-size:18px;margin-top:4px} details{border-top:1px solid var(--hairline);padding:16px 0} summary{font-family:var(--font-brand);font-weight:700;font-size:16.5px;cursor:pointer} details p{margin:10px 0 0;color:#CFC8DC;max-width:70ch} @media (max-width:860px){ .spec-grid{grid-template-columns:repeat(2,1fr)} } /* ---------- footer ---------- */ footer{background:var(--field);border-top:1px solid var(--hairline);padding-block:var(--sp-7)} .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; font-size:14px;color:var(--text-secondary)} .foot a{color:var(--text-secondary)} /* ---------- sticky mobile CTA ---------- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px var(--margin-page); padding-bottom:calc(12px + env(safe-area-inset-bottom));background:rgb(18 8 28 / .94); backdrop-filter:blur(8px);border-top:1px solid var(--hairline);display:none} .sticky-cta .btn{width:100%;justify-content:center} @media (max-width:860px){ .sticky-cta.on{display:block} body.has-sticky{padding-bottom:96px} }