/* ==========================================================================
   Meg & James — 24 October 2026
   Derived from the purchased Midsummer Paper invitation suite.

   Palette lives entirely in the tokens below. The botanicals are alpha masks
   painted with `background-color`, so recolouring the whole site — when the
   revised burgundy/blush palette lands — means editing --ink-* tokens only.
   No asset is ever re-exported for a colour change.
   ========================================================================== */

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;          /* single variable file covers every weight */
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- palette (sampled from the template's own colour page) --- */
  --bone: #efeeea;
  --ink: #000000;
  --terracotta: #c55434;
  --sage: #a7b2a6;
  --blush: #cebbb6;

  /* --- semantic roles: repoint these when the new palette arrives --- */
  --page-bg: var(--bone);
  --text: var(--ink);
  --text-soft: #4a4845;
  --rule: rgba(0, 0, 0, 0.28);
  --floral: var(--ink);          /* botanicals are painted this colour */
  --accent: var(--ink);          /* links, focus, buttons */
  --panel-bg: var(--blush);      /* the RSVP card, per the printed suite */

  /* --- type --- */
  --face: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --tracking-wide: 0.18em;       /* the invite's signature wide caps */
  --tracking-xwide: 0.3em;

  /* --- rhythm --- */
  --measure: 62rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 12vh, 9rem);
}

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

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--face);
  font-weight: 400;
  line-height: 1.65;
  /* the print pieces are ink on uncoated stock — keep strokes light, not fat */
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); position: relative; }

/* ---------------------------------------------------------------- typography
   Everything on the invite is tracked caps. Tracking adds space *after* the
   final letter, which visually de-centres short lines, so centred runs get a
   compensating negative margin.                                             */
.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 700;
}
.caps--center { margin-right: calc(var(--tracking-wide) * -1); }

h1, h2, h3 { font-weight: 700; margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(1.35rem, 3.4vw, 2.35rem);
  line-height: 1.42;
}

h2 {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  margin-right: calc(var(--tracking-xwide) * -1);
}

.lede,
.detail {
  font-size: clamp(0.82rem, 1.35vw, 0.95rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 2.1;
  margin: 0;
}

.detail--soft { color: var(--text-soft); }

/* Split header used on the invite: word — pill — word */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(0.72rem, 1.5vw, 0.95rem);
}

/* The outlined oval that rings the date. A border-radius pill matches the
   printed ellipse closely and stays crisp at any size — no image needed. */
.pill {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  padding: 0.62em 1.5em;
  font-size: clamp(0.68rem, 1.3vw, 0.84rem);
  letter-spacing: 0.2em;
  white-space: nowrap;
  margin-right: -0.2em;
}

/* ------------------------------------------------------------------ florals
   Each file is black ink on transparency, so the alpha channel *is* the
   artwork. Painting it as a mask means one file works in any colour.        */
.floral {
  --size: 8rem;
  width: var(--size);
  aspect-ratio: var(--ratio, 1);
  background-color: var(--floral);
  -webkit-mask-image: var(--src);
          mask-image: var(--src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
}

/* Decorative botanicals scattered around the hero. Absolute placement is
   deliberate — it mirrors the invite's loose hand-placed arrangement rather
   than snapping to a grid. Hidden on narrow screens where they'd collide. */
.scatter { position: absolute; opacity: 0.92; }
/* Narrow-screen scatter overrides live with the desktop positions further
   down — they have to come after them in source order to win. */

/* --------------------------------------------------------------------- rule */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 0;
}

/* ------------------------------------------------------------------- panels */
.panel {
  background: var(--panel-bg);
  padding: clamp(2rem, 6vw, 4rem);
}

/* -------------------------------------------------------------------- links */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.28em; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- skip link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 1rem;
  z-index: 10;
  background: var(--page-bg);
  padding: 0.6rem 1rem;
}

/* -------------------------------------------------------------------- utils */
.stack > * + * { margin-top: var(--space, 1.6rem); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* TODO markers are visible on purpose while content is outstanding. */
.todo {
  background: repeating-linear-gradient(45deg, rgba(197,84,52,.12) 0 8px, transparent 8px 16px);
  outline: 1px dashed var(--terracotta);
  outline-offset: 3px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding-block: clamp(2rem, 6vh, 3.5rem) clamp(2.5rem, 7vh, 4rem);
  min-height: min(100svh, 52rem);
  display: flex;
}

/* The flex column has to be the .wrap — it's the hero's only child, so
   putting it on .hero itself would leave hero__body's flex:1 with nothing
   to grow against. */
.hero > .wrap {
  display: flex;
  flex-direction: column;
}

/* The body flexes so the names stay optically centred in whatever space is
   left between the eyebrow and the foot — same as the printed sheet. */
.hero__body {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 10vh, 7rem);
}

