/* ==========================================================================
   Ship Ashore — styles
   --------------------------------------------------------------------------
   1. Fonts           5. Header & navigation     9. Gallery & viewer
   2. Design tokens   6. Hero                   10. Penzance
   3. Base            7. Welcome & cabin        11. Practical, closing, footer
   4. Components      8. Garden                 12. Booking bar
                                                13. Entrance effects
   ========================================================================== */

/* 1. Fonts — self-hosted, SIL Open Font Licence (see assets/fonts) ------- */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("../fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens -------------------------------------------------------- */

:root {
  /* Colour */
  --ivory: #FAF6EE;       /* page background */
  --paper: #FFFDF8;       /* raised surfaces */
  --sand: #F2ECDF;        /* practical-details band */
  --sea-pale: #E6EFE9;    /* garden band */
  --ink: #16263F;         /* headings, key text, primary button */
  --ink-hover: #23395A;
  --ink-soft: #3C4A61;    /* body copy (8.3:1 on ivory) */
  --muted: #56627A;       /* captions, notes (5.7:1 on ivory) */
  --sea-deep: #2E6557;    /* accents, eyebrows, focus ring (6.2:1) */
  --sea: #6E9E8C;         /* decorative rules and marks only */
  --sea-light: #A8C9BB;   /* accents on ink */
  --footer-text: #C9D0DB;
  --rule: rgba(22, 38, 63, 0.14);
  --rule-strong: rgba(22, 38, 63, 0.26);

  /* Type */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --text-lead: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --text-h2: clamp(2.125rem, 1.45rem + 2.5vw, 3.5rem);
  --text-h3: clamp(1.3125rem, 1.2rem + 0.4vw, 1.5625rem);
  --text-small: 0.9375rem;

  /* Space & layout */
  --container: 77.5rem;   /* 1240px of content */
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section: clamp(5rem, 3.25rem + 6.5vw, 9.5rem);
  --header-h: 4rem;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 900ms;
}

@media (min-width: 960px) {
  :root { --header-h: 4.75rem; }
}

/* 3. Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

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

@media (max-width: 719px) {
  html { scroll-padding-bottom: 6rem; } /* keeps focused items clear of the booking bar */
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; object-position: var(--pos, 50% 50%); }
picture { display: block; }
figure { margin: 0; }
svg { overflow: visible; }

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: 1.25;
}

p { margin: 0 0 1.1em; max-width: 64ch; text-wrap: pretty; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--sea-deep); }

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

main:focus { outline: none; }

::selection { background: var(--sea-light); color: var(--ink); }

figcaption {
  margin-top: 0.875rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--muted);
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--ivory);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; color: var(--ivory); }

.icon { width: 1em; height: 1em; flex: none; }

/* 4. Components ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
/* Sections that follow another on the same background need less space above */
.cabin,
.penzance { padding-top: calc(var(--section) * 0.55); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea-deep);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--sea);
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink);
}

.kicker {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--sea-deep);
}

.section-head {
  display: grid;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2.75rem, 2rem + 3vw, 5rem);
}
.section-head h2 { max-width: 13em; }
.section-head__intro { margin: 0; }

@media (min-width: 960px) {
  .section-head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
  .section-head__intro { padding-bottom: 0.4rem; }
}

.section-head--stacked { display: block; }
.section-head--stacked .section-head__intro { margin-top: 1.5rem; max-width: 36rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn .icon { width: 0.95em; height: 0.95em; transition: transform var(--dur) var(--ease-out); }

.btn--primary { background: var(--ink); color: var(--ivory); }
.btn--primary:hover { background: var(--ink-hover); color: var(--ivory); }
.btn--primary:hover .icon { transform: translate(2px, -2px); }
.btn--primary:active { background: var(--ink); }

.btn--small { min-height: 2.75rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
.btn--large { min-height: 3.75rem; padding: 1.125rem 2.25rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sea);
  text-underline-offset: 0.4em;
}
.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--sea-deep); text-decoration-color: currentColor; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* 5. Header & navigation ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: calc(var(--container) + 2 * var(--gutter));
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.brand__wordmark {
  --wm-h: 1.3rem;
  display: block;
  height: var(--wm-h);
  width: calc(var(--wm-h) * 7.7012);
}

.brand__place {
  display: none;
  padding-left: 1.125rem;
  border-left: 1px solid var(--rule-strong);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.site-nav { display: none; }

.site-header__cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0 0.5rem 0 0.75rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
}
.menu-toggle__icon {
  position: relative;
  width: 1.375rem;
  height: 0.5rem;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: calc(100% - 1.5px); }
