/* ── Peach Club, self-hosted ──────────────────────────
   Converted from your OTFs to WOFF2 (about a third the
   size). The Rough and Ink cuts are in fonts/ too, but
   they're 200 KB+ each and the texture turns to mud at
   UI sizes, so nothing loads them by default.          */
@font-face{ font-family:"Peach Club Sans"; src:url("fonts/PeachClubSansBold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Peach Club Script"; src:url("fonts/PeachClubScript.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

/* ═══════════════════════════════════════════════════
   SWEET LANDING — shared styles
   White ground, brick red, cocoa brown, periwinkle sky.
   Red-and-white stripes carry the structure. No tan.
   ═══════════════════════════════════════════════════ */

:root{
  --brick:  #941704;   /* primary — buttons, ticker, CTA bands */
  --sky:    #80ABD8;   /* the light blue — big surfaces, footer, bands */
  --white:  #FFFFFF;   /* the page ground */
  --mist:   #EDF3F8;   /* the same blue, barely there */
  --cocoa:  #68362a;   /* brown, for body text only */
  --ink:    #3B1D14;   /* deepest brown — headings and the board */
  --brick-d:#6E1103;   /* the same red, deepened for small text on blue */
  --rose:   #E9A9A0;   /* pink, used sparingly */

  --display:"Peach Club Sans", system-ui, sans-serif;
  --script: "Peach Club Script", "Peach Club Sans", cursive;
  --body:   "Hanken Grotesk", system-ui, sans-serif;
  --mono:   "DM Mono", ui-monospace, monospace;

  --stripe: repeating-linear-gradient(90deg,
            var(--brick) 0 26px, var(--white) 26px 52px);

  --wrap:  1180px;
  --nav-h: 108px;
  --r:     20px;
  --soft:  0 16px 40px rgba(59,29,20,.10);
  --soft-lift: 0 24px 56px rgba(59,29,20,.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); }
body{
  margin:0; background:var(--white); color:var(--cocoa);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--brick); outline-offset:3px; border-radius:6px; }

/* ── type ─────────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--display); font-weight:700;
  line-height:1.06; letter-spacing:-.018em; margin:0; color:var(--ink);
}
h1{ font-size:clamp(2.5rem,6.2vw,4.5rem); }
h2{ font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-size:clamp(1.12rem,2vw,1.34rem); font-weight:700; letter-spacing:-.008em; }
p{ margin:0 0 1.05em; }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brick); margin:0 0 20px;
}
.eyebrow-quiet{ color:var(--cocoa); opacity:.55; }
.scr{ font-family:var(--script); font-weight:400; font-size:1.16em; letter-spacing:0; color:var(--brick); }
.lede{ font-size:clamp(1.05rem,1.8vw,1.22rem); max-width:58ch; opacity:.88; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── layout ───────────────────────────────────────── */
.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 44px, 820px); margin-inline:auto; }
.section{ padding:clamp(78px,11vw,142px) 0; }
.section-tight{ padding:clamp(54px,8vw,92px) 0; }

.band-mist{ background:var(--mist); }
.band-sky{ background:var(--sky); color:var(--ink); }
.band-sky .eyebrow{ color:var(--brick); }
.band-ink{ background:var(--sky); color:var(--ink); }
.band-brick{ background:var(--brick); color:var(--white); }
.band-ink h1,.band-ink h2,.band-ink h3,
.band-brick h1,.band-brick h2,.band-brick h3{ color:inherit; }
.band-brick .eyebrow{ color:var(--white); opacity:.82; }
.band-ink .eyebrow,.band-sky .eyebrow{ color:var(--brick-d); }
.band-ink .lede,.band-sky .lede{ opacity:.9; }
.band-brick .lede{ opacity:.88; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,82px); align-items:center; }
.split-wide{ grid-template-columns:1.05fr .95fr; }
@media (max-width:900px){ .split,.split-wide{ grid-template-columns:1fr; } }

