/* ═══════════════════════════════════════════════════════════════════
   Alejandra & Francesco · 14.XI.2026
   A folded card, unfolded. Eggshell paper, one ink, one line.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper:        #f4f1ea;
  --paper-verso:  #efebe1;
  --ink:          #1a1815;
  --ink-soft:     #55524a;
  /* the second pen — the one the hand-written notes are made with */
  --pen:          #3f5170;
  --rule:         rgba(26, 24, 21, 0.16);
  --rule-firm:    rgba(26, 24, 21, 0.34);

  --leaf-pad-y:   clamp(5.5rem, 13vh, 10rem);
  --leaf-pad-x:   clamp(1.6rem, 6vw, 5rem);
  --measure:      64ch;
  /* Slack between the 62rem text column and the viewport edge — how far a
     print is allowed to hang out past the column before it would clip. */
  --bleed:        clamp(0rem, (100vw - 72rem) / 2, 7rem);

  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* Registered so it can be animated: a plain custom property is not
   interpolatable, and background-size would jump rather than sweep. */
@property --wipe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

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

/* .rsvp is display:grid, which would otherwise beat the UA's [hidden] rule */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.14rem);
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain — barely there, but it stops the ground reading as a flat #hex */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: 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='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 1; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── Typography ──────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 300; margin: 0; }

h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

p { margin: 0 0 1.25em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* ── The leaves and their creases ────────────────────────────────── */

.leaf {
  position: relative;
  padding: var(--leaf-pad-y) var(--leaf-pad-x);
  background: var(--paper);
  --paper-here: var(--paper);
}
.leaf--verso { background: var(--paper-verso); --paper-here: var(--paper-verso); }

/* One hairline where the leaves meet — the change of paper tone does the rest. */
.leaf + .leaf { border-top: 1px solid var(--rule); }

.leaf__inner {
  max-width: 62rem;
  margin-inline: auto;
  width: 100%;
}
.leaf__inner--narrow { max-width: 40rem; }

/* ── Leaf 1 · Cover ──────────────────────────────────────────────── */

.leaf--cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(4.5rem, 11vh, 7rem);
  padding-bottom: clamp(8.5rem, 19vh, 12rem);
}
.leaf--cover .leaf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mark {
  font-size: clamp(0.64rem, 0.6rem + 0.2vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--ink-soft);
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.8rem);
  padding-left: 0.34em;
}

.names {
  font-size: clamp(1.18rem, 0.82rem + 1.55vw, 2.05rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  flex-wrap: wrap;
  justify-content: center;
  /* the tracking on the last glyph pushes the optical centre left */
  padding-left: 0.28em;
}
.names__amp { font-size: 0.9em; opacity: 0.45; letter-spacing: 0; }
.names__sr,
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.portrait picture { display: contents; }
.portrait {
  margin: clamp(2.2rem, 5vh, 3.4rem) 0 clamp(2rem, 4.5vh, 3rem);
  display: flex;
  justify-content: center;
  width: 100%;
}
.couple {
  display: block;
  width: auto;
  height: clamp(19rem, 62vh, 42rem);
  max-width: 100%;
  color: var(--ink);
}

.cover__date {
  font-size: clamp(0.92rem, 0.76rem + 0.72vw, 1.32rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-wrap: balance;
  margin: 0 0 1.05rem;
  padding-left: 0.2em;
}
.cover__place {
  font-size: clamp(0.74rem, 0.7rem + 0.2vw, 0.84rem);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-soft);
  margin: 0;
  padding-left: 0.3em;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(2rem, 5vh, 3.2rem);
  /* Centred with auto margins, not translateX: the entrance animation owns
     `transform`, and would otherwise wipe the centring out. */
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  padding: 0.6rem 1rem;
  padding-left: calc(1rem + 0.24em);
}
.scroll-cue svg { width: 0.85rem; height: 1.15rem; }
.scroll-cue svg path { animation: cue 3.4s var(--ease) infinite; }
@keyframes cue {
  0%, 62%, 100% { transform: translateY(0);   opacity: 0.55; }
  78%           { transform: translateY(3px); opacity: 1; }
}

/* ── Language toggle ─────────────────────────────────────────────── */

.lang {
  position: fixed;
  top: max(1.1rem, env(safe-area-inset-top));
  right: clamp(1.1rem, 4vw, 2.2rem);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(7px);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.4s var(--ease);
}
.lang::after { content: ''; position: absolute; inset: -5px -4px; }
.lang:hover { border-color: var(--rule-firm); }
.lang__sep { width: 1px; height: 0.72rem; background: var(--rule-firm); }
.lang__opt { transition: color 0.3s var(--ease); }
.lang__opt[aria-current='true'] { color: var(--ink); }

/* ── Leaf 2 · Invitation ─────────────────────────────────────────── */

.lede {
  font-size: clamp(1.14rem, 1rem + 0.7vw, 1.42rem);
  line-height: 1.62;
  font-weight: 300;
  letter-spacing: 0.004em;
}

.countdown {
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink-soft);
  padding-left: 0.26em;
}
.countdown:empty { display: none; }

