/* ============================================================
   ASC Fine Wines — WORLD WINE TOUR 2026
   Every colour, rule and type decision here is lifted from the printed
   invitation card (ASC-Worldwide-Tour-Final-Three): oxblood field, warm
   champagne gold, an engraved serif for names, small tracked caps for
   everything else, and a thin gold rule with a diamond at its centre
   separating each block.
   ============================================================ */

:root {
  /* Sampled from the card artwork */
  --ink:        #2A0508;   /* deepest field, page base            */
  --ink-2:      #3B070B;
  --crimson:    #5E0206;   /* mid field, the body of the card     */
  --crimson-2:  #7C0C12;   /* lifted, behind the programme rows   */
  --gold:       #C9954A;
  --gold-lift:  #EBC77E;
  --gold-pale:  #F5E3B8;
  --cream:      #FBF3E7;
  --cream-dim:  rgba(251, 243, 231, 0.80);
  --cream-faint:rgba(251, 243, 231, 0.52);

  --hair:  1px solid rgba(201, 149, 74, 0.42);
  --hair-2:1px solid rgba(201, 149, 74, 0.20);
  --pad:   clamp(1.25rem, 5vw, 5rem);
  --dur:   600ms;
  --ease:  cubic-bezier(.22, 1, .36, 1);

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cjk:   'Noto Serif TC', 'PingFang TC', 'Hiragino Sans TC', serif;

  --agasight-logo-size: 73px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* A solid floor first. background-attachment:fixed on the body paints only
     the first viewport once the page is taller than the screen (and stutters
     on iOS), which left everything below the fold white. The gradient lives
     on a fixed layer behind the content instead. */
  background: var(--ink-2);
}

/* The card is not flat red: it glows from the top-left where the nebula runs,
   and sinks to near-black at the foot. Plus a very faint dust of gold. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--motes) repeat,
    radial-gradient(120vw 90vh at 12% -10%, rgba(201, 149, 74, 0.16), transparent 58%),
    radial-gradient(90vw 70vh at 88% 12%, rgba(124, 12, 18, 0.55), transparent 60%),
    linear-gradient(180deg, #4A0104 0%, var(--crimson) 30%, #3E080C 100%);
}

img { max-width: 100%; display: block; }
a { color: var(--gold-lift); }

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
}
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3,
html[data-lang="cn"] h1, html[data-lang="cn"] h2, html[data-lang="cn"] h3 {
  font-family: var(--cjk); letter-spacing: .02em; line-height: 1.25;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-lift);
  margin: 0 0 1.1rem;
}
.lede { font-size: clamp(1.02rem, 1.5vw, 1.26rem); color: var(--cream-dim); max-width: 62ch; }

/* The card's signature divider: a gold hairline broken by a small diamond. */
.rule {
  border: 0; height: 1px; margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, rgba(201,149,74,.55) 18%,
              rgba(201,149,74,.55) 82%, transparent);
  position: relative; overflow: visible;
}
.rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -4px 0 0 -4px;
  background: var(--gold-lift); transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(235, 199, 126, .7);
}
.rule--left::after { left: 0; margin-left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-lift); outline-offset: 3px; border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--gold); color: var(--ink); padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ============================================================
   Header
   ============================================================ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--pad);
  background: rgba(42, 5, 8, .72);
  backdrop-filter: blur(14px);
  border-bottom: var(--hair-2);
}
.site-head .mark { display: flex; flex: 0 0 auto; align-items: center; gap: .9rem; text-decoration: none; }
.site-head .mark img {
  display: block; flex: 0 0 auto; height: 52px; width: auto; max-width: none;
  aspect-ratio: 395 / 133; object-fit: contain;
}

.nav { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.8rem); }
.nav a {
  color: var(--cream-dim); text-decoration: none; position: relative;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .35rem 0; white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold-lift); transition: right var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.nav-cta {
  border: 1px solid var(--gold); color: var(--gold-lift) !important;
  padding: .5rem 1.1rem !important; border-radius: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold); color: var(--ink) !important; }

/* ---------- language switch + music, the two live controls ---------- */
.tools { display: flex; align-items: center; gap: .5rem; }
.lang { display: inline-flex; border: var(--hair); border-radius: 2px; overflow: hidden; }
.lang button {
  background: none; border: 0; cursor: pointer; color: var(--cream-dim);
  font-family: var(--sans); font-size: .7rem; letter-spacing: .12em;
  padding: .45rem .7rem; transition: background 200ms ease, color 200ms ease;
}
.lang button + button { border-left: var(--hair-2); }
.lang button:hover { color: var(--cream); }
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--ink); font-weight: 600; }