/* ── stripes ──────────────────────────────────────── */
.awning{ height:32px; background:var(--stripe); position:relative; z-index:2; }
.awning::after{
  content:""; position:absolute; top:100%; left:0; right:0; height:15px;
  background:inherit;
  -webkit-mask-image:radial-gradient(circle 15px at 15px 0,#000 98%,transparent 100%);
  -webkit-mask-size:30px 15px; -webkit-mask-repeat:repeat-x;
  mask-image:radial-gradient(circle 15px at 15px 0,#000 98%,transparent 100%);
  mask-size:30px 15px; mask-repeat:repeat-x;
}

/* ── buttons ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--display); font-weight:700; font-size:1rem;
  padding:12px 30px; border-radius:100px; border:2px solid transparent;
  background:var(--brick); color:var(--white); text-decoration:none; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(148,23,4,.24);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(148,23,4,.3); }
.btn-ghost{ background:transparent; color:var(--cocoa); border-color:rgba(59,29,20,.3); box-shadow:none; }
.btn-ghost:hover{ background:rgba(59,29,20,.06); box-shadow:none; }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); box-shadow:none; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); box-shadow:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* ── nav ──────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.93); backdrop-filter:blur(14px); }
.nav-in{ height:var(--nav-h); display:flex; align-items:center; gap:30px; }
.nav::after{ content:""; display:block; height:7px; background:var(--stripe); }
.nav-links{ display:flex; gap:30px; margin-left:auto; font-size:.97rem; }
.nav-links a{ text-decoration:none; opacity:.74; padding:6px 0; transition:opacity .18s ease; }
.nav-links a:hover{ opacity:1; }
.nav-links a[aria-current="page"]{ opacity:1; font-weight:600; box-shadow:inset 0 -2px 0 var(--brick); }
.nav .btn{ padding:9px 22px; font-size:.92rem; }
.nav-check{ display:none; }
.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px;
  border:1.5px solid rgba(59,29,20,.28); border-radius:12px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--cocoa); transition:transform .22s ease, opacity .22s ease; }

@media (max-width:940px){
  .nav-check{ display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .nav-toggle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .nav-links{
    position:fixed; inset:calc(var(--nav-h) + 7px) 0 auto 0; flex-direction:column; gap:0;
    background:var(--white); padding:10px 22px 24px; margin:0; font-size:1.14rem;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .nav-links a{ padding:15px 0; border-bottom:1px solid rgba(59,29,20,.14); }
  .nav-links::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:7px; background:var(--stripe); }
  .nav-check:checked ~ .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-check:checked ~ .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-check:checked ~ .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-check:focus-visible ~ .nav-toggle{ outline:3px solid var(--brick); outline-offset:3px; }
  .nav-in > .btn{ display:none; }
}

/* ── logo ─────────────────────────────────────────── */
.mark{ display:block; text-decoration:none; flex:none; }
.mark img{ height:76px; width:auto; }
.foot .mark img{ height:112px; }
@media (max-width:520px){ .mark img{ height:54px; } .foot .mark img{ height:76px; } }

/* ── hero ─────────────────────────────────────────── */
.hero-home{ text-align:center; padding:clamp(46px,6.5vw,84px) 0 clamp(34px,4.5vw,58px); }
.hero-mark{ width:min(94%,680px); height:auto; margin:0 auto clamp(18px,2.6vw,32px); }
.hero-home h1{ max-width:20ch; margin-inline:auto; }
.hero-home .lede{ margin:22px auto 0; }
.hero-home .btn-row{ justify-content:center; }

.hero-shot{ view-timeline-name:--shot; overflow:hidden; height:clamp(260px,40vw,500px); }
.hero-shot img{ width:100%; height:124%; margin-top:-12%; object-fit:cover; display:block; }

.hero-page{ padding:clamp(62px,9vw,116px) 0 clamp(46px,6vw,78px); }
.hero-page h1{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.7rem,6.6vw,4.9rem); line-height:1.1; letter-spacing:0;
  max-width:17ch;
}
.hero-page .lede{ margin-top:22px; }

/* ── photo slots ──────────────────────────────────── */
.photo{
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  background:
    repeating-linear-gradient(45deg,rgba(59,29,20,.05) 0 12px,transparent 12px 24px),
    var(--mist);
  border:1px solid rgba(59,29,20,.16);
  display:grid; place-items:center; text-align:center; padding:24px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(59,29,20,.5);
}
.photo:has(img){ padding:0; border-color:transparent; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-tall{ aspect-ratio:3/4; }
.photo-wide{ aspect-ratio:16/9; }
.photo-bleed{ box-shadow:var(--soft); }

/* ── the departures board ─────────────────────────── */
.board{
  margin-top:48px; background:var(--ink); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--soft-lift); perspective:900px;
}
.board-top{
  display:flex; align-items:center; gap:12px; padding:15px 22px;
  background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.board-top .lamp{ width:8px; height:8px; border-radius:50%; background:var(--rose); flex:none; }
.board-top .now{ margin-left:auto; opacity:.6; letter-spacing:.14em; }
.board-row{
  display:grid; grid-template-columns:94px 1fr 72px 104px 104px; gap:14px; align-items:center;
  padding:0 22px; border-bottom:1px solid rgba(255,255,255,.07);
}
.board-row:last-child{ border-bottom:0; }
.board-head{ background:rgba(0,0,0,.28); }
.board-head .flip{
  font-size:.62rem; letter-spacing:.2em; color:rgba(255,255,255,.42);
  background:none; padding:11px 0; animation:none;
}
.flip{
  display:block; padding:14px 0; font-family:var(--mono); font-size:.88rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
  transform-origin:center top; backface-visibility:hidden;
}
.flip-dest{ font-size:.96rem; letter-spacing:.03em; }
.flip-go{ color:var(--rose); }
.flip-full{ color:rgba(255,255,255,.42); }
.flip-add{ padding:9px 0; }
.flip-add a{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); text-decoration:none;
  border:1px solid rgba(255,255,255,.38); border-radius:100px; padding:6px 13px;
  transition:background .18s ease, border-color .18s ease;
}
.flip-add a:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.7); }
.flip-add .add-off{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
}
@media (max-width:880px){
  .board-row{ grid-template-columns:80px 1fr 96px 100px; gap:12px; padding:0 15px; }
  .col-doors{ display:none; }
  .flip{ font-size:.78rem; }
  .flip-dest{ font-size:.84rem; }
}
@media (max-width:600px){
  .board-row{ grid-template-columns:60px 1fr 92px; gap:10px; padding:0 12px; }
  .col-status{ display:none; }
  .flip{ font-size:.72rem; }
  .flip-dest{ font-size:.78rem; }
  .flip-add a{ padding:5px 10px; font-size:.6rem; }
}

