/* ==========================================================================
   Niamh & Harry — 21 May 2027
   --------------------------------------------------------------------------
   1. Variables (design tokens)
   2. Reset / base
   3. Typography
   4. Layout
   5. Components
   6. Sections
   7. Responsive styles
   8. Accessibility & motion
   ========================================================================== */


/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
  /* --- Palette ---------------------------------------------------------- */
  --paper:        #F5F1E8;   /* page background */
  --paper-light:  #FAF8F2;   /* cards, raised surfaces */
  --paper-deep:   #E9E3D6;   /* photo / map placeholders */

  --ink:          #252522;   /* primary text */
  --ink-soft:     #4F4D46;   /* body copy */
  --ink-muted:    #605D55;   /* labels, captions */

  --forest:       #30483D;   /* primary accent */
  --forest-deep:  #24372E;   /* hover / footer */
  --heather:      #72596A;   /* secondary accent – used sparingly */

  /* Rules & shadows are derived from ink so they stay in harmony */
  --rule:         rgb(37 37 34 / 0.16);
  --rule-soft:    rgb(37 37 34 / 0.09);
  --rule-strong:  rgb(37 37 34 / 0.32);
  --shadow-card:  0 1px 2px rgb(37 37 34 / 0.04),
                  0 18px 40px -24px rgb(37 37 34 / 0.22);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, Baskerville, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-xs:   0.6875rem;                                  /* 11px labels */
  --text-sm:   0.8125rem;                                  /* 13px */
  --text-base: 1rem;                                       /* 16px */
  --text-md:   clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);  /* body copy */
  --text-lg:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-xl:   clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-3xl:  clamp(2.75rem, 1.9rem + 3.6vw, 5rem);

  --tracking-caps: 0.18em;   /* small uppercase labels */
  --tracking-wide: 0.3em;

  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-body:  1.75;

  /* --- Spacing ---------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  --space-section: clamp(5.5rem, 4rem + 7vw, 10rem);

  /* --- Layout ----------------------------------------------------------- */
  --gutter:          clamp(1.25rem, 0.5rem + 4vw, 3.5rem);
  --container:       72rem;
  --container-wide:  84rem;
  --measure:         36rem;
  --header-height:   4.5rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-s: 2px;
  --card-inset: 0.5rem;   /* gap between a card's outer and inner rule */

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 1000ms;

  /* --- Texture ----------------------------------------------------------
     A tiny tiled SVG noise, tinted warm brown, laid over surfaces at low
     opacity to suggest the grain of good paper. */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .24 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --texture-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .27 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--paper);
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paper grain and warm, uneven light – a fixed layer so it never
   scrolls or repaints with the content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    var(--texture-fibre),
    var(--texture-grain),
    radial-gradient(ellipse 80% 60% at 15% 0%, rgb(255 253 247 / 0.8), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgb(228 220 204 / 0.45), transparent 70%);
  opacity: 0.6;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--forest);
  color: var(--paper-light);
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Small uppercase label – the “letterpress caption” used throughout */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose {
  max-width: var(--measure);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.prose > * + * {
  margin-top: 1.25em;
}

/* Drop cap – appears automatically once real copy replaces the placeholder */
.prose--dropcap > p:first-child:not(.tbc)::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  font-weight: 300;
  line-height: 0.8;
  color: var(--forest);
}

/* Placeholder copy – easy to spot, easy to search for (class="tbc") */
.tbc {
  color: var(--heather);
}

.tbc::before { content: "["; }
.tbc::after  { content: "]"; }


/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
}

.section {
  padding-block: var(--space-section);
  scroll-margin-top: var(--header-height);
}

/* Hairline between consecutive sections, kept within the container width */
.section + .section {
  background-image: linear-gradient(var(--rule-soft), var(--rule-soft));
  background-size: min(100% - 2 * var(--gutter), var(--container)) 1px;
  background-position: top center;
  background-repeat: no-repeat;
}


/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-sm);
  color: var(--paper-light);
  background-color: var(--forest);
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --- Monogram ------------------------------------------------------------- */

.monogram {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}

.monogram__amp {
  margin-inline: 0.06em;
  font-style: italic;
  font-weight: 300;
  color: var(--forest);
}

/* --- Sett rule ------------------------------------------------------------
   Three fine stripes in forest and heather – borrowed from the stripe
   count of a tartan sett, used as a quiet ornamental rule. */

.sett {
  display: block;
  width: 4rem;
  height: 7px;
  margin-inline: auto;
  background-image: linear-gradient(
    to bottom,
    var(--forest) 0 1px,
    transparent 1px 3px,
    var(--heather) 3px 4px,
    transparent 4px 6px,
    var(--forest) 6px 7px
  );
  opacity: 0.8;
}

/* --- Section heading ------------------------------------------------------ */

.section-head {
  margin-bottom: var(--space-2xl);
}

.section-head__num {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--forest);
}

.section-head__num::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
}

.section-head__title {
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.section-head__lede {
  max-width: 28rem;
  margin-top: var(--space-m);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.section-head--center {
  text-align: center;
}

.section-head--center .section-head__num {
  justify-content: center;
}

.section-head--center .section-head__num::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
}

/* --- Paper card (stationery with a fine inner rule) ----------------------- */

.paper-card {
  position: relative;
  background-color: var(--paper-light);
  background-image: var(--texture-grain);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
}

.paper-card::before {
  content: "";
  position: absolute;
  inset: var(--card-inset);
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

/* --- Photographs --------------------------------------------------------- */

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--paper-deep);
  border-radius: var(--radius-s);
}

.photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Line drawing of the Edinburgh skyline (footer) */
.site-footer__skyline {
  aspect-ratio: 640 / 120;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* --- Definition list of details ------------------------------------------ */

.details__row {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-m);
  border-top: 1px solid var(--rule);
}

.details__row:last-child {
  border-bottom: 1px solid var(--rule);
}

.details__term {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest);
}

.details__desc {
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.details__address {
  font-style: normal;
}

/* --- Map (embedded Google Map) ------------------------------------------ */

.map {
  margin: 0;
}

.map__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Shown while the map loads: a faint grid, like an Ordnance Survey sheet */
  background-color: var(--paper-deep);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 3rem 3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
}

/* Google's colours are softened towards the site palette; full colour on hover */
.map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.55) sepia(0.2) contrast(0.95);
  transition: filter var(--duration-slow) var(--ease-out);
}

.map__frame:hover .map__iframe,
.map__frame:focus-within .map__iframe {
  filter: none;
}

.map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-m);
  margin-top: var(--space-xs);
}

.map__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Accordion ------------------------------------------------------------ */

.accordion__item {
  border-bottom: 1px solid var(--rule);
}

.accordion__item:first-child {
  border-top: 1px solid var(--rule);
}

.accordion__heading {
  font-size: inherit;
  line-height: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-m) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  transition: color var(--duration-fast) ease;
}

.accordion__trigger:hover {
  color: var(--forest);
}

/* Plus that becomes a minus */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--forest);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__content {
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* Spacing lives in a pseudo-element (not padding) so a collapsed panel is 0px tall */
.accordion__content::after {
  content: "";
  display: block;
  height: var(--space-m);
}

/* With JavaScript, panels collapse smoothly using grid rows */
.js .accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.js .accordion__panel > .accordion__content {
  min-height: 0;
  overflow: hidden;
}

.js .accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--duration-base) var(--ease-out),
    visibility 0s;
}

/* --- Emoji ---------------------------------------------------------------
   Emojis are kept in the copy, but drawn with the monochrome Noto Emoji
   font and tinted forest green, so they read as small engraved icons that
   match the ferry rather than bright colour pictures. */

.emoji {
  font-family: "Noto Emoji", var(--font-body);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--forest);
}

/* In running text, emojis sit a little larger so the fine lines stay legible */
p > .emoji {
  font-size: 1.1em;
}

.eyebrow .emoji {
  margin-left: 0.3em;
  font-size: 1.4em;
  vertical-align: -0.1em;
}

/* --- Tag ------------------------------------------------------------------ */

.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--forest);
  border: 1px solid rgb(48 72 61 / 0.4);
  border-radius: var(--radius-s);
}

/* --- Sub-headings within a section --------------------------------------- */

.subhead {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-xl);
  font-size: var(--text-2xl);
  font-weight: 300;
}

.subhead::after {
  content: "";
  flex: 1;
  min-width: 2rem;
  height: 1px;
  margin-left: calc(var(--space-m) - 0.4em);
  background-color: var(--rule);
}

.subhead .emoji {
  font-size: 0.55em;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-m);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 300;
}

.group-title .emoji {
  font-size: 0.7em;
}

/* --- Links ---------------------------------------------------------------- */

.inline-link {
  color: var(--forest);
  text-decoration-color: rgb(48 72 61 / 0.4);
  transition: text-decoration-color var(--duration-fast) ease;
}

.inline-link:hover {
  text-decoration-color: currentColor;
}

/* Small-caps call to action, e.g. “Check availability ↗” */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest);
  text-decoration-color: rgb(48 72 61 / 0.35);
  text-underline-offset: 0.45em;
  transition: text-decoration-color var(--duration-fast) ease;
}

.text-link::after {
  content: "↗";
  font-size: 1.15em;
  letter-spacing: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.text-link:hover::after {
  transform: translate(2px, -2px);
}

/* --- Note (a small “good to know” card) ---------------------------------- */

.note {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  color: var(--ink-soft);
}

.note > * + * {
  margin-top: var(--space-xs);
}

.note__title {
  font-size: var(--text-xl);
  color: var(--ink);
}

.note strong {
  font-weight: 500;
  color: var(--ink);
}

/* --- Places (guide entries) ---------------------------------------------- */

.places {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  padding: 0;
  list-style: none;
}

.place {
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

.place > * + * {
  margin-top: var(--space-xs);
}

.place__name {
  font-size: var(--text-xl);
  color: var(--ink);
}

.places--compact .place__name {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.place__tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--forest);
}

.place__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* “Our pick for …” */
.pick {
  padding-top: var(--space-xs);
  font-size: var(--text-sm);
  border-top: 1px dotted var(--rule-strong);
}

.pick__label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest);
}

/* --- Forms ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-l);
}

.form__row {
  display: grid;
  gap: var(--space-l);
}

.form__conditional {
  display: grid;
  gap: var(--space-l);
}

.field {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field__optional {
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-muted);
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-base);
  line-height: 1.5;
  background-color: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.field__input:hover {
  border-color: var(--ink-muted);
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 1px var(--forest);
}

.field__input--textarea {
  resize: vertical;
}

.field--narrow {
  max-width: 10rem;
}

/* Choice tiles (radio) */
.choice-group__options {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-s);
  cursor: pointer;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.choice:hover {
  border-color: var(--ink-muted);
}

.choice:has(:checked) {
  background-color: rgb(48 72 61 / 0.06);
  border-color: var(--forest);
}

.choice:has(:focus-visible) {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.choice__input {
  flex-shrink: 0;
  display: grid;
  place-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  appearance: none;
  background-color: var(--paper-light);
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
}

.choice__input::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--forest);
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.choice__input:checked {
  border-color: var(--forest);
}