.music {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: var(--hair); border-radius: 2px; cursor: pointer;
  color: var(--cream-dim); font-family: var(--sans);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .8rem; white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease;
}
.music:hover { color: var(--cream); }
.music .mlabel { display: none; }
.music { padding: .48rem .6rem; }
/* Four bars that only dance while something is actually playing. */
.music .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.music .eq i {
  width: 2px; height: 3px; background: var(--cream-faint); display: block;
  transition: background 250ms ease;
}
.music[aria-pressed="true"] .eq i { background: var(--gold-lift); animation: eq .9s ease-in-out infinite; }
.music[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .15s; }
.music[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .3s; }
.music[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }

.burger {
  display: none; background: none; border: var(--hair); border-radius: 2px;
  color: var(--gold-lift); padding: .5rem .75rem; cursor: pointer;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #340608; box-shadow: 0 24px 48px rgba(0,0,0,.6);
    border-bottom: var(--hair); padding: 1rem var(--pad) 2rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .95rem 0; border-bottom: var(--hair-2); font-size: .88rem; }
  .nav-cta { margin-top: 1rem; text-align: center; }
  /* Keep the equaliser bars; only the words go, so the button never
     collapses to an empty box on a narrow header. */
  .music .mlabel { display: none; }
  .music { padding: .5rem .65rem; }
}
@media (max-width: 560px) { .site-head .mark img { height: 39px; } }

/* ---------- scroll rail ---------- */
.rail { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 95; }
.rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-pale)); }

/* ============================================================
   Layout
   ============================================================ */