/* ── Prints scattered through the leaves ─────────────────────────── */

.snap {
  margin: clamp(2.4rem, 6vw, 3.4rem) 0 0;
  width: min(78%, 16.5rem);
  padding: 0.5rem 0.5rem 1.5rem;
  background: #fbf9f4;
  border: 1px solid rgba(26, 24, 21, 0.09);
  box-shadow:
    0 12px 26px -14px rgba(26, 24, 21, 0.4),
    0 2px 5px -3px rgba(26, 24, 21, 0.22);
  rotate: -2.5deg;
  /* `rotate` and `translate` are separate properties here, so the resting
     tilt and the hover lift never overwrite one another. */
  transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.snap img { display: block; width: 100%; height: auto; }
.snap-pair { display: block; }

/* Stacked layout: the prints follow the words, and lean opposite ways. */
@media (max-width: 61.999rem) {
  .leaf__inner--aside,
  .leaf__inner--aside-left { display: flex; flex-direction: column; }
  .leaf__inner--aside > .snap,
  .leaf__inner--aside > .snap-pair,
  .leaf__inner--aside-left > .snap { order: 1; }

  .leaf__inner--aside > .snap { margin-inline: auto 0; }
  .leaf__inner--aside-left > .snap { margin-inline: 0 auto; rotate: 2.5deg; }

  .snap-pair .snap:first-child { margin-inline: 0 auto; rotate: -3deg; }
  .snap-pair .snap:last-child  {
    margin-top: -1.6rem;
    margin-inline: auto 0;
    rotate: 3deg;
    position: relative;
    z-index: 2;
  }
}

/* Once there's slack beside the text, each print floats out beside it, at a
   slightly different height so they read as scattered rather than aligned. */
@media (min-width: 62rem) {
  .leaf__inner--aside::after,
  .leaf__inner--aside-left::after { content: ''; display: block; clear: both; }

  .leaf__inner--aside > .snap,
  .leaf__inner--aside > .snap-pair {
    float: right;
    margin: 0 calc(-1 * var(--bleed)) 2rem clamp(2.5rem, 5vw, 4.5rem);
  }
  .leaf__inner--aside-left > .snap {
    float: left;
    margin: 0 clamp(2.5rem, 5vw, 4.5rem) 2rem calc(-1 * var(--bleed));
  }
  .snap { width: clamp(15rem, 21vw, 21rem); }

  /* Each one hangs at its own height. */
  #nos-casamos .snap-pair { margin-top: 1rem; }
  #alojamiento .snap      { margin-top: 2.5rem; }
  #clima .snap            { margin-top: 3.5rem; }
  #regalos .snap          { margin-top: 1rem; }
  #rsvp .snap             { margin-top: 3rem; }

  /* The story leaf carries two, overlapping the way prints do in a pile. */
  .snap-pair { display: block; width: clamp(17rem, 25vw, 25rem); }
  .snap-pair .snap:nth-child(1) { width: 76%; margin: 0 0 0 auto; rotate: -3.5deg; }
  .snap-pair .snap:nth-child(2) { width: 84%; margin: -12% auto 0 0; rotate: 3deg; position: relative; z-index: 2; }

  .snap:hover {
    translate: 0 -0.6rem;
    z-index: 5;
    box-shadow:
      0 26px 44px -18px rgba(26, 24, 21, 0.45),
      0 3px 8px -3px rgba(26, 24, 21, 0.24);
  }
}

/* ── Hand-written notes ──────────────────────────────────────────── */
/* Spain and Mexico say some things differently. Where a word would trip up
   half the guest list, the other side's version is written in above it —
   always visible, never hidden behind a hover. */

/* A zero-width strut opens up the line that carries a note — above it by
   default, below it for the ones marked `gloss--below` — so a note never
   lands on a neighbouring line. */
.gloss::before {
  content: '';
  display: inline-block;
  width: 0;
  /* floor keeps the reserved space usable inside small labels like the
     gift rows, where 1.55em would only be a few pixels */
  height: max(1.55em, 1.95rem);
  vertical-align: 0.5em;
}
.gloss--below::before { vertical-align: -1.5em; }

.gloss { position: relative; }

/* The mark over the word. Two background layers: the drawn stroke, and a
   paper-coloured wipe on top of it that pulls back to reveal the stroke.
   Backgrounds (rather than a pseudo-element) so a phrase can wrap mid-mark. */
.gloss__src {
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='9' viewBox='0 0 72 9'%3E%3Cpath d='M1.5 5.8C8 1.8 14.5 7.6 21 5.2 27.5 2.8 34 8.4 40.5 6 47 3.6 53.5 8.2 60 5.4c3.5-1.5 7-2.6 10.5-1.2' fill='none' stroke='%233f5170' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  padding-bottom: 0.16em;
  background-image: linear-gradient(var(--paper-here), var(--paper-here)), var(--stroke);
  background-repeat: no-repeat, repeat-x;
  background-position: right bottom, left bottom;
  /* --wipe is how much of the stroke is still covered: 101% hidden, 0% drawn.
     One declaration, driven by a single variable, so nothing in the cascade
     has to compete over background-size. */
  --wipe: 0%;
  background-size: var(--wipe) 0.55em, auto 0.44em;
}

/* Ringed instead of underlined — a loop with a bit of overshoot. */
.gloss--ring .gloss__src {
  --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='42' viewBox='0 0 100 42' preserveAspectRatio='none'%3E%3Cpath d='M93 20c0 9.4-19.3 16.5-43 16.5S7 29.4 7 20 26.3 3.5 50 3.5 93 10.6 93 20c0 3.4-2.4 6.8-7 9.6' fill='none' stroke='%233f5170' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  padding: 0.14em 0.42em;
  margin: 0 -0.32em;
  background-repeat: no-repeat, no-repeat;
  background-position: right center, center center;
  background-size: var(--wipe) 100%, 100% 100%;
}

/* Drawn in as the leaf arrives: the stroke sweeps on, then the note lands. */
.js .gloss__src {
  --wipe: 101%;
  transition: --wipe 0.85s var(--ease) 0.15s;
}
.js .leaf.is-open .gloss__src { --wipe: 0%; }

.gloss__note {
  position: absolute;
  left: 0.7em;
  bottom: calc(100% + 0.06em);
  white-space: nowrap;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  font-size: max(1.5em, 1.05rem);
  line-height: 1;
  /* labels like the gift rows are uppercase and tracked — handwriting is not */
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--pen);
  rotate: -2.2deg;
  pointer-events: none;
  /* keeps the note out of a copied selection: the sentence stays readable */
  user-select: none;
  -webkit-user-select: none;
}
.gloss:nth-of-type(even) .gloss__note { rotate: 1.6deg; }
.gloss--below .gloss__note { top: calc(100% + 0.06em); bottom: auto; }

