/* ───────────── Tokens ───────────── */
:root {
  --bg: #f8f5ef;
  --bg-tint: #efeae0;
  --ink: #1f2926;
  --muted: #6c7773;
  --line: #d8d2c5;
  --accent: #3e5a56;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 68px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --chin: 0px; /* extra hero height under a phone's floating toolbar; set below for touch screens */
  --gutter: clamp(20px, 5vw, 56px);
  --gutter-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --section-pad: clamp(72px, 12vw, 144px);
}

/* On phones and tablets, newer Safari lets page content show through the translucent toolbar at the
   bottom. The hero is made taller there so the video, not the next section, is what shows through. */
@media (hover: none) and (pointer: coarse) {
  :root { --chin: 120px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-t));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

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

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

/* ───────────── Header / nav ───────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) var(--gutter-r) 0 var(--gutter-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

/* Over the hero video: transparent bar, light type */
.site-header.on-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}
.site-header.on-hero .nav-toggle { color: #fff; }
.site-header.on-hero .site-nav a { color: rgba(255, 255, 255, .78); }
.site-header.on-hero .site-nav a:hover,
.site-header.on-hero .site-nav a.is-active { color: #fff; }
.site-header.on-hero .site-nav a::after { background: #fff; }

/* The header monogram stays out of the way on the home screen and fades in once you start scrolling */
.site-header .monogram {
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.site-header:not(.show-mark) .monogram {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}

.monogram {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-decoration: none;
}
.monogram span { font-style: italic; font-weight: 300; margin: 0 .1em; }
.monogram--lg { font-size: 2rem; }

.site-nav { display: flex; gap: clamp(18px, 2.6vw, 36px); }
.site-nav a {
  position: relative;
  padding: 6px 0;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 56px;          /* comfortable tap target for an icon-only button */
    height: 44px;
    margin-right: -6px;   /* keep the icon aligned with the page gutter */
    padding: 0 6px 0 0;
    background: none;
    border: 0;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: transform .25s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { content: ""; position: absolute; top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); top: 6px; }

  .site-nav {
    position: absolute;
    top: calc(var(--header-h) + var(--safe-t));
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter-r) 24px var(--gutter-l);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .site-nav a { padding: 14px 0; font-size: .85rem; border-bottom: 1px solid var(--line); }
  .site-nav a::after { display: none; }
}

/* ───────────── Hero ───────────── */
.hero {
  position: relative;
  /* Fill the whole screen. On phones, lvh is the height with the browser bars tucked away,
     so the video runs under the address bar instead of ending right above it. */
  min-height: 100vh;
  min-height: calc(100lvh + var(--chin));
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + var(--safe-t) + 24px) var(--gutter-r) 96px var(--gutter-l);
  /* keep the text centered in the part of the screen you can see while the bars are showing */
  padding-bottom: calc(96px + (100lvh - 100svh) + var(--chin));
  text-align: center;
  color: #fff;
  background: #16262a;
  isolation: isolate;
  overflow: hidden;
}

/* Background video. The poster doubles as a static fallback (reduced motion, slow loads). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(media/hero-poster.jpg) center / cover no-repeat;
}
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* On portrait screens only a narrow slice of the widescreen video fits. The ferry starts just to the left
   of that slice and drifts slowly right, so it creeps into view from the left edge a few moments in.
   The text stays centered; the ferry passes behind it. */
@media (orientation: portrait) and (max-width: 900px) {
  .hero__media { background-position: 43% center; }
  .hero__media video { object-position: 43% center; }
}
/* Portrait tablets show a wider slice of the video, so the same starting point sits further right */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 900px) {
  .hero__media { background-position: 51% center; }
  .hero__media video { object-position: 51% center; }
}
/* Soft scrim so the type stays readable over bright sky and water */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 22, 26, .5) 0%, rgba(10, 22, 26, .3) 35%, rgba(10, 22, 26, .45) 100%);
}
/* iPhone Safari tints the status bar area from the page's color and will not draw the page under it,
   so the top of the video fades in from that same color instead of ending in a hard edge. */
