/* Self-hosted fonts, subset to Latin + Latin Extended-A (fonts/OFL.txt). No third-party requests. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/CormorantGaramond-400.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/CormorantGaramond-600.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/CormorantGaramond-400i.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/Inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/Inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/Inter-600.woff2) format("woff2"); }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/GreatVibes-400.woff2) format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/DancingScript-600.woff2) format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/DancingScript-700.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/Cinzel-var.woff2) format("woff2"); }

/* ============================================================
   Hana & Borna · zimska svadba
   One committed look: deep pine ground, cream paper, antique gold,
   cranberry. No light/dark switch — the invitation looks the same
   for everyone, like the printed one.
   ============================================================ */

:root {
  /* emerald night, champagne gold, burgundy wine, warm ivory — Hana's final palette */
  --pine: #073b29;         /* main background */
  --pine-dark: #03291d;    /* shadows and depth */
  --pine-light: #0b4c36;   /* the soft glow near the top */
  --pine-2: var(--pine-light);
  --cream: #f8f0e3;        /* cards */
  --paper: #efe5d2;        /* envelope */
  --paper-2: #e3d7bf;
  --field: #fffaf0;        /* inputs */
  --ink: #263c34;          /* text inside the cream frames */
  --ink-soft: #4c6258;
  --line: #e4d7bd;
  --gold: #e8d0a3;         /* champagne gold: primary gold type */
  --gold-mid: #d5b981;
  --gold-muted: #c6a365;   /* lines and decorative details */
  --gold-light: #f1cd85;   /* lights */
  --gold-ink: #8a6424;     /* gold as text/links on cream — readable */
  --gold-wash: #f6ecd7;
  --berry: #8b2635;        /* burgundy wine: buttons, times, details */
  --berry-2: #7d2431;      /* deep burgundy: card titles */
  --berry-wash: rgba(139, 38, 53, .08);
  --red: #8b2635;
  --on-pine: #fff0d3;      /* warm ivory on green */
  --on-pine-soft: #e3d2b3;
  --shadow: 0 2px 4px rgba(0, 0, 0, .16), 0 22px 48px rgba(0, 0, 0, .36);
  --radius: 16px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --caps: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;
  --hand: var(--script);
}

* { box-sizing: border-box; }

html { background: var(--pine); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(85% 55% at 50% 14%, var(--pine-light) 0%, var(--pine) 52%, var(--pine-dark) 100%) no-repeat,
    var(--pine-dark);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.has-envelope { overflow: hidden; }

main, .state {
  max-width: 34rem;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 4rem; /* room for the string lights */
  position: relative; z-index: 1;
}

[hidden] { display: none !important; }

/* a faint paper-like grain over the green so it reads as velvet, not flat colour */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* gold stars and hanging stars along the edges (app.js paints them), lanterns bottom-left */
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hanging { position: absolute; top: 0; left: 0; width: 100%; height: 200px; z-index: 0; pointer-events: none; }
.star-twinkle { animation: twinkle 4.2s ease-in-out infinite; }
/* the edge stars are shooting stars: each drifts slowly down, fading in and out, on its own rhythm */
.star-fall { animation: star-fall 10s linear infinite; }
@keyframes star-fall {
  0%   { transform: translateY(-30px); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translateY(70px); opacity: 0; }
}
.lanterns { position: absolute; left: 1rem; bottom: 10px; width: 6rem; height: auto; z-index: 3; pointer-events: none; }
@media (max-width: 40rem) { .lanterns { width: 4.5rem; left: .5rem; } }
.lantern-glow { animation: flicker 3.4s ease-in-out infinite; transform-origin: center; }
.lantern-glow.b { animation-duration: 2.7s; animation-delay: -1.1s; }
@keyframes flicker { 0%, 100% { opacity: .85; } 40% { opacity: .6; } 70% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .lantern-glow, .star-twinkle, .star-fall { animation: none; } }

/* Snow sits above everything and never intercepts input. */
#snow { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* ---------------------------------------------------------- typography */

.display {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.9rem, 13.5vw, 4.9rem);
  line-height: 1.08;
  margin: .55rem 0 .5rem;
  padding: 0 .5rem;
  white-space: nowrap;
  color: var(--on-pine);
  /* a very soft champagne glow, no hard shadow */
  text-shadow: 0 0 20px rgba(232, 208, 163, .32), 0 1px 1px rgba(0, 0, 0, .22);
}

