/* ============================================================
   ALAN CAVÉ — World Tour · Global design system
   ============================================================ */
:root{
  --ink:#08080c; --ink-2:#101019; --panel:#15151f; --panel-2:#191926;
  --line:rgba(232,198,106,.16); --line-soft:rgba(244,239,228,.10);
  --gold:#e8c66a; --gold-2:#c79a3a; --gold-deep:#a9842f;
  --rose:#d24a63; --rose-deep:#9c2f44;
  --cream:#f4efe4; --mist:rgba(244,239,228,.62); --mist-2:rgba(244,239,228,.40);
  --maxw:1180px; --gut:clamp(20px,5vw,64px);
  --f-display:'Anton',system-ui,sans-serif;
  --f-head:'Bricolage Grotesque','Inter',sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--f-body); font-size:clamp(15px,1.05vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; line-height:1.04; font-weight:800}
::selection{background:var(--gold); color:#000}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
section{position:relative; padding-block:clamp(72px,12vh,150px)}

/* ---- film grain (global, subtle, no blend-mode — blend modes can nuke
       the whole page in some engines) ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045;
}
/* ---- gentle edge vignette (separate layer, low opacity) ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(125% 90% at 50% 0%, transparent 60%, rgba(0,0,0,.5) 100%);
}

/* ---- shared bits ---- */
.eyebrow{font-family:var(--f-body); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:600; color:var(--gold);}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin:0}
.serif{font-family:var(--f-serif); font-weight:500}

.btn{display:inline-flex; align-items:center; gap:.55em; font-weight:600; font-size:.92rem;
  letter-spacing:.02em; padding:.92em 1.5em; border-radius:999px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#1a1304;
  box-shadow:0 10px 34px -12px rgba(232,198,106,.6)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(232,198,106,.7)}
.btn-ghost{border-color:var(--line); color:var(--cream); background:rgba(244,239,228,.02)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
.chip{display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; padding:.42em .8em; border-radius:999px;
  border:1px solid var(--line); color:var(--mist)}
.chip-live{color:#0c0c0c; background:var(--gold); border-color:transparent}
.chip-soon{color:var(--mist)}
.chip-vip{color:var(--rose); border-color:rgba(210,74,99,.4)}

/* ---- reveal: ALWAYS visible by default. JS only "arms" (hides) elements
   that are below the fold at load, then reveals them on scroll. Above-the-fold
   content is never hidden, and no-JS = fully visible. ---- */
.reveal{transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.armed{opacity:0; transform:translateY(22px)}
html.js .reveal.armed.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal.armed{opacity:1 !important; transform:none !important}}

/* ============================== NAV ============================== */
.nav{position:fixed; top:0; left:0; right:0; z-index:8000; height:var(--nav-h);
  display:flex; align-items:center; transition:background .35s, border-color .35s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,8,12,.78); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{font-family:var(--f-display); font-size:1.18rem; letter-spacing:.06em; color:var(--cream)}
.brand b{color:var(--gold); font-weight:400}
.nav-links{display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0}
.nav-links a{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mist);
  font-weight:500; transition:color .2s; position:relative}
.nav-links a:hover{color:var(--cream)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--gold); transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:.4rem}
.nav-toggle{display:none; background:none; border:0; color:var(--cream); width:42px; height:42px}
.nav-toggle span{display:block; width:24px; height:2px; background:currentColor; margin:5px auto; transition:.3s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:880px){
  .nav-toggle{display:block}
  .nav-links{position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:rgba(8,8,12,.97); backdrop-filter:blur(16px); padding:1rem var(--gut) 2rem;
    border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links li{width:100%; border-bottom:1px solid var(--line-soft)}
  .nav-links a{display:block; padding:1.05rem 0; font-size:1rem}
  .nav-links a::after{display:none}
  .nav-cta{margin:1.2rem 0 0}
}

/* ============================== FOOTER ============================== */
.foot{padding:clamp(48px,8vh,90px) 0 2.5rem; border-top:1px solid var(--line); background:var(--ink-2)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start}
.foot .brand{font-size:1.6rem}
.foot-tag{color:var(--mist); max-width:30ch; margin-top:.7rem; font-size:.9rem}
.foot-col h5{font-family:var(--f-body); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem;
  color:var(--gold); margin:0 0 .9rem; font-weight:700}
.foot-col a{display:block; color:var(--mist); font-size:.9rem; padding:.28rem 0; transition:color .2s}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; color:var(--mist-2); font-size:.78rem}

/* generic duotone media frame helper */
.media{position:relative; overflow:hidden; background:
  linear-gradient(150deg, var(--rose-deep), var(--ink) 55%, #0b1b22)}
.media img{width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.92;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,8,12,.55))}

/* ============================================================
   Post-assembly overrides (kept global so re-builds preserve them)
   ============================================================ */
/* Hero: center the content block so it never overflows below the fold */
#hero{align-items:center !important}
#hero .hero-inner{
  padding-block:calc(var(--nav-h) + clamp(28px,6vh,64px)) clamp(64px,10vh,110px) !important;
}
#hero .hero-name{font-size:clamp(3.4rem,13vw,10.5rem) !important; line-height:.9 !important}
@media (max-height:760px){
  #hero .hero-name{font-size:clamp(3rem,10vw,7rem) !important}
  #hero .hero-sub{display:none}
}

/* Request Your City — interactive state */
#tour .tour-chip[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border-color:transparent; color:#1a1304; font-weight:600;
}
#tour .tour-chip[aria-pressed="true"]::before{content:"✓ "; font-weight:700}
#tour .city-form{display:flex; gap:.6em; flex-wrap:wrap; margin-top:1.2em; max-width:440px}
#tour .city-input{
  flex:1 1 220px; min-width:0; font-family:var(--f-body); font-size:.9rem; color:var(--cream);
  background:rgba(244,239,228,.04); border:1px solid var(--line); border-radius:999px; padding:.72em 1.15em;
}
#tour .city-input:focus{outline:none; border-color:var(--gold)}
#tour .city-input::placeholder{color:var(--mist-2)}
#tour .city-add{
  font-family:var(--f-body); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:#1a1304;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)); border:0; border-radius:999px;
  padding:.72em 1.4em; cursor:pointer; transition:transform .2s ease;
}
#tour .city-add:hover{transform:translateY(-2px)}
#tour .tour-vote__pick{ margin:1.3em 0 .1em; color:var(--mist); font-size:.9rem; font-family:var(--f-body); }
#tour .tour-vote__ack{
  margin:1.2em 0 0; color:var(--gold); font-size:.92rem; line-height:1.5; font-family:var(--f-body); max-width:54ch;
}

/* Video: "more on YouTube" link (replaces the duplicate thumbnails) */
#video .video__more{
  margin:1.6em 0 0; font-family:var(--f-body); font-size:.9rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mist);
}
#video .video__more a{color:var(--gold); font-weight:600; transition:opacity .2s}
#video .video__more a:hover{opacity:.8}