/* ============================================================
   COMPONENTS — shared UI
   buttons · bottom dock nav · cards · marquee · countdown ·
   forms · progress · footer
   Elevation: none on chrome. One shadow (--shadow-image) for
   imagery resting on a surface only.
   ============================================================ */

html{scroll-padding-bottom:104px;scroll-padding-top:16px}

/* ---------- GLASS (frosted panel over imagery — see docs/design-glassmorphism.md) ---------- */
.glass{
  background:color-mix(in srgb, var(--c-tile-void) 55%, transparent);   /* fallback: opaque-ish */
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  color:var(--glass-ink);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
  }
  .glass:hover{background:var(--glass-bg-strong)}
}

/* frosted content panel on the page ground (readable text) */
.glass-panel{
  background:var(--c-surface);                       /* fallback: opaque */
  border:1px solid var(--glass-panel-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-panel-shadow);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-panel{
    background:var(--glass-panel-bg);
    backdrop-filter:var(--glass-panel-blur);
    -webkit-backdrop-filter:var(--glass-panel-blur);
  }
}

/* ---------- BUTTON — glass surface + glow on hover / press ---------- */
.btn{
  --btn-bg:var(--c-primary);
  --btn-fg:var(--c-on-primary);
  --btn-glow:var(--c-primary);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  position:relative;
  font-family:var(--font-body);font-weight:var(--weight-semi);
  font-size:var(--fs-base);line-height:1;
  min-height:44px;                          /* accessible touch target */
  padding:.72rem 1.4rem;border:0;border-radius:var(--r-pill);
  color:var(--btn-fg);background:var(--btn-bg);
  text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             background var(--dur-2), border-color var(--dur-2),
             filter var(--dur-2), opacity var(--dur-2);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn{backdrop-filter:saturate(1.4);-webkit-backdrop-filter:saturate(1.4)}
}
.btn:hover{
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 8px 28px -6px color-mix(in srgb, var(--btn-glow) 62%, transparent),
             0 0 18px color-mix(in srgb, var(--btn-glow) 40%, transparent);
}
.btn:active{
  transform:var(--press);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 4px 34px -4px color-mix(in srgb, var(--btn-glow) 78%, transparent),
             0 0 26px color-mix(in srgb, var(--btn-glow) 56%, transparent);
}
.btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

.btn--gold{
  --btn-bg:var(--c-primary);   /* one interactive colour — crimson carries every CTA */
  isolation:isolate;overflow:hidden;
  transition:color var(--dur-3) var(--ease-out),
             transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
/* the one deliberately "expensive" motion moment on the site: a gold
   sweep fills in from the left on hover, text stays legible above it
   the whole way — slow and sure, not a snap-on hover state */
.btn--gold::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--c-gold);
  transform:translateX(-102%);
  transition:transform var(--dur-5) var(--ease-out);
}
.btn--gold:hover::before,
.btn--gold:focus-visible::before{transform:translateX(0)}
.btn--gold:hover,
.btn--gold:focus-visible{color:var(--ink-on-tint)}
@media (prefers-reduced-motion:reduce){
  .btn--gold::before{transition:none}
}
.btn--lg{padding:.9rem 1.75rem;font-size:1.06rem;font-weight:var(--weight-light)}
.btn--block{width:100%}
.btn--pill-ghost{
  --btn-bg:color-mix(in srgb, var(--c-primary) 8%, transparent);
  --btn-fg:var(--c-primary-ink);
  border:1px solid currentColor;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn--pill-ghost,.btn--ghost{backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3)}
}
.btn--ghost{           /* on dark tiles */
  --btn-bg:rgba(255,255,255,.06);--btn-fg:var(--c-on-dark);--btn-glow:#ffffff;
  border:1px solid rgba(255,255,255,.4);
}
.btn--ghost:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 28px -6px rgba(255,255,255,.18),0 0 16px rgba(255,255,255,.14)}
.btn--utility{
  --btn-bg:var(--c-ink);--btn-fg:var(--c-on-dark);--btn-glow:var(--c-ink);
  border-radius:var(--r-sm);padding:.5rem .9rem;font-size:var(--fs-sm);font-weight:var(--weight-reg);
}
@media (prefers-reduced-motion:reduce){ .btn:active{transform:none} }

/* ============================================================
   BOTTOM DOCK NAVIGATION
   Floating capsule pinned to the bottom. Minimises (labels
   collapse, capsule contracts) while the page scrolls DOWN,
   springs back open on scroll UP or near the top.
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:300;
  /* layout-centred: width follows the content, margin auto keeps it centred
     as labels collapse — no translateX to drift during the animation */
  width:-moz-fit-content;width:fit-content;margin-inline:auto;
  max-width:calc(100vw - 24px);
  transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3);
}
.dock__inner{
  display:flex;align-items:center;gap:.35rem;
  padding:.4rem .5rem;
  background:color-mix(in srgb, var(--c-surface) 78%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--c-line);
  border-radius:var(--r-pill);
  box-shadow:0 8px 40px -12px rgba(20,12,30,.35);
  transition:padding var(--dur-3) var(--ease-spring), gap var(--dur-3) var(--ease-spring);
}
.dock__brand{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .5rem .45rem .7rem;text-decoration:none;color:var(--c-ink);
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:.98rem;letter-spacing:var(--track-tight);
  flex:none;
}
.dock__brand b{color:var(--c-primary-ink)}
.dock__mark{width:22px;height:22px;color:var(--c-primary-ink);flex:none}