@supports (-webkit-touch-callout: none) {
  .hero__media::after {
    background:
      linear-gradient(180deg, #16262a 0, rgba(22, 38, 42, 0) 150px),
      linear-gradient(180deg, rgba(10, 22, 26, .5) 0%, rgba(10, 22, 26, .3) 35%, rgba(10, 22, 26, .45) 100%);
  }
}

.hero__inner { max-width: 900px; }

.eyebrow {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__names {
  font-size: clamp(2.6rem, 11vw, 8rem);
  font-weight: 300;
  letter-spacing: -.01em;
}
.amp { font-style: italic; font-weight: 300; padding: 0 .08em; }

.rule {
  width: 56px;
  height: 1px;
  margin: 36px auto;
  background: #fff;
  opacity: .6;
}

.hero__date {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: .04em;
}
.hero__place {
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
/* Two fixed lines on every screen, so a single word never gets stranded on its own line */
.hero__place span { display: block; text-wrap: balance; }
.hero__place span + span { margin-top: 4px; }
@media (max-width: 360px) {
  .hero__place { font-size: .72rem; letter-spacing: .16em; }
}
.hero__countdown {
  margin-top: 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .75);
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  bottom: calc(32px + (100lvh - 100svh) + var(--safe-b) + var(--chin)); /* stay above the address bar and home indicator */
  left: 50%;
  width: 24px; height: 44px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
}
.scroll-cue span {
  width: 1px;
  height: 100%;
  background: linear-gradient(#fff, transparent);
  opacity: .7;
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Short windows (a phone held sideways): tighten the hero so it still fits on one screen */
@media (max-height: 520px) {
  .hero { padding: calc(var(--header-h) + var(--safe-t) + 8px) var(--gutter-r) 40px var(--gutter-l); padding-bottom: calc(40px + (100lvh - 100svh) + var(--chin)); }
  .hero__names { font-size: clamp(2.2rem, 15vh, 4.5rem); }
  .rule { margin: 16px auto; }
  .hero__date { font-size: clamp(1.1rem, 6.5vh, 1.5rem); }
  .hero__countdown { margin-top: 14px; }
  .scroll-cue { display: none; }
}

/* ───────────── Sections ───────────── */
.section { padding: var(--section-pad) var(--gutter-r) var(--section-pad) var(--gutter-l); background: var(--bg); }
.section--tint { background: var(--bg-tint); }

.container { max-width: 1120px; margin: 0 auto; }
.container--narrow { max-width: 760px; }

.section__head { text-align: center; margin-bottom: clamp(40px, 7vw, 72px); }
.section__head h2 {
  margin-top: 14px;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 300;
}
.lede {
  max-width: 46ch;
  margin: 18px auto 0;
  color: var(--muted);
}

/* ───────────── Photos ───────────── */
.section--bleed { padding-inline: 0; }
.section--bleed > .container { padding-inline: var(--gutter-l) var(--gutter-r); }

/* Full-bleed, two-row strip that scrolls sideways (script.js makes it loop).
   Each photo keeps its proportions: width = row height × aspect ratio (--ar). */
.gallery-wrap {
  --row-h: clamp(150px, 26vh, 280px);
  --gap: clamp(8px, 1vw, 14px);
  position: relative;
}
.gallery {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-dragging { cursor: grabbing; }
.gallery__track {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: max-content;
}
.gallery__row {
  display: flex;
  gap: var(--gap);
  height: var(--row-h);
}
.tile {
  flex: none;
  height: 100%;
  width: calc(var(--row-h) * var(--ar, .667));
  padding: 0;
  border: 0;
  background: var(--bg-tint);
  cursor: inherit;
  overflow: hidden;
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform .6s ease;
}
.tile:hover img { transform: scale(1.03); }

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(20, 30, 28, .18);
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.gallery__arrow:hover { opacity: 1; transform: scale(1.06); }
.gallery__arrow--prev { left: clamp(12px, 2.5vw, 32px); }
.gallery__arrow--next { right: clamp(12px, 2.5vw, 32px); }

/* Touch screens swipe; no arrows needed */
@media (hover: none) {
  .gallery__arrow { display: none; }
}

/* Lightbox */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 22, 24, .97);
  color: #fff;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 88dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 22, 24, .5);
  color: #fff;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  opacity: .75;
  cursor: pointer;
  transition: opacity .2s ease;
}
.lightbox__btn:hover { opacity: 1; }
.lightbox__close { top: max(16px, var(--safe-t)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ───────────── Events ───────────── */
.events { list-style: none; margin: 0; padding: 0; }
.event {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event__when { display: flex; flex-direction: column; }
.event__day {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.event__time { color: var(--muted); font-size: .95rem; }
.event__what h3 { font-size: 1.7rem; }
.event__what p { margin-top: 6px; color: var(--muted); }
.event__what .event__setting {
  margin-top: 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}
.event__what .event__dress { margin-top: 10px; font-size: .9rem; }
.event__what .event__dress a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s ease;
}
.event__what .event__dress a:hover { color: var(--ink); }
.event__what .event__where {
  margin-top: 12px;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .event__when { flex-direction: row; gap: 12px; align-items: baseline; }
}

/* ───────────── Cards (Travel, Things to Do) ───────────── */
.cards { display: grid; gap: clamp(16px, 2.4vw, 32px); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  padding: 36px 30px 40px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, white);
}
.card h3 { font-size: 1.7rem; margin-bottom: 12px; }
.card p { color: var(--muted); }
.card p + p { margin-top: 12px; }
.card strong { font-weight: 400; color: var(--ink); }
.card a,
.fine a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s ease;
}
.card a:hover { color: var(--ink); }

.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards + .cards { margin-top: clamp(16px, 2.4vw, 32px); }

/* Shuttle and taxi rows: name on the left, phone number on the right */
.svc { margin: 14px 0 0; padding: 0; list-style: none; }
.svc li { padding: 12px 0; border-top: 1px solid var(--line); }
.svc li:last-child { border-bottom: 1px solid var(--line); }
.svc__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
}
.card .svc__tel {
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
}
.card .svc__tel:hover { color: var(--accent); }
.card .svc li > p { margin-top: 6px; font-size: .92rem; line-height: 1.55; }
.card .svc__label {
  margin: 22px 0 0;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.card .svc__label + .svc { margin-top: 8px; }

/* ───────────── Lodging ───────────── */
/* Room block note in two columns, then two full-width cards: at the resort, and other places */
.lodging__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.lodging__intro p { color: var(--muted); }
.lodging__intro p + p { margin-top: 12px; }
.lodging__stack { display: grid; gap: clamp(16px, 2.4vw, 32px); }
/* The resort's own accommodations: name (linked) with a one-line description */
.stay__lodging {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3.5vw, 48px);
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.stay__lodging li { padding-top: 14px; border-top: 1px solid var(--line); }
.card .stay__lodging a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.card .stay__lodging a::after {
  content: "\2197";
  flex: none;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--muted);
  transition: transform .2s ease, color .2s ease;
}
.card .stay__lodging a:hover { color: var(--accent); }
.card .stay__lodging a:hover::after { color: var(--accent); transform: translate(2px, -2px); }
.card .stay__lodging p { margin-top: 6px; font-size: .92rem; line-height: 1.55; }
.lodging__stack .fine { margin-top: 24px; }
.stay__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3.5vw, 48px);
  margin: 28px 0;
}
.card .stay__group-title {
  margin: 0;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Callout under the first paragraph: a light panel in regular body type */
.lodging__intro .stay__note {
  margin: 20px 0;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--bg) 60%, white);
  border: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}