html:not(.js) .menu-toggle { display: none; } /* without scripts, the footer links do the job */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--gutter) 1.75rem;
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 28px 40px -28px rgba(22, 38, 63, 0.28);
}
.mobile-menu__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--sea-deep); }

@media (min-width: 720px) {
  .site-header__cta { display: inline-flex; }
}

@media (min-width: 960px) {
  .brand__wordmark { --wm-h: 1.5rem; }
  .site-header__bar { gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .site-nav { display: block; }
  .site-nav__list {
    display: flex;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.55rem;
    height: 1px;
    background: var(--sea-deep);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-out);
  }
  .site-nav a:hover { color: var(--sea-deep); }
  .site-nav a:hover::after,
  .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="true"] { color: var(--sea-deep); }

  .menu-toggle,
  .mobile-menu { display: none !important; }
  .site-header.is-hidden { transform: none; } /* the header always stays put on larger screens */
}

@media (min-width: 1200px) {
  .brand__place { display: block; }
}

/* 6. Hero ------------------------------------------------------------------ */

.hero { display: grid; }

.hero__media {
  position: relative;
  order: -1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sand);
}
.hero__media picture {
  position: absolute;
  inset: 0;
}
.hero__media img {
  --pos: 50% 62%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.625rem 1.25rem 0 var(--gutter);
  background: var(--ivory);
  font-size: 0.875rem;
}

.hero__text {
  container-type: inline-size;
  padding: 2.25rem var(--gutter) 3.5rem;
}

.hero__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 12cqi, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.hero__title > span { display: block; }

.hero__intro {
  max-width: 33rem;
  margin-bottom: 2.25rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

@media (max-width: 599px) {
  .hero__actions .btn { width: 100%; }
}

@media (min-width: 600px) {
  .hero__media { aspect-ratio: 4 / 3; }
}

@media (min-width: 960px) {
  .hero {
    --side: max(var(--gutter), calc((100% - var(--container)) / 2));
    grid-template-columns: var(--side) minmax(0, 0.92fr) clamp(2.5rem, 5vw, 5.5rem) minmax(0, 1.2fr);
    min-height: clamp(560px, calc(100svh - var(--header-h)), 880px);
  }
  .hero__text {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: clamp(3rem, 7vh, 6rem) 0;
  }
  .hero__media {
    grid-column: 4;
    grid-row: 1;
    order: 0;
    aspect-ratio: auto;
  }
  .hero__caption { padding-left: 1.25rem; }
}

/* 7. Welcome & cabin ------------------------------------------------------- */

.welcome__grid { display: grid; gap: 3.5rem; }
.welcome h2 { max-width: 12em; margin-bottom: 1.75rem; }
.welcome__text > p:not(.eyebrow):not(.lead) { margin-bottom: 1.75rem; }

.porthole {
  justify-self: center;
  width: min(72vw, 22.5rem);
  text-align: center;
}
.porthole__frame {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sand);
  box-shadow:
    0 0 0 1px var(--rule-strong),
    0 0 0 0.625rem var(--ivory),
    0 0 0 calc(0.625rem + 1px) var(--sea);
}
.porthole__frame img { width: 100%; height: 100%; object-fit: cover; }
.porthole figcaption { margin-top: 1.75rem; }

@media (min-width: 960px) {
  .welcome__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: center;
  }
}

.facts {
  display: grid;
  margin: clamp(4rem, 7vw, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}
.facts li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--ink);
}
.facts__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea-deep);
}

@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

@media (min-width: 960px) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    border-bottom: 1px solid var(--rule-strong);
  }
  .facts li { padding: 1.5rem 1.5rem 1.625rem; border-bottom: 0; border-left: 1px solid var(--rule); }
  .facts li:first-child { padding-left: 0; border-left: 0; }
}

/* Cabin */
.cabin__feature {
  display: grid;
  gap: 2.25rem;
  margin-bottom: clamp(4rem, 7vw, 7rem);
}
.cabin__bedroom-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.cabin__notes { display: grid; gap: 2.25rem; }
.cabin__notes .room { padding-top: 1.5rem; border-top: 1px solid var(--rule-strong); }

.room h3 { margin-bottom: 0.75rem; }
.room p { margin: 0; }

.cabin__pair {
  display: grid;
  gap: 3.5rem;
  margin-bottom: clamp(4.5rem, 8vw, 8rem);
}
.room--photo figure { margin-bottom: 1.5rem; }
.room--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.room--photo p { max-width: 36rem; }

