/* ==========================================================================
   Hannah & Myles — hannahandmyles.com
   Shared stylesheet
   ========================================================================== */

:root {
  --deep: #35425A;
  --ground: #F4F7FA;
  --card: #FFFFFF;
  --highlight: #AEBED5;
  --structure: #859BBA;
  --accent: #92966F;
  --on-accent: #2C3020;
  --hairline: #D7E0EB;
  --muted: #5C6B83;
  --body: #3E4A5E;
  --muted-dark: #C5D2E2;
  --link: #92966F;
  --link-hover: #43462E;

  --display: Fraunces, Georgia, "Times New Roman", serif;
  --text: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 56px;
  --maxw: 1280px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--deep);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

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

a { color: var(--link); }
a:hover { color: var(--link-hover); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--deep);
  color: var(--ground);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Top bar + awning stripe
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--deep);
  color: var(--highlight);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px 20px;
  /* The spans have no whitespace between them, so flex supplies the only
     chance to wrap. Without this the bar is wider than a phone and drags
     the whole page sideways. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
}
.topbar span { white-space: nowrap; }
.topbar .sep { color: var(--accent); margin: 0 10px; }

.stripe {
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 18px, var(--ground) 18px 36px);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  border-bottom: 1px solid var(--hairline);
  background: var(--ground);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 20px;
}
.monogram {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--deep);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 21px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--deep);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
}
.nav-links a:hover { color: var(--link-hover); }
.nav-links a[aria-current="page"] {
  border-bottom: 2px solid var(--accent);
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--deep);
}
.nav-toggle span:last-child { width: 16px; background: var(--accent); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--text);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 30px;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.btn--pill { border-radius: 999px; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: #82865f; color: var(--on-accent); }
.btn--deep { background: var(--deep); color: var(--ground); }
.btn--deep:hover { background: #2a3549; color: var(--ground); }
.btn--outline {
  background: none;
  border: 1.5px solid var(--deep);
  color: var(--deep);
  padding: 12px 22px;
  letter-spacing: 0.14em;
}
.btn--outline-light {
  background: none;
  border: 1.5px solid #96A6BE;
  color: var(--ground);
  padding: 12px 22px;
  letter-spacing: 0.14em;
}
.btn--sm { padding: 13px 26px; }

.textlink {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.textlink:hover { color: var(--deep); border-bottom-color: var(--accent); }
.textlink--light { color: var(--ground); }
.textlink--light:hover { color: var(--ground); }

/* --------------------------------------------------------------------------
   Scalloped shingle edge
   -------------------------------------------------------------------------- */

.scallop {
  height: 20px;
  background:
    radial-gradient(circle at 14px 0, var(--bump) 13px, var(--base) 13.5px)
    0 0 / 28px 20px repeat-x;
}
.scallop--lg {
  height: 26px;
  background:
    radial-gradient(circle at 16px 0, var(--bump) 15px, var(--base) 15.5px)
    0 0 / 32px 26px repeat-x;
}

/* --------------------------------------------------------------------------
   Page headers
   -------------------------------------------------------------------------- */

.page-head {
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
}
.page-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 54px;
  padding-bottom: 54px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.page-head h1 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1;
}
.page-head svg { flex-shrink: 0; }

.intro {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--body);
  max-width: 660px;
  margin: 0;
}
.intro-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 0;
}
.intro-rule { flex-grow: 1; height: 1px; background: var(--hairline); }

/* --------------------------------------------------------------------------
   Sections + section headings
   -------------------------------------------------------------------------- */

.section { padding: 44px 0 0; }
.section:last-of-type { padding-bottom: 56px; }

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 30px;
  margin-bottom: 22px;
}
.section-head .rule { flex-grow: 1; height: 1px; background: var(--hairline); }
.section-head--sm { font-size: 24px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card h3 {
  font-size: 25px;
  line-height: 1.15;
}
.card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.card .meta {
  font-size: 13px;
  color: var(--muted);
}
.card .spacer { margin-top: auto; }

.card--deep {
  background: var(--deep);
  border: 0;
  color: var(--ground);
}
.card--deep p { color: var(--muted-dark); }
.card--deep .meta { color: var(--muted-dark); }

.card--highlight {
  background: var(--highlight);
  border: 0;
  color: var(--deep);
}
.card--highlight p { color: var(--body); }
.card--highlight .meta { color: var(--body); }

.card--edge-accent { border-left: 5px solid var(--accent); }
.card--edge-light { border-left: 5px solid var(--highlight); }
.card--edge-deep { border-left: 5px solid var(--deep); }

.tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 3px 7px;
  vertical-align: middle;
}

