/* =========================================================
   HOSTAL CATALINA VERA — Port d'Andratx
   A nautical chart of a whitewashed hostal above the harbour.
   Square edges, hairline waterlines, paper bg + one cobalt sea.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* palette */
  --bg:      #F4F2ED;   /* paper */
  --bg-2:    #EFECE4;   /* faint band */
  --ink:     #16222B;   /* near-black blue-grey */
  --accent:  #1C6F9C;   /* Mediterranean blue */
  --accent-2:#C7A468;   /* warm limestone */
  --muted:   #7C8A91;   /* chart grey */

  /* hairline rules */
  --rule:        rgba(22, 34, 43, 0.22);
  --rule-soft:   rgba(22, 34, 43, 0.12);
  --rule-strong: rgba(22, 34, 43, 0.42);

  /* type */
  --f-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --f-grotesk: "Archivo", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-serif:   "Spectral", Georgia, "Times New Roman", serif;

  /* layout */
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --tick-h: 7px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 560ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(15px, 0.62vw + 13px, 17px);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* defensive only — the layout itself fits 360px+ with no real overflow
     (audited). `clip` guards stray sub-pixel bleed without creating a
     scroll container or masking a genuine wide element the way `hidden` can. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }

/* EVERYTHING SQUARE */
* { border-radius: 0 !important; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font: 600 13px/1 var(--f-body); letter-spacing: 0.04em;
}
.skip-link:focus { left: 12px; top: 12px; }

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

/* ---------- SHELL ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 9vw, 116px); }

/* =========================================================
   THE WATERLINE — the signature hairline rule + ticks + coord
   ========================================================= */
.waterline {
  position: relative;
  height: 1px;
  background: var(--rule);
  width: 100%;
  margin-block: 0;
  /* draw left -> right */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.waterline.is-in { transform: scaleX(1); }

/* tiny vertical tick marks riding the rule, like a depth scale */
.waterline::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--tick-h) * -1 + 1px);
  height: var(--tick-h);
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--rule) 0, var(--rule) 1px,
    transparent 1px, transparent 44px
  );
  /* fade ticks in just behind the drawing rule */
  opacity: 0;
  transition: opacity var(--dur) var(--ease) 120ms;
}
.waterline.is-in::before { opacity: 0.8; }

/* coordinate caption hanging off the rule */
.waterline__coord,
.waterline__label,
.waterline__place {
  font-family: var(--f-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.waterline__coord {
  position: absolute;
  top: 10px; left: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.waterline__place {
  color: var(--accent);
  letter-spacing: 0.18em;
}
.waterline__label {
  position: absolute;
  top: 12px; left: 0;
  font-size: 11px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.26em;
  padding-right: 12px;
  background: var(--bg);
}

/* a tick glyph used inline in captions/coords */
.tick {
  display: inline-block;
  width: 1px; height: 11px;
  background: currentColor;
  opacity: 0.55;
  transform: translateY(1px);
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead {
  position: relative;
  padding-top: clamp(18px, 3vw, 30px);
  background: var(--bg);
}
.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}

.wordmark { display: inline-flex; align-items: baseline; gap: 12px; }
.wordmark__kicker {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--muted);
  text-transform: uppercase;
}
.wordmark__name {
  font-family: var(--f-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px, 1.6vw + 14px, 27px);
  letter-spacing: 0.005em;
  color: var(--ink);
  line-height: 1;
}

.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.nav__link {
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
/* underline wipes in along the baseline */
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--accent); }

.masthead__tools { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }

.lang { display: inline-flex; align-items: center; gap: 7px; }
.lang__btn {
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 2px 1px;
  position: relative;
  transition: color 200ms var(--ease);
}
.lang__btn::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease);
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { color: var(--ink); }
.lang__btn.is-active::after { transform: scaleX(1); }
.lang__sep { color: var(--rule-strong); font-size: 12px; }

.waterline--masthead { margin-top: 0; }
.waterline--masthead .waterline__coord { top: 9px; }

/* ---- masthead overlaid on the hero photograph ----
   lifted out of flow so the full-bleed hero starts at the viewport top;
   text switches to light, and the masthead's own waterline yields to the
   hero's horizon rule (the coordinate motif lives in the hero now). */
