/* SIT & DRINK · the bar after midnight
   Warm off-black, tungsten light from the photographs, bone type, one sage
   accent. The celadon count sheet and the red stamp exist only as objects. */

:root {
  --bg:        #0E0C09;
  --bg-2:      #15120E;
  --bg-3:      #1D1913;
  --line:      rgb(241 234 219 / 0.12);
  --line-2:    rgb(241 234 219 / 0.22);
  --bone:      #F1EADB;
  --bone-2:    #BDB29C;
  --bone-3:    #8C8370;
  --sage:      #A9C4A2;
  --sage-ink:  #0E0C09;
  --paper:     #DCE6D6;
  --ink:       #13221A;
  --ink-soft:  #3F5446;
  --stamp:     #B02E25;

  --display-w: 62.5%;
  --font: "Noto Sans Hebrew", "Assistant", system-ui, sans-serif;

  --sc-canvas: var(--bg);
  --sc-surface: var(--bg-2);
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-2);
  --sc-accent: var(--sage);
  --sc-accent-ink: var(--sage-ink);
  --sc-font-display: var(--font);
  --sc-font-text: var(--font);
  --sc-shadow-color: 30 40% 3%;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  font-family: var(--font);
  font-size: clamp(1.02rem, .98rem + .18vw, 1.15rem);
  line-height: 1.65;
  letter-spacing: 0;
  background: var(--bg);
  color: var(--bone);
  font-weight: 400;
}
::selection { background: var(--sage); color: var(--sage-ink); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }
.tel { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.skip { position: fixed; top: -100px; right: 1rem; z-index: 100; background: var(--sage); color: var(--sage-ink); padding: .6rem 1rem; border-radius: 4px; }
.skip:focus { top: 1rem; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sc-grain { opacity: .05; z-index: 70; }

/* ------------------------------------------------------------ type ----- */
.display {
  font-family: var(--font);
  font-weight: 800; font-stretch: var(--display-w);
  line-height: .92; letter-spacing: -.005em;
  text-wrap: balance;
  color: var(--bone);
}
.display--md  { font-size: clamp(2.6rem, 1.9rem + 2.8vw, 4.6rem); }
.display--lg  { font-size: clamp(3.2rem, 2rem + 5vw, 7.2rem); }
.display--xl  { font-size: clamp(3.6rem, 2.1rem + 6.4vw, 8.8rem); }
.display--xxl { font-size: clamp(4.8rem, 2.4rem + 10vw, 13rem); }
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); line-height: 1.6; color: var(--bone-2); max-width: 44ch; text-wrap: pretty; font-weight: 400; }
.kicker { font-size: .8rem; font-weight: 600; font-stretch: 87.5%; letter-spacing: .14em; color: var(--sage); }

.wrap { width: 100%; max-width: 86rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 5.5rem); }
.sec-head { display: grid; gap: 1.4rem; margin-bottom: clamp(3rem, 7vw, 6.5rem); }
section { position: relative; }

/* ------------------------------------------------------------ buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .75rem 1.6rem;
  font-family: var(--font); font-weight: 700; font-size: 1.05rem; line-height: 1;
  border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease), background-color 180ms ease, box-shadow 180ms ease;
}
.btn:active { transform: scale(.97); }
.btn--sage { background: var(--sage); color: var(--sage-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 30px -12px rgb(169 196 162 / .45); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 2.6rem; padding: .5rem 1.15rem; font-size: .95rem; }
.btn--lg { min-height: 3.75rem; padding: .9rem 2rem; font-size: 1.12rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--sage:hover { background: #BCD4B5; }
  .btn--ink:hover { background: #1E3328; }
}
.i { width: 1.25em; height: 1.25em; flex: none; }
.link-quiet { color: var(--bone); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .35em; transition: text-decoration-color 160ms ease; }
.link-quiet:hover { text-decoration-color: var(--sage); }
.link-arrow { display: inline-flex; gap: .45rem; align-items: center; font-weight: 600; color: var(--sage); text-decoration: none; }
.link-arrow::after { content: "←"; transition: transform 180ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover::after { transform: translateX(-5px); } }

/* ------------------------------------------------------------ nav ------ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem);
  padding-top: max(1.1rem, env(safe-area-inset-top));
  transition: background-color 300ms ease, padding 300ms var(--ease), border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgb(14 12 9 / .82); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); padding-block: .7rem; }
.nav__mark { display: flex; align-items: center; gap: .75rem; color: var(--bone); text-decoration: none; }
.nav__mark img { width: 44px; height: auto; }
.nav__mark span { font-weight: 600; letter-spacing: .24em; font-size: .82rem; }
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); }
.nav__links a { color: var(--bone-2); text-decoration: none; font-size: .95rem; transition: color 160ms ease; }
.nav__links a:hover { color: var(--bone); }
@media (max-width: 960px) { .nav nav { display: none; } .nav__mark span { font-size: .75rem; letter-spacing: .18em; } }
/* in the hero the big CTA is the only one; the nav pill joins after */
.nav__wa { transition: opacity 240ms ease, visibility 240ms; }
.nav:not(.is-past-hero) .nav__wa { opacity: 0; visibility: hidden; }

