/* Doge Day 2026: the poster's own materials, sampled from the artist's redrawn poster (assets/poster/) */

:root {
  --pink: #EA0057;        /* the ground's corners; the page background */
  --sunray: #FEC22D;      /* the ground's yellow field; the light sunburst ring */
  --marigold: #F5B300;    /* the ground's marigold ring; the map arch's ring */
  --ring-a: #F58000;      /* the dark sunburst ring: the ground's orange ring (marigold beside sunray read too flat, 1.1:1) */
  --ring-b: var(--sunray);
  --orange: #DA6F1D;      /* the band's orange: ribbon tails, social discs */
  --lettering: #E45131;   /* the DOGE DAY letters (#E65C3F), deepened to 3:1 on cream */
  --blue: #024B98;        /* the top clouds' blue, the one action colour */
  --blue-deep: #051F3C;   /* the clouds' shaded blue */
  --cream: #FBE2BE;       /* the armchair: paper, ribbon face, lettering halo */
  --cream-light: #FFEABA; /* Kabosu's chest: plates, mats, button text */
  --brown: #402213;       /* the ribbon's keyline: lettering keyline and drop, footer ground */
  --ink: #301A06;         /* the backdrop's keyline: text, keylines */

  --display: "Ultra", "Cooper Black", "Arial Rounded MT Bold", cursive;
  --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1120px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* the poster stack's width, the sizing variable for both layouts: full width on a phone, capped at
     1100px, and stepped down so the square and both pills fit the first viewport. The 165px is the
     floor's allowance: the 1rem gap, the eyebrow, the pill and the padding, with about 60px of headroom (tune
     by measurement); the wide layout overrides it below */
  --art-w: clamp(320px, min(100vw, 1100px, calc(100vh - 165px)), 1100px);
  --ring: 24px;
}

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

html { background: var(--pink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; line-height: 1.1; }

a { color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }

::selection { background: var(--blue); color: var(--cream-light); }

:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.footer :focus-visible { outline-color: var(--cream-light); }
.btn:focus-visible { outline-color: var(--ink); outline-offset: 5px; }
.skip:focus-visible { outline-color: var(--ink); } /* the skip link lands on the hero's pink corner, where blue is 1.9:1 */

html { scrollbar-color: var(--blue) var(--cream); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  padding: 0.6em 1em; background: var(--cream-light); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 999px; font-weight: 900;
}
.skip:focus { top: 12px; }

/* ---- the poster's lettering ---- */

.lettering {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--lettering);
  letter-spacing: 0.01em;
  text-wrap: balance;
  -webkit-text-stroke: 1.5px var(--brown);
  paint-order: stroke fill;
  text-shadow:
    4px 4px 0 var(--cream), -4px 4px 0 var(--cream), 4px -4px 0 var(--cream), -4px -4px 0 var(--cream),
    0 5px 0 var(--cream), 5px 0 0 var(--cream), -5px 0 0 var(--cream), 0 -5px 0 var(--cream),
    0 9px 0 var(--brown);
}
h2.lettering {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  margin: 0 0 0.6em;
}
/* on cream paper the paper is the halo; keep only the keyline and the drop */
.paper .lettering { text-shadow: 0 0.12em 0 var(--brown); -webkit-text-stroke: 2px var(--brown); }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.5em 1.6em 0.7em; /* Zen Maru's Latin glyphs sit low in their line box; this centres the ink (measured) */
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--blue);
  color: var(--cream-light);
  font-family: var(--body);
  font-weight: 900;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 0 4px var(--cream), 0 6px 0 var(--brown);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 4px var(--cream), 0 8px 0 var(--brown); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 4px var(--cream), 0 3px 0 var(--brown); }
.btn-secondary { background: var(--cream); color: var(--blue); box-shadow: inset 0 0 0 4px var(--blue), 0 6px 0 var(--brown); }
.btn-secondary:hover { box-shadow: inset 0 0 0 4px var(--blue), 0 8px 0 var(--brown); }
.btn-secondary:active { box-shadow: inset 0 0 0 4px var(--blue), 0 3px 0 var(--brown); }

/* the pills carry the cities; the verb sits once above the pair as an eyebrow in the lettering style, so both
   still read as the call to action. The gap is tight: a doge may cover the line, that is allowed */
.eyebrow {
  margin: 0 0 0.6rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  text-shadow: 0 0.12em 0 var(--brown);
}
.floor-split .eyebrow { grid-column: 1 / -1; margin-bottom: -1.4rem; } /* the grid row gap is 2rem; lands 0.6rem above the pills like the hero */