.masthead--over-hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: transparent;
}
.masthead--over-hero .wordmark__kicker { color: rgba(248, 247, 243, 0.72); }
.masthead--over-hero .wordmark__name { color: #F8F7F3; text-shadow: 0 1px 14px rgba(11, 19, 25, 0.55); }
.masthead--over-hero .nav__link { color: rgba(248, 247, 243, 0.92); text-shadow: 0 1px 10px rgba(11, 19, 25, 0.5); }
.masthead--over-hero .nav__link.is-current { color: var(--accent-2); }
.masthead--over-hero .lang__btn { color: rgba(248, 247, 243, 0.66); }
.masthead--over-hero .lang__btn:hover,
.masthead--over-hero .lang__btn.is-active { color: #F8F7F3; }
.masthead--over-hero .lang__btn::after { background: #F8F7F3; }
.masthead--over-hero .lang__sep { color: rgba(248, 247, 243, 0.4); }
/* the small CTA reads as a hairline-outline chip on the photo */
.masthead--over-hero .btn--small {
  color: #F8F7F3;
  background: rgba(11, 19, 25, 0.18);
  border-color: rgba(248, 247, 243, 0.6);
  backdrop-filter: blur(2px);
}
.masthead--over-hero .btn--small::before { background: var(--accent-2); }
.masthead--over-hero .btn--small:hover,
.masthead--over-hero .btn--small:focus-visible { color: var(--ink); border-color: var(--accent-2); }
/* the masthead's own waterline + coords step aside for the hero horizon */
.masthead--over-hero .waterline--masthead,
.masthead--over-hero .waterline--masthead .waterline__coord { display: none; }

/* =========================================================
   BUTTONS — square, hairline, level
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 15px 26px;
  position: relative;
  overflow: hidden;
  transition: color 320ms var(--ease), background-color 320ms var(--ease);
  isolation: isolate;
}
/* fill wipe on hover (the accent rises from the baseline) */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 360ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); border-color: var(--accent); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }

.btn--small { padding: 10px 16px; font-size: 11px; letter-spacing: 0.14em; }
.btn--lg { padding: 18px 34px; font-size: 14px; }

/* =========================================================
   LINK WIPE — baseline underline that draws in
   ========================================================= */
.link-wipe {
  position: relative;
  display: inline-block;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
}
.link-wipe::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease);
}
.link-wipe:hover::after, .link-wipe:focus-visible::after { transform: scaleX(1); }

/* =========================================================
   SHARED TYPE
   ========================================================= */
.kicker {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__title {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.prose {
  font-size: clamp(16px, 0.5vw + 14px, 19px);
  line-height: 1.66;
  color: var(--ink);
  max-width: 60ch;
}
.prose + .prose { margin-top: 1em; }

.pullquote {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw + 12px, 30px);
  line-height: 1.3;
  color: var(--ink);
  margin-top: clamp(22px, 3vw, 34px);
  padding-left: 18px;
  border-left: 1px solid var(--accent);
  text-wrap: balance;
}

/* =========================================================
   IMAGE FRAMES — flush, upright, hairline rectangle
   (the source JPGs carry tilted polaroid borders; we cover+
    scale so the white edges crop out and the photo sits flush)
   ========================================================= */
.frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color 360ms var(--ease);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* clean upright crops already sit flush; gentle base for the hover nudge */
  transform: scale(1.0);
  transition: transform 700ms var(--ease);
  will-change: transform;
}
.frame:hover { border-color: var(--rule-strong); }
.frame:hover img { transform: scale(1.04); }

.frame__cap {
  position: absolute;
  left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: rgba(22, 34, 43, 0.72);
  backdrop-filter: blur(2px);
  padding: 8px 14px;
}
.frame__cap .tick { background: var(--bg); opacity: 0.7; }

/* =========================================================
   HERO — full-bleed cinematic harbour
   A single edge-to-edge photograph of the bay. The signature
   waterline rides the horizon as a bright hairline carrying the
   GPS coordinates; big Archivo-Expanded type sits over the sea.
   ========================================================= */