main { position: relative; z-index: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(4rem, 10vh, 8rem) 0; }
.section--tight { padding: clamp(2.6rem, 6vh, 4.5rem) 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* ============================================================
   Hero — the card, rebuilt as a page
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: clamp(6.5rem, 15vh, 10rem) var(--pad) clamp(3rem, 8vh, 6rem);
}
.hero__bg {
  position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  background: url('../img/globe.jpg') center 38% / cover no-repeat;
  opacity: .78; will-change: transform;
}
/* The card keeps its text on calm field; so does the page. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 50% 46%, rgba(58, 2, 6, .74), transparent 72%),
    linear-gradient(180deg, rgba(42,5,8,.66) 0%, rgba(42,5,8,.30) 34%,
                    rgba(42,5,8,.62) 76%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 900px; width: 100%; }
.hero--home { min-height: 100svh; padding-top: clamp(5.5rem, 9vh, 7rem); padding-bottom: clamp(2rem, 4vh, 3rem); }
.hero--home .hero__lockup { height: clamp(54px, 8vh, 78px); margin-bottom: clamp(.7rem, 2vh, 1.2rem); }
.hero--home h1 { font-size: clamp(2.35rem, 6.6vw, 5rem); }
.hero--home h1 b { font-size: clamp(3rem, 8vw, 6.2rem); }
.hero--home .rule { margin: clamp(.8rem, 2vh, 1.4rem) 0; }
.hero--home .lede { margin-top: .8rem; }
.hero--home .hero__cer {
  width: min(100%, 680px); margin: clamp(.8rem, 2vh, 1.3rem) auto 0;
  padding: clamp(.7rem, 1.6vh, 1rem) 1.2rem;
  background: rgba(42, 5, 8, .58); border: 1px solid rgba(233, 197, 124, .5);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
}
.hero--home .count { margin-top: .7rem; }
.hero--home .btn-row { margin-top: 1rem; }
.hero-top-cta { display: none; margin-top: .65rem; }
.audience-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem 1.4rem; margin-top: .8rem; }
.audience-links a { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 521px) and (max-height: 850px) {
  .hero--home { padding-top: 5rem; padding-bottom: 1.2rem; }
  .hero--home .hero__lockup { height: 44px; margin-bottom: .45rem; }
  .hero--home h1 { font-size: 3rem; line-height: .95; }
  .hero--home h1 b { font-size: 3.55rem; margin-top: .15rem; }
  .hero--home .presented { font-size: 1.12rem; margin-top: .15rem; }
  .hero--home .sub { margin-top: .35rem; }
  .hero--home .hero-top-cta { display: inline-flex; }
  .hero--home .rule { margin: .45rem 0; }
  .hero--home .lede { margin-top: .4rem; font-size: .92rem; }
  .hero--home .hero__cer { margin-top: .45rem; padding: .5rem .8rem; }
  .hero--home .hero__cer .k { font-size: 1.25rem; font-weight: 500; }
  .hero--home .hero__cer .d { font-size: 1.2rem; }
  .hero--home .hero__cer .v { margin-top: .2rem; font-size: 1rem; }
  .hero--home .hero__cer .a { font-size: .72rem; }
  .hero--home .count { margin-top: .3rem; }
  .hero--home .count b { font-size: 1.45rem; }
  .hero--home .btn-row { margin-top: .45rem; }
  .hero--home .btn { padding-top: .7rem; padding-bottom: .7rem; }
  .hero--home .audience-links { margin-top: .35rem; }
}

.hero__lockup { margin: 0 auto clamp(1.6rem, 4vh, 2.6rem); height: clamp(64px, 11vh, 108px); width: auto; }

.hero h1 {
  font-size: clamp(2.6rem, 8.2vw, 6.4rem);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero h1 b {
  display: block; font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 8.4rem); letter-spacing: .01em;
  background: linear-gradient(180deg, #FDF3D9 0%, #E9C57C 42%, #C08A3E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-hero-title { font-size: clamp(1.9rem, 4.5vw, 3.5rem); text-transform: none; max-width: 18ch; margin-inline: auto; }
html[data-lang="zh"] .about-hero-title, html[data-lang="cn"] .about-hero-title { font-size: clamp(1.75rem, 3.8vw, 3rem); max-width: 22ch; }
@media (min-width: 700px) {
  html[data-lang="zh"] .about-hero-title, html[data-lang="cn"] .about-hero-title {
    font-size: clamp(2rem, 3vw, 2.7rem); max-width: none; white-space: nowrap;
  }
}
.hero .presented {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--cream); margin-top: .5rem;
}
.hero .sub {
  font-size: clamp(.68rem, 1.4vw, .82rem); letter-spacing: .32em;
  text-transform: uppercase; color: var(--gold-pale); margin-top: 1rem;
}
.hero .lede { margin: 1.8rem auto 0; text-align: center; }

.hero__cer { margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.hero__cer .k { font-size: clamp(1.3rem, 3vw, 2rem); font-family: var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.hero__cer .d { font-size: clamp(1.1rem, 2.6vw, 1.8rem); font-family: var(--serif); color: var(--gold-pale); margin-top: .2rem; }
.hero__cer .v { font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.25rem); color: var(--cream); margin-top: .7rem; }
.hero__cer .a { font-size: .84rem; color: var(--cream-dim); }

.count {
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-top: 1.4rem; font-family: var(--serif);
}
.count b { font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--gold-lift); font-weight: 300; }
.count span { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-dim); font-family: var(--sans); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: 2px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--gold); font-weight: 600;
  background: linear-gradient(180deg, #EBC77E, #C08A3E); color: #2A0508;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), filter 220ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 26px rgba(235,199,126,.28); }
.btn--ghost { background: transparent; color: var(--gold-lift); }
.btn--ghost:hover { background: rgba(201,149,74,.14); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.hero .btn-row { justify-content: center; }

/* ============================================================
   Statistics
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; background: rgba(201,149,74,.24); border: var(--hair); }
.stat { background: rgba(42,5,8,.72); padding: clamp(1.5rem, 3.4vw, 2.4rem) 1.3rem; }
.stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 5.5vw, 4rem); color: var(--gold-lift); line-height: 1; }
.stat span { display: block; margin-top: .55rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); }

/* ============================================================
   Programme — the three-day block from the card
   ============================================================ */
.day {
  display: grid; grid-template-columns: clamp(4.5rem, 9vw, 7rem) 1fr auto;
  gap: clamp(1.2rem, 3.4vw, 2.6rem); align-items: center;
  padding: clamp(1.8rem, 4vh, 2.8rem) clamp(0rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(201,149,74,.30);
  position: relative;
  transition: background 300ms ease;
}
.day:last-of-type { border-bottom: 1px solid rgba(201,149,74,.30); }
.day:hover, .day:focus-within { background: rgba(124, 12, 18, .26); }
/* Lit while any of its sessions is ticked. */
.day:has(input:checked) { background: rgba(124, 12, 18, .42); }
.day:has(input:checked)::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
}
.day__d { text-align: center; font-family: var(--serif); line-height: 1; }
.day__d b { display: block; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 300; color: var(--cream); }
.day__d span { display: block; font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); margin-top: .3rem; }
.day h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.3rem); text-transform: uppercase; letter-spacing: .03em; color: var(--cream); }
.day .subt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-pale); margin-top: .35rem; font-weight: 500; }
.day .times { margin-top: .7rem; font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.2rem); color: var(--cream); }
.day .times em { font-style: normal; font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-left: .5rem; }
.day .where { font-size: .82rem; color: var(--cream-dim); margin-top: .25rem; }
.day p { color: var(--cream-dim); margin: .8rem 0 0; max-width: 46ch; font-size: .94rem; }
.day__ico { width: clamp(90px, 13vw, 165px); opacity: .95; transition: transform 500ms var(--ease); }
.day:hover .day__ico { transform: translateY(-6px) scale(1.04); }
/* ---------- one session, one tick box ---------- */
.slots { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }
.slot {
  display: inline-flex; align-items: center; gap: .6rem;
  border: var(--hair); border-radius: 2px; padding: .6rem 1rem;
  background: rgba(42, 5, 8, .5); cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease;
}
.slot:hover { background: rgba(124, 12, 18, .45); }
/* The box IS the input: styled with appearance:none rather than hidden behind
   a decorative span, so it stays clickable, focusable and reachable by a
   screen reader or a test runner. */