/* The note lands after its stroke has been drawn. */
.js .gloss__note {
  opacity: 0;
  translate: 0 0.45em;
  transition: opacity 0.7s var(--ease) 0.55s, translate 0.8s var(--ease) 0.55s;
}
.js .leaf.is-open .gloss__note { opacity: 1; translate: 0 0; }

/* The arrow leans toward the word it belongs to, and flips for notes below. */
.gloss__hook {
  width: 1.05em;
  height: 0.9em;
  vertical-align: -0.16em;
  margin-right: 0.15em;
  opacity: 0.85;
}
.gloss--below .gloss__hook { scale: 1 -1; }


/* A note in the same hand that isn't pinned to any one word. */
.aside-note {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.6rem);
  line-height: 1.2;
  color: var(--pen);
  rotate: -1.6deg;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0;
  max-width: 24ch;
}
.aside-note::before {
  content: '';
  display: inline-block;
  width: 1.4em;
  height: 0.5em;
  margin-right: 0.4em;
  vertical-align: 0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='10' viewBox='0 0 30 10'%3E%3Cpath d='M1 6c6-4 12 2 18-1 4-2 7-2 10 1' fill='none' stroke='%233f5170' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* the aside is a joke about the Spanish notes — pointless with none on screen */
html[lang='en'] .aside-note { display: none; }

/* The notes are about Spanish; in English there is nothing to gloss. */
html[lang='en'] .gloss__note { display: none; }
html[lang='en'] .gloss__src { background-image: none; padding-bottom: 0; }
html[lang='en'] .gloss::before { display: none; }

/* Narrow screens: keep a long note from running off the page. */
@media (max-width: 34rem) {
  .gloss__note { font-size: max(1.32em, 1rem); left: 0.4em; }
}

/* ── Facts lists (when & where, weather) ─────────────────────────── */

.facts {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--ink-soft);
  padding-top: 1.6rem;
}
.facts dd {
  margin: 0.55rem 0 0;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.facts__big {
  font-size: clamp(1.18rem, 0.98rem + 0.95vw, 1.7rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
.facts__aside,
.facts dd > span:not(.facts__big) {
  font-size: 0.97rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.facts + p,
.facts__note {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink-soft);
  font-size: 0.97em;
}

@media (min-width: 46rem) {
  .facts {
    display: grid;
    grid-template-columns: minmax(9rem, 15rem) 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }
  .facts dt {
    border-top: 1px solid var(--rule);
    padding-top: 1.7rem;
  }
  .facts dd {
    border-top: 1px solid var(--rule);
    border-bottom: 0;
    margin: 0;
    padding: 1.7rem 0;
  }
}

/* ── Inline link ─────────────────────────────────────────────────── */

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(2rem, 4vw, 2.6rem);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding-bottom: 0.45rem;
  padding-left: 0.22em;
  border-bottom: 1px solid var(--rule-firm);
  transition: border-color 0.35s var(--ease);
}
.link:hover { border-bottom-color: var(--ink); }
.link { position: relative; }
.link::after { content: ''; position: absolute; inset: -11px -6px; }
.link svg { width: 0.8rem; height: 0.8rem; flex: none; }

/* ── Gifts ───────────────────────────────────────────────────────── */

.gifts {
  display: grid;
  gap: clamp(2.6rem, 5vw, 3.4rem);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}
@media (min-width: 46rem) {
  .gifts { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
}

.gift h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 500;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-firm);
}
.gift__rows { margin: 0 0 2rem; }
.gift__rows:last-child { margin-bottom: 0; }
.gift__rows dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  padding-top: 1.2rem;
}
.gift__rows dd {
  margin: 0.4rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  line-height: 1.5;
}
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.copy {
  font: inherit;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  padding-left: calc(0.75rem + 0.16em);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.copy:hover { color: var(--ink); border-color: var(--ink); }
/* The pill stays small; the area a thumb can hit does not. */
.copy { position: relative; }
.copy::after { content: ''; position: absolute; inset: -9px -7px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(2rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 1rem);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.85rem 1.5rem;
  padding-left: calc(1.5rem + 0.18em);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

.note {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* ── Leaf 5 · Dress code ─────────────────────────────────────────── */

.leaf--statement { text-align: center; }
.leaf--statement .leaf__inner { display: flex; flex-direction: column; align-items: center; }
.leaf--statement p { margin-inline: auto; }

.statement {
  font-size: clamp(1.9rem, 0.9rem + 4.4vw, 3.7rem);
  font-weight: 300;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-wrap: balance;
  margin: 0 0 clamp(2.2rem, 5vw, 3.2rem);
  padding-left: 0.1em;
  max-width: none;
}
.statement:has(+ .statement__sub) { margin-bottom: clamp(0.9rem, 2vw, 1.3rem); }
.statement__sub {
  font-size: clamp(0.82rem, 0.76rem + 0.36vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink-soft);
  margin: 0 0 clamp(2.4rem, 5vw, 3.4rem);
  padding-left: 0.26em;
}

.statement__note {
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: 0.99em;
}

/* ── Leaf 7 · RSVP ───────────────────────────────────────────────── */

.rsvp__intro { color: var(--ink-soft); margin-bottom: clamp(2.6rem, 6vw, 3.6rem); }

.rsvp { display: grid; gap: 2rem; max-width: 34rem; }

.field { display: grid; gap: 0.7rem; border: 0; padding: 0; margin: 0; min-width: 0; }

.field > label,
.field legend {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}

.field input[type='text'],
.field input[type='email'],
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-firm);
  border-radius: 0;
  padding: 0.6rem 0;
  width: 100%;
  transition: border-color 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2355524a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 0.72rem;
  padding-right: 1.8rem;
}
.field ::placeholder { color: var(--ink-soft); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6rem - 1px);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.field[data-invalid] input,
.field[data-invalid] select { border-bottom-color: var(--ink); border-bottom-width: 2px; }

.field__err,
.form-error {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.field__err::before,
.form-error::before {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  background: var(--ink);
  vertical-align: 0.32em;
  margin-right: 0.55rem;
}
.form-error { padding-top: 0.4rem; }

.choice { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.choice__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.choice__opt input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  left: 0; top: 0;
  margin: 0;
  cursor: pointer;
}
.choice__opt::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex: none;
  transition: background-color 0.3s var(--ease);
}
.choice__opt:hover { border-color: var(--ink); color: var(--ink); }
.choice__opt:has(input:checked) { color: var(--ink); border-color: var(--ink); }
.choice__opt:has(input:checked)::before { background: var(--ink); }
.choice__opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Guest fields collapse when someone can't come */
.rsvp[data-attending='no'] #guests-field,
.rsvp[data-attending='no'] #names-field,
.rsvp[data-attending='no'] #diet-field { display: none; }

.btn {
  justify-self: start;
  position: relative;
  font: inherit;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 1.15rem 2.4rem;
  padding-left: calc(2.4rem + 0.22em);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.8rem;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover:not(:disabled) { background: transparent; color: var(--ink); }
.btn:disabled { cursor: progress; opacity: 0.55; }
.btn__label--busy { display: none; }
.btn[data-busy] .btn__label { display: none; }
.btn[data-busy] .btn__label--busy { display: inline; }

.rsvp__done { border-top: 1px solid var(--rule); padding-top: 2.4rem; max-width: 34rem; }
.rsvp__done-head {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1.1rem;
  padding-left: 0.14em;
}
.rsvp__done-body { color: var(--ink-soft); }

/* ── Leaf 8 · Close ──────────────────────────────────────────────── */

.leaf--close { text-align: center; padding-block: clamp(6rem, 16vh, 11rem); }
.leaf--close .leaf__inner { display: flex; flex-direction: column; align-items: center; }

.close__mark {
  font-size: clamp(0.64rem, 0.6rem + 0.2vw, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--ink-soft);
  margin: 0 0 clamp(1.8rem, 4vw, 2.4rem);
  padding-left: 0.34em;
}
.close__names {
  font-size: clamp(1.15rem, 0.82rem + 1.5vw, 1.95rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-wrap: balance;
  margin-bottom: clamp(2rem, 5vw, 2.8rem);
  padding-left: 0.16em;
}
.close__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin: 0;
}
.close__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-firm); }