.dock__links{display:flex;align-items:center;gap:.1rem;position:relative}
.dock__link{position:relative;z-index:1}
.dock__indicator{
  position:absolute;left:0;bottom:3px;height:2px;width:0;z-index:0;
  border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--c-gold),var(--c-primary));
  transition:transform .34s var(--ease-spring),width .34s var(--ease-spring),opacity .2s var(--ease-out);
}
.dock__link{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem .7rem;border-radius:var(--r-pill);
  color:var(--c-ink-soft);text-decoration:none;font-weight:var(--weight-semi);font-size:.92rem;
  white-space:nowrap;
  transition:background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.dock__link svg{width:18px;height:18px;flex:none}
.dock__link:hover{color:var(--c-primary-ink);background:color-mix(in srgb,var(--c-primary) 9%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c-primary) 30%,transparent)}
.dock__link[aria-current]{color:var(--c-primary-ink);background:color-mix(in srgb,var(--c-primary) 14%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--c-primary) 34%,transparent)}
.dock__link:active{background:color-mix(in srgb,var(--c-primary) 20%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--c-primary) 48%,transparent)}

/* the collapsing label — the signature dock animation */
.dock__label{
  display:inline-block;overflow:hidden;white-space:nowrap;
  flex:0 1 auto;min-width:0;max-width:180px;
  opacity:1;
  transition:max-width var(--dur-3) var(--ease-spring),
             flex-basis var(--dur-3) var(--ease-spring),
             opacity var(--dur-2) var(--ease-out),
             margin var(--dur-3) var(--ease-spring);
}
.dock__cta{flex:none;margin-left:.15rem}
.dock__cta-icon{width:16px;height:16px;display:block;flex:none}
@media (max-width:1024px){
  .dock__cta{width:44px;height:44px;padding:0}
}

.dock__more,.theme-toggle{
  background:none;border:1px solid var(--c-line);border-radius:var(--r-pill);
  width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;color:var(--c-ink-soft);
  transition:border-color var(--dur-2), color var(--dur-2), transform var(--dur-2);
}
.theme-toggle:active{transform:var(--press)}
.dock__more-wrap{position:relative;flex:none}
/* pages without `primary:true` in site.config.js never sit directly
   on the bar — they only ever live inside this dropdown, at every
   screen size, not just when space runs out on a phone */
[data-dock-secondary]{display:none}
.dock__more-menu{
  position:absolute;right:0;bottom:calc(100% + 10px);z-index:1;
  flex-direction:column;gap:.15rem;min-width:180px;
  padding:.4rem;border-radius:var(--r-md);
  background:var(--c-surface);border:1px solid var(--c-line);
  box-shadow:0 12px 34px -10px rgba(20,12,30,.35);
}
.dock__more-menu:not([hidden]){display:flex}
.dock__more-link{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .7rem;border-radius:var(--r-sm);
  color:var(--c-ink-soft);text-decoration:none;font-weight:var(--weight-semi);font-size:.92rem;
  min-height:44px;
}
.dock__more-link svg{width:18px;height:18px;flex:none}
.dock__more-link:hover,.dock__more-link:focus-visible{color:var(--c-primary-ink);background:color-mix(in srgb,var(--c-primary) 9%,transparent)}
.dock__more-link[aria-current]{color:var(--c-primary-ink);background:color-mix(in srgb,var(--c-primary) 14%,transparent)}
/* the language toggle lives ONLY in the "More" dropdown, at every
   screen size — no separate circle out on the bar itself (see
   .lang-toggle--bar below, permanently hidden) */
.dock__more-lang{display:flex;width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left}
.dock__more-credit-icon{position:relative;display:inline-flex;flex:none}
.dock__more-credit-dot{
  position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--c-primary-ink);border:2px solid var(--c-surface);
  animation:footer-dot-pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .dock__more-credit-dot{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 30%,transparent)}
}
.lang-toggle--bar{display:none}

/* ---- minimised state (scrolling down) — scale from the centre ---- */
.dock{transform-origin:bottom center}
.dock[data-min]{transform:scale(.92)}
.dock[data-min] .dock__inner{padding:.3rem .34rem;gap:.15rem}
.dock[data-min] .dock__label{max-width:0;flex-basis:0;opacity:0;margin:0 !important}
.dock[data-min] .dock__brand{padding-inline:.45rem}
/* collapse the icon↔label gap when minimised so the highlight pill
   sits centred on the icon (not pushed right by the empty label slot) */
.dock[data-min] .dock__link{padding:.5rem;gap:0;justify-content:center}
.dock[data-min] .dock__cta{gap:0;padding-inline:.72rem}

@media (prefers-reduced-motion:reduce){
  .dock,.dock[data-min]{transform:none}
  .dock *{transition:none !important}
}

/* ---- responsive dock ---- */
@media (max-width:1024px){
  .dock{left:12px;right:12px;width:auto;margin:0;max-width:none}
  .dock[data-min]{transform:scale(.985)}
  .dock__inner{justify-content:space-between}
  .dock__links{flex:1;justify-content:space-around}
  .dock__label{max-width:0;flex-basis:0;opacity:0;margin:0}   /* icon-only on mobile */
  .dock__link{gap:0;justify-content:center;min-width:44px;min-height:44px}   /* accessible touch target, icon-only */
  .dock__cta{gap:0;padding:.6rem .9rem}
  .dock__brand span{display:none}
}
/* (the mark used to be hidden under 380px, with the Home icon as the way
   back; Home is off the dock now — site.config.js dock:false — so the
   mark stays at every width, in the space Home used to take) */
/* narrow phones: even just the primary 4 icons + More + the Donate
   pill + the theme toggle don't quite fit an ~350px-wide dock with
   room to spare — tighten the spacing first, then ease every icon
   control down together, by the same amount, so nothing in the row
   reads as bigger or smaller than its neighbours. (The language
   toggle is already out of this row entirely, at every width — see
   .lang-toggle--bar above.) */
