/* The letters: separate sheets of cotton paper that slide up over the bridge, one per part of the day.
   Boska for the voice (salutation, lede, titles, signature), Gambetta for the prose.
   Paper, polaroids, hours and the reply slip. */

:root {
  --font-body: "Gambetta", Georgia, serif;
  --sheet-w: min(1080px, calc(100% - 2 * var(--gutter)));
  --m-col: 11.5rem;
  --edge: 14px;
}
.reading { position: relative; }

.corner-reply {
  position: fixed; top: calc(var(--gutter) * 0.6 + env(safe-area-inset-top)); right: var(--gutter); z-index: 30;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 92%, transparent); color: var(--ink);
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1; text-decoration: none;
  box-shadow: 0 6px 20px -8px rgba(30, 36, 20, 0.45);
}
.corner-reply:hover { transform: translateY(-2px); background: var(--paper); }
/* shown only once the letter is being read */
.corner-reply { opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.3s var(--ease-out), background-color 0.3s; }
.corner-reply.is-shown { opacity: 1; pointer-events: auto; }

/* ---------- the sheet ---------- */
.letters { position: relative; z-index: 2; padding: 6vh 0 0; }
.letter { position: relative; width: var(--sheet-w); margin: 0 auto 34vh; scroll-margin-top: 4vh; }
.letter__shadow {
  position: absolute; left: 0; right: 0; top: var(--edge); bottom: var(--edge);
  box-shadow: 0 50px 90px -40px rgba(24, 30, 16, 0.65), 0 2px 6px rgba(24, 30, 16, 0.18);
  border-radius: 2px;
}
.sheet {
  position: relative; isolation: isolate;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 6.5vw, 6rem) clamp(3rem, 6vw, 5rem);
  font-size: 1.25rem; line-height: 1.7; color: var(--ink);
}
/* the paper itself sits on a layer of its own, so photos can hang over its edge */
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--paper);
  /* two creases where it was folded in three, and the cotton's tooth */
  background-image:
    linear-gradient(180deg, transparent calc(33.33% - 1px), rgba(60, 55, 30, 0.07) 33.33%, rgba(255, 255, 255, 0.7) calc(33.33% + 1px), transparent calc(33.33% + 6px)),
    linear-gradient(180deg, transparent calc(66.66% - 1px), rgba(60, 55, 30, 0.07) 66.66%, rgba(255, 255, 255, 0.7) calc(66.66% + 1px), transparent calc(66.66% + 6px)),
    linear-gradient(180deg, transparent calc(33.33% - 40px), rgba(60, 55, 30, 0.025) 33.33%, transparent calc(33.33% + 40px)),
    linear-gradient(180deg, transparent calc(66.66% - 40px), rgba(60, 55, 30, 0.025) 66.66%, transparent calc(66.66% + 40px)),
    var(--tooth);
  /* deckled top and bottom edges */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l7 1 6-2 9 2 8-3 6 2 10-1 7 2 9-3 8 2 7-1 11 2 6-2 9 1 8-2 9 3 7-2 10 1 6-2 8 2 9-1 7 2 10-3 7 2 8-1 9 2 7-2 8 1 10-2 6 2 9-1 8 2 7-3 9 2 8-1 10 2 6-1 9 1 7-2 8 2 9-1 10 2 3-1V14Z'/%3E%3C/svg%3E") top / 100% var(--edge) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0v8l8-1 7 2 9-2 6 3 10-2 8 1 7-2 9 3 6-2 11 1 8-2 7 2 9-1 6 2 10-3 8 2 7-1 9 2 8-2 6 1 10-1 7 2 8-2 9 3 7-2 10 1 6-2 9 2 8-1 7 2 9-2 10 1 6-2 8 2 9-1 7 2 10-2 8 1 6 2 9-3 7 2 1-1V0Z'/%3E%3C/svg%3E") bottom / 100% var(--edge) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V6l7 1 6-2 9 2 8-3 6 2 10-1 7 2 9-3 8 2 7-1 11 2 6-2 9 1 8-2 9 3 7-2 10 1 6-2 8 2 9-1 7 2 10-3 7 2 8-1 9 2 7-2 8 1 10-2 6 2 9-1 8 2 7-3 9 2 8-1 10 2 6-1 9 1 7-2 8 2 9-1 10 2 3-1V14Z'/%3E%3C/svg%3E") top / 100% var(--edge) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0v8l8-1 7 2 9-2 6 3 10-2 8 1 7-2 9 3 6-2 11 1 8-2 7 2 9-1 6 2 10-3 8 2 7-1 9 2 8-2 6 1 10-1 7 2 8-2 9 3 7-2 10 1 6-2 9 2 8-1 7 2 9-2 10 1 6-2 8 2 9-1 7 2 10-2 8 1 6 2 9-3 7 2 1-1V0Z'/%3E%3C/svg%3E") bottom / 100% var(--edge) no-repeat;
}

/* letterhead */
.lh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: clamp(3rem, 6vw, 5rem); }
.lh__mono {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--olive) 45%, transparent);
  font-family: var(--font-display); font-size: 1.6rem; color: var(--olive); line-height: 1;
}
.lh__place { text-align: right; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; color: var(--olive); }
.lh__place em { font-style: italic; }

/* the voice */
.greet { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.lede { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.2vw, 2.85rem); line-height: 1.14; letter-spacing: -0.01em; }

/* rows: a margin column for notes and part titles, a text column for the prose */

.t p + p { margin-top: 1.1em; }
.t::after { content: ""; display: block; clear: both; }

.note { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--olive); padding-block: 0.7rem; border-top: 1px solid var(--rule); }
.note:last-child { border-bottom: 1px solid var(--rule); }

/* polaroids tucked into the letter */
.polaroid {
  position: relative; width: clamp(12rem, 22vw, 17rem); padding: 0.75rem 0.75rem 3rem;
  background: #fffefb; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.15), 0 22px 40px -18px rgba(30, 30, 20, 0.45);
}
.polaroid img, .polaroid canvas { width: 100%; height: auto; aspect-ratio: 1 / 1.02; object-fit: cover; }
.polaroid canvas { filter: saturate(0.75) sepia(0.18) contrast(1.05); }
.polaroid figcaption { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }

/* a paper clip holding the photo to the sheet */
.clip {
  position: absolute; top: -1.1rem; left: 1.6rem; width: 0.9rem; height: 3.2rem; z-index: 2;
  border: 2px solid #8b8d84; border-radius: 0.6rem; border-bottom-color: transparent;
}
.clip::after { content: ""; position: absolute; inset: 0.35rem 0.15rem 0.6rem; border: 2px solid #8b8d84; border-top-color: transparent; border-radius: 0 0 0.5rem 0.5rem; }

/* hour by hour, hung in the margin */
.hours { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.hours li { display: grid; grid-template-columns: var(--m-col) minmax(0, 36rem); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: baseline; padding-block: 0.85rem; border-top: 1px solid var(--rule); }
.hours li:last-child { border-bottom: 1px solid var(--rule); }
.hours time { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--olive); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.hours p { font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft); }
.hours b { display: block; font-weight: 500; color: var(--ink); font-size: 1.2rem; }

/* signature */

.signoff__with { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--olive); }
.signoff__name { white-space: nowrap; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; margin-top: 0.4rem; }
.ps { margin-top: 2.5rem; max-width: 30rem; font-size: 1.1rem; color: var(--ink-soft); }
.ps b { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin-right: 0.35rem; }

/* ---------- the reply slip ---------- */
.slip { position: relative; margin-inline: calc(-1 * clamp(1.5rem, 6.5vw, 6rem)); padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6.5vw, 6rem) 0; scroll-margin-top: 2rem; }
.perf { position: absolute; left: 0; right: 0; top: 0; height: 1px; background-image: linear-gradient(90deg, var(--ink-soft) 50%, transparent 50%); background-size: 10px 1px; opacity: 0.5; }
.perf span { position: absolute; left: clamp(1.5rem, 6.5vw, 6rem); top: -0.75rem; padding-right: 0.6rem; background: var(--paper); font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.slip__form { display: grid; gap: 1.6rem; max-width: 50rem; }
.slip__head { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.slip__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 4.5vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; }
.slip__by { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--olive); }
.slip__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; font-size: 1.35rem; line-height: 2.2; }

.fix { color: var(--ink-soft); }
.blank {
  border: 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 45%, transparent); border-radius: 0;
  background: transparent; padding: 0 0.15rem 0.1rem; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--ink);
}
.blank::placeholder { color: color-mix(in oklab, var(--ink) 38%, transparent); }
.blank:focus-visible { outline: none; border-bottom-color: var(--wisteria); box-shadow: 0 2px 0 var(--wisteria); }
.blank--name { width: min(20rem, 100%); }
.blank--select { appearance: none; padding-right: 1.4rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-soft) 50%); background-size: 5px 5px; background-position: right 0.55rem bottom 0.7rem, right 0.25rem bottom 0.7rem; background-repeat: no-repeat; }

.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  position: relative; display: inline-block; padding: 0 0.2rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink-soft);
  transition: color 0.25s;
}
/* a hand-drawn ring around the chosen answer */
.pick span::before {
  content: ""; position: absolute; inset: -0.05em -0.45em -0.1em -0.4em; border: 1.5px solid var(--wisteria);
  border-radius: 52% 48% 55% 45% / 60% 50% 50% 40%; rotate: -2deg;
  opacity: 0; transform: scale(0.85); transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}
.pick:hover span { color: var(--ink); }
.pick input:checked + span { color: var(--ink); }
.pick input:checked + span::before { opacity: 1; transform: scale(1); }
.pick input:focus-visible + span { outline: 2px solid var(--wisteria); outline-offset: 6px; border-radius: 4px; }

.err { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: #8a3b2e; margin-top: -0.8rem; }

.slip__send { padding-top: 0.75rem; }

.thanks { display: grid; gap: 1rem; max-width: 34rem; padding-bottom: 0.5rem; }
.thanks__title { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.4rem, 4.5vw, 3.5rem); line-height: 1.05; }

.link { padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--olive); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.link:hover { color: var(--ink); }

/* ---------- 2 · the invitation ---------- */
.lh__mono { width: 3.6rem; height: 3.6rem; font-size: 1.05rem; letter-spacing: 0.02em; }
.inv { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.inv__text { max-width: 40rem; }
.inv__text .lede { margin-bottom: 1.5rem; }

.count { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }

.count__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.count__grid > div { display: grid; gap: 0.3rem; }
.count__grid > div + div { padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--rule); }
.count__grid b { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.25rem, 9vw, 8rem); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.count__grid span { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-soft); }

