:root {
  /* Instagram's "Classic" is whatever face the device itself uses, so asking
     for the system UI font reproduces it rather than approximating it. */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
          'Helvetica Neue', Helvetica, Arial, sans-serif;

  --crimson: #a8241a;
  --ember: #c8502e;
  --gold: #d99a3d;
  --gold-light: #f0cf9a;
  --sea: #2e3a42;
  --sea-deep: #1f2a31;
  --ivory: #faf6ef;
  --sand: #f0e6d6;
  --ink: #2e2a24;

  /* The palette was warm plus navy with no cool mid-tone; surf supplies the
     sea-glass note that the hairlines, horizons and washes are drawn from. */
  --abyss: #16232b;
  --surf: #6f9aa0;
  --surf-pale: #e3ecec;

  /* Roundness scales with the size of the thing: chips stay pills, panels get
     generous corners. A single radius everywhere reads as a default. */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --hairline: rgba(46, 58, 66, 0.09);
  /* A lit top rim, the way light catches the upper edge of something floating. */
  --rim: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 10px 30px rgba(31, 42, 49, 0.07);
  --shadow-lift: 0 22px 50px rgba(31, 42, 49, 0.13);
}

/* Two fixed layers behind everything: a water gradient for the glass to reveal,
   and a fine grain so the surfaces read as material rather than flat colour. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(111, 154, 160, 0.17), transparent 60%),
    linear-gradient(180deg, var(--ivory) 0%, #f1f1ec 42%, #dae7e7 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The width/height attributes on <img> are presentational hints, so a bare
   `width: 100%` in CSS leaves the height attribute applying literally and the
   picture renders stretched. height:auto restores the real aspect ratio and
   still lets the attributes reserve the right space while loading. */
img { max-width: 100%; height: auto; }

html { 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;
    scroll-behavior: auto !important;
  }
}

/* The default focus ring disappears against the dark nav and the crimson
   buttons, so every interactive element gets an explicit high-contrast one. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* One typeface throughout, and it is the one Instagram calls Classic: the
   platform's own interface face. San Francisco on an iPhone or a Mac, Roboto on
   Android, Segoe UI on Windows, exactly what Instagram sets story text in. It
   also means no webfont to download, so the type is there in the first frame.
   Display sizes are set light and slightly tracked out, which keeps the large
   headings airy rather than heavy. */
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
}

h1, h2, h3, .serif, .script { font-family: var(--font); font-weight: 400; }
.script { font-weight: 300; letter-spacing: 0.06em; }

/* ---------- Navigation ---------- */
/* The bar floats clear of the edges so the photograph reads behind and around
   it, which is what makes the glass legible as glass. */
