/* ---- self-hosted type ------------------------------------------------------
   Both families are variable fonts, so one file per family covers every weight
   we use. Latin subset only. Served from our own origin: no third-party
   request, no render-blocking round trip to Google, and it keeps working if
   fonts.googleapis.com is ever blocked on a corporate network.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("../fonts/InterTight.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("../fonts/Inter.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================================
   Bounce Around Ktown

   MOTION PRINCIPLE
   "Bounce" is cadence, not physics. Nothing springs, wobbles or overshoots --
   that reads campy and kills the cool. Instead everything arrives FAST and
   settles clean, in beats: BOUNCE / AROUND / K- / TOWN, one at a time, hard.
   Durations are short, easing is expo-out, hover lifts are small. The energy
   comes from rhythm and colour, and the restraint is what makes it read pro.
   ========================================================================= */

/* ---- tokens -------------------------------------------------------------- */
:root{
  /* night */
  --ink:      #0a0a0c;
  --ink-2:    #131316;
  --ink-3:    #1c1b20;
  --line:     rgba(255,246,236,.13);
  --line-hot: rgba(255,59,36,.36);

  /* light */
  --cream:    #fff6ec;
  --muted:    rgba(255,246,236,.64);
  --faint:    rgba(255,246,236,.54);

  /* heat */
  --chili:    #ff3b24;
  --ember:    #ff8a1f;
  --brass:    #ffc53d;
  --soju:     #8fe64b;

  --heat:     linear-gradient(100deg, var(--chili) 0%, var(--ember) 52%, var(--brass) 100%);
  --cool:     linear-gradient(100deg, var(--soju) 0%, var(--brass) 58%, var(--chili) 100%);

  /* type */
  --display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion -- expo-out. fast start, clean stop, zero overshoot. */
  --snap:  cubic-bezier(.16,1,.3,1);
  --ease:  cubic-bezier(.4,0,.2,1);

  /* rhythm */
  --pad:  clamp(20px, 5vw, 76px);
  --gap:  clamp(18px, 2.4vw, 34px);
  --maxw: 1280px;
}

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

/* The `hidden` attribute has to win. Six selectors in this file already had a
   one-off patch for it, and one that did not -- .btn sets display:inline-flex,
   which beat the browser's own [hidden] rule, so the "Show more places" button
   sat there through a search that found one venue. Any element given `hidden`
   by the JS was a coin toss on whether its own display rule outranked it.
   One rule, once, instead of remembering every time. */
[hidden]{ display:none !important; }
/* Nothing on this page scrolls sideways. The marquee's track is deliberately
   wider than the screen and is clipped by its own overflow, but a phone will
   still let you drag the whole page after it -- the rubber-band slide that
   makes a site feel unfinished. `clip` stops that without making the root a
   scroll container the way `hidden` would, which is what breaks sticky
   headers. `hidden` is the fallback for browsers that predate `clip`. */
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  overflow-x:hidden; overflow-x:clip; overscroll-behavior-x:none;
}
body{ overflow-x:hidden; overflow-x:clip; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(15.5px,.42vw + 14.6px,17.5px);
  line-height:1.62;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:900;
  line-height:.98;
  /* Inter Tight ships pre-tightened. Tracking that suits a normal-width
     grotesque closes the counters here, so every negative value is eased. */
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--chili); color:#fff; }

/* film grain: keeps the flat colour from looking cheap */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- layout primitives --------------------------------------------------- */
.wrap{ width:min(100% - var(--pad)*2, var(--maxw)); margin-inline:auto; }
.section{ padding-block:clamp(72px,10vw,150px); position:relative; scroll-margin-top:84px; }
/* Menu targets that are not whole sections still have to clear the header. */
[id]{ scroll-margin-top:84px; }
.eyebrow{
  font-family:var(--display); font-weight:700;
  font-size:clamp(11px,.9vw,13px); letter-spacing:.24em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:11px; margin:0 0 20px;
  color:var(--brass);
}
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--heat); }
.h2{ font-size:clamp(34px,6.2vw,74px); }
.h3{ font-size:clamp(21px,2.2vw,29px); letter-spacing:-.018em; }
.lede{ font-size:clamp(17px,1.35vw,21px); color:var(--muted); line-height:1.55; max-width:60ch;
  /* Every subhead on the page, balanced by the browser rather than by a <br>
     somebody guessed at. `balance` evens the lines out over a short block,
     which is the whole complaint: a first line running the full measure above
     a second holding four words. A hard break cannot do this -- it is set for
     one width and wrong at every other. Browsers without it wrap as before. */
  text-wrap:balance;
}
.hot{ background:var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- buttons ------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.006em;
  text-decoration:none; color:#160604; background:var(--heat);
  transition:transform .3s var(--snap), box-shadow .3s var(--ease);
  box-shadow:0 6px 22px -8px rgba(255,110,30,.62);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(255,110,30,.8); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .3s var(--snap); }
.btn:hover .arw{ transform:translateX(4px); }

.btn.ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--chili); background:rgba(255,59,36,.08); }

:where(a,button,input,summary):focus-visible{
  outline:2.5px solid var(--soju); outline-offset:3px; border-radius:6px;
}

/* ---- header -------------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:100; padding-block:15px;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.hdr.stuck{
  background:rgba(10,10,12,.78); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding-block:9px; box-shadow:0 1px 0 var(--line);
}
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand svg{ height:30px; width:auto; }
.hdr.stuck .brand svg{ height:27px; transition:height .35s var(--ease); }

/* ---- the menu -------------------------------------------------------------
   One button at every width, laptop included. A row of links that collapses
   into a burger below some breakpoint gives two different sites; this gives
   one, and the panel has room for names that say what they do.
   -------------------------------------------------------------------------- */
.burger{
  width:42px; height:42px; padding:0; border:0; cursor:pointer;
  background:transparent; border-radius:11px;
  display:grid; place-items:center; margin-left:auto;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.burger:hover{ background:rgba(255,246,236,.06); box-shadow:inset 0 0 0 1px var(--line); }
.burger:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

.burger-ic{ display:block; width:20px; height:14px; position:relative; }
.burger-ic::before,
.burger-ic::after,
.burger-ic{ --bar:2px; }
.burger-ic::before,
.burger-ic::after{
  content:""; position:absolute; left:0; right:0; height:var(--bar);
  border-radius:2px; background:var(--cream);
  transition:transform .32s var(--snap), top .22s var(--ease) .1s, opacity .18s var(--ease);
}
/* the middle bar is the element's own background, so three lines need two
   pseudo-elements and one box rather than a wrapper full of spans */
.burger-ic{
  background:
    linear-gradient(var(--cream), var(--cream)) 0 50% / 100% var(--bar) no-repeat;
  transition:background-size .18s var(--ease);
}
.burger-ic::before{ top:0; }
.burger-ic::after{ bottom:0; }

/* open: the outer bars cross, the middle one goes */
.burger.on .burger-ic{ background-size:0 var(--bar); }
.burger.on .burger-ic::before{ top:6px; transform:rotate(45deg); }
.burger.on .burger-ic::after{ bottom:6px; transform:rotate(-45deg); }

.menu{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 -1px 0 var(--line), 0 24px 50px -24px rgba(0,0,0,.9);
  animation:menu-in .26s var(--snap);
}
@keyframes menu-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.menu ul{ list-style:none; margin:0; padding:clamp(14px,2vw,22px) 0 clamp(20px,2.6vw,30px); }
.menu li + li{ box-shadow:inset 0 1px 0 var(--line); }
.menu a{
  display:block; padding:clamp(13px,1.5vw,17px) 0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2.1vw,24px);
  text-transform:uppercase; letter-spacing:.02em;
  color:var(--cream); text-decoration:none;
  transition:color .2s var(--ease), transform .3s var(--snap);
}
.menu a:hover{ color:var(--brass); transform:translateX(7px); }
.menu a:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* the page behind does not scroll while the panel is up */
html.menu-open, html.menu-open body{ overflow:hidden; }

/* ---- hero ---------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:130px clamp(44px,7vw,84px); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-stage{
  position:absolute; inset:0; transform:translate3d(0,0,0);
  will-change:transform; overflow:hidden;
}
.hero-stage > *{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.08);
}
/* Clips stack on the poster and cross-fade. The poster underneath is never
   removed, so a blocked autoplay or a failed download shows a still. */
.hero-clip{ opacity:0; transition:opacity .9s var(--ease); }
.hero-clip.on{ opacity:1; }
/* The veil over the hero. It is heavy enough for the placeholder artwork,
   which is bright and busy; real footage usually wants less. --veil scales
   the whole thing, so it is one number to turn down once the film is in. */
/* Flat black until a clip is actually on screen. The scrim and the colour
   wash exist to keep type legible over moving footage; with nothing playing
   they are just a haze over an empty frame, which reads as a stray image. */
.hero-media{ --veil:1; background:var(--ink); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  opacity:0; transition:opacity .8s var(--ease);
  /* Only a neutral top-and-bottom scrim, and only once footage is behind it.
     The coloured wash that used to live here had nothing to sit on before the
     video arrived, so it read as a stray gradient across an empty hero. */
  background:linear-gradient(180deg,
      rgba(10,10,12,calc(.72 * var(--veil))) 0%,
      rgba(10,10,12,calc(.20 * var(--veil))) 36%,
      rgba(10,10,12,calc(.86 * var(--veil))) 82%,
      var(--ink) 100%);
}
/* the bottom of the gradient stays put whatever --veil does, so the hero
   still lands on the page colour instead of ending in a hard edge */