.choice__input:checked::before {
  transform: scale(1);
}

.choice__input:focus-visible {
  outline: none;   /* focus is shown on the whole tile instead */
}

.choice__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.2;
}

.form__actions {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  margin-top: var(--space-2xs);
}

.form__status {
  min-height: 1.5em;
  font-size: var(--text-sm);
  text-align: center;
  color: var(--heather);
}

/* --- Button --------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-s) var(--space-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper-light);
  background-color: var(--forest);
  border: 1px solid var(--forest);
  border-radius: var(--radius-s);
  transition: background-color var(--duration-fast) ease;
}

.button:hover {
  background-color: var(--forest-deep);
}


/* ==========================================================================
   6. Sections
   ========================================================================== */

/* --- Site header & navigation -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  transition:
    background-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  background-color: rgb(245 241 232 / 0.94);
  box-shadow: 0 1px 0 var(--rule-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__home {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0 0 0 var(--space-s);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
}

/* Two hairlines that cross when open */
.nav__toggle-icon {
  position: relative;
  width: 1.25rem;
  height: 0.4375rem;
}

.nav__toggle-icon::before,
.nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out);
}

.nav__toggle-icon::before { top: 0; }
.nav__toggle-icon::after  { top: 100%; }

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before {
  top: 50%;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after {
  top: 50%;
  transform: rotate(-45deg);
}

/* Mobile menu: a simple sheet that drops beneath the header */
.nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: var(--space-s) var(--gutter) var(--space-xl);
  list-style: none;
  background-color: var(--paper);
  box-shadow: 0 1px 0 var(--rule-soft), 0 24px 32px -24px rgb(37 37 34 / 0.18);
}

.nav__menu > li + li {
  border-top: 1px solid var(--rule-soft);
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
}

.nav__link[aria-current="true"] {
  color: var(--forest);
}

/* No-JS: the toggle does nothing, so always show the menu inline */
html:not(.js) .nav__toggle {
  display: none;
}

html:not(.js) .nav__menu {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-s);
  padding: 0;
  background: none;
  box-shadow: none;
}

html:not(.js) .nav__menu > li + li {
  border: 0;
}

html:not(.js) .nav__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.js .nav__menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.js .site-header.is-open .nav__menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility 0s;
}

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

.hero {
  padding-block: var(--space-m) var(--space-section);
  overflow-x: clip;   /* the ferry runs edge to edge on phones */
}

/* The ferry is sized from the hero width so the card can leave exactly
   enough room for it to overlap the card's lower edge. */
.hero__inner {
  --boat-width: calc(100cqi + 2 * var(--gutter));
  --boat-height: calc(var(--boat-width) / 3);     /* image is 3:1 */
  --boat-overlap: calc(var(--boat-height) * 0.5); /* deck line meets the card's edge */

  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* the wider ferry overflows evenly instead of widening the track */
  justify-items: center;
  container-type: inline-size;
}

.hero__card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: 100%;
  padding: clamp(2.5rem, 1.5rem + 5vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  padding-bottom: calc(clamp(2.5rem, 1.5rem + 5vw, 4.5rem) + var(--boat-overlap));
  text-align: center;
  container-type: inline-size;
  background-color: var(--paper-light);
  background-image: var(--texture-grain);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
}