@media (min-width: 720px) {
  .cabin__pair {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.75rem, 3.5vw, 3.5rem);
    align-items: start;
  }
  .cabin__pair > :first-child { margin-top: clamp(3rem, 9vw, 7.5rem); }
  .room--photo img { aspect-ratio: auto; height: clamp(16rem, 31vw, 27rem); }
}

@media (min-width: 960px) {
  .cabin__feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: end;
  }
}

.amenities {
  display: grid;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--paper);
  border: 1px solid var(--rule);
}
.amenities__head h3 { margin-bottom: 0.75rem; }
.amenities__head p { margin: 0; color: var(--muted); }
.amenities__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0.9rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amenities__list li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.45;
  color: var(--ink);
}
.amenities__list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.5em;
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--sea);
  transform: rotate(45deg);
}

@media (min-width: 960px) {
  .amenities {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

/* 8. Garden ---------------------------------------------------------------- */

.garden { background: var(--sea-pale); }

.garden__wide { margin: 0 auto clamp(4rem, 7vw, 7rem); max-width: 90rem; }
.garden__wide img {
  --pos: 50% 62%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.garden__wide figcaption { margin-top: 1rem; }

@media (min-width: 720px) {
  .garden__wide img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1200px) {
  .garden__wide { padding-inline: var(--gutter); }
  .garden__wide img { aspect-ratio: 2.2 / 1; }
  .garden__wide figcaption { padding-inline: 0; max-width: none; }
}

.garden__seats { display: grid; gap: 3.5rem; }
.garden__camellia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.seats__list { margin: 0; padding: 0; list-style: none; }
.seat {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule-strong);
}
.seat:last-child { border-bottom: 1px solid var(--rule-strong); }
.seat__num {
  padding-top: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sea-deep);
}
.seat h3 { margin-bottom: 0.5rem; }
.seat p { margin: 0; }

@media (min-width: 960px) {
  .garden__seats {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
  }
}

/* 9. Gallery & photograph viewer ----------------------------------------- */

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.25vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__item:nth-child(3n + 1) { grid-column: span 2; }

.gallery__item a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--sand);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.gallery__item:nth-child(3n + 1) img { aspect-ratio: 3 / 2; }

@media (hover: hover) {
  .gallery__item a:hover img { transform: scale(1.03); }
}

@media (min-width: 960px) {
  .gallery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__item,
  .gallery__item:nth-child(3n + 1) { grid-column: span 4; }
  .gallery__item.g-wide { grid-column: span 8; }
  .gallery__item img,
  .gallery__item:nth-child(3n + 1) img { aspect-ratio: auto; }
  .g-tall img { height: clamp(22rem, 37vw, 34rem); }
  .g-short img { height: clamp(15rem, 23vw, 21rem); }
}

.gallery__more { margin: 2.5rem 0 0; }

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(250, 246, 238, 0.97); }
.lightbox[open] { display: block; }

.lightbox__stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4.5rem 1rem 6rem;
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__figure picture { display: contents; }
.lightbox__figure img {
  width: auto;
  height: auto;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 13rem);
  max-height: calc(100dvh - 13rem);
  box-shadow: 0 30px 60px -32px rgba(22, 38, 63, 0.45);
  background: var(--sand);
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-top: 1.125rem;
  font-size: 1rem;
  color: var(--ink-soft);
  text-align: center;
}
.lightbox__count {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lightbox__btn .icon { width: 1.375rem; height: 1.375rem; }
.lightbox__btn:hover { background: var(--ink); color: var(--ivory); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { bottom: 1.25rem; left: calc(50% - 3.75rem); }
.lightbox__next { bottom: 1.25rem; right: calc(50% - 3.75rem); }

@media (min-width: 720px) {
  .lightbox__stage { padding: 4.5rem 6.5rem 2.5rem; }
  .lightbox__figure img { max-width: calc(100vw - 13rem); max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); }
  .lightbox__prev,
  .lightbox__next { bottom: auto; top: 50%; transform: translateY(-50%); }
  .lightbox__prev { left: 1.75rem; }
  .lightbox__next { right: 1.75rem; }
  .lightbox__close { top: 1.5rem; right: 1.75rem; }
}

/* 10. Penzance ------------------------------------------------------------- */

.penzance__grid { display: grid; gap: 3.5rem; }
.penzance h2 { margin-bottom: 1.75rem; }
.penzance__photo { margin-top: 2.75rem; }
.penzance__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.distances { margin: 0; }
.distances__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--rule);
}
.distances__row:first-child { border-top: 1px solid var(--rule-strong); }
.distances__row:last-child { border-bottom-color: var(--rule-strong); }
.distances__row::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--rule-strong);
}
.distances dt {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
}
.distances__note {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--muted);
}
.distances dd {
  order: 2;
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.distances__footnote { margin: 1.25rem 0 0; font-size: var(--text-small); color: var(--muted); }

@media (max-width: 479px) {
  .distances__row { gap: 0.5rem; }
  .distances__row::after { flex-basis: 0.75rem; min-width: 0.75rem; }
  .distances dt { font-size: 1.125rem; }
  .distances dd { font-size: 1rem; }
  .seat { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (min-width: 960px) {
  .penzance__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }
  .penzance__places { padding-top: 5.25rem; }
}

/* 11. Practical details, closing invitation, footer ----------------------- */

.practical { background: var(--sand); }

.practical__grid { display: grid; gap: 3.5rem; }

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}
.ledger__item {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1.5rem 0 1.625rem;
  border-bottom: 1px solid var(--rule-strong);
}
.ledger__item h3 { font-size: 1.3125rem; padding-top: 0.1rem; }
.ledger__item p { margin: 0; color: var(--ink); max-width: 40rem; }
.ledger__item strong { font-weight: 600; letter-spacing: 0.02em; }
.ledger__item .ledger__link { margin-top: 0.5rem; }
.ledger__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration-color: var(--sea);
}
.ledger__link a:hover { text-decoration-color: currentColor; }