/* set by site.js the moment the first clip starts playing */
.hero-live .hero-media::after{ opacity:1; }

.hero-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,42%), rgba(255,59,36,.17), transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
}
.hero-live.hero:hover .hero-glow{ opacity:1; }
.hero:not(.hero-live) .hero-glow{ display:none; }
.hero .wrap{ position:relative; z-index:2; }

.hero-tag{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:7px 15px 7px 11px; border-radius:999px;
  background:rgba(255,246,236,.07); box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; font-weight:600;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--snap);
}
.hero-tag .pulse{
  width:8px; height:8px; border-radius:50%; background:var(--soju); flex:none;
  box-shadow:0 0 0 0 rgba(143,230,75,.7); animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(143,230,75,.6) } 70%{ box-shadow:0 0 0 12px rgba(143,230,75,0) }
  100%{ box-shadow:0 0 0 0 rgba(143,230,75,0) }
}

/* THE FOUR BEATS. Each line is masked and snaps up on its own beat, 90ms
   apart. Fast and flat -- no rotation, no overshoot, no bounce-the-noun. */
.hero h1{
  font-size:clamp(44px,10.4vw,138px);
  line-height:.86; letter-spacing:-.034em; margin:0 0 28px; text-transform:uppercase;
}
.hero h1 .beat{ display:block; overflow:hidden; }
.hero h1 .beat > span{
  display:block; transform:translateY(102%);
  transition:transform .62s var(--snap);
  transition-delay:calc(var(--i) * 90ms);
}
.hero.lit h1 .beat > span{ transform:none; }

/* the handle line: sits right under the wordmark, quiet enough not to
   compete with it */
.hero-handles{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:18px;
  font-family:var(--display); font-weight:700; font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.04em; color:var(--brass);
}
.hero-handles a{
  color:var(--brass); text-decoration:none;
  transition:color .25s var(--ease);
}
.hero-handles a:hover{ color:var(--cream); }

.hero-sub{
  max-width:52ch; font-size:clamp(16.5px,1.5vw,21px); color:rgba(255,246,236,.86);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease) .5s, transform .6s var(--snap) .5s;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:13px; margin-top:34px;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease) .6s, transform .6s var(--snap) .6s;
}
.hero.lit .hero-tag, .hero.lit .hero-sub, .hero.lit .hero-cta{ opacity:1; transform:none; }

.scroll-cue{
  /* right-hand side, clear of the call to action */
  position:absolute; right:clamp(20px,5vw,76px); bottom:26px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  font-family:var(--display); font-weight:700;
}
.scroll-cue i{
  width:1.5px; height:34px; border-radius:2px;
  background:linear-gradient(var(--chili), transparent);
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
  46%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom }
}
@media (max-width:700px){ .scroll-cue{ display:none; } }

/* ---- marquee ------------------------------------------------------------- */
.marquee{
  --dur:40s; position:relative; overflow:hidden; contain:paint; padding-block:16px;
  background:var(--heat); color:#160604; border-block:1px solid rgba(0,0,0,.16);
}
.marquee .track{ display:flex; width:max-content; animation:slide var(--dur) linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee span{
  font-family:var(--display); font-weight:800; font-size:clamp(14px,1.7vw,21px);
  letter-spacing:-.012em; text-transform:uppercase; padding-inline:19px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:19px;
}
.marquee span::after{ content:"✦"; font-size:.6em; opacity:.6; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---- reveal -------------------------------------------------------------- */
/* short travel, quick settle, tight stagger. reads as edit rhythm, not bounce. */
[data-up]{
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .6s var(--snap);
  transition-delay:calc(var(--d,0) * 1ms);
}
[data-up].in{ opacity:1; transform:none; }

/* ---- pitch + film --------------------------------------------------------
   Text on the left, the film on the right, stacking on a phone. The player is
   capped at the footage's own width: the file is 640 wide, and a 640px frame
   stretched across half a desktop is a soft, blocky version of itself.
   -------------------------------------------------------------------------- */
.pitch{ display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:1fr; align-items:center; }
@media (min-width:940px){ .pitch{ grid-template-columns:1.02fr .98fr; } }
.pitch-body p + p{ margin-top:17px; }

.film{ justify-self:start; width:100%; max-width:640px; }
@media (min-width:940px){ .film{ justify-self:end; } }

.film-frame{
  position:relative; border-radius:18px; overflow:hidden;
  background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line);
  aspect-ratio:16/9;
}
.film-frame video{
  display:block; width:100%; height:100%; object-fit:cover;
  background:var(--ink);
}
.film-note{
  margin:13px 0 0; font-size:13.4px; color:var(--faint); line-height:1.5;
}

/* ---- venue cards --------------------------------------------------------- */
/* auto-FILL, not auto-fit. With auto-fit the empty tracks collapse, so a
   search that turns up one venue stretched that single card across the whole
   grid and its 4:3 tile became a metre of neon. auto-fill keeps the tracks,
   so one result is one card wide and the row simply has gaps in it. */
.cards{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(272px,1fr));
  margin-top:clamp(34px,4vw,58px);
}
.card{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border-radius:22px; background:var(--ink-2); isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .38s var(--snap), box-shadow .38s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-hot), 0 22px 46px -26px rgba(255,59,36,.45); }
.card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card-img img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.12) brightness(1.1) contrast(1.06);
  transition:transform .8s var(--ease), filter .45s var(--ease);
}
.card:hover .card-img img{ transform:scale(1.06); filter:saturate(1.3) brightness(1.2) contrast(1.08); }
.card-img::after{
  content:""; position:absolute; inset:0; background:var(--heat);
  opacity:0; mix-blend-mode:soft-light; transition:opacity .42s var(--ease);
}
.card:hover .card-img::after{ opacity:.8; }
.card-kind{
  position:absolute; top:13px; left:13px; z-index:2;
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px;
  background:rgba(10,10,12,.72); color:var(--brass);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card-body{ padding:21px 22px 25px; }
.card h3{ font-size:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card h3 .arw{
  font-size:18px; color:var(--chili); transform:translateX(-4px); opacity:0;
  transition:transform .34s var(--snap), opacity .3s var(--ease);
}
.card:hover h3 .arw{ transform:none; opacity:1; }
.card p{ margin-top:10px; font-size:14.8px; color:var(--muted); line-height:1.55; }

/* The verified mark. Green because it is the only thing on a card that is a
   promise rather than a fact -- somebody went. It sits above the sentence so
   you read the vouching before you read the room. Everything else on the card
   is the address and the category, and looks it. */
.card .vfd{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-family:var(--display); font-weight:800; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soju);
}
.card .vfd::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--soju); box-shadow:0 0 0 3px rgba(143,230,75,.16);
}
.card .vfd + p{ margin-top:7px; }
.card .meta{ margin-top:15px; display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px; color:var(--cream);
  background:rgba(255,246,236,.07); box-shadow:inset 0 0 0 1px var(--line);
}

/* ---- timeline ------------------------------------------------------------ */
.timeline{ margin-top:clamp(32px,4vw,56px); position:relative; }
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:33px; height:2px;
  background:linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.tl-row{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); }
.tl{ position:relative; padding-top:56px; }
.tl::before{
  content:""; position:absolute; top:26px; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--ink); box-shadow:inset 0 0 0 3px var(--chili);
  transition:box-shadow .35s var(--ease);
}
.tl:hover::before{ box-shadow:inset 0 0 0 8px var(--chili); }
.tl b{
  display:block; font-family:var(--display); font-weight:900; font-size:clamp(21px,2.3vw,28px);
  letter-spacing:-.024em; margin-bottom:7px;
}
.tl p{ font-size:14.6px; color:var(--muted); }

/* ---- getting here -------------------------------------------------------- */
.rides{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:clamp(30px,4vw,52px); }
.ride{
  position:relative; padding:26px 24px 28px; border-radius:20px; overflow:hidden;
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--snap), box-shadow .35s var(--ease);
}
.ride::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--cool);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--snap);
}
.ride:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-hot); }
.ride:hover::after{ transform:scaleX(1); }
.ride .ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,59,36,.14); margin-bottom:16px;
}
.ride .ico svg{ width:21px; height:21px; }
.ride b{ display:block; font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:-.02em; margin-bottom:7px; }
.ride p{ font-size:14.6px; color:var(--muted); }

/* ---- closer -------------------------------------------------------------- */
.closer{
  position:relative; overflow:hidden; border-radius:28px; padding:clamp(34px,5.4vw,76px);
  background:
    radial-gradient(90% 130% at 12% 8%, rgba(255,106,26,.3), transparent 58%),
    radial-gradient(80% 120% at 92% 92%, rgba(143,230,75,.16), transparent 58%),
    linear-gradient(150deg, var(--ink-3), var(--ink-2));
  box-shadow:inset 0 0 0 1px var(--line); text-align:center;
}
.closer h2{ font-size:clamp(31px,5.4vw,64px); margin-bottom:16px; }
.closer .lede{ margin-inline:auto; text-align:center; }
.form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:30px; }
.form input{
  flex:1 1 270px; max-width:360px; padding:15px 20px; border-radius:999px; border:0;
  background:rgba(10,10,12,.6); color:var(--cream); font-size:15.5px;
  box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s var(--ease);
}
.form input::placeholder{ color:var(--faint); }
.form input:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--chili); }
.form-note{ margin-top:15px; font-size:13px; color:var(--faint); }
.form-ok{
  margin-top:18px; font-size:15px; font-weight:600; color:var(--soju);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--snap);
}
.form-ok.on{ opacity:1; transform:none; }
/* the same line carries the refusals, in a colour that is a correction
   rather than an alarm */