.slot input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0;
  border: 1px solid var(--gold); border-radius: 2px;
  background: transparent; cursor: pointer; position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}
.slot input::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid var(--ink);
  border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform 200ms var(--ease);
}
.slot input:checked { background: var(--gold-lift); border-color: var(--gold-lift); }
.slot input:checked::after { transform: rotate(45deg) scale(1); }
.slot:has(input:checked) { background: rgba(124, 12, 18, .6); border-color: var(--gold-lift); }
.slot { flex-wrap: wrap; }   /* on a phone the tag drops to its own line; the time never breaks */
.slot .t { font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.2rem); color: var(--cream); white-space: nowrap; }
.slot em {
  font-style: normal; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.slot--read { cursor: default; }
.slot--read:hover { background: rgba(42, 5, 8, .5); }
/* A priced dinner says so on the tick box itself, and again in a sentence
   under the day, so nobody reserves thinking the dinner is complimentary. */
.slot .fee {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--gold-lift); border-radius: 2px;
  padding: .22rem .5rem; white-space: nowrap; font-weight: 600;
}
.availability { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #dff0df; border: 1px solid rgba(174,211,174,.5); padding: .18rem .45rem; white-space: nowrap; }
.availability--limited { color: #ffe1a6; border-color: rgba(255,193,94,.55); }
.availability--soldout { color: #ffd1d1; border-color: rgba(255,140,140,.55); }
.day .feenote { color: var(--gold-pale); font-size: .86rem; margin-top: .55rem; max-width: 52ch; }
.cartlist .m .fee { color: var(--gold-lift); font-weight: 600; }
.cartnote--fee { color: var(--cream); }
.cartnote--fee b { color: var(--gold-lift); }
.done .fee { color: var(--gold-pale); }

/* ---------- the two steps of a reservation: first the sessions, then the form ---------- */
.pickstep { margin-top: 2.6rem; scroll-margin-top: 6rem; }
.audience { border: 0; padding: 0; margin: 1rem 0 2rem; }
.audience legend { font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2rem); color: var(--cream); margin-bottom: .8rem; }
.audience label { display: inline-flex; align-items: center; gap: .65rem; border: var(--hair); background: rgba(42,5,8,.55); padding: .85rem 1.15rem; margin: 0 .55rem .6rem 0; cursor: pointer; }
.audience input { accent-color: var(--gold); width: 18px; height: 18px; }
.audience label:has(input:checked) { border-color: var(--gold-lift); background: rgba(124,12,18,.55); }
.audience-note { color: var(--gold-pale); border-left: 2px solid var(--gold); padding-left: .8rem; margin: -.8rem 0 1.4rem; }
.slot[hidden] { display: none; }
.step {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-lift); margin: 0 0 .5rem;
}
.pickstep .step + .eyebrow { margin-top: 0; }

/* ---------- the reservation: the form, and what you ticked, side by side ----------
   There used to be a counter bar with a "continue" button that scrolled the
   page a couple of hundred pixels to a form already in view. The ticked
   sessions now simply sit next to the fields, where they are useful. */
.resblock { margin-top: clamp(2.5rem, 6vh, 4rem); scroll-margin-top: 6rem; }
.resgrid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 900px) { .resgrid { grid-template-columns: 1fr; } }
.resform .form { max-width: none; margin-top: 1.6rem; }

