/* ==========================================================================
   Serene & Mikkel — Carnation Farms, 4–6 June 2027
   MEADOW. The one stylesheet, chosen 1 September 2026. No build step, no
   external requests.
   After MIN-TFE-DWW: pale sage ground, soft green ink, lowercase italic
   navigation. Late spring.
   Every choice the review switchers used to offer is settled and baked in
   here: the painting, its crop and width, the lettering and its spacing. The
   alternates (evergreen, ridge, valley) and the switcher variants are gone
   from the tree; git history before 17 September 2026 has them.
   ========================================================================== */

:root {
  --paper:      #E7EADF;
  --paper-warm: #EFF1E8;
  --ink:        #48533F;
  --ink-dim:    #6C7764;
  --ink-faint:  #949E8C;
  --accent:     #9D8461;
  --accent-dp:  #7E6947;
  --rule:       #C9D0BC;

  /* Same faces as VALLEY. Didot was here first, but its hairlines get thin and
     brittle at body sizes, and it falls back to Georgia off a Mac. */
  --display: "Iowan Old Style", "Hoefler Text", Baskerville, Palatino, Georgia, serif;
  --body:    "Iowan Old Style", Baskerville, Palatino, Georgia, serif;

  /* The masthead painting. Wildflower, settled 17 September 2026. */
  --header-art: url("assets/header-wildflower.jpg");

  --measure: 88ch;
  --gutter:  clamp(20px, 5vw, 44px);
  --band:    clamp(56px, 9vw, 104px);

  /* Masthead band geometry. Tokens rather than literals so the frame variants
     at the foot of this file are overrides, not duplicated rules. */
  /* Equal top and bottom, so the names sit on the band's centre line. The sum
     is what sets the band's height, and therefore the crop, so change both
     together or Serene's crop moves. */
  /* The band's height is set, not inherited from how tall the names happen to
     be. It decides the crop, and Serene chose that crop deliberately -- so it
     must not move when the lettering changes. Switching to a script face with
     a big x-height was pushing this from 356 to 446 and taking her framing
     with it. */
  /* Locked in 15 September 2026: the picture runs wider than the text column
     (the "wide" of the old width switcher). The height is Serene's crop of
     1 September. */
  --band-width:  1360px;
  --band-height: clamp(210px, 27vw, 380px);
  /* Moved down the picture so more of the flower bank shows while the peaks
     stay in frame. */
  --band-focus:  58%;

  /* The panel behind the names. At this crop the names fall on the mountains
     rather than the sky, and without something behind them they get lost in
     the painting. This is the dial: raise the alpha for more separation, or
     set it to transparent to take the panel away entirely. */
  --names-scrim: rgba(255, 255, 255, 0.66);

  /* Colour grading for the masthead painting, and the fade at its edges.
     Serene asked for less saturated, less bright, greener and dreamier. The
     picture sits on its own layer so these can be filtered without touching
     the names on top of it. --header-wash is a soft-light green laid over it.
     No hue push: turning the ridges green is done in the file itself,
     selectively, because a filter rotates every colour at once and took the
     whole meadow round to orange along with the mountains. */
  --header-grade: saturate(0.88) brightness(1) contrast(0.97);
  --header-wash:  rgba(126, 158, 126, 0.28);
  /* The border is gone; the picture dissolves into the page instead. */
  --header-fade:  clamp(24px, 5vw, 70px);
  --page-ground: var(--paper);
  --gap: clamp(30px, 4.4vw, 52px);

  /* The names' lettering. Five tokens describe the face; .names below reads
     them and nothing else does. */
  --names-base:   clamp(1.7rem, 1.05rem + 3vw, 3.2rem);
  /* Roundhand, settled 15 September 2026. See the note at the foot of this
     file about what guests off a Mac will actually see. */
  --names-face:   "Snell Roundhand", "Apple Chancery", "Lucida Calligraphy",
                  "Segoe Script", Palatino, Georgia, serif;
  --names-style:  normal;
  --names-weight: 700;
  /* "Wide", settled 17 September 2026 from the tight / normal / wide / wider
     options. Roundhand is a joined script, so this pulls its joins apart a
     little; that was looked at and chosen. Zero here must carry a unit: a
     bare 0 inside calc() invalidates the whole letter-spacing declaration. */
  --names-track:  0.09em;
  --names-scale:  1.28;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.75;
  overflow-x: hidden;              /* the corner botanical bleeds off-canvas */
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dp); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink);
        color: var(--paper); padding: 10px 18px; z-index: 20; }