.hero {
  position: relative;
  /* full-viewport; svh avoids the iOS toolbar jump, dvh as progressive boost */
  min-height: 100svh;
  min-height: 100dvh;
  /* full-bleed: escape the document flow's centred column edge to edge */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  /* head sits in the optical centre; foot pinned to the base */
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

/* ---- the photograph ---- */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  /* horizon/town sits a touch above middle — bias the crop down so the
     marina fills the lower frame and sky doesn't dominate */
  object-position: 50% 38%;
  /* lift a soft, low-res source: gentle contrast + warmth + a hair of
     saturation so the cobalt bay reads rich rather than washed */
  filter: saturate(1.12) contrast(1.06) brightness(0.98);
  /* a faint scale hides the original JPEG edge softness at full-bleed */
  transform: scale(1.06);
  transform-origin: 50% 42%;
  /* slow, almost-still drift in — cinematic, not animated-looking */
  animation: heroDrift 18s var(--ease) both;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1.12); }
  to   { transform: scale(1.06); }
}

/* ---- dark-to-transparent scrim so light type stays legible ---- */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* top: anchor the masthead + kicker */
    linear-gradient(to bottom,
      rgba(11, 19, 25, 0.62) 0%,
      rgba(11, 19, 25, 0.20) 16%,
      rgba(11, 19, 25, 0.00) 34%),
    /* bottom: seat the headline, scroll cue + caption */
    linear-gradient(to top,
      rgba(11, 19, 25, 0.80) 0%,
      rgba(11, 19, 25, 0.42) 22%,
      rgba(11, 19, 25, 0.06) 48%,
      rgba(11, 19, 25, 0.00) 64%),
    /* a whole-frame cool wash to unify + deepen the ink palette */
    linear-gradient(to bottom right,
      rgba(22, 34, 43, 0.22),
      rgba(22, 34, 43, 0.04));
}

/* ---- filmic grain: masks low-res softness, adds a printed finish ---- */
.hero__grain {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- THE WATERLINE riding the horizon (the wow moment) ---- */
.hero__waterline {
  position: absolute;
  left: 0; right: 0;
  /* rides the open water in the band BELOW the (top-anchored) head and
     ABOVE the foot — a clean horizon datum, never a line through the type.
     Coords pin to the right margin. */
  top: 70%;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 720px) { .hero__waterline { top: 66%; } }
/* the bright hairline itself, drawn left→right, full-bleed */
.hero__waterline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(244, 242, 237, 0) 0%,
    rgba(244, 242, 237, 0.85) 8%,
    rgba(244, 242, 237, 0.85) 92%,
    rgba(244, 242, 237, 0) 100%);
  box-shadow: 0 0 14px rgba(199, 164, 104, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease) 240ms;
}
.hero.is-lit .hero__waterline::after { transform: scaleX(1); }
/* depth-scale ticks hanging just under the line, like a chart sounding */
.hero__waterline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: var(--tick-h);
  background-image: repeating-linear-gradient(
    to right,
    rgba(244, 242, 237, 0.55) 0, rgba(244, 242, 237, 0.55) 1px,
    transparent 1px, transparent 46px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  opacity: 0;
  transition: opacity 900ms var(--ease) 700ms;
}
.hero.is-lit .hero__waterline::before { opacity: 1; }

/* the coordinates set as a small caption riding the line — pinned to the
   RIGHT margin (chart-edge), clear of the left-set headline */
.hero__waterline-inner { position: relative; }
.hero__coord {
  position: absolute;
  top: 9px; right: var(--gutter);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 237, 0.95);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(11, 19, 25, 0.85);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 700ms var(--ease) 820ms, transform 700ms var(--ease) 820ms;
}
.hero.is-lit .hero__coord { opacity: 1; transform: none; }
.hero__coord .tick { background: var(--accent-2); opacity: 0.95; height: 12px; width: 1px; }
.hero__coord-dot { color: var(--accent-2); }
.hero__coord-place {
  color: var(--accent-2);
  letter-spacing: 0.2em;
  padding-left: 4px;
}