.hero__card::before {
  content: "";
  position: absolute;
  inset: var(--card-inset);
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

.hero__names {
  display: grid;
  justify-items: center;
  margin-block: var(--space-l) var(--space-xl);
  font-size: clamp(3rem, 22cqi, 7.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Keep optical centring despite trailing letter-spacing */
.hero__name {
  margin-right: -0.06em;
}

.hero__amp {
  margin-block: 0.02em 0.06em;
  font-size: 0.62em;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--forest);
}

.hero__details {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}

.hero__date,
.hero__place {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin-right: calc(var(--tracking-wide) * -1);
}

.hero__date time {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}

.hero__dot {
  color: var(--forest);
}

.hero__place {
  display: grid;
  gap: 0.35em;
  color: var(--ink-soft);
}

/* Phones: “Portaferry / Northern Ireland” on two lines, no comma */
.hero__place-sep {
  display: none;
}

/* The ferry, sailing in front of the card on engraved water lines */
.hero__boat {
  position: relative;
  z-index: 2;
  width: var(--boat-width);
  margin-top: calc(var(--boat-overlap) * -1);
}

.hero__boat-img {
  width: 100%;
  transform-origin: 50% 88%;   /* rock about the waterline, not the centre */
}

/* Water: repeating strips of engraved wave-strokes, full page width.
   Each stroke is tapered (fine at the ends, fuller in the middle) like the
   pen-work in the ferry illustration. Rows get shorter, fainter and further
   apart towards the bottom to suggest depth. Each strip is a mask over the
   forest colour, so the palette token still controls the colour.
   (Tiles generated from a small script: tapered sine strokes, 10px tall.) */
.hero__water {
  display: grid;
  width: 100vw;
  margin-top: -4.5%;                 /* the hull sits on the first line */
  margin-left: calc(50% - 50vw);     /* break out to the full page width */
}

.hero__wave {
  display: block;
  height: 10px;
  margin-top: var(--gap, 0);
  background-color: var(--forest);
  opacity: var(--strength);
  -webkit-mask: var(--wave) var(--offset) 50% / var(--tile) 10px repeat-x;
  mask: var(--wave) var(--offset) 50% / var(--tile) 10px repeat-x;
}

.hero__wave--1 {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='10'%3E%3Cpath d='M18.0 6.32L24.1 6.52L30.2 6.51L36.3 6.32L42.4 5.98L48.5 5.51L54.6 4.94L60.7 4.34L66.8 3.76L72.9 3.25L79.0 2.87L85.1 2.65L91.2 2.60L97.3 2.74L103.4 3.03L109.5 3.46L115.6 3.97L121.7 4.50L127.8 5.01L133.9 5.43L140.0 5.72L146.1 5.85L152.2 5.81L158.3 5.60L164.4 5.24L170.5 4.78L176.6 4.26L182.7 3.74L188.8 3.28L194.9 2.93L201.0 2.73L207.1 2.70L213.2 2.85L219.3 3.17L225.4 3.64L231.5 4.20L237.6 4.81L243.7 5.41L249.8 5.95L255.9 6.37L262.0 6.60L262.0 6.75L255.9 6.59L249.8 6.33L243.7 5.94L237.6 5.48L231.5 4.99L225.4 4.54L219.3 4.19L213.2 3.96L207.1 3.90L201.0 4.02L194.9 4.30L188.8 4.72L182.7 5.24L176.6 5.81L170.5 6.37L164.4 6.87L158.3 7.26L152.2 7.49L146.1 7.54L140.0 7.42L133.9 7.12L127.8 6.69L121.7 6.16L115.6 5.60L109.5 5.05L103.4 4.58L97.3 4.23L91.2 4.03L85.1 4.01L79.0 4.16L72.9 4.46L66.8 4.87L60.7 5.35L54.6 5.85L48.5 6.30L42.4 6.65L36.3 6.86L30.2 6.89L24.1 6.74L18.0 6.47ZM292.0 5.24L298.0 5.50L304.0 5.49L310.0 5.21L316.0 4.75L322.0 4.27L328.0 3.99L334.0 4.03L334.0 4.18L328.0 4.50L322.0 5.09L316.0 5.73L310.0 6.19L304.0 6.31L298.0 6.01L292.0 5.39ZM366.0 3.73L372.1 4.08L378.1 4.49L384.2 4.95L390.3 5.39L396.4 5.72L402.4 5.91L408.5 5.91L414.6 5.73L420.7 5.36L426.7 4.87L432.8 4.31L438.9 3.76L445.0 3.28L451.0 2.93L457.1 2.77L463.2 2.82L469.3 3.07L475.3 3.49L481.4 4.03L487.5 4.62L493.6 5.20L499.6 5.68L505.7 6.02L511.8 6.18L517.9 6.15L523.9 5.95L530.0 5.56L530.0 5.71L523.9 6.21L517.9 6.61L511.8 6.82L505.7 6.81L499.6 6.61L493.6 6.25L487.5 5.78L481.4 5.28L475.3 4.82L469.3 4.47L463.2 4.27L457.1 4.25L451.0 4.43L445.0 4.77L438.9 5.24L432.8 5.76L426.7 6.27L420.7 6.70L414.6 6.98L408.5 7.08L402.4 6.96L396.4 6.65L390.3 6.18L384.2 5.59L378.1 4.95L372.1 4.35L366.0 3.88Z'/%3E%3C/svg%3E");
  --tile: 560px; --offset: 0px;   --speed: 34s; --strength: 0.72;
}

.hero__wave--2 {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='10'%3E%3Cpath d='M34.0 5.34L40.1 4.81L46.3 4.25L52.4 3.76L58.6 3.40L64.7 3.20L70.9 3.18L77.0 3.32L83.1 3.62L89.3 4.02L95.4 4.47L101.6 4.92L107.7 5.31L113.9 5.59L120.0 5.72L126.1 5.68L132.3 5.49L138.4 5.17L144.6 4.75L150.7 4.29L156.9 3.86L163.0 3.50L169.1 3.27L175.3 3.20L181.4 3.30L187.6 3.58L193.7 4.00L199.9 4.54L206.0 5.07L206.0 5.22L199.9 4.77L193.7 4.41L187.6 4.14L181.4 4.00L175.3 4.01L169.1 4.19L163.0 4.52L156.9 4.96L150.7 5.47L144.6 5.99L138.4 6.46L132.3 6.82L126.1 7.03L120.0 7.07L113.9 6.93L107.7 6.64L101.6 6.21L95.4 5.72L89.3 5.20L83.1 4.72L77.0 4.35L70.9 4.10L64.7 4.02L58.6 4.10L52.4 4.32L46.3 4.65L40.1 5.05L34.0 5.49ZM244.0 5.44L250.0 4.82L256.0 4.19L262.0 3.83L268.0 3.85L274.0 4.24L280.0 4.84L286.0 5.42L292.0 5.72L292.0 5.87L286.0 5.81L280.0 5.48L274.0 5.03L268.0 4.70L262.0 4.62L256.0 4.84L250.0 5.22L244.0 5.59ZM330.0 3.96L336.0 4.24L342.0 4.58L348.0 4.96L354.0 5.31L360.0 5.56L366.0 5.67L372.0 5.62L378.0 5.40L384.0 5.04L390.0 4.61L396.0 4.16L402.0 3.77L408.0 3.51L414.0 3.41L420.0 3.51L426.0 3.79L432.0 4.24L438.0 4.75L438.0 4.90L432.0 4.52L426.0 4.28L420.0 4.17L414.0 4.22L408.0 4.44L402.0 4.80L396.0 5.26L390.0 5.75L384.0 6.19L378.0 6.53L372.0 6.71L366.0 6.70L360.0 6.49L354.0 6.12L348.0 5.62L342.0 5.07L336.0 4.52L330.0 4.11Z'/%3E%3C/svg%3E");
  --tile: 470px; --offset: 180px; --speed: 48s; --strength: 0.52;
  --gap: clamp(0.1rem, 0.05rem + 0.3vw, 0.3rem);
}

.hero__wave--3 {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='10'%3E%3Cpath d='M56.0 4.05L62.0 4.34L68.0 4.66L74.0 5.02L80.0 5.34L86.0 5.57L92.0 5.67L98.0 5.61L104.0 5.39L110.0 5.06L116.0 4.65L122.0 4.22L128.0 3.85L134.0 3.59L140.0 3.49L146.0 3.56L152.0 3.80L158.0 4.18L164.0 4.66L170.0 5.17L176.0 5.59L176.0 5.74L170.0 5.40L164.0 5.05L158.0 4.71L152.0 4.45L146.0 4.32L140.0 4.33L134.0 4.50L128.0 4.81L122.0 5.21L116.0 5.65L110.0 6.05L104.0 6.35L98.0 6.52L92.0 6.51L86.0 6.33L80.0 6.00L74.0 5.55L68.0 5.05L62.0 4.56L56.0 4.20ZM246.0 4.88L252.0 5.26L258.0 5.53L264.0 5.67L270.0 5.63L276.0 5.41L282.0 5.05L288.0 4.60L294.0 4.16L300.0 3.82L306.0 3.64L312.0 3.66L318.0 3.89L324.0 4.30L330.0 4.82L336.0 5.31L336.0 5.46L330.0 5.08L324.0 4.74L318.0 4.48L312.0 4.37L306.0 4.44L300.0 4.68L294.0 5.06L288.0 5.50L282.0 5.91L276.0 6.21L270.0 6.34L264.0 6.26L258.0 5.97L252.0 5.52L246.0 5.03Z'/%3E%3C/svg%3E");
  --tile: 400px; --offset: 90px;  --speed: 64s; --strength: 0.36;
  --gap: clamp(0.2rem, 0.1rem + 0.45vw, 0.45rem);
}

.hero__wave--4 {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='10'%3E%3Cpath d='M110.0 4.03L116.1 4.06L122.3 4.24L128.4 4.57L134.6 4.94L140.7 5.27L146.9 5.47L153.0 5.49L159.1 5.32L165.3 5.00L171.4 4.62L177.6 4.26L183.7 4.03L189.9 3.98L196.0 4.10L196.0 4.25L189.9 4.22L183.7 4.44L177.6 4.81L171.4 5.28L165.3 5.74L159.1 6.10L153.0 6.29L146.9 6.25L140.7 6.00L134.6 5.60L128.4 5.11L122.3 4.65L116.1 4.30L110.0 4.18ZM322.0 4.74L328.0 4.31L334.0 4.06L340.0 4.10L346.0 4.40L352.0 4.84L358.0 5.23L364.0 5.45L370.0 5.44L376.0 5.18L376.0 5.33L370.0 5.74L364.0 5.94L358.0 5.86L352.0 5.53L346.0 5.10L340.0 4.73L334.0 4.55L328.0 4.60L322.0 4.89Z'/%3E%3C/svg%3E");
  --tile: 520px; --offset: 260px; --speed: 84s; --strength: 0.24;
  --gap: clamp(0.3rem, 0.15rem + 0.6vw, 0.65rem);
}

.hero__boat-img {
  position: relative;
  z-index: 1;   /* hull in front of the water */
}

/* Desktop-only scroll cue */
.hero__scroll {
  display: none;
}

/* --- I. The Weekend ------------------------------------------------------ */

.timelines {
  display: grid;
  justify-items: center;
  gap: var(--space-xl);
}

/* Segmented toggle: a forest-green highlight slides between the options */
.toggle {
  --pad: 4px;

  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--pad);
  background-color: var(--paper-light);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
}

html:not(.js) .toggle {
  display: none;   /* without JS both timelines are simply shown */
}

.toggle__indicator {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc(50% - var(--pad));
  background-color: var(--forest);
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out);
}