.stay__list { margin: 12px 0 0; padding: 0; list-style: none; }
.stay__list li {
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}
.stay__list small {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--muted);
}
.stay__list li:last-child { border-bottom: 1px solid var(--line); }
/* The whole row is the link, with a small arrow to say it opens another site */
.card .stay__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
}
.card .stay__list a::after {
  content: "\2197";
  flex: none;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--muted);
  transition: transform .2s ease, color .2s ease;
}
.card .stay__list a:hover { color: var(--accent); }
.card .stay__list a:hover::after { color: var(--accent); transform: translate(2px, -2px); }

@media (max-width: 820px) {
  .cards--2,
  .cards--3 { grid-template-columns: 1fr; }
  .lodging__intro { grid-template-columns: 1fr; }
  .stay__groups { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .stay__lodging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stay__lodging { grid-template-columns: 1fr; }
}

/* ───────────── Travel preview ───────────── */
.lede--wide { max-width: 56ch; }

.planner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin-bottom: clamp(16px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, white);
}
.planner__controls,
.planner__route { padding: clamp(28px, 4.5vw, 56px); }
.planner__route { border-left: 1px solid var(--line); }
.planner__controls h3 { margin: 10px 0 32px; font-size: 2rem; }

.seg-group { margin: 0 0 24px; padding: 0; border: 0; }
.seg-group[hidden] { display: none; }
.seg-group legend,
.drive-form label {
  padding: 0;
  margin-bottom: 10px;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Segmented radio buttons */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--ink); }