/* ---- type over the image ---- */
.hero__inner {
  position: relative;
  z-index: 4;
  /* head anchored to the UPPER band (below the overlaid masthead); this
     leaves open lower water for the waterline + foot, so the horizon rule
     never cuts through the type */
  align-self: start;
  width: 100%;
  padding-top: clamp(104px, 19vh, 210px);
}
.hero__head { max-width: 15ch; }
.hero__kicker {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: clamp(11px, 0.5vw + 9px, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 1px 12px rgba(11, 19, 25, 0.6);
}
.hero__headline {
  font-family: var(--f-display);
  font-weight: 800;
  /* commanding but not viewport-devouring, so sub + CTA + scroll cue + the
     waterline all stay in one screen on a 900px-tall laptop */
  font-size: clamp(52px, 9.6vw, 142px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: #F8F7F3;
  margin-top: clamp(12px, 1.6vw, 22px);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(11, 19, 25, 0.5), 0 1px 3px rgba(11, 19, 25, 0.4);
}
.hero__sub {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(17px, 0.8vw + 14px, 23px);
  line-height: 1.5;
  color: rgba(248, 247, 243, 0.94);
  max-width: 34ch;
  margin-top: clamp(20px, 2.6vw, 32px);
  text-shadow: 0 1px 18px rgba(11, 19, 25, 0.6);
}
.hero__actions {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.hero__actions .link-wipe {
  font-family: var(--f-grotesk); font-weight: 600;
  letter-spacing: 0.06em; font-size: 14px;
}

/* a button tuned to read on the photograph */
.btn--on-photo {
  color: var(--ink);
  background: #F4F2ED;
  border-color: #F4F2ED;
  box-shadow: 0 8px 30px rgba(11, 19, 25, 0.35);
}
.btn--on-photo:hover, .btn--on-photo:focus-visible {
  border-color: var(--accent-2);
  color: #F8F7F3;
}
/* link-wipe variant that sits on the dark photo */
.link-wipe--light { color: rgba(248, 247, 243, 0.95); }
.link-wipe--light::after { background: var(--accent-2); }

/* ---- foot: scroll cue + place caption on the bottom rule ---- */
.hero__foot {
  position: relative;
  z-index: 4;
  align-self: end;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: clamp(20px, 3.4vh, 34px);
}
.hero__scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(248, 247, 243, 0.9);
}
.hero__scroll-label {
  font-family: var(--f-grotesk);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(11, 19, 25, 0.6);
}
.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(248,247,243,0.85), rgba(248,247,243,0));
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 1px; height: 16px;
  background: var(--accent-2);
  animation: heroScroll 2.4s var(--ease) infinite;
}
@keyframes heroScroll {
  0%   { transform: translateY(-18px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}
.hero__scroll:hover .hero__scroll-label { color: var(--accent-2); }

.hero__cap {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 247, 243, 0.86);
  text-align: right;
  text-shadow: 0 1px 12px rgba(11, 19, 25, 0.7);
}
.hero__cap .tick { background: rgba(248,247,243,0.8); opacity: 0.8; height: 11px; }

/* short / laptop viewports: compress vertical rhythm so the whole hero
   composition (headline + sub + CTA + scroll cue + waterline) fits ~100vh */
@media (min-width: 721px) and (max-height: 940px) {
  .hero__inner { padding-top: clamp(88px, 12vh, 140px); }
  .hero__sub { margin-top: clamp(13px, 1.6vh, 20px); }
  .hero__actions { margin-top: clamp(16px, 2.2vh, 28px); }
  .hero__waterline { top: 75%; }
}
@media (min-width: 721px) and (max-height: 820px) {
  .hero__headline { font-size: clamp(48px, 8.2vw, 116px); }
  .hero__inner { padding-top: clamp(84px, 12vh, 128px); }
  .hero__waterline { top: 70%; }
}

/* =========================================================
   STORY
   ========================================================= */
.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(34px, 4vw, 52px);
}
.story__lead { max-width: 18ch; }
.frame--wide {
  margin-top: clamp(40px, 5vw, 64px);
  aspect-ratio: 16 / 8;
}
@media (max-width: 640px) { .frame--wide { aspect-ratio: 4 / 3.4; } }

/* =========================================================
   CHART ENTRIES — BERTH / VIEW / FIND US
   ========================================================= */
.entry { padding-top: clamp(40px, 5vw, 70px); }
.entry:first-child { padding-top: clamp(24px, 3vw, 40px); }