.skip:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto;
        padding-inline: var(--gutter); }

/* --------------------------------------------------------------------------
   Masthead — the watercolour band

   This used to be the fir-bough drawing, cropped off the top-left corner. It
   is now the wildflower painting Serene chose, running wider than the hero
   picture below and centred on the same axis.
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  padding-top: clamp(18px, 3vw, 34px);
  padding-bottom: 0;
  text-align: center;
}

/* The names sit in the pale sky along the top of the painting. That empty band
   of paper is what it is there for, so the focal point is held high: the band is
   shallower than the picture, and holding it at 18% takes most of the crop off
   the bottom of the flowers while leaving the sky the names need. */
.namestack {
  display: block;
  position: relative;
  isolation: isolate;
  display: grid;
  place-content: center;
  min-height: var(--band-height);
  width: min(var(--band-width), 100vw);
  margin-left: calc(50% - min(var(--band-width), 100vw) / 2);
  padding-block: clamp(10px, 1.6vw, 18px);
  padding-inline: clamp(12px, 3vw, 30px);
}

/* The painting, on its own layer beneath the names, so it can be graded and
   faded without the filter reaching the type. */
.namestack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--header-wash), var(--header-wash)),
    var(--header-art) center var(--band-focus) / cover no-repeat,
    var(--paper-warm);
  background-blend-mode: soft-light, normal, normal;
  filter: var(--header-grade);
  /* No border. The edges dissolve into the page colour instead, which sits
     better against a watercolour than a ruled box does. */
  box-shadow: inset 0 0 var(--header-fade) calc(var(--header-fade) * 0.28) var(--page-ground);
}

/* The names. Serene asked for the navigation's font, bold; that became the
   Roundhand script on 15 September. The face is the five --names-* tokens at
   the top of the file. The panel behind them is --names-scrim. */
.names {
  position: relative;
  z-index: 1;
  margin: 0;
  /* Hug the words rather than the full width of the band. */
  display: inline-block;
  font-family: var(--names-face);
  font-style: var(--names-style);
  font-weight: var(--names-weight);
  font-size: calc(var(--names-base) * var(--names-scale));
  line-height: 1.16;
  letter-spacing: var(--names-track);
  text-transform: none;
  white-space: nowrap;
  /* A soft halo, not a card. A hard-edged rectangle reads as a sticker laid on
     top of a watercolour; fading it out lets the painting come back through at
     the edges while still lifting the names off the mountains. */
  background: radial-gradient(ellipse at center,
              var(--names-scrim) 0%,
              var(--names-scrim) 42%,
              transparent 72%);
  padding: clamp(18px, 3vw, 38px) clamp(34px, 6vw, 88px);
}

/* The "and" keeps its own smaller, lighter treatment. */
.names .amp {
  display: block;
  font-size: max(0.8rem, 0.3em);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--accent);
  margin-block: 0.4em;
}

/* --------------------------------------------------------------------------
   Navigation — lowercase italic, the signature of the reference design
   -------------------------------------------------------------------------- */

.nav {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  padding-block: clamp(16px, 2.6vw, 26px) clamp(24px, 4vw, 38px);
}