.form-ok.bad{ color:var(--brass); }
.form button[type=submit][disabled]{ opacity:.6; cursor:default; }

/* ---- footer -------------------------------------------------------------- */
.ftr{ padding-block:clamp(48px,6vw,74px) 40px; border-top:1px solid var(--line); margin-top:clamp(60px,8vw,110px); }
.ftr a{ text-decoration:none; color:var(--muted); transition:color .25s var(--ease); }
.ftr a:hover{ color:var(--chili); }

/* brand on the left, three short columns on the right */
/* Brand block on the left, the two things we want to say on the right. */
.ftr-top{ display:grid; gap:clamp(28px,3.4vw,56px); grid-template-columns:1fr; align-items:start; }
@media (min-width:820px){ .ftr-top{ grid-template-columns:1fr minmax(0,1.05fr); } }

.ftr-say{ display:grid; gap:18px; align-content:start; }
.ftr-ask, .ftr-pod{
  margin:0; font-size:15px; line-height:1.55; color:var(--muted); max-width:46ch;
}
.ftr-ask a, .ftr-pod a{
  font-family:var(--display); font-weight:700; color:var(--soju);
  text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.ftr-ask a:hover, .ftr-pod a:hover{ border-bottom-color:currentColor; }

/* One line, never two. The 34ch cap used to fold "Los Angeles" onto its own
   row, and the sentence is short enough not to need a measure. */
.ftr-line{
  margin-top:12px; font-size:14px; color:var(--muted); line-height:1.5;
  white-space:nowrap;
}
@media (max-width:400px){
  /* below this it cannot fit at 14px, so it shrinks rather than wrapping */
  .ftr-line{ font-size:3.5vw; }
}

.socials{ display:flex; gap:10px; margin-top:22px; }
.soc{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--line);
  transition:color .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), transform .3s var(--snap);
}
.soc svg{ width:19px; height:19px; fill:currentColor; }
.soc:hover{ color:var(--ink); background:var(--heat); box-shadow:none; transform:translateY(-2px); }

/* One tag, under the icons it belongs with. The strip of seven that used to
   run across the bottom read as keyword stuffing; the single one reads as the
   place to find us. */
.ftr-tag{
  margin:14px 0 0; font-family:var(--display); font-weight:700;
  font-size:12.8px; letter-spacing:.02em; color:var(--brass);
}

.ftr-base{ margin-top:24px; }
.disclaimer{ margin-top:26px; font-size:12.4px; color:var(--faint); max-width:74ch; line-height:1.5; }
/* the byline: last line on the page, and it stays out of the way */
.credit{
  margin-top:10px; font-size:12px; color:var(--faint);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
}
.credit a{ color:var(--faint); text-decoration:none; border-bottom:1px solid transparent; }
.credit a:hover{ color:var(--cream); border-bottom-color:var(--chili); }

/* The byline link is built like the other footer links -- display face, bold,
   underline that belongs to the type rather than the browser -- but white
   instead of green, and the rule under it is there from the start rather than
   arriving on hover. It is the one credit on the page and it can say so. */
/* Qualified with .credit, or `.credit a` outranks it on specificity and the
   link stays faint and underline-less. */
.credit a.ftr-bfwd{
  font-family:var(--display); font-weight:700;
  color:var(--cream); text-decoration:none;
  border-bottom:1.5px solid var(--chili);
  transition:border-color .25s var(--ease);
}
.credit a.ftr-bfwd:hover{ color:var(--cream); border-bottom-color:var(--ember); }

