/* ==========================================================================
   Beth's Bridal Shower — design tokens lifted from the Figma source
   Figma: za2zswTxfcWwwO9eRu67Xq (Bridal-Shower-Invite / Recipe-Card)
   ========================================================================== */

:root {
  /* Colour — sampled from the Figma frames */
  --blue:        #8598c5;
  --blue-deep:   #6b7fae;
  --blue-wash:   #eef1f8;
  --bg:          #f4eeed;  /* outer blush board */
  --paper:       #fbf7f6;  /* inner arch card   */
  --ink:         #17161a;
  --ink-soft:    #4a4750;
  --rule:        #d9d2d1;

  /* Type */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;

  /* Letterspacing — the Figma uses a consistent 0.1em on caps + italics */
  --track:       0.1em;
  --track-wide:  0.18em;

  /* Layout */
  --measure:     min(1100px, 100% - 3rem);
  --arch:        clamp(140px, 26vw, 340px);
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-deep); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  background: var(--blue-deep); color: #fff;
  padding: 0.6rem 1.2rem; z-index: 100;
  text-decoration: none; letter-spacing: var(--track);
  border-radius: 0 0 6px 6px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  letter-spacing: var(--track);
  color: var(--ink);
  margin: 0;
}

.section-title {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1.75rem;
  text-align: center;
}

.script-rule {
  width: min(160px, 40%);
  height: 1px;
  border: 0;
  background: var(--rule);
  margin: 2.5rem auto;
}

/* --------------------------------------------------------------------------
   Corner arrangements — the invite's own two floral groups, exported whole
   from Figma. Fixed to the viewport so they frame every section the way they
   frame the invite, instead of scrolling away after the hero.
   -------------------------------------------------------------------------- */

/* width:100vw, not inset:0. A fixed element's `right:0` resolves to the edge of
   the LAYOUT viewport, which excludes a classic scrollbar — so on any browser
   showing one, the right-hand art sat ~15px short of the window edge and read as
   floating rather than anchored. 100vw includes the scrollbar; overflow:hidden
   stops that extra width from scrolling the page. */
.corners {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.corner {
  /* absolute INSIDE .corners, so the edges are the window's, scrollbar included */
  position: absolute;
  /* Behind all content (z-index 2). The invite lets petals fall over the arch,
     but on a page with forms, art over input fields costs more than it buys. */
  z-index: 1;
}

/* Sized against the WINDOW, the way the artwork is sized against the CARD on
   the invite. Measured from the visible artwork, not the Figma frame bounds —
   the frames carry heavy padding and gave a backwards ratio:

       arrangement   visible width   share of the 1650-unit card
       top-right         474                 0.2873
       bottom-left       704                 0.4267

   The bottom-left is the wider of the two (ratio 0.674 : 1). Both bleed to the
   card edge on the invite, so both sit flush to the window edge here.

   Capped at the size they reach around a 1920px window — past that the window
   keeps widening but the flowers shouldn't keep growing, and since both caps
   trigger at the same width the ratio still holds on an ultrawide. */

.corner--tr {
  top: 0;
  right: 0;
  width: min(28.73vw, 552px);
  height: auto;
}

.corner--bl {
  bottom: 0;
  left: 0;
  width: min(42.67vw, 819px);   /* 552 / 819 = 0.674, the invite's ratio */
  height: auto;
}

/* Narrow screens have no gutter, so the art falls across the words. Keep the
   invite's proportions but drop it back to a wash. */
@media (max-width: 900px) { .corner { opacity: 0.42; } }
@media (max-width: 600px) { .corner { opacity: 0.30; } }

@media print {
  .corners { display: none; }
}

/* --------------------------------------------------------------------------
   Hero — the arch card from the invite
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* The hero isolates its own stacking context and carries its own florals, so
     it sits above the rail rather than letting it intrude on the arch. */
  z-index: 2;
  padding: clamp(1rem, 3vw, 2.5rem);
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden; /* keeps the corner stems from bleeding into Details */
}