/* ── arrivals strip ───────────────────────────────── */
.strip{ background:var(--brick); color:var(--white); padding:15px 0; overflow:hidden; }
.strip-track{
  display:flex; gap:44px; width:max-content;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  animation:slide 46s linear infinite;
}
.strip-track span{ opacity:.86; white-space:nowrap; }
.strip-track .sep{ color:var(--white); opacity:.75; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.strip:hover .strip-track{ animation-play-state:paused; }

/* ── cards ────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px; }
.cards-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .cards{ grid-template-columns:repeat(2,1fr); } .cards-3{ grid-template-columns:1fr; } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--white); border:1px solid rgba(59,29,20,.13); border-radius:var(--r);
  padding:30px 28px 32px; box-shadow:var(--soft);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--soft-lift); }
.card .tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px; display:inline-block; margin-bottom:18px;
  background:var(--mist); color:var(--ink);
}
.card:nth-child(2) .tag{ background:rgba(128,171,216,.4); }
.card:nth-child(3) .tag{ background:rgba(233,169,160,.42); }
.card:nth-child(4) .tag{ background:rgba(104,54,42,.14); color:var(--cocoa); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:.96rem; opacity:.82; margin:0; }

/* ── steps ────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px; }
.step{ padding-top:calc(var(--i) * 34px); }
.step .alt{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brick); display:block; margin-bottom:14px;
}
.band-brick .step .alt{ color:var(--white); opacity:.85; }
.band-ink .step .alt,.band-sky .step .alt{ color:var(--brick-d); }
.step h3{ margin-bottom:10px; }
.step p{ font-size:.95rem; opacity:.84; margin:0; }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; gap:0; }
  .step{ padding:0 0 34px 30px; border-left:1px dashed rgba(59,29,20,.3); }
  .band-brick .step{ border-left-color:rgba(255,255,255,.3); }
  .band-ink .step,.band-sky .step{ border-left-color:rgba(59,29,20,.32); }
  .step:last-child{ border-left-color:transparent; padding-bottom:0; }
}

/* ── included list ────────────────────────────────── */
.included{
  list-style:none; padding:0; margin:44px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(59,29,20,.16); border:1px solid rgba(59,29,20,.16);
  border-radius:var(--r); overflow:hidden;
}
@media (max-width:760px){ .included{ grid-template-columns:1fr; } }
.included li{ background:var(--white); padding:26px 28px; }
.included .k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); display:block; margin-bottom:9px; }
.included strong{ display:block; font-family:var(--display); font-weight:700; font-size:1.14rem; color:var(--ink); margin-bottom:5px; }
.included p{ font-size:.94rem; opacity:.82; margin:0; }

