/* ─────────────────────────────────────────────────────────────────────────
   Max & Angela — Press direction
   A printed page, not a screen: warm laid paper, a Didone masthead, an
   italic old-style body, and one script accent. Bodoni Moda + EB Garamond
   + Pinyon Script.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --paper: #efeae0;        /* warm laid paper */
  --paper-deep: #e6e0d3;   /* the shade in the fold */
  --ink: #1b1a17;          /* press black, warmed */
  --ink-soft: #6f6a60;     /* caption grey */
  --rule: rgba(27, 26, 23, 0.22);

  --didone: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Italianno", cursive;

  --pad-y: clamp(64px, 9vw, 132px);
  --pad-x: clamp(22px, 6vw, 72px);
  --measure: 46ch;
}

* { box-sizing: border-box; }

/* Author `display` rules outrank the UA stylesheet's [hidden] { display:none },
   so .field { display:grid } was keeping the count field and the thank-you
   block visible even while marked hidden. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
}

/* Paper grain. A fixed, non-interactive fractal-noise wash over the whole
   sheet — this is what stops the cream from reading as flat #EFEAE0 fill
   and starts reading as stock. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

.sheet { position: relative; z-index: 1; overflow: hidden; }

.pad { padding: var(--pad-y) var(--pad-x); }

/* ── type registers ─────────────────────────────────────────────────── */

/* The script accent. Used once per section, never for anything a reader
   must be able to scan quickly. */
.script {
  font-family: var(--script);
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1;
  margin: 0 0 6px;
  color: var(--ink);
}

.display {
  font-family: var(--didone);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 26px;
}

.caps {
  font-family: var(--serif);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.caps--wide { letter-spacing: 0.55em; }

.body-copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.62;
  max-width: var(--measure);
  margin: 0 auto 32px;
  color: var(--ink);
  text-wrap: pretty;
}

.body-copy--tight { margin-bottom: 40px; }

/* ── MASTHEAD ───────────────────────────────────────────────────────── */

.masthead {
  text-align: center;
  padding: clamp(56px, 9vw, 116px) var(--pad-x) clamp(44px, 6vw, 76px);
  max-width: 1120px;
  margin: 0 auto;
}

.masthead__names {
  font-family: var(--didone);
  font-weight: 400;
  /* The masthead is the one place the Didone runs at poster size, where its
     hairlines actually show — capped so "MAX & ANGELA" holds one line and
     the ampersand doesn't strand at the end of a broken first line. */
  font-size: clamp(33px, 9.5vw, 106px);
  line-height: 0.96;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.masthead__names .amp {
  font-style: italic;
  font-size: 0.72em;
  padding: 0 0.06em;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(20px, 3vw, 34px) auto clamp(22px, 3vw, 32px);
  max-width: 320px;
  color: var(--ink);
}

.ornament__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.ornament__dot { font-size: 11px; opacity: 0.75; }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 26px;
  text-wrap: balance;
}

/* ── SPREAD: portrait plate beside a statement ──────────────────────── */

/* Every photo we have is a 2:3 portrait, so the layout is built to hold
   portraits whole rather than crop them into letterbox bands. */

.spread {
  display: grid;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(40px, 6vw, 96px) var(--pad-x);
  max-width: 1240px;
  margin: 0 auto;
}

.spread__figure { margin: 0; }

.spread__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-deep);
}

.spread__text { text-align: center; }

@media (min-width: 900px) {
  .spread {
    grid-template-columns: 45% 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
  .spread__text { text-align: left; }
  .spread__text .body-copy { margin-left: 0; margin-right: 0; }
}

/* ── FULL-BLEED RING BAND ───────────────────────────────────────────── */

.band {
  position: relative;
  overflow: hidden;
  background: #17130e;
  /* Explicit height, NOT aspect-ratio + max-height: when a clamped max-height
     meets an aspect-ratio on a block, the browser shrinks the inline size to
     preserve the ratio and the band stops being full-bleed. */
  /* Plain px first: a browser without svh support would throw out the whole
     clamp(), fall back to height:auto, and collapse the band to nothing —
     the image inside is absolutely positioned. */
  height: 420px;
  height: clamp(320px, 46svh, 520px);
}

.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is an untouched 2:3 portrait; pull the framing up to the ring
     so the wide band lands on the hand rather than the middle of the frame. */
  object-position: center 30%;
}

/* ── DIPTYCH ────────────────────────────────────────────────────────── */

.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0 clamp(10px, 1.4vw, 20px) 0;
  max-width: 1400px;
  margin: 0 auto;
}

.diptych__cell { margin: 0; }

.diptych__cell img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--paper-deep);
}

/* ── MONOGRAM SEAL ──────────────────────────────────────────────────── */

/* Geometry, so this stays fixable:
     r95  outer rule        r88  inner rule
     r74  text ring — BOTH arcs share this radius, or the ring reads crooked
     monogram sits on the centre, capped so it never reaches the text ring. */

.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }

.seal__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* The lighter companion rule and the bar under the monogram. */
.seal__ring--fine {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.seal__text {
  font-family: var(--serif);
  /* 12/0.24em fits "MAX & ANGELA" across roughly half the top arc. At 15px
     with 0.3em it ran the full semicircle and read as stretched. */
  font-size: 12px;
  letter-spacing: 0.24em;
  fill: currentColor;
  text-transform: uppercase;
}

.seal__mono {
  font-family: var(--didone);
  font-size: 44px;
  letter-spacing: 0.02em;
  fill: currentColor;
}

.seal__amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
}