.hero__card {
  position: relative;
  z-index: 1;
  width: var(--measure);
  max-width: 900px;
  background: var(--paper);
  border-radius: var(--arch) var(--arch) var(--arch) var(--arch);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 6vw, 5rem);
  text-align: center;
  box-shadow: 0 30px 80px -40px rgba(90, 105, 150, 0.3);
}

.hero__script {
  width: min(620px, 100%);
  margin: 0.5rem auto 1.5rem;
  height: auto;
}

.hero__honoring {
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  letter-spacing: var(--track);
  margin: 0 0 0.85rem;
}

.hero__name {
  font-size: clamp(1.5rem, 0.95rem + 2.6vw, 3.25rem);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  color: var(--blue);
  margin: 0;
  text-transform: uppercase;
  line-height: 1.15;
  text-wrap: balance;
}

/* Date row — SEPT | 12 | 12 PM */
.datebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.75rem);
  margin: clamp(2.25rem, 5vw, 3.5rem) 0;
}

.datebar__unit {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.4rem);
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
}

.datebar__day { width: clamp(70px, 12vw, 128px); }
.datebar__day svg,
.datebar__day img { width: 100%; height: auto; }

.datebar__div {
  width: 1px;
  align-self: stretch;
  min-height: 3.5rem;
  background: var(--rule);
}

.venue__name {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.85rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}

.venue__addr {
  font-style: italic;
  letter-spacing: var(--track);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  margin: 0;
  line-height: 1.5;
}

.venue__map {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 3px;
  transition: opacity 0.2s var(--ease);
}
.venue__map:hover { opacity: 0.65; }

.hero__cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 0.95em 2.2em;
  border-radius: 999px;
  border: 1px solid var(--blue);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.2s var(--ease);
}

.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--blue-deep); }
.btn--ghost:hover { background: var(--blue-wash); transform: translateY(-2px); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding: clamp(4rem, 10vw, 7.5rem) 1.5rem;
}

.section__inner {
  position: relative;
  z-index: 2;
  width: var(--measure);
  max-width: 820px;
  margin: 0 auto;
}

.section__inner--paper {
  background: var(--paper);
  border-radius: clamp(28px, 5vw, 56px);
  padding: clamp(2rem, 6vw, 4rem);
  box-shadow: 0 24px 60px -44px rgba(90, 105, 150, 0.35);
}

.section--tint { background: var(--blue-wash); }

.lede {
  text-align: center;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  text-wrap: pretty;
}

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

.form { display: grid; gap: 1.4rem; }

/* align-content:start keeps each row at its natural height. Without it a
   field with no hint text (Dietary needs) stretches to match its taller
   neighbour and the input grows instead of sitting flush with it. */
.field { display: grid; gap: 0.45rem; align-content: start; }

.field__label {
  font-size: 0.8rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--blue-deep);
}

.field__req { color: var(--blue); }

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea,
.field select {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(133, 152, 197, 0.18);
}