@media (max-width:430px){
  .dock__inner{padding:.32rem .3rem;gap:0}
  .dock__links{gap:0}
}
@media (max-width:400px){
  .dock__link,.dock__cta,.dock__more,.theme-toggle{width:40px;height:40px;min-width:40px;min-height:40px}
}
/* the theme toggle is a nice-to-have override of the system preference
   the site already follows automatically — on the smallest phones it's
   the one thing dropped entirely (not shrunk out of step with the rest) */
@media (max-width:340px){
  .theme-toggle{display:none}
}
.lang-toggle{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.02em}

/* ---------- CARD (flat surface + hairline — Apple rigour) ---------- */
.card{
  --accent:var(--c-primary);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-lift);
  transition:transform var(--dur-3) var(--ease-out),
             border-color var(--dur-3) var(--ease-out),
             box-shadow var(--dur-3) var(--ease-out);
}
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--c-line));
  box-shadow:var(--shadow-lift-hover);
}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card__icon{
  width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  margin-bottom:var(--sp-4);
}
.card__icon svg{width:23px;height:23px}
.card h3{color:var(--c-ink)}
.card p{color:var(--c-ink-soft);font-size:var(--fs-sm);margin-top:.35rem}
.card .btn{margin-top:var(--sp-4);font-size:var(--fs-sm);padding:.6rem 1.1rem}
.card--games{--accent:var(--c-rose)}
.card--food{--accent:var(--c-gold)}
.card--movies{--accent:var(--c-teal)}
.card--kids{--accent:var(--c-primary)}
.tile--c .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.tile--c .card:hover{border-color:rgba(255,255,255,.28)}
.tile--c .card h3{color:var(--c-on-dark)}
.tile--c .card p{color:var(--c-on-dark-soft)}

/* ---------- MARQUEE (void strip) ---------- */
.marquee{
  overflow:hidden;background:var(--c-tile-void);color:var(--c-on-dark);
  padding-block:13px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex;gap:2.4rem;width:max-content;
  font-family:var(--font-display);font-weight:var(--weight-semi);white-space:nowrap;
  animation:marquee-scroll var(--marquee-dur,28s) linear infinite;
}
.marquee__item{display:inline-flex;align-items:center;gap:.7rem;color:var(--c-on-dark-soft);font-size:.96rem}
.marquee__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-gold);flex:none}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;white-space:normal;width:auto;justify-content:center;gap:1rem 2rem}
}

/* ---------- COUNTDOWN (theme-neutral) ---------- */
.countdown__label{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-mute);
}
.countdown__grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.countdown__cell{
  min-width:78px;text-align:center;border-radius:var(--r-md);padding:.75rem .9rem;
  background:var(--c-surface);border:1px solid var(--c-line);
}
.countdown__num{
  display:block;font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--c-ink);letter-spacing:var(--track-tight);
}
.countdown__unit{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c-ink-mute);
}
.countdown__num.is-flip{animation:digit-flip .45s var(--ease-out)}

/* ---- Doomsday countdown — the stark "mission-clock" read from the
   Doomsday countdown reference: plain glowing digits with colon
   separators, no boxed cells, a small ambient pulse behind the whole
   strip, and the seconds digit picked out as the one visibly ticking.
   Scoped to the year theme, same as the palette — reverts with
   everything else next year. ---- */
[data-year-theme="doomsday"] .countdown{position:relative}
[data-year-theme="doomsday"] .countdown::before{
  content:"";position:absolute;inset:-28px -18px;z-index:-1;border-radius:var(--r-lg);
  background:radial-gradient(60% 100% at 50% 50%, color-mix(in srgb,var(--c-primary) 18%,transparent), transparent 72%);
  filter:blur(20px);pointer-events:none;
  animation:doomsday-pulse 3.2s ease-in-out infinite;
}
@keyframes doomsday-pulse{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}
[data-year-theme="doomsday"] .countdown__grid{gap:0}
[data-year-theme="doomsday"] .countdown__cell{
  background:none;border:0;padding:0 .4rem;min-width:auto;
}
[data-year-theme="doomsday"] .countdown__num{
  color:var(--c-on-dark);
  text-shadow:0 0 22px color-mix(in srgb,var(--c-primary) 45%,transparent);
}
[data-year-theme="doomsday"] .countdown__label,
[data-year-theme="doomsday"] .countdown__unit{color:var(--c-on-dark-soft)}
/* colon between segments, hung off the number itself so it never
   drops to its own line when the strip wraps */
[data-year-theme="doomsday"] .countdown__cell:not(:last-child) .countdown__num::after{
  content:":";display:inline-block;margin-left:.14em;
  color:var(--c-primary-on-dark);opacity:.75;
}
/* the seconds digit is the one visibly "alive" */
[data-year-theme="doomsday"] .countdown__cell:last-child .countdown__num{
  color:var(--c-primary-on-dark);
  animation:doomsday-tick 1s steps(1) infinite;
}
@keyframes doomsday-tick{
  0%,90%{text-shadow:0 0 22px color-mix(in srgb,var(--c-primary) 45%,transparent)}
  95%{text-shadow:0 0 34px color-mix(in srgb,var(--c-primary) 95%,transparent)}
}
/* every digit gets a brief green flash on change, on top of the
   existing site-wide flip — a "signal tick", not a colour change */