.toggle[data-active="1"] .toggle__indicator {
  transform: translateX(100%);
}

.toggle__option {
  position: relative;
  z-index: 1;
  min-height: 2.75rem;
  padding: 0 clamp(1rem, 0.5rem + 2vw, 1.75rem);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-soft);
  background: none;
  border: 0;
  transition: color var(--duration-base) var(--ease-out);
}

.toggle__option:hover {
  color: var(--ink);
}

.toggle__option[aria-selected="true"] {
  color: var(--paper-light);
}

.toggle__option:focus-visible {
  outline-offset: 5px;
}

/* The timeline cards */
.timelines__stack {
  display: grid;
  gap: var(--space-xl);
  width: min(100%, 31rem);
}

.timeline-card {
  margin: 0;
  overflow: hidden;
  background-color: var(--paper-light);
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
}

.timeline-card__img {
  width: 100%;
}

/* With JS: stacked like two printed cards; the other one peeks out behind */
.js .timelines__stack {
  --front: rotate(-1deg);
  --back: translate(7%, 2.5%) rotate(4deg) scale(0.96);

  gap: 0;
  padding-right: 5%;   /* room for the card peeking out behind */
}

.js .timeline-card {
  grid-area: 1 / 1;
  transform: var(--back);
}

.js .timeline-card.is-active {
  z-index: 2;
  transform: var(--front);
}

.js .timeline-card:not(.is-active) {
  z-index: 1;
  cursor: pointer;
}

.js .timeline-card:not(.is-active) .timeline-card__img {
  opacity: 0.85;
  transition: opacity var(--duration-base) ease;
}

.js .timeline-card:not(.is-active):hover .timeline-card__img {
  opacity: 1;
}

/* The section clips the card as it’s shuffled sideways */
.weekend {
  overflow-x: clip;
}

/* --- II. Venue ------------------------------------------------------------ */