/* mobile dock: WhatsApp in the thumb zone */
.dock { display: none; }
@media (max-width: 860px) {
  .nav__wa { display: none; }
  /* a floating pill, never touching the bottom edge: iOS 26 Safari paints its glass toolbar
     with the colour of any fixed element that touches the edge; with a gap it stays clear glass */
  .dock {
    position: fixed; z-index: 55;
    left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom) + .75rem);
    background: none; pointer-events: none;
    /* off means gone from rendering, not invisible: Safari's toolbar tint samples
       fixed boxes near the bottom edge even at opacity 0 / visibility hidden, so a
       parked dock painted the toolbar sage across the whole hero */
    display: none;
  }
  .dock.is-on {
    display: block; opacity: 1; transform: none;
    transition: opacity 260ms ease, transform 320ms var(--ease);
  }
  @starting-style { .dock.is-on { opacity: 0; transform: translateY(.5rem); } }
  .dock .btn { pointer-events: auto; box-shadow: 0 10px 30px -6px rgb(0 0 0 / .7), 0 0 0 1px rgb(14 12 9 / .35); }
  .dock .btn { min-height: 3.2rem; }
}

/* ============================================================ 1 HERO ==== */
.hero__stage { background: var(--bg); }
.hero__plane { position: absolute; inset: 0; will-change: transform; }
.hero__plane img, .hero__plane picture { display: block; width: 100%; height: 100%; }
.hero__plane img { object-fit: cover; object-position: 38% 55%; }
.hero__plane--back { transform-origin: 40% 55%; }
.hero__plane--front { z-index: 4; pointer-events: none; transform-origin: 20% 100%; }
/* density only where the type sits: the right side (RTL start) and the floor */
.hero__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to left, rgb(14 12 9 / .88) 0%, rgb(14 12 9 / .62) 26%, rgb(14 12 9 / 0) 52%),
    linear-gradient(to bottom, rgb(14 12 9 / .55) 0%, transparent 18%, transparent 78%, rgb(14 12 9 / .7) 100%);
}
.hero__copy {
  position: absolute; z-index: 3;
  right: clamp(1.25rem, 6vw, 7rem);
  top: 50%; translate: 0 -46%;
  width: min(40rem, 46vw);
  display: grid; gap: clamp(1rem, 2.4vh, 1.6rem);
  will-change: transform, opacity;
}
.hero__h {
  font-weight: 800; font-stretch: var(--display-w);
  font-size: clamp(4.4rem, 2.2rem + 7.6vw, 11rem);
  line-height: .88; letter-spacing: -.01em;
  color: var(--bone);
}
.hero__sub { font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); color: var(--bone); font-weight: 400; }
.hero__acts { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: .4rem; }
.hero__beat {
  position: absolute; z-index: 5; inset: 0;
  display: grid; place-content: center; text-align: center;
  font-weight: 800; font-stretch: var(--display-w);
  font-size: clamp(3.8rem, 2rem + 7vw, 10rem); line-height: .95; color: var(--bone);
  pointer-events: none;
}
.hero__beat p { opacity: 0; transform: translateY(24px); will-change: transform, opacity; }

@media (max-width: 860px) {
  /* portrait plate (bar-plate-m) has the count sheet baked in; the landscape cutout stays desktop-only */
  .hero__plane img { object-position: 50% 0%; }
  .hero__plane--front { display: none; }
  .hero__shade { z-index: 5; }
  .hero__copy { z-index: 6; }
  .hero__beat { z-index: 7; }
  .hero__shade { background: linear-gradient(to bottom, rgb(14 12 9 / .55) 0%, rgb(14 12 9 / 0) 22%, rgb(14 12 9 / 0) 36%, rgb(14 12 9 / .85) 62%, rgb(14 12 9 / .95) 100%); }
  .hero__copy { top: auto; translate: none; bottom: max(1.5rem, env(safe-area-inset-bottom)); right: 1.25rem; left: 1.25rem; width: auto; gap: .9rem; }
  .hero__h { font-size: clamp(4rem, 19vw, 5.6rem); }
  .hero__sub { font-size: 1.1rem; }
  .hero__acts .btn { width: 100%; }
  .hero__acts .link-quiet { display: none; }
  .hero__beat { font-size: clamp(3.4rem, 16vw, 5rem); }
}

/* ============================================================ 2 WORRIES = */
.worries__stage { display: grid; align-items: center; background: var(--bg); }
.worries__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 7rem); align-items: center; padding-block: 5rem; }
.worries__h { grid-row: 1 / span 2; }
.worries__h span { color: var(--bone-3); }
.worries__list { display: grid; border-top: 1px solid var(--line); counter-reset: w; }
.worries__list li { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .5rem; padding: clamp(.65rem, 1.6vh, 1.1rem) 0; border-bottom: 1px solid var(--line); counter-increment: w; }
.worries__list li::before { content: counter(w, decimal-leading-zero); grid-row: 1 / span 2; font-size: .8rem; font-weight: 600; color: var(--bone-3); padding-top: .45rem; font-variant-numeric: tabular-nums; }
.w__q { font-size: clamp(1.1rem, .95rem + .75vw, 1.6rem); font-weight: 600; line-height: 1.3; color: rgb(241 234 219 / calc(1 - var(--done, 0) * .62)); }
.w__a { display: flex; gap: .55rem; align-items: center; font-size: clamp(.95rem, .9rem + .2vw, 1.08rem); color: var(--sage); opacity: var(--ans, 0); transform: translateY(calc((1 - var(--ans, 0)) * 8px)); margin-top: .15rem; }
.w__a::before { content: ""; flex: none; width: .45rem; height: .8rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-.15rem); margin-inline: .15rem .2rem; }
.worries__end { grid-column: 2; font-weight: 800; font-stretch: var(--display-w); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.8rem); line-height: 1; color: var(--bone); opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms var(--ease); }
.worries__end.is-on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .worries__inner { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 4.8rem 1.5rem; }
  .worries__h { grid-row: auto; font-size: 3rem; }
  .worries__list li { grid-template-columns: 2rem 1fr; padding: .5rem 0; }
  .w__q { font-size: 1.04rem; }
  .w__a { font-size: .9rem; }
  .worries__end { grid-column: auto; font-size: 2rem; }
}

