@font-face{ font-family:'Highrise'; src:url('fonts/highrise-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('fonts/archivo-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  --cream:#F5F1E8;
  --orange:#E8502A;
  --display:'Highrise', Impact, sans-serif;
  --body:'Archivo', Helvetica, Arial, sans-serif;
}

html, body{ margin:0; padding:0; height:100%; overflow:hidden; background:#000; }

/* subpages (/live, /about) scroll normally; the landing page stays locked to one screen.
   body itself must be viewport-bounded (not height:auto) so it becomes the scroll
   container — otherwise it grows to fit content and gets clipped by html's overflow:hidden
   with no way to reach the rest. */
body.va-scroll{
  overflow-y:auto; overflow-x:hidden;
  height:100vh; height:100dvh;
}

*, *::before, *::after{ box-sizing:border-box; }

.va-stage{
  position:fixed; inset:0;
  height:100vh; height:100dvh;
  overflow:hidden;
  background:#000;
}
.va-stage.interactive{ cursor:pointer; }

#va-hero{
  position:absolute; display:block;
  transform-origin:0 0;
  will-change:transform;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
.va-stage.animate #va-hero{ transition:transform 1.7s cubic-bezier(.62,.02,.16,1); }

/* ── name / proof type (landing header + reused sizing reference for .section-head) ── */
.va-name{
  font-family:var(--display);
  font-size:30px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
}
.va-proof{
  margin-top:1px;
  font-size:11.5px; line-height:1.4;
  text-transform:none;
  color:rgba(245,241,232,.9);
}

/* ── nav-style button (Live Dates, Work) — cream outline, spans the specials row's width ── */
.va-live{
  display:block;
  width:100%;
  margin:12px 0 2px;
  font-family:var(--display);
  font-size:23px; letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  color:var(--orange);
  text-decoration:none;
  border:1.5px solid var(--cream);
  border-radius:6px;
  padding:8px 6px;
}
.va-live:hover, .va-live:focus-visible{ color:var(--cream); }

.va-work{
  display:block;
  margin-top:12px;
}

.va-micro{
  display:block;
  margin:12px 0 4px;
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
}

/* ── big section header: UPCOMING SHOWS / PAST / STAND-UP / WRITING / etc ── */
.section-head{
  display:block;
  font-family:var(--display);
  font-size:30px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 16px;
}

/* ── specials tile grid (landing + /about STAND-UP) ── */
.va-specials{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.va-sp{
  display:flex; flex-direction:column; justify-content:center;
  border:1.5px solid var(--cream);
  border-radius:6px;
  padding:3px 6px;
  min-height:44px;
  text-decoration:none;
  color:var(--cream);
}
.va-sp .s-name{
  font-family:var(--display);
  font-size:14px; letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.05;
  color:var(--cream);
}
.va-sp .s-sub{
  margin-top:5px;
  font-size:8.5px; letter-spacing:.03em;
  line-height:1.25;
  text-transform:lowercase;
  color:rgba(245,241,232,.72);
}
.va-sp:hover .s-name, .va-sp:focus-visible .s-name{ color:var(--orange); }
.va-sp.featured{ border-color:var(--orange); }
.va-sp.featured .s-sub{ color:var(--orange); }
.va-sp.featured:hover .s-name{ color:var(--cream); }

/* ── email capture (Beehiiv embed) ── */
.va-email{ margin-top:12px; }
.va-email-heading{
  font-family:var(--body); font-weight:600;
  font-size:14px; text-transform:lowercase;
  color:var(--cream);
  margin:0 0 3px;
}
.va-embed-scale{
  transform:scale(.46);
  transform-origin:top center;
  margin-bottom:-55px;
}
.va-embed{ min-height:92px; }
.va-embed input, .va-embed input[type=email], .va-embed input[type=text]{
  background:#17130f !important; color:var(--cream) !important;
  border:1px solid rgba(245,241,232,.4) !important;
  border-radius:4px !important; font-family:var(--body) !important;
}
.va-embed input::placeholder{ color:rgba(245,241,232,.55) !important; }
.va-embed button, .va-embed input[type=submit]{
  background:#E8502A !important; color:var(--cream) !important;
  border:none !important; font-family:var(--display) !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
}
.va-email-micro{
  display:block; margin-top:4px;
  font-size:10px; letter-spacing:.06em;
  text-transform:lowercase;
  color:rgba(245,241,232,.6);
}

/* ── footer / socials ── */
.va-footer{
  margin-top:16px; padding-top:7px;
  border-top:.5px solid rgba(245,241,232,.25);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.va-footer a{
  font-size:10px; letter-spacing:.06em;
  text-transform:lowercase;
  color:rgba(245,241,232,.7);
  text-decoration:none;
}
.va-footer a:hover, .va-footer a:focus-visible{ color:var(--orange); }

.va-socials{
  margin-top:1px;
  font-size:10px; letter-spacing:.06em;
  text-transform:lowercase;
  color:rgba(245,241,232,.6);
  font-family:var(--body);
}
.va-socials a{ color:rgba(245,241,232,.6); text-decoration:none; }
.va-socials a:hover, .va-socials a:focus-visible{ color:var(--orange); }
.va-socials .dot{ margin:0 6px; opacity:.5; }

a:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }

.va-fullview{
  position:absolute; left:10px; bottom:max(14px, env(safe-area-inset-bottom));
  font-family:var(--body);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream); opacity:0;
  background:none; border:none; cursor:pointer;
  padding:12px 16px;
  transition:opacity .6s ease .8s;
}
.va-stage.open .va-fullview{ opacity:.55; }
.va-fullview:hover{ opacity:1; }

/* ── subpage chrome: fixed header + scrolling content column ── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  font-family:var(--display);
  text-transform:uppercase;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease .35s, visibility 0s;
}
.va-stage.open ~ .site-header{ opacity:1; visibility:visible; }
.va-stage.noanim.open ~ .site-header{ transition:none; }

.site-header a{
  color:var(--cream);
  text-decoration:none;
  letter-spacing:.1em;
}
.site-header a:hover, .site-header a:focus-visible{ color:var(--orange); }
.site-header .site-header-name{
  font-size:13px; letter-spacing:.1em;
  white-space:nowrap;
}
.site-header .site-header-links{ font-size:12px; display:flex; gap:14px; flex-shrink:0; }
.site-header .site-header-links a.current{ color:var(--orange); }

.content-scroll{
  position:relative; z-index:1;
  width:min(360px, calc(100vw - 28px));
  margin:0 auto;
  padding:96px 0 60px;
  color:var(--cream);
  font-family:var(--body);
  opacity:0; visibility:hidden;
  transition:opacity .8s ease .35s, visibility 0s;
}
.va-stage.open ~ .content-scroll{ opacity:1; visibility:visible; }
.va-stage.noanim.open ~ .content-scroll{ transition:none; }

.va-stage.noanim.open .va-menu{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .va-stage.animate #va-hero{ transition:none; }
  .va-menu, .va-stage.open .va-menu{ transition:none; }
  .site-header, .content-scroll{ transition:none; }
}

/* ── desktop breakpoint (1024px+): scale up the menu/content column and its
   components proportionally for large screens. Purely additive — nothing below
   this breakpoint changes, and .va-menu's own width override lives in each page's
   inline <style> since .va-menu itself is landing-only markup. ── */
@media (min-width:1024px){
  .content-scroll{ width:min(520px, calc(100vw - 28px)); }

  .va-name{ font-size:40px; }
  .va-proof{ font-size:14px; }

  .va-live{ font-size:28px; padding:10px 10px; margin-top:10px; }
  .va-work{ margin-top:10px; }

  .va-micro{ font-size:12px; margin-top:10px; }

  .section-head{ font-size:40px; }

  .va-specials{ gap:10px; }
  .va-sp{ padding:6px 10px; min-height:56px; }
  .va-sp .s-name{ font-size:17px; }
  .va-sp .s-sub{ font-size:10px; margin-top:6px; }

  .va-email{ margin-top:10px; }
  .va-email-heading{ font-size:16px; }
  .va-embed-scale{ transform:scale(.62); margin-bottom:-35px; }
  .va-email-micro{ font-size:12px; }

  .va-footer{ margin-top:10px; padding-top:6px; }
  .va-footer a{ font-size:12px; }
  .va-socials{ font-size:12px; }
}