/* a doge sits behind each pill (.pill is the stacking context; the image is z-index -1 under the <a>) and
   slides out past an edge: ears (--out -55%) or the whole head (-75%). script.js picks when, which edge and
   where along it, independently per pill; on the bottom edge she comes out upside down. Hover or focus brings
   the head out wherever she is. Without script.js she only answers hover. */
.pill { position: relative; display: inline-flex; isolation: isolate; }
.pill .btn { flex: 1 1 auto; }
.pill .peek {
  position: absolute;
  z-index: -1;
  top: 4px;
  left: var(--px, 50%);
  width: 3em;
  height: auto;
  margin-left: -1.5em;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); /* the pill's, so 3em matches */
  --out: 0%;
  transform: translateY(var(--out));
  transition: transform 300ms var(--ease-out);
  pointer-events: none;
}
.pill .peek.bottom { top: auto; bottom: -2px; transform: rotate(180deg) translateY(var(--out)); }
.pill .peek.ears { --out: -55%; }
.pill .peek.head, .pill:hover .peek, .pill:focus-within .peek { --out: -75%; }

/* ---- ribbon banner: the JAPAN ribbon, now the page's seam ---- */

.seam {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-inline: calc(var(--gutter) + 1.05em);
  font-size: clamp(1.7rem, min(calc(var(--art-w) * 0.058), 7.2vw), 4rem);
}
.ribbon {
  position: relative;
  display: block;
  width: min(100%, calc(var(--art-w) + 2.4em));
  margin-inline: auto;
  padding: 0.3em 0.4em 0.4em;
  background: var(--cream);
  border: 4px solid var(--brown);
  box-shadow: inset 0 0 0 5px var(--cream-light);
  color: var(--lettering);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.1;
  text-wrap: balance;
  -webkit-text-stroke: 1.5px var(--brown);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--brown);
}
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 0.45em;
  width: 1.5em;
  height: 100%;
  background: var(--orange);
  border: 4px solid var(--brown);
  z-index: -1;
}
.ribbon::before { left: -1.05em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 32% 50%); }
.ribbon::after  { right: -1.05em; clip-path: polygon(0 0, 100% 0, 68% 50%, 100% 100%, 0 100%); }

/* ---- the warm ground ---- */

/* the hero ground is the artist's painted gradient: the yellow field, the marigold and orange rings and the
   hot-pink corners, centred on the stack and scaled to its half-diagonal (the stops come from layers.json,
   generated into --ground-stops in the poster-layers block below), over pink so the painting carries on past
   the stack on wide screens. No rings and no grain here: the art is clean flat colour */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  --stack-h: var(--art-w); /* the stack's height: its width when square, 2/3 of it under the wide query */
  background-color: var(--pink);
  background-image: radial-gradient(circle at 50% calc(var(--stack-h) / 2), var(--ground-stops));
}
/* soft hand-offs between the drenched grounds and the cream paper: a short fade at each shared edge */
.hero::after, .rings::after, .involve::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero::after { background: linear-gradient(to bottom, transparent, var(--cream)) bottom / 100% 7rem no-repeat; }
.rings::after {
  background:
    linear-gradient(to bottom, var(--cream), transparent) top / 100% 6rem no-repeat,
    linear-gradient(to bottom, transparent, var(--cream)) bottom / 100% 6rem no-repeat;
}
.involve::after {
  background:
    linear-gradient(to bottom, var(--cream), transparent) top / 100% 6rem no-repeat,
    linear-gradient(to bottom, transparent, var(--brown)) bottom / 100% 6rem no-repeat;
}

/* ---- hero ---- */

/* the poster as a stack of its 24 pieces over the painted ground (no flat image underneath), so each one can
   be animated on its own. Every piece is an <img class="seg"> placed by --x/--y/--w from the generated block
   below; DOM order is depth, so there are no z-index rules. Two layouts: the square poster as the artist
   composed it, and under the wide query the 3:2 arrangement (mockup A7) with the painted spine kept whole and
   the flanking pieces mirrored outward */
.stack {
  position: relative;
  z-index: 2;
  width: var(--art-w);
  aspect-ratio: 1;
  flex: none;
}
.seg { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; }

/* the trivia rosette, pinned over the poster's top-right blue cloud: measured from the stack's right edge (the
   stack is centred in the hero) rather than the viewport's, so it stays on the art on wide screens. It hangs
   from its top edge so the wiggle swings the tails */