/* ============================================================ 3 SYSTEM == */
.system { padding-block: clamp(6rem, 12vw, 12rem); background: linear-gradient(var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg)); }
.steps { display: grid; gap: clamp(5rem, 11vw, 10rem); }
.step { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.step:nth-child(2) .step__text { order: 2; }
.step__text { display: grid; gap: 1.1rem; align-content: start; max-width: 38rem; }
.step__text > p:not(.step__n) { color: var(--bone-2); }
.step__n { font-size: .85rem; font-weight: 600; color: var(--sage); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.step__h { font-weight: 800; font-stretch: var(--display-w); font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.2rem); line-height: .95; text-wrap: balance; }

.panel {
  position: relative;
  background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 40px 80px -40px rgb(0 0 0 / .8);
}
.demo { padding: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; gap: 1.05rem; align-content: start; }
.demo__tag { justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--bone-3); border: 1px solid var(--line-2); border-radius: 999px; padding: .15rem .65rem; }
.demo__title { font-weight: 800; font-stretch: var(--display-w); font-size: 2.3rem; line-height: 1; }
.demo__meta { color: var(--bone-3); font-size: .95rem; margin-top: -.6rem; }

.field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-size: .85rem; font-weight: 600; color: var(--bone-2); padding: 0; }
.field input {
  width: 100%; min-height: 3rem; padding: .55rem .9rem;
  font-size: 1.05rem; color: var(--bone);
  background: rgb(0 0 0 / .28); border: 1px solid var(--line-2); border-radius: 10px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.field input::placeholder { color: var(--bone-3); }
.field input:focus { outline: none; border-color: var(--sage); background: rgb(0 0 0 / .4); }
.stepper { display: inline-flex; align-items: center; gap: .35rem; }
.stepper button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--bone); font-size: 1.3rem; cursor: pointer; transition: transform 120ms var(--ease), border-color 160ms ease; }
.stepper button:hover { border-color: var(--sage); }
.stepper button:active { transform: scale(.94); }
.stepper output { min-width: 2.6rem; text-align: center; font-weight: 800; font-stretch: var(--display-w); font-size: 2.3rem; line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: .95rem; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.chips input:checked + span { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.chips input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.demo__result { min-height: 1.6em; font-weight: 600; color: var(--sage); }
.demo__result.is-error { color: #E38A7F; }

.seat__results { display: grid; gap: .2rem; min-height: 7.5rem; align-content: start; }
.seat__results button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .7rem; background: transparent; border: 0; border-radius: 10px; color: var(--bone); text-align: start; cursor: pointer; font-size: 1rem; font-family: var(--font); }
.seat__results button:hover, .seat__results button[aria-selected="true"] { background: rgb(255 255 255 / .06); }
.seat__results .t { font-weight: 800; font-stretch: var(--display-w); font-size: 1.5rem; line-height: 1; color: var(--sage); }
.seat__hint { color: var(--bone-3); font-size: .95rem; padding: .5rem .2rem; }
.seat__map { width: 100%; height: auto; background: rgb(0 0 0 / .25); border: 1px solid var(--line); border-radius: 12px; }
.seat__map .tbl circle { fill: transparent; stroke: rgb(241 234 219 / .45); stroke-width: 1.2; transition: fill 220ms ease, stroke 220ms ease; }
.seat__map .tbl text { font-family: var(--font); font-weight: 700; font-size: 12px; fill: var(--bone-2); text-anchor: middle; dominant-baseline: central; }
.seat__map .tbl.is-hit circle { fill: var(--sage); stroke: var(--sage); }
.seat__map .tbl.is-hit text { fill: var(--sage-ink); }
.seat__map .stage-lbl { font-family: var(--font); font-size: 10px; fill: var(--bone-3); text-anchor: middle; }

.step--door { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.demo--door { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem clamp(2rem, 4vw, 3.5rem); padding: 0; }
.clicker { position: relative; width: min(100%, 22rem); justify-self: center; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 110ms var(--ease); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .65)) drop-shadow(0 0 60px rgb(255 190 120 / .08)); }
.clicker img { width: 100%; height: auto; }
.clicker:active { transform: scale(.97) translateY(2px); }
/* the window in clicker.webp sits in three-quarter view: tilted ~2.6deg and nearer on the right.
   the box is fitted to the photo's inner window and the digits are sized off it (container units). */
.clicker__window {
  position: absolute; left: 38%; top: 52.4%; width: 37.4%; height: 12.4%;
  container-type: size; display: grid; place-items: center;
  background: #0b0b0b; border-radius: 3px; box-shadow: inset 0 2px 5px rgb(0 0 0 / .9);
  transform: perspective(520px) rotateY(-9deg) rotate(-2.6deg); transform-origin: 50% 50%;
}
.odo { display: inline-flex; direction: ltr; line-height: 1; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; position: relative; }
.odo__s { display: flex; flex-direction: column; transition: transform 720ms cubic-bezier(.2,.85,.15,1); }
.odo__s span { height: 1em; display: block; text-align: center; }
.odo--clicker { font-family: var(--font); font-weight: 700; font-stretch: 68%; color: #ecebe6; font-size: 84cqh; gap: 2.6cqw; }
/* each digit rides a drum: dark wheel, shaded top and bottom like a cylinder */
.odo--clicker .odo__d { width: 21cqw; background: #141414; border-radius: 2px; box-shadow: inset 1px 0 0 rgb(255 255 255 / .05), inset -1px 0 0 rgb(0 0 0 / .8); }
.odo--clicker .odo__d::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(0 0 0 / .78), rgb(0 0 0 / 0) 32%, rgb(255 255 255 / .04) 50%, rgb(0 0 0 / 0) 68%, rgb(0 0 0 / .78)); }
.door__side { display: grid; gap: 1rem; align-content: start; }
.door__log { display: grid; align-content: start; min-height: 15rem; border-top: 1px solid var(--line-2); }
.door__log li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .75rem; align-items: center; padding: .7rem .15rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
.door__log li.is-new { animation: logIn 380ms var(--ease); }
.door__log .t { color: var(--bone-3); font-size: .9rem; }
.door__log .ok { color: var(--sage); font-size: .85rem; font-weight: 700; }
.door__log li.door__empty { display: block; color: var(--bone-3); padding: .9rem .15rem; }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 860px) {
  .step, .step--door { grid-template-columns: 1fr; }
  .step:nth-child(2) .step__text { order: 0; }
  .demo--door { grid-template-columns: 1fr; }
  .clicker { width: min(70%, 16rem); }
}