h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--berry-2);
  margin: 0 0 1.1rem;
  padding-bottom: .45rem;
  letter-spacing: .01em;
  /* a short burgundy rule under every card title */
  background: linear-gradient(90deg, var(--berry), rgba(139, 38, 53, .15)) left bottom / 3.75rem 1.5px no-repeat;
}
h2::after { display: none; }
/* small champagne stars either side of the form title (prompt 5) */
#form h2 { display: flex; align-items: center; gap: .55rem; }
#form h2::before, #form h2::after { content: "\2726\FE0E"; display: inline; font-size: .62em; color: var(--gold-muted); line-height: 1; }

/* the two-line verse above the names */
.moto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--gold);
  margin: 0 auto .35rem;
  max-width: 26rem;
  text-wrap: balance;
}
/* thin gold rule with a snowflake under the verse */
.moto::after {
  content: "\2744\FE0E"; display: block; width: 10rem; margin: .45rem auto 0;
  font-style: normal; font-size: .8rem; line-height: 1.3; color: var(--gold-mid);
  background: linear-gradient(90deg, transparent, var(--gold-muted) 25%, var(--gold-muted) 75%, transparent) center / 100% 1px no-repeat;
}
@media (max-width: 360px) { .moto { font-size: 1.18rem; } }

/* the date: Cinzel, letter-spaced, a thin gold line on each side */
.date {
  font-family: var(--caps);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-size: 1.02rem;
  letter-spacing: .12em;
  color: var(--on-pine);
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
}
.date::before, .date::after { content: ""; width: clamp(1.5rem, 8vw, 3.25rem); height: 1px; background: var(--gold-muted); flex: none; }
@media (max-width: 360px) { .date { font-size: .9rem; letter-spacing: .08em; } }

.lede { font-size: 1.15rem; max-width: 26rem; margin-inline: auto; }
.muted { color: var(--ink-soft); font-size: .95rem; }
.help { color: var(--ink-soft); font-size: .95rem; margin: .1rem 0 .5rem; line-height: 1.4; }

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

.hero { text-align: center; padding: .75rem 0 2rem; color: var(--on-pine); }

/* the H & B seal: interlaced initials in a thin gold oval, fir sprigs, berries and a velvet bow below */
.logo-wrap { width: min(5.6rem, 32vw); margin: 0 auto 1rem; position: relative; }
/* a burgundy wax-seal disc sits exactly inside the gold ring; the sprigs outside are thinned in the image itself */
/* the burgundy disc is baked into seal.webp, so ring and disc can never drift apart */
.logo { display: block; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.monogram { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.monogram.small { display: none; }
.footer-seal { display: block; width: 3.4rem; height: auto; margin: 1rem auto 0; opacity: .95; }

.tree { display: block; width: 11rem; height: auto; margin: 1.5rem auto 0; }

/* ---------------------------------------------------------- lights */

.lights {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 80px;
  pointer-events: none; overflow: visible;
  z-index: 2; /* above the hanging-star threads */
}
#envelope .lights { z-index: 0; }
.env-wrap { position: relative; z-index: 1; transform: translateY(-6vh); } /* high enough that Santa skis fully in view below it */

@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.bulb { animation: twinkle 2.6s ease-in-out infinite; }
.tree-lights .bulb:nth-of-type(2n) { animation-delay: -.9s; }
.tree-lights .bulb:nth-of-type(3n) { animation-delay: -1.7s; animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) { .bulb { animation: none; } }

/* photo slot — shown only when config.slika is set */
.hero-photo { margin: 1.5rem auto 0; width: min(14rem, 60vw); }
.hero-photo img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--gold); box-shadow: var(--shadow);
}

/* ---------------------------------------------------------- cards */