[data-year-theme="doomsday"] .countdown__num.is-flip{
  animation:digit-flip .45s var(--ease-out), doomsday-flash .6s var(--ease-out);
}
@keyframes doomsday-flash{
  0%{text-shadow:0 0 26px color-mix(in srgb,var(--c-primary) 90%,transparent)}
  100%{text-shadow:0 0 22px color-mix(in srgb,var(--c-primary) 45%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  [data-year-theme="doomsday"] .countdown::before,
  [data-year-theme="doomsday"] .countdown__cell:last-child .countdown__num{animation:none}
  [data-year-theme="doomsday"] .countdown__num.is-flip{animation:none}
}
/* the moment the clock hits zero — a bigger, glowing "it's here" beat
   instead of quietly swapping to plain text */
[data-year-theme="doomsday"] .countdown.is-open .countdown__label{
  color:var(--c-primary-ink);font-size:1.05rem;letter-spacing:.04em;
  text-transform:none;font-family:var(--font-display);font-weight:var(--weight-bold);
  animation:doomsday-arrived 2.2s ease-in-out infinite;
}
@keyframes doomsday-arrived{
  0%,100%{text-shadow:0 0 18px color-mix(in srgb,var(--c-primary) 55%,transparent)}
  50%{text-shadow:0 0 34px color-mix(in srgb,var(--c-primary) 95%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  [data-year-theme="doomsday"] .countdown.is-open .countdown__label{animation:none}
}

/* ---------- FORM CONTROLS ---------- */
.field{
  display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--glass-panel-border);border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--c-surface) 70%, transparent);
  padding:.35rem 1.1rem;height:48px;
  transition:border-color var(--dur-2), background var(--dur-2);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .field{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
.field:focus-within{border-color:var(--c-primary);background:var(--c-surface)}
.field__reveal{
  flex:none;background:none;border:0;cursor:pointer;padding:.25rem .35rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-ink-mute);
}
.field__reveal:hover{color:var(--c-primary-ink)}
.field__prefix{font-weight:var(--weight-semi);color:var(--c-ink-mute)}
.field input{border:0;background:none;font:inherit;font-size:var(--fs-base);color:var(--c-ink);width:100%;outline:none}

.chip-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chip{
  font-family:var(--font-display);font-weight:var(--weight-semi);font-size:1rem;
  padding:.8rem .5rem;border-radius:var(--r-pill);border:1px solid var(--c-line);
  background:var(--c-surface);color:var(--c-ink);cursor:pointer;
  transition:border-color var(--dur-1),background var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-2);
}
.chip:hover{border-color:var(--c-primary);box-shadow:0 0 14px color-mix(in srgb,var(--c-primary) 26%,transparent)}
.chip:active{transform:var(--press)}
.chip[aria-pressed="true"]{background:var(--c-primary);color:#fff;border-color:var(--c-primary);box-shadow:0 4px 20px -4px color-mix(in srgb,var(--c-primary) 55%,transparent),0 0 16px color-mix(in srgb,var(--c-primary) 38%,transparent)}

/* ---------- FORM: text field + checkbox + status ---------- */
.field--text{padding-block:0}
.field--text input{padding-block:.85rem}
.donate-check{
  display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 1.2rem;
  font-size:var(--fs-sm);color:var(--c-ink-soft);cursor:pointer;line-height:1.4;
}
.donate-check input{margin-top:.15rem;accent-color:var(--c-primary);flex:none}
.donate-check em{color:var(--c-ink-mute);font-style:normal}
.donate-status{
  margin-top:.8rem;font-size:var(--fs-sm);font-weight:var(--weight-semi);
  padding:.6rem .9rem;border-radius:var(--r-md);
  background:var(--c-parchment);color:var(--c-ink-soft);
}
.donate-status[data-kind="ok"]{background:color-mix(in srgb,var(--c-teal) 16%,transparent);color:var(--c-teal)}
.donate-status[data-kind="warn"]{background:color-mix(in srgb,var(--c-gold) 16%,transparent);color:var(--c-gold)}
.donor-total{margin-top:.5rem;font-size:var(--fs-sm);color:var(--c-ink-soft)}
.donor-total strong{color:var(--c-ink)}

/* ---------- SUPPORTERS WALL (names only) ---------- */
.donor-wall{
  margin-top:1.5rem;padding:1.15rem 1.15rem 1.3rem;
}
.donor-wall__count{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:var(--weight-semi);letter-spacing:.02em;
  color:var(--c-ink-soft);text-transform:none;margin-bottom:.9rem;
}
.donor-wall__count svg{color:var(--c-rose)}
.donor-wall__count b{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.05rem;
  color:var(--c-ink);
}
.donor-wall__viewport{position:relative}
.donor-wall__track{
  display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0;align-content:flex-start;
}
.donor-wall__viewport.is-scrolling{
  height:196px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
}
.donor-wall__viewport.is-scrolling .donor-wall__track{
  animation:donor-scroll var(--donor-dur,60s) linear infinite;
}
.donor-wall__viewport.is-scrolling:hover .donor-wall__track{animation-play-state:paused}
@keyframes donor-scroll{ to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce){
  .donor-wall__viewport.is-scrolling{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .donor-wall__viewport.is-scrolling .donor-wall__track{animation:none}
}
.donor-chip{
  --dc:var(--c-rose);
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .85rem;border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--dc) 9%, var(--glass-panel-bg));
  border:1px solid color-mix(in srgb, var(--dc) 30%, transparent);
  font-size:.9rem;font-weight:var(--weight-semi);color:var(--c-ink);white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.donor-chip svg{color:var(--dc);flex:none}
.donor-wall__empty{
  color:var(--c-ink-mute);font-family:var(--font-mono);font-size:.82rem;
  padding:1.1rem .3rem;margin:0;
}

/* ---------- QUANTITY STEPPER ---------- */
.qty{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0 1.3rem;flex-wrap:wrap}
.qty__btn{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-panel-border);background:var(--c-surface);
  color:var(--c-primary-ink);font-size:1.4rem;font-weight:var(--weight-bold);line-height:1;
  display:grid;place-items:center;transition:transform var(--dur-1),border-color var(--dur-2),box-shadow var(--dur-2);
}
.qty__btn:hover:not(:disabled){border-color:var(--c-primary-ink);box-shadow:0 0 14px color-mix(in srgb,var(--c-primary) 30%,transparent)}
.qty__btn:active:not(:disabled){transform:var(--press);box-shadow:0 0 20px color-mix(in srgb,var(--c-primary) 48%,transparent)}
.qty__btn:disabled{opacity:.4;cursor:not-allowed}
.qty__n{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.9rem;
  min-width:1.6ch;text-align:center;color:var(--c-ink);font-variant-numeric:tabular-nums;
}
.qty__total{font-size:var(--fs-sm);color:var(--c-ink-mute);font-family:var(--font-mono)}

/* ---------- PRIZES ---------- */
.prizes-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.prize{
  --dc:var(--c-gold);
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  padding:.85rem 1.1rem;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--dc) 8%, var(--glass-panel-bg));
  border:1px solid color-mix(in srgb, var(--dc) 28%, transparent);
}
.prize__place{
  font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1rem;
  color:var(--dc);white-space:nowrap;
}
.prize__detail{color:var(--c-ink-soft);font-size:var(--fs-sm)}