/* ============================================================ 4 BAR ===== */
.bar__stage { background: var(--bg); }
.bar__photo { position: absolute; inset: 0; overflow: hidden; }
.bar__photo picture { display: block; height: 100%; }
.bar__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(calc(1.14 - var(--bp, 0) * .14)); transform-origin: 62% 58%; will-change: transform; }
.bar__scrim { position: absolute; inset: 0; background: linear-gradient(to left, rgb(14 12 9 / .9) 0%, rgb(14 12 9 / .7) 28%, rgb(14 12 9 / 0) 56%); }
.bar__copy { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; right: clamp(1.25rem, 6vw, 7rem); width: min(38rem, 44vw); display: grid; gap: 1.3rem; }
.quote { margin: .6rem 0 0; padding-right: 1.2rem; border-right: 2px solid var(--sage); }
.quote blockquote { margin: 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.55; color: var(--bone); font-weight: 500; }
.quote figcaption { margin-top: .55rem; font-size: .9rem; color: var(--bone-3); }
@media (max-width: 860px) {
  /* portrait macro (bar-macro-p): the hand sits in the top half, the copy on the dark bar below */
  .bar__photo img { object-position: 50% 0%; transform-origin: 55% 25%; }
  .bar__scrim { background: linear-gradient(to bottom, rgb(14 12 9 / 0) 38%, rgb(14 12 9 / .75) 58%, rgb(14 12 9 / .92) 100%); }
  /* clear the mobile WhatsApp dock */
  .bar__copy { top: auto; translate: none; bottom: calc(5.2rem + env(safe-area-inset-bottom)); right: 1.25rem; left: 1.25rem; width: auto; gap: .9rem; }
  .bar__copy .display { font-size: 3.2rem; }
  .bar__copy .lede { font-size: 1rem; }
  .quote blockquote { font-size: 1rem; }
}

/* ============================================================ 5 NIGHT === */
.moments { padding-block: clamp(6rem, 12vw, 12rem) clamp(4rem, 8vw, 8rem); }
.moments__grid { display: grid; gap: clamp(.6rem, 1.2vw, 1.1rem); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 15vw, 15rem); }
.m { margin: 0; position: relative; overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 12 9 / .7), transparent 40%); pointer-events: none; }
.m figcaption { position: absolute; z-index: 1; right: 1rem; bottom: .85rem; font-size: .9rem; font-weight: 500; color: var(--bone); }
@media (hover: hover) and (pointer: fine) { .m:hover img { transform: scale(1.04); } }
.m--a { grid-column: span 5; grid-row: span 3; }
.m--b { grid-column: span 7; grid-row: span 2; }
.m--c { grid-column: span 4; }
.m--d { grid-column: span 3; }
.m--e { grid-column: 1 / -1; grid-row: span 2; }
.m--a img { object-position: 50% 40%; }
@media (max-width: 860px) {
  .moments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .m--a { grid-column: 1 / -1; grid-row: span 3; }
  .m--b, .m--e { grid-column: 1 / -1; grid-row: span 1; }
  .m--c, .m--d { grid-column: span 1; }
}