.lore {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 2vw, 28px);
  right: max(var(--gutter), calc((100% - var(--art-w)) / 2 + var(--art-w) * 0.08));
  width: clamp(96px, 12vw, 144px);
  rotate: 8deg;
  transform-origin: 50% 8%;
  color: var(--ink);
  text-decoration: none;
  filter: drop-shadow(0 4px 0 rgba(48, 26, 6, 0.35));
  transition: scale 0.2s var(--ease-out);
}
.lore svg { display: block; width: 100%; height: auto; }
.lore span {
  position: absolute;
  top: 37%; left: 50%;
  width: 56%;
  translate: -50% -50%;
  font-family: var(--display);
  font-size: clamp(8px, 0.92vw, 11px);
  line-height: 1.1;
  text-align: center;
  text-transform: lowercase;
}
.lore:hover { scale: 1.08; }
@media (prefers-reduced-motion: no-preference) {
  .lore { animation: lore-wiggle 3.6s ease-in-out infinite; }
  .lore:hover { animation-duration: 0.9s; }
}
@keyframes lore-wiggle {
  0%, 76%, 100% { rotate: 8deg; }
  80% { rotate: -5deg; }
  85% { rotate: 15deg; }
  90% { rotate: 1deg; }
  95% { rotate: 11deg; }
}

/* keep this query in step with WIDE_QUERY in tools/build-poster-stack.py */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
  /* the 3:2 stack and both pills fit the first viewport from 1280x720 to 1920x1080; the 480px floor only
     bites on very short landscape windows and keeps the stack no narrower than the square layout's minimum */
  :root { --art-w: max(480px, min(100vw, 1200px, calc((100vh - 165px) * 1.5))); }
  .hero { --stack-h: calc(var(--art-w) / 1.5); }
  .stack { aspect-ratio: 3 / 2; }
}