/* warm cream frames with a hair-thin gold edge and a soft deep shadow */
.card {
  background: var(--cream);
  border: 1px solid rgba(216, 173, 98, .6);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), var(--shadow);
}

.greeting { font-size: 1.15rem; line-height: 1.6; }
.greeting .greet-line {
  font-size: 1.95rem; font-weight: 600; line-height: 1.2; color: var(--berry-2);
  margin: 0 0 1rem; padding-bottom: .5rem;
  background: linear-gradient(90deg, var(--berry), rgba(139, 38, 53, .15)) left bottom / 3.75rem 1.5px no-repeat;
}
.greeting p { color: var(--ink); margin: 0 0 .8rem; white-space: pre-line; text-wrap: pretty; }
.greeting strong { color: var(--berry-2); font-weight: 700; }   /* the date and the deadline in burgundy */
.greeting .potpis { font-family: var(--script); font-weight: 400; font-size: 2.25rem; line-height: 1.1; color: var(--berry); margin: 1rem 0 .1rem; }

/* ---------------------------------------------------------- program */

.program { list-style: none; margin: 0; padding: 0; }
.program li {
  display: grid; grid-template-columns: 4.4rem 1fr; gap: .25rem 1rem; align-items: start;
  padding: .9rem 0; border-top: 1px solid var(--line);
}
.program li:first-child { border-top: 0; padding-top: 0; }
/* times as small burgundy badges with light lettering */
.program .t {
  font-family: var(--serif); font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1rem; letter-spacing: .03em; line-height: 1;
  color: var(--on-pine); background: var(--berry);
  border-radius: 999px; padding: .38rem .6rem .3rem;
  justify-self: start; grid-row: span 2; margin-top: .1rem;
}
.program .n { font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.program .m { color: var(--ink-soft); font-size: 1rem; grid-column: 2; }
.program a { color: var(--gold-ink); text-decoration-color: rgba(138, 100, 36, .5); }
.note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--berry); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.cal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.cal .lbl { font-size: .95rem; color: var(--ink-soft); margin-right: .25rem; }
.cal-link {
  font-size: .95rem; font-weight: 600; text-decoration: none;
  color: var(--gold-ink); border: 1px solid var(--gold); border-radius: 999px;
  padding: .4rem .85rem;
}
.cal-link:hover { background: var(--gold-wash); }
.cal-link:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

.note h2 { margin-bottom: .6rem; }
.note p { margin: 0; color: var(--ink); }
.note h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: .9rem 0 .25rem; }
.note h3:first-of-type { margin-top: .25rem; }
/* every parking spot gets a small burgundy map pin instead of a bullet */
.note ul { list-style: none; margin: 0; padding-left: 1.5rem; color: var(--ink); }
.note li { margin: .35rem 0; position: relative; }
.note li::before {
  content: ""; position: absolute; left: -1.45rem; top: .3em; width: .85rem; height: 1.05rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'><path d='M10 1C5 1 1.5 4.8 1.5 9.6c0 6.4 8.5 15 8.5 15s8.5-8.6 8.5-15C18.5 4.8 15 1 10 1z' fill='%238b2635'/><circle cx='10' cy='9.6' r='3.3' fill='%23f8f0e3'/></svg>") no-repeat center / contain;
}

/* ---------------------------------------------------------- form */

.field { margin: 0 0 1.25rem; border: 0; padding: 0; }
.field:last-of-type { margin-bottom: 1rem; }

legend, label { display: block; font-weight: 600; font-size: 1.12rem; padding: 0; margin-bottom: .5rem; }