.rescart {
  border: var(--hair); border-radius: 3px; padding: 1.4rem 1.5rem;
  background: rgba(42, 5, 8, .55);
  position: sticky; top: 6rem;
  transition: border-color 300ms ease, background 300ms ease;
}
@media (max-width: 900px) { .rescart { position: static; } }
.rescart.on { border-color: rgba(201, 149, 74, .75); background: rgba(124, 12, 18, .42); }
.rescart.warn { border-color: #E8A0A0; background: rgba(160, 20, 26, .55); }
.rescart .eyebrow { margin-bottom: .9rem; }

.cartlist { list-style: none; margin: 0; padding: 0; }
.cartlist li { padding: .7rem 0; border-top: var(--hair-2); }
.cartlist li:first-child { border-top: 0; padding-top: 0; }
.cartlist .d { font-family: var(--serif); font-size: 1.15rem; color: var(--cream); line-height: 1.2; }
.cartlist .m { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.cartnone { margin: 0; font-size: .84rem; color: var(--cream-faint); }

/* .cartguests held the party-size select, removed 2026-09-15: one reservation
   is one seat. The first cart note now carries that sentence instead. */
.rescart .cartnote:first-of-type { margin-top: 1.4rem; padding-top: 1.2rem; border-top: var(--hair-2); }
.cartnote { margin: 1.2rem 0 0; font-size: .8rem; color: var(--cream-dim); line-height: 1.6; }
.cartnote b { display: block; color: var(--gold-lift); margin-bottom: .2rem; }

/* ---------- the opening ceremony, announced not booked ---------- */
.ceremony {
  border: var(--hair); border-radius: 3px; text-align: center;
  padding: clamp(1.6rem, 4vh, 2.4rem) 1.4rem;
  background: rgba(124, 12, 18, .30);
}
.ceremony h3 {
  font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  text-transform: uppercase; letter-spacing: .1em; color: var(--cream);
}
.ceremony .d { font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--gold-pale); margin-top: .3rem; }
.ceremony .v { font-size: .88rem; color: var(--cream-dim); margin-top: .5rem; }

/* ---------- the host partner, on the home page ---------- */
.partner { display: inline-block; margin: 1.4rem auto 0; opacity: .92; transition: opacity 300ms ease, transform 300ms var(--ease); }
.partner:hover { opacity: 1; transform: translateY(-3px); }
.partner img { height: clamp(72px, 10vw, 108px); width: auto; margin: 0 auto; }

.picked { list-style: none; margin: 1rem 0 0; padding: 0; }
.picked li {
  color: var(--cream); font-size: .92rem; padding: .4rem 0;
  border-top: var(--hair-2);
}
@media (max-width: 820px) {
  .day { grid-template-columns: 3.6rem 1fr; }
  .day__ico { display: none; }
}

/* ============================================================
   Timeline — the ASC story, dragged sideways
   ============================================================ */
.tl { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; background: rgba(201,149,74,.20); border: var(--hair); margin-top: 2rem; }
.tl::-webkit-scrollbar { height: 6px; }
.tl::-webkit-scrollbar-thumb { background: rgba(201,149,74,.5); }
.tl__c {
  flex: 0 0 clamp(230px, 30vw, 320px); scroll-snap-align: start;
  background: rgba(42,5,8,.8); padding: 1.6rem 1.4rem 1.8rem;
  transition: background 300ms ease;
}
.tl__c:hover { background: rgba(124,12,18,.5); }
.tl__c .yr { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--gold-lift); line-height: 1; font-weight: 300; }
.tl__c .tx { color: var(--cream-dim); font-size: .9rem; margin-top: .7rem; }
.hint { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-faint); margin-top: .9rem; }

/* ============================================================
   Channel cards
   ============================================================ */
.chan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: rgba(201,149,74,.20); border: var(--hair); margin-top: 1.6rem; }
.chan div { background: rgba(42,5,8,.72); padding: 1.6rem 1.4rem; }
.chan b { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--cream); }
.chan p { margin: .6rem 0 0; color: var(--cream-dim); font-size: .88rem; }

/* ============================================================
   Venue — a real Google map, plus the room list beside it
   ============================================================ */
.venue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: stretch; }
@media (max-width: 900px) { .venue { grid-template-columns: 1fr; align-items: start; } }

.map {
  position: relative; border: var(--hair); border-radius: 3px; overflow: hidden;
  background: rgba(42,5,8,.6);
  /* Fills the column so the map is never a small square beside a tall list. */
  height: 100%; min-height: clamp(360px, 52vh, 620px);
}
.map iframe, .map > img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
@media (max-width: 900px) { .map { height: auto; aspect-ratio: 3 / 2; min-height: 0; } }