.nav a {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.08rem);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.nav a:hover { color: var(--accent-dp); border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.rule { height: 1px; border: 0; margin: 0; background: var(--rule); opacity: 0.9; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-top: clamp(30px, 5vw, 58px); }
.hero figure { margin: 0; }
.hero figcaption {
  font-family: var(--display); font-style: italic;
  font-size: 0.92rem; letter-spacing: 0.04em;
  color: var(--ink-faint); padding: 14px 4px 0; text-align: center;
}

.invite { padding-block: clamp(40px, 7vw, 74px); text-align: center; }

.invite .lead {
  font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 clamp(16px, 2.4vw, 26px);
}

.invite .date {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.7rem);
  letter-spacing: 0.07em; text-transform: uppercase;
  margin: 0; line-height: 1.2;
}

.invite .place {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.25rem);
  color: var(--accent-dp); margin: clamp(12px, 1.8vw, 18px) 0 0;
}

/* --------------------------------------------------------------------------
   Prose and page heads
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); margin-inline: auto; padding-bottom: var(--band); }
.prose p { margin: 0 0 1.2em; }
.prose p:last-child { margin-bottom: 0; }
main p { max-width: var(--measure); }

/* The invite block is centred against the picture above it, so its paragraphs
   must span the full wrap. Capped to the measure they were only ~600px wide and
   parked on the left edge (the margin shorthands below zero the side margins),
   so the centred text sat left of the page axis while the date, which is set
   large enough never to hit the cap, sat dead centre. That mismatch is what
   both of you flagged. */
.invite p { max-width: none; }

.page-head { padding-top: clamp(40px, 6vw, 70px); text-align: center; }

.page-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.1rem);
  letter-spacing: 0.22em; text-transform: uppercase; margin: 0;
}

.page-head .sub {
  max-width: 74ch; margin: clamp(18px, 2.6vw, 26px) auto 0;
  color: var(--ink-dim); font-style: italic;
}
.page-head .sub.plain { font-style: normal; line-height: 1.95; }

/* --------------------------------------------------------------------------
   Weekend schedule
   -------------------------------------------------------------------------- */

.draft-note {
  max-width: 70ch; margin: 0 auto clamp(36px, 5vw, 54px);
  border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(18px, 2.6vw, 26px) clamp(18px, 3vw, 30px);
  text-align: center; color: var(--ink-dim); font-size: 0.96rem; line-height: 1.7;
}
.draft-note strong {
  display: block; font-weight: 400; font-size: 0.7rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-dp); margin-bottom: 10px;
}

.schedule {
  max-width: 900px; margin-inline: auto; padding-bottom: var(--band);
  display: flex; flex-direction: column; gap: clamp(46px, 6.5vw, 74px);
}

.day > h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.15rem, 0.98rem + 0.9vw, 1.55rem);
  letter-spacing: 0.24em; text-transform: uppercase; margin: 0; text-align: center;
}
.day > .daydate {
  text-align: center; font-family: var(--display); font-style: italic;
  color: var(--accent-dp); margin: 10px 0 clamp(26px, 3.4vw, 36px);
  font-size: 1.05rem;
}

.slots { margin: 0; display: grid; grid-template-columns: 8em 1fr;
         column-gap: clamp(18px, 3vw, 32px); }

.slots dt {
  grid-column: 1; text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--display); font-style: italic;
  font-size: 0.98rem; color: var(--accent-dp);
  padding-block: clamp(12px, 1.7vw, 17px); white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
.slots dd {
  grid-column: 2; margin: 0; padding-block: clamp(12px, 1.7vw, 17px);
  border-bottom: 1px solid var(--rule);
}
.slots dt:last-of-type, .slots dd:last-of-type { border-bottom: 0; }

.slots .what { display: block; line-height: 1.5; }
.slots .gloss {
  display: block; font-size: 0.9rem; font-style: italic;
  color: var(--ink-faint); margin-top: 5px; line-height: 1.55;
}
.slots .soft { color: var(--ink-faint); font-style: italic; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: var(--measure); margin-inline: auto;
       padding-bottom: var(--band); display: flex; flex-direction: column; }

.faq .qa { padding-block: clamp(24px, 3.4vw, 34px); }
.faq .qa + .qa { border-top: 1px solid var(--rule); }