/* ---------- PROGRESS ---------- */
.progress{height:12px;border-radius:var(--r-pill);background:color-mix(in srgb,currentColor 14%,transparent);overflow:hidden}
.progress__fill{height:100%;width:0;border-radius:var(--r-pill);background:var(--accent-text);transition:width 1.3s var(--ease-out)}

/* ---------- FOOTER (parchment, dense links) ---------- */
.footer{background:var(--c-parchment);color:var(--c-ink-mute);padding-block:64px 40px}
.footer__grid{display:grid;gap:32px 48px;grid-template-columns:1.3fr 1.5fr 1fr;align-items:start}
/* the page list flows into two even columns, so the footer doesn't lean on one long list */
.footer__links{columns:2;column-gap:32px}
.footer__links a{break-inside:avoid}
.footer .dock__brand{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--c-ink);
  font-family:var(--font-display);font-weight:var(--weight-bold);text-decoration:none;font-size:1.05rem;
}
.footer .footer__brand{
  display:inline-block;color:var(--c-ink);   /* plain text + a coloured <b> — no icon, no gap */
  font-family:var(--font-display);font-weight:var(--weight-bold);text-decoration:none;font-size:1.05rem;
}
.footer__brand b{color:var(--c-gold)}
.footer__blurb{margin-top:.7rem;max-width:34ch;font-size:var(--fs-sm);color:var(--c-ink-mute)}
.footer .footer__org{
  display:inline-flex;align-items:center;gap:.8rem;margin-top:1.3rem;
  text-decoration:none;color:var(--c-ink-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.footer__org:hover{color:var(--c-primary-ink)}
.footer__org-logo{height:40px;width:auto;display:block}
:root:not([data-theme="light"]) .footer__org-logo,
:root[data-theme="dark"] .footer__org-logo{filter:invert(1) brightness(1.6)}
.footer h4{
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--weight-semi);
  letter-spacing:-.02em;color:var(--c-ink-soft);margin-bottom:.5rem;
}
.footer a{color:var(--c-ink-soft);text-decoration:none;display:block;line-height:var(--lh-dense-link);font-size:var(--fs-base)}
.footer a:active{color:var(--c-primary-ink)}
/* one full-width bottom row: small print · credit · staff line */
.footer__bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--c-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;
}
.footer__fine{margin:0;font-size:var(--fs-xs);color:var(--c-ink-mute)}
.footer__staff{
  margin:0;order:3;white-space:nowrap;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--c-ink-mute);
}
.footer__staff a,.footer__staff-btn{display:inline;line-height:inherit;
  color:var(--c-ink-mute);text-decoration:underline;text-underline-offset:2px;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;
}
.footer__staff a:hover,.footer__staff-btn:hover{color:var(--c-primary-ink)}
/* a literal crack in the footer, not another button — the message
   is always fully visible (no hover-only reveal, which touch devices
   can't do), and a small pulsing dot does the "notice me" job that
   app unread-badges already train every phone user to read at a
   glance. The crack background still brightens on hover as a bonus
   for mouse users, but nothing functional depends on it. */
.footer .footer__secret{
  font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;background:none;border:0;
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  margin:0;order:2;padding:.8rem 1.1rem;border-radius:var(--r-md);
  text-decoration:none;overflow:hidden;isolation:isolate;
}
.footer__secret::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='40'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 20 L20 18 L35 24 L55 15 L75 22 L95 13 L115 20 L135 11 L155 22 L175 15 L195 24 L215 13 L235 20 L255 15 L275 22 L300 18' fill='none' stroke='%232fa872' stroke-width='3' stroke-opacity='0.5' filter='url(%23b)'/%3E%3Cpath d='M0 20 L20 18 L35 24 L55 15 L75 22 L95 13 L115 20 L135 11 L155 22 L175 15 L195 24 L215 13 L235 20 L255 15 L275 22 L300 18' fill='none' stroke='%23ddae4c' stroke-width='1.2' stroke-opacity='0.85'/%3E%3C/svg%3E") repeat-x;
  background-size:300px 40px;background-position:center;
  opacity:.4;transform:scaleY(1);
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-spring);
}
.footer__secret:hover::before,.footer__secret:focus-visible::before{
  opacity:.9;transform:scaleY(1.8);
}
/* the pulsing dot — a notification-badge ring expanding and fading,
   on an infinite loop so it reads as "live" on any device, no
   interaction required */
.footer__secret-dot{
  position:relative;flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--c-primary-ink);
  animation:footer-dot-pulse 2.4s ease-out infinite;
}
@keyframes footer-dot-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-primary) 55%,transparent)}
  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--c-primary) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-primary) 0%,transparent)}
}
.footer__secret-text{
  position:relative;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;
  color:var(--c-ink-soft);
}
.footer__secret-text b{color:var(--c-primary-ink);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .footer__secret::before{transition:none}
  .footer__secret-dot{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 30%,transparent)}
}
/* "Austin" as a hand-written signature inside the credit line: its gold outline
   draws itself once when the footer is first seen, then it fills in and stays */