.addons{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.addons li{ font-family:var(--mono); font-size:.76rem; padding:9px 16px; border-radius:100px; background:var(--white); border:1px solid rgba(59,29,20,.18); }

/* ── postcard ─────────────────────────────────────────
   Airmail border, stamp, postmark. The frame is the
   striped gradient; the card sits inside it.           */
.postcard{
  max-width:900px; margin:44px auto 0; padding:11px; border-radius:5px;
  transform:rotate(-1deg); box-shadow:0 22px 50px rgba(59,29,20,.17);
  background:repeating-linear-gradient(45deg,
    var(--brick) 0 11px, var(--white) 11px 22px, var(--sky) 22px 33px, var(--white) 33px 44px);
}
.pc-inner{
  background:var(--white); border-radius:2px; display:grid;
  grid-template-columns:1.25fr 1fr; gap:0;
}
.pc-msg{ padding:clamp(26px,3.4vw,44px); }
.pc-hi{
  font-family:var(--script); font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--brick); line-height:1; margin:0 0 18px;
}
.pc-msg p{ font-size:1rem; line-height:1.72; margin:0 0 .95em; }
.pc-sign{
  font-family:var(--script); font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--brick); line-height:1; margin:22px 0 0 !important;
}
.pc-side{
  padding:clamp(24px,3vw,36px); border-left:1px solid rgba(59,29,20,.22);
  display:flex; flex-direction:column; gap:22px;
}
.pc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pc-mark{
  width:92px; height:92px; flex:none; border:2px solid rgba(148,23,4,.45); border-radius:50%;
  display:grid; place-items:center; align-content:center; transform:rotate(-13deg);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(148,23,4,.7); text-align:center; line-height:1.7;
}
.pc-stamp{
  width:78px; flex:none; aspect-ratio:4/5; background:var(--sky); padding:9px;
  border:4px solid var(--white); outline:1px dashed rgba(59,29,20,.4); outline-offset:-7px;
  transform:rotate(4deg); display:grid; place-items:center; align-content:center; gap:4px;
}
.pc-stamp img{ width:34px; height:34px; }
.pc-stamp span{
  font-family:var(--mono); font-size:.42rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-align:center; line-height:1.3;
}
.pc-to{ margin-top:auto; }
.pc-to span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brick); display:block; margin-bottom:10px;
}
.pc-to p{ margin:0; font-size:.96rem; line-height:2.1; background:repeating-linear-gradient(
  to bottom, transparent 0 calc(2.1em - 1px), rgba(59,29,20,.2) calc(2.1em - 1px) 2.1em); }
@media (max-width:760px){
  .postcard{ transform:none; }
  .pc-inner{ grid-template-columns:1fr; }
  .pc-side{ border-left:0; border-top:1px dashed rgba(59,29,20,.28); }
}

/* ── calendar ─────────────────────────────────────── */
.cal-frame{ background:var(--white); border:1px solid rgba(59,29,20,.13); border-radius:var(--r); padding:14px; box-shadow:var(--soft); margin-top:44px; }
.cal-frame iframe{ width:100%; height:640px; border:0; border-radius:calc(var(--r) - 8px); display:block; }
@media (max-width:640px){ .cal-frame iframe{ height:520px; } .cal-frame{ padding:8px; } }
.cal-note{ font-size:.9rem; opacity:.72; margin-top:20px; }

/* ── faq ──────────────────────────────────────────── */
.faq-group{ margin-top:56px; }
.faq-group h2{
  font-family:var(--script); font-weight:400; letter-spacing:0;
  font-size:clamp(1.7rem,3.1vw,2.3rem); line-height:1.15;
  margin-bottom:10px; color:var(--brick);
}
details{ border-bottom:1px solid rgba(59,29,20,.2); }
summary{
  cursor:pointer; list-style:none; padding:23px 44px 23px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:clamp(1.02rem,1.9vw,1.16rem); color:var(--ink);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--brick); border-bottom:2px solid var(--brick);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