.entry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(28px, 3vw, 42px);
}
.entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.entry__index {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.entry__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 0.96;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.entry__sub {
  font-family: var(--f-body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* bearings list — chart table */
.bearings {
  list-style: none; padding: 0;
  margin-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--rule);
  max-width: 52ch;
}
.bearings__row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.bearings__k {
  font-family: var(--f-grotesk);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.bearings__v {
  font-size: 13px; color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   BOOKING
   ========================================================= */
.book { background: var(--bg-2); }
.book__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(30px, 4vw, 52px);
  align-items: start;
}
.book__title {
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.book__sub {
  font-size: clamp(16px, 0.5vw + 14px, 19px);
  line-height: 1.62;
  color: var(--ink);
  max-width: 52ch;
  margin-top: 18px;
}
.book__action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.book__direct {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--accent);
  max-width: 34ch;
  line-height: 1.4;
}
.book__mail { font-family: var(--f-body); font-size: 14px; letter-spacing: 0.02em; color: var(--muted); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px); background: var(--bg); }
.waterline--footer { margin-bottom: clamp(34px, 4vw, 50px); }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
}
.footer__name {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2vw + 12px, 30px);
  color: var(--ink);
  margin-top: 4px;
  line-height: 1;
}
.footer__line { font-size: 14px; color: var(--muted); max-width: 30ch; margin-top: 12px; line-height: 1.5; }

.footer__k {
  display: block;
  font-family: var(--f-grotesk);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.footer__contact, .footer__nav { display: flex; flex-direction: column; gap: 8px; font-style: normal; }
.footer__contact a, .footer__nav a { font-size: 14px; width: max-content; }

.footer__base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   SCROLL REVEAL — content rises 8–12px + quiet fade
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(11px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* frames scale-settle as they reveal */
[data-reveal="frame"] { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
[data-reveal="frame"].is-in { opacity: 1; transform: none; }

/* coordinate count/settle on reveal */
.waterline__coord.is-settle { animation: settle 620ms var(--ease) both; }
@keyframes settle {
  from { opacity: 0; letter-spacing: 0.30em; }
  to   { opacity: 1; letter-spacing: 0.16em; }
}

/* =========================================================
   RESPONSIVE — real breakpoints, mobile-first above
   ========================================================= */

/* tablet */
@media (min-width: 720px) {
  .story__grid { grid-template-columns: minmax(160px, 0.7fr) 2fr; align-items: start; }
  .entry__grid { grid-template-columns: minmax(220px, 0.85fr) 2fr; align-items: start; }
  .book__grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* desktop — keep the hero sub to a tight measure under the big headline */
@media (min-width: 960px) {
  .hero__sub { max-width: 32ch; }
}

/* small phones — tighten masthead into two tidy rows */
@media (max-width: 720px) {
  .masthead__inner { gap: 14px; }
  .nav { order: 3; width: 100%; gap: 4px 18px; padding-top: 2px; }
  .masthead__tools { order: 2; }
  .wordmark { order: 1; min-height: 44px; align-items: center; }
  .entry__title, .hero__headline { letter-spacing: 0; }

  /* ---- TOUCH TARGETS ≥44px (the rules stay hairline-thin; only the
     hit area grows, via vertical padding that doesn't shift the layout) ---- */
  .nav__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0;        /* underline rides the text baseline below */
  }
  .nav__link::after { bottom: 9px; }   /* keep the wipe under the glyphs */

  .lang { gap: 2px; }
  .lang__btn {
    min-height: 44px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
  }
  .lang__btn::after { bottom: 9px; }
  .lang__sep { align-self: center; }

  /* the masthead CTA matches the 44px rhythm */
  .btn--small { padding-block: 13px; }

  /* in-text + footer links get a comfortable 44px row without visual bloat */
  .hero__actions .link-wipe,
  .footer__contact a,
  .footer__nav a,
  .book__mail {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer__contact, .footer__nav { gap: 2px; }
}

@media (max-width: 420px) {
  .nav { font-size: 10px; column-gap: 16px; }
  .waterline__place { display: none; }
  .legend__row { grid-template-columns: 76px 1fr; }
}

/* =========================================================
   REDUCED MOTION — hold everything static & level
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .waterline { transform: scaleX(1); }
  .waterline::before { opacity: 0.8; }
  [data-reveal], [data-reveal="frame"] { opacity: 1; transform: none; }
  .frame img { transform: scale(1.085); }
  .frame:hover img { transform: scale(1.085); }

  /* hero: hold the photo + waterline + coords static and visible */
  .hero__photo { animation: none; transform: scale(1.06); }
  .hero__waterline::after { transform: scaleX(1); }
  .hero__waterline::before { opacity: 1; }
  .hero__coord { opacity: 1; transform: none; }
  .hero__scroll-line::after { animation: none; opacity: 0.9; height: 22px; }
}

/* print */
@media print {
  .nav, .lang, .masthead__tools .btn { display: none; }
  body { background: #fff; }
  .frame img { transform: none; }
}