.footer__secret-text{display:inline-flex;align-items:center;gap:.35em}
.footer__sign-name{display:inline-block;height:3em;width:auto;margin:-1.05em 0 -.95em;overflow:visible;vertical-align:middle}
.footer__sign-name path{fill:none;stroke:var(--c-gold);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
/* the pen nib that glides along the signature, and its ink sparks */
.footer__secret-text{position:relative}
.footer__secret{-webkit-touch-callout:none}
.footer__nib,.footer__ink{position:absolute;left:0;top:0;pointer-events:none;border-radius:50%}
.footer__nib{width:6px;height:6px;margin:-3px 0 0 -3px;background:#FFF1C1;opacity:0;
  box-shadow:0 0 0 2px rgba(240,200,104,.35),0 0 12px 4px rgba(240,200,104,.55);transition:opacity .35s var(--ease-out)}
.footer__ink{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:#F0C868;animation:footer-ink .8s var(--ease-out) forwards}
@keyframes footer-ink{to{opacity:0;translate:var(--dx) var(--dy);scale:.4}}

/* press-and-hold card: flips up out of the signature */
.sigcard{position:fixed;z-index:400;width:280px;padding:22px 20px 18px;border-radius:18px;text-align:center;
  background:rgba(14,22,17,.94);border:1px solid rgba(221,174,76,.35);color:var(--c-on-dark);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transform-origin:50% 100%;transform:perspective(700px) rotateX(-80deg) translateY(8px);opacity:0;
  transition:transform .55s cubic-bezier(.28,.11,.32,1),opacity .4s cubic-bezier(.28,.11,.32,1)}
.sigcard.is-open{transform:none;opacity:1}
.sigcard__x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--c-on-dark-soft);font-size:20px;cursor:pointer}
.sigcard__x:hover{background:rgba(255,255,255,.08)}
.sigcard__photo{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 12px;border:2px solid rgba(221,174,76,.6)}
.sigcard__name{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.sigcard__role{margin:.25rem 0 1rem;font-size:.82rem;color:var(--c-on-dark-soft)}
.sigcard__row{display:flex;gap:8px;justify-content:center}
.sigcard a.sigcard__btn{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:9999px;line-height:1;font-size:.88rem;
  background:var(--c-primary);color:#fff;text-decoration:none;transition:transform .2s var(--ease-out)}
.sigcard a.sigcard__btn:active{transform:scale(.95)}
.sigcard a.sigcard__btn--ghost{background:transparent;color:var(--c-primary-on-dark);border:1px solid var(--c-primary-on-dark)}

/* the hidden end-credits roll: gold on black, like the end of a film */
.sigroll{position:fixed;inset:0;z-index:500;background:#030504;overflow:hidden;cursor:pointer;opacity:0;transition:opacity .9s cubic-bezier(.28,.11,.32,1)}
.sigroll.is-on{opacity:1}
.sigroll::before,.sigroll::after{content:"";position:absolute;left:0;right:0;height:22vh;z-index:2;pointer-events:none}
.sigroll::before{top:0;background:linear-gradient(#030504,transparent)}
.sigroll::after{bottom:0;background:linear-gradient(transparent,#030504)}
.sigroll__crawl{position:absolute;left:50%;top:100%;width:min(640px,86vw);transform:translateX(-50%);text-align:center;color:#EAE3D2}
.sigroll.is-on .sigroll__crawl{animation:sigroll 12.5s linear forwards}
@keyframes sigroll{to{transform:translate(-50%,calc(-100% - 100vh))}}
.sigroll__eyebrow{margin:0;font-family:"Cinzel",var(--font-display);font-weight:700;letter-spacing:.3em;font-size:.8rem;color:#DDAE4C}
.sigroll__title{margin:.6rem 0 2.4rem;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.015em}
.sigroll__photo{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 2.4rem;border:2px solid rgba(221,174,76,.55)}
.sigroll__label{margin:2rem 0 .35rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#8FA089}
.sigroll__name{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.4rem);color:#F4EEE2}
.sigroll__value{margin:0;font-size:1.05rem;line-height:1.5;color:#C7D4C2}
.sigroll__sign{margin:3rem auto .6rem;width:min(300px,70vw)}
.sigroll__svg{display:block;width:100%;height:auto;overflow:visible}
.sigroll__svg path{fill:none;stroke:#DDAE4C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sigroll__end{margin:0 0 2rem;font-style:italic;color:#8FA089}
@media (prefers-reduced-motion:reduce){
  .sigroll.is-on .sigroll__crawl{animation:none;top:50%;transform:translate(-50%,-50%)}
  .sigcard{transition:opacity .2s}
  .footer__nib,.footer__ink{display:none}
}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid > div:first-child{grid-column:1 / -1}}
@media (max-width:900px){.footer__bottom{flex-direction:column;align-items:flex-start}.footer__staff,.footer .footer__secret{order:0}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}

/* ============================================================
   SITE-WIDE POLISH  (see modules/polish.js)
   ============================================================ */

/* thin scroll-progress line across the very top */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:1000;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c-gold),var(--c-rose) 55%,var(--c-primary));
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .scroll-progress{transition:transform .12s linear}
}

/* (the eyebrow dash already marks each heading block — no title underline) */

/* cross-document fade between pages (Chrome/Edge; silently ignored elsewhere) */
@view-transition{ navigation:auto; }

/* ---- dock swipe transition ----
   A plain click keeps the default cross-fade above. When dockswipe.js
   detects an actual swipe on the bottom nav, it sets data-nav-dir on
   <html> (on the outgoing page, and again on the incoming one before
   its first paint) — these rules turn that into a directional slide
   instead. Chrome/Edge only; everywhere else it's a normal navigation. */
@media (prefers-reduced-motion:no-preference){
  html[data-nav-dir="fwd"]::view-transition-old(root){
    animation:vt-slide-out-left .38s var(--ease-out) both;
  }
  html[data-nav-dir="fwd"]::view-transition-new(root){
    animation:vt-slide-in-right .38s var(--ease-out) both;
  }
  html[data-nav-dir="back"]::view-transition-old(root){
    animation:vt-slide-out-right .38s var(--ease-out) both;
  }
  html[data-nav-dir="back"]::view-transition-new(root){
    animation:vt-slide-in-left .38s var(--ease-out) both;
  }
}
@keyframes vt-slide-out-left{ to{ transform:translateX(-28%); opacity:0 } }
@keyframes vt-slide-in-right{ from{ transform:translateX(28%); opacity:0 } }
@keyframes vt-slide-out-right{ to{ transform:translateX(28%); opacity:0 } }
@keyframes vt-slide-in-left{ from{ transform:translateX(-28%); opacity:0 } }

/* ---------- LANG PROMPT — one-time first-visit language pick ---------- */
.lang-prompt{
  position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:301;                              /* above the dock (300) */
  width:min(320px, calc(100vw - 32px));
  padding:1rem 1.1rem 1.1rem;
  text-align:center;
  transform:translate(-50%, 10px) scale(.96);
  opacity:0;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}
.lang-prompt.is-shown{ transform:translate(-50%, 0) scale(1); opacity:1; pointer-events:auto; }
.lang-prompt__x{
  position:absolute;top:.5rem;right:.5rem;
  width:26px;height:26px;border:0;border-radius:50%;background:none;
  color:var(--c-ink-mute);font-size:1.1rem;line-height:1;cursor:pointer;
}
.lang-prompt__x:hover{color:var(--c-ink-soft);background:color-mix(in srgb, var(--c-ink) 8%, transparent)}
.lang-prompt__q{
  margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;
  font-size:1rem;color:var(--c-ink);
}
.lang-prompt__row{display:flex;gap:.55rem;justify-content:center}
.lang-prompt__opt{flex:1;padding:.6rem .9rem;font-size:.9rem;min-height:40px}
@media (prefers-reduced-motion:reduce){
  .lang-prompt{transition:opacity var(--dur-2) var(--ease-out)}
}

/* ---------- CREDIT BADGE — corner nudge toward the credits page ---------- */
.credit-badge{
  position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));
  z-index:301;                              /* same layer as the lang prompt, above the dock */
  display:flex;align-items:center;gap:.15rem;
  max-width:min(230px, calc(100vw - 32px));
  padding:.3rem .3rem .3rem .95rem;
  border-radius:var(--r-pill);
  transform:translateY(12px) scale(.94);
  opacity:0;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out);
}
.credit-badge.is-shown{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.credit-badge__link{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  padding:.3rem 0;
}
.credit-badge__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--c-primary-ink);
  animation:footer-dot-pulse 2.4s ease-out infinite;
}
.credit-badge__text{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--c-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.credit-badge__x{
  width:26px;height:26px;flex:none;border:0;border-radius:50%;background:none;
  color:var(--c-ink-mute);font-size:1.1rem;line-height:1;cursor:pointer;
}
.credit-badge__x:hover{color:var(--c-ink-soft);background:color-mix(in srgb, var(--c-ink) 8%, transparent)}
@media (max-width:480px){ .credit-badge{right:10px} }
@media (prefers-reduced-motion:reduce){
  .credit-badge{transition:opacity var(--dur-2) var(--ease-out)}
  .credit-badge__dot{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 30%,transparent)}
}

/* ---------- SPONSORS DECK — glowing dot, top-right (modules/sponsordeck.js) ----------
   A wordless dot; hover/tap it and the logos slide down beneath it, one
   by one, on a transparent ground. One shared stage shows the hovered
   logo's card: beside the logos on desktop, as a sheet on phones. */
.sdeck{
  position:fixed;z-index:302;                 /* above the lang prompt / credit badge */
  top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));
  display:flex;flex-direction:column;align-items:center;
  --sd-logo:46px; --sd-gap:10px; --sd-glow:#3FCB7E;
  --sd-ease:cubic-bezier(.22,1,.36,1);
}

/* the trigger */
.sdeck__spark{
  position:relative;z-index:2;overflow:hidden;isolation:isolate;cursor:pointer;
  width:30px;height:30px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  background:var(--glass-panel-bg);border:1px solid var(--glass-panel-border);
  backdrop-filter:var(--glass-panel-blur);-webkit-backdrop-filter:var(--glass-panel-blur);
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.sdeck__spark::after{                        /* a thin shine sweeping across every few seconds */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, color-mix(in srgb,var(--c-primary) 22%,transparent) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:sdeck-shine 4.5s ease-in-out infinite 1.2s;
}
.sdeck__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--sd-glow);filter:drop-shadow(0 0 5px rgba(63,203,126,.9));
  animation:footer-dot-pulse 2.4s ease-out infinite;   /* same live ring as the footer credit */
}
.sdeck__spark:hover,.sdeck.is-open .sdeck__spark{border-color:color-mix(in srgb,var(--c-primary) 55%,var(--glass-panel-border))}
.sdeck.is-open .sdeck__spark{transform:scale(1.08)}
.sdeck__spark:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}