/* poster-layers:start (generated by tools/build-poster-stack.py from assets/poster/layers.json; do not edit by hand) */
/* the square poster as the artist composed it (default), and the ground gradient's stops over its half-diagonal */
.hero { --ground-stops: #FEC22D 0, #FEC22D calc(var(--art-w) * 0.4243), #F5B300 calc(var(--art-w) * 0.4950), #F58000 calc(var(--art-w) * 0.5657), #F43765 calc(var(--art-w) * 0.6364), #EA0057 calc(var(--art-w) * 0.7071); }
.stack [data-name="arch-structure"] { --x: 0.000%; --y: 30.808%; --w: 100.000%; }
.stack [data-name="branches-left"] { --x: 1.732%; --y: 17.749%; --w: 19.408%; }
.stack [data-name="branches-right"] { --x: 78.644%; --y: 17.569%; --w: 19.408%; }
.stack [data-name="lower-arcs"] { --x: 31.043%; --y: 67.767%; --w: 37.879%; }
.stack [data-name="sun-armchair"] { --x: 23.214%; --y: 28.788%; --w: 53.571%; }
.stack [data-name="cloud-blue-left"] { --x: 1.587%; --y: 1.966%; --w: 36.544%; }
.stack [data-name="cloud-blue-right"] { --x: 61.815%; --y: 1.948%; --w: 36.544%; }
.stack [data-name="top-arch"] { --x: 16.017%; --y: 0.559%; --w: 67.965%; }
.stack [data-name="doge-day-band"] { --x: 15.891%; --y: 12.266%; --w: 68.218%; }
.stack [data-name="kabosu"] { --x: 32.486%; --y: 30.231%; --w: 32.937%; }
.stack [data-name="japan-ribbon"] { --x: 15.891%; --y: 55.970%; --w: 68.218%; }
.stack [data-name="cloud-cream-left"] { --x: 21.645%; --y: 14.358%; --w: 14.683%; }
.stack [data-name="cloud-cream-right"] { --x: 63.961%; --y: 14.304%; --w: 14.683%; }
.stack [data-name="cloud-small-left"] { --x: 34.758%; --y: 10.245%; --w: 5.213%; }
.stack [data-name="cloud-small-right"] { --x: 60.029%; --y: 10.245%; --w: 5.213%; }
.stack [data-name="windmill"] { --x: 40.025%; --y: 68.272%; --w: 19.589%; }
.stack [data-name="shiba-white"] { --x: 64.430%; --y: 60.552%; --w: 16.739%; }
.stack [data-name="shiba-black"] { --x: 16.739%; --y: 60.444%; --w: 14.556%; }
.stack [data-name="cloud-bottom-left"] { --x: 1.587%; --y: 75.902%; --w: 39.484%; }
.stack [data-name="cloud-bottom-right"] { --x: 58.911%; --y: 75.920%; --w: 39.484%; }
.stack [data-name="blossom-big-left"] { --x: 20.076%; --y: 77.255%; --w: 19.697%; }
.stack [data-name="blossom-big-right"] { --x: 60.263%; --y: 77.255%; --w: 19.697%; }
.stack [data-name="cloud-teal-left"] { --x: 7.377%; --y: 30.105%; --w: 32.179%; }
.stack [data-name="cloud-teal-right"] { --x: 60.390%; --y: 30.087%; --w: 32.179%; }

/* the wide arrangement, a 1.5:1 box: owner-approved landscape arrangement (mockup A7), used on wide viewports */
@media (min-aspect-ratio: 1/1) and (min-width: 820px) {
  .hero { --ground-stops: #FEC22D 0, #FEC22D calc(var(--art-w) * 0.3606), #F5B300 calc(var(--art-w) * 0.4206), #F58000 calc(var(--art-w) * 0.4807), #F43765 calc(var(--art-w) * 0.5408), #EA0057 calc(var(--art-w) * 0.6009); }
  .stack [data-name="arch-structure"] { --x: 14.744%; --y: 26.816%; --w: 70.513%; }
  .stack [data-name="branches-left"] { --x: 8.013%; --y: 10.577%; --w: 15.738%; }
  .stack [data-name="branches-right"] { --x: 76.249%; --y: 10.577%; --w: 15.738%; }
  .stack [data-name="lower-arcs"] { --x: 36.633%; --y: 71.677%; --w: 26.709%; }
  .stack [data-name="sun-armchair"] { --x: 31.113%; --y: 30.449%; --w: 37.775%; }
  .stack [data-name="cloud-blue-left"] { --x: 0.769%; --y: 1.731%; --w: 25.768%; }
  .stack [data-name="cloud-blue-right"] { --x: 73.463%; --y: 1.731%; --w: 25.768%; }
  .stack [data-name="top-arch"] { --x: 26.038%; --y: 0.591%; --w: 47.924%; }
  .stack [data-name="doge-day-band"] { --x: 25.949%; --y: 12.973%; --w: 48.102%; }
  .stack [data-name="kabosu"] { --x: 37.650%; --y: 31.975%; --w: 23.224%; }
  .stack [data-name="japan-ribbon"] { --x: 25.949%; --y: 59.199%; --w: 48.102%; }
  .stack [data-name="cloud-cream-left"] { --x: 30.006%; --y: 15.186%; --w: 10.353%; }
  .stack [data-name="cloud-cream-right"] { --x: 59.844%; --y: 15.129%; --w: 10.353%; }
  .stack [data-name="cloud-small-left"] { --x: 39.253%; --y: 10.836%; --w: 3.676%; }
  .stack [data-name="cloud-small-right"] { --x: 57.072%; --y: 10.836%; --w: 3.676%; }
  .stack [data-name="windmill"] { --x: 42.967%; --y: 72.211%; --w: 13.813%; }
  .stack [data-name="shiba-white"] { --x: 66.222%; --y: 60.055%; --w: 14.164%; }
  .stack [data-name="shiba-black"] { --x: 19.615%; --y: 60.055%; --w: 12.317%; }
  .stack [data-name="cloud-bottom-left"] { --x: 0.769%; --y: 80.288%; --w: 27.841%; }
  .stack [data-name="cloud-bottom-right"] { --x: 71.389%; --y: 80.288%; --w: 27.841%; }
  .stack [data-name="blossom-big-left"] { --x: 22.276%; --y: 80.096%; --w: 13.889%; }
  .stack [data-name="blossom-big-right"] { --x: 63.835%; --y: 80.096%; --w: 13.889%; }
  .stack [data-name="cloud-teal-left"] { --x: 10.577%; --y: 32.212%; --w: 24.959%; }
  .stack [data-name="cloud-teal-right"] { --x: 64.464%; --y: 32.212%; --w: 24.959%; }
}
/* poster-layers:end */

/* ---- poster piece animations, one rule per piece (from the owner's notes in FEEDBACK.md); transform only ---- */
@keyframes spin-cw  { to { transform: rotate(1turn); } }
@keyframes spin-ccw { to { transform: rotate(-1turn); } }
.seg[data-name="blossom-big-left"]  { animation: spin-ccw 64s linear infinite; }
.seg[data-name="blossom-big-right"] { animation: spin-cw 64s linear infinite; }

/* index.html?labels : name every layer for feedback */
.labels .seg { outline: 1px dashed #ff0040; outline-offset: -1px; }
.seg-label {
  position: absolute; z-index: 5;
  left: var(--x); top: var(--y);
  padding: 1px 4px;
  background: #fff; color: #000;
  font: 700 10px/1.3 var(--body);
  white-space: nowrap;
  pointer-events: none;
}

.floor {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  text-align: center;
  padding: 1.6rem var(--gutter) 3rem;
}
.hero .floor { margin-top: 1rem; padding-top: 0; } /* the poster is painted to its bottom edge; the pills sit just under it */
.fact-date span { font-size: 0.78em; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.2rem; }
.actions .btn, .offer .btn { min-width: 12.5em; }
@media (max-width: 560px) { .actions .pill { flex: 1 1 100%; } }

/* ---- the one motion moment: the seam closes ---- */

@media (prefers-reduced-motion: no-preference) {
  .floor .eyebrow { animation: stamp 220ms var(--ease-out) 90ms both; }
  .actions .pill:nth-child(1) { animation: stamp 220ms var(--ease-out) 150ms both; }
  .actions .pill:nth-child(2) { animation: stamp 220ms var(--ease-out) 230ms both; }
  /* hold the first frame until the display font is in */
  html.js:not(.fonts-ready) .hero-anim { animation-play-state: paused; }
}
@keyframes stamp { from { transform: scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- paper sections ---- */

.paper {
  position: relative;
  background: var(--cream);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
.paper p { max-width: 62ch; }

.details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* equal halves, so the pair reads centred */
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch; /* the map column runs the full height of the heading plus facts */
}
@media (max-width: 820px) { .details-grid { grid-template-columns: 1fr; } }

.fact-date { font-weight: 900; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.2; margin-bottom: 0.3em; }
.fact-venue { font-weight: 700; font-size: 1.1em; line-height: 1.45; margin: 1.4em 0 0.4em; }
.fact-venue span { font-size: 1.15em; }
.fact-access { padding-top: 1em; border-top: 3px solid var(--ink); }
.fact-access h3 { font-weight: 900; font-size: 1.1em; margin: 0 0 0.3em; }
.fact-access ul { margin: 0; padding-left: 1.2em; max-width: 48ch; }
.fact-access li { margin-bottom: 0.3em; }
.fact-access li::marker { color: var(--lettering); }

/* arch niche: the caption sits in the crown, the map fills the straight-sided body */
.map-arch {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: 50% 50% 14px 14px / 24% 24% 14px 14px;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 9px var(--marigold), 0 0 0 12px var(--cream-light), 0 0 0 15px var(--ink);
  background: var(--cream-light);
}
@media (max-width: 820px) { .map-arch { margin-top: 1.5rem; border-radius: 42% 42% 14px 14px / 20% 20% 14px 14px; } }
.map-arch figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 0.3em;
  padding: 2.6em 2.5em 1em; text-align: center; font-weight: 700; text-wrap: balance;
}
.map-arch .pin { width: 30px; height: 30px; flex: none; }
.map-arch iframe { display: block; width: 100%; flex: 1 1 auto; min-height: 300px; border: 0; border-top: 3px solid var(--ink); }
@media (max-width: 820px) { .map-arch iframe { flex: none; height: clamp(300px, 52vh, 480px); } }

.program { margin-top: clamp(3rem, 7vw, 5rem); }
/* two ruled lists, no times: the order can move on the day */
.program-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* same halves as the facts and map above */
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 820px) { .program-grid { grid-template-columns: 1fr; } }
.program h3 {
  font-weight: 900;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  padding-top: 0.6em;
  border-top: 3px solid var(--ink);
}
.program ul { list-style: none; margin: 0.6em 0 0; padding: 0; }
.program li {
  padding: 0.75em 0.6em 0.75em 2.2em;
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
  /* a bare brown paw print, centred on the first text line */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="%23402213"><ellipse cx="50" cy="66" rx="22" ry="18"/><ellipse cx="22" cy="44" rx="10" ry="13" transform="rotate(-22 22 44)"/><ellipse cx="40" cy="26" rx="10" ry="13" transform="rotate(-7 40 26)"/><ellipse cx="60" cy="26" rx="10" ry="13" transform="rotate(7 60 26)"/><ellipse cx="78" cy="44" rx="10" ry="13" transform="rotate(22 78 44)"/></g></svg>') no-repeat 0.3em 0.9em / 1.3em 1.3em;
}

/* ---- past Doge Days: sunburst rings (re-sampled from the painted ground), a strip of matted photos ---- */

.rings {
  position: relative;
  isolation: isolate;
  background: repeating-radial-gradient(circle at 50% 50%, var(--ring-a) 0 var(--ring), var(--ring-b) var(--ring) calc(var(--ring) * 2));
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
}
.rings .wrap, .marquee, .involve .seam, .involve .floor { position: relative; z-index: 2; }
.rings .lettering { text-align: center; }

/* photos drift past on their own; the second list is a copy so the loop never shows a gap */
.marquee {
  --gap: 1.2rem;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  padding: 0.5rem 0 1rem;
}
.strip {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  animation: drift 90s linear infinite;
}
.marquee:hover .strip, .marquee:focus-within .strip { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-100% - var(--gap))); } }
.strip > li { flex: 0 0 min(72vw, 420px); }
.strip img {
  display: block;
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  padding: 8px;
  background: var(--cream-light);
  border: 3px solid var(--ink);
  border-radius: 6px;
}
/* the photographer's credit: small and quiet under the mat, only on photos that have one */
.strip .credit {
  display: block;
  width: fit-content;
  margin: 0.45rem auto 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--brown); /* full brown: at 80% it fell under 4.5:1 on the orange ring */
  text-decoration: none;
}
.strip .credit:hover, .strip .credit:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.strip .empty {
  display: grid; place-content: center; text-align: center; gap: 0.2em;
  aspect-ratio: 3 / 2;
  padding: 1em;
  border: 3px dashed var(--ink);
  border-radius: 6px;
  background: rgba(255, 243, 214, 0.55);
  background: color-mix(in srgb, var(--cream-light) 55%, transparent);
  font-weight: 700;
}
.strip .empty svg { width: 48px; height: 48px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; padding-inline: var(--gutter); }
  .strip { animation: none; }
  .strip[aria-hidden="true"] { display: none; }
}