.roomlist { display: grid; gap: 1px; background: rgba(201,149,74,.20); border: var(--hair); }
.room {
  background: rgba(42,5,8,.72); padding: 1.2rem 1.3rem; cursor: pointer;
  border: 0; text-align: left; width: 100%; font-family: var(--sans); color: inherit;
  transition: background 260ms ease;
}
.room:hover, .room.on { background: rgba(124,12,18,.55); }
.room b { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--cream); }
.room span { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.room small { display: block; color: var(--cream-dim); font-size: .84rem; margin-top: .45rem; }

.howto { display: grid; gap: 1px; background: rgba(201,149,74,.20); border: var(--hair); margin-top: 1.6rem; }
.howto div { background: rgba(42,5,8,.72); padding: 1.1rem 1.3rem; }
.howto b { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.howto p { margin: .4rem 0 0; color: var(--cream-dim); font-size: .88rem; }

/* ============================================================
   Reservation form
   ============================================================ */
.form { display: grid; gap: 1.15rem; max-width: 34rem; }
.form label { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .45rem; }
.form label strong { color: #ffd7d7; font-size: .85rem; }
.form input, .form select, .form textarea {
  width: 100%; background: rgba(42,5,8,.7); color: var(--cream); border: var(--hair);
  border-radius: 2px; padding: .85rem 1rem; font-family: var(--sans); font-size: .95rem;
  transition: border-color 220ms ease, background 220ms ease;
}
.form input:focus, .form select:focus, .form textarea:focus { background: rgba(124,12,18,.35); }
.form textarea { min-height: 6rem; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.trade-field[hidden] { display: none !important; }
.terms-box { border: var(--hair); background: rgba(42,5,8,.48); padding: 1rem 1.1rem; }
.terms-box p { color: var(--cream-dim); font-size: .82rem; margin: 0 0 .7rem; }
.terms-box p b { color: var(--gold-lift); }
.terms-check { display: flex !important; align-items: flex-start; gap: .65rem; margin: .9rem 0 0 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--cream) !important; font-size: .82rem !important; }
.terms-check input { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; accent-color: var(--gold); }
@media (max-width: 620px) { .form .two { grid-template-columns: 1fr; } }

.notice { border-left: 2px solid var(--gold); background: rgba(201,149,74,.09); padding: 1rem 1.2rem; font-size: .88rem; color: var(--cream-dim); margin-top: 1.4rem; }
.notice b { color: var(--gold-lift); }
.done { border: var(--hair); background: rgba(124,12,18,.35); padding: 1.8rem; }
.done h3 { font-size: 1.8rem; color: var(--gold-lift); }
.done p { color: var(--cream-dim); margin: .8rem 0 0; }
.done .ref { font-family: var(--serif); font-size: 1.4rem; color: var(--cream); letter-spacing: .08em; }

/* ============================================================
   Age gate
   ============================================================ */
.agegate {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  text-align: center; background: rgba(30, 2, 5, .97); padding: var(--pad);
}
.agegate[hidden] { display: none; }
.agegate__box { max-width: 30rem; }
.agegate img { height: 78px; width: auto; margin: 0 auto 2rem; }
.agegate h2 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
.agegate p { color: var(--cream-dim); margin: 1.2rem 0 2rem; }
.agegate .btn-row { justify-content: center; }
.agegate .deny { background: none; border: 0; color: var(--cream-faint); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; margin-top: 1.3rem; font-family: var(--sans); }

/* ============================================================
   The tour (portfolio) — same chapters, restyled to the card
   ============================================================ */
.chapter {
  position: relative; min-height: 100vh; display: grid; align-content: center;
  padding: clamp(6rem, 13vh, 8rem) var(--pad) 15rem;
  overflow: hidden; border-top: var(--hair-2);
}
.chapter__glow {
  position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(48vw 48vw at 70% 42%, var(--accent, rgba(201,149,74,.22)), transparent 64%);
  will-change: transform;
}
.chapter__idx {
  position: absolute; right: var(--pad); top: 16vh; z-index: 0;
  font-family: var(--serif); font-size: clamp(9rem, 28vw, 24rem); line-height: .8;
  color: rgba(251,243,231,.05); pointer-events: none; user-select: none; will-change: transform;
}
.chapter__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; width: 100%; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
@media (max-width: 900px) { .chapter { padding-bottom: clamp(3rem, 8vh, 5rem); } .chapter__inner { grid-template-columns: 1fr; } }
.chapter h2 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
.chapter h3 { font-size: clamp(1.1rem, 2.3vw, 1.6rem); color: var(--gold-pale); margin-top: .8rem; font-style: italic; }
.chapter p { color: var(--cream-dim); max-width: 46ch; margin-top: 1.3rem; }

.facts { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.9rem; border-top: var(--hair); padding-top: 1.3rem; }
.facts div b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--cream); line-height: 1; font-weight: 300; }
.facts div span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.tag { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; border: var(--hair); color: var(--cream-dim); padding: .35rem .8rem; border-radius: 999px; text-decoration: none; }
a.tag:hover { color: var(--cream); background: rgba(201,149,74,.14); }

.shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(.3rem, 1.2vw, 1rem); min-height: clamp(320px, 44vh, 440px); padding-bottom: 2.6rem; }
.shelf::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,149,74,.5), transparent); }
.shelf figure { margin: 0; text-align: center; flex: 1 1 0; min-width: 0; max-width: 175px; }
.shelf img {
  width: 100%; height: auto; max-height: clamp(190px, 33vh, 390px); margin: 0 auto;
  object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,.75));
  transition: transform 420ms var(--ease), filter 420ms ease;
}
.shelf figure:hover img, .shelf figure:focus-within img {
  transform: translateY(-16px);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(235,199,126,.4));
}
.shelf figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); line-height: 1.35; opacity: 0; transition: opacity 300ms ease; }
.shelf figure:hover figcaption, .shelf figure:focus-within figcaption { opacity: 1; }
@media (max-width: 900px) {
  .shelf { min-height: 0; }
  .shelf img { max-height: clamp(150px, 22vh, 230px); }
  .shelf figcaption { position: static; opacity: 1; margin-top: .6rem; font-size: .55rem; }
}