details > p{ padding:0 0 26px; margin:0; max-width:64ch; opacity:.86; }

/* ── cta ──────────────────────────────────────────── */
.cta{ text-align:center; }
.cta h2{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.14; letter-spacing:0;
  max-width:20ch; margin-inline:auto;
}
.cta .lede{ margin:20px auto 0; text-align:center; }
.cta .btn-row{ justify-content:center; }

/* ── footer ───────────────────────────────────────── */
.foot{ background:var(--sky); color:var(--ink); padding:66px 0 34px; }
.foot-in{ display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start; }
.foot-brand{ margin-right:auto; max-width:32ch; }
.foot-brand p{ opacity:.88; margin-top:16px; font-size:.95rem; }
.foot-col{ display:flex; flex-direction:column; gap:10px; font-size:.95rem; }
.foot-col .k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brick-d); margin-bottom:4px; }
.foot a{ text-decoration:none; opacity:.9; }
.foot a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.foot-base{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(59,29,20,.24);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; opacity:.82;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
}

/* ── motion ───────────────────────────────────────────
   Scroll-driven, no JS. Visible by default; animates only
   where supported, so nothing gets stuck invisible.      */
@keyframes rise-in{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes par-drift{ from{ transform:translateY(-6%); } to{ transform:translateY(10%); } }
@keyframes flap-in{
  0%{ transform:rotateX(-90deg); opacity:0; }
  70%{ transform:rotateX(10deg); opacity:1; }
  100%{ transform:rotateX(0); opacity:1; }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rise{ animation:rise-in linear both; animation-timeline:view(); animation-range:entry 8% entry 62%; }
    .par{ animation:par-drift linear both; animation-timeline:--shot; animation-range:cover 0% cover 100%; will-change:transform; }
    .board-row:not(.board-head) .flip{
      animation:flap-in linear both; animation-timeline:view(); animation-range:entry 6% entry 46%;
    }
    .board-row:nth-of-type(3) .flip{ animation-range:entry 10% entry 50%; }
    .board-row:nth-of-type(4) .flip{ animation-range:entry 14% entry 54%; }
    .board-row:nth-of-type(5) .flip{ animation-range:entry 18% entry 58%; }
    .board-row:nth-of-type(6) .flip{ animation-range:entry 22% entry 62%; }
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .strip-track{ animation:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── candy bands ──────────────────────────────────────
   Decorative rows that live BETWEEN sections, never over
   copy. Purely ornamental: aria-hidden, and they collapse
   on phones where there isn't room to scatter anything.  */
.candy-band{ position:relative; height:130px; overflow:hidden; background:var(--white); }
.candy-band.on-mist{ background:var(--mist); }
.candy-band.on-sky{ background:var(--sky); }
.candy-band .candy{
  position:absolute; top:50%; left:var(--cx,50%);
  width:var(--cw,62px); height:auto; pointer-events:none;
  transform:translate(-50%,-50%) translateY(var(--cy,0px)) rotate(var(--cr,0deg));
}
@keyframes bob{
  from{ transform:translate(-50%,-50%) translateY(var(--cy,0px)) rotate(var(--cr,0deg)); }
  to  { transform:translate(-50%,-50%) translateY(calc(var(--cy,0px) - 11px)) rotate(var(--cr,0deg)); }
}
@media (prefers-reduced-motion: no-preference){
  .candy-band .candy{ animation:bob var(--cd,8s) ease-in-out infinite alternate; }
}
@media (max-width:900px){ .candy-band{ height:96px; } .candy-band .candy{ width:calc(var(--cw,62px) * .78); } }
@media (max-width:600px){ .candy-band{ height:74px; } .candy-band .candy{ width:calc(var(--cw,62px) * .6); } }

/* ── ticker flags ─────────────────────────────────── */
.strip-track .tick{ display:inline-flex; align-items:center; gap:11px; white-space:nowrap; }
.strip-track .tick img{ width:27px; height:18px; border-radius:3px; flex:none; }