/* ============================================================================
   Teodora & Paul — 15–17 May 2027
   One stylesheet for the whole site. No build step: what you see here is what
   the browser runs.

   HOW TO EDIT
   - Colours, fonts and spacing all live in :root below. Change them there and
     they change everywhere. Never write a colour like #1D5D97 further down.
   - Sections are marked with big ==== banners. Use your editor’s search.
   ========================================================================= */


/* ============================================================================
   1. FONTS
   Two Garamonds, both stored in assets/fonts/ so the site works offline and
   with no Google connection.

   - Cormorant Garamond — the face from the faire-part. Used for the titles.
   - Sorts Mill Goudy — drawn for reading, and used for every paragraph. Two
     reasons it is not Cormorant: Cormorant's é rises higher than its h, so a
     page of French or Romanian looks spiky; and Cormorant's stems are too
     light to be a text face at all. Goudy's accents sit well inside the line
     and it keeps the thick/thin modulation that makes the page look drawn.

   Two files per style: "latin" covers French, "latin-ext" adds the Romanian
   letters ș ț ă î â. The browser downloads only what a page actually needs.
   ========================================================================= */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The reading face. One weight only — Goudy has no others, and the site
   never sets bold body text. */
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sorts-mill-goudy-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   2. TOKENS — the only place colours, sizes and spacing are defined
   ========================================================================= */

:root {
  /* --- Colours, sampled from the faire-part at 300 dpi --------------------- */
  --navy:       #1D5D97;   /* the faire-part’s blue: headings, links, wordmark */
  --ink:        #0C335C;   /* deeper navy: body text, better contrast          */
  --red:        #D11417;   /* the faire-part’s red: accents, place names       */
  --red-warm:   #DA3F29;   /* the illustration’s warmer red: large shapes only */
  --paper:      #FFFFFF;   /* page background                                  */
  --cream:      #F0E5D1;   /* the illustration’s cream                         */
  --cream-soft: #FAF6EE;   /* a paler cream for alternating sections           */
  --rule:       #D9E2EC;   /* hairlines                                        */

  /* --- Type --------------------------------------------------------------- */
  /* --font is what you read; --font-display is what you look at. See §1. */
  --font:         'Sorts Mill Goudy', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Sizes grow with the viewport: clamp(minimum, preferred, maximum).
     No media queries needed for type. */
  --t-hero:  clamp(2.6rem, 11vw,  6.5rem);
  --t-xl:    clamp(2.1rem, 6vw,   3.4rem);
  --t-lg:    clamp(1.6rem, 4vw,   2.2rem);
  --t-day:   clamp(1.85rem, 5vw,  2.8rem);  /* between --t-lg and --t-xl */
  --t-md:    clamp(1.25rem, 2.6vw, 1.5rem);
  --t-body:  clamp(1.06rem, 1.7vw, 1.22rem);
  --t-sm:    clamp(0.92rem, 1.3vw, 1rem);
  --t-xs:    0.82rem;

  /* --- Spacing scale ------------------------------------------------------ */
  --s-1: 0.35rem;
  --s-2: 0.7rem;
  --s-3: 1.2rem;
  --s-4: 2rem;
  --s-5: 3.2rem;
  --s-6: 5rem;
  --s-7: 7.5rem;

  /* --- Layout ------------------------------------------------------------- */
  --measure: 34rem;   /* comfortable reading width for a paragraph */
  --page:    64rem;   /* outer content width                       */
  --gutter:  clamp(1.2rem, 5vw, 3rem);

  --track: 0.14em;    /* letter-spacing for small caps / labels */
}


/* ============================================================================
   3. 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; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  /* Old-style figures: 3, 4, 7, 9 dip below the line, as in a printed book.
     Cormorant and Goudy both draw them that way with nothing asked; this line
     is here so a future swap to a font that needs asking still gets them. */
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-weight: 500;
  /* 1.15 was too tight for Cormorant: a two-line French title could bring an
     é up into the descenders of the line above. */
  line-height: 1.22;
  color: var(--navy);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

/* Cormorant keeps the titles and the small uppercase lines — set in capitals,
   they never show the tall-accent problem, and they carry the faire-part look. */
