/* LYTTE - site styles (index.html)
   Colours live in :root at the top - change a colour there and it changes
   everywhere. Fonts are in fonts.css. */

:root{
  --blue:#2e69ff;
  --orange:#DD5602;
  --green:#f4ffd1;
  --porcelain:#fafaf6;
  --graphite:#2a2821;
  --ink-soft:#5c5a52;
  --line:#7a7873;
  --rail-w:150px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--porcelain);
  color:var(--graphite);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--blue);color:#fff;}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px 0 48px;
}
@media(min-width:900px){
  .wrap{padding-right:calc(var(--rail-w) + 40px);}
}

/* ---------- type ---------- */
.h-section{
  font-size:52px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.1;
  color:var(--graphite);
  margin-bottom:22px;
}
.h-sub{
  font-size:20px;
  font-weight:600;
  color:var(--orange);
  letter-spacing:.01em;
  margin-bottom:14px;
}
.h-sub::after{content:'_';}
.h-col{
  font-size:18px;
  font-weight:600;
  color:var(--orange);
  line-height:1.3;
  margin-bottom:14px;
}
.h-col strong{text-transform:uppercase;font-weight:700;}
/* general text boxes - design spec: letter spacing 35 (=.035em), line spacing 1.95 */
p{font-weight:300;font-size:13.5px;letter-spacing:.035em;line-height:1.95;text-wrap:pretty;}
p strong{font-weight:600;}
.hl{
  display:inline-block;
  background:var(--green);
  color:var(--graphite);
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  padding:4px 10px;
  margin-top:22px;
  transition:background .2s ease, transform .2s ease;
}
.hl:hover{background:#eaf7b8;transform:translateY(-1px);}
.pill{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  padding:4px 10px;
  border-radius:2px;
  line-height:1.5;
  white-space:nowrap;
  transition:background .2s ease;
}
.pill:hover{background:#1f55e0;}

/* ---------- placeholders (until real assets arrive) ---------- */
.ph-art{
  border:1.5px dashed var(--graphite);
  border-radius:14px;
  color:var(--graphite);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  background:rgba(42,40,33,0.02);
}
.ph-photo{
  background:#d9d9d6;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ph-photo svg{width:45%;height:45%;fill:#ececea;}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:18px 28px 18px 24px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.topbar > *{pointer-events:auto;}
.topbar.scrolled{
  background:rgba(250,250,246,0.9);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(42,40,33,0.06);
  padding:10px 28px 10px 24px;
}

/* ---------- brand badge: vinyl + next-event pill ----------
   Sits top-left on load with the pill 30% oversized; on the first scroll the
   whole badge travels down to the bottom-left corner and the pill settles
   back to its normal size. Dismissable with the ×. */
.brand-badge{
  position:fixed;
  top:24px;left:24px;
  /* box reserves the docked stack height so the travel distance never shifts */
  width:44px;height:80px;
  z-index:95;
  transition:transform .65s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.brand-badge.docked{transform:translateY(calc(100vh - 100% - 48px));}
@supports (height:100dvh){
  .brand-badge.docked{transform:translateY(calc(100dvh - 100% - 48px));}
}
.brand-badge.hidden{opacity:0;pointer-events:none;}
.brand-vinyl{position:absolute;top:0;left:0;width:44px;height:44px;}
.brand-vinyl img{width:44px;height:44px;object-fit:contain;transition:transform .5s ease;}
.brand-vinyl a:hover img{transform:rotate(25deg);}
.brand-close{
  position:absolute;top:-8px;right:-10px;
  width:18px;height:18px;border:none;background:none;cursor:pointer;
  color:var(--graphite);font-size:13px;line-height:18px;opacity:.65;
}
.brand-close:hover{opacity:1;}
/* top of page: pill beside the vinyl, oversized. Docked: pill beneath it. */
.brand-badge .pill{
  position:absolute;top:0;left:0;
  font-size:14.3px;padding:5px 13px;
  transform:translate(56px, 6px);
  transition:background .2s ease, transform .65s cubic-bezier(.4,0,.2,1),
    font-size .55s ease, padding .55s ease;
}
.brand-badge.docked .pill{
  font-size:11px;padding:4px 10px;
  transform:translate(0, 54px);
}

/* burger — orange bars, X morph, blue countdown ring */
.nav-burger{
  position:relative;
  width:44px;height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:50%;cursor:pointer;
}
/* icon 20% smaller (was 24px bars, 3px thick, 5px apart); the 44px tap
   area stays the same so it's still easy to hit on a phone */
.nav-burger .bar{
  width:19.2px;height:2.4px;border-radius:2px;background:var(--orange);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-burger .bar:not(:first-of-type){margin-top:4px;}
.nav-burger.active .bar:nth-of-type(1){transform:translateY(6.4px) rotate(45deg);}
.nav-burger.active .bar:nth-of-type(2){opacity:0;}
.nav-burger.active .bar:nth-of-type(3){transform:translateY(-6.4px) rotate(-45deg);}
.nav-burger-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.nav-burger-ring circle{
  fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
}
.nav-burger.countdown .nav-burger-ring circle{
  opacity:1;
  animation:navBurgerCountdown 5s linear forwards;
  animation-play-state:var(--countdown-state, running);
}
@keyframes navBurgerCountdown{from{stroke-dashoffset:0;}to{stroke-dashoffset:100;}}

/* ---------- side rail ---------- */
.side-nav{
  position:fixed;
  right:34px;
  /* half the old gap under the X: 84px -> 42px (top of page) */
  top:78px;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  padding:14px 18px 14px 14px;
  border-radius:12px;
  background:rgba(250,250,246,0.82);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px) scale(0.96);
  transform-origin:top right;
  transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.side-nav.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
/* once scrolled the top bar tightens and the X rises 8px; follow it so the
   gap stays halved (92px -> 46px) */
.topbar.scrolled ~ .side-nav{top:74px;}
.side-nav-track{position:absolute;right:8px;width:2px;background:rgba(46,105,255,0.18);border-radius:2px;}
.side-nav-indicator{
  position:absolute;right:8px;width:2px;height:16px;background:var(--blue);border-radius:2px;
  transition:top .5s cubic-bezier(.34,1.56,.64,1);
}
.side-nav-item{
  display:flex;align-items:center;gap:8px;position:relative;
  padding-right:16px;
  font-size:12.5px;letter-spacing:.02em;color:var(--graphite);
  transition:color .25s ease, opacity .2s ease;
}
.side-nav-item:hover{opacity:.7;}
.side-nav-item.active{color:var(--graphite);font-weight:600;}
.side-nav-eq{display:none;align-items:flex-end;justify-content:center;gap:2px;width:8px;height:10px;flex-shrink:0;}
.side-nav-eq i{width:2px;background:var(--blue);border-radius:1px;animation:sideNavEq .9s ease-in-out infinite;}
.side-nav-eq i:nth-child(2){animation-delay:.15s;}
.side-nav-eq i:nth-child(3){animation-delay:.3s;}
@keyframes sideNavEq{0%,100%{height:3px;}50%{height:10px;}}
.side-nav-item.active .side-nav-eq{display:flex;}
.side-nav-item.pop .side-nav-label{animation:sideNavPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes sideNavPop{0%{transform:scale(.7) translateX(4px);}55%{transform:scale(1.15) translateX(0);}100%{transform:scale(1) translateX(0);}}

/* ---------- desktop: menu A, the menu slides out of the X into the top bar ----------
   On screens 900px and wider the rail becomes one row of links that grows
   out to the left of the X. The row's width is measured in JS (--menu-w)
   so the reveal animates, and GET TICKETS slides left to make room.
   Phones keep the dropdown rail above. */
@media(min-width:900px){
  .side-nav{
    top:18px; right:86px; height:44px;
    flex-direction:row; align-items:center; justify-content:flex-end; gap:24px;
    padding:0; border-radius:0; background:transparent; backdrop-filter:none;
    opacity:1; transform:none; overflow:hidden; white-space:nowrap;
    max-width:0; visibility:hidden;
    transition:max-width .42s cubic-bezier(.4,0,.2,1), top .35s ease, visibility 0s linear .42s;
  }
  .side-nav.open{
    max-width:calc(var(--menu-w, 420px) + 4px); visibility:visible; pointer-events:auto; transform:none;
    transition:max-width .42s cubic-bezier(.4,0,.2,1), top .35s ease, visibility 0s;
  }
  .topbar.scrolled ~ .side-nav{top:10px;}
  .side-nav-track{display:none;}
  .side-nav-indicator{
    right:0; height:2px; width:0; opacity:0;
    transition:right .35s cubic-bezier(.34,1.3,.64,1), width .35s ease, opacity .2s ease;
  }
  .side-nav.open .side-nav-indicator{opacity:1;}
  a.side-nav-item{
    flex:none; padding:4px 0; gap:6px;
    opacity:0; transform:translateX(26px);
    transition:opacity .26s ease, transform .38s cubic-bezier(.34,1.3,.64,1), color .25s ease;
  }
  .side-nav.open a.side-nav-item{opacity:1; transform:none;}
  .side-nav.open a.side-nav-item:hover{opacity:.7;}
  .side-nav.open a.side-nav-item:nth-of-type(5){transition-delay:40ms;}
  .side-nav.open a.side-nav-item:nth-of-type(4){transition-delay:80ms;}
  .side-nav.open a.side-nav-item:nth-of-type(3){transition-delay:120ms;}
  .side-nav.open a.side-nav-item:nth-of-type(2){transition-delay:160ms;}
  .side-nav.open a.side-nav-item:nth-of-type(1){transition-delay:200ms;}
  /* GET TICKETS, when it is up in the bar, steps left of the open menu */
  .tickets-btn{transition:transform .65s cubic-bezier(.4,0,.2,1), right .42s cubic-bezier(.4,0,.2,1), background .2s ease, opacity .3s ease;}
  html.nav-open .tickets-btn.in-bar{right:calc(var(--tb-right) + var(--menu-w, 420px) + 18px);}
}
@media(min-width:900px) and (prefers-reduced-motion:reduce){
  .side-nav, .side-nav.open, a.side-nav-item, .side-nav-indicator{transition:none;}
}

/* ---------- hero ---------- */
/* The hero is always exactly one screen tall. svh = the screen height with
   the phone's address bar showing, so it doesn't jump as the bar slides
   away; plain vh is the fallback for older browsers. */
.hero{
  --screen:100vh;
  /* room kept clear at the top for the burger and the vinyl tag;
     shrinks on short screens so the logo still gets most of the space */
  --hero-top:clamp(56px, 11vh, 96px);
  height:var(--screen);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  /* the extra 8% at the bottom lifts the logo a touch above dead centre
     (optical centre), which reads as balanced rather than sagging */
  padding:var(--hero-top) 24px calc(var(--hero-top) + var(--screen) * .08);
  overflow:hidden;
}
@supports (height:100svh){ .hero{--screen:100svh;} }
/* The logo grows with the screen but is capped by BOTH width and height,
   so it always fits inside the one-screen hero:
     - 84vw     never wider than most of the screen
     - 1200px   a ceiling for very large monitors
     - height   the lockup is ~0.83x as tall as it is wide (the ear's shape);
                1.06 = fill ~88% of the free height */
.hero-lockup{
  position:relative;
  width:min(84vw, 1200px,
    calc((var(--screen) * .92 - var(--hero-top) * 2) * 1.06));
  container-type:inline-size;
  opacity:0;transform:translateY(12px);
  animation:heroIn 1s ease .15s forwards;
}
.hero-ear{
  width:52%;
  margin:0 auto;
  display:block;
}
/* wordmark + tagline travel together, laid across the ear. top = where the
   cap line of the letters sits, as a share of the ear's height. */
.hero-mark{
  position:absolute;
  left:0;right:0;
  top:45.8%;
}
.hero-wordmark{width:100%;display:block;}
.hero-tagline{
  margin-top:.5em;
  text-align:center;
  font-size:clamp(10px, 1.95vw, 15px);
  /* scale with the logo, not the window: 2.68% of the lockup's width is
     the 15px-at-560px proportion the design was set at */
  font-size:max(10px, 2.68cqw);
  letter-spacing:.17em;
  font-weight:500;
  color:var(--graphite);
  white-space:nowrap;
}
@keyframes heroIn{to{opacity:1;transform:translateY(0);}}

/* ---------- sections ---------- */
section.block{padding:76px 0;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.col-text{max-width:520px;}
.script{font-family:'lytte-cursive', cursive;font-weight:400;font-size:25px;line-height:1.3;
  letter-spacing:.02em;color:var(--graphite);margin:14px 0 12px;}
.script-sign{font-size:28px;margin:16px 0 0;}
.col-text.right{margin-left:auto;text-align:right;}
.col-text.right p{text-align:right;}

/* events */
.events .two-col{align-items:start;}
@media(min-width:900px){
  /* full-bleed so the carousel can grow with the window, but the left edge
     stays lined up with every other section's heading */
  .events .wrap{
    max-width:none;margin:0;
    padding-left:calc(max(0px, (100vw - 1180px) / 2) + 48px);
    padding-right:calc(var(--rail-w) + 40px);
  }
  .events .two-col{grid-template-columns:minmax(300px, 470px) 1fr;gap:56px;}
  /* the text and the carousel pin together as one block, so nothing shifts
     relative to anything else while you scroll the section.
     NB: .wrap and .two-col are the same element here — keep it a grid. */
  .events.block{padding:0;}
  .events{height:178vh;}
  /* The extra 78vh is the travel the pin needs so you can scroll THROUGH the
     fan while the focused card stays put. With a single event there's nothing
     to scroll through, so that height would just be dead scroll — the section
     collapses to one screen and the page carries straight on. JS adds
     .is-single when the list has fewer than two events. */
  .events.is-single{height:100vh;}
  .events .wrap{
    position:sticky;top:0;height:100vh;
    align-items:stretch;
  }
  .events .col-text{align-self:start;padding-top:13vh;}
  .events .carousel{height:100vh;align-self:start;}
}
.carousel{position:relative;height:1020px;}
.carousel-stage{position:absolute;top:50%;left:0;right:0;height:0;}
.carousel-card{
  position:absolute;left:50%;top:0;
  width:clamp(200px, 14vw, 290px);
  transform:translate(-50%,-50%);
  transition:transform .55s cubic-bezier(.34,1.2,.64,1), opacity .4s ease,
    filter .4s ease, width .4s ease;
  will-change:transform;
}
.carousel-card .thumb{
  aspect-ratio:3/2;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#eef4ff 0%,#dfe9ff 50%,#cdd9f2 100%);
  position:relative;
  box-shadow:0 8px 24px rgba(42,40,33,0.06);
}
.carousel-card .thumb img{width:100%;height:100%;object-fit:cover;}
.carousel-card .thumb.sketch::before,
.carousel-card .thumb.sketch::after{
  content:'';position:absolute;left:-10%;right:-10%;bottom:-30%;height:70%;
  border-radius:50% 50% 0 0;background:#dfe5a8;
}
.carousel-card .thumb.sketch::after{left:30%;right:-40%;bottom:-38%;background:#c9d38f;}
.carousel-card .meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:6px 6px 6px;
  background:rgba(250,250,246,0.72);z-index:2;
  transition:padding .3s ease;
}
.carousel-card .meta-date{padding:0 6px 4px;}
/* solid panel inside the see-through band - design spec (event preview):
   title  Poppins ExtraBold, caps, charcoal
   text   Poppins Regular, smaller, charcoal, line spacing 1.3
   where  Poppins SemiBold, smaller, LYTTE orange
   all three: letter spacing 35 (=.035em) */
.meta-box{background:var(--porcelain);padding:8px 10px 9px;border-radius:2px;}
.meta-desc{font-size:10px;font-weight:400;color:var(--graphite);letter-spacing:.035em;line-height:1.3;margin-top:3px;
  transition:font-size .3s ease;
  /* the card is a fixed 3:2 box, so a long description stops at 3 lines
     (with ...) - the full text is in the full-screen view */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
.meta-loc{font-size:9.5px;font-weight:600;color:var(--orange);letter-spacing:.035em;line-height:1.3;margin-top:5px;
  transition:font-size .3s ease;}
.meta-date{
  font-size:10px;font-weight:600;color:var(--orange);letter-spacing:.04em;
  white-space:nowrap;line-height:1.4;
  transition:font-size .3s ease, color .3s ease;
}
.meta-title{
  font-size:12px;font-weight:800;color:var(--graphite);letter-spacing:.035em;line-height:1.25;
  transition:font-size .3s ease;
}
/* focused card: 30% up on the old size, and it absorbs any extra window width */
.carousel-card.is-active{width:max(300px, min(520px, calc(100% - 150px)));z-index:5;}
.carousel-card.is-active .meta{padding:8px 8px 8px;}
.carousel-card.is-active .meta-date{font-size:12px;color:var(--blue);padding:0 10px 6px;}
.carousel-card.is-active .meta-box{padding:12px 14px 12px;}
.carousel-card.is-active .meta-title{font-size:18px;}
.carousel-card.is-active .meta-desc{font-size:12.5px;margin-top:4px;}
.carousel-card.is-active .meta-loc{font-size:12px;margin-top:7px;}
.carousel-card.is-active .thumb{box-shadow:0 14px 34px rgba(46,105,255,0.14);}
.events-status{font-size:12px;color:var(--graphite);}

/* date rail — navigation + autorotation timer */
.car-rail{
  position:absolute;right:0;top:0;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  padding-left:18px;
  z-index:6;
}
.car-rail-line{
  position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:rgba(42,40,33,0.16);
}
.car-rail-item{
  position:relative;
  background:none;border:none;padding:6px 0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:11px;letter-spacing:.05em;
  color:var(--graphite);white-space:nowrap;
  transition:color .25s ease;
}
.car-rail-item .tick{
  position:absolute;left:-18px;top:50%;
  width:8px;height:1px;background:rgba(42,40,33,0.3);
  transition:width .3s ease, background .3s ease;
}
.car-rail-item .lbl-short{display:none;}
.car-rail-item:hover{color:var(--graphite);}
.car-rail-item.is-active{color:var(--blue);font-weight:600;}
.car-rail-item.is-active .tick{width:14px;background:var(--blue);}
.car-rail-item .prog{
  position:absolute;left:0;bottom:2px;height:1px;width:0;
  background:var(--blue);opacity:.55;
}
.car-rail.rotating .car-rail-item.is-active .prog{
  animation:carProg 5s linear forwards;
  animation-play-state:var(--car-state, running);
}
@keyframes carProg{from{width:0;}to{width:100%;}}

/* concept */
.concept .art{transform:rotate(-12deg);width:min(380px,90%);height:auto;margin:0 auto;}
.concept .script{margin:6px 0 12px;}
.concept .concept-item{margin-top:22px;}
.concept .concept-lead + .script + .concept-item{margin-top:0;}
/* Wider screens: the bold first sentence stays on one line and the text
   column is at least that wide (680px). Like Experience, the section breaks out of the 1180px column on
   the right to make room (left edge still lines up with the other sections),
   and the cassette fills the space on the left. Below 1200px there isn't
   room beside the cassette, so the sentence wraps as normal. */
@media(min-width:1200px){
  .concept .wrap{
    max-width:none; margin:0;
    padding-left:calc(max(0px, (100% - 1180px) / 2) + 48px);
    grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(40px, 4vw, 72px);
  }
  /* at least as wide as the one-line first sentence; 680px gives every
     paragraph two clean lines, like the mock */
  .concept .col-text{width:min-content; min-width:680px; max-width:none;}
  .concept .concept-lead{white-space:nowrap;}
  /* the cassette sits close to the text (as in the mock) and may grow
     leftwards into the empty page margin, by up to 160px; the tilted
     corner stays at least ~48px from the window edge */
  .concept .art{--bleed:min(160px, max(0px, (100vw - 1180px) / 2 - 28px));
    justify-self:end; margin:0; max-width:none;
    width:min(560px, calc(100% + var(--bleed)));}
}
/* experience */
.experience .art{width:min(340px,90%);height:auto;margin:0 auto 48px;transform:rotate(-6deg);}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);column-gap:44px;row-gap:0;margin-top:40px;
  grid-template-rows:auto auto;}
/* the three columns share rows, so the text under each heading starts at
   the same height even when one heading wraps onto two lines */
.three-col > div{display:grid;grid-row:span 2;grid-template-rows:subgrid;}
/* Wider screens: the tape-stack drawing moves to the right of the text.
   The section breaks out of the 1180px column on the right (like Events)
   to make room, while its left edge stays lined up with every other
   section. Below 1200px the three columns would get too narrow beside the
   drawing, so it stays on top as before. */
@media(min-width:1200px){
  /* right-hand column: the drawing on top, "Who we vibe with" below it;
     the heading and three columns line up with the bottom of that list */
  .experience .wrap{
    max-width:none; margin:0;
    padding-left:calc(max(0px, (100% - 1180px) / 2) + 48px);
    display:grid; grid-template-columns:minmax(0,1fr) clamp(280px, 22vw, 380px);
    grid-template-areas:"art vibe" "text vibe"; grid-template-rows:1fr auto;
    column-gap:clamp(32px, 2.8vw, 56px);
  }
  .experience .exp-text{grid-area:text; align-self:end; min-width:0;}
  /* the tape stack sits in the open space right of the EXPERIENCE heading,
     above the third column; it drops down beside the heading (the negative
     bottom margin), which only fills the left part of that line. Its width
     is whatever is left after the heading (~370px) plus a gap, so the two
     never touch on narrower screens. */
  /* margin-right keeps the tilted corner ~24px clear of the side menu */
  /* the drawing is a bit wider than the list column and reaches left into
     the gap above the text, as in the mock */
  .experience .art{grid-area:art; justify-self:end; align-self:end; width:clamp(260px, calc(100% - 450px), 420px); max-width:none; margin:0 2% -34px 0; transform:rotate(-11deg);}
  .experience .vibe{grid-area:vibe; align-self:end; margin:0; max-width:none;}
  .experience .three-col{column-gap:28px;}
}
/* "Who we vibe with" - right-aligned list, handwritten middle */
.vibe{margin:44px 0 0 auto;max-width:360px;text-align:right;}
.vibe p{text-align:right;}
.vibe .vibe-head{font-size:18px;font-weight:600;letter-spacing:.02em;line-height:1.3;margin:0;}
.vibe .vibe-list{font-size:34px;line-height:1.08;letter-spacing:.02em;margin:10px 0 6px;}
.nowrap{white-space:nowrap;}
.vibe .vibe-end{font-size:15px;font-weight:400;line-height:1.4;margin:0;}
.vibe .vibe-art{display:block;width:100%;height:auto;margin-left:auto;}
.thumbs{display:flex;gap:12px;margin:18px 0;}
.thumbs .ph-photo{width:52px;height:52px;border-radius:4px;}
.experience-close{
  max-width:640px;
  margin:34px 0 0;
  font-size:14px;
  font-weight:400;
}

/* contact */
.contact .art-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end;}
.contact .ph-photo{aspect-ratio:1/1;}
/* founder cards - transparent cut-outs with torn edges; a soft shadow keeps
   the cream paper from melting into the porcelain background */
.contact .founder{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(42,40,33,.14));}
.contact-actions{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px;align-items:center;}
.btn-blue{
  display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:500;
  letter-spacing:.04em;padding:10px 18px;border-radius:2px;transition:background .2s ease;
}
.btn-blue:hover{background:#1f55e0;}
.btn-link{font-size:12px;font-weight:500;letter-spacing:.04em;border-bottom:1px solid var(--graphite);cursor:pointer;}
.contact-note{
  display:none;font-size:12px;color:var(--graphite);margin-top:12px;text-align:right;
}
.contact-note.show{display:block;}

/* faq */
.faq{position:relative;}
/* right-hand column: cassette, "Friends of Lytte", and the partner collage */
.faq-side{margin-top:56px;max-width:460px;}
.faq-art{display:block;width:72%;margin:0 0 0 3%;transform:rotate(8deg);opacity:.9;pointer-events:none;}
.friends-title{font-size:30px;line-height:1.1;margin:-12px 0 2px 2%;text-align:left;}
.friends-sub{font-size:11px;font-weight:400;letter-spacing:.04em;line-height:1.5;margin:0 0 10px 2%;}
.friends-sub a{color:var(--blue);}
.friends-wall{position:relative;aspect-ratio:410 / 238;}
.friends-wall img{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;}
/* wider screens: the column sits to the right of the questions; the
   section breaks out of the 1180px column like Experience and Concept */
@media(min-width:1200px){
  .faq .wrap{
    max-width:none; margin:0;
    padding-left:calc(max(0px, (100% - 1180px) / 2) + 48px);
    display:grid; grid-template-columns:minmax(0,1fr) clamp(320px, 30vw, 460px);
    column-gap:clamp(40px, 4vw, 72px); align-items:start;
  }
  .faq-side{margin-top:0; max-width:none;}
  /* only the cassette moves right, out over the empty margin; "Friends of
     Lytte" and its link stay where they are */
  .faq-art{transform:translateX(220px) rotate(8deg);}
}
.faq-list{max-width:640px;margin-top:10px;}
.faq-item{border-bottom:1px solid rgba(42,40,33,0.12);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:18px 0;font-size:14px;font-weight:500;color:var(--graphite);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q span.ic{color:var(--blue);font-size:18px;transition:transform .3s ease;}
.faq-item.open .faq-q span.ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 0 18px;max-width:560px;}
.faq-item.open .faq-a{max-height:460px;}

/* footer */
footer{
  background:var(--orange);
  color:var(--graphite);
  position:relative;
  overflow:hidden;
  padding:64px 0 48px;
}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;}
.footer-brand img{width:min(320px,60vw);}
.footer-brand .est{font-size:12px;letter-spacing:.06em;margin-top:14px;}
.footer-links{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-size:12px;letter-spacing:.06em;text-align:right;
  position:relative;z-index:2;
}
.footer-links a{transition:opacity .2s ease;}
.footer-links a:hover{opacity:.7;}
.footer-links .strong{font-weight:700;text-transform:uppercase;}
.footer-links .light{color:var(--porcelain);font-weight:600;text-transform:uppercase;}
/* was brand blue, but blue on the new orange is ~1.9:1 — unreadable */
.footer-links .blue{color:var(--graphite);text-decoration:underline;text-underline-offset:3px;}
.footer-links .pill{margin:2px 0;}
/* footer speaker - exactly as tall as the footer menu (FAQ down to Privacy
   Policy) and lined up with it. JS measures the menu and sets top/height;
   the values here are only a fallback if that script can't run. */
.footer-art{
  position:absolute;right:-30px;bottom:48px;height:260px;width:auto;opacity:.9;pointer-events:none;
  filter:brightness(0.15);
}
@media(min-width:900px){ .footer-art{right:calc(var(--rail-w) - 120px);} }

/* event overlay — full-bleed takeover, opened by clicking an event card */
.evov{position:fixed;inset:0;z-index:210;display:none;}
.evov.open{display:block;}
.evov-shot{position:absolute;inset:0;background-size:cover;background-position:center;}
/* two scrims: one across for the text column, one up from the floor, so the
   copy stays readable whatever the photo is doing underneath */
.evov-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,19,16,.93) 0%,rgba(20,19,16,.8) 42%,rgba(20,19,16,.18) 100%);}
.evov-scrim2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,19,16,.85) 0%,rgba(20,19,16,0) 55%);}
.evov-inner{position:absolute;inset:0;display:flex;align-items:flex-start;padding:0 7vw;overflow-y:auto;overscroll-behavior:contain;}
.evov-col{max-width:560px;color:#fff;padding:60px 0;margin:auto 0;}
.evov-kicker{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);}
.evov-title{font-size:clamp(32px,5vw,62px);font-weight:600;line-height:1.14;letter-spacing:-.01em;color:#fff;margin:14px 0 18px;}
/* one line: allowed wider than the text column; JS shrinks it to fit the
   screen and only lets it wrap if it would get smaller than 22px */
.evov-title.one-line{white-space:nowrap;width:max-content;}
.evov-when{font-size:15px;font-weight:500;color:rgba(255,255,255,.9);margin-bottom:22px;}
.evov-body p{font-size:14px;line-height:1.95;letter-spacing:.035em;color:rgba(255,255,255,.78);}
.evov-body p + p{margin-top:13px;}
.evov-body strong{color:#fff;font-weight:600;}
.evov-facts{list-style:none;display:grid;gap:9px;margin:26px 0 30px;}
.evov-facts li{display:flex;gap:14px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:9px;}
.evov-facts span:first-child{min-width:74px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:3px;}
.evov-facts span:last-child{color:#fff;}
.evov-cta{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:14px 26px;border-radius:999px;
  transition:transform .18s ease;}
.evov-cta:hover{transform:translateY(-2px);}
/* no ticket link yet — say so rather than offering a dead button */
.evov-cta.soon{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);cursor:default;}
.evov-cta.soon:hover{transform:none;}
.evov-ghost{display:inline-block;font-size:12px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);margin-left:20px;}
.evov-sub{font-size:11px;color:rgba(255,255,255,.55);margin-top:9px;}
.evov-close{position:absolute;top:26px;right:26px;z-index:6;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(255,255,255,.92);color:var(--graphite);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.evov-close:hover{background:#fff;}
body.evov-lock{overflow:hidden;}
@media(max-width:899px){
  .evov-inner{padding:0 24px;}
  .evov-col{padding:84px 0 36px;margin-top:auto;margin-bottom:0;}
  .evov-scrim{background:linear-gradient(0deg,rgba(20,19,16,.95) 34%,rgba(20,19,16,.25) 100%);}
  .evov-title{font-size:30px;}
  .evov-close{top:18px;right:18px;}
  .evov-ghost{display:block;margin:16px 0 0;}
}
/* GET TICKETS - the mirror of the blue next-event tag. On load it sits large
   in the bottom-right corner; on scroll it travels up into the top bar, next
   to the X, and shrinks. Its home is the small top-bar spot (so the text is
   drawn crisp where it spends most of its time); the load state is that spot
   moved down and scaled up 1.4x with a transform.
     --tb-top / --tb-right   where it sits in the top bar, centred on the X
     --tb-gutter            its distance from the right edge on load
     --tb-bottom            its distance from the bottom edge on load */
.tickets-btn{
  --tb-top:18px; --tb-right:86px; --tb-gutter:28px; --tb-bottom:40px;
  --tb-screen:100vh;
  position:fixed; top:var(--tb-top); right:var(--tb-right); z-index:101;
  height:28px; padding:0 16px;
  display:inline-flex; align-items:center;
  background:var(--graphite); color:var(--porcelain);
  font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border-radius:3px; text-decoration:none;
  transform-origin:right bottom;
  transform:translate(calc(var(--tb-right) - var(--tb-gutter)),
                      calc(var(--tb-screen) - 100% - var(--tb-bottom) - var(--tb-top))) scale(1.4);
  transition:transform .65s cubic-bezier(.4,0,.2,1), background .2s ease, opacity .3s ease;
}
@supports (height:100dvh){ .tickets-btn{--tb-screen:100dvh;} }
.tickets-btn.in-bar{transform:none;}
.tickets-btn:not([aria-disabled="true"]):hover{background:#000;}
/* no ticket link yet: visible, greyed, not clickable */
.tickets-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
@media(max-width:899px){
  /* phone top bar is tighter: 8px top, 16px side padding */
  .tickets-btn{--tb-top:16px; --tb-right:72px; --tb-gutter:16px; --tb-bottom:32px;}
}
@media(prefers-reduced-motion:reduce){ .tickets-btn{transition:none;} }
@media(prefers-reduced-motion:reduce){ .evov-cta{transition:none;} }

/* privacy modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.modal.open{display:flex;}
.modal-bg{position:absolute;inset:0;background:rgba(42,40,33,0.55);}
.modal-box{
  position:relative;background:var(--porcelain);max-width:560px;width:100%;
  padding:36px;border-radius:12px;max-height:80vh;overflow:auto;
}
.modal-box h3{font-size:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
.modal-box p{margin-bottom:12px;}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:none;
  cursor:pointer;font-size:20px;color:var(--graphite);
}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- mobile ---------- */
@media(max-width:899px){
  .wrap{padding:0 24px;}
  .h-section{font-size:38px;}
  /* vertical spacing on phones is 30% tighter than it was (54 -> 38,
     32 -> 22, 28 -> 20, 22 -> 15, 44 -> 31) */
  section.block{padding:38px 0;}
  .two-col{grid-template-columns:1fr;gap:22px;}
  .col-text,.col-text.right{max-width:none;margin:0;text-align:left;}
  .col-text.right p{text-align:left;}
  .vibe,.vibe p{text-align:left;} .vibe{margin-left:0;}
  .events .two-col > .col-text{order:1;}
  .events .two-col > .carousel{order:2;}
  /* horizontal swipe carousel — native scroll-snap, no buttons */
  .two-col > *{min-width:0;}
  .carousel{position:static;height:auto;min-width:0;}
  .carousel-stage{position:static;height:auto;}
  .carousel-track{
    position:static;
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px;padding:4px 15vw;
    max-width:100vw;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{display:none;}
  .carousel-card,.carousel-card.is-active{
    position:static;transform:none !important;width:auto;
    opacity:1 !important;filter:none !important;
    flex:0 0 70vw;scroll-snap-align:center;transform:none !important;
  }

  .carousel-card .meta,.carousel-card.is-active .meta{padding:6px;}
  .meta-date{font-size:11px;}
  .carousel-card.is-active .meta-date{font-size:11px;color:var(--blue);padding:0 6px 4px;}
  .carousel-card .meta-box,.carousel-card.is-active .meta-box{padding:9px 10px 9px;}
  .meta-title,.carousel-card.is-active .meta-title{font-size:14px;}
  .meta-desc,.carousel-card.is-active .meta-desc{font-size:11px;}
  .meta-loc,.carousel-card.is-active .meta-loc{font-size:10.5px;margin-top:5px;}
  .car-rail{
    position:static;transform:none;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    gap:2px 18px;padding:15px 0 0;
  }
  .car-rail-line{display:none;}
  .car-rail-item .tick{display:none;}
  .car-rail-item .lbl-long{display:none;}
  .car-rail-item .lbl-short{display:inline;}
  .concept .art,.experience .art{width:min(280px,80%);height:auto;margin-bottom:20px;transform:none;}
  .faq-side{margin-top:31px;}
  .concept .two-col > .art{order:1;} .concept .two-col > .col-text{order:2;}
  .three-col{grid-template-columns:1fr;gap:20px;margin-top:28px;}
  .vibe{margin-top:31px;}
  .three-col > div{display:block;grid-row:auto;}
  .contact .art-stack{grid-template-columns:1fr 1fr;}
  .contact-actions{justify-content:flex-start;}
  .contact-note{text-align:left;}
  footer .wrap{flex-direction:column;}
  .footer-links{align-items:flex-start;text-align:left;}
  .footer-art{height:220px;right:16px;bottom:48px;opacity:.5;}
  .topbar{padding:14px 16px;}
  .topbar.scrolled{padding:8px 16px;}
  .brand-badge{top:16px;left:14px;height:78px;}
  .brand-badge.docked{transform:translateY(calc(100vh - 100% - 32px));}
  @supports (height:100dvh){
    .brand-badge.docked{transform:translateY(calc(100dvh - 100% - 32px));}
  }
  .brand-badge .pill{font-size:13px;padding:4px 11px;transform:translate(54px, 8px);}
  .brand-badge.docked .pill{font-size:10px;padding:3px 8px;transform:translate(0, 52px);}
  /* phone: half the old gap under the X (38px -> 19px, scrolled 44px -> 22px) */
  .side-nav{right:12px;top:53px;padding:12px 14px 12px 12px;}
  .topbar.scrolled ~ .side-nav{top:50px;}
}