.practical__photos { display: grid; gap: 2rem; }
.practical__photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

@media (min-width: 600px) {
  .ledger__item { grid-template-columns: 11.5rem minmax(0, 1fr); }
  .ledger__item > :not(h3) { grid-column: 2; }
  .practical__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (min-width: 960px) {
  .practical__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: start;
  }
  .practical__photos { grid-template-columns: 1fr; gap: 2.25rem; }
  .practical__photos img { aspect-ratio: 4 / 3; }
}

/* Closing invitation */
.closing { text-align: center; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }
.closing__ornament {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
  color: var(--sea-deep);
}
.closing__ornament::before,
.closing__ornament::after {
  content: "";
  width: clamp(3rem, 12vw, 7.5rem);
  height: 1px;
  background: var(--sea);
}
.closing__wheel { width: 3.25rem; height: 3.25rem; }
.closing h2 {
  max-width: 12em;
  margin-bottom: 1.5rem;
  font-size: clamp(2.375rem, 1.55rem + 3.2vw, 4.25rem);
  line-height: 1.05;
}
.closing__text {
  max-width: 30em;
  margin-bottom: 2.5rem;
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-soft);
}
.closing__note { max-width: 40rem; margin: 1.5rem 0 0; font-size: var(--text-small); color: var(--muted); }

@media (max-width: 599px) {
  .closing .btn--large { width: 100%; padding-inline: 1.25rem; }
}

/* Footer */
.site-footer {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  background: var(--ink);
  color: var(--footer-text);
}
.site-footer a { color: var(--ivory); }
.site-footer a:hover { color: var(--sea-light); }
.site-footer :focus-visible { outline-color: var(--sea-light); }

.site-footer__inner { display: grid; gap: 2.75rem; }

.site-footer__wordmark {
  --wm-h: 1.9rem;
  display: block;
  height: var(--wm-h);
  width: calc(var(--wm-h) * 7.7012);
  max-width: 100%;
  color: var(--ivory);
}
.site-footer__place {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sea-light);
}
.site-footer__desc { margin: 0; }

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 246, 238, 0.16);
  font-size: 0.875rem;
}
.site-footer__base p { margin: 0; }
.site-footer__coords { letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: none;
}

@media (min-width: 960px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .site-footer__base { grid-column: 1 / -1; }
}

/* 12. Mobile booking bar ------------------------------------------------- */