h1, h2, h3,
.hero__date, .place, .schedule__time,
.label, .site-nav a, .strip span {
  font-family: var(--font-display);
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-3); max-width: var(--measure); }

a { color: var(--navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: var(--s-2) var(--s-3);
}
.skip:focus { left: var(--s-3); top: var(--s-3); z-index: 100; }

/* Hidden: i18n.js hides any text that is empty in the current language. */
[hidden] { display: none !important; }

/* Screen-reader only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


/* ============================================================================
   4. REUSABLE PIECES
   ========================================================================= */

.wrap {                       /* centred content column */
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section--cream { background: var(--cream-soft); }

/* Small caps label — used for dates, times, eyebrow text */
.label {
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-2);
}
.label--red { color: var(--red); }

/* The place line under a date, set in red italic, as on the faire-part */
.place { color: var(--red); font-style: italic; font-size: var(--t-md); }

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

/* --- Folk ornaments ------------------------------------------------------ */
/* Decorative only, so they are background images with an empty element and
   aria-hidden — screen readers skip them. */

.orn { display: block; margin-inline: auto; background-repeat: no-repeat;
       background-position: center; background-size: contain; }

.orn--divider { width: min(26rem, 70%); height: 2.2rem;
       background-image: url('../img/ornament/divider.webp'); }
.orn--sprig   { width: min(16rem, 55%); height: 3rem;
       background-image: url('../img/ornament/sprig-pair.webp'); }
.orn--band    { width: min(46rem, 92%); height: clamp(3.5rem, 11vw, 7rem);
       background-image: url('../img/ornament/band-floral.webp'); }
/* The page-head band: story, travel, gifts, rsvp. .orn--light is the same box
   with an airier flower — unused for now, kept for a page that wants a change. */
.orn--sprays  { width: min(34rem, 86%); height: clamp(3.5rem, 10vw, 6rem);
       background-image: url('../img/ornament/band-sprays.webp'); }
.orn--light   { width: min(34rem, 86%); height: clamp(3.5rem, 10vw, 6rem);
       background-image: url('../img/ornament/band-floral-light.webp'); }
.orn--crest   { width: min(38rem, 90%); height: clamp(3rem, 8vw, 5rem);
       background-image: url('../img/ornament/band-crest.webp'); }
.orn--rule    { width: min(28rem, 72%); height: 2.8rem;
       background-image: url('../img/ornament/rule.webp'); }

.orn + * { margin-top: var(--s-4); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--navy);
  color: var(--navy);
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: var(--navy); color: var(--paper); }

/* A button on its own line between paragraphs: equal air above and below. */
.cta { margin-block: var(--s-4); }


/* ============================================================================
   5. HEADER + FOOTER
   ========================================================================= */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
  background: var(--paper);
}
/* Phone: brand, then menu, then languages, stacked and centred.
   Wide screen: the three sit on one line, brand left, languages right. */
.site-header .wrap {
  max-width: 78rem;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
@media (min-width: 68rem) {
  .site-header .wrap {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

/* The "Teodora & Paul" wordmark — assets/img/wordmark.svg, traced from the
   faire-part, so it stays sharp at any size.
   It is a plain <img>. It could have been a CSS mask, which would let --navy
   colour it, but a mask is blocked when the page is opened by double-clicking
   the file, and that has to keep working. So the navy is set inside the SVG
   itself (open it in a text editor: the colour="..." near the top). It is the
   one colour on the site that does not come from :root. */
.wordmark { display: block; width: 100%; height: auto; }

.brand { width: clamp(8rem, 20vw, 11rem); }
.brand:hover { opacity: .75; }

.site-nav { min-width: 0; width: 100%; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-3);
}
@media (min-width: 48rem) { .site-nav ul { gap: var(--s-2) var(--s-4); } }
.site-nav a {
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--red); }
.site-nav a[aria-current='page'] { color: var(--navy); border-bottom-color: var(--red); }

/* --- Language switcher --------------------------------------------------- */
.lang { display: flex; gap: var(--s-2); align-items: center; }
.lang button {
  font: inherit;                /* resets the button's own font first... */
  font-family: var(--font-display);   /* ...so this has to come after it */
  font-size: var(--t-xs);
  letter-spacing: var(--track); text-transform: uppercase;
  background: none; border: 0; padding: var(--s-1) var(--s-2);
  color: var(--ink); cursor: pointer; opacity: .55;
}
.lang button:hover { opacity: 1; color: var(--red); }
.lang button[aria-pressed='true'] { opacity: 1; color: var(--navy); border-bottom: 1px solid var(--red); }

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-5);
  text-align: center;
  color: var(--navy);
}
.site-footer p { max-width: none; margin: 0; }
.site-footer .place { display: block; margin-top: var(--s-1); }