/* ── Motion: the card opening ────────────────────────────────────── */
/* Applied only once JS confirms it can drive it, so the page is fully
   readable with no script and with reduced motion. */

.js .leaf--fold {
  opacity: 0.001;
  transform: perspective(1500px) rotateX(-7deg) translateY(1.6rem);
  transform-origin: top center;
  transition:
    opacity   1.05s var(--ease),
    transform 1.15s var(--ease);
  will-change: transform, opacity;
}
.js .leaf--fold.is-open {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The drawing arrives the way it was made: top of the head downwards. */
.js .couple {
  clip-path: inset(0 0 100% 0);
  animation: reveal 1.5s var(--ease) 0.15s forwards;
}
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }

.js .cover__date,
.js .cover__place,
.js .names,
.js .scroll-cue {
  animation: rise 1.1s var(--ease) both;
  animation-delay: var(--rise, 0s);
}
.js .names       { --rise: 0.05s; }
.js .cover__date { --rise: 1.15s; }
.js .cover__place{ --rise: 1.3s; }
.js .scroll-cue  { --rise: 1.55s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .snap { transition: none; }
  .js .gloss__src { --wipe: 0%; transition: none; }
  .js .gloss__note { opacity: 1; translate: none; transition: none; }
  html { scroll-behavior: auto; }
  .js .leaf--fold,
  .js .leaf--fold.is-open {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .couple { clip-path: none; animation: none; }
  .js .names, .js .cover__date, .js .cover__place, .js .scroll-cue { animation: none; }
  .scroll-cue svg path { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ── Small screens ───────────────────────────────────────────────── */

@media (max-width: 34rem) {
  .names { gap: 0.24em; letter-spacing: 0.2em; }
  .gift__rows dd { gap: 0.6rem; }
  .btn { justify-self: stretch; text-align: center; }
}

@media print {
  body::before, .lang, .scroll-cue, .btn, .copy, .toast { display: none; }
  .snap { rotate: none; box-shadow: none; break-inside: avoid; }
  .leaf { padding: 2rem 0; break-inside: avoid; background: none; }
  .gloss__note { rotate: none; }
  .gloss__src { --wipe: 0%; }
}