.venue__photo {
  aspect-ratio: 1800 / 1238;   /* the photo’s exact shape: nothing cropped, so the note stays on the door */
  margin-bottom: var(--space-2xl);
}

.venue__grid {
  display: grid;
  gap: var(--space-xl);
}

.venue__name {
  font-size: var(--text-2xl);
  font-weight: 300;
}

.venue__place {
  margin-block: var(--space-s) var(--space-m);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* “Niamh lives here!!!” – a small note card whose tail points at the door.
   --x / --y are the door’s position as a percentage of the photo. */
.photo-note {
  --x: 15.7%;     /* where it lands: Niamh’s door */
  --y: 79.5%;
  --sx: 80%;      /* where it starts: up in the sky over the Sailing Club */
  --sy: 10%;
  --e: 1;         /* travel progress 0 → 1 (set by JS from the scroll position) */
  --arc: 0%;      /* extra lift mid-flight, so it travels in a gentle curve */

  position: absolute;
  top: calc(var(--sy) + (var(--y) - var(--sy)) * var(--e) - var(--arc));
  left: calc(var(--sx) + (var(--x) - var(--sx)) * var(--e));
  margin: 0;
}

/* Marker on the door */
.photo-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--forest);
  border: 2px solid var(--paper-light);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(37 37 34 / 0.35);
  transform: translate(-50%, -50%);
}

.photo-note__bubble {
  position: absolute;
  bottom: calc(0.5rem + 9px);   /* sits above the marker, leaving room for the tail */
  left: -1.25rem;
  padding: 0.35em 0.85em 0.45em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  background-color: var(--paper-light);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  box-shadow: 0 6px 18px -6px rgb(37 37 34 / 0.35);
  transform-origin: 1.25rem calc(100% + 9px);   /* grows out of the tail tip */
}

/* The tail: a small rotated square showing two of its borders */
.photo-note__bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: calc(1.25rem - 5.5px);
  width: 10px;
  height: 10px;
  background-color: var(--paper-light);
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  transform: rotate(45deg);
}

/* With JS: the marker travels in on scroll; the note only shows once it lands */
.js .photo-note:not(.is-landed) .photo-note__bubble {
  opacity: 0;
  transform: scale(0.4) rotate(-4deg);
}

.photo-note__bubble {
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

/* A soft ring pulses on the marker while it’s travelling */
.js .photo-note:not(.is-landed)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--forest);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
}

/* --- III. Travel & Stay ------------------------------------------------- */

.subsection + .subsection {
  margin-top: calc(var(--space-2xl) * 1.5);
}

.subsection__intro {
  margin-bottom: var(--space-xl);
}

/* Airports: a small printed “distance card” */
.journeys {
  max-width: 46rem;
  margin: 0 auto var(--space-2xl);
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem) clamp(1.25rem, 0.5rem + 4vw, 3rem);
}

.journeys__label {
  margin-bottom: var(--space-s);
  text-align: center;
}

.journeys__list {
  display: grid;
  padding: 0;
  list-style: none;
}

.journey {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-s);
}

.journey + .journey {
  border-top: 1px solid var(--rule-soft);
}

.journey__from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}

.journey__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.journey__leader {
  display: none;
}

.journey__time {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* By car / By public transport */
.ways {
  display: grid;
  gap: var(--space-2xl);
}

.way {
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}

.way > * + * {
  margin-top: var(--space-xs);
}

.way__title {
  margin-bottom: var(--space-s);
  font-size: var(--text-xl);
  color: var(--ink);
}

.way > .way__subtitle {
  margin-top: var(--space-l);
}

.way__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest);
}

.way > .way__tip {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  font-size: var(--text-sm);
  border-top: 1px dotted var(--rule-strong);
}

/* Accommodation listings */
.stays {
  display: grid;
  gap: var(--space-2xl) var(--space-xl);
  padding: 0;
  list-style: none;
}

.stay {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}

.stay > * + * {
  margin-top: var(--space-xs);
}

.stay__name {
  font-size: var(--text-xl);
  color: var(--ink);
}

.stay > .stay__address {
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
}

.stay > .stay__meta {
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--space-s) var(--space-2xs);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest);
}

/* Separator after each tag, so a wrapped line never starts with a dot */
.stay__meta li:not(:last-child)::after {
  content: "·";
  margin-inline: 0.6em;
  color: var(--ink-muted);
}

/* Links line up along the bottom of the three listings */
.stay > .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-s);
}

.stay-more {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.stay-alt {
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
}

.stay-alt > * + * {
  margin-top: var(--space-xs);
}

.stay-alt__title {
  margin-bottom: var(--space-s);
  font-size: var(--text-xl);
  color: var(--ink);
}

.stay-alt > .text-link {
  margin-top: var(--space-2xs);
}

/* Useful information */

.info-grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  padding: 0;
  list-style: none;
  counter-reset: info;
}

.info-item {
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink);
  counter-increment: info;
  color: var(--ink-soft);
}

.info-item::before {
  content: counter(info, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1;
  color: var(--forest);
}

.info-item__title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
  color: var(--ink);
}

.info-item > p + p {
  margin-top: var(--space-xs);
}

.info-item__contact {
  font-weight: 500;
  color: var(--ink);
}

/* --- IV. Portaferry (guide) ------------------------------------------ */

.section-head__kicker {
  margin-top: var(--space-m);
}

.guide-intro {
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--text-md);
  text-align: center;
  color: var(--ink-soft);
}

.guide-intro > * + * {
  margin-top: 1em;
}

.guide-intro__lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 300;
  line-height: var(--leading-snug);
  color: var(--ink);
}