.faq h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  letter-spacing: 0.03em; margin: 0 0 clamp(10px, 1.4vw, 14px);
  color: var(--ink);
}

.faq p { margin: 0 0 0.95em; color: var(--ink-dim); }
.faq p:last-child { margin-bottom: 0; }
.faq strong { color: var(--ink); font-weight: 400; }

.faq .qa[data-flag="pending"] h2::after {
  content: "to be confirmed";
  display: inline-block; font-family: var(--body);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-dp); border: 1px solid var(--accent);
  padding: 2px 9px; margin-left: 12px; vertical-align: 0.2em; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   RSVP holding page
   -------------------------------------------------------------------------- */

.holding { max-width: 76ch; margin-inline: auto;
           padding-bottom: var(--band); text-align: center; }

.holding .stamp {
  display: inline-block; border: 1px solid var(--accent);
  color: var(--accent-dp); font-size: 0.72rem; letter-spacing: 0.24em;
  text-transform: uppercase; padding: 11px 24px;
  margin-bottom: clamp(28px, 4vw, 38px);
}
.holding .headline {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.95rem);
  line-height: 1.42; color: var(--ink); margin: 0 0 clamp(22px, 3vw, 30px);
}
.holding p { color: var(--ink-dim); margin: 0 0 1.15em; }
.holding p:last-child { margin-bottom: 0; }

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

.foot {
  background: var(--paper-warm); border-top: 1px solid var(--rule);
  padding-block: clamp(32px, 5vw, 50px); text-align: center;
}
.foot p { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em;
          text-transform: uppercase; color: var(--ink-faint); }
.foot p + p { margin-top: 12px; letter-spacing: 0.02em;
              text-transform: none; font-style: italic; font-size: 0.9rem; }
.foot a { color: var(--ink-dim); }
.foot a:hover { color: var(--accent-dp); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .names { white-space: normal; }
}

@media (max-width: 560px) {
  .slots { grid-template-columns: 1fr; }
  .slots dt {
    text-align: left; border-bottom: 0; padding-bottom: 2px;
    font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
    font-style: normal; font-family: var(--body);
  }
  .slots dd { padding-top: 0; padding-bottom: 18px; }
  .slots dd:last-of-type { border-bottom: 0; }
}

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

/* --------------------------------------------------------------------------
   Home-page intro is centred, at Mikkel's request. Scoped to .prose so the
   long-form FAQ answers keep their left edge and stay readable.
   -------------------------------------------------------------------------- */

.prose { text-align: center; }
.prose p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Spacing around horizontal section breaks

   One value, so a rule between two sections has the same air above it as below
   wherever it appears. The page heading had no bottom padding at all, which is
   why the dates block on the weekend page ran straight into the note beneath
   it with no break between them.

   The schedule's row borders are deliberately not on this: they separate rows
   within one table, not sections from each other.
   -------------------------------------------------------------------------- */

.page-head  { padding-bottom: var(--gap); }
.faq .qa    { padding-block: var(--gap); }

/* The page heading already supplies the space above the first break on a page,
   so the first block after it must not add its own on top or the gap above the
   rule comes out at double the gap below it. */
.draft-note          { margin-block: 0 var(--gap); }
.faq .qa:first-of-type { padding-top: 0; }

/* --------------------------------------------------------------------------
   About the script face

   Snell Roundhand ships with macOS. It is not on Windows and not on Android,
   so a guest on either falls through this stack instead. The fallbacks are
   ordered deliberately and the last resort is a serif, NOT the generic
   `cursive` keyword -- on a good many Windows installs `cursive` resolves to
   Comic Sans, which is not a thing to discover on a wedding invitation.

   This is a stopgap and not a fix. Making every guest see the same lettering
   means licensing a script face and serving the file from our own domain,
   because the no-third-party rule forbids a font CDN. Until that happens the
   names will look different on different machines.
   -------------------------------------------------------------------------- */