.mapdock {
  position: fixed; left: var(--pad); bottom: 1.5rem; z-index: 60;
  width: clamp(220px, 26vw, 330px);
  background: rgba(42,5,8,.85); backdrop-filter: blur(12px);
  border: var(--hair); border-radius: 3px; padding: .7rem .85rem .6rem;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}
.mapdock.show { opacity: 1; transform: none; }
.mapdock p { margin: 0 0 .5rem; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: flex; justify-content: space-between; gap: 1rem; }
.mapdock p b { color: var(--cream); font-weight: 500; }
.mapdock svg { width: 100%; height: auto; display: block; }
.mapdock .land { fill: rgba(251,243,231,.08); stroke: rgba(251,243,231,.22); stroke-width: .35; }
.mapdock .pin { fill: rgba(201,149,74,.45); }
.mapdock .pin.on { fill: var(--gold-pale); }
.mapdock .halo { fill: none; stroke: var(--gold-pale); stroke-width: .7; opacity: 0; }
.mapdock .halo.on { animation: dockhalo 2.2s ease-out infinite; }
@keyframes dockhalo { 0% { r: 1.5; opacity: .9; } 100% { r: 7; opacity: 0; } }
@media (max-width: 900px) { .mapdock { display: none; } }

/* ============================================================
   The Cellar
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin: 2rem 0 1rem; }
.filters label { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .4rem; }
.filters select, .filters input {
  background: rgba(42,5,8,.7); color: var(--cream); border: var(--hair); border-radius: 2px;
  padding: .7rem .9rem; font-family: var(--sans); font-size: .9rem; min-width: 11rem;
}
.filters input { min-width: 16rem; }
.countline { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); margin-top: .4rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 1px; background: rgba(201,149,74,.18); border: var(--hair); margin-top: 1.6rem; }
.card { background: rgba(42,5,8,.72); padding: 1.4rem 1rem 1.2rem; text-align: center; transition: background 260ms ease; }
.card:hover { background: rgba(124,12,18,.45); }
.card img { height: 168px; width: auto; margin: 0 auto .9rem; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.card .ph { height: 168px; display: grid; place-items: center; margin-bottom: .9rem; color: rgba(251,243,231,.16); font-family: var(--serif); font-size: 3rem; }
.card b { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 400; line-height: 1.25; }
.card em { display: block; font-style: normal; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: .5rem; }
.card small { display: block; font-size: .68rem; color: var(--cream-faint); margin-top: .3rem; }
.more { text-align: center; margin-top: 2.2rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot { border-top: var(--hair); background: rgba(30, 2, 5, .82); position: relative; z-index: 1; }
/* The signatures and the host hotel's mark carry the same weight, so they are
   set to the same height and sit on one line. */
.signs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(2.5rem, 8vw, 6rem);
  padding: clamp(2.6rem, 6vh, 4rem) var(--pad) 0;
}
.signs img { height: clamp(72px, 8vw, 96px); width: auto; opacity: .92; }
/* The signature image carries a name and a role under the stroke, so the
   hotel wordmark is set a little shorter to read at the same weight. */
.signs .jwmark { height: clamp(56px, 6.2vw, 76px); }
@media (max-width: 640px) { .signs { gap: 2rem; } .signs img { height: 62px; } }