/* ============================================================================
   6. HOME — three screens
   ========================================================================= */

/* --- Screen 1: the title page -------------------------------------------- */
/* THREE BACKGROUND OPTIONS. Pick one by changing the class on <body> in
   index.html:
       class="home hero--illustration"   the Romanian blouse illustration
       class="home hero--bands"          floral bands top and bottom
       class="home hero--photo"          a full-bleed photo behind the names
   Only the chosen one loads its image. */

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6) var(--gutter);
  position: relative;
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 2; }
.hero__inner p { margin-inline: auto; }

.hero__mark {                     /* the "Teodora & Paul" wordmark, large */
  width: min(38rem, 84vw);
  margin: 0 auto;
  color: var(--navy);
}

.hero__date {
  font-size: var(--t-lg);
  letter-spacing: var(--track);
  color: var(--navy);
  margin: var(--s-3) 0 0;
  max-width: none;
}
.hero__place { margin-top: var(--s-1); }

/* Option A — the illustration, sitting behind the names */
.hero--illustration .hero { background: var(--cream-soft); }
.hero--illustration .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: url('../img/blouse-roumaine.webp') center 28% / auto 68% no-repeat;
  opacity: .14;
}

/* Option B — floral bands above and below, closest to the faire-part */
.hero--bands .hero { background: var(--paper); }
.hero--bands .hero::before,
.hero--bands .hero::after {
  content: ''; position: absolute; left: 0; right: 0; height: clamp(4rem, 13vw, 9rem);
  background: url('../img/ornament/band-floral.webp') center / contain no-repeat;
}
.hero--bands .hero::before { top: var(--s-4); }
.hero--bands .hero::after  { bottom: var(--s-4); transform: scaleY(-1); }

/* Option C — full-bleed photo. Change the image below to the real photo when
   you have one; it is a painting for now. */
.hero--photo .hero { color: var(--paper); }
.hero--photo .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: url('../img/story/oradea.webp') center / cover no-repeat;
}
.hero--photo .hero::after {                    /* scrim, so the text stays readable */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(255,255,255,.72);
}

/* --- Screen 2: the welcome message --------------------------------------- */
.welcome {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--s-6) var(--gutter);
  background: var(--paper);
}
.welcome__inner { max-width: 40rem; }
.welcome p { margin-inline: auto; }
.welcome p { font-size: var(--t-md); }
.welcome__sign { font-style: italic; color: var(--navy); font-size: var(--t-md);
                 margin-bottom: var(--s-4); }

/* --- Screen 3: the strips, one per page ---------------------------------- */
/* Vertical strips on a wide screen, stacked cards on a phone. */
.strips {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;         /* phone: one under the other */
}
@media (min-width: 60rem) {
  .strips { grid-template-columns: repeat(6, 1fr); }
}

.strip {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 9rem;
  padding: var(--s-4) var(--s-2);
  text-decoration: none;
  color: var(--navy);
  background: var(--cream-soft);
  border-bottom: 1px solid var(--paper);
  overflow: hidden;
  transition: background-color .3s;
}
@media (min-width: 60rem) {
  .strip { min-height: 100svh; border-bottom: 0; border-right: 1px solid var(--paper); }
  .strip:last-child { border-right: 0; }
}