/* ---- motion off ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-up]{ opacity:1; transform:none; }
  .hero h1 .beat > span{ transform:none; }
  .hero-tag,.hero-sub,.hero-cta{ opacity:1; transform:none; }
  .marquee .track{ animation:none; }
}

/* ---- the finder ---------------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.finder{ margin-top:clamp(28px,3.4vw,44px); }
.finder-bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.search{
  flex:1 1 320px; display:flex; align-items:center; gap:11px;
  padding:14px 20px; border-radius:999px; background:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s var(--ease);
}
.search:focus-within{ box-shadow:inset 0 0 0 1.5px var(--chili); }
.search svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; }
.search input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--cream);
  font-size:15.5px; font-family:inherit;
}
.search input:focus{ outline:0; }
.search input::placeholder{ color:var(--faint); }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.clear{
  border:0; cursor:pointer; padding:13px 20px; border-radius:999px;
  background:rgba(255,246,236,.06); color:var(--muted); font-size:14px; font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line); transition:color .25s var(--ease), box-shadow .25s var(--ease);
}
.clear:hover{ color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-hot); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chips button{
  border:0; cursor:pointer; padding:9px 16px; border-radius:999px;
  background:rgba(255,246,236,.05); color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:transform .26s var(--snap), background .24s var(--ease),
             color .24s var(--ease), box-shadow .24s var(--ease);
}
.chips button:hover{ transform:translateY(-2px); color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-hot); }
.chips button[aria-pressed="true"]{ background:var(--heat); color:#160604; box-shadow:none; }
.count{ margin-top:14px; font-size:13.5px; color:var(--faint); font-variant-numeric:tabular-nums; }

.more-wrap{ margin-top:clamp(26px,3vw,40px); display:flex; justify-content:center; }
.more-wrap .btn.ghost .arw{ transition:transform .3s var(--snap); }
.more-wrap .btn.ghost:hover .arw{ transform:translateY(3px); }
.empty{ color:var(--muted); font-size:15px; text-align:center; }

/* cards enter on a short stagger as the filter changes */
.cards .card{ animation:cardIn .42s var(--snap) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.card .area{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:9px; display:block;
}
.ticket-foot{ margin-top:auto; padding-top:18px; font-size:13.6px; color:var(--faint); }
.ticket-foot a{ color:var(--soju); text-decoration:none; border-bottom:1px solid rgba(143,230,75,.4); }
.ticket-foot a:hover{ border-bottom-color:var(--soju); }

@media (prefers-reduced-motion:reduce){ .cards .card{ animation:none; } }

/* ---- booking action ------------------------------------------------------ */
.card .act{ margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
.book{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  padding:8px 15px; border-radius:999px;
  color:var(--ink); background:var(--soju);
  transition:transform .28s var(--snap), filter .25s var(--ease);
}
.book:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.book .arw{ font-size:12px; transition:transform .28s var(--snap); }
.book:hover .arw{ transform:translate(2px,-2px); }
/* walk-in is information, not a disabled button, so it never looks clickable */
.book.walkin{
  background:transparent; color:var(--faint);
  box-shadow:inset 0 0 0 1px var(--line); padding:8px 15px; cursor:default;
}
/* the card stopped being an anchor, so the title no longer needs the arrow */
.card h3{ display:block; }

/* Cards stretch to equal height in the grid, so the action row is pushed to
   the bottom of each one. Without this it floats to wherever the blurb ends
   and the row of buttons reads as ragged. */
.card{ display:flex; flex-direction:column; }
.card-body{ display:flex; flex-direction:column; flex:1; }
.card .act{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }

/* Opening hours, or the way to go and find them. Sits beside Walk in / Book
   on, which is where somebody checking whether they can actually turn up is
   already looking. */
.hrs{
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.02em; color:var(--faint);
  display:inline-flex; align-items:center; gap:6px;
}
.hrs-dot{
  width:6px; height:6px; border-radius:50%; background:var(--soju);
  box-shadow:0 0 0 3px rgba(143,230,75,.14);
}
a.hrs-link{
  text-decoration:none; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
a.hrs-link:hover{ color:var(--cream); border-bottom-color:currentColor; }
.hrs .arw{ font-size:9px; opacity:.7; }
.card .meta{ margin-bottom:0; }

/* ---- the two ways --------------------------------------------------------
   A choice is easier to see as two things next to each other than as a
   sentence with an "or" in it. Numbered as a list for a screen reader, but
   the numbers are not drawn: these are alternatives, not steps in order.
   -------------------------------------------------------------------------- */
.ways{
  list-style:none; margin:clamp(22px,2.6vw,30px) 0 0; padding:0;
  display:grid; gap:clamp(12px,1.5vw,18px); grid-template-columns:1fr;
  max-width:760px;
}
@media (min-width:640px){ .ways{ grid-template-columns:1fr 1fr; } }
.way{
  padding:clamp(18px,2vw,24px); border-radius:16px;
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
  box-shadow:inset 0 0 0 1px var(--line);
  display:grid; gap:5px; align-content:start;
}
.way b{
  font-family:var(--display); font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--cream);
}
.way span:last-child{ font-size:14.2px; line-height:1.5; color:var(--muted); }

.way-ic{ width:30px; height:30px; margin-bottom:7px; display:block; position:relative; }
/* the wheel, quartered like the real one */
.way-spin{
  border-radius:50%;
  background:conic-gradient(var(--chili) 0 25%, var(--ember) 0 50%,
                            var(--brass) 0 75%, var(--soju) 0);
  box-shadow:inset 0 0 0 4px var(--ink-2);
}
/* a fingertip on a stop */
.way-tap::before{
  content:""; position:absolute; inset:auto 0 0 0; height:13px;
  border-radius:4px; background:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px var(--brass);
}
.way-tap::after{
  content:""; position:absolute; left:9px; top:0;
  width:11px; height:11px; border-radius:50%; background:var(--brass);
}
/* ---- the planner ---------------------------------------------------------
   One night as four rows, stacked in the order you walk them. Only one row
   is open at a time -- a stop being chosen -- and the other three stay shut
   showing what is already in them. Four open pickers at once was a screen of
   scrolling on a phone and nothing to fix on with your eye.

   The number, the name and the hour sit on the closed row, so the shape of
   the night is legible without opening anything.
   -------------------------------------------------------------------------- */
.plan{
  margin-top:clamp(26px,3.2vw,42px); border-radius:26px; overflow:hidden;
  background:linear-gradient(155deg, var(--ink-3), var(--ink-2) 58%, var(--ink));
  box-shadow:inset 0 0 0 1px var(--line);
}
/* Sits on the fields it describes, so the reason to fill them in arrives
   before the work of filling them in. */
.plan-meta-lede{
  margin:0; padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,30px) 0;
  font-size:14px; line-height:1.55; color:var(--muted); max-width:64ch;
}
.plan-meta-lede + .plan-meta{ padding-top:14px; box-shadow:none; }

.steps{ list-style:none; margin:0; padding:0; }
.step{ box-shadow:inset 0 -1px 0 var(--line); }
/* Header, then the two ways to fill this stop, then the grip. A flex line
   rather than absolute boxes, because the search field has to be able to give
   width back to the venue name instead of overlapping it. */
.step-top{
  position:relative; display:flex; align-items:center;
  gap:clamp(8px,1.1vw,14px);
  padding-right:clamp(48px,5vw,58px);
}
.step-tools{ display:flex; align-items:center; gap:clamp(8px,1vw,12px); flex:none; }
.step:last-child{ box-shadow:none; }

/* The whole closed row is the control. A caret alone is a 20px target on a
   phone, and this is the tap everybody makes. */
.step-hd{
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:clamp(13px,1.6vw,19px);
  padding:clamp(16px,1.9vw,22px) 0 clamp(16px,1.9vw,22px) clamp(46px,5vw,58px);
  /* A fixed column rather than all the room going: the wheel and the box sit
     next to the stop they belong to, at the same place on every row, and the
     right edge is left to the grip alone. */
  flex:0 0 clamp(240px,46%,470px); min-width:0;
  color:inherit; font:inherit;
  transition:background .25s var(--ease);
}
.step-hd:hover{ background:rgba(255,246,236,.03); }
.step-hd:focus-visible{ outline:2px solid var(--brass); outline-offset:-3px; }

.step-n{
  flex:none; width:31px; height:31px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:14px;
  color:var(--faint); box-shadow:inset 0 0 0 1.5px var(--line);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.step.done .step-n{ background:var(--heat); box-shadow:none; color:#170b05; }

.step-txt{ min-width:0; flex:1; }
.step-name{
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--display); font-weight:800; font-size:clamp(15px,1.5vw,17.5px);
  letter-spacing:-.02em; color:var(--cream);
}
.step-name em{
  font-style:normal; font-weight:700; font-size:11.5px; letter-spacing:.12em;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
.step-line{ display:block; margin-top:3px; font-size:13.6px; line-height:1.45; }
.step-empty{ color:var(--faint); }
.step-venue{ color:var(--cream); font-weight:600; }
.step-where{ color:var(--faint); }
.step-where::before{ content:"  ·  "; color:var(--faint); }
.step-vfd{
  margin-left:9px; font-family:var(--display); font-weight:800; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soju);
}

/* Opening a stop is the left-hand control now, next to its number, because
   that is the one somebody reaches for first. Ordering moved to the right. */
.step-caret{
  position:absolute; left:clamp(16px,2vw,22px); top:50%; margin-top:-5px;
  width:9px; height:9px; border-right:1.8px solid var(--faint);
  border-bottom:1.8px solid var(--faint); transform:rotate(45deg);
  transition:transform .3s var(--snap), border-color .25s var(--ease);
  pointer-events:none;
}
.step.open .step-caret{ transform:rotate(-135deg); border-color:var(--brass); }

/* ---- the two ways, on every stop ------------------------------------------
   A wheel and a search box on each row. One picks, the other finds, and both
   belong to the stop they sit on, so nothing above the list has to be read
   first. The wheel is the one from the old header at a third of the size.
   -------------------------------------------------------------------------- */
.step-wheel{
  position:relative; width:46px; height:46px; flex:none;
  border:0; padding:0; background:none; cursor:pointer; border-radius:50%;
  display:grid; place-items:center;
}
.step-wheel-pie{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(
    var(--chili) 0deg 90deg,
    var(--ember) 90deg 180deg,
    var(--brass) 180deg 270deg,
    var(--soju)  270deg 360deg);
  box-shadow:0 5px 16px -8px rgba(255,110,30,.75);
}
.step-wheel-pie::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) 50% 0/1.5px 50% no-repeat,
    linear-gradient(var(--ink),var(--ink)) 50% 100%/1.5px 50% no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 50%/50% 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 50%/50% 1.5px no-repeat;
  opacity:.55;
}
.step-wheel-hub{
  position:relative; z-index:2; width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink-2);
  box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--line);
  font-family:var(--display); font-weight:900; font-size:8.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--cream);
  transition:transform .3s var(--snap);
}
.step-wheel:hover .step-wheel-hub{ transform:scale(1.08); }
.step-wheel:active .step-wheel-hub{ transform:scale(.96); }
.step-wheel:focus-visible{ outline:2.5px solid var(--soju); outline-offset:3px; }
.step-wheel.turning .step-wheel-pie{ animation:step-turn 1.05s cubic-bezier(.16,1,.3,1); }
@keyframes step-turn{ from{ transform:rotate(0deg); } to{ transform:rotate(1080deg); } }
@media (prefers-reduced-motion:reduce){
  .step-wheel.turning .step-wheel-pie{ animation:none; }
}

.step-search{
  position:relative; display:flex; align-items:center; flex:none;
  width:clamp(132px,14vw,178px);
}
.step-search-ic{
  position:absolute; left:11px; width:15px; height:15px; pointer-events:none;
  fill:none; stroke:var(--faint); stroke-width:1.9; stroke-linecap:round;
}
.step-search input{
  width:100%; padding:10px 13px 10px 32px; border-radius:999px; border:0;
  background:rgba(10,10,12,.55); color:var(--cream); font:inherit; font-size:13.5px;
  box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.step-search input::placeholder{ color:var(--faint); }
.step-search input:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--chili); }
.step-search input::-webkit-search-decoration,
.step-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

/* On a phone the venue name and both controls will not share a line, so the
   controls drop under the text and take the full width between them. */
@media (max-width:760px){
  .step-top{ flex-wrap:wrap; padding-right:clamp(44px,11vw,54px); }
  .step-hd{ flex:1 1 100%; padding-bottom:8px; }
  /* The row is two lines tall here, so centring the caret on the row would
     leave it floating beside nothing. It belongs on the name. */
  .step-caret{ top:32px; margin-top:-5px; }
  .step-tools{
    flex:1 1 100%;
    padding:0 0 clamp(14px,1.8vw,18px) clamp(46px,5vw,58px);
  }
  .step-search{ flex:1 1 auto; width:auto; }
}

/* A stop that has just landed gets one pass of light across it, so a spin is
   visible without anything moving. */
.step.landed{ animation:landed .7s var(--ease); }
@keyframes landed{
  0%{ background:rgba(143,230,75,.14); }
  100%{ background:transparent; }
}