.choice {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .5rem;
  cursor: pointer; font-weight: 400;
  background: var(--field);
  transition: border-color .15s, background .15s;
}
.choice { border-color: rgba(198, 163, 101, .7); }
.choice:hover { border-color: var(--berry); }
.choice:has(input:checked) { border-color: var(--berry); background: var(--berry-wash); box-shadow: inset 0 0 0 1px var(--berry); }
.choice:has(input:focus-visible) { outline: 2px solid var(--berry); outline-offset: 2px; }
/* "where will you join us": radio hidden behind a styled card, time hint in gold, chosen one in burgundy */
#if-coming .choice { padding: .8rem 1rem .8rem 2.6rem; position: relative; }
#if-coming .choice input { position: absolute; left: 1rem; top: 1.05rem; margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--berry); }
#if-coming .choice strong { color: var(--berry-2); }
#if-coming .choice em { color: var(--gold-ink); font-weight: 600; letter-spacing: .01em; }
#if-coming .choice:has(input:checked) strong { color: var(--berry-2); }
#if-coming .choice:has(input:checked)::after { content: "✓"; position: absolute; right: .9rem; top: .7rem; color: var(--berry); font-weight: 700; }

/* the chosen yes/no card shows a small burgundy check in the corner */
.choice.big:has(input:checked)::after { content: "✓"; position: absolute; right: .75rem; top: .45rem; font-size: .95rem; color: var(--berry); }
.choice.big:has(input:checked) { color: var(--berry-2); font-weight: 600; }

.choice input { accent-color: var(--berry); margin: .3rem 0 0; flex: none; }
.choice span { display: block; }
.choice strong { display: block; font-weight: 600; }
.choice em { display: block; font-style: normal; font-size: .98rem; color: var(--ink-soft); }

.choice.big { position: relative; justify-content: center; text-align: center; font-weight: 500; padding: 1rem; }
/* Visually hidden, NOT display:none — that would drop it from the tab order
   and keyboard users could never answer the one required question. */
.choice.big input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}

.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.choice-pair .choice { margin-bottom: 0; }
@media (max-width: 26rem) { .choice-pair { grid-template-columns: 1fr; } }

textarea, input[type="number"], input[type="text"] {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .85rem; resize: vertical;
}
textarea:focus, input[type="number"]:focus, input[type="text"]:focus {
  outline: 2px solid var(--berry); outline-offset: -1px; border-color: var(--berry);
}
textarea, input[type="text"] { min-height: 3rem; }

/* Growing list of companions: one input per person. */
.names { display: grid; gap: .5rem; }
.name-row { display: flex; gap: .5rem; }
.name-row input { flex: 1; min-width: 0; }
.name-row .remove {
  flex: none; width: 2.75rem;
  font: inherit; font-size: 1.35rem; line-height: 1;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.name-row .remove:hover { color: var(--berry); border-color: var(--berry); }
.name-row .remove:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }

.inline-num { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.inline-num label { margin: 0; }
.inline-num input { width: 5.5rem; }

.counter { font-size: .95rem; color: var(--gold-ink); margin: .5rem 0 0; }
.counter:empty { display: none; }

.form-error {
  color: var(--berry); font-size: 1rem;
  background: rgba(139, 47, 58, .08); border: 1px solid rgba(139, 47, 58, .3);
  border-radius: 8px; padding: .7rem .85rem; margin: 0 0 1rem;
}

.btn {
  display: block; width: 100%;
  font: inherit; font-weight: 600; font-size: 1.15rem; letter-spacing: .02em;
  color: var(--on-pine); background: var(--berry);
  border: 1px solid var(--berry-2); border-radius: 10px;
  padding: .85rem 1rem; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--berry-2); }