/* Each strip’s picture. Set per strip with --art below. */
.strip::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--art);
  background-repeat: no-repeat;
  background-size: cover; background-position: center;
  opacity: .22;
  transition: opacity .3s, transform .5s;
}
.strip:hover::before { opacity: .38; transform: scale(1.04); }
.strip:hover { background: var(--cream); }

.strip span {
  position: relative; z-index: 2;
  font-size: var(--t-md);
  letter-spacing: var(--track);
  text-transform: uppercase;
}
@media (min-width: 60rem) {
  /* sideways label, like a spine */
  .strip span { writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* What sits behind each strip. Paintings and folk motifs alternate down the
   row: painting, motif, painting, motif, painting, motif.
   A painting fills its strip. A motif is small and centred instead — a folk
   pattern blown up to full height turns into an abstract blob. */
.strip--story  { --art: url('../img/story/newyork.webp'); }
.strip--travel { --art: url('../img/story/oradea.webp'); }
.strip--rsvp   { --art: url('../img/story/transylvania.webp'); }

.strip--day    { --art: url('../img/ornament/sprig.webp'); }
.strip--gifts  { --art: url('../img/ornament/motif-leaf.webp'); }
.strip--faq    { --art: url('../img/ornament/motif-single.webp'); }

.strip--day::before,
.strip--gifts::before,
.strip--faq::before {
  /* Phone: small and pushed to the right, clear of the centred label. */
  background-size: auto 46%;
  background-position: right 6% center;
  opacity: .75;
}
@media (min-width: 60rem) {
  .strip--day::before,
  .strip--gifts::before,
  .strip--faq::before {
    background-size: 46% auto;
    background-position: center 14%;
  }
}

/* The leaf is far taller than it is wide. On a phone the strip is short and
   wide, so it uses a laid-down copy of the same motif; the computer layout
   keeps the upright one, sized by height so it doesn't read as a sliver. */
.strip--gifts::before {
  background-image: url('../img/ornament/motif-leaf-h.webp');
  background-size: 30% auto;
}
@media (min-width: 60rem) {
  .strip--gifts::before {
    background-image: var(--art);
    background-size: auto 20%;
  }
}


/* ============================================================================
   7. STORY — one painting + text per city
   ========================================================================= */

.chapter {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
}
.chapter:first-of-type { border-top: 0; padding-top: var(--s-3); }

@media (min-width: 52rem) {
  .chapter { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  /* every other chapter puts the painting on the right */
  .chapter:nth-of-type(even) .chapter__art { order: 2; }
}

.chapter__art img {
  width: 100%;
  /* a soft mount, so the paintings read as paintings and not as photos */
  box-shadow: 0 1px 2px rgba(12,51,92,.10), 0 12px 30px rgba(12,51,92,.10);
}
.chapter__text p:last-child { margin-bottom: 0; }
.chapter__city { margin-bottom: var(--s-1); }
.chapter__years {
  color: var(--red); font-style: italic;
  margin: 0 0 var(--s-3);
}
.chapter__caption {
  font-size: var(--t-sm); color: var(--navy); font-style: italic;
  margin-top: var(--s-2);
}


/* ============================================================================
   8. THE WEEKEND — the three days and their schedules
   ========================================================================= */

/* The heading above each day: "The welcome day" + its date. */
.daypart {
  text-align: center;
  max-width: var(--measure);
  margin: 0 auto var(--s-4);
}
.daypart .label { margin-bottom: 0; }
/* One notch up from a normal h2, so each day reads as a chapter — but still
   clearly below the page title. */
.daypart h2 { font-size: var(--t-day); }

/* One grid for the whole list — not one per item — so that the times line up
   down the page even when one of them is a word ("Afternoon") and the rest are
   clock times. `display: contents` lets each <li> hand its two cells to the
   list's grid. */
.schedule {
  list-style: none; margin: 0 auto; padding: 0; max-width: 38rem;
  display: grid;
  grid-template-columns: max-content 1fr;
}
.schedule li { display: contents; }
.schedule li > * { padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.schedule li:first-child > * { border-top: 0; }

.schedule__time {
  padding-right: var(--s-4);     /* the gap between the columns; a column-gap
                                    would break the hairline between rows */
  font-size: var(--t-lg);
  color: var(--red);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.schedule__what { margin: 0; }
.schedule__name { font-size: var(--t-md); color: var(--navy); display: block; }
.schedule__where { font-size: var(--t-sm); display: block; margin-top: var(--s-1); }
.schedule__where a { color: inherit; }

/* What happens at that moment. One <span> per paragraph — they sit inside the
   <p class="schedule__what">, so they are made to behave like paragraphs. */
.schedule__desc { display: block; margin-top: var(--s-3); }


/* ============================================================================
   9. GENERIC CONTENT BLOCKS — travel, gifts, faq
   ========================================================================= */

.prose { max-width: var(--measure); margin-inline: auto; }
.prose h2 { margin-top: var(--s-5); }
/* A heading that sits alone above a full-width .cards grid: centre it, or it
   reads as if it belonged to the narrow text column instead of the cards. */
.prose--head { text-align: center; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: var(--s-2); }

/* Cards — hotels, restaurants, travel routes.
   Flexbox rather than a grid so that a last row holding fewer cards than the
   others sits centred instead of stranded against the left edge. */
.cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3);
  margin-block: var(--s-4);
}
.card {
  flex: 1 1 15rem;          /* grow to share the row, wrap below 15rem */
  max-width: 22rem;         /* a lone last card stays card-sized   */
  border: 1px solid var(--rule);
  padding: var(--s-4);
  background: var(--paper);
}
.card h3 { margin-bottom: var(--s-1); }
.card p { margin-bottom: var(--s-2); max-width: none; }
.card p:last-child { margin-bottom: 0; }
.card__meta { font-size: var(--t-sm); color: var(--red); font-style: italic; }

/* A quiet highlighted note — dress code, warnings */
.note {
  border-left: 2px solid var(--red);
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  margin-block: var(--s-4);
}
.note p:last-child { margin-bottom: 0; }

/* FAQ — pure HTML accordion, no JavaScript */
.faq { max-width: var(--measure); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding-block: var(--s-3);
  font-size: var(--t-md); color: var(--navy);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--red); font-size: var(--t-md); }
.faq details[open] summary::after { content: '–'; }
/* An answer may run to several paragraphs; padding (not the p margin)
   sets the rhythm, so one and three paragraphs space out the same. */
.faq details > *:not(summary) { margin-bottom: 0; padding-bottom: var(--s-3); }

/* RSVP — the embedded Google Form */
.form-embed {
  width: 100%;
  max-width: 40rem;
  margin: var(--s-4) auto 0;
  border: 1px solid var(--rule);
  background: var(--cream-soft);
}
.form-embed iframe { width: 100%; border: 0; display: block; min-height: 70svh; }

/* Link under the form, for browsers that refuse to show an embedded page */
.form-fallback {
  margin: var(--s-3) auto 0;
  text-align: center;
  font-size: var(--t-sm);
}


/* ============================================================================
   10. PAGE HEADS — the title block at the top of each inner page
   ========================================================================= */

.page-head {
  text-align: center;
  padding-block: var(--s-5) var(--s-4);
}
.page-head p { margin-inline: auto; }
/* An introduction stands clear of the title above it, rather than tucking
   under it — the same air a title-only page gets before its first line. */
.page-head h1 { margin-bottom: var(--s-4); }
.page-head .orn { margin-bottom: var(--s-4); }
/* A picture inside a page head: centred, between the title and the intro. */
.page-head__portrait { margin: 0 auto var(--s-4); max-width: 34rem; }
/* The last line of a page head needs no margin of its own — the padding below
   already spaces it. And a head that is nothing but a title (Gifts, Questions)
   needs none of that padding either, or the title floats off on its own. */
.page-head > :last-child { margin-bottom: 0; }
.page-head:not(:has(p)) { padding-bottom: 0; }


/* ============================================================================
   11. PRINT — guests do print the schedule
   ========================================================================= */

@media print {
  .site-nav, .lang, .strips, .skip { display: none; }
  body { color: #000; font-size: 11pt; }
  .hero, .welcome { min-height: 0; page-break-after: avoid; }
  a { text-decoration: none; color: #000; }
}