/* Heyoh — Sports & Entertainment landing. Tokens resolve per color scheme via light-dark().
   Source: approved engineering packet (2026-09-23) site/landing.css. Rules for markup the final
   design does not ship (carousel, card templates, three.js canvas, hero CTA) are removed; every
   remaining rule is verbatim. approved-layout.css loads after this file and stays authoritative. */
:root{color-scheme:light dark;
--bg:light-dark(#fefcf7,#10131c);
--surface:light-dark(#fffefb,#181b24);
--surface-2:light-dark(#f8f5ee,#20232d);
--line:light-dark(#ebe4d3,#2e313c);
--line-strong:light-dark(#d6cdb6,#4a4d5a);
--ink:light-dark(#111216,#f6f2e8);
--ink-2:light-dark(#27306b,#c9d0f5);
--muted:light-dark(#4f5680,#a9aecb);
--link:light-dark(#1f3fbf,#a8b8ff);
--y:#FFD93D;--y-hover:#FFCC00;--on-y:#17140a;--y-dot:#F5C400;
--y-tint:light-dark(#fff3c4,#3a3216);
--note:light-dark(#fdf5dc,#252219);
--note-line:light-dark(#f1e2ad,#4b4222);
--fold:light-dark(#f3e1a0,#5a4e24);
--bar-off:light-dark(#f4e8bd,#453d22);
--stripe:light-dark(#efe9dc,#282b35);
--dot-off:light-dark(#d9d4c9,#3d404b);
--good-bg:light-dark(#e2f4e7,#15301e);--good-fg:light-dark(#1b6632,#93e2aa);--good:#27a35a;
--warn-bg:light-dark(#fdebd6,#3b2814);--warn-fg:light-dark(#874705,#ffc58a);--warn:#e8891a;
--info-bg:light-dark(#e8ebff,#1e2340);--info-fg:light-dark(#2d3ea3,#bac5ff);--info:#4a6cff;
--neutral-bg:light-dark(#efede8,#272a33);--neutral-fg:light-dark(#272930,#e3e3e8);--neutral:#a3a19b;
--review-bg:var(--y-tint);--review-fg:light-dark(#3b2f00,#ffe68a);--review:var(--y-dot);
--shadow:light-dark(rgba(70,48,0,.14),rgba(0,0,0,.6));
--shadow-s:light-dark(rgba(70,48,0,.06),rgba(0,0,0,.4));
--serif:"Source Serif 4","Lora",Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Roboto","Helvetica Neue",Arial,system-ui,sans-serif;
--brand:"Figtree",var(--sans);
--mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono",Consolas,monospace;
--ease:cubic-bezier(.4,0,.2,1);
--night:linear-gradient(var(--bg) 0,var(--bg) 16%,#40434f 46%,#a39c8f 82%);
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:var(--link)}a:hover{color:var(--ink)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:.35rem}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:.5rem;text-decoration:none}.skip:focus{top:1rem}

.page{container:page/inline-size;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}
main{flex:1 1 auto;display:flex;flex-direction:column}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(clamp(.5rem,min(1.3cqi,1.4vh),1.1rem),env(safe-area-inset-top)) clamp(1.25rem,5cqi,4.75rem) 0;position:relative;z-index:3}
.logo{display:inline-flex;align-items:center;gap:.14em;text-decoration:none;color:var(--ink);font-size:clamp(2rem,min(1.5rem + 1.9cqi,5vh),3.3rem);border-radius:.5rem}
.logo:hover{color:var(--ink)}
.logo-mark{width:1.12em;height:1.12em;display:block}
.wordmark{font-family:var(--brand);font-weight:800;font-size:1em;letter-spacing:-.045em;line-height:1;transform:translateY(-.04em)}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,3cqi,2.5rem)}
.signin{white-space:nowrap;color:var(--ink-2);text-decoration:none;font-size:clamp(1.1rem,.95rem + .45cqi,1.35rem);min-height:44px;display:inline-flex;align-items:center;padding-inline:.25rem}
.signin:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;font-weight:500;border-radius:.5rem;transition:transform .15s var(--ease),background-color .15s var(--ease)}
.btn--primary{background:var(--y);color:var(--on-y);border:1px solid rgba(90,60,0,.1);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 18px -10px rgba(170,120,0,.65)}
.btn--primary:hover{background:var(--y-hover);color:var(--on-y);transform:translateY(-1px)}
.btn--primary:active{transform:none}
.hdr-signup{white-space:nowrap;font-size:clamp(1.1rem,.95rem + .45cqi,1.35rem);padding:.35em 1.1em}

/* Hero */
.hero{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(1rem,4cqi,3rem) 0;position:relative;z-index:3}
.hero h1{margin:0;font-family:var(--serif);font-weight:660;font-optical-sizing:auto;font-size:clamp(2.2rem,min(.8rem + 5.2cqi,8.6vh),5.5rem);line-height:.88;letter-spacing:-.05em;max-width:10.5em;text-wrap:balance;color:var(--ink)}
.sub{margin:.4em 0 1.2cqi;font-size:clamp(.95rem,min(.72rem + .85cqi,2.4vh),1.45rem);line-height:1.15;color:var(--ink-2);position:relative;z-index:1}
.sub span{display:block}

/* Venue — the corrected arena artwork. One responsive image serves every mode; the approved
   layout frames it (contain on wide screens, a bottom-anchored cover crop on portrait phones). */
.venue{position:relative;z-index:1;flex:1 1 0;min-height:13cqi;max-height:24.74cqi;overflow:hidden;pointer-events:none}
.venue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
@container page (max-width:43.7rem){
.venue{flex:none;min-height:0;max-height:none;height:auto;aspect-ratio:887/243;margin-top:0}}

/* Dark: the cream sky becomes night by multiplying over a sky gradient that starts at --bg */
:root[data-theme=dark] .venue{background:var(--night)}:root[data-theme=dark] .venue img{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .venue{background:var(--night)}:root:not([data-theme=light]) .venue img{mix-blend-mode:multiply}}

/* Footer */
/* Footer: a hairline rule separates it from the cards; spare window height sits above the rule */
.rule{grid-column:1/-1;border:0;height:1px;margin:0 0 clamp(.4rem,min(1.2cqi,1.2vh),1rem);background:var(--line)}
.site-footer{margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:.25rem 1rem;padding:clamp(.6rem,min(2.4cqi,2vh),2rem) clamp(1.25rem,2.75cqi,2.6rem) max(.6rem,env(safe-area-inset-bottom))}
.site-footer a{color:var(--ink-2);text-decoration:none;font-size:1.02rem;min-height:36px;display:inline-flex;align-items:center}
.site-footer a:hover{text-decoration:underline;text-underline-offset:.2em;color:var(--ink)}
.site-footer a:last-child{justify-self:end}
.tagline{margin:0;font-family:var(--serif);font-weight:650;font-size:clamp(1.2rem,.85rem + 1cqi,1.85rem);letter-spacing:-.025em;line-height:1.15;text-align:center;text-wrap:balance}
@container page (max-width:48rem){.site-footer{grid-template-columns:1fr 1fr}.tagline{grid-column:1/-1;order:-1}.rule{order:-2}}
@container page (max-width:40rem){.hdr-signup{display:inline-flex;font-size:1rem;padding:.3em .9em}.signin{font-size:1rem}}

/* Accessibility modes */
@media (prefers-contrast:more){
:root{--line:light-dark(#8c8474,#80838f);--line-strong:light-dark(#4d4739,#c9cbd5);--ink-2:light-dark(#0e1850,#eef0ff);--muted:var(--ink-2);--dot-off:light-dark(#8f8a80,#6f717c)}
.btn--primary{box-shadow:none}.btn--primary{border-color:var(--ink)}}
@media (forced-colors:active){
.btn{border:1px solid ButtonText;forced-color-adjust:auto}
.venue img{mix-blend-mode:normal}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}}
@media print{.venue{display:none}}