/* the peak: a rail through the attractions, travelling leftward */
.attr__stage { display: flex; align-items: center; overflow: hidden; background: radial-gradient(120% 90% at 75% 55%, #1E1A12 0%, var(--bg) 62%); }
.attr__rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: clamp(1.5rem, 6vw, 7rem); will-change: transform; height: 100%; }
.attr__lead { flex: none; width: min(36rem, 82vw); display: grid; gap: 1.6rem; }
.attr__lead .display { line-height: .84; }
.attr__items { display: flex; gap: clamp(1.25rem, 2.6vw, 2.6rem); align-items: center; }
.attr { flex: none; display: grid; gap: .6rem; width: clamp(15rem, 24vw, 22rem); }
.attr:nth-child(3n+2) { margin-top: 9vh; }
.attr:nth-child(3n) { margin-top: -7vh; }
.attr figure { margin: 0; height: clamp(18rem, 58svh, 36rem); overflow: hidden; border-radius: 8px; background: var(--bg-2); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9); }
.attr img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.attr h3 { font-weight: 800; font-stretch: var(--display-w); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem); line-height: 1; color: var(--bone); }
.attr__spec { font-size: .95rem; color: var(--bone-2); }
.attr__more { justify-self: start; background: none; border: 0; padding: 0; color: var(--sage); font-weight: 600; cursor: pointer; font-size: .95rem; font-family: var(--font); }
@media (hover: hover) and (pointer: fine) { .attr:hover img { transform: scale(1.04); } }
.attr__end { flex: none; width: min(24rem, 80vw); display: grid; gap: 1.3rem; justify-items: start; }
.attr__endtext { font-weight: 800; font-stretch: var(--display-w); font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); line-height: .95; }
.attr__progress { position: absolute; inset: auto clamp(1.25rem, 4vw, 3.5rem) clamp(1.2rem, 4svh, 2.4rem); display: flex; align-items: center; gap: 1rem; font-size: .85rem; font-weight: 600; color: var(--bone-3); pointer-events: none; }
.attr__progress i { flex: 1; max-width: 12rem; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.attr__progress b { display: block; height: 100%; width: 100%; background: var(--sage); transform-origin: right; transform: scaleX(var(--ap, 0)); }
@media (max-width: 860px) {
  .attr__progress { inset: calc(var(--nav-h, 4rem) + .8rem) 1.25rem auto; }
  .attr { width: 72vw; }
  .attr figure { height: 52svh; }
  .attr:nth-child(3n+2), .attr:nth-child(3n) { margin-top: 0; }
}

/* ============================================================ 6 LETTERS = */
.letters { padding-block: clamp(6rem, 12vw, 12rem); }
.letters__wall { columns: 2 24rem; column-gap: clamp(2rem, 5vw, 5rem); }
.letter { break-inside: avoid; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.letter:first-child .letter__text { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.5; color: var(--bone); }
.letter__stars { color: var(--sage); letter-spacing: .25em; font-size: .85rem; margin-bottom: .8rem; }
.letter__text { font-size: 1.08rem; line-height: 1.75; white-space: pre-line; color: var(--bone-2); }
.letter__sig { margin-top: 1.1rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.letter__sig strong { font-weight: 700; color: var(--bone); }
.letter__sig span { font-size: .9rem; color: var(--bone-3); }
.letter__more { margin-top: .6rem; background: none; border: 0; padding: 0; font-weight: 600; color: var(--sage); cursor: pointer; font-size: .95rem; font-family: var(--font); }

/* ============================================================ 7 PACKAGES  */
.packages { padding-block: clamp(6rem, 12vw, 12rem); background: linear-gradient(var(--bg), var(--bg-2) 25%, var(--bg-2) 75%, var(--bg)); }
.ledger { border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: rgb(255 255 255 / .02); }
.ledger__table { width: 100%; border-collapse: collapse; }
.ledger__table th, .ledger__table td { border-bottom: 1px solid var(--line); padding: .85rem 1rem; text-align: center; vertical-align: middle; }
.ledger__table thead th { border-bottom: 1px solid var(--line-2); vertical-align: bottom; font-size: .8rem; color: var(--bone-3); font-weight: 600; padding-top: 1.4rem; }
.ledger__table td:nth-child(2), .ledger__table th:nth-child(2) { text-align: start; }
.ledger__pick { width: 4.5rem; }
.ledger__table tbody tr:not(.grp):hover { background: rgb(255 255 255 / .03); }
.ledger__table .grp td { text-align: start; font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--sage); padding: 1.1rem 1rem .4rem; border-bottom-color: transparent; }
.it__label { font-weight: 600; display: block; color: var(--bone); }
.it__desc { font-size: .9rem; color: var(--bone-3); }
.plan { display: grid; gap: .15rem; justify-items: center; width: 100%; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--bone); border-radius: 10px; font-family: var(--font); transition: background-color 160ms ease; }
.plan:hover { background: rgb(255 255 255 / .05); }
.plan__name { font-weight: 800; font-stretch: var(--display-w); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: .01em; }
.plan__tag { font-size: .78rem; color: var(--bone-3); font-weight: 500; }
.plan--hot .plan__tag { color: var(--sage); }
.plan.is-active { background: rgb(169 196 162 / .12); box-shadow: inset 0 -2px 0 var(--sage); }
.tick { display: inline-block; width: 1.4rem; height: 1.4rem; color: var(--sage); }
.tick--no { display: inline-block; width: .8rem; height: 1px; background: var(--line-2); vertical-align: middle; }
.box { position: relative; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; cursor: pointer; }
.box input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.box span { width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line-2); border-radius: 6px; display: grid; place-items: center; transition: background-color 140ms ease, border-color 140ms ease; }
.box span svg { width: 1rem; height: 1rem; color: var(--sage-ink); opacity: 0; transform: scale(.6); transition: opacity 120ms ease, transform 180ms var(--ease); }
.box input:checked + span { background: var(--sage); border-color: var(--sage); }
.box input:checked + span svg { opacity: 1; transform: none; }
.box input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.ledger__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; }
.ledger__sum { display: grid; gap: .25rem; }
.ledger__count { font-weight: 700; color: var(--bone); }
.ledger__note { font-size: .88rem; color: var(--bone-3); }
@media (max-width: 860px) {
  /* clip, not hidden: keeps the header and the send bar sticky against the page */
  .ledger { margin-inline: -1.25rem; border-radius: 0; border-inline: 0; overflow: clip; }
  .ledger__table { table-layout: fixed; }
  .ledger__table thead th:nth-child(n+3) { width: 4rem; }
  .ledger__table thead th:nth-child(5) { width: 5rem; }
  .ledger__table th, .ledger__table td { padding: .6rem .35rem; }
  .plan { padding: .3rem .1rem; }
  .ledger__table thead th { position: sticky; top: var(--nav-h, 4rem); z-index: 2; background: var(--bg-2); padding-top: .7rem; }
  .ledger__pick { width: 2.6rem; }
  .plan__name { font-size: 1rem; letter-spacing: 0; }
  .plan__tag, .it__desc { display: none; }
  .plan--hot .plan__tag { display: block; font-size: .66rem; }
  .it__label { font-size: .92rem; }
  /* floats clear of the bottom edge for the same iOS toolbar reason as the dock */
  .ledger__foot { position: sticky; bottom: calc(env(safe-area-inset-bottom) + .6rem); z-index: 2; margin: .6rem .75rem; border-radius: 16px; background: rgb(21 18 14 / .94); backdrop-filter: blur(12px); border: 1px solid var(--line-2); padding: .8rem 1rem; gap: .6rem; box-shadow: 0 12px 30px -8px rgb(0 0 0 / .8); }
  .ledger__note { display: none; }
  .ledger__foot .btn { width: 100%; }
}