/* Jump links to each part of the guide */
.guide-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: calc(var(--space-2xl) * 1.25);
  padding: 0;
  list-style: none;
}

.guide-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding-inline: var(--space-s);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.guide-nav a:hover {
  color: var(--forest);
  border-color: var(--forest);
}

.guide-nav .emoji {
  font-size: 1.35em;
}

.guide-part {
  scroll-margin-top: calc(var(--header-height) + var(--space-m));
}

.guide-part + .guide-part {
  margin-top: calc(var(--space-2xl) * 1.5);
}

.guide-part__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.eat-group + .eat-group {
  margin-top: var(--space-2xl);
}

.eat-group ~ .note {
  max-width: 40rem;
  margin-top: var(--space-2xl);
}

/* Pub crawl: a numbered route joined by a dotted path */
.crawl {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.5rem, 0.5rem + 5vw, 4.5rem);
}

.crawl__head {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.crawl__title {
  font-size: var(--text-2xl);
  font-weight: 300;
}

.crawl__title .emoji {
  font-size: 0.6em;
}

.crawl__intro {
  max-width: 30rem;
  color: var(--ink-soft);
}

.crawl__route {
  display: grid;
  padding: 0;
  list-style: none;
  counter-reset: stop;
}

.crawl__stop {
  --marker: 2.25rem;

  position: relative;
  padding: 0 0 var(--space-l) calc(var(--marker) + var(--space-m));
  counter-increment: stop;
  color: var(--ink-soft);
}

.crawl__stop::before {
  content: counter(stop);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--marker);
  height: var(--marker);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--forest);
  background-color: var(--paper-light);
  border: 1px solid var(--forest);
  border-radius: 50%;
}

.crawl__stop:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--marker) + 0.25rem);
  bottom: 0.25rem;
  left: calc(var(--marker) / 2 - 0.5px);
  border-left: 1px dotted var(--forest);
  opacity: 0.6;
}

.crawl__name {
  min-height: var(--marker);
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-3xs);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.crawl__outro {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  text-align: center;
  color: var(--ink);
}

/* --- IV. FAQ ---------------------------------------------------------------- */

.faq__grid {
  display: grid;
}

/* --- V. RSVP -------------------------------------------------------------- */

.reply-card {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.5rem, 0.5rem + 5vw, 4rem);
}

.reply-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-align: center;
  text-transform: uppercase;
  color: var(--heather);
}

.reply-card__lede {
  margin-block: var(--space-s) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 300;
  line-height: var(--leading-snug);
  text-align: center;
  text-wrap: balance;
}

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

.site-footer {
  padding-block: var(--space-2xl);
  color: var(--paper);
  background-color: var(--forest-deep);
  background-image: var(--texture-grain);
  background-blend-mode: soft-light;
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.site-footer__home {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  width: min(22rem, 90%);
  margin-top: var(--space-xl);
}

.site-footer__skyline {
  width: 100%;
  color: var(--paper);
  opacity: 0.4;
}

.site-footer__home-caption {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.7;
}

.site-footer__names {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-right: -0.2em;
}

.site-footer__amp {
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.site-footer__date {
  margin-top: var(--space-s);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  margin-right: calc(var(--tracking-wide) * -1);
}

.site-footer__place {
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  opacity: 0.8;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-l);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity var(--duration-fast) ease;
}

.site-footer__top:hover {
  opacity: 1;
}


/* ==========================================================================
   7. Responsive styles (mobile-first: each block adds to the one above)
   ========================================================================== */

/* --- ≥ 40em / 640px : large phones, small tablets ------------------------ */
@media (min-width: 40em) {
  .form__row--split {
    grid-template-columns: 1fr 1fr;
  }

  .choice-group__options {
    grid-template-columns: 1fr 1fr;
  }

  .details__row {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-m);
    align-items: baseline;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Airports: name · · · · · time */
  .journey {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--space-s);
  }

  .journey__leader {
    display: block;
    height: 0;
    border-bottom: 1px dotted var(--rule-strong);
    transform: translateY(-0.3em);
  }

  .journey__time {
    text-align: right;
  }

  .places--compact {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The ferry breaks out wider than the card */
  .hero__inner {
    --boat-width: min(100cqi, 44rem);
  }

  .hero__card {
    width: min(100%, 36rem);
  }

  .hero__place {
    display: block;
  }

  .hero__place-sep {
    display: inline;
  }
}

/* --- ≥ 60em / 960px : desktop -------------------------------------------- */
@media (min-width: 60em) {
  :root {
    --header-height: 5.5rem;
  }

  /* Navigation shows inline */
  .nav__toggle,
  html:not(.js) .nav__toggle {
    display: none;
  }

  .nav__menu,
  .js .nav__menu,
  html:not(.js) .nav__menu {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    padding: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    transition: none;
  }

  .nav__menu > li + li {
    border: 0;
  }

  .nav__link,
  html:not(.js) .nav__link {
    position: relative;
    min-height: 2.75rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color var(--duration-fast) ease;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.625rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .nav__link:hover,
  .nav__link[aria-current="true"] {
    color: var(--ink);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .nav__link--rsvp {
    min-height: 2.5rem;
    padding-inline: var(--space-m);
    color: var(--forest);
    border: 1px solid var(--forest);
    border-radius: var(--radius-s);
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .nav__link--rsvp::after {
    display: none;
  }

  .nav__link--rsvp:hover,
  .nav__link--rsvp[aria-current="true"] {
    color: var(--paper-light);
    background-color: var(--forest);
  }

  /* Hero fills the first screen */
  .hero {
    display: grid;
    align-items: center;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    padding-block: var(--space-m) var(--space-2xl);
  }

  .hero__inner {
    --boat-width: min(100cqi, 52rem);
    position: relative;
  }

  .hero__card {
    width: min(100%, 38rem);
    padding-top: var(--space-xl);
    padding-bottom: calc(var(--space-l) + var(--boat-overlap));
  }

  .hero__names {
    font-size: clamp(3rem, 19cqi, 5.5rem);
    margin-block: var(--space-m) var(--space-l);
  }

  .hero__details {
    gap: var(--space-s);
  }

  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: calc(var(--space-2xl) * -1);
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-muted);
    transform: translate(-50%, 50%);
  }

  .hero__scroll-line {
    width: 1px;
    height: 2.5rem;
    background-color: currentColor;
    opacity: 0.6;
    transform-origin: top;
  }

  /* Venue: intro + details on the left, map on the right */
  .venue__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-xl) 0;
  }

  .venue__intro,
  .venue__details {
    grid-column: 1 / 6;
  }

  .venue__details {
    align-self: end;
  }

  .venue__map {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    align-self: start;
  }

  .section-head--split {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-xl);
  }

  .section-head--split .section-head__lede {
    margin-top: 0;
  }

  /* Travel & Stay */
  .ways {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl) var(--space-xl);
  }

  .stays {
    grid-template-columns: repeat(3, 1fr);
  }

  .stay-more {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: var(--space-2xl);
  }

  /* Guide */
  .places {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FAQ: heading column + answers column */
  .faq__grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }

  .faq__head {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-height) + var(--space-l));
  }

  .accordion {
    grid-column: 6 / 13;
  }
}