.step-body{
  padding:2px clamp(20px,2.6vw,30px) clamp(20px,2.4vw,26px) clamp(38px,4.4vw,52px);
  animation:step-in .34s var(--snap);
}
@keyframes step-in{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.step-hint{
  margin:0 0 14px; font-size:13.2px; color:var(--faint); line-height:1.5;
}
.step-all{
  border:0; background:transparent; cursor:pointer; padding:0;
  font:inherit; font-weight:600; color:var(--brass);
  border-bottom:1px solid currentColor;
}
.step-all:hover{ color:var(--cream); }

/* The grid is capped and scrolls. Two hundred tiles is a page of its own. */
.step-body .pick-grid{ max-height:340px; overflow-y:auto; padding-right:4px; }

/* ---- moving a stop --------------------------------------------------------
   The grip everybody already knows, on the right where ordering controls sit.
   It drags, and it takes the arrow keys when focused. Two mechanisms because
   a drag on its own excludes a keyboard, and arrows on their own do not read
   as "move this" to anybody who has used a phone.
   -------------------------------------------------------------------------- */
.step-grip{
  position:absolute; right:clamp(14px,1.8vw,20px); top:clamp(15px,1.8vw,21px);
  z-index:2;
  width:32px; height:32px; padding:0; border:0; cursor:grab;
  background:transparent; border-radius:8px;
  display:grid; place-items:center;
  /* only the handle opts out of scrolling, so the page still scrolls
     everywhere else while a drag is in progress */
  touch-action:none;
  transition:background .2s var(--ease);
}
.step-grip:hover{ background:rgba(255,246,236,.07); }
.step-grip:focus-visible{ outline:2px solid var(--brass); outline-offset:1px; }
.step-grip:active{ cursor:grabbing; }

/* three short rules, the shape everything else uses for this */
.step-grip-ic{ display:block; width:15px; height:11px; position:relative; }
.step-grip-ic::before,
.step-grip-ic::after{
  content:""; position:absolute; left:0; right:0; height:1.8px; border-radius:2px;
  background:var(--faint);
  box-shadow:0 4.6px 0 var(--faint);
}
.step-grip-ic::before{ top:0; }
.step-grip-ic::after{ top:9.2px; box-shadow:none; }
.step-grip:hover .step-grip-ic::before,
.step-grip:hover .step-grip-ic::after{ background:var(--cream); box-shadow:0 4.6px 0 var(--cream); }
.step-grip:hover .step-grip-ic::after{ box-shadow:none; }

/* while a drag is running, the row being moved stays visible under the finger
   and the rest stop reacting to hover */
.steps.dragging .step-hd:hover{ background:transparent; }
.steps.dragging{ cursor:grabbing; }
.step.drag-src{ background:rgba(255,138,31,.07); }

/* ---- one more stop -------------------------------------------------------- */
.plan-add{ padding:14px clamp(20px,2.6vw,30px) 18px; box-shadow:inset 0 -1px 0 var(--line); }
.add-stop{
  display:inline-flex; align-items:center; gap:9px;
  border:0; cursor:pointer; padding:9px 15px; border-radius:999px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.04em; color:var(--muted);
  transition:color .25s var(--ease), box-shadow .25s var(--ease);
}
.add-stop:hover{ color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-hot); }
.add-stop:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.add-stop-ic{
  position:relative; width:11px; height:11px; flex:none;
}
.add-stop-ic::before,.add-stop-ic::after{
  content:""; position:absolute; inset:0; margin:auto;
  background:var(--brass); border-radius:1px;
}
.add-stop-ic::before{ width:11px; height:1.8px; }
.add-stop-ic::after{ width:1.8px; height:11px; }

.step-rm{
  margin-top:16px; border:0; background:transparent; cursor:pointer; padding:0;
  font:inherit; font-size:13px; color:var(--faint);
  border-bottom:1px solid transparent;
}
.step-rm:hover{ color:var(--chili); border-bottom-color:currentColor; }

/* ---- taking tonight's event into the night --------------------------------
   The controls live on the same line as the news, because the news is the
   reason anybody wants them. */
.tonight-act{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px; margin-left:12px; }
.tonight-add{
  border:0; cursor:pointer; padding:5px 12px; border-radius:999px;
  background:rgba(143,230,75,.1); box-shadow:inset 0 0 0 1px rgba(143,230,75,.3);
  font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.04em; color:var(--soju);
  transition:background .25s var(--ease);
}
.tonight-add:hover{ background:rgba(143,230,75,.2); }
.tonight-add:focus-visible{ outline:2px solid var(--soju); outline-offset:2px; }
.tonight-in{
  font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.04em; color:var(--soju);
}
.tonight-slots{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tonight-lbl{ font-size:12.4px; color:var(--faint); margin-right:2px; }
.tonight-slot{
  min-width:30px; height:30px; padding:0 10px; border:0; cursor:pointer;
  border-radius:999px; background:rgba(255,246,236,.05);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--display); font-weight:800; font-size:12.5px; color:var(--muted);
  transition:color .2s var(--ease), box-shadow .2s var(--ease);
}
.tonight-slot:hover{ color:var(--ink); background:var(--brass); box-shadow:none; }
.tonight-slot:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.tonight-slot.new{ font-size:11.5px; letter-spacing:.04em; }

.plan-tonight{
  margin:0; padding:18px clamp(20px,2.6vw,30px);
  font-size:13.4px; color:var(--muted); box-shadow:inset 0 1px 0 var(--line);
}
.plan-tonight:empty{ display:none; }

/* ---- event listings elsewhere, in the footer ------------------------------
   Somebody else's lists, so quieter than ours: no box, small type, and the
   disclaimer sitting with them rather than tucked where nobody reads it. */
.ftr-links[hidden]{ display:none; }
.ftr-links h3{
  font-family:var(--display); font-weight:800; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  margin:0 0 10px;
}
.ftr-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.ftr-links a{
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.ftr-links a:hover{ color:var(--cream); border-bottom-color:currentColor; }
.ftr-links .arw{ font-size:9px; margin-left:4px; opacity:.7; }
.ftr-links p{ margin:11px 0 0; font-size:12.4px; color:var(--faint); }
.plan-tonight strong{ color:var(--paper); font-weight:600; }
.plan-tonight .unverified{ margin-left:10px; margin-top:0; }
.tonight-link{ color:var(--heat); text-decoration:none; border-bottom:1px solid transparent; }
.tonight-link:hover{ border-bottom-color:currentColor; }

.plan-meta{
  display:grid; gap:0 16px; grid-template-columns:1fr;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,30px) 6px;
  box-shadow:inset 0 1px 0 var(--line);
}
@media (min-width:640px){ .plan-meta{ grid-template-columns:1fr 1fr; } }
.plan-meta input[type="date"],
.plan-meta input[type="time"]{
  color-scheme:dark; font-family:var(--display); font-weight:700;
}
.plan .crawl-act{ padding:0 clamp(20px,2.6vw,30px) clamp(22px,2.6vw,30px); }

.wheel-pie{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(
    var(--chili) 0deg 90deg,
    var(--ember) 90deg 180deg,
    var(--brass) 180deg 270deg,
    var(--soju)  270deg 360deg);
  box-shadow:0 8px 26px -10px rgba(255,110,30,.7);
  /* one long ease-out per click: fast away, slow landing, no bounce */
  transform:rotate(var(--turn,0deg));
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
/* the spokes, so the wedges read as a wheel rather than a colour ring */
.wheel-pie::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) 50% 0/2px 50% no-repeat,
    linear-gradient(var(--ink),var(--ink)) 50% 100%/2px 50% no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 50%/50% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 50%/50% 2px no-repeat;
  opacity:.28;
}
.wheel-hub{
  position:relative; z-index:2; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink-2);
  box-shadow:0 0 0 3px var(--ink), inset 0 0 0 1px var(--line);
  font-family:var(--display); font-weight:900; font-size:14px;
  letter-spacing:.02em; color:var(--cream);
  transition:transform .3s var(--snap);
}
.wheel:hover .wheel-hub{ transform:scale(1.06); }
.wheel:active .wheel-hub{ transform:scale(.97); }
.wheel:focus-visible{ outline:2.5px solid var(--soju); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  .wheel-pie{ transition:none; }
}

/* ---- deals --------------------------------------------------------------- */
.card .deal{
  margin-top:13px; padding:9px 13px; border-radius:11px;
  font-size:13.2px; line-height:1.4; color:var(--muted);
  background:rgba(143,230,75,.07); box-shadow:inset 0 0 0 1px rgba(143,230,75,.22);
}
.card .deal strong{ color:var(--soju); font-weight:600; display:block; }

/* venues sharing a street address: three cards that are really one plan */
.card .samebuilding{
  margin-top:12px; font-size:12.8px; color:var(--brass);
  display:flex; align-items:flex-start; gap:7px; line-height:1.4;
}
.card .samebuilding::before{
  content:""; width:4px; height:4px; border-radius:50%; background:var(--brass);
  flex:none; margin-top:7px;
}

/* ---- the wordmark -------------------------------------------------------- */
.wordmark{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.028em; font-size:21px; line-height:1; color:var(--cream);
  display:inline-flex; align-items:baseline; white-space:nowrap;
}
.hdr.stuck .wordmark{ font-size:19px; transition:font-size .35s var(--ease); }
.ftr-mark{ font-size:24px; display:inline-flex; }

/* ---- skip link ----------------------------------------------------------- */
/* Off screen until focused, then the first thing a keyboard user lands on. */
.skip{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:12px 20px; border-radius:999px;
  background:var(--cream); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:14.5px;
  text-decoration:none; transform:translateY(-160%);
  transition:transform .28s var(--snap);
}
.skip:focus-visible{ transform:none; }

/* The logo mark is out for now: every reference to Ktown is set in type.
   When the mark comes back it replaces the K in .wordmark and in the third
   hero beat, and it will want the cap-height and baseline nudges that lived
   here -- see git history for them rather than re-deriving them.
   ------------------------------------------------------------------------ */
@media (max-width:600px){
  /* The lockup cannot sit beside the nav on a phone without widening the
     document, and the brand cannot wrap. Shrinking it is enough now that it
     is type rather than type plus artwork. */
  .brand .wordmark{ font-size:16px; letter-spacing:-.03em; }
  .hdr.stuck .brand .wordmark{ font-size:15px; }
}
@media (max-width:380px){ .brand .wordmark{ font-size:14px; } }

/* ---- hero sound ----------------------------------------------------------
   Quiet until hovered, because it is an offer rather than an instruction.
   -------------------------------------------------------------------------- */
