/* Bellwether. Colours come from the wax seal and the stamp artwork. */
:root {
  --paper: #f3ebdb;
  --sheet: #fbf6ec;
  --card: #fbf6ec;
  --ink: #2c2a33;
  --muted: #6b6270;
  --line: #ddd0b8;
  --accent: #9b2a22;      /* wax seal red */
  --accent-ink: #fbf6ec;
  --teal: #1f6b5a;
  --navy: #1f3a5a;
  --stamp-red: #b63b2c;
  --mustard: #d49a2a;
  --font-body: "IM Fell English", Georgia, serif;
  --font-caps: "IM Fell English SC", Georgia, serif;
  --font-hand: "La Belle Aurore", cursive;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --radius: 4px;
  --space: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noise), var(--paper);
  color: var(--ink);
  font: 1.125rem/1.6 var(--font-body);
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: normal; }
h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0; }
h1:focus, h2:focus { outline: none; }

.stack { display: flex; flex-direction: column; gap: var(--space); }

.hint, .small { color: var(--muted); }
.hint { font: 0.85rem var(--font-ui); }
.small { font-size: 0.95rem; }

/* Forms */
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
legend { font-size: 1.3rem; margin-bottom: 0.5rem; padding: 0; }
label { display: flex; flex-direction: column; gap: 0.25rem; font: 0.95rem var(--font-ui); }
input:not([type="radio"]) {
  font: 1rem var(--font-ui); /* 16px+ stops iOS zooming into fields */
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  width: 100%;
}
input:focus-visible, .btn:focus-visible, .stamp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--accent); font: 0.95rem var(--font-ui); }
.error:empty { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1rem var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.app-buttons { display: grid; gap: 0.5rem; }

/* Payment */
.qr { margin: 0; align-self: center; text-align: center; font: 0.9rem var(--font-ui); color: var(--muted); }
.qr svg { width: 220px; height: 220px; background: #fff; border-radius: var(--radius); }
.qr figcaption { max-width: 22rem; margin: 0.3rem auto 0; }
.manual { margin: 0; display: grid; gap: 0.4rem; padding: 0.85rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); font-family: var(--font-ui); }
.manual div { display: flex; gap: 0.75rem; }
.manual dt { color: var(--muted); min-width: 5rem; }
.manual dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Home: a letter from Bellwether ---------- */
.home { position: relative; }

.home-top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 16px;
  color: var(--sheet);
}
.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font: 1.5rem var(--font-caps);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 10px rgb(10 10 30 / 0.7);
}
.home-brand img { width: 2.6rem; height: auto; filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.4)); }
.home-top-link {
  color: inherit;
  font: 1.05rem var(--font-caps);
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgb(251 246 236 / 0.7);
  border-radius: 2px;
  text-decoration: none;
  background: rgb(20 20 40 / 0.25);
}

.scene {
  height: clamp(17rem, 46vw, 36rem);
  background:
    linear-gradient(rgb(15 15 35 / 0.5), transparent 30%),
    url("/assets/night-1600.webp") center 45% / cover;
}

.home-main {
  padding: 0 16px 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  overflow-x: clip;
}

/* The sheet: paper grain. No fold lines: they cut through text at some widths. */
.letter {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin-top: clamp(-7rem, -8vw, -2.5rem);
  padding: 1.75rem clamp(1.4rem, 7vw, 4.5rem) 3rem;
  background:
    var(--noise),
    var(--sheet);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 22px 44px rgb(30 20 10 / 0.22);
  font-size: 1.22rem;
  line-height: 1.7;
}
.letter > * + * { margin-top: 1em; }
.letter-seal { display: block; width: 6.5rem; height: auto; margin: 0 auto; transform: rotate(-8deg); filter: drop-shadow(0 3px 4px rgb(60 20 10 / 0.25)); }
.letter-date { font: 0.95rem var(--font-caps); letter-spacing: 0.08em; color: var(--muted); text-align: right; }
.letter h1 { font-style: italic; margin-top: 0.4em; }
.letter-closing { font-style: italic; }
.signature {
  font: 1.9rem/1.3 var(--font-hand);
  color: var(--navy);
  transform: rotate(-2deg);
  transform-origin: left;
}

/* Pictures tucked in with the letter. Narrow screens: one overlapping pile. Wide screens: out in the margins. */
.snapshot, .postcard {
  position: relative;
  margin: 0;
  background: #fffdf8;
  box-shadow: 0 8px 20px rgb(30 20 10 / 0.25);
}
.snapshot img, .postcard img { display: block; width: 100%; height: auto; }
.snapshot figcaption, .postcard figcaption {
  font: 1.15rem/1.2 var(--font-hand);
  color: var(--navy);
  text-align: center;
  padding: 0.55rem 0.3rem 0.6rem;
}
.snapshot::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 5.5rem;
  height: 1.5rem;
  background: rgb(232 218 180 / 0.8);
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}
.enclosures { display: flex; justify-content: center; align-items: flex-start; margin: 1.6rem 0 1.4rem; }
.snapshot { width: 42%; padding: 0.45rem 0.45rem 0; transform: rotate(-4deg); z-index: 1; }
.postcard { width: 62%; padding: 0.45rem 0.45rem 0; margin: 1.4rem 0 0 -6%; transform: rotate(3deg); }

@media (min-width: 76rem) {
  .enclosures { display: block; position: relative; height: 0; margin: 0; }
  .snapshot { position: absolute; right: -17rem; top: -15rem; width: 14rem; transform: rotate(4deg); }
  .postcard { position: absolute; left: -20.5rem; top: -3rem; width: 17rem; margin: 0; transform: rotate(-4deg); }
}

/* P.S. and the plan stamps, drawn after the Bellwether stamp artwork. */
.ps { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); clear: both; }
.ps-mark { display: inline-block; font: 1.6rem/1 var(--font-hand); color: var(--navy); margin-right: 0.35rem; }

.stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem 4rem;
  padding: 1rem 2rem 0 0;
  filter: drop-shadow(0 3px 3px rgb(40 30 20 / 0.25));
}
.stamp {
  position: relative;
  display: block;
  width: 11rem;
  color: var(--teal);
  text-decoration: none;
  transform: rotate(-4deg);
  transition: transform 0.2s ease;
}
.stamp-red { color: var(--stamp-red); transform: rotate(3deg); }
.stamp:hover, .stamp:focus-visible { transform: rotate(0) translateY(-4px); }
.stamp-face {
  --hole: 5px;
  --pitch: 15px;
  --perforation:
    radial-gradient(circle var(--hole) at 50% 0, #0000 97%, #000) 0 0 / var(--pitch) 100% repeat-x,
    radial-gradient(circle var(--hole) at 50% 100%, #0000 97%, #000) 0 0 / var(--pitch) 100% repeat-x,
    radial-gradient(circle var(--hole) at 0 50%, #0000 97%, #000) 0 0 / 100% var(--pitch) repeat-y,
    radial-gradient(circle var(--hole) at 100% 50%, #0000 97%, #000) 0 0 / 100% var(--pitch) repeat-y;
  -webkit-mask: var(--perforation);
  -webkit-mask-composite: source-in;
  mask: var(--perforation);
  mask-composite: intersect;
  display: block;
  padding: 12px;
  background: currentColor;
}
.stamp-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.7rem 0.4rem 0.8rem;
  border: 1.5px solid rgb(251 246 236 / 0.85);
  color: var(--sheet);
  text-align: center;
}
.stamp-star { font-size: 0.9rem; line-height: 1; }
.stamp-country { font: 1.05rem var(--font-caps); letter-spacing: 0.12em; }
.stamp-value { font-size: 2.2rem; line-height: 1.1; }
.stamp-name { font-style: italic; font-size: 1rem; }
.stamp-cancel { position: absolute; left: 86%; top: 22%; width: 4.2rem; height: auto; }
/* One plain button under the stamps: the stamps alone didn't read as tappable. */
.stamps-cta { margin-top: 1.4rem; text-align: center; }
.stamps-cta .btn { min-width: 14rem; }
.stamps-cta + .small { margin-top: 0.8rem; text-align: center; }

/* One month's envelope, drawn in the page and sized in cqw (the figure's width) so it scales as one picture.
   The resting layout below is the contents laid out on the table with the flap open: what visitors see when
   motion is off. The loop lives in the Motion block. Layers, back to front: table shadow, open flap,
   contents inside, envelope body, flap shadow, closed flap, seal, contents laid out. */
@property --lift { syntax: "<number>"; inherits: false; initial-value: 0; }
.unbox {
  position: relative;
  margin: 1.6rem 0 0.4rem;
  aspect-ratio: 100 / 71; /* extra room at the bottom for the surprises and their label */
  container-type: inline-size;
}
.ub-table {
  position: absolute;
  left: 16cqw;
  top: 55.5cqw;
  width: 68cqw;
  height: 7cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 40 20 / 0.3), rgb(60 40 20 / 0.12) 60%, transparent);
}
.ub-pocket, .ub-flap, .ub-flap-shadow { position: absolute; left: 23cqw; top: 30cqw; width: 54cqw; }
.ub-pocket { z-index: 3; height: 30cqw; overflow: visible; }

/* The flap has two faces: plain paper outside, the Bellwether stamp liner inside. */
.ub-flap {
  z-index: 1;
  height: 16.5cqw;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(180deg); /* open */
}
.ub-flap-out, .ub-flap-in { position: absolute; inset: 0; backface-visibility: hidden; }
.ub-flap-out {
  clip-path: polygon(0 0, 100% 0, 52% 96%, 50% 100%, 48% 96%);
  background: linear-gradient(rgb(255 255 255 / 0.35), transparent 40%), var(--noise), linear-gradient(#f7edd8, #e9d9b8);
}
.ub-flap-in {
  transform: rotateX(180deg);
  clip-path: polygon(50% 0, 52% 4%, 100% 100%, 0 100%, 48% 4%);
  background: linear-gradient(rgb(40 28 15 / 0.05), rgb(40 28 15 / 0.22)), url("/assets/liner-1200.webp") center / 140% auto;
}
.ub-flap-shadow { z-index: 4; top: 30.5cqw; height: 17.5cqw; filter: blur(0.6cqw); opacity: 0; }
.ub-flap-shadow span { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgb(90 62 30 / 0.3); }
.ub-seal {
  position: absolute;
  z-index: 6;
  left: 45.6cqw;
  top: 40.2cqw;
  width: 8.8cqw;
  height: auto;
  transform-origin: 50% -10.2cqw; /* the flap's hinge, so the seal rides with the flap */
  transform: perspective(900px) rotateX(180deg);
  backface-visibility: hidden;
  filter: drop-shadow(0 0.3cqw 0.35cqw rgb(60 20 10 / 0.35));
}

/* Contents. --x/--y: resting spot on the table, from the inside position; --rise: lift clear of the envelope. */
.ub-item {
  position: absolute;
  top: 31cqw;
  left: calc(50cqw - var(--w) / 2);
  width: var(--w);
  height: var(--h);
  z-index: 7;
  translate: var(--x) var(--y);
  rotate: var(--r);
  scale: calc(1 + max(0, var(--lift)) * 0.03);
  box-shadow:
    0 0.1cqw 0.2cqw rgb(40 28 15 / 0.2),
    0 calc(0.3cqw + max(0, var(--lift)) * 1.8cqw) calc(0.8cqw + max(0, var(--lift)) * 3.2cqw) rgb(40 28 15 / calc(0.2 + max(0, var(--lift)) * 0.1));
}
.ub-activity {
  --w: 24cqw; --h: 16cqw; --x: -35cqw; --y: 2cqw; --r: -7deg; --rise: -18cqw;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
  padding: 1.4cqw 1.8cqw;
  background: var(--noise), #fcf8ef;
}
.ub-act-title { font: 1.75cqw/1 var(--font-caps); letter-spacing: 0.08em; color: var(--accent); }
.ub-act-sub { font: italic 1.3cqw/1 var(--font-body); color: var(--muted); }
.ub-grid { display: grid; grid-template-columns: repeat(7, 2.2cqw); grid-auto-rows: 2.2cqw; margin: 0.3cqw 0; }
.ub-grid i {
  display: grid;
  place-items: center;
  margin: 0 -0.08cqw -0.08cqw 0;
  border: 0.16cqw solid rgb(44 42 51 / 0.75);
  font: normal 1.5cqw/1 var(--font-hand);
  color: var(--navy);
  text-transform: uppercase;
}
.ub-grid i.b { background: rgb(44 42 51 / 0.82); }
.ub-act-clue { font: 1.2cqw/1.2 var(--font-body); color: var(--ink); }
.ub-story {
  --w: 17cqw; --h: 24cqw; --x: -13.5cqw; --y: -23cqw; --r: 4deg; --rise: -26cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5cqw;
  padding: 1.1cqw 1.1cqw 1.3cqw;
  background: var(--noise), #fbf6ec;
}
.ub-story::before { /* spine */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.3cqw;
  background: linear-gradient(90deg, rgb(40 28 15 / 0.16), transparent);
}
.ub-story::after { /* page edges */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0.22cqw 0.22cqw 0 #efe6d3, 0.44cqw 0.44cqw 0 #e4d9c2;
}
.ub-cover { flex: 1; align-self: stretch; background: url("/assets/day-800.webp") 30% center / cover; }
.ub-story-title { font: 1.55cqw/1 var(--font-caps); letter-spacing: 0.08em; color: var(--ink); }
.ub-story-no { font: italic 1.4cqw/1 var(--font-body); color: var(--muted); }
.ub-stickers {
  --w: 18cqw; --h: 22cqw; --x: 13.5cqw; --y: -20cqw; --r: -5deg; --rise: -24cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  place-items: center;
  gap: 1.6cqw 0.8cqw;
  padding: 1.4cqw 1.2cqw;
  border-radius: 0.8cqw;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.7), transparent 50%), #f9f5ee;
}
.ub-stickers img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 0.22cqw #fff) drop-shadow(0 0 0.22cqw #fff) drop-shadow(0 0.15cqw 0.2cqw rgb(0 0 0 / 0.2));
}
.ub-stickers img:nth-of-type(1) { rotate: -6deg; }
.ub-stickers img:nth-of-type(2) { rotate: 5deg; }
.ub-stickers img:nth-of-type(3) { rotate: 4deg; }
.ub-stickers img:nth-of-type(4) { width: 78%; rotate: -8deg; }
.ub-print {
  --w: 24cqw; --h: 17cqw; --x: 35cqw; --y: 1.5cqw; --r: 7deg; --rise: -19cqw;
  padding: 1cqw;
  background: #fffdf9;
}
.ub-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ub-print::after { /* gloss */
  content: "";
  position: absolute;
  inset: 1cqw;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.22), transparent 45%);
}
.ub-surprises {
  --w: 34cqw; --h: 13.6cqw; --x: 0cqw; --y: 21.5cqw; --r: -3deg; --rise: -16cqw;
  box-shadow: none; /* the pieces cast their own shadows */
}
.ub-surprises svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0.25cqw 0.3cqw rgb(40 28 15 / 0.3));
}
.ub-ticket { font: 7px var(--font-caps); letter-spacing: 0.06em; fill: #fbf6ec; }
.ub-cap {
  position: absolute;
  top: calc(100% + 1.3cqw);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  color: var(--navy);
  font: clamp(12px, 3.2cqw, 17px)/1 var(--font-hand);
}

/* Notices pinned below the letter */
.notices {
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 2.2rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
  background: var(--noise), #efe5cf;
  box-shadow: 0 10px 24px rgb(30 20 10 / 0.16);
  transform: rotate(-0.6deg);
}
.notices::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9675a, var(--accent));
  box-shadow: 0 2px 2px rgb(0 0 0 / 0.3);
}
.notices h2 { font: 1.2rem var(--font-caps); letter-spacing: 0.12em; text-align: center; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.notices details { border-bottom: 1px dashed var(--line); }
.notices summary { position: relative; padding: 0.8rem 1.8rem 0.8rem 0; font-style: italic; font-size: 1.15rem; list-style: none; cursor: pointer; }
.notices summary::-webkit-details-marker { display: none; }
.notices summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.45rem; font: 1.6rem var(--font-hand); color: var(--accent); }
.notices details[open] summary::after { content: "\2013"; }
.notices details p { margin: -0.2rem 0 0.9rem; color: var(--muted); }

/* Footer on the envelope liner */
.liner {
  display: flex;
  justify-content: center;
  padding: 3.5rem 16px;
  background: url("/assets/liner-1200.webp") center / cover;
}
.liner-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 1.6rem;
  background: var(--noise), var(--sheet);
  box-shadow: 0 6px 16px rgb(30 20 10 / 0.2);
  font-size: 1rem;
  text-align: center;
}
.liner-label nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.1rem; }
.liner-label a { color: var(--ink); }

/* ---------- Checkout: a postage form at the Bellwether Post Office ---------- */
@property --stripe-shift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.counter, .page { position: relative; }
/* Short pages: keep the liner footer at the bottom of the screen. */
.home, .counter, .page { min-height: 100svh; display: flex; flex-direction: column; }
.home-main, .counter-main, .page-main { flex: 1 0 auto; }
.scene-day {
  height: clamp(10rem, 20vw, 15rem);
  background:
    linear-gradient(rgb(15 15 35 / 0.5), transparent 45%),
    url("/assets/day-1600.webp") center 60% / cover;
}
.counter-main, .page-main { padding: 0 16px 4rem; overflow-x: clip; }

.form-sheet, .page-sheet {
  position: relative;
  max-width: 44rem;
  margin: clamp(-5rem, -6vw, -2rem) auto 0;
  padding: 2rem clamp(1.1rem, 6vw, 3.5rem) 2.75rem;
  background: var(--noise), var(--sheet);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 22px 44px rgb(30 20 10 / 0.22);
}
.form-head { text-align: center; padding-bottom: 1.2rem; border-bottom: 3px double rgb(44 42 51 / 0.3); }
.form-office { font: 0.9rem var(--font-caps); letter-spacing: 0.18em; color: var(--accent); }
.form-head h1 { font: italic 2.4rem/1.15 var(--font-body); margin-top: 0.2rem; }
.form-sub { font: 1.35rem var(--font-hand); color: var(--navy); margin-top: 0.3rem; }
.form-cutoff { font-size: 0.98rem; color: var(--muted); margin-top: 0.6rem; }

.postage-form { display: flex; flex-direction: column; }
.section { margin-top: 2.2rem; }
.section legend { display: flex; align-items: center; gap: 0.65rem; font-size: 1.4rem; margin-bottom: 1.1rem; }
.section-no {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font: 1rem var(--font-caps);
}

/* 1. Plans as stamps: the chosen one sits up straight and gets cancelled. */
.pick-stamps { display: flex; justify-content: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; }
.pick-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 10.5rem;
  color: var(--teal);
  font: 1rem var(--font-body); /* labels default to the form font */
  cursor: pointer;
  transform: rotate(-3deg);
  opacity: 0.55;
  filter: saturate(0.5);
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.pick-stamp-red { color: var(--stamp-red); transform: rotate(3deg); }
.pick-stamp .stamp-face { width: 100%; filter: drop-shadow(0 3px 3px rgb(40 30 20 / 0.25)); }
.pick-stamp:hover { opacity: 0.8; }
.pick-stamp:has(input:checked) { transform: rotate(0) translateY(-3px); opacity: 1; filter: none; }
.pick-stamp:has(input:checked)::after {
  content: "chosen";
  position: absolute;
  top: -0.6rem;
  right: -0.9rem;
  padding: 0.35rem 0.5rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  background: rgb(251 246 236 / 0.6);
  font: 0.8rem var(--font-caps);
  letter-spacing: 0.1em;
  transform: rotate(14deg);
}
.pick-stamp:has(:focus-visible), .pick-mark:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.pick-note { font: italic 1rem var(--font-body); color: var(--ink); }

/* 2. Destination as rubber postmarks. */
.pick-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
.pick-mark { font: 1rem var(--font-body); cursor: pointer; }
.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.55rem 1.4rem 0.6rem;
  border: 3px double currentColor;
  border-radius: 50%;
  color: var(--muted);
  opacity: 0.55;
  transform: rotate(-4deg);
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.pick-mark:nth-child(2) .mark { transform: rotate(3deg); }
.pick-mark:hover .mark { opacity: 0.8; }
.pick-mark:has(input:checked) .mark { color: var(--accent); opacity: 1; }
.mark-main { font: 1.25rem var(--font-caps); letter-spacing: 0.1em; }
.mark-sub { font: italic 0.95rem var(--font-body); }