.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2.5rem; padding: clamp(2.6rem, 6vh, 4rem) var(--pad) 2rem; max-width: 1180px; margin: 0 auto; }
.foot-grid h4 { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; font-family: var(--sans); font-weight: 500; }
.foot-grid a { display: block; color: var(--cream-dim); text-decoration: none; padding: .3rem 0; font-size: .9rem; }
.foot-grid a:hover { color: var(--cream); }
.foot-grid p { margin: 0; color: var(--cream-dim); font-size: .9rem; }
.legal { border-top: var(--hair-2); padding: 1.4rem var(--pad); text-align: center; font-size: .74rem; color: var(--cream-faint); letter-spacing: .05em; }

.agasight-brand { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 1.8rem 1rem 1.4rem; font-family: var(--sans); border-top: var(--hair-2); }
.agasight-brand .agasight-logo { display: inline-block; line-height: 0; }
.agasight-brand .agasight-logo img { height: var(--agasight-logo-size); width: auto; display: block; border: 0; }
.agasight-brand .agasight-text {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
}
.agasight-brand .agasight-copy {
  font-size: .72rem; letter-spacing: .04em; color: var(--cream-faint);
}
.agasight-brand .agasight-link {
  font-size: .74rem; letter-spacing: .18em; text-transform: lowercase;
  text-decoration: none; color: var(--cream-dim);
}
.agasight-brand .agasight-link:hover { color: var(--gold-lift); }
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero--home { min-height: auto; padding-top: 6.2rem; }
  .hero--home .hero__cer .a { display: none; }
  .hero--home .btn { width: 100%; justify-content: center; }
  .audience label { display: flex; margin-right: 0; }
  .agasight-brand { flex-direction: column; gap: .7rem; }
  .agasight-brand .agasight-text { text-align: center; align-items: center; }
}
.agasight-brand[data-on="dark"] .logo-red { display: none; }
.agasight-brand[data-on="light"] .logo-gold { display: none; }


/* ============================================================
   Portfolio browser — the world map and the producer list
   ============================================================ */
.pfbrowse {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start; margin-top: 2rem;
}
@media (max-width: 900px) { .pfbrowse { grid-template-columns: 1fr; } }

.worldmap { border: var(--hair); border-radius: 3px; background: rgba(42,5,8,.5); padding: 1.2rem; }
.worldmap svg { width: 100%; height: auto; display: block; }
.worldmap .land { fill: rgba(251,243,231,.07); stroke: rgba(251,243,231,.22); stroke-width: .3; }
.worldmap .hit { fill: transparent; }
.worldmap .dot { fill: rgba(201,149,74,.55); transition: fill 240ms ease, r 240ms ease; }
.worldmap .halo { fill: none; stroke: var(--gold-pale); stroke-width: .5; opacity: 0; }
.worldmap .wpin { cursor: pointer; }
.worldmap .wpin:hover .dot, .worldmap .wpin:focus .dot { fill: var(--gold-pale); }
.worldmap .wpin.on .dot { fill: var(--gold-pale); }
.worldmap .wpin.on .halo { animation: wp 2.2s ease-out infinite; }
@keyframes wp { 0% { r: 1.6; opacity: .9; } 100% { r: 7; opacity: 0; } }
.worldmap .wpin:focus { outline: none; }
.worldmap .wpin:focus-visible .halo { opacity: .9; }

.pfpanel label { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .45rem; }
.pfpanel select {
  width: 100%; background: rgba(42,5,8,.7); color: var(--cream); border: var(--hair);
  border-radius: 2px; padding: .8rem 1rem; font-family: var(--sans); font-size: .95rem;
}
.pfcounts { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.3rem 0 1rem; }
.pfcounts span { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pfcounts b { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--cream); font-weight: 300; line-height: 1; margin-bottom: .2rem; }

.pflist {
  list-style: none; margin: 0; padding: 0;
  max-height: 26rem; overflow-y: auto;
  border-top: var(--hair);
}
.pflist li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(201,149,74,.12);
}
.pflist .n { font-family: var(--serif); font-size: 1.02rem; color: var(--cream); }
.pflist .c { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); white-space: nowrap; align-self: center; }
.pflist::-webkit-scrollbar { width: 6px; }
.pflist::-webkit-scrollbar-thumb { background: rgba(201,149,74,.45); }

@media (prefers-reduced-motion: reduce) { .worldmap .wpin.on .halo { animation: none; opacity: .5; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .10s; }
.rv-d2 { transition-delay: .20s; }
.rv-d3 { transition-delay: .30s; }
.rv-d4 { transition-delay: .40s; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
  .hero__bg, .chapter__glow, .chapter__idx { transform: none !important; }
  .shelf figcaption { opacity: 1; }
  .music[aria-pressed="true"] .eq i { animation: none; height: 7px; }
  .map .pin.on .halo, .mapdock .halo.on { animation: none; opacity: .5; }
}