/* ---------- 3 · the day ---------- */
.day { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.walk { position: sticky; top: calc(50svh - min(38svh, 23.5rem)); }
.walk__frame {
  position: relative; aspect-ratio: 4 / 5; max-height: min(68svh, 42rem); margin: 0 auto;
  padding: 0.7rem; background: #fdfcf8; border-radius: 2px; rotate: -1.2deg;
  box-shadow: 0 1px 2px rgba(30, 30, 20, 0.16), 0 28px 50px -24px rgba(30, 30, 20, 0.5);
}
.walk__img { position: absolute; inset: 0.7rem; width: calc(100% - 1.4rem); height: calc(100% - 1.4rem); max-width: none; object-fit: cover; visibility: hidden; }
.walk__img.is-on { visibility: visible; }
.walk__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; padding-inline: 0.4rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-soft); }
.walk__count b { font-style: normal; font-weight: 400; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.walk__ticks { display: flex; gap: 0.35rem; }
.walk__ticks i { width: 1.4rem; height: 2px; background: var(--rule); transition: background-color 0.2s; }
.walk__ticks i.is-on { background: var(--olive); }

.title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.25rem; }
.day__intro { max-width: 34rem; margin-bottom: 2.5rem; }
.day .hours li { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1.5rem; }
.sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; margin-bottom: 1.25rem; scroll-margin-top: 20vh; }
.places { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.places li { padding-top: 1rem; border-top: 1px solid var(--rule); }
.places__k { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--olive); }
.places__name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; margin: 0.25rem 0 0.35rem; }
.places__addr { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
.places .link { font-size: 1.05rem; }

/* ---------- 4 · kindly reply ---------- */
.closing { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.18; max-width: 42rem; }

/* ---------- the foot of the page, on the painting ---------- */
.credit {
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding: 0 var(--gutter) calc(1.75rem + env(safe-area-inset-bottom)); margin-top: -18vh;
  font-size: 0.9rem; color: #fbf8ef; text-shadow: 0 1px 2px rgba(14, 22, 12, 0.6), 0 2px 14px rgba(14, 22, 12, 0.5);
}
.credit a { color: inherit; }

/* ---------- motion start states ---------- */
.has-motion [data-reveal] { opacity: 0; }
.has-motion [data-drop] { opacity: 0; }

/* ---------- one breakpoint ---------- */
@media (max-width: 1000px) {
  :root { --sheet-w: calc(100% - 1.25rem); }
  .letter { margin-bottom: 26vh; }
  .sheet { font-size: 1.125rem; }
  .polaroid { padding: 0.5rem 0.5rem 2.2rem; }
  .polaroid figcaption { font-size: 0.9rem; bottom: 0.6rem; left: 0.6rem; }
  .inv { grid-template-columns: 1fr; }
  
  
  
  .count__grid b { font-size: clamp(2.4rem, 13vw, 4rem); }
  .count__grid > div + div { padding-left: 0.75rem; }
  .day { grid-template-columns: 1fr; }
  /* the walk gets a tall runway of its own, its frame held still while the photos flip */
  .walk { position: relative; top: auto; height: 190svh; margin-bottom: 2.5rem; }
  .walk__stage { position: sticky; top: 9svh; }
  .walk__frame { max-height: 70svh; width: min(100%, calc(70svh * 0.8)); }
  .day .hours li { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: 1rem; }
  .hours time { font-size: 1.35rem; }
  .places { grid-template-columns: 1fr; }
  
  .slip__line { font-size: 1.15rem; }
  .blank, .pick span { font-size: 1.3rem; }
  .blank--name { width: 100%; }
  .corner-reply { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; }
  .credit { margin-top: -14vh; }
}

/* the walk flips through its photographs on scroll even with motion off: they are hard cuts, nothing moves */

/* ---------- real paper (paper.js paints each sheet once into a canvas) ---------- */
.sheet__paper { position: absolute; left: -6px; top: -6px; z-index: -1; max-width: none; pointer-events: none; }
.sheet.has-paper::before { display: none; }
/* the shadow sits inside the torn edge, so no straight line shows past the tear */
.letter__shadow { left: 12px; right: 12px; top: 14px; bottom: 14px; box-shadow: 0 50px 90px -42px rgba(24, 30, 16, 0.62), 0 18px 30px -18px rgba(24, 30, 16, 0.3); }
.perf span { top: 0.6rem; background: none; padding: 0; }

/* photo paper: a whiter stock with the same tooth, a slight curl in the shadow */
.polaroid, .walk__frame {
  background-color: #fbf9f3;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), var(--paper-tex, none);
  background-size: auto, 256px;
  box-shadow: 0 1px 1px rgba(30, 30, 20, 0.14), 0 7px 12px -7px rgba(30, 30, 20, 0.3), 0 30px 44px -24px rgba(30, 30, 20, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.polaroid img, .walk__img { outline: 1px solid rgba(20, 20, 10, 0.08); outline-offset: -1px; }

/* ---------- the prints lie on the letter, not above it ---------- */
/* the frames share the letters' paper and light; the shadow is short, as if resting on the page */
.polaroid, .walk__frame {
  --pad: 0.75rem; --pad-b: 3rem;
  background-color: #f1efe9;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%, rgba(70, 62, 40, 0.05)), var(--paper-tex, none);
  background-size: auto, cover;
  box-shadow: 0 1px 1px rgba(40, 38, 28, 0.2), 0 3px 6px -2px rgba(40, 38, 28, 0.16), 0 16px 24px -16px rgba(40, 38, 28, 0.32);
}
.walk__frame { --pad: 0.7rem; --pad-b: 0.7rem; }
/* matte, slightly faded prints, warmed to the paper */
.polaroid img { filter: sepia(0.2) saturate(0.82) contrast(0.9) brightness(1.03); outline: none; }
.walk__img { filter: sepia(0.24) contrast(0.88) brightness(1.04); outline: none; }
/* the paper's tooth and a soft vignette over the print, as if the photo were printed on it */
.polaroid::before, .walk__frame::before, .polaroid::after, .walk__frame::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: var(--pad) var(--pad) var(--pad-b);
}
/* the tooth: a thin veil of the paper over the print, which also lifts the blacks like a matte print */
.polaroid::before, .walk__frame::before { background: var(--paper-tex, none) center / 420px; opacity: 0.16; }
/* a soft vignette and a hairline where the print meets its border */
.polaroid::after, .walk__frame::after {
  background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(60, 48, 26, 0.2));
  box-shadow: inset 0 0 0 1px rgba(60, 50, 30, 0.12);
}
@media (max-width: 1000px) {
  .polaroid { --pad: 0.5rem; --pad-b: 2.2rem; }
}

/* ==========================================================================
   The letters' type: two faces only, a pen and one printed face.
   The pen (Homemade Apple) writes everything a person would write by hand: the salutation,
   the section titles, the asides in the margin, the signature and the guest's reply.
   Letterpress (IM Fell English) sets everything else. The hero and the envelope are untouched.
   ========================================================================== */
:root { --hand: "Homemade Apple", "Snell Roundhand", cursive; --pen: #28304a; }
html { --print: "IM Fell English", Georgia, serif; }

/* --- one printed face for everything on the paper --- */
.letters :is(p, li, dt, dd, small, span, b, time, a, label, legend, button, input, select, textarea, output, h2, h3, figcaption) {
  font-family: var(--print); letter-spacing: 0;
}
.letters .sheet { font-family: var(--print); color: #2a261f; text-shadow: 0 0 0.6px rgba(42, 38, 31, 0.3); }
.letters :is(.lede, .closing, .facts dd, .places__name, .count__grid b, .hours time) { font-weight: 400; }
.letters .hours time { font-style: normal; }

/* --- the pen --- */
.letters :is(.greet, .greet *, .title, .title *, .sub, .slip__title, .signoff__with, .signoff__name, .signoff__name *, .lh__place, .lh__place *, .lh__mono, .count__lead, .cta__note, .slip__by, .blank) {
  font-family: var(--hand); font-style: normal; font-weight: 400; letter-spacing: 0;
  color: var(--pen); text-shadow: 0 0 0.7px rgba(40, 48, 74, 0.35);
}
.letters .greet { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.45; margin: 0 0 clamp(0.75rem, 2vw, 1.5rem) -0.04em; }
.letters .title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.45; margin-bottom: 1rem; }
.letters .sub { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.4; margin-bottom: 0.9rem; }
.letters .slip__title { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.4; }
.letters .signoff__with { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.6; }
.letters .signoff__name { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.45; margin-top: 0.1rem; }
.letters .lh__place { font-size: 0.95rem; line-height: 1.8; }
.letters .lh__mono { font-size: 1rem; padding-top: 0.25rem; }
.letters :is(.count__lead, .cta__note, .slip__by) { font-size: 1.05rem; line-height: 1.7; }
.letters .blank { font-size: 1.35rem; line-height: 1.7; }

.letters .blank::placeholder { font-family: var(--print); font-style: italic; font-size: 1.1rem; }
.letters .blank--select { font-family: var(--print); font-style: italic; font-size: 1.2rem; color: #2a261f; text-shadow: none; }

/* --- letterpress sizes --- */
.letters .sheet { font-size: 1.3rem; line-height: 1.55; }
.letters :is(.lede, .closing) { font-size: clamp(1.8rem, 2.9vw, 2.6rem); line-height: 1.2; }
.letters .hours b { font-weight: 400; font-size: 1.28rem; }

@media (max-width: 1000px) {
  .letters .greet { font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .letters .title { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .letters .signoff__name { font-size: clamp(1.9rem, 9vw, 2.6rem); white-space: normal; }
  .letters .sheet { font-size: 1.2rem; }
}

/* ==========================================================================
   Phones: the letters tuned for one column
   ========================================================================== */
@media (max-width: 1000px) {
  /* a calmer letterhead */
  .letters .lh { margin-bottom: 2rem; }

  /* the salutation fits the width; the names stay together (letters.js joins them) */
  #invitation .sheet .greet { font-size: clamp(1.8rem, 8.6vw, 2.35rem); line-height: 1.3; margin-bottom: 1.25rem; }

  /* the invitation lines at a comfortable reading size */
  #invitation .sheet .lede { font-size: clamp(1.25rem, 5.4vw, 1.45rem); line-height: 1.5; margin-bottom: 0.75rem; }
  #invitation .sheet .lede-2 { margin-bottom: 0; }

  /* the day: a little less weight on the title */
  .letters .letter--day .title.title { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* the reply: the closing words at reading size */
  .letters .letter--reply .closing.closing { font-size: clamp(1.3rem, 5.6vw, 1.55rem); line-height: 1.45; }

  }

/* ==========================================================================
   The first part: only the photograph, lying on the painting, no sheet
   ========================================================================== */
.letter--photo { width: min(1080px, calc(100% - 2 * var(--gutter))); }
.photo-only { display: grid; place-items: center; min-height: 86svh; padding-block: 4vh; }
.polaroid.polaroid--glued {
  width: min(38rem, 62vw, calc(76svh * 0.82)); margin: 0; rotate: -3deg;
  box-shadow: 0 1px 2px rgba(20, 22, 12, 0.3), 0 10px 18px -8px rgba(20, 22, 12, 0.4), 0 40px 70px -30px rgba(20, 22, 12, 0.55);
}
/* at rest it lies at its own tilt, the same one the drop-in lands on (data-tilt, letters.js) */
.polaroid.polaroid--glued[data-tilt="3"] { rotate: 3deg; }
.has-motion .polaroid.polaroid--glued { rotate: none; }

@media (max-width: 1000px) {
  .photo-only { min-height: 0; padding-block: 2vh; }
  .polaroid.polaroid--glued { width: min(26rem, 90%); }
}

/* ==========================================================================
   The walk: its own section, a large print held in the middle of the screen
   over the painting while the four photographs go by
   ========================================================================== */
.letter--walk { width: min(1080px, calc(100% - 2 * var(--gutter))); }
.letter--walk .walk { position: relative; top: auto; height: 300svh; margin: 0; }
.letter--walk .walk__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.letter--walk .walk__frame {
  --pad: 0.85rem; --pad-b: 3.6rem;
  width: min(32rem, 64vw, calc(82svh * 0.72)); max-height: none; aspect-ratio: 0.72; margin: 0; padding: 0; rotate: -2deg;
  box-shadow: 0 1px 2px rgba(20, 22, 12, 0.3), 0 10px 18px -8px rgba(20, 22, 12, 0.4), 0 40px 70px -30px rgba(20, 22, 12, 0.55);
}
.letter--walk .walk__img { inset: var(--pad) var(--pad) var(--pad-b); width: calc(100% - 2 * var(--pad)); height: calc(100% - var(--pad) - var(--pad-b)); }
/* the counter written in the white strip of the print */
.letter--walk .walk__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: var(--pad-b); margin: 0; padding: 0 0.35rem; z-index: 2; }

/* the day letter is words only now */
.letters .day { display: block; }
.letters .day__text { max-width: 44rem; }

@media (max-width: 1000px) {
  .letter--walk .walk { height: 220svh; }
  .letter--walk .walk__frame { --pad: 0.6rem; --pad-b: 2.9rem; width: min(24rem, 88vw, calc(78svh * 0.72)); }
}

/* pin.js holds each letter by a wrapper; the wrapper keeps the letter's spacing */
.pin-wrap { padding-bottom: 34vh; }
.pin-wrap > .letter { margin-bottom: 0; }
@media (max-width: 1000px) { .pin-wrap { padding-bottom: 26vh; } }

/* ==========================================================================
   The invitation: written as a letter, in the same text column as the schedule
   ========================================================================== */
.inv-letter { display: none; }
#invitation .sheet { text-align: left; }
#invitation .inv-letter { display: block; position: relative; max-width: 58ch; margin: 0 auto; }

#invitation .inv { display: block; }
#invitation .inv__text { max-width: 58ch; margin: 0 auto; }
/* the greeting on the body's left edge, a little smaller, free to wrap */
.letters #invitation .greet { max-width: 58ch; margin: 0 auto 1.4rem; font-size: clamp(1.9rem, 3vw, 2.5rem); text-align: left; }
.letters #invitation .lede { font-size: 1.22rem; line-height: 1.65; margin: 0 0 0.9rem; max-width: none; }
.letters #invitation .lede-2 { margin-bottom: 0; }
/* the letterhead keeps the place; the monogram moves down to the signature as a seal */
/* the C&R monogram stays in the letterhead, top left */
/* paragraphs with a date in the left margin, written in the pen like the schedule's times */
.inv-p { position: relative; margin-top: 1.6rem; padding-bottom: 0.35rem; font-size: 1.22rem; line-height: 1.65; }

/* the sign-off fills the foot of the page, the seal beside it */

.letters #invitation .inv-seal {
  position: absolute; right: 0; bottom: 0.4rem; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--pen) 45%, transparent); rotate: -8deg;
  font-family: var(--hand); font-size: 1rem; color: var(--pen);
}
#invitation .sheet { padding-bottom: clamp(4.5rem, 8vw, 7rem); }

@media (max-width: 1000px) {
  .inv-letter > .inv-p:first-child { padding-right: 3.25rem; }
  .letters #invitation .greet { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .letters #invitation .lede, .inv-p { font-size: 1.12rem; }
  
  #invitation .sheet { padding-bottom: 4rem; }
}

/* one shared text column with the schedule: greeting, body and paragraphs start on the same left edge */
html { --inv-col: min(100%, 44rem); }
.letters #invitation :is(.greet, .inv__text, .inv-letter) { width: var(--inv-col); max-width: none; margin-inline: auto; }
.letters #invitation .greet { font-size: clamp(1.8rem, 2.6vw, 2.3rem); overflow-wrap: anywhere; }
.letters #invitation .lede { text-wrap: pretty; }
@media (max-width: 1000px) {
  .letters #invitation .greet { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .letters #invitation :is(.lede, .inv-p) { font-size: 1.15rem; }
  
  .letters #invitation .inv-seal { right: auto; left: 0.25rem; bottom: 0; }
}
@media (max-width: 1000px) {
  /* long names: a touch smaller so whole words fit, never split mid-name */
  .letters #invitation .greet { font-size: clamp(1.35rem, 6vw, 1.85rem); overflow-wrap: normal; }
}

/* the margin notes at the size of the schedule's times, stacked, in the gap left of the body */

.inv-p { min-height: 4.6rem; }
@media (max-width: 1000px) {
  .inv-p { min-height: 0; }
}

/* the rings beside the signature, centred on the names; the seal after them */

.letters #invitation .inv-seal { position: static; grid-column: 3; grid-row: 2; }
.inv-p { min-height: 0; }

@media (max-width: 1000px) {
  /* each note above its paragraph, on the right */
  
  .inv-letter > .inv-p:first-child { padding-right: 0; }
  
  
  .letters #invitation .inv-seal { grid-column: 1; grid-row: 3; }
}
/* the dates marked in pen on the text itself */
.inv-mark { position: relative; display: inline-block; white-space: nowrap; }
.inv-mark__ink { position: absolute; max-width: none; overflow: visible; pointer-events: none; }
.inv-mark--ring .inv-mark__ink { rotate: -3deg; }
.inv-mark__ink path { fill: none; stroke: var(--pen, #28304a); stroke-linecap: round; stroke-linejoin: round; }
/* more paper under the last paragraph */
#invitation .sheet { padding-bottom: clamp(8rem, 13vw, 12rem); }
@media (max-width: 1000px) { #invitation .sheet { padding-bottom: 6rem; } }

/* ==========================================================================
   The reply slip, rewritten as sentences with blanks
   ========================================================================== */
.blankwrap { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; }
.blankwrap--name { flex: 1 1 14rem; max-width: 22rem; }
.blankwrap--tel { flex: 0 1 15rem; }
.blank--tel { width: 100%; }
.letters .blank::placeholder { font-family: var(--hand); font-style: normal; font-size: 1.2rem; color: color-mix(in oklab, var(--pen) 45%, transparent); }
/* the select reads as a blank too, with a hand-drawn caret */
.blankwrap--select { flex-direction: row; align-items: baseline; }
.letters .blank--select { min-width: 3.2rem; padding-right: 1.4rem; background-image: none; font-family: var(--hand); font-style: normal; color: var(--pen); }
.caret { position: absolute; right: 0.15rem; top: 50%; width: 0.85rem; height: 0.6rem; translate: 0 -40%; pointer-events: none; overflow: visible; }
.caret path { fill: none; stroke: var(--pen, #28304a); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* the chosen answer: circled loosely in ink; the other fades */
.pick span { position: relative; }
.pick span::before { display: none; }

@keyframes pick-draw { to { stroke-dashoffset: 0; } }
.slip__form[data-att] .pick input:not(:checked) + span { opacity: 0.45; }
.pick span { transition: opacity 0.25s, color 0.25s; }
.pick input:focus-visible + span { outline: 2px solid var(--wisteria); outline-offset: 6px; border-radius: 4px; }
/* errors in a hand, muted red, right under their blank */
/* errors in the slip's printed face, like its own lines ("You can reach me at"), not in the pen */
.letters .slip__form .err { font-family: var(--print); font-style: normal; font-size: 1.05rem; line-height: 1.4; color: #9a4a3c; margin: 0.15rem 0 0; text-shadow: none; }
.blankwrap .err { position: absolute; top: 100%; left: 0; width: max-content; max-width: 22rem; }
.slip__line { row-gap: 1.6rem; }
.err--line { margin-top: -0.6rem !important; }

@media (max-width: 1000px) {
  .blankwrap--name, .blankwrap--tel { flex: 1 1 100%; max-width: none; }
  .blankwrap .err { position: static; width: auto; }
  .slip__line { row-gap: 0.6rem; }
}

/* blanks carry their own punctuation, so a comma or full stop never wraps onto a line of its own */
.blankwrap { display: inline-grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.blankwrap > input, .blankwrap > select { grid-column: 1; grid-row: 1; }
.blankwrap--name::after { content: ","; grid-column: 2; grid-row: 1; color: var(--ink-soft); padding-left: 0.1rem; }
.blankwrap--tel::after { content: "."; grid-column: 2; grid-row: 1; color: var(--ink-soft); padding-left: 0.1rem; }
.blankwrap .err { position: static; grid-column: 1 / -1; grid-row: 2; width: auto; max-width: none; }
.blankwrap--name { flex: 0 1 17rem; }
.blankwrap--select .caret { right: 0.15rem; top: 1.1rem; }

.err--line { margin-top: -0.4rem !important; }
@media (max-width: 1000px) {
  .blankwrap--name { flex: 1 1 calc(100% - 1.6rem); }
  .blankwrap--tel { flex: 1 1 100%; }
}

/* ==========================================================================
   Reply letter: the closing words at body size, the slip higher up
   ========================================================================== */
.letters .letter--reply .closing.closing { font-size: 1.22rem; line-height: 1.65; max-width: 44rem; }
.letter--reply .slip { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: clamp(2rem, 4vw, 3rem); }

/* the attendance choices: a hand-drawn box per line, ticked when chosen */
.opts { display: grid; gap: 0.35rem; margin: -0.6rem 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; width: fit-content; cursor: pointer; padding: 0.15rem 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt__box { width: 0.9em; height: 0.9em; flex: none; overflow: visible; font-size: 1.5rem; translate: 0 0.05em; }
.opt__box path { fill: none; stroke: color-mix(in oklab, var(--pen) 70%, transparent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.opt__tick { stroke: var(--pen) !important; stroke-width: 1.9 !important; stroke-dasharray: 1; stroke-dashoffset: 1; }
.opt input:checked + .opt__box .opt__tick { stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s ease-out; }
.letters .opt__text { position: relative; font-family: var(--hand); font-style: normal; font-size: 1.35rem; line-height: 1.7; color: var(--ink-soft); transition: color 0.2s, opacity 0.2s; }
.opt input:checked ~ .opt__text { color: var(--pen) !important; }
.slip__form[data-att] .opt input:not(:checked) ~ .opt__text, .slip__form[data-att] .opt input:not(:checked) + .opt__box { opacity: 0.5; }
/* hover and focus: darker box, a faint dashed line under the words */
.opt:hover .opt__box path, .opt input:focus-visible + .opt__box path { stroke: var(--pen); }
.opt__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2em; border-bottom: 1px dashed color-mix(in oklab, var(--pen) 40%, transparent); opacity: 0; transition: opacity 0.2s; }
.opt:hover .opt__text::after, .opt input:focus-visible ~ .opt__text::after { opacity: 1; }
.opt input:focus-visible ~ .opt__text { outline: 2px solid var(--wisteria); outline-offset: 4px; border-radius: 4px; }
/* the guests line sits right under "joyfully be there", stepped in to the words */
.opts .slip__line--guests { margin: 0.1rem 0 0.4rem 2.1rem; }
.opts .err--line { margin: 0.2rem 0 0 !important; }
@media (prefers-reduced-motion: reduce) { .opt input:checked + .opt__box .opt__tick { transition: none; } }
@media (max-width: 1000px) {
  .opts { margin-left: 0.4rem; }
  .opts .slip__line--guests { margin-left: 1.9rem; }
}

/* what the guest types: the letter's printed face (as in "You can reach me at"), a little heavier, in ink */
.letters .slip__form .blank, .letters .slip__form .blank--select {
  font-family: var(--print); font-style: normal; font-weight: 400; font-size: 1.3rem; line-height: 1.6;
  color: var(--pen); -webkit-text-stroke: 0.45px currentColor; text-shadow: none;
}
.letters .slip__form .blank::placeholder {
  font-family: var(--print); font-style: italic; font-size: 1.2rem; color: color-mix(in oklab, var(--pen) 42%, transparent); -webkit-text-stroke: 0;
}

/* the number of guests on the same line as "joyfully be there" */
@media (min-width: 640px) {
  /* the guests line sits right after "joyfully be there", on its baseline */
  .opts { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: baseline; }
  .letter--reply .slip__form > .opts { max-width: none; } /* room for the whole "people in total" line beside the choice */
  .opts > .opt { align-items: baseline; }
  .opts > .opt .opt__box { align-self: center; } /* the box stays centred; the words give the line its baseline */
  .opts > .opt:first-of-type { grid-column: 1; grid-row: 1; }
  .opts > .slip__line--guests { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: nowrap; }
  /* spans both columns, so the first column is only as wide as "joyfully be there" */
  .opts > .opt:last-of-type { grid-column: 1 / -1; grid-row: 2; }
  .opts > .err--line { grid-column: 1 / -1; grid-row: 3; }
  .opts > .slip__line--guests .fix:first-child::before { content: "—"; margin-right: 0.6rem; color: color-mix(in oklab, var(--ink-soft) 60%, transparent); }
  /* "We will be" / "Vom fi" stays in one piece */
  .opts > .slip__line--guests > .fix:first-child { white-space: nowrap; }
}

/* the reply date circled in ink, like the wedding date */
.slip__by .inv-mark { margin-left: 0.35rem; }
.letters .slip__by .inv-mark { font-family: var(--hand); color: var(--pen); margin-left: 0.55rem; }

/* the reply heading on its own, the deadline circled in the right margin (the circled-date note from the intro) */
.slip__head { justify-content: space-between; align-items: baseline; }
.letters .slip__by { margin-left: auto; }
.letters .slip__by .reply-note {
  font-family: var(--hand); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--pen); rotate: -2deg; margin: 0 0.6rem 0 0;
}
@media (max-width: 1000px) {
  .slip__head { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .letters .slip__by { align-self: flex-end; margin-right: 0.4rem; }
}

/* the guests number in lining figures (the letter's face only has old-style ones, where 1 looks like I) */
.letters .slip__form .blank--select, .letters .slip__form .blank--select option { font-family: "Times New Roman", Times, "Liberation Serif", serif; font-variant-numeric: lining-nums; }

/* reply letter: the paragraph sits closer to the monogram */
.letter--reply .lh { margin-bottom: 2.5rem; }
/* the heading row runs the full width of the slip, so the note sits in the right margin; the blanks keep their measure */
.letter--reply .slip__form { max-width: none; }
.letter--reply .slip__form > :not(.slip__head) { max-width: 50rem; }

/* the circled deadline right beside "Reply" */
.slip__head { justify-content: flex-start; }
.letters .slip__by { margin-left: 1.4rem; }
@media (max-width: 1000px) {
  .slip__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
  .letters .slip__by { align-self: auto; margin: 0 0 0 1rem; }
}

/* ==========================================================================
   Seal & send: a wax seal and a handwritten label, one button
   ========================================================================== */
.slip__send { padding-top: 0; }
.wax-send {
  display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.25rem 0.5rem 0.25rem 0; margin: 0;
  background: none; border: 0; border-radius: 999px; cursor: pointer; color: var(--pen);
}
.wax-send:focus-visible { outline: 2px solid var(--wisteria); outline-offset: 6px; }
.wax-send__seal {
  width: 64px; height: 64px; flex: none; overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(60, 10, 20, 0.35)) drop-shadow(0 6px 10px rgba(60, 10, 20, 0.18));
  transition: transform 0.35s var(--ease-out), filter 0.35s var(--ease-out);
}
.wax-send__mono { font-family: var(--hand); font-size: 12px; fill: #4e111b; stroke: #9a3445; stroke-width: 0.35; stroke-opacity: 0.5; paint-order: stroke; }
.letters .wax-send__label { position: relative; display: inline-block; }
.letters .wax-send__text { font-family: var(--hand); font-style: normal; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.4; color: var(--pen); text-shadow: 0 0 0.7px rgba(40, 48, 74, 0.35); }
.wax-send__line { position: absolute; left: 0; right: 0; bottom: -0.15rem; width: 100%; height: 8px; overflow: visible; }
.wax-send__line path { fill: none; stroke: var(--pen); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 0.35s ease-out; }
.wax-send:hover .wax-send__seal, .wax-send:focus-visible .wax-send__seal {
  transform: rotate(-6deg) translateY(-2px);
  filter: drop-shadow(0 3px 3px rgba(60, 10, 20, 0.35)) drop-shadow(0 10px 14px rgba(60, 10, 20, 0.22));
}
.wax-send:hover .wax-send__line path, .wax-send:focus-visible .wax-send__line path { stroke-dashoffset: 0; }
.wax-send:active .wax-send__seal { transform: scale(0.95); transition-duration: 0.12s; }
.wax-send:disabled { cursor: default; }
.wax-send.is-sealing .wax-send__seal { animation: wax-turn 2.4s linear infinite; }
@keyframes wax-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wax-send__seal, .wax-send:hover .wax-send__seal, .wax-send:active .wax-send__seal { transform: none !important; transition: none; }
  .wax-send.is-sealing .wax-send__seal { animation: none; }
}
@media (max-width: 1000px) { .wax-send { flex-wrap: nowrap; } }

.wax-send__line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the monogram pressed into the wax: darker letters with a lit edge */
.wax-send__mono { font-size: 13.5px; fill: #47101a; stroke: #c26474; stroke-width: 0.5; stroke-opacity: 0.55; }
/* the underline is revealed left to right on hover (a clip, which dashes on a non-scaling stroke can't be trusted to do) */
.wax-send__line path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.wax-send__line { clip-path: inset(0 100% 0 0); transition: clip-path 0.35s ease-out; }
.wax-send:hover .wax-send__line, .wax-send:focus-visible .wax-send__line { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   Seal & send, with the real wax seal: the seal, a little arrow, the words
   ========================================================================== */
.wax-send { gap: 0.35rem; padding: 0.3rem 0.6rem 0.3rem 0.2rem; border-radius: 1.2rem; }
.wax-send__seal {
  width: 88px; height: 88px; flex: none; display: block;
  filter: drop-shadow(1px 2px 1.5px rgba(40, 30, 10, 0.32)) drop-shadow(3px 6px 8px rgba(40, 30, 10, 0.2));
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.wax-send__arrow { width: 2.6rem; height: 1.45rem; flex: none; overflow: visible; translate: 0 -0.15rem; }
.wax-send__arrow path { fill: none; stroke: var(--pen); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* hover: the seal lifts and turns a little, its shadow grows and softens */
.wax-send:hover .wax-send__seal, .wax-send:focus-visible .wax-send__seal {
  transform: translateY(-2px) rotate(-4deg);
  filter: drop-shadow(2px 4px 3px rgba(40, 30, 10, 0.26)) drop-shadow(5px 11px 14px rgba(40, 30, 10, 0.2));
}
/* pressed into the paper */
.wax-send:active .wax-send__seal {
  transform: scale(0.94); transition-duration: 0.12s;
  filter: drop-shadow(0.5px 1px 0.8px rgba(40, 30, 10, 0.4)) drop-shadow(1px 2px 3px rgba(40, 30, 10, 0.18));
}
.wax-send.is-sealing .wax-send__seal { animation: none; }
.wax-send:disabled .wax-send__seal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wax-send:hover .wax-send__seal, .wax-send:focus-visible .wax-send__seal, .wax-send:active .wax-send__seal { transform: none !important; }
  .wax-send__seal { transition: filter 0.3s; }
}
@media (max-width: 1000px) {
  .wax-send { flex-wrap: nowrap; }
  .wax-send__seal { width: 72px; height: 72px; }
  .wax-send__arrow { width: 2rem; }
  .letters .wax-send__text { font-size: 1.15rem; white-space: nowrap; }
}

/* the monogram pressed into the middle of the seal: darker than the wax, a lit lower-right edge */
.wax-send__seal { position: relative; display: grid; place-items: center; }
.wax-send__seal img { width: 100%; height: 100%; display: block; grid-area: 1 / 1; }
.letters .wax-send__mono {
  grid-area: 1 / 1; translate: 0 -0.05rem; rotate: -6deg; pointer-events: none;
  font-family: var(--hand); font-size: 1.15rem; line-height: 1; letter-spacing: 0;
  color: #8a6234; opacity: 0.85;
  text-shadow: 0.6px 0.8px 0 rgba(255, 236, 196, 0.75), -0.6px -0.7px 0.6px rgba(70, 45, 15, 0.55);
}
@media (max-width: 1000px) { .letters .wax-send__mono { font-size: 0.95rem; } }
/* the monogram centred on the seal's pressed disc (the script's glyphs sit high and left in their box) */
.letters .wax-send__mono { translate: 0.22rem 0.3rem; rotate: -4deg; }
@media (max-width: 1000px) { .letters .wax-send__mono { translate: 0.18rem 0.24rem; } }

/* split lines whose reveal is done keep no mask: the handwriting's loops and tails show in full */
.letters [data-lines].is-written, .letters [data-lines].is-written * { overflow: visible !important; }
.letters .is-written { overflow: visible !important; }

/* ---------- the RO / EN switch and the motion toggle, one pill top right;
   the corner "Kindly reply" moves along to make room ---------- */
.site-controls {
  position: fixed; top: calc(var(--gutter) * 0.6 + env(safe-area-inset-top)); right: var(--gutter); z-index: 120;
  display: flex; align-items: center; gap: 0; padding: 2px;
  border-radius: 999px; background: #fcf9f1;
  box-shadow: 0 0 0 1px rgba(79, 86, 49, 0.12), 0 2px 4px rgba(30, 36, 20, 0.12), 0 8px 22px -8px rgba(30, 36, 20, 0.5);
  font-family: var(--font-display); font-size: 1rem; line-height: 1;
}
.lang-switch { display: flex; align-items: center; }
/* the motion toggle: two waves, crossed out when motion is off; a hairline sets it apart from the languages */
.motion-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 5px;
  padding: 0; border: 0; border-radius: 999px; background: none; color: #5a5c4e; cursor: pointer; transition: color 0.2s, background-color 0.2s;
}
.motion-toggle::before { content: ""; position: absolute; left: -3px; top: 12px; bottom: 12px; width: 1px; background: rgba(79, 86, 49, 0.2); }
.motion-toggle:hover { color: var(--ink); background: rgba(79, 86, 49, 0.08); }
.motion-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle__slash { stroke-width: 1.8; }
.motion-toggle:focus-visible, .lang-switch a:focus-visible { outline: 2px solid var(--wisteria); outline-offset: 2px; }
/* each option is a 44 × 44 tap target */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.5rem;
  border-radius: 999px; color: #5a5c4e; font-weight: 400; text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s, background-color 0.2s;
}
.lang-switch a:hover { color: var(--ink); background: rgba(79, 86, 49, 0.08); }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 600; background: rgba(79, 86, 49, 0.1); }
.lang-switch span { color: #8a8b7c; }
@media (min-width: 1001px) {
  .corner-reply { right: calc(var(--gutter) + 7.25rem); }
  html[data-motion-toggle="on"] .corner-reply { right: calc(var(--gutter) + 10.5rem); }
}
@media (max-width: 1000px) { .site-controls { top: calc(0.6rem + env(safe-area-inset-top)); right: 0.6rem; font-size: 0.95rem; } }

/* Romanian: the reply's "will" lives inside each choice, so the empty slot disappears */
.slip__line .fix:empty { display: none; }

/* ==========================================================================
   After the seal: the card torn off, folded, sealed and sent (reply.js); the thank-you note
   ========================================================================== */
/* the seal turns while the post office has the reply */
.slip__send .wax-send.is-sealing .wax-send__seal { animation: wax-turn 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .slip__send .wax-send.is-sealing .wax-send__seal { animation: none; } }
.letters .slip__form .err--send { margin: 0.35rem 0 0 0.4rem; }
.slip.is-torn .perf, .slip.is-sent .perf { visibility: hidden; }

.rsvp-card { position: absolute; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.rsvp-card canvas, .rsvp-note-paper { position: absolute; left: 0; display: block; max-width: none; }
.rsvp-note-paper { z-index: -1; pointer-events: none; }
.rsvp-card__shadow {
  position: absolute; left: 14px; right: 14px; top: 12px; bottom: 14px; transform-origin: 50% 0; opacity: 0;
  box-shadow: 0 18px 32px -14px rgba(24, 30, 16, 0.5), 0 5px 10px -3px rgba(24, 30, 16, 0.25);
}
.rsvp-card__fold { position: absolute; inset: 0; perspective: 1600px; }
.rsvp-half { position: absolute; left: 0; width: 100%; }
.rsvp-half--rest { overflow: hidden; }
.rsvp-half--flap { top: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
.rsvp-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rsvp-face--back { transform: rotateX(180deg); }
.rsvp-face__shade { position: absolute; inset: 0; opacity: 0; background: linear-gradient(rgba(60, 50, 30, 0.06), rgba(60, 50, 30, 0.3)); }
.rsvp-card .rsvp-card__seal { position: absolute; z-index: 2; margin: 0; }

/* the note */
.thanks[hidden] { display: none; }
.thanks { gap: 0.45rem; max-width: 46rem; padding-bottom: 0; }
.letters .thanks__title, .letters .thanks__title * {
  font-family: var(--hand); font-style: normal; font-weight: 400; letter-spacing: 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.4; color: var(--pen); text-shadow: 0 0 0.7px rgba(40, 48, 74, 0.35);
  margin: 0 0 0.35rem; outline: none; text-wrap: balance;
}
.thanks__line { width: fit-content; }
.thanks__clause { display: block; }
/* the small note under the headline: who to call with a question */
.letters .thanks__body { font-family: var(--print); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 34rem; }
.letters .thanks__body a { color: inherit; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.letters .thanks__body a:hover { color: var(--pen); }
.thanks__body a:focus-visible { outline: 2px solid var(--wisteria); outline-offset: 3px; border-radius: 2px; }

/* once sent the letter keeps its height (letters.js holds it): the note sits in the middle of the room
   the card left, with as much paper above it as below */
.letter--reply .sheet.is-sent { display: flex; flex-direction: column; }
.letter--reply .slip.is-sent { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 0; }

/* after sending: the intro's place holds the answer, "Ana Popescu, 2 people", in the same printed voice */
.letters .reply-summary { font-family: var(--print); font-size: 1.22rem; line-height: 1.65; color: #2a261f; margin-bottom: 0.6rem; }
@media (max-width: 700px) { .letters .reply-summary { font-size: clamp(1.3rem, 5.6vw, 1.55rem); line-height: 1.45; } }



/* a word the language leaves out (Romanian has no "I," before the name, nor "will" after it) takes no room */
.slip__line > .fix:empty { display: none; }
/* phones: "Vom fi [2] persoane" keeps together; only the rest of the sentence moves to the next line */
@media (max-width: 639px) {
  .opts > .slip__line--guests > .fix:last-child { display: contents; }
  .opts > .slip__line--guests > .fix:first-child { white-space: nowrap; }
}

/* ---------- our godparents' names, between the two photographs: set like ours in the hero ---------- */
.over-names {
  position: relative; z-index: 2; width: var(--sheet-w); margin: 0 auto 34vh;
  display: grid; justify-items: center; gap: 0.15em; text-align: center;
  color: #fbf8ef; font-family: var(--font-display); font-weight: 300; letter-spacing: -0.035em; line-height: 1;
  text-shadow: 0 2px 30px rgba(14, 22, 12, 0.45), 0 1px 3px rgba(14, 22, 12, 0.35);
  -webkit-text-stroke: 0.9px currentColor; paint-order: stroke fill;
}
.letters .over-names p { margin: 0; color: inherit; text-shadow: inherit; }
.letters .over-names, .letters .over-names * { font-family: var(--font-display); }
.letters .over-names__lead { font-size: clamp(1.6rem, 3.6vw, 3.2rem); letter-spacing: -0.02em; -webkit-text-stroke: 0.5px currentColor; }
.letters .over-names__names { font-size: clamp(3rem, 10vw, 10rem); white-space: nowrap; }
@media (max-width: 1000px) {
  .over-names { margin-bottom: 26vh; font-weight: 400; letter-spacing: -0.04em; -webkit-text-stroke: 0.5px currentColor; }
  .letters .over-names__names { font-size: clamp(2.6rem, 13.5vw, 7rem); }
}