.sound{
  /* Hard against the right edge of the frame rather than lined up with the
     content gutter. Flush is a decision; three pixels short of flush is a
     mistake. Only the left corners are rounded so it reads as parked against
     the edge on purpose. */
  position:absolute; right:0; top:clamp(84px,11vh,124px); z-index:3;
  border-radius:999px 0 0 999px;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0;
  padding:9px 18px 9px 14px;
  background:rgba(10,10,12,.5); color:var(--muted);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .25s var(--ease), box-shadow .25s var(--ease), transform .3s var(--snap);
}
.sound:hover{ color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-hot); }
.sound.on{ color:var(--ink); background:var(--heat); box-shadow:none; }

/* the speaker: a trapezoid cone with two arcs, drawn rather than shipped */
.sound .spk{ position:relative; width:15px; height:14px; flex:none; }
.sound .spk::before{
  content:""; position:absolute; left:0; top:3px; width:0; height:0;
  border:4px solid transparent; border-right:6px solid currentColor;
}
.sound .spk i{
  position:absolute; left:8px; top:2px; width:7px; height:10px;
  border:1.6px solid currentColor; border-left:0;
  border-radius:0 8px 8px 0;
  opacity:0; transition:opacity .25s var(--ease);
}
.sound.on .spk i{ opacity:1; }
/* muted reads as a slash across the cone */
.sound .spk::after{
  content:""; position:absolute; left:1px; top:6px; width:15px; height:1.6px;
  background:currentColor; transform:rotate(-38deg); transform-origin:left center;
  transition:opacity .2s var(--ease);
}
.sound.on .spk::after{ opacity:0; }

@media (max-width:600px){
  .sound .sound-txt{ display:none; }
  .sound{ padding:11px 13px 11px 11px; }
}

/* ---- the feature ---------------------------------------------------------- */
.feature-role{
  margin:6px 0 0; font-family:var(--display); font-weight:700;
  font-size:clamp(14px,1.2vw,16.5px); letter-spacing:.02em; color:var(--brass);
}
.feature-role:empty{ display:none; }
.feature-series{
  margin-top:16px; font-size:13.6px; color:var(--faint); font-style:italic;
}
.feature-series:empty{ display:none; }

/* ---- the monthly crawl --------------------------------------------------- */
.crawl-sec{ padding-top:clamp(56px,7vw,96px); }
.crawl{
  margin-top:clamp(26px,3.2vw,42px); border-radius:26px; overflow:hidden;
  background:linear-gradient(155deg, var(--ink-3), var(--ink-2) 58%, var(--ink));
  box-shadow:inset 0 0 0 1px var(--line-hot);
}
.crawl-head{
  display:grid; gap:clamp(18px,2.4vw,30px); padding:clamp(24px,3.2vw,38px);
  grid-template-columns:1fr; box-shadow:inset 0 -1px 0 var(--line);
}
@media (min-width:760px){ .crawl-head{ grid-template-columns:auto 1fr; align-items:center; } }
@media (min-width:1080px){ .crawl-head{ grid-template-columns:auto 1fr auto; } }

/* ---- crawl block label ---------------------------------------------------- */
.crawl-label{
  margin:0; padding:clamp(23px,2.9vw,32px) clamp(24px,3.2vw,38px) 0;
  font-family:var(--display); font-weight:800;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
/* the card opens on its own label, so the head below it does not need to
   carry the full top padding as well -- that would read as a gap, not a
   heading. It keeps enough to stay clear of the date. */
.crawl-label + .crawl-head{ padding-top:clamp(15px,1.9vw,21px); }
.crawl + .crawl{ margin-top:clamp(34px,4vw,54px); }

/* ---- the standing early spot ---------------------------------------------
   Green, unnumbered, and set apart from the route above the stop list. It is
   somewhere to be before the crawl, not a stop on it, and the colour is what
   keeps that obvious at a glance.
   -------------------------------------------------------------------------- */
.pre-stop{
  display:block; text-decoration:none; color:inherit;
  margin:clamp(16px,2vw,22px) clamp(22px,3vw,34px) 0;
  padding:13px 16px 13px 15px; border-radius:13px;
  background:transparent;
  box-shadow:inset 2px 0 0 rgba(143,230,75,.55);
  transition:box-shadow .3s var(--ease), transform .3s var(--snap);
}
.pre-stop:hover{ box-shadow:inset 2px 0 0 var(--soju); }
.pre-lbl{
  display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soju); margin-bottom:6px;
}
.pre-dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 2px var(--soju);
}
.pre-lbl em{
  font-style:normal; font-weight:600; letter-spacing:.04em; text-transform:none;
  font-size:11.5px; color:var(--faint);
}
.pre-stop strong{
  display:inline; font-family:var(--display); font-weight:800;
  font-size:15.5px; letter-spacing:-.01em; color:var(--cream);
}
.pre-addr{ font-size:12.8px; color:var(--faint); }
.pre-note{ display:block; margin-top:5px; font-size:13px; color:var(--muted); line-height:1.45; }

/* ---- upcoming crawl head --------------------------------------------------
   The date and the meeting point stack, so the Bounty reads as the anchor of
   the night rather than something parked to the right of a date. Boo's sits
   alongside, clearly separate, clearly not on the route.
   -------------------------------------------------------------------------- */
.crawl-head.is-next{ grid-template-columns:1fr; align-items:start; }
.crawl-lead{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px); }
/* Boo's sits close enough to the Bounty that the eye runs straight from one
   to the other. Split across the full width they read as two unrelated
   things; a short gap makes it an obvious next step. */
.crawl-pair{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:1fr; align-items:center; }
@media (min-width:760px){
  .crawl-pair{
    grid-template-columns:auto minmax(0,auto);
    justify-content:start;
    gap:clamp(26px,3.2vw,48px);
  }
  .crawl-head.is-next .pre-stop{ max-width:430px; }
}
.crawl-head.is-next{ grid-template-columns:1fr; }
.crawl-head.is-next .pre-stop{ margin:0; }

/* ---- the route panel -----------------------------------------------------
   The shape of the night rather than a street map: the stops in order on one
   line, and a link handing the real map to Google. It sits in the dark to the
   right of the date on a wide screen and drops under everything on a narrow
   one, where a horizontal route would have nowhere to go.
   -------------------------------------------------------------------------- */