/* ---- sponsors & frens ---- */

/* bare logos, no plates: each li takes its width from --w (set inline per logo) so wide wordmarks and square marks weigh about the same; height follows the image's own aspect ratio */
.logos {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3.5rem;
}
.logos li { width: var(--w, 9rem); max-width: 100%; }
.logos img { display: block; width: 100%; height: auto; }
/* phones: cap every logo at half the row so two sit side by side and the list stays short */
@media (max-width: 559px) {
  .logos { gap: 1.5rem 1rem; }
  .logos li { width: min(var(--w, 9rem), calc(50% - 0.5rem)); }
}

/* ---- get involved: rings again, the second ribbon as its heading ---- */

.involve {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, var(--pink) 96%),
    repeating-radial-gradient(circle at 50% 50%, var(--ring-a) 0 var(--ring), var(--ring-b) var(--ring) calc(var(--ring) * 2));
}
.involve .seam { width: 100%; }

.floor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  max-width: 900px;
  justify-items: center;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.offer { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 760px) { .floor-split { grid-template-columns: 1fr; } }

/* ---- footer: the poster's keyline brown ---- */

.footer {
  position: relative;
  background: var(--brown);
  color: var(--cream-light);
  padding: 3.5rem 0 2.5rem;
  text-align: center;
}
.footer a { color: var(--cream-light); }
.wordmark { margin: 0 0 1.4rem; line-height: 0; }
.socials {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem;
}
.socials a {
  display: flex; flex-direction: column; align-items: center; gap: 0.4em;
  min-width: 64px; text-decoration: none; font-weight: 700; font-size: 0.9rem;
}
.socials a:hover span { text-decoration: underline; }
.socials svg {
  width: 52px; height: 52px; padding: 13px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--cream);
  fill: var(--cream-light);
  box-shadow: 0 3px 0 var(--ink);
}
.wordmark a { display: inline-block; }
.wordmark img { display: block; width: clamp(240px, 40vw, 380px); height: auto; }
.wordmark a:hover img { transform: translateY(-2px); }

/* ---- pinned RSVP on phones ---- */

.pinned {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 3px solid var(--ink);
}
.pinned .btn { width: 100%; max-width: 420px; }
.pinned[hidden] { display: none; }
@media (min-width: 820px), (max-height: 500px) { .pinned { display: none !important; } }
/* room for the ribbon at the end of the page, kept inside the footer so the page always ends on the footer ground */
@media (max-width: 819px) and (min-height: 501px) { .footer { padding-bottom: calc(2.5rem + 88px); } }

/* ---- motion hygiene ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}