.field--error input, .field--error textarea { border-color: #b4544f; }

.field__error {
  font-size: 0.85rem;
  font-style: italic;
  color: #b4544f;
  min-height: 1.2em;
}

.field__hint {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* Attending — segmented radio pair */
.choice { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Hidden but still focusable — clipped so the inputs never stack on top of
   one another and steal each other's pointer events. */
.choice input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.choice label {
  flex: 1 1 12rem;
  text-align: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: var(--track);
  font-size: 0.95rem;
  background: #fff;
  transition: all 0.2s var(--ease);
}

.choice label:hover { border-color: var(--blue); }

.choice input:checked + label {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.choice input:focus-visible + label {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
}

.form__row { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.form__actions { display: flex; justify-content: center; margin-top: 0.75rem; }

/* Collapses when "can't make it" is selected */
[hidden] { display: none !important; }

.form__status {
  text-align: center;
  font-style: italic;
  letter-spacing: 0.04em;
  padding: 1rem;
  border-radius: 12px;
  margin-top: 0.5rem;
}
.form__status--ok   { background: var(--blue-wash); color: var(--blue-deep); }
.form__status--err  { background: #fbeceb; color: #9d4642; }

/* Thank-you panel swapped in after submit */
.thanks { text-align: center; padding: 1rem 0; }
.thanks h3 {
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  color: var(--blue);
  letter-spacing: var(--track);
  font-weight: 400;
  margin: 0 0 0.75rem;
}
.thanks p { font-style: italic; color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   Registry
   -------------------------------------------------------------------------- */

.registry {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
@media (max-width: 620px) {
  .registry { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

.registry__qr {
  width: clamp(150px, 30vw, 210px);
  background: #fff;
  padding: 0.9rem;
  border-radius: 18px;
  box-shadow: 0 14px 34px -22px rgba(90, 105, 150, 0.5);
}

.registry__pw {
  font-style: italic;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
  letter-spacing: var(--track);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
  display: inline-block;
  margin: 0.35rem 0 1.5rem;
}

.registry__pw code {
  font-family: var(--serif);
  font-style: italic;
  background: none;
  font-size: 1em;
}

/* --------------------------------------------------------------------------
   Info card — the at-a-glance details panel
   -------------------------------------------------------------------------- */

.info-card {
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 24px 60px -44px rgba(90, 105, 150, 0.45);
}

.info-card__body { padding: clamp(1.75rem, 5vw, 2.5rem); }

.info-card__body .venue__name { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }
.info-card__body .venue__addr { font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.15rem); }

.info-card__foot {
  background: var(--bg);
  padding: 1rem 1.5rem;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Recipe card — from the Recipe-Card frame
   -------------------------------------------------------------------------- */

.recipe-card {
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -44px rgba(90, 105, 150, 0.45);
  max-width: 640px;
  margin: 0 auto;
}

.recipe-card__head {
  position: relative;
  background: var(--blue);
  padding: 1.5rem clamp(1.25rem, 4vw, 2.25rem);
  overflow: hidden;
}

.recipe-card__head h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* The bloom strip across the header — cropped, not squashed. */
.recipe-card__head img {
  position: absolute;
  right: 0; top: 0;
  width: clamp(160px, 42%, 300px);
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0.95;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
          mask-image: linear-gradient(to right, transparent, #000 22%);
}

.recipe-card__body { padding: clamp(1.25rem, 4vw, 2.25rem); }

.recipe-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.recipe-card__meta span {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  min-width: 7rem;
}

.recipe-card__cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 560px) { .recipe-card__cols { grid-template-columns: 1fr; } }

.recipe-card__cols h4 {
  margin: 0 0 0.85rem;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { border-bottom: 1px solid var(--rule); height: 1.9rem; }
.ruled li:nth-child(even) { border-color: var(--blue); opacity: 0.85; }

.recipe-card__foot {
  background: var(--bg);
  padding: 1rem clamp(1.25rem, 4vw, 2.25rem);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem clamp(2rem, 5vw, 3rem);
  position: relative;
  z-index: 2;
}

.footer__script { width: min(320px, 70%); margin: 0 auto 1.5rem; opacity: 0.85; }

.footer p {
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 0.35rem 0;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Print — the invite and recipe card should print cleanly
   -------------------------------------------------------------------------- */

/* Print-just-the-recipe-card mode, toggled from js/main.js */
body.print-recipe-only > *:not(#recipe) { display: none !important; }
body.print-recipe-only #recipe { padding: 0; background: #fff; }
body.print-recipe-only #recipe .section-title,
body.print-recipe-only #recipe .lede,
body.print-recipe-only #recipe #print-recipe { display: none !important; }

@media print {
  body { background: #fff; }
  .hero { min-height: auto; }
  /* Hide the interactive bits by ID. This used to say `.section--tint`, which
     ALSO matched #recipe — so "Print this card" produced a blank page, because
     the one section it existed to print was display:none. */
  .hero__cta, .skip-link, #rsvp, #questions, .venue__map { display: none !important; }
  #recipe { display: block !important; background: #fff; }
  .recipe-card { break-inside: avoid; box-shadow: none; border: 1px solid var(--rule); }
  .reveal { opacity: 1; transform: none; }
}