/* the column of logos — scrolls quietly once there are lots of them */
.sdeck__list{
  position:relative;list-style:none;margin:0;
  padding:var(--sd-gap) 8px 8px;
  max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  display:flex;flex-direction:column;align-items:center;gap:var(--sd-gap);
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .7s;       /* stay visible while they tuck back up */
}
.sdeck__list::-webkit-scrollbar{display:none}
.sdeck.is-open .sdeck__list,.sdeck.is-teasing .sdeck__list{visibility:visible;transition:none}
.sdeck.is-open .sdeck__list{pointer-events:auto}
.sdeck__item{
  position:relative;flex:none;
  /* each logo starts tucked up behind the dot, then slides down to its slot */
  transform:translateY(calc(-1 * (var(--i) + 1) * (var(--sd-logo) + var(--sd-gap))));
  opacity:0;
  transition:transform .55s var(--sd-ease), opacity .35s ease;
  transition-delay:calc((var(--n) - 1 - var(--i)) * 55ms);    /* closing: last one tucks away first */
}
.sdeck.is-open .sdeck__item,.sdeck.is-teasing .sdeck__item{
  transform:none;opacity:1;
  transition-delay:calc(var(--i) * 110ms + 60ms);             /* opening: one after another */
}
.sdeck__logo{
  width:var(--sd-logo);height:var(--sd-logo);padding:0;border:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;border-radius:var(--r-md);
  transition:transform .35s var(--sd-ease), opacity .3s ease;
}
.sdeck__logo img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));             /* legible over any photo */
  transition:filter .3s ease;
}
/* while one card is out: that logo glows, the rest step back */
.sdeck.has-active .sdeck__logo{opacity:.45}
.sdeck.has-active .sdeck__item.is-active .sdeck__logo{opacity:1;transform:scale(1.12)}
.sdeck__item.is-active .sdeck__logo img{filter:drop-shadow(0 0 8px rgba(63,203,126,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.sdeck__logo:hover{transform:scale(1.08)}
.sdeck__logo:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}

/* ---------- the stage (desktop): floats left of the logos, glides between them ---------- */
.sdeck__stage{
  position:absolute;right:100%;top:var(--y, 40px);
  padding-right:14px;                         /* invisible bridge from logo to card */
  width:min(360px, calc(100vw - 120px));
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(12px);
  perspective:900px;
  transition:top .45s var(--sd-ease), opacity .25s ease, transform .45s var(--sd-ease), visibility 0s linear .25s;
}
.sdeck__stage.is-shown{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:top .45s var(--sd-ease), opacity .25s ease, transform .45s var(--sd-ease), visibility 0s;
}
.sdeck__tilt{
  position:relative;border-radius:var(--r-md);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--sd-ease);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.sdeck__tilt.is-tilting{transition:transform .08s linear}
.sdeck__face{                                /* dark frosted glass with a gold hairline — cards sit on it */
  border-radius:inherit;overflow:hidden;
  background:linear-gradient(145deg, rgba(22,32,26,.86), rgba(8,12,10,.9));
  border:1px solid rgba(221,174,76,.32);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
}
.sdeck__face.is-swap{animation:sdeck-swap .38s var(--sd-ease) both}
.sdeck__face a{display:block}
.sdeck__media{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;padding:4px}
.sdeck__shine{                                /* a soft light that follows the cursor */
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.55), transparent 55%);
  mix-blend-mode:soft-light;transition:opacity .3s ease;
}
.sdeck__tilt.is-tilting .sdeck__shine{opacity:1}
.sdeck__soon{
  aspect-ratio:7/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
}
.sdeck__soon img{width:56px;height:56px;object-fit:contain}
.sdeck__soon span{font-family:var(--font-mono);font-size:.7rem;color:rgba(244,238,226,.7);letter-spacing:.03em}