/* ============================================================ 8 VENDORS = */
.vendors { padding-block: clamp(4rem, 8vw, 8rem); }
/* phone: the story keeps its beats, but without a screen of dark between them */
@media (max-width: 860px) {
  .system, .letters, .packages { padding-block: 4rem; }
  .moments { padding-block: 3rem 3rem; }
  .close { padding-top: 4rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}
.phonebook { border-top: 1px solid var(--line-2); }
.pb { display: grid; grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 1.4rem; align-items: center; padding: 1.15rem .25rem; border-bottom: 1px solid var(--line); }
.pb__img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--bg-3); }
.pb__name { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.pb__cat { font-size: .88rem; color: var(--sage); }
.pb__desc { color: var(--bone-2); font-size: .98rem; line-height: 1.5; }
.pb__acts { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.pb__acts a { font-size: .9rem; font-weight: 600; color: var(--bone); text-decoration: none; padding: .5rem .95rem; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color 160ms ease, color 160ms ease; white-space: nowrap; }
.pb__acts a:hover { border-color: var(--sage); color: var(--sage); }
@media (max-width: 860px) {
  .pb { grid-template-columns: 4rem minmax(0, 1fr); gap: .55rem 1rem; }
  .pb__img { width: 4rem; height: 4rem; grid-row: span 2; }
  .pb__desc { grid-column: 2; font-size: .92rem; }
  .pb__acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================ 9 CLOSE === */
.close { padding-block: clamp(6rem, 12vw, 11rem) 2rem; background: radial-gradient(90% 70% at 50% 60%, #1F1A12 0%, var(--bg) 70%); }
.close__wrap { display: grid; gap: clamp(2.8rem, 6vw, 5rem); }
.close__copy { display: grid; gap: 1.4rem; }
/* the one paper object on the page: a count sheet lying on the bar */
.sheet-form {
  position: relative;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 2.2rem, rgb(62 96 118 / .22) 2.2rem calc(2.2rem + 1px)),
    url("assets/gen/paper.webp");
  background-size: 100% 2.2rem, 560px;
  border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 2px 0 rgb(255 255 255 / .4) inset, 0 50px 90px -40px rgb(0 0 0 / .95), 0 18px 30px -18px rgb(0 0 0 / .8);
  transform: rotate(-.8deg);
  max-width: 64rem;
  display: grid; gap: 1.1rem;
}
.sheet-form::before { content: ""; position: absolute; top: 0; bottom: 0; right: clamp(.6rem, 2vw, 1.4rem); width: 5px; border-inline: 1px solid #C23A2E; opacity: .7; }
.sheet-form > * { padding-right: clamp(1rem, 2.5vw, 1.8rem); }
.sheet-form__h { font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); }
.sheet-form__row { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .7fr); border-block: 1.5px solid var(--ink); padding-right: 0; margin-right: clamp(1rem, 2.5vw, 1.8rem); }
.sheet-form__row > .cell + .cell { border-inline-start: 1px solid rgb(62 96 118 / .45); }
.cell { display: grid; gap: .1rem; padding: .55rem .8rem .3rem; }
.cell > span { font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.cell :is(input, select) { width: 100%; min-height: 2.7rem; padding: .2rem 0; font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.cell :is(input, select):focus { outline: none; box-shadow: inset 0 -2px 0 var(--stamp); }
.cell input::placeholder { color: #5E7062; font-weight: 400; }
.cell input[type="date"] { color-scheme: light; }
.sheet-form [aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--stamp) !important; }
.sheet-form__error { min-height: 1.4em; color: var(--stamp); font-weight: 700; }
.sheet-form__actions { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.sheet-form__alt { color: var(--ink-soft); }
.host { margin: 2rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: center; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.host__img { grid-row: span 2; width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--bg-3); padding: .7rem; border: 1px solid var(--line-2); }
.host__img[src$=".webp"], .host__img[src$=".jpg"] { padding: 0; }
.host__q { font-size: 1.1rem; line-height: 1.5; color: var(--bone); }
.host__sig { font-size: .9rem; color: var(--bone-3); }
.host__sig strong { color: var(--bone-2); font-weight: 700; }
.sheet-form__row > .cell--n { grid-column: 1 / -1; border-inline-start: 0 !important; border-top: 1px solid rgb(62 96 118 / .45); padding-bottom: .7rem; }
.guests { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .35rem; border: 0; margin: 0; min-width: 0; }
.guests label { position: relative; }
.guests input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.guests span { display: inline-block; padding: .35rem .8rem; min-height: 2.2rem; line-height: 1.5rem; border: 1.5px solid rgb(19 34 26 / .35); border-radius: 999px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.guests input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.guests input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; }
.sheet-form__alt a { color: var(--ink); font-weight: 700; }
.stamp {
  --rot: -8deg;
  display: inline-grid; place-items: center;
  padding: .05em .45em .1em;
  font-family: var(--font); font-weight: 800; font-stretch: var(--display-w);
  color: var(--stamp); border: 3px solid currentColor; border-radius: 6px;
  transform: rotate(var(--rot)); filter: url(#ink); mix-blend-mode: multiply; opacity: .9;
  user-select: none; pointer-events: none;
}
.stamp--big { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); }
.sheet-form__stamp { position: absolute; left: 14%; top: 50%; margin-top: -2.2rem; --rot: -11deg; }
[data-thump] { opacity: 0; transform: rotate(var(--rot)) scale(1.4); }
[data-thump].is-on { opacity: .9; transform: rotate(var(--rot)) scale(1); transition: transform 180ms cubic-bezier(.3,1.6,.5,1), opacity 90ms linear; }
@media (max-width: 860px) {
  .sheet-form { transform: none; margin-inline: -.25rem; }
  .sheet-form__row { grid-template-columns: 1fr 1fr; }
  .cell--name { grid-column: 1 / -1; }
  .sheet-form__row > .cell + .cell { border-inline-start: 0; }
  .cell { border-bottom: 1px solid rgb(62 96 118 / .35); }
  .cell:nth-of-type(3) { border-inline-start: 1px solid rgb(62 96 118 / .45) !important; }
  .cell--n { grid-column: 1 / -1; }
  .sheet-form__actions .btn { width: 100%; }
}

.foot { display: grid; gap: 1.1rem; padding-top: 2.2rem; border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 4rem); }
.foot__brand { display: flex; align-items: center; gap: .8rem; color: var(--bone-2); font-weight: 500; }
.foot__brand img { width: 46px; height: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .95rem; }
.foot__links a { color: var(--bone-3); text-decoration: none; transition: color 160ms ease; }
.foot__links a:hover { color: var(--bone); }
.foot__copy { font-size: .85rem; color: var(--bone-3); }

/* ------------------------------------------------------------ dialog --- */
.dlg { width: min(40rem, calc(100vw - 2rem)); max-height: min(85svh, 48rem); padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); color: var(--bone); box-shadow: 0 40px 100px -20px rgb(0 0 0 / .9); }
.dlg[open] { animation: dlgIn 260ms var(--ease); }
.dlg::backdrop { background: rgb(5 4 3 / .7); backdrop-filter: blur(4px); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dlg__close { position: absolute; top: .7rem; left: .7rem; }
.dlg__close button { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--bone); font-size: 1.8rem; cursor: pointer; border-radius: 50%; }
.dlg__close button:hover { background: rgb(255 255 255 / .08); }
.dlg__img { width: 100%; max-height: 18rem; object-fit: cover; margin-bottom: 1.3rem; border-radius: 12px; }
.dlg__h { font-weight: 800; font-stretch: var(--display-w); font-size: 2.8rem; line-height: 1; margin-bottom: .9rem; }
.dlg__text { white-space: pre-line; color: var(--bone-2); margin-bottom: 1.5rem; }
.dlg__sig { color: var(--bone-3); }

/* ------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  .odo__s { transition: none; }
  [data-thump].is-on { transition: opacity 120ms linear; }
  .hero__plane, .hero__copy { transform: none !important; }
  .hero__beat { display: none; }
  .bar__photo img { transform: none; }
  .attractions { height: auto !important; }
  .attractions .attr__stage { position: relative; height: auto; min-height: 100svh; overflow-x: auto; scroll-snap-type: x proximity; }
  .attr__rail { transform: none !important; }
  .attr { scroll-snap-align: center; }
  .worries__end { transition: opacity 200ms linear; transform: none; }
}

/* touch devices (iPhone above all): drop the per-frame costs that make scrolling stutter.
   a fixed full-screen grain and live backdrop blur both recomposite on every scroll frame. */
@media (pointer: coarse) {
  .sc-grain { display: none; }
  .nav.is-solid { background: rgb(14 12 9 / .96); backdrop-filter: none; }
  .ledger__foot { background: rgb(21 18 14 / .98); backdrop-filter: none; }
}

/* iOS 26 Safari tints its glass toolbar from whatever fixed/sticky layer touches the
   bottom edge. A pinned stage with no background-color of its own made Safari pick the
   most prominent colour inside it: the hero's sage button. Every stage states the page
   colour explicitly (background-color only, so gradients set elsewhere stay). */
.hero__stage, .worries__stage, .bar__stage, .attr__stage { background-color: var(--bg); }

/* =================================================== scroll-driven motion ===
   html.sda is set by app.js when the browser runs scroll-driven animations (Safari 26,
   Chrome). These replace the JS ticks for the big moving layers: the browser advances
   them on its scroll thread, so on iPhone they stay glued to the finger instead of
   landing a frame late. Each act names a view timeline; `contain` is exactly the pinned
   stretch (act top at viewport top -> act bottom at viewport bottom), i.e. the JS `p`. */
html.sda .hero { view-timeline: --sd-hero block; }
html.sda .bar { view-timeline: --sd-bar block; }
html.sda .attractions { view-timeline: --sd-attr block; }

html.sda :is(.hero__plane--back, .hero__plane--front, .hero__copy, .hero__beat p, .bar__photo img, .attr__rail, .attr__progress b) {
  animation-duration: auto; animation-fill-mode: both; animation-range: contain 0% contain 100%;
}
/* hero: the plate pushes in (eased like the JS camera), then dims into the dark */
html.sda .hero__plane--back {
  animation-name: sd-hero-push, sd-hero-dim;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1), linear;
  animation-timeline: --sd-hero, --sd-hero;
}
@keyframes sd-hero-push { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.18) translate3d(1.5%, -1.2%, 0); } }
@keyframes sd-hero-dim { 0%, 42% { opacity: 1; } 72%, 100% { opacity: .45; } }
/* desktop cutout: the count sheet slides past the lens and leaves bottom-left */
html.sda .hero__plane--front {
  animation-name: sd-hero-front, sd-hero-front-dim;
  animation-timing-function: cubic-bezier(.45, 0, .55, 1), linear;
  animation-timeline: --sd-hero, --sd-hero;
}
@keyframes sd-hero-front { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-16%, 42%, 0) scale(1.38); } }
@keyframes sd-hero-front-dim { 0%, 30% { filter: brightness(1); } 70%, 100% { filter: brightness(.5); } }
/* the headline lifts and goes; hidden (not just transparent) once gone so it stops taking taps */
html.sda .hero__copy { animation-name: sd-hero-copy; animation-timing-function: linear; animation-timeline: --sd-hero; }
@keyframes sd-hero-copy {
  0%, 18% { opacity: 1; transform: translate3d(0, 0, 0); }
  36% { visibility: visible; }
  37% { visibility: hidden; }
  48%, 100% { opacity: 0; transform: translate3d(0, -8vh, 0); visibility: hidden; }
}
/* the second beat lands, one line after the other */
html.sda .hero__beat p { animation-name: sd-beat-1; animation-timing-function: linear; animation-timeline: --sd-hero; }
html.sda .hero__beat p + p { animation-name: sd-beat-2; }
@keyframes sd-beat-1 { 0%, 50% { opacity: 0; transform: translate3d(0, 24px, 0); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes sd-beat-2 { 0%, 64% { opacity: 0; transform: translate3d(0, 24px, 0); } 80%, 100% { opacity: 1; transform: none; } }
/* bar: the macro settles from 1.14 to 1 across the pin */
html.sda .bar__photo img { animation-name: sd-bar-settle; animation-timing-function: linear; animation-timeline: --sd-bar; }
@keyframes sd-bar-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
/* attractions: the rail travels its measured overflow (--attr-over, set by JS once) */
html.sda .attr__rail { animation-name: sd-rail; animation-timing-function: linear; animation-timeline: --sd-attr; }
@keyframes sd-rail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--attr-over, 0px), 0, 0); } }
html.sda .attr__progress b { animation-name: sd-rail-bar; animation-timing-function: linear; animation-timeline: --sd-attr; }
@keyframes sd-rail-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }