/* Olive Pocketfold, third pass (2026-09-14): lace, the fig engraving and Rose's bronze I & R seal.
   A plain sage envelope on white embroidered lace; a plain olive folder (no printed pattern, per Rose);
   every section is a different piece of paper so no two edges or backgrounds repeat. Facts come from ../shared/content.js; nothing factual is typed here.

   Type rule: Italiana has one hairline weight, so it is used only at 28px and larger.
   Everything smaller is EB Garamond at 500 or 600.

   Contrast (WCAG AA) on ivory #FFF9F3: Espresso 11.6, Olive 9.7, Mauve 6.6, Bronze 6.3.
   Ivory on the folder 6.1, ivory on Mauve 6.6. Sage (4.2) and Taupe (3.3) are for large type
   and decoration only. The art lives in ./art and was prepared from Rose's files on 2026-09-14. */

:root {
  /* Rose's palette, 2026-09-14 */
  --bronze: #72583E;
  --sage: #7C7960;
  --olive: #44422D;
  --tan: #DBC4A5;
  --espresso: #443223;
  --mauve: #755151;
  --taupe: #A08670;
  --ivory: #FFF9F3;

  /* Paper and board */
  --paper: #F7F0E6;
  --table: #F3EDE5; /* the cream backdrop of Rose's countdown photograph (sampled 2026-09-14) */
  --folder: #5E6148;
  --envelope: #6F7259;
  --ink: var(--espresso);
  --sheet-bg: var(--ivory);
  --ease: cubic-bezier(.42, 0, .58, 1); /* easy ease */
  --champagne: #EFE3D1;
  /* Getting There: a sage-tinted paper, so Travel is the one cool card between the olive board and
     the ivory RSVP (Rose asked for a new colour, round 9). Espresso on it 9.8, Bronze 5.4. */
  --travel-paper: #E4E7DA;
  --mat: #FFFDF8;

  --display: "Italiana", Didot, "Bodoni 72", "Libre Bodoni", "Times New Roman", serif;
  --text: "EB Garamond", Garamond, "Adobe Garamond Pro", Baskerville, Georgia, serif;

  /* Deckled edge (px offsets keep the tear the same size on tall and short cards) */
  --deckle: polygon(0.0% 2.3px, 3.0% 4.6px, 5.8% 3.8px, 9.6% 0.4px, 13.8% 0.3px, 17.9% 0.5px, 20.7% 3.0px, 26.1% 0.9px, 29.3% 4.4px, 35.2% 4.0px, 39.1% 6.8px, 41.7% 6.0px, 45.2% 1.0px, 48.1% 2.2px, 53.5% 1.3px, 58.0% 4.5px, 61.8% 3.8px, 64.6% 0.4px, 67.8% 4.8px, 71.8% 2.2px, 76.3% 3.2px, 79.9% 5.6px, 84.8% 1.7px, 89.3% 3.7px, 94.9% 5.1px, 98.4% 6.9px, calc(100% - 2.1px) 2.0%, calc(100% - 0.8px) 9.8%, calc(100% - 0.2px) 16.2%, calc(100% - 3.8px) 23.6%, calc(100% - 4.4px) 30.4%, calc(100% - 3.5px) 36.0%, calc(100% - 2.9px) 43.0%, calc(100% - 4.2px) 49.3%, calc(100% - 2.4px) 58.0%, calc(100% - 0.3px) 65.3%, calc(100% - 3.2px) 72.8%, calc(100% - 4.1px) 81.8%, calc(100% - 1.9px) 87.2%, calc(100% - 0.1px) 94.5%, 100.0% calc(100% - 1.3px), 97.1% calc(100% - 0.5px), 91.9% calc(100% - 1.0px), 88.5% calc(100% - 3.1px), 83.0% calc(100% - 0.6px), 78.9% calc(100% - 4.4px), 73.3% calc(100% - 6.6px), 67.8% calc(100% - 2.2px), 63.8% calc(100% - 2.9px), 58.2% calc(100% - 7.7px), 55.2% calc(100% - 1.4px), 51.9% calc(100% - 1.9px), 47.7% calc(100% - 4.7px), 44.3% calc(100% - 0.0px), 40.3% calc(100% - 3.0px), 35.8% calc(100% - 7.6px), 30.9% calc(100% - 4.1px), 26.3% calc(100% - 5.4px), 23.6% calc(100% - 7.2px), 18.3% calc(100% - 7.0px), 13.1% calc(100% - 3.1px), 9.2% calc(100% - 0.8px), 4.4% calc(100% - 0.5px), 1.7% calc(100% - 1.7px), 1.7px 98.0%, 0.0px 93.7%, 0.5px 89.0%, 0.1px 83.2%, 3.1px 74.8%, 1.3px 70.0%, 1.8px 64.3%, 4.2px 59.7%, 2.3px 50.7%, 0.4px 44.3%, 1.7px 39.8%, 4.1px 34.5%, 0.1px 29.7%, 2.6px 20.9%, 2.7px 16.2%, 2.6px 12.0%, 4.3px 3.2%);

  /* Cotton-paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .27 0 0 0 0 .2 0 0 0 0 .14 .3 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");

  /* White embroidered lace, knocked back so it reads as a tone-on-tone ground */
  --texture: url("art/envelope-texture.webp");

  --lace:
    linear-gradient(rgba(247, 240, 230, .76), rgba(247, 240, 230, .76)),
    url("art/lace.webp") 50% 0 / 450px auto;

}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
#top { scroll-margin-top: 44px; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 44px 8px 28px;
  color: var(--ink);
  background: var(--lace), var(--paper);
  font: 400 1.125rem/1.6 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
body.has-cover { overflow: hidden; }
html:has(body.has-cover) { overflow: hidden; }

p, h1, h2, h3, address { margin: 0; }
/* no one-word last lines on the short centred paragraphs */
p, address { text-wrap: pretty; }
.sheet p, .open p, .sheet address, .hero .intro { text-wrap: balance; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--mauve); }

:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Shared type ---------- */

/* Small capitals: always Garamond 600, never Italiana */
.label {
  font: 600 .9375rem/1.35 var(--text); /* round 13 (Rose, 2026-09-29): 13 → 15px, tracking .2 → .16em; her mother zoomed to read the card */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-left: .2em;
}

.amp {
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  color: var(--bronze);
}

.to {
  max-width: 100%;
  font: italic 500 1.125rem/1.3 var(--text);
  color: var(--mauve);
  overflow-wrap: anywhere;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px 10px;
  font: 600 .875rem/1.2 var(--text); /* round 13: 13 → 14px */
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 1px;
  transition: background-color .25s ease, color .25s ease;
}
.btn-line { color: var(--espresso); background: rgba(255, 249, 243, .7); box-shadow: inset 0 0 0 1px rgba(114, 88, 62, .6); }
.btn-line:hover { background: rgba(114, 88, 62, .08); }

/* Mauve with a printed inner hairline, like a letterpress border */
.btn-wine {
  min-height: 56px;
  min-width: 11rem;
  padding: 14px 40px 13px;
  font-size: .9375rem;
  letter-spacing: .3em;
  color: var(--ivory);
  background: var(--mauve);
  box-shadow: inset 0 0 0 4px var(--mauve), inset 0 0 0 5px rgba(255, 249, 243, .45);
}
.btn-wine:hover { background: var(--espresso); box-shadow: inset 0 0 0 4px var(--espresso), inset 0 0 0 5px rgba(255, 249, 243, .45); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-style: italic;
  font-weight: 500;
  font-size: 1.125rem; /* round 13: 17 → 18px */
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(117, 81, 81, .45);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Intro cover: a textured sage envelope on white lace ---------- */

.cover { display: none; }

.js .cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 0;
  overflow: hidden;
  background: var(--lace), var(--paper);
  transition: opacity .7s var(--ease) 2.75s, visibility 0s linear 3.45s;
}

.cover-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  /* Round 12f (Rose, 2026-09-21): the envelope's size, written once so the desktop recentring below can use its height */
  --env-w: min(104vw, 68vh);
  --env-h: calc(var(--env-w) * 5 / 7);
}

/* The envelope, seen from the back: the far panel, the card in its window, a solid front pocket and a
   two-sided flap. Stacking: back (0) · pocket (2) · card window (3) · flap and its shadow (4, then 1 once open) · seal (5).
   No filter sits on .envelope, because a filter would flatten the flap's 3D turn. */
.envelope {
  /* A pointed-flap (announcement) envelope: the flap is a deep triangle and the pocket's throat is cut
     on the same angle, one step shallower. Both are set here so they can never drift apart. */
  --flap: 62%;
  --throat: 38%;
  --tip: 6px; /* Round 12e (Rose, 2026-09-19): the flap's point is very slightly rounded; the arc is the same on both faces, the shadow and the liner */
  position: relative;
  /* Wider than the phone on purpose: the envelope may crop, the flap stays big (Rose, round 9).
     Round 12f (Rose, 2026-09-21): on desktop the cap was 92vh, and the opened card (which rises 0.36 of the
     envelope's height above it) then ran off the top of the screen. The composition with the card up is 1.56
     envelope heights tall, so 68vh keeps it on screen from 768px of height up. The envelope is also the
     container the card's type is measured against (cqw below), so the card fills at any size. */
  width: var(--env-w);
  container-type: inline-size;
  aspect-ratio: 7 / 5;
  perspective: 800px; /* close enough that the flap visibly lifts towards you as it turns */
  transition: transform 1.1s var(--ease) 1.5s;
}

.env-shadow {
  position: absolute;
  inset: 0;
  box-shadow: 0 18px 30px -10px rgba(68, 50, 35, .32), 0 2px 3px rgba(68, 50, 35, .18);
}

/* Rose's paper textures (matelassé relief, watercolour tooth, fibres) pressed into the sage */
.env-back, .env-pocket, .flap-out {
  background-blend-mode: soft-light, normal;
}
.env-back {
  position: absolute;
  inset: 0;
  background: var(--texture) 50% 0 / 100% auto, #5C5F47;
}

/* The window the card is seen through: everything above the envelope, plus the pocket's throat.
   Round 10 (2026-09-18): the throat cut used to sit on the pocket, in front of the card. Rose's recording
   showed that cut being lost whenever anything animated (the pocket painted as a solid rectangle while the
   flap turned and while the card rose, and the V only snapped in once every transition had ended), so the
   card seemed to ignore the envelope. Cutting the card's own ancestor keeps the reveal exact while it moves.
   The window is twice the envelope's height, so 50% here is the envelope's top edge. */
.env-window {
  position: absolute;
  left: 0; right: 0;
  top: -100%; bottom: 0;
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% calc(50% + var(--throat) / 2), 0 50%);
  pointer-events: none;
}
.env-card {
  position: absolute;
  left: 6%; right: 6%;
  top: 53%; height: 43%; /* 6% and 86% of the envelope, measured in the window */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 16px 14px 0;
  /* Round 12f: everything on the card is measured against the envelope's width (1cqw = 1% of it), with the
     phone's pixel values as the floor, so a phone renders exactly as before and a desktop card is filled.
     The phone reference: envelope 104vw at 390px = 405.6px, so 1cqw = 4.06px there. */
  gap: max(4px, 1cqw);
  padding: max(16px, 4cqw) max(14px, 3.5cqw) 0;
  text-align: center;
  color: var(--ink);
  background: var(--grain), var(--ivory);
  box-shadow: 0 -1px 4px rgba(40, 30, 20, .18);
  transition: transform 1.1s var(--ease) 1.5s;
}
.env-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  inset: max(6px, 1.5cqw);
  border: 1px solid rgba(114, 88, 62, .4);
  pointer-events: none;
}
.env-names {
  font: 400 clamp(2.2rem, 10.4vw, 2.75rem)/1.1 var(--display); /* a touch larger since round 11 */
  font-size: clamp(2.2rem, 10cqw, 6rem); /* round 12f: 10.4vw on a phone = 10cqw; no longer capped at 2.75rem */
  color: var(--espresso);
}
.env-card .label { font-size: max(.9375rem, 3.2cqw); }
.env-names .amp { font-size: .8em; }
/* Round 11 (Rose, 2026-09-18): the revealed card read as mostly blank. Below the date: a double hairline,
   "Lodi, California" in small italics, and the bronze seal pressed on the card. They sit in the top 72%,
   which is the part that leaves the envelope; the bottom stays in the pocket. */
.env-region {
  font: italic 500 1.0625rem/1.3 var(--text);
  font-size: max(1.0625rem, 4.2cqw);
  color: var(--bronze);
}
.env-region::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 4px auto 8px;
  width: max(44px, 10.8cqw);
  height: max(4px, 1cqw);
  margin: max(4px, 1cqw) auto max(8px, 2cqw);
  border-block: 1px solid rgba(114, 88, 62, .5);
}
.env-seal {
  width: clamp(48px, 13.5vw, 66px);
  margin-top: 8px;
  width: clamp(48px, 13cqw, 128px);
  margin-top: max(8px, 2cqw);
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 2px rgba(40, 28, 18, .3)) drop-shadow(0 5px 6px rgba(40, 28, 18, .15));
}

/* The front pocket. Its top edge is cut as a V on the same angle as the flap, so once the flap lifts
   the card is revealed through a pointed throat: it appears at the centre point first and widens
   outwards, the way a pointed-flap envelope actually opens (Rose, round 9). The V is shallower than
   the flap, so the closed flap covers it completely. The back of the pocket shows the bottom flap's two
   folded edges, from the bottom corners up to a point just below the centre (round 12d: a dark edge with a
   light edge beside it, so they read as folds in the paper and not as drawn lines). */
.env-pocket {
  position: absolute;
  inset: 0;
  z-index: 2; /* behind the card's window since round 10; its own cut only shows the envelope's inside below the card */
  clip-path: polygon(0 0, 50% var(--throat), 100% 0, 100% 100%, 0 100%);
  background: var(--texture) 50% 0 / 100% auto, var(--envelope);
}
.env-pocket::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top left, transparent calc(50% - 1.6px), rgba(255, 249, 243, .28) calc(50% - .9px), rgba(40, 42, 28, .55) calc(50% - .1px), rgba(40, 42, 28, .55) calc(50% + .6px), transparent calc(50% + 1.3px)) 0 100% / 50% 46% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 1.6px), rgba(255, 249, 243, .28) calc(50% - .9px), rgba(40, 42, 28, .55) calc(50% - .1px), rgba(40, 42, 28, .55) calc(50% + .6px), transparent calc(50% + 1.3px)) 100% 100% / 50% 46% no-repeat;
}
/* The cut edges of the throat, caught in the light, so the V reads as an edge and not as a colour change.
   Round 12d: the two gradients were on the wrong diagonals (an inverted V from the top centre out to the sides),
   which is what showed as white lines from the side edges while the envelope was still closed. */
.env-pocket::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--throat);
  background:
    linear-gradient(to bottom right, transparent calc(50% - 2.4px), rgba(255, 249, 243, .5) calc(50% - 1.2px), transparent calc(50% - .2px)) 100% 0 / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 2.4px), rgba(255, 249, 243, .5) calc(50% - 1.2px), transparent calc(50% - .2px)) 0 0 / 50% 100% no-repeat;
  pointer-events: none;
}

/* A crisp shadow line under the flap's two cut edges; it is left out of the 3D flap so nothing flickers */
.flap-shadow {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--flap);
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, calc(50% + -0.749 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.663 * var(--tip)), calc(50% + -0.593 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.805 * var(--tip)), calc(50% + -0.410 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.912 * var(--tip)), calc(50% + -0.210 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.978 * var(--tip)), 50% calc(100% - 1.336 * var(--tip) + 1.000 * var(--tip)), calc(50% + 0.210 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.978 * var(--tip)), calc(50% + 0.410 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.912 * var(--tip)), calc(50% + 0.593 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.805 * var(--tip)), calc(50% + 0.749 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.663 * var(--tip)));
  transform: translateY(4px);
  background: rgba(30, 32, 20, .24);
  transition: opacity .25s var(--ease) .35s;
}

/* The flap turns up over its top edge. Each face hides its back, so the sage shows first and the fig lining after. */
.env-flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--flap);
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  /* once it is fully open it drops behind the card, which then slides up over it */
  transition: transform 1.1s var(--ease) .35s, z-index 0s linear 1.45s;
}
.flap-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Its own piece of paper: a shade darker than the pocket, the texture read from the other end, and a fine
   hairline just inside both cut edges, so the flap stays visible against the pocket all the way through its turn. */
.flap-out {
  clip-path: polygon(0 0, 100% 0, calc(50% + -0.749 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.663 * var(--tip)), calc(50% + -0.593 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.805 * var(--tip)), calc(50% + -0.410 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.912 * var(--tip)), calc(50% + -0.210 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.978 * var(--tip)), 50% calc(100% - 1.336 * var(--tip) + 1.000 * var(--tip)), calc(50% + 0.210 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.978 * var(--tip)), calc(50% + 0.410 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.912 * var(--tip)), calc(50% + 0.593 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.805 * var(--tip)), calc(50% + 0.749 * var(--tip)) calc(100% - 1.336 * var(--tip) + 0.663 * var(--tip)));
  background:
    linear-gradient(to bottom left, transparent calc(50% - 2.5px), rgba(30, 32, 20, .42) calc(50% - 1.5px), transparent calc(50% - .5px)) 0 0 / 50% 100% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 2.5px), rgba(30, 32, 20, .42) calc(50% - 1.5px), transparent calc(50% - .5px)) 100% 0 / 50% 100% no-repeat,
    var(--texture) 50% 100% / 100% auto,
    #61644B;
  background-blend-mode: normal, normal, soft-light, normal;
}
/* shading: the outside darkens as it tilts away from the light, the lining brightens as it settles open */
.flap-out::after, .flap-in::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease) .35s;
}
.flap-out::after { background: linear-gradient(rgba(20, 22, 12, .08), rgba(20, 22, 12, .5)); opacity: 0; }
.flap-in::after { background: linear-gradient(rgba(20, 22, 12, .45), rgba(20, 22, 12, .1)); opacity: 1; transition-delay: .9s; }
body.is-open .flap-out::after { opacity: 1; }
body.is-open .flap-in::after { opacity: 0; }
.flap-in {
  clip-path: polygon(calc(50% + -0.749 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.663 * var(--tip)), calc(50% + -0.593 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.805 * var(--tip)), calc(50% + -0.410 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.912 * var(--tip)), calc(50% + -0.210 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.978 * var(--tip)), 50% calc(0% + 1.336 * var(--tip) - 1.000 * var(--tip)), calc(50% + 0.210 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.978 * var(--tip)), calc(50% + 0.410 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.912 * var(--tip)), calc(50% + 0.593 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.805 * var(--tip)), calc(50% + 0.749 * var(--tip)) calc(0% + 1.336 * var(--tip) - 0.663 * var(--tip)), 100% 100%, 0 100%); /* drawn point-up, because the face is turned over; the point is the same small arc */
  transform: rotateX(180deg);
  /* Round 12d (Rose, 2026-09-19): the inside of the flap is the sage paper, and the fig liner sits inside it with a
     border of envelope showing along both cut edges, the way a lined envelope is made; only the fold edge runs
     liner to liner. The liner is the ::before so the shading ::after still covers the whole face. */
  background: var(--texture) 50% 100% / 100% auto, #666951;
  background-blend-mode: soft-light, normal;
}
.flap-in::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(calc(50% + -0.749 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.663 * var(--tip)), calc(50% + -0.593 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.805 * var(--tip)), calc(50% + -0.410 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.912 * var(--tip)), calc(50% + -0.210 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.978 * var(--tip)), 50% calc(14% + 1.336 * var(--tip) - 1.000 * var(--tip)), calc(50% + 0.210 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.978 * var(--tip)), calc(50% + 0.410 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.912 * var(--tip)), calc(50% + 0.593 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.805 * var(--tip)), calc(50% + 0.749 * var(--tip)) calc(14% + 1.336 * var(--tip) - 0.663 * var(--tip)), 93% 100%, 7% 100%);
  background: url("art/fig-print.webp") 50% 40% / cover, var(--olive);
  box-shadow: inset 0 0 0 1px rgba(30, 32, 20, .25);
}

/* Rose's bronze seal: level, and sitting on the point of the flap the way a real seal does */
.seal {
  position: absolute;
  left: 50%;
  top: var(--flap);
  z-index: 5;
  width: clamp(96px, 28vw, 136px);
  height: clamp(96px, 28vw, 136px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), opacity .6s var(--ease);
}
.seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(40, 28, 18, .35)) drop-shadow(0 1px 1px rgba(40, 28, 18, .3));
}
.seal:hover, .seal:focus-visible { transform: translate(-50%, -50%) rotate(-8deg) scale(1.03); }
.seal:focus-visible { outline-offset: 4px; }

.cover-hint { color: var(--espresso); transition: opacity .5s var(--ease); }

/* Opening, easy ease throughout (about 3.5s): the seal lifts (0-0.6s), the flap turns up (0.35-1.45s),
   the card slides out as the envelope settles (1.5-2.6s), then the cover fades (2.75-3.45s) */
body.is-open .seal { opacity: 0; transform: translate(-50%, -64%) scale(1.06); pointer-events: none; }
body.is-open .flap-shadow { opacity: 0; }
body.is-open .env-flap { transform: rotateX(180deg); z-index: 1; }
body.is-open .env-card { transform: translateY(-72%); }
body.is-open .envelope { transform: translateY(20%); }
body.is-open .cover-hint { opacity: 0; }
body.is-open .cover { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- The olive pocketfold ---------- */

.folder {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 50px 10px 8px;
  border-radius: 3px;
  background: var(--grain), var(--folder);
  box-shadow: inset 0 0 0 6px var(--folder), inset 0 0 0 7px rgba(255, 249, 243, .22), 0 18px 30px -18px rgba(68, 50, 35, .45);
}

/* An insert: a sheet in normal document flow. The tabs were removed in round 8 (Rose, 2026-09-15):
   Travel and RSVP say so in an eyebrow above their titles instead, and the hero's date tab is gone. */
.insert {
  position: relative;
  margin: 0 6px 50px 0;
  filter: drop-shadow(0 1px 1px rgba(30, 32, 20, .22)) drop-shadow(0 8px 12px rgba(30, 32, 20, .18));
}
.insert:nth-of-type(even) { margin: 0 0 50px 6px; }

.sheet {
  position: relative;
  padding: 60px 24px 38px; /* 60px above every section title: the standard top (Rose, 2026-09-14) */
  text-align: center;
  background: var(--grain), var(--sheet-bg);
}
/* Deckled edge: the opening card and the RSVP only */
.deckle { clip-path: var(--deckle); }
/* thin double-rule frame */
.sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(114, 88, 62, .34);
  box-shadow: inset 0 0 0 3px var(--sheet-bg), inset 0 0 0 4px rgba(124, 121, 96, .3);
  pointer-events: none;
}
.sheet > * { position: relative; }

h2 {
  font: 400 clamp(2rem, 8.6vw, 2.4rem)/1.1 var(--display);
  letter-spacing: .01em;
  color: var(--espresso);
}
/* Italiana has one weight. Below the h1 names its hairlines get a fine stroke in their own colour
   so the high contrast holds up (Rose, 2026-09-14). The h1 names stay unstroked. */
.env-names, h2, .oval-date, .cd-n, .venue .place { -webkit-text-stroke: .45px currentColor; }
.env-names .amp { -webkit-text-stroke: 0; }

/* hairline double divider under section headings */
h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px auto 0;
  border-block: 1px solid rgba(114, 88, 62, .5);
}

/* Eyebrow above a section title, in place of the old tabs (Rose, round 8): the shared small capitals,
   so Travel and RSVP still name themselves. The sheet's 60px top now falls above the eyebrow. */
.eyebrow { margin-bottom: 12px; }

.aside { margin-top: 18px; font-style: normal; font-weight: 500; font-size: 1.125rem; color: var(--bronze); } /* round 13: upright, 17 → 18px */

/* ---------- Address slip (round 12) ----------
   A small straight slip of champagne paper tucked in after the hero: narrower than the cards, a shallower
   top than the 60px section standard because it carries no title, and the shared double-rule frame. */

.slip { margin-inline: 18px 24px; }
.slip .sheet { --sheet-bg: var(--champagne); padding: 26px 22px 24px; }
.slip .sheet::before { inset: 8px; }
.slip .eyebrow { margin-bottom: 8px; }
.slip-prompt { max-width: 26ch; margin: 0 auto 16px; font: italic 500 1.1875rem/1.5 var(--text); color: var(--espresso); } /* round 13: 18 → 19px */
.slip-note { margin-top: 12px; font-size: 1.0625rem; font-style: normal; font-weight: 500; color: var(--bronze); } /* round 13: upright, 15 → 17px */

/* ---------- Hero ---------- */

.hero .sheet { padding: 60px 22px 44px; }

/* Rose's lace corner, laid on the top left of the card. Its straight (cropped) edges sit on the
   card's own edges, so none of the cut shows; only the scalloped side falls across the card. */
.lace {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 120px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(68, 50, 35, .18));
}

.hero-to { margin: 0 64px 10px; }

.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  font-weight: 400;
  color: var(--espresso);
}
.names .name { font: 400 clamp(3.6rem, 19vw, 4.75rem)/.95 var(--display); }
.names .amp { font-size: clamp(2rem, 10vw, 2.5rem); line-height: 1.05; }

.date-block { position: relative; margin: 26px auto 0; width: max-content; }

/* Double hairline oval, filled with the white lace */
.oval {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 192px;
  height: 238px;
  margin: 0 auto;
  padding-bottom: 12px;
  border-radius: 50%;
  border: 1px solid rgba(114, 88, 62, .6);
  background: linear-gradient(rgba(255, 249, 243, .82), rgba(255, 249, 243, .82)), url("art/lace.webp") 50% 40% / 280px auto, var(--paper);
}
.oval::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(124, 121, 96, .5);
}
.oval-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: 400 3rem/1 var(--display);
  color: var(--espresso);
}
.oval-date::before, .oval-date::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(114, 88, 62, .5);
}
/* The "y" in "May" reaches down to within 3.5px of the lower hairline, so it read as closer than the
   upper one (the capitals sit 14.9px below that). 11px more puts the ink the same distance from both. */
.oval-date::after { margin-top: 11px; }

/* The seal pressed where the oval meets the card */
.seal-press {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 66px;
  transform: translateX(-50%) rotate(-8deg);
  filter: drop-shadow(0 2px 2px rgba(40, 28, 18, .3)) drop-shadow(0 5px 6px rgba(40, 28, 18, .15));
}

.region { margin-top: 48px; }
.intro {
  max-width: 28ch;
  margin: 14px auto 0;
  font-style: italic; /* round 13: the voice keeps its italic, half a weight heavier and larger (20 → 22px) */
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.5;
}

/* Round 12h (Rose, 2026-09-22): a small "keep scrolling" prompt in the sage under the opening card, desktop only —
   on a phone the next card is already in view. Ivory type at three-quarters, a hairline chevron beneath, a slow
   nod; it sits 8px under the card and takes its room out of the card's 64px desktop margin (8 + 24 + 32),
   so the address slip does not move. On screens under 820px tall the opening card's bottom padding is
   trimmed so the prompt clears the fold. */
.scroll-hint { display: none; }
@media (min-width: 900px) {
  .hero.insert { margin-bottom: 8px; }
  .scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 24px;
    margin: 0 0 32px;
    font: 600 .6875rem/1 var(--text);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 249, 243, .75);
  }
  .scroll-hint::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1px solid rgba(255, 249, 243, .75);
    border-bottom: 1px solid rgba(255, 249, 243, .75);
    transform: rotate(45deg);
    animation: scroll-nod 2.4s var(--ease) infinite;
  }
  @keyframes scroll-nod {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(4px) rotate(45deg); }
  }
}

/* The stacked cards and the parallax board were removed in round 9 (Rose, 2026-09-15): they were glitchy
   on a phone. Every card now sits in normal flow and arrives with the same quiet reveal (see the end). */

/* ---------- Countdown: Rose's photograph filling a deckled card ---------- */

.sheet-table {
  --sheet-bg: var(--table);
  /* The photo fills the card (cover, anchored to the bottom). Its flowers start about halfway down,
     so the card is made tall enough that they always sit below the buttons. */
  padding-bottom: 132%;
  background: url("art/countdown-flowers.webp") 50% 100% / cover no-repeat, var(--table);
}

.lede { margin-top: 12px; font-style: normal; font-weight: 500; font-size: 1.125rem; color: var(--bronze); } /* round 13: upright, 17 → 18px */

.count {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 360px;
  margin: 34px auto 54px; /* the countdown is the focus; the buttons drop towards the bouquet */
}
.cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cd + .cd { border-left: 1px solid rgba(114, 88, 62, .3); }
.cd-n {
  font: 400 clamp(2.6rem, 12.5vw, 3.5rem)/1 var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--espresso);
}
.cd-u {
  font: 600 .75rem/1 var(--text); /* round 13: 11 → 12px */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze);
}
.count.is-done .cd-n { color: var(--mauve); }

.btn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.btn-row .btn { width: 100%; max-width: 250px; min-height: 42px; padding: 9px 14px 8px; font-size: .875rem; letter-spacing: .12em; } /* round 13: 12 → 14px */

/* ---------- Venues ---------- */

/* The fig engraving as a board, with a scalloped card laid in the middle of it */
.board {
  overflow: hidden;
  padding: 64px 22px; /* even on every side, so the card sits centred on the engraving */
  background: var(--olive);
}
/* the engraving sits on its own layer, filling the board (it no longer drifts: round 9) */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("art/fig-print.webp") 50% 30% / cover;
}
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 249, 243, .35);
  pointer-events: none;
}
.scallop-shadow { position: relative; z-index: 1; }
.scallop-shadow { filter: drop-shadow(0 2px 2px rgba(30, 24, 16, .25)) drop-shadow(0 10px 14px rgba(30, 24, 16, .22)); }
.scallop {
  --r: 8px;
  padding: 64px 38px 40px; /* the standard 60px top, plus the scallop's deeper frame; sides widened in round 11 so the text clears the frame on a phone */
  -webkit-mask:
    radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
  mask:
    radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
}
.scallop::before { inset: 17px; }

.venue { margin-top: 26px; }
.venue + .venue {
  margin-top: 28px;
  padding-top: 30px;
  background: linear-gradient(rgba(114, 88, 62, .4), rgba(114, 88, 62, .4)) top center / 120px 1px no-repeat;
}
.venue .place {
  margin-top: 8px;
  font: 400 1.875rem/1.15 var(--display);
  color: var(--espresso);
}
.venue .where { margin-top: 4px; font-size: 1.125rem; font-weight: 500; color: var(--bronze); } /* round 13: 17 → 18px */
.venue .note { max-width: 30ch; margin: 10px auto 0; font-style: normal; font-weight: 500; font-size: 1.1875rem; line-height: 1.55; } /* round 13: upright, 18 → 19px */
.venue .btn { margin-top: 16px; }

/* ---------- Attire: fabric pinned straight onto the folder ---------- */

.open {
  padding: 8px 6px 40px;
  text-align: center;
  color: var(--ivory);
  filter: none;
}
.open h2 { color: var(--ivory); }
.open h2::after { border-color: rgba(255, 249, 243, .55); }

.attire-code {
  margin-top: 16px;
  font: italic 500 1.625rem/1.2 var(--text);
  color: var(--ivory);
}
/* wider and a touch heavier: light text on olive reads thin */
.open .attire-note { max-width: 40ch; margin: 12px auto 0; font-weight: 500; font-size: 1.1875rem; line-height: 1.65; text-wrap: pretty; } /* round 13: 18 → 19px */
/* Round 10 (Rose, 2026-09-18): the "match us" line is bolder and larger than the attire note above it */
.palette-note {
  max-width: 30ch;
  margin: 22px auto 0;
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
}

/* A scalloped piece of white lace laid under the swatches */
.swatch-board { position: relative; margin: 22px -4px 0; padding: 34px 6px 30px; }
.cloth-shadow {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 1px 1px rgba(20, 22, 12, .3)) drop-shadow(0 10px 14px rgba(20, 22, 12, .28));
}
.cloth {
  --r: 10px;
  width: 100%;
  height: 100%;
  transform: rotate(-1.5deg);
  background: linear-gradient(rgba(255, 249, 243, .22), rgba(255, 249, 243, .22)), url("art/lace.webp") 50% 0 / 240px auto, #EDE7DE;
  -webkit-mask:
    radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
  mask:
    radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
}

/* A loose, overlapping stack of pinked satin swatches, each with a paper name tag */
.palette {
  list-style: none;
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.palette li {
  position: relative;
  width: 50%;
  margin: 0 -2% -22px;
  filter: drop-shadow(0 1px 1px rgba(20, 22, 12, .3)) drop-shadow(0 7px 9px rgba(20, 22, 12, .3));
}
/* Right column above the left; right-column tags on their right edge and left-column tags on their left,
   so a long tag (Dark Chocolate) can run across the overlap without being covered */
.palette li:nth-child(odd) { z-index: 1; }
.palette li:nth-child(even) { z-index: 2; }
/* a swatch left alone on the last row sits on top, so the row above cannot cover its tag */
.palette li:last-child:nth-child(odd) { z-index: 3; }
.palette li:nth-child(even) .swatch-name { left: auto; right: 10px; }
.palette li:nth-child(4n+1) { transform: rotate(-4deg); }
.palette li:nth-child(4n+2) { transform: translateY(16px) rotate(3deg); }
.palette li:nth-child(4n+3) { transform: rotate(2.5deg); }
.palette li:nth-child(4n+4) { transform: translateY(16px) rotate(-3deg); }
.swatch {
  display: block;
  aspect-ratio: 4 / 3;
  /* satin sheen, no weave or grid */
  background: linear-gradient(118deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .14)), var(--swatch);
  /* pinked top and bottom edges */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 8px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 51% repeat-x;
}
.swatch-name {
  position: absolute;
  top: 12px;
  left: 10px;
  padding: 4px 8px 3px;
  font: 600 .8125rem/1.2 var(--text); /* round 13: 12 → 13px */
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--espresso);
  background: var(--ivory);
  box-shadow: 0 1px 2px rgba(20, 22, 12, .25);
}

/* ---------- Travel: a cloth board with a straight-cut card laid on it ----------
   Rose, round 9b: Getting There should be its own kind of section, the way the countdown is a photo print
   and The Celebration is a board. So it is built like The Celebration but in cloth — her sage envelope
   texture as the board, and a straight-cut card (no deckle, no scallop) in travel paper on top. */

.travel-board { background: var(--envelope); }
.travel-board::before { background: var(--texture) 50% 50% / cover; }
/* Round 10 (Rose, 2026-09-18): the card on the cloth is the same ivory as Raise a Glass, not the sage travel paper */
.travel-board .sheet { --sheet-bg: var(--ivory); }

.travel h3 { margin: 26px 0 6px; }
.travel h2 + h3 { margin-top: 24px; }
.travel p { max-width: 32ch; margin-inline: auto; }

.hotels { list-style: none; margin: 0 auto; padding: 0; max-width: 32ch; }
.hotels li {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.hotels li + li { border-top: 1px solid rgba(114, 88, 62, .28); }
.hotels strong { font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--espresso); }
.hotels span { font-style: normal; font-weight: 500; font-size: 1.0625rem; color: var(--bronze); } /* round 13: upright, 16 → 17px */

/* ---------- RSVP ---------- */