/* On the ring band the seal is knocked out in paper-white, set to the right
   where the frame is almost solid black. */
.seal--onband {
  position: absolute;
  top: 50%;
  right: clamp(24px, 8vw, 120px);
  transform: translateY(-50%);
  width: clamp(104px, 13vw, 168px);
  aspect-ratio: 1;
  color: #f4f0e6;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.5));
  z-index: 2;
}

.seal--small {
  width: 62px;
  aspect-ratio: 1;
  color: var(--ink);
  opacity: 0.85;
}

/* The simplified mark drops the text ring, so the monogram fills the space. */
.seal--small .seal__mono { font-size: 74px; }
.seal--small .seal__amp { font-size: 50px; }

/* ── STATEMENT / REGISTRY / RSVP shared centring ────────────────────── */

.registry,
.rsvp {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

/* The RSVP deadline is the one date on the page — let it carry emphasis. */
.rsvp .body-copy em {
  font-style: normal;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}

/* ── VENUE ──────────────────────────────────────────────────────────── */

.venue {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.venue__addr {
  font-style: normal;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.venue__date { margin-top: 30px; }

/* ── DRESS CODE ─────────────────────────────────────────────────────── */

.dress {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  max-width: 640px;
  margin: 4px auto 36px;
}

.palette__cell { text-align: center; }

.palette__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  /* The pale end of this palette is close to the paper, so every chip needs
     an edge or champagne/beige/cream dissolve into the page. */
  box-shadow: inset 0 0 0 1px rgba(27, 26, 23, 0.16);
}

.palette__name {
  display: block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}

.dress__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.dress__copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.55;
  margin: 12px 0 0;
  color: var(--ink);
}

/* ── BUTTON ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 15px 34px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ── RSVP FORM ──────────────────────────────────────────────────────── */

.rsvp-form {
  display: grid;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.field { display: grid; gap: 5px; }

.field__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field__label-optional {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 9px 4px;
  font: 400 17px var(--serif);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.field input::placeholder { color: rgba(111, 106, 96, 0.72); font-style: italic; }
.field input:focus { border-bottom-color: var(--ink); }

.field textarea {
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid var(--rule);
  padding: 13px 15px;
  font: 400 17px var(--serif);
  color: var(--ink);
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}
.field textarea::placeholder { color: rgba(111, 106, 96, 0.72); font-style: italic; }
.field textarea:focus { border-color: var(--ink); }

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  margin-top: 8px;
  width: max-content;
}
.stepper__btn {
  background: transparent;
  border: none;
  width: 46px;
  height: 46px;
  font: 400 22px var(--serif);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.stepper__btn:hover { background: var(--ink); color: var(--paper); }
.stepper input {
  border: none;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  width: 66px;
  text-align: center;
  font: 400 18px var(--serif);
  color: var(--ink);
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reply-toggle {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.reply-toggle__btn {
  flex: 1;
  padding: 13px 10px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: italic 400 16px var(--serif);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.reply-toggle__btn:hover { border-color: var(--ink); }
.reply-toggle__btn.is-selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.rsvp-form__submit {
  margin-top: 8px;
  padding: 15px 20px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: transparent;
  font: 400 11px var(--serif);
  color: var(--ink);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.rsvp-form__submit:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.rsvp-form__submit:disabled { opacity: 0.38; cursor: not-allowed; }

.rsvp-thanks { text-align: center; padding: 26px 0; }

.rsvp-thanks__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  margin-bottom: 8px;
}

/* A full sentence set in letterspaced caps is unreadable — the confirmation
   line stays in the body register. */
.rsvp-thanks__sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 auto;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 4vw, 40px) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.foot__seal { justify-self: start; }

.foot__mid { text-align: center; }

.foot__right {
  justify-self: end;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  body { padding-top: env(safe-area-inset-top, 0px); }

  .band { height: 300px; height: clamp(260px, 40svh, 360px); }
  .seal--onband {
    top: auto;
    bottom: clamp(16px, 4vw, 26px);
    right: clamp(16px, 4vw, 26px);
    transform: none;
    width: 96px;
  }

  /* Stack the diptych — two 2:3 portraits side by side on a phone leaves
     each one about 190px wide, too small to read. */
  .diptych {
    grid-template-columns: 1fr;
    gap: clamp(10px, 2.6vw, 18px);
    padding: 0 clamp(10px, 2.6vw, 18px);
  }

  /* Eight chips across a phone is ~40px each — wrap to two rows instead. */
  .palette { grid-template-columns: repeat(4, 1fr); gap: 0 0; max-width: 340px; }
  .palette__cell:nth-child(n+5) { margin-top: 14px; }
  .palette__name { font-size: 8px; letter-spacing: 0.08em; }

  .dress__cols {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }

  .foot {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }
  .foot__seal, .foot__right { justify-self: center; }
}

@media (max-width: 460px) {
  .reply-toggle { flex-direction: column; }
  .seal__text { font-size: 17px; letter-spacing: 0.24em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}