/* Photo placeholders — replace these blocks with real <img> elements */
.photo {
  background: var(--hairline);
  border: 1px dashed var(--structure);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 20px;
  min-height: 160px;
}
.photo--dark { background: #47546B; border-color: #7C8CA6; color: var(--muted-dark); }

/* Real photos. Wrap the <picture> in class="shade": a light grey veil, a
   touch deeper at the foot, over a slightly calmed image, so photos shot in
   very different light (sunset, midday aerial, night) sit together. */
.shade {
  position: relative;
  overflow: hidden;
  background: var(--hairline);
}
.shade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.94);
}
.shade::after {
  content: "";
  position: absolute;
  inset: 0;
  /* --hairline grey at the top, easing into a hint of --deep at the foot */
  background: linear-gradient(180deg, rgba(215, 224, 235, 0.30) 0%, rgba(215, 224, 235, 0.20) 55%, rgba(53, 66, 90, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(53, 66, 90, 0.12);
  pointer-events: none;
}
.event-photo.shade { aspect-ratio: 4 / 3; align-self: flex-start; }

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

.site-footer { background: var(--deep); color: var(--muted-dark); }
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 46px;
  padding-bottom: 46px;
}
.site-footer .title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 30px;
  color: var(--ground);
}
.site-footer a { color: var(--ground); }
.site-footer .label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--highlight);
}
.footer-email {
  font-family: var(--display);
  font-size: 27px;
  color: var(--ground);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 5px;
  word-break: break-word;
}

.footer-cta { background: var(--deep); color: var(--muted-dark); }
.footer-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer-cta .line {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  color: var(--ground);
}

/* --------------------------------------------------------------------------
   Home — hero, countdown, weekend, RSVP band
   -------------------------------------------------------------------------- */