nav {
  position: fixed;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 1.7rem));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--r-lg);
  background: rgba(31, 42, 49, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(240, 207, 154, 0.2);
  box-shadow: 0 10px 34px rgba(22, 35, 43, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* The logo is not type at all: it is the J, the heart and the G lifted straight
   out of the artwork we drew over the sea, so the mark and the picture are
   literally the same hand. */
nav .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
nav .brand img {
  display: block;
  height: 3.1rem;
  width: auto;
}
@media (max-width: 760px) {
  nav .brand img { height: 2.5rem; }
}
nav .links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
nav .links a {
  text-decoration: none;
  color: var(--ivory);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s;
}
nav .links a:hover, nav .links a[aria-current="page"] { color: var(--gold-light); }
/* Not colour alone, the current page is also underlined. */
nav .links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
nav .links a.cta {
  background: var(--crimson);
  color: #fff;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}
nav .links a.cta:hover { background: var(--ember); color: #fff; }
nav .links a.cta[aria-current="page"] { color: #fff; text-decoration: none; }

.lang-toggle {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lang-toggle button {
  background: none;
  border: none;
  padding: 0 0.1rem;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ivory);
  text-transform: uppercase;
  opacity: 0.6;
  cursor: pointer;
}
.lang-toggle button.on { opacity: 1; color: var(--gold-light); font-weight: 500; }
.lang-toggle .sep { color: var(--ivory); opacity: 0.5; }

@media (max-width: 760px) {
  nav {
    flex-direction: column;
    gap: 0.5rem;
    top: 0.6rem;
    width: calc(100% - 1.2rem);
    padding: 0.65rem 0.9rem;
    border-radius: var(--r-md);
  }
  nav .links { gap: 0.8rem; justify-content: center; }
  nav .links a { font-size: 0.72rem; }
  /* The stacked bar is taller than the one-line desktop version, and the logo
     adds to it, so the hero starts lower to clear it. How much lower is settled
     under "Clearing the fixed bar" at the end of this file, because a constant
     here is not enough. */
}

/* ---------- Hero (sea photo) ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;   /* 100vh overflows under mobile browser chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  background:
    linear-gradient(rgba(31, 42, 49, 0.25), rgba(31, 42, 49, 0.45)),
    var(--hero-img) center 30% / cover no-repeat;
  color: #fff;
  /* The page curves up into the water rather than meeting it on a hard edge. */
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.hero .eyebrow {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--gold-light);
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hero h1 {
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.05;
  text-shadow: 0 3px 24px rgba(0,0,0,0.55);
}
.hero h1 .amp { color: var(--gold-light); }
.hero .date-line {
  margin-top: 1.2rem;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.hero .location {
  margin-top: 0.4rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--gold-light);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.hero .btn-row { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.25s;
  border: 1px solid transparent;
}
.btn.primary { background: var(--crimson); color: #fff; }
.btn.primary:hover { background: var(--ember); transform: translateY(-2px); }
.btn.outline {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.btn.outline:hover { background: rgba(255,255,255,0.9); color: var(--sea-deep); }

/* ---------- Background photo sources ----------
   The photos are the whole page weight, so each is shipped as WebP with a JPEG
   fallback, at full size and at half size for phones. Declaring the sources as
   custom properties keeps .hero / .page-head above from having to repeat the
   gradient four times each. Order matters: narrow overrides wide, and the
   @supports block overrides the plain-JPEG baseline. */
.hero            { --hero-img: url('assets/sea-gold.jpg'); }
.page-head       { --head-img: url('assets/sea-red.jpg'); }
.page-head.gold  { --head-img: url('assets/sea-gold.jpg'); }

@media (max-width: 760px) {
  .hero           { --hero-img: url('assets/sea-gold-sm.jpg'); }
  .page-head      { --head-img: url('assets/sea-red-sm.jpg'); }
  .page-head.gold { --head-img: url('assets/sea-gold-sm.jpg'); }
}

@supports (background-image: image-set(url('assets/sea-gold.webp') type('image/webp'))) {
  .hero           { --hero-img: image-set(url('assets/sea-gold.webp') type('image/webp'), url('assets/sea-gold.jpg') type('image/jpeg')); }
  .page-head      { --head-img: image-set(url('assets/sea-red.webp') type('image/webp'), url('assets/sea-red.jpg') type('image/jpeg')); }
  .page-head.gold { --head-img: image-set(url('assets/sea-gold.webp') type('image/webp'), url('assets/sea-gold.jpg') type('image/jpeg')); }

  @media (max-width: 760px) {
    .hero           { --hero-img: image-set(url('assets/sea-gold-sm.webp') type('image/webp'), url('assets/sea-gold-sm.jpg') type('image/jpeg')); }
    .page-head      { --head-img: image-set(url('assets/sea-red-sm.webp') type('image/webp'), url('assets/sea-red-sm.jpg') type('image/jpeg')); }
    .page-head.gold { --head-img: image-set(url('assets/sea-gold-sm.webp') type('image/webp'), url('assets/sea-gold-sm.jpg') type('image/jpeg')); }
  }
}

/* ---------- Save the Date (single-screen page) ----------
   The hand-lettered artwork is the centrepiece, so it is shown whole rather
   than cropped into a background. Artwork and form sit side by side on a wide
   screen and stack on a narrow one; the ask stays on the first screen either way. */
.hero.savethedate {
  padding: 6.5rem 1.5rem 3rem;
  /* A heavier scrim than the other heroes: this page puts white body text and a
     white form card over the photo, not just a few large headings. */
  background:
    linear-gradient(rgba(31, 42, 49, 0.55), rgba(31, 42, 49, 0.68)),
    var(--hero-img) center 30% / cover no-repeat;
}

.std-layout {
  display: grid;
  /* The artwork column sizes to the artwork; it is lettering, so it is sized by
     height and never cropped. */
  grid-template-columns: auto minmax(0, 26rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 62rem;
}
.std-art {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(240, 207, 154, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  line-height: 0;
}
.std-art img {
  display: block;
  height: min(72vh, 40rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.std-panel { text-align: center; }
.std-panel h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  font-weight: 300;
  line-height: 1.1;
  text-shadow: 0 3px 20px rgba(0,0,0,0.55);
}
.std-panel .date-line { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-top: 0.8rem; }
.std-panel .eyebrow { font-size: clamp(1.3rem, 3vw, 1.7rem); }

.hero-note {
  max-width: 26rem;
  margin: 1.3rem auto 0;
  font-family: var(--font);
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

form.rsvp.compact {
  max-width: 26rem;
  padding: 1.6rem 1.5rem 1.4rem;
  margin: 1.4rem auto 0;
  text-align: left;
}
form.rsvp.compact .field:last-of-type { margin-bottom: 1.1rem; }

.hero .privacy-note { color: #fff; opacity: 0.85; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hero .noscript-note { margin: 1.4rem auto 0; }

@media (max-width: 860px) {
  .std-layout { grid-template-columns: 1fr; max-width: 30rem; justify-items: center; }
  /* On a phone the form matters more than the artwork; cap the art so the
     first field stays reachable without a long scroll. */
  .std-art img { height: min(34vh, 20rem); }
}

/* ---------- Divider ---------- */
/* A horizon rather than a flourish: two hairlines meeting at the mark. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  max-width: 20rem;
  margin: 0.5rem auto;
  font-size: 1.6rem;
  color: var(--crimson);
  line-height: 1;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 154, 160, 0.6));
}
.divider::after { background: linear-gradient(90deg, rgba(111, 154, 160, 0.6), transparent); }

/* ---------- Sections ---------- */
section {
  max-width: 860px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
}
.page-head {
  text-align: center;
  padding: 10rem 1.5rem 4.5rem;
  background:
    linear-gradient(rgba(31, 42, 49, 0.35), rgba(31, 42, 49, 0.55)),
    var(--head-img) center 20% / cover no-repeat;
  color: #fff;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.page-head.gold {
  background:
    linear-gradient(rgba(31, 42, 49, 0.3), rgba(31, 42, 49, 0.5)),
    var(--head-img) center 25% / cover no-repeat;
}
.page-head .eyebrow {
  font-size: 1.4rem;
  color: var(--gold-light);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.page-head h1 {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.01em;
  margin-top: 0.4rem;
  text-shadow: 0 3px 20px rgba(0,0,0,0.55);
}
.page-head p.sub {
  margin-top: 0.8rem;
  font-family: var(--font);
  font-size: 1.25rem;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
section h2 {
  font-size: 1.85rem;
  color: var(--crimson);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 3.4rem 0 1.1rem;
}
section > h2:first-child,
section > .divider + h2 { margin-top: 0; }
section h3 {
  font-size: 1.3rem;
  color: var(--ember);
  font-weight: 500;
  margin: 1.6rem 0 0.5rem;
}
section p + p { margin-top: 0.8rem; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.card {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(46, 58, 66, 0.13);
  border-radius: var(--r-lg);
  padding: 1.7rem;
  box-shadow: 0 12px 34px rgba(31, 42, 49, 0.10), var(--rim);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lift), var(--rim);
}
.card h3 { margin-top: 0; }
.card .tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(240, 230, 214, 0.75);
  color: var(--crimson);
  border: 1px solid rgba(168, 36, 26, 0.10);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.8rem;
}
.card a { color: var(--crimson); }

/* ---------- Timeline (program) ---------- */
.timeline { position: relative; margin-top: 2rem; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--surf), var(--gold), var(--crimson));
}
.event { position: relative; margin-bottom: 2rem; }
.event::before {
  content: '';
  position: absolute;
  left: -1.65rem; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--crimson);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px var(--gold);
}
.event .time {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.event h3 { margin: 0.2rem 0 0.3rem; }

/* ---------- FAQ ---------- */
details {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(46, 58, 66, 0.13);
  border-radius: var(--r-md);
  padding: 1.15rem 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 10px 28px rgba(31, 42, 49, 0.08), var(--rim);
  transition: background 0.25s ease;
}
details[open] { background: var(--glass-strong); }
details summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--sea-deep);
  list-style: none;
}
/* Older Safari ignores list-style here and keeps its own triangle. */
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  float: right;
  color: var(--crimson);
  font-size: 1.4rem;
  line-height: 1;
}
details[open] summary::after { content: '–'; }
details p { margin-top: 0.7rem; }

/* ---------- Form ---------- */
form.rsvp {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-xl);
  padding: 2.3rem;
  box-shadow: var(--shadow-lift), var(--rim);
  max-width: 560px;
  margin: 2rem auto 0;
}
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sea-deep);
  margin-bottom: 0.45rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(46, 58, 66, 0.16);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold-light);
  border-color: var(--ember);
}
.radio-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-row label {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid rgba(46, 58, 66, 0.16);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.radio-row input { width: auto; }
.radio-row label:has(input:checked) {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}
button.submit {
  width: 100%;
  padding: 1rem;
  background: var(--crimson);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
button.submit:hover { background: var(--ember); }
button.submit:disabled { opacity: 0.6; cursor: wait; }
.form-msg { text-align: center; margin-top: 1rem; font-size: 1.3rem; }
.form-msg:empty { margin-top: 0; }
.form-msg.ok { color: var(--crimson); }
.form-msg.err { color: #8c2b20; font-size: 1rem; line-height: 1.5; }
.form-msg.err a { color: #8c2b20; }

/* [hidden] loses to any element with a display rule, so it is stated once here
   and stated strongly. */
[hidden] { display: none !important; }

.privacy-note {
  max-width: 560px;
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.7;
}

.noscript-note {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(168, 36, 26, 0.35);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-align: center;
}

/* ---------- Clearing the fixed bar ----------
   The navigation is `position: fixed`, so it is out of flow and nothing below
   it reserves its height; the hero and the page headers have to pad themselves
   clear. The constants they were given were measured against the English bar on
   a wide phone, and the bar is not that tall in every case: it wraps to more
   lines as the screen narrows, and the French labels are longer than the English
   ones. At 390px, the width of a current iPhone, the French bar took a third
   line and covered the heading on Program, FAQ, Where to Stay and Beirut Guide.

   lang.js measures the bar and publishes its height as --nav-h, on load, on
   resize and whenever the language changes. max() takes the larger of the
   original constant and the measured height plus a gap, so the layout is
   untouched wherever the constant was already sufficient, and grows only where
   it was not. The constants stay as the fallback if the script never runs, which
   is the same behaviour the site has today.

   These come last so they win over the `padding` shorthands declared earlier;
   .hero.savethedate is named explicitly because it outranks .hero on
   specificity, not on order. */
.hero             { padding-top: max(7rem,    calc(var(--nav-h, 0px) + 1.5rem)); }
.hero.savethedate { padding-top: max(6.5rem,  calc(var(--nav-h, 0px) + 1.5rem)); }
.page-head        { padding-top: max(10rem,   calc(var(--nav-h, 0px) + 1.5rem)); }

@media (max-width: 760px) {
  .hero,
  .hero.savethedate,
  .page-head      { padding-top: max(10.5rem, calc(var(--nav-h, 0px) + 1.5rem)); }
}

/* ---------- Footer ---------- */
footer {
  text-align: center;
  padding: 3.5rem 1.5rem 3rem;
  background: linear-gradient(180deg, var(--sea-deep), var(--abyss));
  color: var(--sand);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: 2rem;
}
footer .script { font-size: 2rem; color: var(--gold-light); }
footer p { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.5rem; opacity: 0.75; }
footer a { color: var(--gold-light); text-decoration: none; }