/* ==========================================================================
   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.
   -------------------------------------------------------------------------- */

.corners { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

.corner {
  position: fixed;
  /* 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;
}

/* The top-right group is a tall vertical spray (roughly 1:3.3), so it is sized
   by HEIGHT — sizing by width would run it far past the fold and crop the
   lower blooms on every screen. */
.corner--tr {
  top: 0;
  right: 0;
  height: min(96vh, 1080px);
  width: auto;
  max-width: 42vw;   /* keep it out of the text column on short, wide screens */
}

.corner--bl {
  bottom: 0;
  left: 0;
  width: clamp(150px, 26vw, 360px);
  height: auto;
}

/* Narrow screens have no gutter, so the corners sit over the content. Pull them
   back to a suggestion rather than letting them compete with the words. */
@media (max-width: 900px) {
  .corner--tr { height: min(52vh, 560px); opacity: 0.45; }
  .corner--bl { width: clamp(120px, 30vw, 200px); opacity: 0.45; }
}
@media (max-width: 600px) {
  .corner--tr { height: min(40vh, 380px); opacity: 0.32; }
  .corner--bl { width: 42vw; opacity: 0.32; }
}

@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; }
}