.hero { background: var(--deep); color: var(--ground); }
.hero .wrap {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero-copy { flex: 1 1 0; min-width: 0; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--highlight);
  margin-bottom: 22px;
}
.hero h1 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(54px, 8vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero h1 .and {
  font-style: italic;
  font-size: 0.68em;
  color: var(--accent);
  padding-left: 8px;
}
.hero-when {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  margin-bottom: 26px;
}
.hero-date {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: 0.04em;
  white-space: nowrap;   /* never break "09 · 18 · 27" across lines */
}
.hero-divide { width: 1px; height: 44px; background: #5B6795; }
.hero-place { font-size: 15px; line-height: 1.5; color: var(--muted-dark); }
.hero-photo {
  width: 452px;
  flex-shrink: 0;
  min-height: 440px;
  background: #47546B;
  border: 1px dashed #7C8CA6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted-dark);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}
.horizon { max-width: 100%; height: auto; }

.countdown { background: var(--card); border-bottom: 1px solid var(--hairline); }
.countdown .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 34px;
  padding-bottom: 34px;
}
.countdown-label {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  color: var(--muted);
  max-width: 250px;
  line-height: 1.3;
}
.countdown-figures { display: flex; align-items: center; gap: 30px; }
.countdown-figures .sep { width: 1px; height: 52px; background: var(--hairline); }
.figure { text-align: center; }
.figure .n {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure .k {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.figure:last-child .n { color: var(--accent); }

.weekend { display: flex; gap: 40px; }
.weekend-col {
  flex: 1 1 0;
  min-width: 0;
  border-top: 2px solid var(--accent);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weekend-col:last-child { border-top-color: var(--structure); }
.weekend-div { width: 1px; background: var(--hairline); flex-shrink: 0; }
.weekend-col .day {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.weekend-col h3 { font-size: 30px; line-height: 1.1; }
.weekend-col .when, .weekend-col .where { font-size: 15px; }
.weekend-col .when { color: var(--muted); }
.weekend-col .where span { color: var(--muted); }

.rsvp-band { background: var(--highlight); color: var(--deep); }
.rsvp-band .wrap {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 56px;
  padding-bottom: 56px;
}
.rsvp-band h2 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.02;
  margin-bottom: 18px;
}
.rsvp-band p { margin: 0 0 18px; }
.rsvp-main { flex: 1 1 60%; min-width: 0; }
.rsvp-aside {
  flex: 1 1 40%;
  min-width: 0;
  border-left: 1px solid #93A6C0;
  padding-left: 40px;
}
.rsvp-aside .label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 12px;
}
.rsvp-aside a.big {
  font-family: var(--display);
  font-size: 28px;
  color: var(--deep);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
}
.rsvp-aside p { font-size: 14px; color: var(--body); }
.rsvp-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rsvp-note { font-size: 13px; color: var(--body); }

/* --------------------------------------------------------------------------
   Schedule
   -------------------------------------------------------------------------- */

.event {
  display: flex;
  gap: 40px;
  border-top: 2px solid var(--accent);
  padding: 26px 0 40px;
}
.event--late { border-top-color: var(--structure); }
.event-when { width: 200px; flex-shrink: 0; }
.event-when .d {
  font-family: var(--display);
  font-size: 50px;
  line-height: 1;
}
.event-when .m {
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.event-when .t { font-size: 15px; color: var(--muted); margin-top: 6px; }
/* Filled, not outlined: the dress code is the thing guests come back to check. */
.event-badge {
  display: inline-block;
  margin-top: 12px;
  background: var(--deep);
  border: 1px solid var(--deep);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 13px;
}
.event-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.event-title { display: flex; align-items: center; gap: 14px; }
.event-title h2 { font-size: 36px; }
.event-body p { margin: 0; color: var(--body); }
.event-where { font-size: 16px; line-height: 1.6; }
.event-where span { color: var(--muted); }
.event-actions { display: flex; gap: 22px; flex-wrap: wrap; }
.event-photo { width: 260px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Travel & stay
   -------------------------------------------------------------------------- */

.stay-card { display: flex; flex-direction: column; }
.stay-card .photo { min-height: 190px; border: 0; border-bottom: 1px dashed var(--structure); }
.hero-photo.shade { display: block; border: 0; padding: 0; }
/* The hero sits on the deep panel, where the light grey veil reads as haze,
   so this one is tinted with --deep instead. */
.hero-photo.shade::after {
  background: linear-gradient(180deg, rgba(53, 66, 90, 0.18) 0%, rgba(53, 66, 90, 0.10) 45%, rgba(53, 66, 90, 0.30) 100%);
  box-shadow: none;
}
.stay-card .shade { aspect-ratio: 3 / 2; }
.stay-card .shade::after { box-shadow: none; }   /* the card already draws the edge */
.stay-card .inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.stay-card h3 { font-size: 27px; line-height: 1.15; }
.stay-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rental {
  background: var(--highlight);
  color: var(--deep);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rental h3 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 40px;
  line-height: 1.05;
}
.rental p { margin: 0; font-size: 16px; }
.rental-buttons { margin-top: auto; display: flex; gap: 10px; }
.rental-buttons .btn { flex: 1 1 0; padding: 15px 8px; letter-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery-grid .span2 { grid-column: span 2; }
.gallery-grid .shade { min-height: 280px; }
.gallery-grid .shade.tall { min-height: 400px; }
.gallery-grid .photo { min-height: 280px; }
.gallery-grid .tall { min-height: 400px; }
.share-panel {
  grid-column: span 3;   /* full width: the last photo row is a wide tile plus a tall one */
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.share-panel h3 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 40px;
  line-height: 1.05;
}
.share-panel .label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--link-hover);
  font-weight: 700;
}

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

.registry-band { background: var(--highlight); color: var(--deep); }
.registry-band .wrap {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.registry-copy { flex: 1 1 48%; min-width: 0; }
.registry-copy h2 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(36px, 5vw, 54px);
  line-height: 1.02;
  margin-bottom: 18px;
}
.registry-copy p { margin: 0 0 14px; font-size: 18px; }
.registry-tile {
  flex: 1 1 52%;
  min-width: 0;
  background: var(--deep);
  color: var(--ground);
  text-decoration: none;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
}
.registry-tile:hover { background: #2a3549; color: var(--ground); }
.registry-tile .label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--highlight);
}
.registry-tile .big {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 46px;
  line-height: 1.05;
}
.registry-tile .url {
  margin-top: auto;
  font-size: 13px;
  color: var(--muted-dark);
  border-top: 1px solid #5B6795;
  padding-top: 10px;
  /* Break at the slashes (see the <wbr> marks), not mid-word. */
  word-break: normal;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   FAQ Zola band
   -------------------------------------------------------------------------- */

.zola-band {
  background: var(--card);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.zola-band .wrap {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.zola-copy { width: 380px; flex-shrink: 0; }
.zola-copy h2 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 44px;
  line-height: 1.05;
  margin-bottom: 12px;
}
.zola-copy p { margin: 0; font-size: 16px; color: var(--muted); }
.zola-tiles { flex-grow: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.zola-tile {
  text-decoration: none;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 188px;
}
.zola-tile .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.zola-tile .big { font-family: var(--display); font-size: 34px; line-height: 1.1; }
.zola-tile .url { margin-top: auto; font-size: 13px; word-break: break-all; }
.zola-tile--deep { background: var(--deep); color: var(--ground); }
.zola-tile--deep:hover { background: #2a3549; color: var(--ground); }
.zola-tile--deep .label { color: var(--highlight); }
.zola-tile--deep .url { color: var(--muted-dark); }
.zola-tile--accent { background: var(--accent); color: var(--on-accent); }
.zola-tile--accent:hover { background: #82865f; color: var(--on-accent); }
.zola-tile--accent .label, .zola-tile--accent .url { color: var(--on-accent); }

/* --------------------------------------------------------------------------
   Password gate
   -------------------------------------------------------------------------- */

.gate {
  min-height: 100vh;
  background: var(--deep);
  color: var(--ground);
  display: flex;
  flex-direction: column;
}
.gate .stripe {
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 18px, var(--ground) 18px 36px);
}
.gate-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 60px 24px;
}
.gate-mono {
  width: 102px;
  height: 102px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}
.gate-meta {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.gate h1 {
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 1.02;
}
.gate h1 .and { font-style: italic; color: var(--accent); }
.gate-lede {
  max-width: 520px;
  margin: 0;
  color: var(--muted-dark);
}
.gate-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 420px; }
.gate-form input {
  flex: 1 1 200px;
  min-width: 0;
  width: 360px;
  max-width: 100%;
  height: 58px;
  background: transparent;
  border: 1px solid #96A6BE;
  color: var(--ground);
  font-family: var(--text);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 0 20px;
}
.gate-form input::placeholder { color: #A9BCD4; }
.gate-form .btn { height: 58px; }
.gate-error {
  color: #FFD9C9;
  font-size: 15px;
  margin: 0;
}
.gate-help { font-size: 14px; color: #A9BCD4; }
.gate-help a { color: var(--ground); }
.gate-foot {
  background: var(--ground);
  color: var(--muted);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gate-foot .sep { color: var(--accent); margin: 0 10px; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.tbd {
  background: #FFF4D6;
  border-left: 3px solid #D9A441;
  padding: 2px 6px;
  font-size: 0.9em;
  color: #6B5424;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero .wrap { flex-direction: column; align-items: flex-start; }
  .hero-photo { width: 100%; min-height: 320px; }
  .rsvp-band .wrap, .registry-band .wrap, .zola-band .wrap { flex-direction: column; align-items: flex-start; }
  .rsvp-aside { border-left: 0; border-top: 1px solid #93A6C0; padding-left: 0; padding-top: 28px; width: 100%; }
  .zola-copy { width: 100%; }
  .zola-tiles { width: 100%; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links a[aria-current="page"] { border-bottom: 2px solid var(--accent); }
  .nav-links .btn { margin-top: 14px; }
  .nav .wrap { position: relative; }

  /* Let the trailing link drop to its own line rather than wrap mid-phrase. */
  .section-head { flex-wrap: wrap; row-gap: 10px; }
  .section-head .textlink { white-space: nowrap; }

  .topbar { font-size: 10px; letter-spacing: 0.16em; }
  .topbar .sep { margin: 0 6px; }
  /* Drop the town on phones so the bar stays one tidy line; it is in the
     hero and on every address anyway. */
  .topbar :nth-child(4), .topbar :nth-child(5) { display: none; }

  /* Thumb-sized hit areas for the small uppercase links. */
  .textlink { display: inline-block; padding: 7px 0; }
  .site-footer a, .gate-help a, .gate-foot a { display: inline-block; padding: 4px 0; }

  .page-head .wrap { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
  .page-head svg { width: 84px; height: auto; }

  .weekend { flex-direction: column; gap: 24px; }
  .weekend-div { display: none; }

  .countdown .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .countdown-label { max-width: none; }
  .countdown-figures { gap: 18px; width: 100%; justify-content: space-between; }
  .countdown-figures .sep { height: 38px; }

  .event { flex-wrap: wrap; gap: 20px; }
  .event-when { width: 100%; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .event-when .d { font-size: 34px; }
  .event-when .m, .event-when .t { margin-top: 0; }
  .event-badge { margin-top: 0; }
  .event-photo { width: 100%; }
  .event-title h2 { font-size: 30px; }

  .grid--2, .grid--3 { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .span2, .share-panel { grid-column: span 1; }
  /* One column: each photo keeps a shape of its own rather than a wide strip. */
  .gallery-grid .shade { aspect-ratio: 4 / 3; min-height: 0; }
  .gallery-grid .shade.tall { aspect-ratio: 0.94; min-height: 0; }
  .gallery-grid .shade.span2 { aspect-ratio: 4 / 3; }
  .gallery-grid .tall { min-height: 280px; }
  .share-panel { padding: 28px 24px; }
  .share-panel h3 { font-size: 32px; }

  .zola-tiles { grid-template-columns: 1fr; }

  .site-footer .wrap, .footer-cta .wrap { flex-direction: column; align-items: flex-start; gap: 22px; }
  .site-footer .flags { display: none; }
  .footer-email { font-size: 20px; }

  .rental-buttons { flex-direction: column; }
}

/* ==========================================================================
   Motion
   Decorative only. Line art draws itself in and the home harbour moves;
   nothing that carries information (times, addresses, answers) ever animates.
   All of it sits behind no-preference, so reduced-motion visitors simply
   get the finished drawings, standing still.
   ========================================================================== */

/* Nav hover underline grows in, matching the current-page underline. */
@media (hover: hover) and (min-width: 901px) {
  .nav-links a:not(.btn) { position: relative; }
  .nav-links a:not(.btn):not([aria-current])::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .nav-links a:not(.btn):not([aria-current]):hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Shapes carry pathLength="1", so a dash of 1 is the whole stroke. The last
     step drops the dash entirely, so a browser that ignores pathLength still
     ends on a solid line. */
  @keyframes hm-draw {
    from { stroke-dasharray: 1; stroke-dashoffset: 1; }
    99%  { stroke-dasharray: 1; stroke-dashoffset: 0; }
    to   { stroke-dasharray: none; stroke-dashoffset: 0; }
  }
  @keyframes hm-fade  { from { opacity: 0; } }
  @keyframes hm-drift { to { transform: translateX(-90px); } }   /* one wavelength */
  @keyframes hm-bob   { from { transform: translateY(2.5px); } to { transform: translateY(-2.5px); } }
  @keyframes hm-rock  { from { transform: rotate(4deg); } to { transform: rotate(-4deg); } }
  @keyframes hm-beam  { 50% { opacity: 0.2; } }
  @keyframes hm-grow  { from { transform: scaleX(0); } }
  @keyframes hm-needle {
    0%   { transform: rotate(-50deg); }
    40%  { transform: rotate(16deg); }
    65%  { transform: rotate(-7deg); }
    85%  { transform: rotate(2deg); }
    100% { transform: rotate(0); }
  }

  /* Home harbour: waterline, then hull, mast and sails, then lighthouse,
     over about two seconds. Then the waves roll left, the boat rides them
     and the lamp pulses. Bob and rock share the 4.5s wave period, with the
     rock a quarter-period ahead so the boat tilts into each passing crest. */
  .horizon path { animation: hm-draw 0.5s ease-out both; }
  .horizon .horizon-line { animation-duration: 0.9s; }
  .horizon-waves path { animation-duration: 0.8s; animation-delay: 0.2s; }
  .horizon-boat path:nth-child(1) { animation-delay: 0.7s; }
  .horizon-boat path:nth-child(2) { animation-delay: 0.9s; }
  .horizon-boat path:nth-child(3) { animation-delay: 1.05s; }
  .horizon-boat path:nth-child(4) { animation-delay: 1.15s; }
  .horizon-lighthouse path:nth-child(1) { animation-delay: 1.2s; }
  .horizon-lighthouse path:nth-child(2) { animation-delay: 1.4s; }
  .horizon-lighthouse path:nth-child(3) { animation-delay: 1.55s; }
  .horizon .horizon-beam { animation: hm-draw 0.4s ease-out 1.8s both, hm-beam 3s ease-in-out 2.4s infinite; }

  .horizon-waves { animation: hm-drift 4.5s linear 1.6s infinite; }
  .horizon-boat,
  .horizon-boat-rock { transform-box: fill-box; transform-origin: 50% 100%; }
  .horizon-boat { animation: hm-bob 2.25s ease-in-out 1.6s infinite alternate both; }
  .horizon-boat-rock { animation: hm-rock 2.25s ease-in-out 0.475s infinite alternate both; }

  /* Page-header line art (and the gate's wave rule) draws in, one stroke after another. */
  .draw > * { animation: hm-draw 1s ease-out both; }
  .draw > :nth-child(2) { animation-delay: 0.15s; }
  .draw > :nth-child(3) { animation-delay: 0.3s; }
  .draw > :nth-child(4) { animation-delay: 0.45s; }
  .draw > :nth-child(5) { animation-delay: 0.6s; }
  .draw > [fill]:not([fill="none"]) { animation-name: hm-fade; }

  /* Cape Cod: the compass needle swings and settles. */
  .draw > .compass-needle {
    transform-origin: 60px 60px;
    animation: hm-draw 1s ease-out 0.3s both, hm-needle 2s ease-in-out 0.3s both;
  }

  /* Travel & Stay: the little sailboat rocks at anchor. */
  .draw > .stay-boat {
    transform-origin: 75px 70px;
    animation: hm-draw 1s ease-out 0.15s both, hm-rock 2.6s ease-in-out 1.2s infinite alternate both;
  }

  /* Schedule: each event's coloured rule draws across as it scrolls into view.
     Browsers without scroll-driven animations keep the plain border. */
  @supports (animation-timeline: view()) {
    .event { position: relative; border-top-color: transparent; }
    .event::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -2px;
      height: 2px;
      background: var(--accent);
      transform-origin: left;
      animation: hm-grow linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 140px;
    }
    .event--late::before { background: var(--structure); }
  }
}

/* Small phones (iPhone SE and similar): the countdown is the only row that
   cannot shrink on its own. */
@media (max-width: 420px) {
  .countdown-figures { gap: 8px; }
  .figure .k { font-size: 10px; letter-spacing: 0.1em; }
  /* Keep "We're getting married on the Cape" on one line. */
  .hero-eyebrow { letter-spacing: 0.12em; font-size: 10px; }
}

@media (max-width: 380px) {
  /* The date and the venue no longer fit side by side. */
  .hero-when { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-divide { display: none; }
}

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

@media print {
  .nav, .topbar, .stripe, .scallop, .footer-cta { display: none; }
  body { background: #fff; }
}