/* 3. The envelope: the chosen stamp in the corner, air-mail stripes when abroad. */
.envelope {
  position: relative;
  padding: 1.2rem 1.4rem 1.5rem;
  border: 10px solid #fdf9f0;
  background: var(--noise), #fdf9f0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 10px 26px rgb(30 20 10 / 0.16);
}
#details:has(input[name="region"][value="INTL"]:checked) .envelope {
  /* --stripe-shift is 0 at rest; the motion block slides it to sweep the stripes in. */
  border-image: repeating-linear-gradient(-45deg,
    var(--stamp-red) var(--stripe-shift) calc(12px + var(--stripe-shift)),
    #fdf9f0 calc(12px + var(--stripe-shift)) calc(22px + var(--stripe-shift)),
    var(--navy) calc(22px + var(--stripe-shift)) calc(34px + var(--stripe-shift)),
    #fdf9f0 calc(34px + var(--stripe-shift)) calc(44px + var(--stripe-shift))) 10;
}
.env-airmail {
  display: none;
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  padding: 0.15rem 0.55rem;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font: 0.8rem var(--font-caps);
  letter-spacing: 0.12em;
}
#details:has(input[name="region"][value="INTL"]:checked) .env-airmail { display: block; }
.env-stamp {
  --perforation:
    radial-gradient(circle 3.5px at 50% 0, #0000 97%, #000) 0 0 / 10px 100% repeat-x,
    radial-gradient(circle 3.5px at 50% 100%, #0000 97%, #000) 0 0 / 10px 100% repeat-x,
    radial-gradient(circle 3.5px at 0 50%, #0000 97%, #000) 0 0 / 100% 10px repeat-y,
    radial-gradient(circle 3.5px at 100% 50%, #0000 97%, #000) 0 0 / 100% 10px repeat-y;
  -webkit-mask: var(--perforation);
  -webkit-mask-composite: source-in;
  mask: var(--perforation);
  mask-composite: intersect;
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 5.2rem;
  background: var(--teal);
  box-shadow: inset 0 0 0 6px var(--teal), inset 0 0 0 7px rgb(251 246 236 / 0.85);
  color: var(--sheet);
  font-size: 1.05rem;
  transform: rotate(4deg);
}
.env-stamp::before { content: "✦"; font-size: 0.7rem; }
.env-stamp-3m { display: none; background: var(--stamp-red); box-shadow: inset 0 0 0 6px var(--stamp-red), inset 0 0 0 7px rgb(251 246 236 / 0.85); }
#details:has(input[name="plan"][value="3m"]:checked) .env-stamp-1m { display: none; }
#details:has(input[name="plan"][value="3m"]:checked) .env-stamp-3m { display: flex; }

.env-lines { display: flex; flex-direction: column; gap: 0.9rem; max-width: 27rem; margin: 5.2rem 0 0 auto; }
.env-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.envelope label, .lined label { gap: 0; font: 0.82rem var(--font-caps); letter-spacing: 0.08em; color: var(--muted); }
.envelope input, .lined input {
  padding: 0.3rem 0.1rem 0.25rem;
  border: 0;
  border-bottom: 1.5px dotted #b3a386;
  border-radius: 0;
  background: transparent;
  font: 1.2rem var(--font-body);
  letter-spacing: 0;
}
.envelope input:focus-visible, .lined input:focus-visible { outline: none; border-bottom: 2px solid var(--accent); }
.lined { display: flex; flex-direction: column; gap: 0.9rem; }
.hand-note { font: 1.2rem var(--font-hand); color: var(--navy); margin-top: 0.8rem; }

.btn-seal {
  align-self: center;
  margin-top: 1.4rem;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #b8453a, var(--accent) 60%, #7a1d17);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2), 0 3px 8px rgb(90 20 10 / 0.3);
  font: 1.1rem var(--font-caps);
  letter-spacing: 0.1em;
}
.postage-form .error { text-align: center; margin-top: 1.2rem; }

/* Payment: a postage-due slip with a torn perforated top. */
.docket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.8rem;
  padding: 1.7rem clamp(1rem, 5vw, 2rem) 1.5rem;
  background: var(--noise), #fffaf0;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgb(30 20 10 / 0.1);
}
.docket::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 12px;
  background: radial-gradient(circle 5px, var(--sheet) 97%, transparent) 0 0 / 14px 12px repeat-x;
}
.docket-office { padding-bottom: 0.6rem; border-bottom: 1px dashed var(--line); color: var(--accent); font: 0.85rem var(--font-caps); letter-spacing: 0.16em; text-align: center; }
.docket h2 { font: italic 2.1rem var(--font-body); text-align: center; }
.docket-rows { display: grid; gap: 0.35rem; margin: 0; }
.docket-rows div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.25rem; border-bottom: 1px dotted var(--line); }
.docket-rows dt { font: 0.85rem var(--font-caps); letter-spacing: 0.08em; color: var(--muted); }
.docket-rows dd { margin: 0; }
.docket .btn-seal { margin-top: 0; }
.docket-confirm { padding-top: 1rem; border-top: 1px dashed var(--line); }
.docket-confirm h3 { font-style: italic; }
.ref-optional summary { cursor: pointer; color: var(--muted); font: 0.9rem var(--font-ui); }
.ref-optional label { margin-top: 0.6rem; }
.docket-restart { text-align: center; font-size: 0.95rem; }

/* Thank-you: the owl takes it from here. */
.done { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: center; margin-top: 1.8rem; }
.done img { width: 100%; height: auto; border: 6px solid #fffdf8; box-shadow: 0 8px 20px rgb(30 20 10 / 0.25); transform: rotate(-3deg); }
.done h2 { font: italic 2rem var(--font-body); }
.done .signature { font-size: 1.5rem; }

@media (max-width: 40rem) {
  .scene-day { height: 9rem; }
  .form-head h1 { font-size: 2rem; }
  .section { margin-top: 1.8rem; }
  .pick-stamps { flex-wrap: nowrap; gap: 1rem; }
  .pick-stamp { flex: 1 1 0; width: auto; max-width: 9.5rem; }
  .pick-stamp:has(input:checked)::after { right: -0.4rem; font-size: 0.7rem; }
  .pick-marks { flex-wrap: nowrap; gap: 0.6rem; }
  .pick-mark { flex: 1 1 0; }
  .mark { padding: 0.5rem 0.6rem; }
  .mark-main { font-size: 1rem; letter-spacing: 0.05em; }
  .mark-sub { font-size: 0.82rem; text-align: center; }
  .envelope { padding: 0.9rem 0.9rem 1.1rem; border-width: 8px; }
  .env-stamp { width: 3.6rem; height: 4.3rem; font-size: 0.9rem; right: 0.7rem; top: 0.7rem; }
  .env-lines { margin-top: 4.4rem; }
  .btn-seal { align-self: stretch; }
  .done { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
  .wide-only { display: none; }
}

/* ---------- Notices (shipping, terms, privacy), contact and 404 ---------- */
.scene-strip {
  height: clamp(8rem, 14vw, 11rem);
  background:
    linear-gradient(rgb(15 15 35 / 0.5), transparent 55%),
    url("/assets/day-1600.webp") center 62% / cover;
}
.page-head { text-align: center; padding-bottom: 1.1rem; border-bottom: 3px double rgb(44 42 51 / 0.3); }
.page-head h1 { font: italic 2.4rem/1.15 var(--font-body); margin-top: 0.2rem; }
.page-updated { margin-top: 0.4rem; color: var(--muted); font: 0.9rem var(--font-caps); letter-spacing: 0.08em; }

/* A pinned reminder for the owner; delete the <p> once the [brackets] are filled in. */
.template-note {
  position: relative;
  max-width: 22rem;
  margin: -0.5rem auto 1.6rem;
  padding: 0.9rem 1rem 0.8rem;
  background: #f6e6ae;
  box-shadow: 0 4px 10px rgb(30 20 10 / 0.18);
  color: var(--navy);
  font: 1.05rem/1.4 var(--font-hand);
  transform: rotate(-1.5deg);
}
.template-note::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 4.5rem;
  height: 1.3rem;
  background: rgb(232 218 180 / 0.85);
  transform: translateX(-50%) rotate(3deg);
}

.notice { margin-top: 1.4rem; font-size: 1.12rem; line-height: 1.65; }
.notice > * + * { margin-top: 0.8rem; }
.notice h2 {
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--line);
  color: var(--accent);
  font: 1.05rem var(--font-caps);
  letter-spacing: 0.14em;
}
.notice-numbered { counter-reset: section; }
.notice-numbered h2::before { counter-increment: section; content: "§ " counter(section) "\2003"; }
.notice ul { list-style: none; margin: 0; padding-left: 1.4rem; }
.notice li { position: relative; }
.notice li + li { margin-top: 0.4rem; }
.notice li::before { content: "✦"; position: absolute; left: -1.3rem; top: 0.1rem; color: var(--accent); font-size: 0.75em; }
.notice-lede { text-align: center; font-style: italic; color: var(--navy); }

/* Shipping: the monthly round as three postmarks. */
.timeline { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.timeline li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.timeline li::before { content: none; }
.timeline p { font-size: 1rem; line-height: 1.45; color: var(--muted); }
.timeline strong { display: block; font-weight: normal; font-style: italic; font-size: 1.15rem; color: var(--ink); }
.tl-mark {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border: 3px double var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font: 1.6rem var(--font-caps);
  transform: rotate(-8deg);
}
.timeline li:nth-child(2) .tl-mark { transform: rotate(6deg); }
.tl-mark-env { font-size: 1.7rem; font-family: var(--font-body); }

/* Refunds: the three cases as a docket. */
.cases { margin: 1.2rem 0 0; padding: 0.4rem 1.2rem; background: var(--noise), #fffaf0; border: 1px solid var(--line); }
.cases div { padding: 0.85rem 0; }
.cases div + div { border-top: 1px dotted var(--line); }
.cases dt { font-style: italic; font-size: 1.15rem; }
.cases dd { margin: 0.2rem 0 0; color: var(--muted); }

.also-posted { margin-top: 2.6rem; padding-top: 1rem; border-top: 3px double rgb(44 42 51 / 0.3); text-align: center; }
.also-posted span:first-child { display: block; color: var(--muted); font: 0.85rem var(--font-caps); letter-spacing: 0.14em; }
.also-posted p { margin-top: 0.35rem; font-size: 1.1rem; }
.also-posted p span { color: var(--accent); font-size: 0.7em; margin: 0 0.35rem; }

/* Contact: the back of a postcard. */
.postcard-back {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  margin-top: 1.6rem;
  background: var(--noise), #fffdf7;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 10px 26px rgb(30 20 10 / 0.16);
}
.pc-message { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.6rem 1.4rem; border-right: 1.5px solid var(--line); }
.pc-greeting { font: 1.5rem var(--font-hand); color: var(--navy); }
.pc-message .btn-seal { align-self: flex-start; margin-top: 0.6rem; }
.pc-address { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.2rem; padding: 6.5rem 1.4rem 1.6rem; }
.pc-stamp { position: absolute; top: 1rem; right: 1rem; width: 4.5rem; height: auto; transform: rotate(8deg); filter: drop-shadow(0 2px 3px rgb(60 20 10 / 0.25)); }
.pc-line { padding: 0.35rem 0 0.2rem; border-bottom: 1.5px dotted #b3a386; overflow-wrap: anywhere; }
.pc-to { font-style: italic; }

/* 404: return to sender. */
.rts { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.6rem; text-align: center; }
.rts-mark {
  padding: 0.5rem 1.2rem;
  border: 3px double var(--accent);
  color: var(--accent);
  font: 1.6rem var(--font-caps);
  letter-spacing: 0.12em;
  transform: rotate(-6deg);
}
.rts-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem 1.2rem; }
.rts-links .btn-seal { margin-top: 0; }

@media (max-width: 40rem) {
  .scene-strip { height: 7.5rem; }
  .page-head h1 { font-size: 2rem; }
  .notice { font-size: 1.05rem; }
  .timeline { grid-template-columns: 1fr; gap: 1.1rem; }
  .timeline li { flex-direction: row; align-items: center; text-align: left; gap: 1rem; }
  .tl-mark { flex: none; width: 3.6rem; height: 3.6rem; font-size: 1.35rem; }
  .postcard-back { grid-template-columns: 1fr; }
  .pc-message { border-right: 0; border-bottom: 1.5px solid var(--line); }
  .pc-message .btn-seal { align-self: stretch; }
  .pc-address { padding-top: 5.5rem; }
}

/* Phones: tighter letter, photos in one pile, stamps side by side, shorter footer. */
@media (max-width: 40rem) {
  .home-top { gap: 0.5rem; }
  .home-brand { gap: 0.4rem; font-size: 1.08rem; letter-spacing: 0.03em; white-space: nowrap; }
  .home-brand img { width: 2.1rem; }
  .home-top-link { font-size: 0.88rem; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; white-space: nowrap; }
  .scene { height: 15rem; }
  .home-main { gap: 2.25rem; padding-bottom: 2.5rem; }
  .letter { font-size: 1.06rem; line-height: 1.55; padding: 1.25rem 1.15rem 2rem; }
  .letter > * + * { margin-top: 0.8em; }
  .letter-seal { width: 4.75rem; }
  .letter h1 { font-size: 1.8rem; }
  .signature { font-size: 1.6rem; }
  .snapshot figcaption, .postcard figcaption { font-size: 0.95rem; padding: 0.4rem 0.2rem 0.45rem; }
  .snapshot figcaption { font-size: 0.85rem; white-space: nowrap; }
  .ps { margin-top: 1.75rem; padding-top: 1.1rem; }
  .stamps { flex-wrap: nowrap; gap: 0.9rem; padding: 0.75rem 0 0; }
  .stamp { flex: 1 1 0; max-width: 9.5rem; }
  .stamp-face { --hole: 4px; --pitch: 12px; padding: 9px; }
  .stamp-frame { padding: 0.55rem 0.25rem 0.6rem; }
  .stamp-country { font-size: 0.85rem; letter-spacing: 0.08em; }
  .stamp-value { font-size: 1.7rem; }
  .stamp-name { font-size: 0.9rem; }
  .stamp-cancel { display: none; }
  .notices { padding: 1.9rem 1.1rem 1rem; }
  .liner { padding: 2rem 16px; }
  .liner-label { padding: 0.9rem 1rem; font-size: 0.95rem; }
}

/* Phones get half-size scene and liner images. */
@media (max-width: 40rem) {
  .scene { background-image: linear-gradient(rgb(15 15 35 / 0.5), transparent 30%), url("/assets/night-800.webp"); }
  .scene-day { background-image: linear-gradient(rgb(15 15 35 / 0.5), transparent 45%), url("/assets/day-800.webp"); }
  .scene-strip { background-image: linear-gradient(rgb(15 15 35 / 0.5), transparent 55%), url("/assets/day-800.webp"); }
  .liner { background-image: url("/assets/liner-700.webp"); }
  .ub-flap-in { background-image: linear-gradient(rgb(40 28 15 / 0.05), rgb(40 28 15 / 0.22)), url("/assets/liner-700.webp"); }
  .ub-activity { --x: -36cqw; --y: 4.5cqw; } /* labels are relatively larger on phones; keep "a short story" clear of the activity */
  .unbox { margin-bottom: 1.2rem; } /* the surprises' label hangs below the figure at the 12px minimum */
}

/* ---------- Motion ----------
   Every movement is a postal action: paper arriving, a seal pressed, a rubber stamp coming down, ink drying.
   Only runs when <html> has .motion (set in each page's <head>) and the visitor hasn't asked for reduced motion.
   Animations use the individual translate/scale/rotate properties so they add to each element's resting tilt
   instead of replacing its transform. */
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); }

  @keyframes arrive { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
  @keyframes seal-press {
    0% { opacity: 0; scale: 1.7; rotate: -14deg; }
    55% { opacity: 1; scale: 0.92; rotate: 2deg; }
    78% { scale: 1.04; rotate: 0deg; }
    100% { opacity: 1; scale: 1; rotate: 0deg; }
  }
  @keyframes thunk {
    0% { opacity: 0; scale: 1.8; }
    55% { opacity: 1; scale: 0.9; }
    78% { scale: 1.04; }
    100% { opacity: 1; scale: 1; }
  }
  @keyframes press { 0% { scale: 1; } 40% { scale: 0.93; } 75% { scale: 1.03; } 100% { scale: 1; } }
  @keyframes ink { 0% { scale: 1.2; opacity: 0.35; } 60% { scale: 0.96; opacity: 1; } 100% { scale: 1; opacity: 1; } }
  @keyframes write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
  @keyframes drop { from { opacity: 0; translate: 0 -28px; rotate: 7deg; scale: 1.05; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
  @keyframes stick { from { opacity: 0; scale: 1.5; rotate: 12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  @keyframes stripes-in { from { --stripe-shift: -132px; } to { --stripe-shift: 0px; } }
  @keyframes tear-down {
    from { opacity: 0; translate: 0 -14px; clip-path: inset(-30px -30px 100% -30px); }
    to { opacity: 1; translate: 0 0; clip-path: inset(-30px -30px -30px -30px); }
  }
  @keyframes glide {
    0% { opacity: 0; translate: 70px -40px; rotate: 10deg; }
    70% { opacity: 1; translate: -3px 4px; rotate: -1deg; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; }
  }
  @keyframes fade-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

  /* Paper arrives on every page. */
  .motion .letter { animation: arrive 0.75s var(--ease-out) 0.1s both; }
  .motion .form-sheet, .motion .page-sheet { animation: arrive 0.55s var(--ease-out) 0.05s both; }

  /* Home: the seal is pressed as the letter arrives. */
  .motion .letter-seal { animation: seal-press 0.6s ease-out 0.75s both; }

  /* Home: photos drop in, the signature writes itself. Hidden until they scroll into view. */
  .motion .snapshot:not(.is-in), .motion .postcard:not(.is-in) { opacity: 0; }
  .motion .snapshot.is-in { animation: drop 0.7s var(--ease-out) both; }
  .motion .postcard.is-in { animation: drop 0.7s var(--ease-out) 0.15s both; }
  /* The wrapper is what gets watched: a fully clipped element never counts as visible. */
  .motion .sign-off:not(.is-in) .signature { clip-path: inset(-20% 100% -20% 0); }
  .motion .sign-off.is-in .signature { animation: write 1.3s cubic-bezier(0.45, 0, 0.55, 1) 0.1s both; }

  /* Checkout: choosing stamps and postmarks. */
  .motion .pick-stamp:has(input:checked) .stamp-face { animation: press 0.32s ease-out both; }
  .motion .pick-stamp:has(input:checked)::after { animation: thunk 0.42s ease-out 0.08s both; }
  .motion .pick-mark:has(input:checked) .mark { animation: ink 0.38s ease-out both; }
  .motion .env-stamp { animation: stick 0.45s var(--ease-out) both; }
  .motion #details:has(input[name="region"][value="INTL"]:checked) .envelope { animation: stripes-in 0.8s var(--ease-out) both; }
  .motion .env-airmail { animation: thunk 0.42s ease-out 0.2s both; }

  /* Checkout: the postage-due slip tears down; the owl glides in with the thank-you. */
  .motion .docket { animation: tear-down 0.5s var(--ease-out) both; }
  .motion .done img { animation: glide 0.9s var(--ease-out) both; }
  .motion .done .stack { animation: fade-up 0.5s ease-out 0.35s both; }

  /* Shipping: the three postmarks come down one after another. */
  .motion .timeline:not(.is-in) .tl-mark { opacity: 0; }
  .motion .timeline.is-in .tl-mark { animation: thunk 0.42s ease-out both; }
  .motion .timeline.is-in li:nth-child(2) .tl-mark { animation-delay: 0.2s; }
  .motion .timeline.is-in li:nth-child(3) .tl-mark { animation-delay: 0.4s; }

  /* Home: the envelope opens once, then stays open with every label showing. Over a 9s timeline (all
     motion is done by ~4.3s): fade in sealed; flap swings open (seal rides with it and turns away); each item
     slides clear of the envelope, then glides to its spot with a gentle overshoot and its shadow tightening
     as it lands. z-index steps sit 0.01s apart so layers swap in one frame. Each item's stagger is inside the
     shared timeline (no animation-delay); retime items together. It runs while on screen (data-play) and
     pauses if scrolled away before it finishes. */
  @keyframes ub-scene { 0% { opacity: 0; } 4.44%, 100% { opacity: 1; } }
  @keyframes ub-flap {
    0%, 11.11% { transform: perspective(900px) rotateX(0deg); z-index: 5; animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
    16.11% { z-index: 5; }
    16.22% { z-index: 1; }
    21.11% { transform: perspective(900px) rotateX(186deg); animation-timing-function: ease-in-out; }
    23.89%, 100% { transform: perspective(900px) rotateX(180deg); z-index: 1; }
  }
  @keyframes ub-seal {
    0%, 11.11% { transform: perspective(900px) rotateX(0deg); animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1); }
    21.11% { transform: perspective(900px) rotateX(186deg); animation-timing-function: ease-in-out; }
    23.89%, 100% { transform: perspective(900px) rotateX(180deg); }
  }
  @keyframes ub-flap-shadow { 0%, 11.11% { opacity: 1; } 15.00%, 100% { opacity: 0; } }
  @keyframes ub-activity {
    0%, 19.44% { translate: 0 0; rotate: 0deg; --lift: 0; z-index: 2; animation-timing-function: cubic-bezier(0.35, 0.1, 0.25, 1); }
    26.67% { translate: 0 var(--rise); rotate: 0deg; --lift: 1; z-index: 2; animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
    26.78% { z-index: 7; }
    36.11%, 100% { translate: var(--x) var(--y); rotate: var(--r); --lift: 0; z-index: 7; }
  }
  @keyframes ub-cap-activity { 0%, 36.67% { opacity: 0; } 41.11%, 100% { opacity: 1; } }
  @keyframes ub-story {
    0%, 21.11% { translate: 0 0; rotate: 0deg; --lift: 0; z-index: 2; animation-timing-function: cubic-bezier(0.35, 0.1, 0.25, 1); }
    28.33% { translate: 0 var(--rise); rotate: 0deg; --lift: 1; z-index: 2; animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
    28.44% { z-index: 7; }
    37.78%, 100% { translate: var(--x) var(--y); rotate: var(--r); --lift: 0; z-index: 7; }
  }
  @keyframes ub-cap-story { 0%, 38.33% { opacity: 0; } 42.78%, 100% { opacity: 1; } }
  @keyframes ub-stickers {
    0%, 22.78% { translate: 0 0; rotate: 0deg; --lift: 0; z-index: 2; animation-timing-function: cubic-bezier(0.35, 0.1, 0.25, 1); }
    30.00% { translate: 0 var(--rise); rotate: 0deg; --lift: 1; z-index: 2; animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
    30.11% { z-index: 7; }
    39.44%, 100% { translate: var(--x) var(--y); rotate: var(--r); --lift: 0; z-index: 7; }
  }
  @keyframes ub-cap-stickers { 0%, 40.00% { opacity: 0; } 44.44%, 100% { opacity: 1; } }
  @keyframes ub-print {
    0%, 24.44% { translate: 0 0; rotate: 0deg; --lift: 0; z-index: 2; animation-timing-function: cubic-bezier(0.35, 0.1, 0.25, 1); }
    31.67% { translate: 0 var(--rise); rotate: 0deg; --lift: 1; z-index: 2; animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
    31.78% { z-index: 7; }
    41.11%, 100% { translate: var(--x) var(--y); rotate: var(--r); --lift: 0; z-index: 7; }
  }
  @keyframes ub-cap-print { 0%, 41.67% { opacity: 0; } 46.11%, 100% { opacity: 1; } }
  /* The surprises follow the print, on the same 1.67% stagger, and land in front of the envelope. */
  @keyframes ub-surprises {
    0%, 26.11% { translate: 0 0; rotate: 0deg; --lift: 0; z-index: 2; animation-timing-function: cubic-bezier(0.35, 0.1, 0.25, 1); }
    33.33% { translate: 0 var(--rise); rotate: 0deg; --lift: 1; z-index: 2; animation-timing-function: cubic-bezier(0.3, 1.18, 0.5, 1); }
    33.44% { z-index: 7; }
    42.78%, 100% { translate: var(--x) var(--y); rotate: var(--r); --lift: 0; z-index: 7; }
  }
  @keyframes ub-cap-surprises { 0%, 43.33% { opacity: 0; } 47.78%, 100% { opacity: 1; } }
  .motion .unbox { animation: ub-scene 9s linear 1 both; }
  .motion .unbox .ub-flap { animation: ub-flap 9s linear 1 both; }
  .motion .unbox .ub-seal { animation: ub-seal 9s linear 1 both; }
  .motion .unbox .ub-flap-shadow { animation: ub-flap-shadow 9s linear 1 both; }
  .motion .unbox .ub-item { will-change: translate, rotate, scale; }
  .motion .unbox .ub-activity { animation: ub-activity 9s linear 1 both; }
  .motion .unbox .ub-activity .ub-cap { animation: ub-cap-activity 9s linear 1 both; }
  .motion .unbox .ub-story { animation: ub-story 9s linear 1 both; }
  .motion .unbox .ub-story .ub-cap { animation: ub-cap-story 9s linear 1 both; }
  .motion .unbox .ub-stickers { animation: ub-stickers 9s linear 1 both; }
  .motion .unbox .ub-stickers .ub-cap { animation: ub-cap-stickers 9s linear 1 both; }
  .motion .unbox .ub-print { animation: ub-print 9s linear 1 both; }
  .motion .unbox .ub-print .ub-cap { animation: ub-cap-print 9s linear 1 both; }
  .motion .unbox .ub-surprises { animation: ub-surprises 9s linear 1 both; }
  .motion .unbox .ub-surprises .ub-cap { animation: ub-cap-surprises 9s linear 1 both; }
  .motion .unbox:not(.is-playing), .motion .unbox:not(.is-playing) * { animation-play-state: paused; }

  /* 404: return to sender. */
  .motion .rts-mark { animation: thunk 0.45s ease-out 0.45s both; }
}