/* --- ≥ 72em / 1152px : wide desktop -------------------------------------- */
@media (min-width: 72em) {
  .info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   8. Accessibility & motion
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.site-footer :focus-visible {
  outline-color: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Hero: gentle staggered entrance on load */
  .js .hero__intro,
  .js .hero__names,
  .js .hero__details {
    animation: rise var(--duration-slow) var(--ease-out) both;
  }

  .js .hero__names   { animation-delay: 150ms; }
  .js .hero__details { animation-delay: 300ms; }

  /* The ferry waits just off the left edge of the screen, then sails in
     when it scrolls into view (JS adds .is-sailing). The distance is
     calculated from the viewport, so it works at any window size:
     half the screen + half the boat puts it entirely out of sight. */
  .js .hero__boat {
    --offscreen: calc(-50vw - 50% - 2rem);
  }

  .js .hero__boat .hero__boat-img {
    translate: var(--offscreen) 0;
  }

  .js .hero__boat.is-sailing .hero__boat-img {
    animation:
      sail-in 5.5s cubic-bezier(0.2, 0.7, 0.25, 1) both,
      rock 6s ease-in-out both;
  }

  /* The water drifts gently right-to-left from the start, so the ferry
     sails in on water that is already moving. Each line has its own pace. */
  .hero__wave {
    animation: drift-water var(--speed) linear infinite;
  }

  .hero__scroll-line {
    animation: drift 2.8s var(--ease-out) infinite;
  }

  /* Timeline cards shuffle: the front card slides out and tucks behind,
     the back card comes forward. z-index swaps half way through. */
  .js .timelines__stack.has-shuffled .timeline-card.is-active {
    animation: card-to-front 0.9s var(--ease-out) both;
  }

  .js .timelines__stack.has-shuffled .timeline-card:not(.is-active) {
    animation: card-to-back 0.9s var(--ease-out) both;
  }

  /* Venue note: once the marker lands, the bubble pops up from it */
  .js .photo-note.is-landed .photo-note__bubble {
    animation: note-pop 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }

  .js .photo-note:not(.is-landed)::after {
    animation: marker-pulse 1.6s var(--ease-out) infinite;
  }

  /* Sections: fade up as they enter the viewport (class added by JS) */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
  }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes sail-in {
  from { translate: var(--offscreen) 0; }
  to   { translate: 0 0; }
}

/* A gentle roll that dies away as the ferry comes to rest */
@keyframes rock {
  0%   { rotate: -1.2deg; }
  22%  { rotate: 0.9deg; }
  44%  { rotate: -0.6deg; }
  66%  { rotate: 0.3deg; }
  84%  { rotate: -0.1deg; }
  100% { rotate: 0deg; }
}

@keyframes drift-water {
  from { -webkit-mask-position: var(--offset) 50%; mask-position: var(--offset) 50%; }
  to   { -webkit-mask-position: calc(var(--offset) - var(--tile)) 50%; mask-position: calc(var(--offset) - var(--tile)) 50%; }
}


@keyframes card-to-back {
  0%   { z-index: 3; transform: var(--front); }
  45%  { z-index: 3; transform: translate(62%, -3%) rotate(9deg); }
  55%  { z-index: 1; transform: translate(58%, -2%) rotate(8deg); }
  100% { z-index: 1; transform: var(--back); }
}

@keyframes card-to-front {
  0%   { z-index: 1; transform: var(--back); }
  45%  { z-index: 1; transform: translate(-6%, 1%) rotate(-3deg) scale(0.98); }
  55%  { z-index: 2; transform: translate(-5%, 1%) rotate(-2.5deg); }
  100% { z-index: 2; transform: var(--front); }
}

@keyframes note-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes marker-pulse {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 0.9; }
  to   { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes fade {
  from { opacity: 0; }
}

@keyframes drift {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { opacity: 0.6; }
  60%  { transform: scaleY(1); opacity: 0.6; }
  100% { transform: scaleY(1); opacity: 0; }
}

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

@media (forced-colors: active) {
  .paper-card,
  .hero__card,
  .photo,
  .map__frame {
    border: 1px solid CanvasText;
  }
}