.crawl-map{
  display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit;
  padding:16px 18px; border-radius:16px; background:rgba(10,10,12,.5);
  box-shadow:inset 0 0 0 1px var(--line); min-width:230px;
  transition:box-shadow .3s var(--ease), transform .3s var(--snap);
}
.crawl-map:hover{ box-shadow:inset 0 0 0 1px var(--line-hot); transform:translateY(-2px); }
.cm-lbl{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.cm-line{ display:flex; align-items:center; }
.cm-stop{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; }
.cm-dot{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:900; font-size:13px; color:#160604;
  background:var(--heat);
}
.cm-stop.is-meet .cm-dot{
  background:transparent; color:var(--soju);
  box-shadow:inset 0 0 0 2px var(--soju);
}
.cm-name{
  font-size:10.5px; color:var(--muted); max-width:62px; text-align:center;
  line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* the walk between two stops */
.cm-link{
  flex:1 1 auto; height:2px; margin:0 2px; margin-bottom:20px; min-width:12px;
  background:repeating-linear-gradient(90deg,
    rgba(255,138,31,.7) 0 4px, transparent 4px 9px);
}
.cm-go{
  font-family:var(--display); font-weight:700; font-size:12.5px; color:var(--brass);
  display:inline-flex; align-items:center; gap:6px;
}
.crawl-map:hover .cm-go .arw{ transform:translate(2px,-2px); }

.crawl-when{ display:flex; flex-direction:column; gap:4px; }
.crawl-date{
  font-family:var(--display); font-weight:900; font-size:clamp(24px,2.7vw,33px);
  letter-spacing:-.028em; line-height:1;
  background:var(--heat); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.crawl-time{ font-family:var(--display); font-weight:800; font-size:17px; color:var(--brass); }
.crawl-meet{ display:flex; flex-direction:column; gap:3px; font-size:15px; }
.crawl-meet .lbl{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.crawl-meet strong{ font-family:var(--display); font-weight:900; font-size:clamp(25px,2.6vw,33px); letter-spacing:-.024em; line-height:1.05; display:block; margin:2px 0 4px; }
.crawl-meet .addr a{ color:var(--soju); text-decoration:none; border-bottom:1px solid rgba(143,230,75,.35); }
.crawl-meet em{ font-style:normal; color:var(--muted); font-size:14px; }

.crawl-stops{
  list-style:none; margin:0; padding:clamp(22px,3vw,34px); display:grid; gap:12px;
  /* the meeting point is stop one, so the list picks up at two */
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); counter-reset:stop 1;
}
.crawl-stops li{
  counter-increment:stop; position:relative; padding:16px 18px 16px 58px;
  border-radius:15px; background:rgba(255,246,236,.04);
  box-shadow:inset 0 0 0 1px var(--line);
}
.crawl-stops li::before{
  content:counter(stop); position:absolute; left:15px; top:50%;
  transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  box-shadow:inset 0 0 0 1.5px var(--chili);
  font-family:var(--display); font-weight:800; font-size:13.5px; color:var(--chili);
}
.crawl-stops strong{ display:block; font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.02em; }
.crawl-stops .stop-map{ display:block; margin-top:4px; font-size:12.8px; color:var(--soju); text-decoration:none; }
.crawl-stops .stop-map:hover{ text-decoration:underline; }
.crawl-stops .stop-kind{ display:block; margin-top:5px; font-size:12px; color:var(--faint); }
/* the slot the vote has not filled yet: dashed, dimmed, no number claimed */
.crawl-stops li.stop-open{
  background:transparent; box-shadow:none;
  border:1px dashed rgba(255,246,236,.16);
}
.crawl-stops li.stop-open::before{
  color:var(--faint);
  box-shadow:inset 0 0 0 1.5px rgba(255,246,236,.22);
}
.crawl-stops li.stop-open strong{ color:var(--faint); }

/* the number the meeting point carries, so the route reads 1-2-3-4 across
   the block rather than restarting under it */
.crawl-meet{ position:relative; }
.crawl-meet{ padding-left:46px; }
.stop-one{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  box-shadow:inset 0 0 0 1.5px var(--chili);
  font-family:var(--display); font-weight:800; font-size:14px; color:var(--chili);
}

.crawl-note{ padding:clamp(6px,1vw,12px) clamp(22px,3vw,34px) 0; color:var(--muted); font-size:15.4px; }
.crawl-act{
  display:flex; flex-wrap:wrap; gap:11px; align-items:center;
  padding:clamp(22px,2.8vw,32px) clamp(22px,3vw,34px) clamp(34px,4.4vw,52px);
}

/* ---- post-to buttons ------------------------------------------------------ */

/* ---- the vote ------------------------------------------------------------
   Square tiles in a grid rather than a row of bars. A square holds a picture,
   and a picture is what makes a bar you have never heard of worth a vote.
   The tally lives on the tile: a number over the image and a bar along the
   bottom edge, so the standings read at a glance without the layout moving.
   -------------------------------------------------------------------------- */
.poll{
  display:grid; gap:12px; margin-top:clamp(24px,3vw,38px);
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
}
@media (min-width:700px){ .poll{ grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); } }

/* ---- choosing a stop ------------------------------------------------------ */
.pick-grid{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }

.pick{
  position:relative; border:0; cursor:pointer; text-align:left; padding:13px 15px;
  border-radius:13px; background:rgba(255,246,236,.04); color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .28s var(--snap), color .25s var(--ease), box-shadow .25s var(--ease);
}
.pick:hover{ transform:translateY(-2px); color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-hot); }
.pick[aria-pressed="true"]{ color:var(--cream); box-shadow:inset 0 0 0 1.5px var(--soju); }
/* The same green as the Verified mark on the card, shrunk to a dot. On a
   tile there is no room for the word and no need for it -- the colour is
   already carrying that meaning everywhere else on the page. */
.pick-vfd{
  position:absolute; top:13px; right:13px;
  width:6px; height:6px; border-radius:50%; background:var(--soju);
  box-shadow:0 0 0 3px rgba(143,230,75,.14);
}
.pick:has(.pick-vfd) .pick-name{ padding-right:14px; }
.pick-name{ display:block; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.02em; }
.pick-walk{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }

.crawl-name{ display:block; margin-bottom:18px; }
/* ---- date and time, with something obvious to tap ------------------------
   Desktop browsers draw their own little calendar and clock inside these
   fields. Safari on a phone draws nothing at all -- the field looks like
   plain text and nobody can tell it opens a picker. So we draw the icon
   ourselves and stretch the native trigger across the whole field, which
   makes the entire control one tap target rather than a hidden 20px square.
   -------------------------------------------------------------------------- */
.picker-field{ position:relative; display:block; }
.picker-field input{ padding-right:46px; }

.picker-ic{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; pointer-events:none;
  fill:none; stroke:var(--brass); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.picker-ic .fill{ fill:var(--brass); stroke:none; }
.picker-field input:focus ~ .picker-ic{ stroke:var(--chili); }
.picker-field input:focus ~ .picker-ic .fill{ fill:var(--chili); }

/* the browser's own indicator: invisible, and covering everything, so a tap
   anywhere in the field opens the picker */
.picker-field input::-webkit-calendar-picker-indicator{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; opacity:0; cursor:pointer;
}
/* Firefox keeps its own control at the right; leave room and hide ours so
   the two do not sit on top of each other */
@supports (-moz-appearance:none){
  .picker-ic{ display:none; }
  .picker-field input{ padding-right:16px; }
}

/* ---- searching the whole list from a stop --------------------------------
   The favourites are the default; this is how somebody reaches the other
   seventeen. It sits above the grid because it changes what the grid is.
   -------------------------------------------------------------------------- */
.pick-none{ margin:14px 0 0; font-size:13.6px; color:var(--faint); }

.crawl-name span{
  display:block; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:8px;
}
.crawl-name input{
  width:100%; padding:12px 16px; border-radius:12px; border:0;
  background:rgba(10,10,12,.55); color:var(--cream); font:inherit; font-size:15.5px;
  box-shadow:inset 0 0 0 1.5px var(--line); transition:box-shadow .3s var(--ease);
}
.crawl-name input:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--chili); }

/* ---- the feature --------------------------------------------------------- */
/* Two apps, one tile. Uber and Lyft are a choice, not a destination, so the
   card stays a card and the picking happens inside it. */
.ride-apps{ display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.ride-apps a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:13.4px;
  color:var(--cream); text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:color .25s var(--ease), box-shadow .25s var(--ease), transform .3s var(--snap);
}
.ride-apps a:hover{
  color:var(--ink); background:var(--soju); box-shadow:none; transform:translateY(-1px);
}
.ride-apps .arw{ font-size:11px; }

/* ---- Ktown people --------------------------------------------------------
   Name, role and links across the top. Below them one row: the face, the
   words, the film. The film keeps its own 640 rather than being stretched to
   fill the card -- drawn at twice its size it was visibly soft, and a phone
   is narrower than 640 anyway, which is why it only ever looked wrong on a
   laptop. Everything stacks below 920.
   -------------------------------------------------------------------------- */
.feature{
  margin-top:clamp(26px,3.2vw,42px); border-radius:26px; overflow:hidden;
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.2vw,40px) clamp(30px,3.8vw,46px);
}
.feature-head .h2{ margin:0; }
.feature-role{
  margin:8px 0 0; font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.feature-links{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; }
.feature-links .soc{ width:38px; height:38px; }
.feature-links .soc svg{ width:18px; height:18px; }
.feature-site{
  display:inline-flex; align-items:center; gap:6px; margin-left:4px;
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--soju); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.feature-site:hover{ border-bottom-color:currentColor; }
.feature-site .arw{ font-size:11px; }

.feature-main{
  display:grid; grid-template-columns:1fr; gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(26px,3.2vw,40px); align-items:start;
}
@media (min-width:920px){
  .feature-main{ grid-template-columns:auto minmax(0,1fr) auto; }
}

.feature-portrait{
  width:clamp(104px,13vw,150px); aspect-ratio:1; object-fit:cover;
  border-radius:18px; display:block;
  box-shadow:inset 0 0 0 1px var(--line), 0 10px 30px -14px rgba(0,0,0,.9);
}

.feature-body{ display:flex; flex-direction:column; gap:14px; }
.feature-body blockquote{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(20px,2.1vw,27px); line-height:1.18; letter-spacing:-.026em;
  text-wrap:balance;
}
.feature-body p{ color:var(--muted); font-size:15.6px; }
.feature-more{ align-self:flex-start; margin-top:4px; }

.feature-film{ position:relative; background:var(--ink); width:100%; max-width:640px; border-radius:16px; overflow:hidden; }
@media (min-width:920px){ .feature-film{ width:clamp(320px,34vw,460px); } }
.feature-film video, .feature-film img{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:var(--ink);
}
.feature-film:empty{ display:none; }

/* ---- one person's own page -----------------------------------------------
   The same parts as the home page card, given room: the face bigger, the
   film at its own size, the writing at a readable measure.
   -------------------------------------------------------------------------- */
.person{ padding-top:clamp(96px,11vw,150px); }
.person-back{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); text-decoration:none;
  transition:color .25s var(--ease);
}
.person-back:hover{ color:var(--brass); }

.person-head{
  display:flex; align-items:center; gap:clamp(18px,2.6vw,34px); flex-wrap:wrap;
  margin-top:clamp(24px,3vw,38px);
}
.person-head .eyebrow{ margin-bottom:10px; }
.person-head .h2{ margin:0; }
.person-portrait{
  flex:none; width:clamp(120px,17vw,200px); aspect-ratio:1; object-fit:cover;
  border-radius:22px; display:block;
  box-shadow:inset 0 0 0 1px var(--line), 0 14px 40px -18px rgba(0,0,0,.95);
}