.btn:active { background: #6d1f2b; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--berry); outline-offset: 2px; }
.btn.ghost { color: var(--berry-2); background: transparent; border-color: var(--berry); }
.btn.ghost:hover { background: var(--berry-wash); }

.deadline-note { text-align: center; margin: .85rem 0 0; }

/* ---------------------------------------------------------- summary */

.summary { text-align: center; }
.summary h2 { justify-content: center; }
.summary h2::after { display: none; }

.check {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  margin: 0 auto 1rem; border-radius: 999px;
  background: var(--gold-wash); border: 1px solid var(--gold);
  color: var(--berry); font-size: 1.4rem;
}
.summary h2 { background-position: center bottom; }

.summary-list { text-align: left; margin: 1.25rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.summary-list div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .5rem 0; }
.summary-list dt { color: var(--ink-soft); font-size: 1rem; }
.summary-list dd { margin: 0; white-space: pre-line; }
@media (max-width: 26rem) { .summary-list div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------------------------------------------------------- envelope */

#envelope {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center; padding: 1.25rem;
  background: radial-gradient(120% 70% at 50% -10%, var(--pine-2), var(--pine) 65%);
  transition: opacity .6s ease;
}
#envelope.leaving { opacity: 0; pointer-events: none; }

.env-wrap { text-align: center; color: var(--on-pine); }

.env {
  position: relative;
  width: min(88vw, 22rem); aspect-ratio: 1.5 / 1;
  margin: 0 auto 1.75rem;
  perspective: 1200px;
  cursor: pointer;
}
.env > * { position: absolute; }

.env-back {
  inset: 0; z-index: 0;
  background: var(--paper-2);
  border: 1px solid rgba(198, 163, 101, .55); border-radius: 8px;
  box-shadow: var(--shadow);
}

.env-card {
  left: 6%; right: 6%; top: 8%; bottom: 8%; z-index: 1;
  background: var(--cream);
  border: 1px solid var(--gold); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  display: grid; place-items: center; text-align: center; padding: .5rem;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) .35s;
}
.env-card .n { font-family: var(--script); font-weight: 400; color: var(--berry); font-size: 1.9rem; line-height: 1.1; }
.env.open .env-card { transform: translateY(-62%) scale(1.06); }