.booking-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 246, 238, 0.97);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -18px 32px -28px rgba(22, 38, 63, 0.4);
  transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
}
.booking-bar.is-hidden {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

@media (min-width: 720px) {
  .booking-bar { display: none !important; }
}

/* 13. Entrance effects -----------------------------------------------------
   Elements marked data-fx="…" in index.html wipe into view as they reach the
   screen (main.js adds .is-inview). The .fx class is only set when the visitor
   hasn't asked for reduced motion, so nothing here runs for them.

     text      soft feathered wipe, left to right, with a slight rise
     lines     headings rise line by line from behind a hidden edge
     rise      photographs revealed from the bottom up, like a rising tide
     curtain   the wide garden photograph opens from the centre
     porthole  the porthole ring appears, then the view irises open
     helm      the closing wheel turns into place as its rules draw out

   To switch an effect off for one element, delete its data-fx attribute.
   ------------------------------------------------------------------------ */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* long, soft deceleration */
  --fx-wipe: cubic-bezier(0.77, 0, 0.18, 1);        /* smooth in and out, for wipes */
  --fx-feather: linear-gradient(90deg, #000 38%, transparent 60%);
}

/* Waiting to be revealed (screen only, so printing always shows everything) */
@media screen {
  .fx [data-fx="text"]:not(.is-inview),
  .fx [data-fx="lines"]:not(.is-inview),
  .fx [data-fx="helm"]:not(.is-inview) { opacity: 0; }
  .fx [data-fx="rise"]:not(.is-inview) { clip-path: inset(100% 0 0 0); }
  .fx [data-fx="curtain"]:not(.is-inview) { clip-path: inset(0 50% 0 50%); }
  .fx [data-fx="porthole"]:not(.is-inview) { opacity: 0; }
  .fx [data-fx="porthole"]:not(.is-inview) picture { clip-path: circle(0% at 50% 50%); }
}

/* Photos rise straight onto the page, without a placeholder block behind them */
.fx .hero__media,
.fx .gallery__item a,
.fx .porthole__frame { background: transparent; }

/* Text: a feathered edge sweeps across while the block settles upwards */
.fx [data-fx="text"].is-inview {
  animation: fx-text 1.15s var(--fx-ease) var(--fx-delay, 0ms) backwards;
}
@keyframes fx-text {
  from {
    -webkit-mask-image: var(--fx-feather);
    mask-image: var(--fx-feather);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transform: translateY(0.625rem);
  }
  to {
    -webkit-mask-image: var(--fx-feather);
    mask-image: var(--fx-feather);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transform: none;
  }
}

/* Headings: main.js splits them into lines just before they animate,
   then restores the original markup once they have settled. */
.fx-line {
  display: block;
  clip-path: inset(-0.12em -0.5em -0.16em -0.5em);
}
.fx-line__inner {
  display: block;
  animation: fx-line 1.2s var(--fx-ease) calc(var(--fx-delay, 0ms) + var(--i, 0) * 110ms) backwards;
}
@keyframes fx-line {
  from { transform: translateY(140%); }
  to { transform: none; }
}

/* Photographs */
.fx [data-fx="rise"].is-inview {
  animation: fx-rise 1.4s var(--fx-wipe) var(--fx-delay, 0ms) backwards;
}
.fx [data-fx="curtain"].is-inview {
  animation: fx-curtain 1.7s var(--fx-wipe) var(--fx-delay, 0ms) backwards;
}
.fx [data-fx="rise"].is-inview img,
.fx [data-fx="curtain"].is-inview img {
  animation: fx-settle 2.2s var(--fx-ease) var(--fx-delay, 0ms) backwards;
}
@keyframes fx-rise {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes fx-curtain {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes fx-settle {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

/* Porthole: the ring fades in, then the view opens like an iris */
.fx [data-fx="porthole"].is-inview {
  animation: fx-ring 1s var(--fx-ease) var(--fx-delay, 0ms) backwards;
}
.fx [data-fx="porthole"].is-inview picture {
  animation: fx-iris 1.5s var(--fx-wipe) calc(var(--fx-delay, 0ms) + 250ms) backwards;
}
.fx [data-fx="porthole"].is-inview img {
  animation: fx-settle 2.4s var(--fx-ease) calc(var(--fx-delay, 0ms) + 250ms) backwards;
}
@keyframes fx-ring {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-iris {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(71% at 50% 50%); }
}

/* Closing wheel: a gentle quarter-turn, with the rules drawing outwards */
.closing__ornament::before { transform-origin: right center; }
.closing__ornament::after { transform-origin: left center; }
.fx [data-fx="helm"].is-inview .closing__wheel {
  animation: fx-helm 1.8s var(--fx-ease) var(--fx-delay, 0ms) backwards;
}
.fx [data-fx="helm"].is-inview::before,
.fx [data-fx="helm"].is-inview::after {
  animation: fx-rule 1.3s var(--fx-ease) calc(var(--fx-delay, 0ms) + 250ms) backwards;
}
@keyframes fx-helm {
  from { opacity: 0; transform: rotate(-100deg) scale(0.85); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .gallery__item a:hover img { transform: none; }
}

@media print {
  .site-header, .booking-bar, .lightbox, .skip-link { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 2rem; }
}