.person-film{
  margin-top:clamp(28px,3.6vw,46px); max-width:640px;
  border-radius:18px; overflow:hidden; background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.person-film video{ width:100%; display:block; aspect-ratio:16/9; background:var(--ink); }

.person-body{ margin-top:clamp(28px,3.6vw,46px); max-width:68ch; }
.person-body blockquote{
  margin:0 0 22px; font-family:var(--display); font-weight:800;
  font-size:clamp(23px,2.6vw,34px); line-height:1.16; letter-spacing:-.026em;
  text-wrap:balance;
}
.person-body p{ color:var(--muted); font-size:16.4px; margin:0 0 18px; }
.person-note{ font-size:13.2px !important; color:var(--faint) !important; margin-top:26px !important; }
.person-body .btn{ margin-top:14px; }

/* ---- maps link on a listing ---------------------------------------------- */
.card .area{ text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.card .area:hover{ color:var(--soju); }
.card .area .pin{ font-size:9px; opacity:.7; }

/* ---- toast --------------------------------------------------------------- */
#toast{
  position:fixed; left:50%; bottom:26px; z-index:300; transform:translate(-50%,140%);
  padding:13px 22px; border-radius:999px; background:var(--cream); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:14.5px; white-space:nowrap;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.7);
  transition:transform .4s var(--snap);
}
#toast.on{ transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce){
  .step{ animation:none; }
  .ob-fill{ transition:none; }
}

/* ---- happening right now -------------------------------------------------
   Deliberately the loudest thing on a card. If something is on this minute,
   that is the only reason the card needs to be read at all. */
.card .live{
  display:inline-flex; align-items:center; gap:8px; margin-top:13px;
  padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; line-height:1.2;
  color:var(--ink); background:var(--soju);
}
.card .live em{ font-style:normal; opacity:.66; font-weight:500; }
.card .live .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none;
  animation:blip 1.9s var(--ease) infinite;
}
@keyframes blip{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
/* a card with something on gets a warmer edge than the rest of the grid */
.card:has(.live){ box-shadow:inset 0 0 0 1px rgba(143,230,75,.4); }
.card:has(.live):hover{ box-shadow:inset 0 0 0 1px var(--soju), 0 22px 46px -26px rgba(143,230,75,.3); }
/* the chip that filters to them */
.chips button:first-child + button[aria-pressed="true"]{ background:var(--soju); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .card .live .dot{ animation:none; } }

/* ---- the people page ------------------------------------------------------
   Newest profile on its own and large, the rest three across. One person on
   the list gets no grid at all: a row with two holes in it reads as a bug,
   an absence with a line under it reads as a decision.
   -------------------------------------------------------------------------- */
.person-lead{
  margin-top:clamp(30px,4vw,52px); border-radius:24px; overflow:hidden;
  background:linear-gradient(155deg, var(--ink-3), var(--ink-2) 58%, var(--ink));
  box-shadow:inset 0 0 0 1px var(--line);
  display:grid; grid-template-columns:1fr; align-items:center;
}
@media (min-width:820px){ .person-lead{ grid-template-columns:.8fr 1.2fr; } }
.person-lead-media{ background:var(--ink); }
.person-lead-media:empty{ display:none; }
.person-lead-portrait{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:1/1; max-height:460px;
}
.person-lead-body{ padding:clamp(24px,3.4vw,44px); display:grid; gap:11px; align-content:start; }
.person-lead-body h2{
  font-family:var(--display); font-weight:900; margin:0;
  font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em;
}
.person-lead-body p{ margin:0; color:var(--muted); line-height:1.6; }
.person-lead-quote{
  font-family:var(--display); font-weight:800;
  font-size:clamp(18px,1.9vw,23px); letter-spacing:-.02em;
  color:var(--cream) !important; line-height:1.3;
}
.person-lead-body .btn{ justify-self:start; margin-top:8px; }

.people-grid{
  margin-top:clamp(22px,2.8vw,36px);
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(272px,1fr));
}
.person-card{
  padding:clamp(20px,2.2vw,26px); border-radius:18px;
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
  display:grid; gap:8px; align-content:start;
}
.person-card-media:empty{ display:none; }
.person-card-portrait{
  width:76px; height:76px; border-radius:50%; object-fit:cover;
  display:block; margin-bottom:6px;
}
.person-card h3{
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-.02em; margin:0;
}
.person-card .btn{ justify-self:start; margin-top:10px; }

.people-soon{
  margin-top:clamp(22px,2.8vw,36px); padding-top:22px;
  box-shadow:inset 0 1px 0 var(--line); color:var(--faint); font-size:14.6px;
}
.people-soon a{ color:var(--brass); }

/* ---- the blog ------------------------------------------------------------- */
.post-list{ margin-top:clamp(30px,4vw,52px); display:grid; gap:clamp(18px,2.4vw,30px); }
.post-card{
  border-radius:20px; overflow:hidden; background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  display:grid; grid-template-columns:1fr;
  transition:box-shadow .3s var(--ease);
}
@media (min-width:760px){ .post-card{ grid-template-columns:.85fr 1.15fr; } }
.post-card:hover{ box-shadow:inset 0 0 0 1px var(--line-hot); }
.post-card-media{ display:block; background:var(--ink-3); }
.post-card-media img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.post-card-body{ padding:clamp(22px,2.6vw,34px); display:grid; gap:9px; align-content:center; }
.post-card-body h2{
  font-family:var(--display); font-weight:900; margin:0;
  font-size:clamp(21px,2.4vw,30px); letter-spacing:-.028em; line-height:1.15;
}
.post-card-body h2 a{ color:var(--cream); text-decoration:none; }
.post-card-body h2 a:hover{ color:var(--brass); }
.post-card-date{
  margin:0; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.post-card-body p{ margin:0; color:var(--muted); line-height:1.6; }
.post-card-more{
  justify-self:start; margin-top:6px;
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--brass); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.post-card-more:hover{ color:var(--cream); }

/* ---- one post ------------------------------------------------------------- */
.post{ padding-block:clamp(70px,9vw,120px); }
.post-wrap{ max-width:800px; }
/* The back link is its own line. Inline, it sat shoulder to shoulder with the
   kicker and the two read as one confused label. */
.post .person-back{ display:inline-flex; margin-bottom:clamp(20px,2.4vw,30px); }
.post .eyebrow{ display:flex; }
.post-meta{
  margin:14px 0 0; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.post-hero{
  display:block; width:100%; border-radius:20px; margin:clamp(26px,3.4vw,44px) 0 0;
  box-shadow:inset 0 0 0 1px var(--line);
}
.post-body{ margin-top:clamp(26px,3.2vw,40px); }
.post-body p{ margin:0 0 20px; font-size:17px; line-height:1.72; color:var(--muted); }
.post-lede{ font-size:19.5px !important; color:var(--cream) !important; }
.post-body h2{
  font-family:var(--display); font-weight:900; letter-spacing:-.025em;
  font-size:clamp(21px,2.2vw,27px); margin:clamp(30px,3.4vw,42px) 0 14px;
}
.post-body .btn{ margin-top:10px; }
.post-next{ margin-top:clamp(28px,3.2vw,40px); padding-top:22px; box-shadow:inset 0 1px 0 var(--line); }
.post-next a{ color:var(--brass); text-decoration:none; font-family:var(--display); font-weight:700; }
.post-next a:hover{ color:var(--cream); }

/* ---- contact ------------------------------------------------------------- */
.contact-lead{
  display:grid; gap:clamp(20px,2.6vw,34px); margin-top:clamp(30px,3.6vw,48px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:860px){ .contact-lead{ grid-template-columns:1.35fr 1fr; } }

.contact-mail,
.contact-follow{
  border-radius:22px; padding:clamp(22px,2.6vw,34px);
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
}
.contact-kicker{
  margin:0 0 14px; font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
.contact-pitch{
  margin:0 0 26px; max-width:44ch;
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--cream);
}

.contact-follow-note{
  margin:-4px 0 18px; max-width:40ch; font-size:14.5px; line-height:1.6; color:var(--muted);
}
.contact-socs{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.contact-soc{
  display:flex; align-items:center; gap:13px; padding:8px; border-radius:14px;
  text-decoration:none; color:var(--cream);
  transition:background .25s var(--ease);
}
.contact-soc:hover{ background:rgba(255,246,236,.05); }
.contact-soc .soc{ flex:0 0 auto; }
.contact-soc:hover .soc{ color:var(--ink); background:var(--heat); box-shadow:none; }
.contact-soc-txt{ display:grid; line-height:1.3; }
.contact-soc-txt b{ font-family:var(--display); font-weight:800; font-size:15px; }
.contact-soc-txt span{ font-size:13px; color:var(--faint); word-break:break-word; }

.contact-band{ background:var(--ink-2); box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }

.contact-grid{
  list-style:none; margin:clamp(30px,3.6vw,48px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.contact-card{
  border-radius:20px; padding:clamp(20px,2.2vw,28px);
  background:var(--ink); box-shadow:inset 0 0 0 1px var(--line);
  display:flex; flex-direction:column;
  transition:box-shadow .3s var(--ease), transform .3s var(--snap);
}
.contact-card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-hot); }
.contact-card .h3{ margin:0 0 10px; }
.contact-card p{ margin:0; color:var(--muted); line-height:1.62; font-size:15.5px; }
.contact-card-link{
  display:inline-flex; align-self:flex-start; align-items:center; gap:7px;
  margin-top:auto; padding-top:16px;
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--brass); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.contact-card-link:hover{ border-bottom-color:currentColor; }
.contact-card-link .arw{ transition:transform .3s var(--snap); }
.contact-card-link:hover .arw{ transform:translateX(4px); }

.contact-foot{
  margin:0; max-width:70ch; color:var(--faint); line-height:1.7; font-size:15px;
}