.sdeck__bar{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin-top:.55rem}
.sdeck__visit{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.38rem .8rem;border-radius:var(--r-pill);
  background:var(--glass-panel-bg);border:1px solid var(--glass-panel-border);
  backdrop-filter:var(--glass-panel-blur);-webkit-backdrop-filter:var(--glass-panel-blur);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--c-ink);text-decoration:none;
  transition:border-color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.sdeck__visit span{color:var(--sd-glow)}
.sdeck__visit:hover{border-color:var(--c-primary);transform:translateY(-1px)}
.sdeck__visit[hidden]{display:none}
.sdeck__x{display:none}

/* ---------- phones / touch: the card rises as a sheet above the dock ---------- */
@media (hover:none), (max-width:640px){
  .sdeck{--sd-logo:42px}
  .sdeck__stage{
    position:fixed;right:auto;left:50%;top:auto;
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:min(440px, calc(100vw - 32px));padding:0;
    transform:translate(-50%, 24px);perspective:none;
    transition:opacity .25s ease, transform .45s var(--sd-ease), visibility 0s linear .25s;
  }
  .sdeck__stage.is-shown{
    transform:translate(-50%, 0);
    transition:opacity .25s ease, transform .45s var(--sd-ease), visibility 0s;
  }
  .sdeck__tilt{transform:none}
  .sdeck__bar{justify-content:space-between;margin-top:.65rem}
  .sdeck__visit{padding:.6rem 1rem;font-size:.8rem;flex:1;justify-content:center}
  .sdeck__x{
    display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
    background:var(--glass-panel-bg);border:1px solid var(--glass-panel-border);
    backdrop-filter:var(--glass-panel-blur);-webkit-backdrop-filter:var(--glass-panel-blur);
    color:var(--c-ink);font-size:1.3rem;line-height:1;
  }
  .sdeck__visit[hidden] + .sdeck__x{margin-left:auto}
}
@media (max-width:480px){ .sdeck{top:calc(10px + env(safe-area-inset-top));right:10px} }

@keyframes sdeck-shine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
@keyframes sdeck-swap{from{opacity:.25;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sdeck__spark::after{animation:none;opacity:0}
  .sdeck__dot{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 30%,transparent)}
  .sdeck__item,.sdeck.is-open .sdeck__item{transform:none;transition:opacity .2s ease;transition-delay:0s}
  .sdeck__stage,.sdeck__stage.is-shown{transition:opacity .2s ease, visibility 0s}
  .sdeck__face.is-swap{animation:none}
}