.rsvp-prompt { max-width: 26ch; margin: 16px auto 22px; font-style: italic; font-weight: 500; font-size: 1.3125rem; line-height: 1.5; } /* round 13: 20 → 21px, weight 500 */
.rsvp-note { max-width: 32ch; margin: 22px auto 0; font-size: 1.125rem; font-weight: 500; } /* round 13: 17 → 18px, weight 500 */
.rsvp .aside { margin-top: 10px; }
.rsvp .text-link { margin-top: 4px; }

/* ---------- Footer on the folder ---------- */

.foot { padding: 4px 0 40px; text-align: center; color: var(--ivory); }
.mono { width: 58px; margin: 0 auto 14px; opacity: .92; }
.foot-date { font-style: italic; font-weight: 500; font-size: 1.125rem; } /* round 13: 17 → 18px */

/* Back to top: a hairline arrow in a thin ring */
.to-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 4px 8px;
  color: var(--ivory);
  text-decoration: none;
  font: 600 .75rem/1.2 var(--text);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.to-top span { padding-left: .2em; }
.to-top svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 249, 243, .6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background-color .25s ease;
}
.to-top:hover svg { background: rgba(255, 249, 243, .1); }
.foot :focus-visible { outline-color: var(--ivory); }

/* ---------- The arrival of each card (content stays visible without JS) ----------
   Round 9: this is the only scroll effect left. Opacity and transform only, on one element per card,
   so a phone composites it without repainting the paper textures underneath. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px) scale(.992);
  transition: opacity .75s var(--ease), transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* The things inside a card follow it in, a beat later, so the card reads as paper first and words after */
.js [data-reveal] .sheet > *,
.js [data-reveal] > h2,
.js [data-reveal] > p,
.js [data-reveal] > .swatch-board {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease) .18s, transform .6s var(--ease) .18s;
}
.js [data-reveal].in .sheet > *,
.js [data-reveal].in > h2,
.js [data-reveal].in > p,
.js [data-reveal].in > .swatch-board { opacity: 1; transform: none; }

/* Touch feedback: a tap presses the paper buttons and lifts a swatch, so the page answers a finger */
.btn:active { transform: translateY(1px); }
.palette li { transition: transform .25s var(--ease); }
.palette li:active { transform: translateY(-3px); }

/* ---------- Larger screens ---------- */

@media (min-width: 420px) {
  .sheet { padding-inline: 34px; }
  .hero .sheet { padding-inline: 30px; }
  .scallop { padding-inline: 44px; }
  .board { padding: 96px 56px; }
}

@media (min-width: 600px) {
  body { padding: 72px 24px 56px; }
  .folder { padding: 56px 16px 10px; }
  .oval { width: 208px; height: 256px; }
  .lace { width: 150px; }
  .sheet-table { padding-bottom: 105%; }
}

/* Desktop: the whole pocketfold is held bigger in the viewport (Rose, round 9) — a wider folder,
   larger body type, and everything that is sized in rem or ch grows with it. */
@media (min-width: 900px) {
  /* Round 12g (Rose, 2026-09-21): the whole opening card fits the screen once the envelope is gone.
     The gap above the folder was 88 + 64 = 152px and the card ran 844px at 1440×900, so its foot was off
     screen. Now 24 + 28 above, 56 inside, and the names, oval and lace also scale with the screen's height
     (7vh, 28vh, 20vh, each capped at its old size), so the card fits from a 768px-tall laptop up. */
  body { padding: 24px 24px 64px; font-size: 1.25rem; }
  .slip { margin-inline: 48px 54px; }
  .slip .sheet { padding: 36px 40px 34px; }
  .folder { max-width: 720px; padding: 28px 20px 14px; }
  .sheet { padding: 76px 54px 52px; }
  .sheet-table { padding-bottom: 105%; } /* round 12h (Rose, 2026-09-22): the .sheet shorthand above had been overriding the countdown card's photo height since round 9, so on desktop the title sat over the bouquet; this restores the phone's proportions */
  .hero .sheet { padding: 56px 48px 58px; }
  .scallop { padding: 80px 56px 54px; }
  h2 { font-size: 3rem; }
  .names { font-size: clamp(3.4rem, 5.6vw, 4.4rem); }
  .names .name { font-size: clamp(3rem, min(19vw, 7vh), 4.75rem); }
  .oval { --oval-h: clamp(220px, 28vh, 300px); width: calc(var(--oval-h) * .827); height: var(--oval-h); }
  .oval-date { font-size: calc(var(--oval-h) * .16); }
  .lace { width: clamp(140px, 20vh, 186px); }
  .region { margin-top: 36px; }
  .board { padding: 120px 72px; }
  .insert { margin-bottom: 64px; }
  /* Round 12f: centre the opened composition (card up, envelope settled), not the closed envelope. The card
     top sits 0.36 envelope heights above the settled envelope and its bottom 1.2 below, so the envelope at
     rest goes 0.08 heights + 29px lower than dead centre; top padding on a centred flex item moves it by half. */
  .cover-inner { padding-top: calc(0.16 * var(--env-h) + 58px); }
}

/* Round 12h: on a short desktop screen the opening card gives up 18px at its foot so the "keep scrolling" prompt
   clears the fold. After the desktop block above so it wins the cascade. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero .sheet { padding-bottom: 40px; }
}

/* ---------- Reduced motion: no animation at all ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .seal:hover, .seal:focus-visible { transform: translate(-50%, -50%) rotate(-8deg); }
}