.seg label { position: relative; flex: 1 1 auto; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.seg span {
  display: block;
  padding: 12px 22px;
  text-align: center;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.seg label + label span { border-left: 1px solid var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.seg small { margin-left: .4em; font-size: .9em; letter-spacing: .12em; opacity: .6; }

.drive-form { display: block; }
.drive-form[hidden] { display: none; }
.drive-form label { display: block; }
.drive-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.drive-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 0;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.drive-form input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent); /* thickens the underline instead of boxing the field */
}
.drive-form input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.btn--sm { padding: 13px 28px; }

.fine { margin-top: 14px; font-size: .82rem; line-height: 1.55; color: var(--muted); }

/* Route timeline */
.route { margin: 20px 0 0; padding: 0; list-style: none; }
.route li {
  position: relative;
  padding-left: 34px;
  animation: rise .5s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* the vertical rail */
.route li::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 4px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
}
.route__stop {
  padding: 4px 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
}
.route__stop::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 60%, white);
}
.route__stop:first-child::before { top: 50%; }
.route__stop:last-child::before { bottom: 50%; }
.route__stop:last-child::after { background: var(--ink); }

.route__leg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 0;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.route__leg-time { font-size: .95rem; letter-spacing: .06em; text-transform: none; color: var(--ink); }
.route__leg--wait::before { border-left-style: dashed; }
.route__leg--ferry::before { border-left-color: var(--accent); }

.route__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.2;
}
.route__total span {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.route__total[hidden], .route__note[hidden], .route__status[hidden] { display: none; }
.route__note { margin-top: 12px; color: var(--accent); }
.route__status {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
}
.planner__route .fine { margin-top: 24px; }

@media (max-width: 820px) {
  .planner { grid-template-columns: 1fr; }
  .planner__route { border-left: 0; border-top: 1px solid var(--line); }
}

/* ───────────── Q+A ───────────── */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 200;
  font-size: 1.6rem;
  color: var(--muted);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 14px; color: var(--muted); max-width: 60ch; }
.faq details p:last-child { padding-bottom: 28px; }
.faq details .faq__lead {
  padding-bottom: 10px;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
}
.faq__lead span { font-family: var(--sans); font-size: .85rem; letter-spacing: .08em; color: var(--muted); }
.faq details a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s ease;
}
.faq details a:hover { color: var(--ink); }

/* ───────────── RSVP ───────────── */
.rsvp-form { display: grid; gap: 28px; }
.rsvp-form label,
.rsvp-form legend {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.rsvp-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.rsvp-form legend { padding: 0; margin-bottom: 6px; }
.rsvp-form input[type="text"],
.rsvp-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  font: inherit;
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  resize: vertical;
}
.rsvp-form .choice {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.btn {
  justify-self: start;
  padding: 16px 40px;
  font: inherit;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

/* ───────────── Footer ───────────── */
.site-footer {
  background: var(--bg);
  padding: 72px var(--gutter-r) calc(56px + var(--safe-b)) var(--gutter-l);
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.site-footer .monogram { color: var(--ink); margin-bottom: 14px; }