/* side + bottom flaps, in front of the card; the notch is where the top flap sits */
.env-front {
  inset: 0; z-index: 2;
  background: linear-gradient(180deg, #e9dfc9 0%, var(--paper) 55%);
  border-radius: 8px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}

.env-to {
  left: 8%; right: 8%; bottom: 11%; z-index: 2;
  font-family: var(--script); font-size: 1.45rem; line-height: 1.1;
  color: var(--gold-ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.env-flap {
  left: 0; right: 0; top: 0; height: 56%; z-index: 3;
  background: linear-gradient(180deg, #ede3ce, #e0d3ba);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), z-index 0s .3s;
}
.env.open .env-flap { transform: rotateX(180deg); z-index: 0; }

.env-seal {
  left: 50%; top: 56%; z-index: 4;
  width: 4.4rem; aspect-ratio: 1178 / 1162;
  transform: translate(-50%, -50%);
  font-size: 0; color: transparent; /* the initials are in the artwork; the text stays for the script */
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
  transition: transform .35s ease, opacity .35s ease;
}
/* the seal is a stacking context (transform), so the disc goes in ::before and the artwork above it in ::after */
/* on the envelope the seal is pressed wax: the uneven wax rim, dome and stamped lettering are baked into seal-wax.webp */
.env-seal::after {
  content: ""; position: absolute; inset: -8%; z-index: 1;
  background: url(/img/seal-wax.webp) center / 100% auto no-repeat;
}
.env.open .env-seal { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }


/* --- Envelope scene: hill + firs (app.js), Santa skiing along the bottom (config.santa) --- */

.terrain, .trees { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.terrain { z-index: 0; }
.trees { z-index: 1; }   /* after .santa in the DOM → he skis behind the trees */

.santa {
  position: absolute; left: 0; top: 0;
  width: 120px; height: 90px;
  opacity: 0; pointer-events: none; z-index: 1;
}
#envelope.with-santa .santa { animation: ski 26s linear .8s infinite; }

/* the envelope settles onto the scene */
#envelope .env { animation: settle .7s cubic-bezier(.2, .8, .3, 1.15) .35s both; }
@keyframes settle {
  from { opacity: 0; transform: translateY(-28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* once it can be opened, the seal breathes — the only "tap me" cue there is */
.env.ready .env-seal::after { animation: breathe-wax 2.4s ease-in-out infinite; }
@keyframes breathe-wax { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes breathe {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, .4), 0 0 0 0 rgba(198, 163, 101, 0); }
  50%      { box-shadow: 0 4px 12px rgba(0, 0, 0, .4), 0 0 0 12px rgba(198, 163, 101, .22); }
}
.env:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  #envelope, .env-card, .env-flap, .env-seal { transition: none !important; }
  #envelope .env, .env.ready .env-seal, .env.ready .env-seal::after { animation: none; }
}

/* --- After an answer is sent: a low hill rises at the bottom, Santa skis across it, it sinks away --- */
.santa-stage {
  position: fixed; left: 0; right: 0; bottom: 0; height: 220px;
  z-index: 45; /* under the snow canvas (50): flakes fall over the hill too */
  pointer-events: none;
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.santa-stage.in { opacity: 1; transform: none; }
.santa-stage .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.santa-stage #stage-santa { position: absolute; left: 0; top: 0; width: 120px; height: 90px; opacity: 0; }
.santa-stage #stage-santa svg { width: 120px; height: 90px; display: block; }
.santa-stage.in #stage-santa { animation: ski-stage 7s linear .4s forwards; }

/* ---------------------------------------------------------- misc */

.state { text-align: center; padding-top: 5rem; color: var(--on-pine); }
.state .lede, .state .muted { color: var(--on-pine-soft); }

.spinner {
  width: 1.75rem; height: 1.75rem; margin: 0 auto 1rem;
  border: 2px solid rgba(198, 163, 101, .3); border-top-color: var(--gold);
  border-radius: 999px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.footer { text-align: center; padding-top: 1rem; color: var(--on-pine-soft); font-size: 1rem; }

/* the little hill at the end of the page with Santa skiing across it */
/* full-bleed: the scene runs edge to edge no matter how wide the cards are */
.foot-scene { position: relative; left: 50%; width: 100vw; margin: 1.5rem 0 -4rem -50vw; height: 170px; overflow: hidden; }
.foot-hill { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; }
.foot-firs { position: absolute; bottom: 22px; width: 13rem; height: auto; z-index: 0; }
.foot-firs-l { left: 6rem; bottom: 40px; }
.foot-firs-r { right: .5rem; bottom: 12px; }
@media (max-width: 40rem) { .foot-firs { width: 8.5rem; } .foot-firs-l { left: 3.5rem; bottom: 44px; } .foot-firs-r { right: 0; bottom: 16px; } }
.foot-santa { position: absolute; left: 0; bottom: 44px; width: 120px; height: 90px; z-index: 2; animation: ski-foot 13s linear infinite; }
.foot-santa svg { width: 120px; height: 90px; display: block; }
/* a gentle downhill run from left to right, following the slope of the snow */
@keyframes ski-foot {
  /* skis track the snow line: 48px up at the left edge, 18px at the right */
  /* nose slightly down the slope, skis flat on the snow */
  0%   { transform: translateX(-130px) translateY(0) rotate(4deg); }
  25%  { transform: translateX(calc(25vw - 40px)) translateY(7px) rotate(5deg); }
  50%  { transform: translateX(calc(50vw - 60px)) translateY(15px) rotate(4deg); }
  75%  { transform: translateX(calc(75vw - 80px)) translateY(22px) rotate(5deg); }
  100% { transform: translateX(calc(100vw + 20px)) translateY(30px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .foot-santa { animation: none; left: 50%; transform: translateX(-50%); } }

/* ---------------------------------------------------------- guest photo uploads (/photos/) */
.ph-main { padding-top: 2.5rem; }
.photos .hero { padding-bottom: 1.25rem; }
.ph-card label { margin-top: .25rem; }
.ph-card input[type="text"] { margin-bottom: 1.1rem; }
.ph-pick { margin-top: .25rem; }
.ph-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.ph-item {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center;
  padding: .6rem 0; border-top: 1px solid var(--line);
}
.ph-item:first-child { border-top: 0; }
.ph-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-size { color: var(--ink-soft); font-size: .95rem; }
.ph-bar { grid-column: 1; height: 6px; background: var(--gold-wash); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ph-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-muted), var(--berry)); transition: width .25s; }
.ph-state { grid-column: 2; font-size: .95rem; color: var(--ink-soft); white-space: nowrap; }
.ph-item.is-done .ph-state { color: #2f7a52; font-weight: 600; }
.ph-item.is-failed .ph-state { color: var(--berry); font-weight: 600; }
.ph-summary { margin: 1rem 0 0; font-weight: 600; color: var(--berry-2); }