/* Names sit above the botanicals and are held to a narrow column, which is
   what creates the clear channel the scatter positions work around. */
.hero__body h1 {
  position: relative;
  z-index: 1;
  max-width: 22ch;
}

.hero__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  text-align: center;
  align-items: end;
}

@media (max-width: 34rem) {
  .hero__foot { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* Scatter positions. Percentages so the arrangement scales with the hero
   rather than drifting apart on large screens. Sizes are deliberately uneven
   — the printed suite mixes small sprigs with larger specimens.
   The names occupy a centre channel roughly 30–70% across and 34–66% down, so
   anything in that vertical band is kept to the outer margins. */

/* top band — free to use the full width, above the type */
.s2 { top: -1%;  left: 20%;  --size: 6.5rem; transform: rotate(4deg); }
.s3 { top: -3%;  left: 48%;  --size: 7rem; }
.s4 { top: 1%;   right: 19%; --size: 6.5rem; transform: rotate(8deg); }

/* middle band — outer margins only, clear of the names */
.s1 { top: 30%;  left: -1%;  --size: 8rem;  transform: rotate(-6deg); }
.s5 { top: 34%;  right: -2%; --size: 8.5rem; transform: rotate(-4deg); }

/* bottom band — full width again, below the type */
.s6 { bottom: 2%;  left: 3%;  --size: 10rem; transform: rotate(3deg); }
.s7 { bottom: -4%; left: 45%; --size: 7rem;  transform: rotate(-8deg); }
.s8 { bottom: 3%;  right: 2%; --size: 8rem;  transform: rotate(6deg); }

/* Narrow screens: most guests arrive from a link on the invite, so the
   botanicals have to survive here. Only the middle-band pair is dropped —
   those sit beside the names and have nowhere to go once the column narrows.
   The rest shrink into the generous space above and below the type.

   MUST stay after the .s1–.s8 block above: equal specificity means source
   order decides, and an earlier @media block silently loses every property
   the desktop rules also set (which is exactly what --size did).

   Note getBoundingClientRect reports the *rotated* box, so a 6rem mask with a
   3deg rotation measures wider than 6rem — budget clearance accordingly. */
@media (max-width: 44rem) {
  .s1, .s5 { display: none; }

  .s2 { top: 3%;     left: 1%;   --size: 5rem;   }
  .s3 { top: 0%;     left: 38%;  --size: 5rem;   }
  .s4 { top: 5%;     right: 0%;  --size: 5rem;   }

  .s6 { bottom: 16%; left: 0%;   --size: 5.5rem; }
  .s7 { bottom: 14%; left: 42%;  --size: 4rem;   }
  .s8 { bottom: 18%; right: 0%;  --size: 4.5rem; }
}

/* Centred single botanical used as a section ornament. */
.center-floral { display: block; margin-inline: auto; --size: 7rem; }

/* ==========================================================================
   NAV — a quiet rule-bounded strip, not a sticky app bar
   ========================================================================== */
.navbar {
  border-block: 1px solid var(--rule);
  font-size: clamp(0.68rem, 1.3vw, 0.78rem);
}

.navbar__inner {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 4.5rem);
  padding-block: 1.15rem;
}

.navbar a { text-decoration: none; }
.navbar a:hover { text-decoration: underline; }

/* ==========================================================================
   FORM
   ========================================================================== */
.rsvp-form {
  --space: 1.9rem;
  max-width: 30rem;
  margin-inline: auto;
  text-align: left;
  width: 100%;
}

.form-row { margin: 0; }

.form-row label,
.form-row legend {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.rsvp-form input[type="text"],
.rsvp-form input[type="email"],
.rsvp-form input[type="number"],
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
  background: transparent;
  border: 0;
  /* Underline-only fields echo the printed card's fill-in rules. */
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.5rem 0.1rem;
  -webkit-appearance: none;
          appearance: none;
}

.rsvp-form textarea { resize: vertical; }

.rsvp-form select {
  /* restore an affordance, since appearance:none removes the arrow */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.9rem center, right 0.55rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.rsvp-form fieldset { border: 0; margin: 0; padding: 0; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.choice input { accent-color: var(--accent); width: 1rem; height: 1rem; }

.btn {
  font: inherit;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--page-bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 1em 2.4em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.btn:hover {
  background: transparent;
  color: var(--accent);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vh, 4rem);
}

.footer .credit { font-size: 0.62rem; letter-spacing: 0.1em; opacity: .75; }