/* ==========================================================================
   OFF GRID HOLIDAYS — "The Drop"
   Fuvahmulah is a one-island atoll: no lagoon, no shelf. The reef falls
   straight off the island into open ocean. The site descends with it.

   Brand tokens carried over from the Off Grid Holidays design handoff.
   ========================================================================== */

:root {
  /* --- Brand (from handoff) --- */
  --navy:      #0B2239;
  --navy-hi:   #12354F;
  --ocean:     #14507E;
  --turq:      #1FB6C1;   /* handoff brand turquoise — the UI accent again */
  --sand:      #E8DCC8;
  --shell:     #F7F5F0;
  --charcoal:  #2B2B2B;

  /* --- Extended: the descent, pulled toward --ocean rather than to black.
         --haze-dim is set at a value that clears WCAG AA (4.5:1) on both
         --abyss and --abyss-hi; do not darken it without re-checking. --- */
  /* The UI accent. Was the handoff's turquoise #1FB6C1; replaced with a
     brighter, near-neutral so it reads as light on the ocean ground rather
     than as a second colour. Verified AA on every ground and under the dark
     button ink — see the contrast matrix in the README. */
  --accent:    #1FB6C1;   /* the brand turquoise, used selectively: eyebrows,
                             rule marks, link underlines and hover fills. It is
                             the only warm-cool break in an otherwise blue page,
                             so spending it anywhere else flattens it. */

  --abyss:      #02101F;
  --abyss-hi:   #04182B;
  --raise:      #06233E;
  --line:       #0F3D68;
  --line-hi:    #1858A0;
  --haze:       #9CC6EC;
  --haze-dim:   #77A4CE;

  /* --- Status (from handoff — always paired with text) --- */
  --ok-bg:   #0E3A2C;  --ok-fg:   #6FE0B0;
  --warn-bg: #3D2E12;  --warn-fg: #F0C070;

  /* --- Type --- */
  /* Didone display against geometric sans — the editorial-luxury pairing.
     --label is the same face as --body, kept separate so the uppercase
     micro-type can be retuned without touching running text. */
  /* MEDIQA is self-hosted from assets/fonts/ (see assets/css/fonts.css, which
     also normalises its cap height via size-adjust). Single weight (400),
     so display hierarchy is carried by SIZE, not weight — never set a display
     weight above 400 or the browser synthesises a fake bold. Instrument Serif
     is the fallback. */
  --display: "MEDIQA", "Instrument Serif", "Didot", "Times New Roman", serif;
  --body:    "Geist", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  --label:   "Geist", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-marque: clamp(2.2rem, 5.6vw, 4.8rem);
  --t-h1:     clamp(2rem, 4.6vw, 3.5rem);
  --t-h2:     clamp(1.55rem, 3vw, 2.4rem);
  --t-h3:     clamp(1.1rem, 1.6vw, 1.35rem);
  --t-body:   clamp(0.98rem, 1.0vw, 1.04rem);
  --t-small:  0.875rem;
  --t-micro:  0.72rem;

  /* --- Rhythm --- */
  --gut:   clamp(1.15rem, 4vw, 2.75rem);
  --band:  clamp(4rem, 9vw, 8rem);
  --max:   1340px;
  --radius: 10px;           /* handoff: 8–12px */
  --radius-sm: 6px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* The document is one descent: surface light at the top, abyss at the
     bottom. Sections no longer carry their own grounds or hard edges. */
  background: var(--abyss);
  background-image: linear-gradient(180deg,
    #09375E 0%,
    #072E4E 12%,
    #052239 28%,
    #02101F 48%,
    #02121F 70%,
    #010D18 88%,
    #010A13 100%);
  background-repeat: no-repeat;
  color: var(--shell);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--abyss); }

:focus-visible {                      /* handoff: high-visibility focus ring */
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band); position: relative; }

/* Replaces the old flat panel + 1px borders. No hard edge anywhere: the
   tone rises and falls back to nothing, so one section melts into the next. */
.band--swell::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(159, 191, 212, 0.030) 16%,
    rgba(159, 191, 212, 0.042) 50%,
    rgba(159, 191, 212, 0.030) 84%,
    transparent 100%);
}
.band--tight { padding-block: calc(var(--band) * 0.56); }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: 0.5rem; }  .stack-3 { gap: 0.9rem; }
.stack-4 { gap: 1.4rem; }  .stack-6 { gap: 2.3rem; }

/* --- Type --------------------------------------------------------------- */
.marque, .h1, .h2, .h3, .card__title, .dive__name, .dive__price, .price,
.figure__n, .isle__name, .ledger__n, .rule-item__n, .step__t, .wordmark__txt {
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
}

.marque {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-marque);
  line-height: 1.0;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
.h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0;
}
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: 0; font-weight: 400; }

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.26rem);
  font-weight: 300;
  line-height: 1.58;
  color: color-mix(in srgb, var(--shell) 84%, var(--haze));
  max-width: 54ch;
  margin: 0;
}
p { margin: 0; }
.prose { max-width: 64ch; color: color-mix(in srgb, var(--shell) 74%, var(--haze)); }
.prose p + p { margin-top: 1.1em; }

.eyebrow {
  font-family: var(--label);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--haze-dim);
  margin: 0;
}
.eyebrow--accent { color: var(--accent); }

.data {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--haze);
}
.dim { color: var(--haze); }
.accent { color: var(--accent); }
.sand { color: var(--sand); }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--line) 14%, var(--line) 86%, transparent 100%);
}

/* --- Header ------------------------------------------------------------- */
.rail {
  position: sticky; top: 0; z-index: 60;
  /* Glass: the blur only reads if enough of the picture survives it, so the
     tint is light and the saturation is pushed to keep the water's colour
     rather than letting it grey out behind the panel. */
  background: color-mix(in srgb, var(--abyss) 32%, transparent);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid color-mix(in srgb, var(--shell) 9%, transparent);
  /* the lit top edge that makes a panel look like glass rather than a tint */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--shell) 13%, transparent);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}

/* Once the page has moved, the panel firms up: there is real content under it
   now, not just the header photograph. */
.rail[data-scrolled="true"] {
  background: color-mix(in srgb, var(--abyss) 56%, transparent);
  border-bottom-color: color-mix(in srgb, var(--shell) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--shell) 16%, transparent),
              0 20px 44px -30px rgba(0, 0, 0, 0.92);
}

/* Without backdrop-filter there is no glass, only a see-through bar, so those
   browsers get an opaque panel instead of an unreadable one. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .rail { background: color-mix(in srgb, var(--abyss) 92%, transparent); }
  .rail[data-scrolled="true"] { background: var(--abyss); }
}
.rail__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gut); min-height: 86px;
}

.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.wordmark__mark { height: 46px; width: auto; flex: none; }
.wordmark__txt {
  font-family: var(--display); font-weight: 400;
  font-size: 1.18rem; letter-spacing: 0.04em; line-height: 1.1;
  color: var(--shell);
}
.wordmark__txt small {
  display: block; font-family: var(--label); font-weight: 400;
  font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); margin-top: 2px;
}

.rail__nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 2rem); }
.rail__link {
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--haze); position: relative;
  min-height: 44px; display: inline-flex; align-items: center;   /* AA tap target */
  transition: color 0.25s var(--ease);
}
.rail__link:hover { color: var(--shell); }
.rail__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.rail__link:hover::after,
.rail__link[aria-current="page"]::after { transform: scaleX(1); }
.rail__link[aria-current="page"] { color: var(--shell); }

.rail__toggle {
  display: none; background: none; border: 1px solid var(--line-hi);
  color: var(--shell); font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.15em; text-transform: uppercase;
  min-height: 44px; padding-inline: 0.9rem; border-radius: var(--radius-sm); cursor: pointer;
}

@media (max-width: 900px) {
  .rail__toggle { display: block; }
  .rail__inner { min-height: 74px; }
  .wordmark__mark { height: 40px; }
  .foot__logo { height: 78px; }
  .rail__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--abyss) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.7); border-block: 1px solid var(--line);
    padding: 0.25rem var(--gut) 1.25rem;
  }
  .rail__nav[hidden] { display: none; }
  .rail__link { border-bottom: 1px solid var(--line); font-size: 0.78rem; min-height: 52px; }
  .rail__link::after { display: none; }
  .rail__nav .btn { margin-top: 1rem; justify-content: center; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7ch;
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  min-height: 46px; padding: 0 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--abyss);
  font-weight: 500; cursor: pointer;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease),
              transform 0.2s var(--ease), color 0.3s var(--ease);
}
.btn:hover {
  background: #E9EFEF; border-color: #E9EFEF;
  box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--shell); border-color: var(--line-hi); }
.btn--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); color: var(--accent); box-shadow: none; }

.btn--sand { background: var(--sand); border-color: var(--sand); color: #2B2418; }
.btn--sand:hover { background: #F2E9D9; border-color: #F2E9D9; }

.btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.tlink {
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.7ch;
  min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tlink:hover { gap: 1.2ch; border-bottom-color: var(--accent); }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
/* The <picture> wrapper around a WebP-capable image is a delivery detail, not
   a layout box. display:contents removes it from the layout entirely, so the
   <img> stays a direct child of whatever frame holds it and every
   `.x__media img` rule below keeps resolving its percentages against that
   frame rather than against the wrapper. */
picture { display: contents; }

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
[data-parallax] { will-change: transform; transform: scale(1.22); }
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }

/* The home hero carries the same vertical scrim as the interior mastheads: the
   weight sits under the type at the bottom, and the top of the frame is left
   alone so the photograph reads. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--abyss) 30%, transparent) 0%,
    color-mix(in srgb, var(--abyss) 8%, transparent) 20%,
    color-mix(in srgb, var(--abyss) 24%, transparent) 34%,
    color-mix(in srgb, var(--abyss) 70%, transparent) 44%,
    color-mix(in srgb, var(--abyss) 85%, transparent) 56%,
    color-mix(in srgb, var(--abyss) 93%, transparent) 70%,
    color-mix(in srgb, var(--abyss) 98%, transparent) 86%,
    var(--abyss) 100%);
}

.hero__inner {
  position: relative;
  text-shadow: 0 2px 26px rgba(2, 10, 18, 0.72);
  display: grid; gap: clamp(1.5rem, 3.4vw, 2.4rem);
  align-content: end;
  min-height: min(100vh, 960px);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.6rem, 6vw, 4.4rem);
  max-width: 52rem;
 text-align: center; justify-items: center; margin-inline: auto;}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__readout {
  display: flex; flex-wrap: wrap;
  gap: 0.9rem clamp(1.2rem, 3vw, 2.6rem);
  padding-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--shell) 16%, transparent);
  margin: 0;
}
.hero__readout dt {
  font-family: var(--label); font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--haze-dim); margin: 0 0 0.25rem;
}
.hero__readout dd {
  font-family: var(--mono); font-size: 0.88rem;
  font-variant-numeric: tabular-nums; color: var(--shell); margin: 0;
}

/* Load orchestration — from a visible resting state */
@media (prefers-reduced-motion: no-preference) {
  .lift { animation: lift 0.85s var(--ease) backwards; }
  .lift--1 { animation-delay: 0.06s; }
  .lift--2 { animation-delay: 0.16s; }
  .lift--3 { animation-delay: 0.26s; }
  .lift--4 { animation-delay: 0.36s; }
  @keyframes lift {
    from { opacity: 0.001; transform: translateY(12px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

.hero__inner .eyebrow { color: #E4EEF5; }
.masthead__inner .eyebrow { color: #E4EEF5; }

/* --- Motion -------------------------------------------------------------
   Every hidden state below is gated on [data-motion="on"], which JS sets at
   boot, and JS only ever hides elements that start BELOW the fold. With no JS,
   or above the fold, the page renders complete on the first frame.
   ------------------------------------------------------------------------ */

/* Caustics: sunlight refracting through moving water. This is the one thing
   on the page that moves without being asked to. */
.caustics {
  position: absolute; inset: -25%;
  z-index: -1; pointer-events: none;
  opacity: 0.55; mix-blend-mode: screen;
  background:
    radial-gradient(58% 38% at 28% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(48% 32% at 72% 32%, color-mix(in srgb, var(--ice, #9FBFD4) 16%, transparent), transparent 64%),
    radial-gradient(44% 28% at 46% 62%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
  will-change: transform;
}
.caustics--b {
  opacity: 0.4;
  background:
    radial-gradient(52% 30% at 62% 14%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%),
    radial-gradient(40% 26% at 22% 52%, color-mix(in srgb, var(--shell) 8%, transparent), transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  .caustics   { animation: drift-a 41s ease-in-out infinite alternate; }
  .caustics--b { animation: drift-b 57s ease-in-out infinite alternate; }
}
@keyframes drift-a {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  50%  { transform: translate3d(2.5%, 2%, 0)  scale(1.13); }
  100% { transform: translate3d(-1%, 1.5%, 0) scale(1.06); }
}
@keyframes drift-b {
  0%   { transform: translate3d(2%, 1%, 0)   scale(1.10) rotate(0.6deg); }
  50%  { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02) rotate(-0.5deg); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.09) rotate(0.4deg); }
}

/* Content rises and clarifies as a section arrives — the read of something
   surfacing, rather than a generic fade. */
[data-motion="on"] .reveal {
  opacity: 0.001;
  transform: translateY(26px);
  filter: blur(5px);
  transition:
    opacity 0.75s var(--ease) var(--reveal-delay, 0s),
    transform 0.85s var(--ease) var(--reveal-delay, 0s),
    filter 0.75s var(--ease) var(--reveal-delay, 0s);
}
[data-motion="on"] .reveal.is-in {
  opacity: 1; transform: none; filter: none;
}

/* A hairline that draws itself across as its section arrives. */
[data-motion="on"] .sec-head.reveal::after {
  content: ""; display: block; height: 1px; margin-top: 1.3rem;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) 0.15s;
}
[data-motion="on"] .sec-head.reveal.is-in::after { transform: scaleX(1); }

/* Hero content eases away as you leave it, so the descent starts immediately. */
.hero__inner { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .caustics { animation: none !important; }
  [data-motion="on"] .reveal {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  [data-motion="on"] .sec-head.reveal::after { transform: scaleX(1) !important; }
}

/* --- Depth rail: the signature ------------------------------------------ */
.depth {
  position: fixed; left: max(0.9rem, 2vw); top: 50%;
  transform: translateY(-50%); z-index: 40;
  display: none; pointer-events: none;
  font-family: var(--mono);
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}
.depth[data-hidden="true"] { opacity: 0; }
@media (min-width: 1180px) { .depth { display: block; } }

.depth__track {
  position: relative; width: 2px; height: 42vh; min-height: 240px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--line-hi) 90%, transparent));
}
.depth__tick {
  position: absolute; left: 0; width: 6px; height: 1px;
  background: color-mix(in srgb, var(--haze-dim) 70%, transparent);
}
.depth__tick span { display: none; }
.depth__cursor {
  position: absolute; left: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent),
              0 0 22px color-mix(in srgb, var(--accent) 85%, transparent);
  transition: top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  top: 0;
}
/* the water already fallen through */
.depth__trail {
  position: absolute; left: 0; top: 0; width: 100%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent) 30%, transparent));
  border-radius: 2px; height: 0;
  transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.depth__label {
  margin-top: 1rem; font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.depth__label small { display: block; color: var(--haze-dim); letter-spacing: 0.14em; margin-top: 2px; }

/* --- Section head ------------------------------------------------------- */
.sec-head { display: grid; gap: 1.1rem; align-items: end; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }
@media (min-width: 920px) {
  .sec-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gut); }
  .sec-head__aside { justify-self: end; text-align: right; max-width: 40ch; }
}

/* --- Cards (handoff: large cards, 8–12px radius, soft shadow) ----------- */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--abyss-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}
.card:hover {
  border-color: var(--line-hi);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
}
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--abyss-hi); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--abyss) 82%, transparent) 100%);
}
.card__body { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.15rem, 2vw, 1.5rem); flex: 1; }
.card__title { font-family: var(--display); font-weight: 400; font-size: 1.22rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.card__note { font-size: 0.94rem; line-height: 1.55; color: color-mix(in srgb, var(--shell) 70%, var(--haze)); margin: 0; }
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 0.95rem; border-top: 1px solid var(--line); margin-top: auto;
}
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.price { font-family: var(--display); font-weight: 400; font-size: 1.12rem; color: var(--sand); font-variant-numeric: tabular-nums; }
.price small { color: var(--haze-dim); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Pills — always carry text, never colour alone (handoff AA rule) */
.pill {
  display: inline-flex; align-items: center; gap: 0.45ch;
  font-family: var(--label); font-size: 0.64rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line-hi); color: var(--haze);
  white-space: nowrap;
}
.pill--accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pill--sand { border-color: color-mix(in srgb, var(--sand) 35%, transparent); color: var(--sand); background: color-mix(in srgb, var(--sand) 7%, transparent); }
.pill--warn { border-color: color-mix(in srgb, var(--warn-fg) 40%, transparent); color: var(--warn-fg); background: color-mix(in srgb, var(--warn-fg) 8%, transparent); }
.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.card__media .plate__code,
.card__tag {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  font-family: var(--label); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.32rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--abyss) 78%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--shell) 20%, transparent);
  color: var(--shell);
}

/* --- Dive panel: an instrument, not a card ------------------------------ */
.dives { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .dives { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dive { background: var(--abyss-hi); padding: clamp(1.4rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 1rem; transition: background 0.4s var(--ease); }
.dive:hover { background: var(--raise); }
.dive__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
/* Eloura Sans is compact enough that all three names set on one line at the
   3-column breakpoint, so no second line is reserved. Below that breakpoint
   the cards stack single-column and cross-card alignment stops mattering. */
.dive__name { font-family: var(--display); font-weight: 400; font-size: 1.32rem;
  letter-spacing: 0; line-height: 1.2; margin: 0; }
.dive__price { font-family: var(--display); font-weight: 400; font-size: 1.9rem; color: var(--sand); font-variant-numeric: tabular-nums; line-height: 1; flex: none; }
.dive__price small { display: block; white-space: nowrap; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze-dim); margin-top: 0.3rem; text-align: right; }
.dive__gates { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); margin-top: auto; }
.dive__gate { display: flex; align-items: flex-start; gap: 0.6rem; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--haze); line-height: 1.5; }
.dive__gate svg { flex: none; width: 13px; height: 13px; margin-top: 4px; color: var(--accent); }

/* --- Rules: the safety instrument panel --------------------------------- */
.rules {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 8%, var(--abyss-hi)),
    var(--abyss-hi) 55%);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid; gap: 1.4rem;
}
.rules__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 720px) { .rules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rule-item { background: var(--abyss-hi); padding: 1.1rem 1.25rem; display: flex; gap: 0.9rem; align-items: flex-start; }
.rule-item__n { font-family: var(--display); font-size: 2.1rem; font-weight: 400; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; min-width: 2ch; }
.rule-item__t { font-family: var(--body); font-weight: 500; font-size: 0.96rem; margin: 0; line-height: 1.3; }
.rule-item__d { font-size: 0.84rem; color: var(--haze); line-height: 1.5; margin: 0.25rem 0 0; }

/* --- FAQ ---------------------------------------------------------------
   Answers are visible by default, never behind an accordion. A collapsed
   answer is worth less to an answer engine and to a reader skimming for one
   fact, and the JS cost buys nothing here.
   ------------------------------------------------------------------------ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }

.faq__item {
  display: grid; gap: 0.55rem;
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 880px) {
  .faq__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--gut); }
}

.faq__q {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.25; letter-spacing: 0; margin: 0;
  color: var(--shell); text-wrap: balance;
}
.faq__a {
  margin: 0; font-size: 0.98rem; line-height: 1.62;
  color: color-mix(in srgb, var(--shell) 74%, var(--haze));
}
.faq__a strong { color: var(--accent); font-weight: 500; }
.faq__a + .faq__a { margin-top: 0.7rem; }

/* --- Ledger ------------------------------------------------------------
   The platform's whole commercial case is an arithmetic result, so it is set
   as a tally that adds up rather than as a marketing claim: three premises,
   a rule, a total. --------------------------------------------------------- */
.ledger {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 90% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    var(--abyss-hi);
  padding: clamp(1.5rem, 3.2vw, 2.8rem);
  display: grid; gap: clamp(1.4rem, 3vw, 2.1rem);
}

.ledger__rows { display: flex; flex-direction: column; margin: 0; }

.ledger__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.4rem 1.1rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
}
.ledger__row:first-child { border-top: 0; }

.ledger__n {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1; color: var(--haze);
  font-variant-numeric: tabular-nums; margin: 0;
}
.ledger__row dd { margin: 0; }
.ledger__row b {
  display: block; font-family: var(--body); font-weight: 500;
  font-size: 1rem; line-height: 1.3; color: var(--shell);
}
.ledger__row span {
  display: block; font-size: 0.88rem; line-height: 1.5;
  color: var(--haze); margin-top: 0.22rem;
}

/* the total: separated by a heavier rule, and the only lit row */
.ledger__row--total {
  border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  margin-top: 0.35rem; padding-top: 1.3rem;
}
.ledger__row--total .ledger__n { color: var(--accent); }
.ledger__row--total b { color: var(--accent); }
.ledger__row--total span { color: color-mix(in srgb, var(--shell) 78%, var(--haze)); }

.ledger__foot {
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--haze-dim); margin: 0;
}

/* --- Figures ------------------------------------------------------------ */
.figures { display: grid; gap: clamp(1.4rem, 3.5vw, 2.4rem); }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.figure__n {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 4.1vw, 3.2rem); letter-spacing: -0.012em;
  line-height: 1; color: var(--shell); font-variant-numeric: tabular-nums;
}
.figure__n em { font-style: normal; color: var(--accent); }
.figure__l { font-family: var(--label); font-size: var(--t-micro); letter-spacing: 0.15em; text-transform: uppercase; color: var(--haze-dim); margin-top: 0.7rem; display: block; }

/* --- Trust band --------------------------------------------------------- */
.trust { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (min-width: 800px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust__item { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.3rem; border-top: 1px solid var(--line-hi); }
.trust__mark { width: 26px; height: 26px; color: var(--accent); }

/* --- Split feature ------------------------------------------------------ */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--flip > .split__media { order: -1; }
@media (min-width: 940px) { .split--flip > .split__media { order: 1; } }
.split__media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--abyss-hi);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Captions sit over pale coral floor as often as open water, so the scrim
   has to carry them in the bright case, not just the dark one. */
.split__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.15rem 1rem;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--abyss) 58%, transparent) 42%,
    color-mix(in srgb, var(--abyss) 94%, transparent) 100%);
  font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--shell) 86%, var(--haze));
}

/* --- Steps (a real sequence: browse → cart → pay → confirmed) ----------- */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { background: var(--abyss-hi); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.step__n { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--accent); }
.step__t { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin: 0; letter-spacing: -0.015em; }
.step__d { font-size: 0.86rem; color: var(--haze); line-height: 1.5; margin: 0; }

/* --- Islands table-ish list --------------------------------------------- */
.isles { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.isle {
  position: relative;
  display: grid; gap: 0.5rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.35s var(--ease);
}

/* Hover ------------------------------------------------------------------
   Two tiers on purpose. Every row acknowledges the cursor so the list feels
   live, but only rows that actually navigate get the accent edge, the
   colour shift and the arrow — six of the seven islands have no destination
   yet, and a full affordance on those would promise a click that does
   nothing. :focus-within mirrors :hover so keyboard users get the same read.
   ------------------------------------------------------------------------ */
.isle::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.4s var(--ease);
}

/* tier 1 — any row */
.isle:hover { background: color-mix(in srgb, var(--raise) 42%, transparent); }
.isle:hover .isle__note { color: color-mix(in srgb, var(--shell) 88%, var(--haze)); }

/* tier 2 — rows that go somewhere */
.isle--linked { cursor: pointer; }
.isle--linked:hover,
.isle--linked:focus-within { background: color-mix(in srgb, var(--raise) 72%, transparent); }
.isle--linked:hover::before,
.isle--linked:focus-within::before { transform: scaleY(1); }
.isle--linked:hover .isle__name,
.isle--linked:focus-within .isle__name { color: var(--accent); }
.isle--linked:hover .price,
.isle--linked:focus-within .price { color: var(--shell); }

.isle__name { transition: color 0.3s var(--ease); }
.isle__note { transition: color 0.3s var(--ease); }
.price { transition: color 0.3s var(--ease); }

.isle__go {
  display: inline-block; margin-left: 0.45ch;
  color: var(--accent);
  opacity: 0; transform: translateX(-7px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.isle--linked:hover .isle__go,
.isle--linked:focus-within .isle__go { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .isle::before, .isle__go { transition: none; }
}
@media (min-width: 860px) {
  .isle { grid-template-columns: 12rem minmax(0, 1fr) 11rem 7rem; padding-inline: 0.5rem; }
}
.isle__name { font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0; }
.isle__atoll { font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--haze-dim); display: block; margin-top: 0.25rem; }
.isle__note { font-size: 0.93rem; color: var(--haze); line-height: 1.5; margin: 0; }
.isle__link::after { content: ""; position: absolute; inset: 0; }

/* --- Form --------------------------------------------------------------- */
.form { display: grid; gap: 1.4rem; }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field > label { font-family: var(--label); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--haze); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--shell);
  background: var(--abyss); border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm); padding: 0.8rem 0.95rem;
  min-height: 46px; width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--haze) 50%),
                    linear-gradient(135deg, var(--haze) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem;
}
.field option { background: var(--abyss-hi); color: var(--shell); }
.field input::placeholder, .field textarea::placeholder { color: var(--haze-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--abyss-hi); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field__err { font-family: var(--label); font-size: var(--t-micro); letter-spacing: 0.05em; color: #F5A99F; min-height: 1.15em; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #C2564A; }

/* Submission status. Empty at rest so it takes no space until it speaks. */
.form__status {
  font-family: var(--label); font-size: 0.88rem; line-height: 1.5;
  color: var(--haze); margin: 0;
}
.form__status:empty { display: none; }
.form__status[data-kind="error"] { color: #F5A99F; }

.form[aria-busy="true"] .btn[type="submit"] { opacity: 0.7; cursor: progress; }
.btn[disabled] { pointer-events: none; }

.form__note { font-family: var(--label); font-size: var(--t-micro); letter-spacing: 0.05em; color: var(--haze-dim); line-height: 1.75; }
.form__done {
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: color-mix(in srgb, var(--accent) 8%, var(--abyss-hi));
  display: flex; flex-direction: column; gap: 0.7rem;
}

.channels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.channel {
  background: var(--abyss-hi); padding: 1.4rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  color: inherit; text-decoration: none;
  transition: background 0.35s var(--ease);
}
a.channel:hover, a.channel:focus-visible { background: var(--raise); }
a.channel:hover .channel__v { color: var(--accent); }
.channel__v { transition: color 0.3s var(--ease); overflow-wrap: anywhere; }
.channel:hover { background: var(--raise); }
.channel__v { font-family: var(--mono); font-size: 0.9rem; color: var(--shell); }

/* --- Closing call ------------------------------------------------------- */
.call { position: relative; overflow: hidden; }
.call__glow {
  position: absolute; left: 50%; top: -60%;
  width: min(140vw, 1400px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%,
    color-mix(in srgb, var(--ocean) 12%, transparent) 36%,
    transparent 64%);
}
.call__inner { position: relative; display: grid; gap: 1.5rem; justify-items: center; text-align: center; }

/* --- Masthead (interior pages) ------------------------------------------ */
.masthead { position: relative; isolation: isolate; overflow: hidden; }
/* With a photograph behind it the masthead is tall enough that the type begins
   around the midpoint, leaving the top half of the image uncovered. */
.masthead:not(.masthead--plain) {
  display: grid; align-items: end;
  min-height: clamp(30rem, 84vh, 48rem);
}
/* The bottom padding clears two things: the credit pinned at the foot of the
   frame, and the 42px the block sinks on scroll. Without the allowance the
   byline slid down onto the credit as soon as the page moved. */
.masthead:not(.masthead--plain) .masthead__inner { padding-block: clamp(2.4rem, 5vw, 3.6rem) clamp(4.6rem, 8vw, 6rem);  text-align: center; justify-items: center; margin-inline: auto;}
.masthead__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.masthead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.masthead__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Vertical, not diagonal. The old 100deg wash darkened one side of the frame,
     which made sense when the type sat hard left and reads as a smudge now that
     it is centred. The weight belongs under the words: the top stays light so
     the photograph is visible, and the ramp begins near the midpoint where the
     text starts. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--abyss) 30%, transparent) 0%,
    color-mix(in srgb, var(--abyss) 8%, transparent) 20%,
    color-mix(in srgb, var(--abyss) 24%, transparent) 34%,
    color-mix(in srgb, var(--abyss) 70%, transparent) 44%,
    color-mix(in srgb, var(--abyss) 85%, transparent) 56%,
    color-mix(in srgb, var(--abyss) 93%, transparent) 70%,
    color-mix(in srgb, var(--abyss) 98%, transparent) 86%,
    var(--abyss) 100%);
}
.masthead__inner { position: relative; text-shadow: 0 2px 26px rgba(2, 10, 18, 0.72); display: grid; gap: 1.3rem; padding-block: clamp(3.5rem, 8vw, 6rem); max-width: 52rem; text-align: center; justify-items: center; margin-inline: auto; }
.masthead--plain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(159,191,212,0.05), transparent 92%);
}

/* --- Footer ------------------------------------------------------------- */
.foot {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, #041D2F 55%, transparent) 0%,
    #041D2F 22%, #020E19 100%);
}
.foot__grid { display: grid; gap: 2.2rem; padding-block: clamp(2.6rem, 5.5vw, 4rem); }
@media (min-width: 860px) { .foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--gut); } }
.foot__logo { height: 96px; width: auto; }
.foot__col { display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-start; }
.foot__link { font-size: 0.92rem; color: var(--haze); min-height: 32px; display: inline-flex; align-items: center; transition: color 0.25s var(--ease); }
.foot__link:hover { color: var(--accent); }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.3rem; border-top: 1px solid var(--line);
  font-family: var(--label); font-size: var(--t-micro); letter-spacing: 0.09em; color: var(--haze-dim);
}

/* --- Utilities ---------------------------------------------------------- */
.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--abyss);
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.75rem 1.1rem; border-radius: var(--radius-sm);
  transition: top 0.25s var(--ease);
}
.skip:focus { top: 0.5rem; }

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

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

/* --- Journal: index cards, post pages, byline and sharing ---------------- */

/* Centred article column. The header block and the body share one measure and
   one centre line — the detachment earlier came from the header sitting left
   while the body centred itself, not from centring as such. */
.shell--narrow { max-width: var(--max); }
.shell--narrow > * { max-width: 46rem; margin-inline: auto; }

.pgrid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 760px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--abyss-hi);
  text-decoration: none;
  color: inherit;
  transition: background 0.4s var(--ease);
}
.pcard:hover { background: var(--raise); }
.pcard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__body {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
.pcard__meta,
.pcard__author {
  font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--haze-dim); margin: 0;
}
.pcard__author { margin-top: auto; padding-top: 0.9rem; color: var(--accent); }
.pcard__title {
  font-family: var(--display); font-weight: 400; font-size: 1.34rem;
  letter-spacing: -0.02em; line-height: 1.16; margin: 0; color: var(--shell);
  text-wrap: balance;
}
.pcard__excerpt { color: var(--haze); line-height: 1.6; margin: 0; font-size: 0.94rem; }

/* --- the post itself ---------------------------------------------------- */

.post__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 1.1rem;
  color: var(--shell); text-wrap: balance; max-width: 20ch;
}
/* The post hero: tall enough to read as an image, short enough that the
   article still begins within the first screen. The header sinks and dims on
   scroll via the shared .masthead__inner treatment, so what is left as the
   reader moves down is the text. */
.post__head { min-height: clamp(24rem, 58vh, 34rem); display: grid; align-items: end; }
.post__head .masthead__inner {
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  max-width: 46rem; margin-inline: auto;
  text-align: center; justify-items: center;
}
.post__head .post__title { max-width: 22ch; margin-inline: auto; }
.post__head .lede { margin-inline: auto; }
/* The byline is a flex row, so centring the text is not enough. */
.post__head .byline {
  justify-content: center;
  border-top-color: rgba(157, 191, 214, 0.28);
  width: 100%;
}

/* Body copy stays left-aligned inside the centred column: centred prose is
   harder to read line to line, because every line starts in a new place. */
.post__body { text-align: left; }
.share { justify-content: center; }
.post__back { text-align: center; }
.sensei__foot { justify-content: center; }
.post__body > * + * { margin-top: 1.15rem; }
.post__body h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.72rem;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--shell);
  margin-top: 2.4rem;
}
.post__body h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
  color: var(--shell); margin-top: 1.9rem;
}
.post__body blockquote {
  margin: 1.8rem 0; padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
  color: var(--sand); font-size: 1.06rem; line-height: 1.6;
}
.post__body img { border-radius: var(--radius); border: 1px solid var(--line); }
.post__body ul, .post__body ol { padding-left: 1.2rem; color: var(--haze); line-height: 1.7; }
.post__body li + li { margin-top: 0.4rem; }
.post__back { margin-top: 2.6rem; }

/* --- byline: the author is meant to be seen ----------------------------- */

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.08em; color: var(--haze-dim);
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.byline > * + *::before {
  content: "·"; margin-right: 0.9rem; color: var(--line-hi);
}
.byline__name { color: var(--sand); letter-spacing: 0.12em; text-transform: uppercase; }
.byline__role { color: var(--haze); }

/* --- share -------------------------------------------------------------- */

.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem;
  margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.share__label {
  font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--haze-dim); margin: 0;
}
.share__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.share__btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: transparent; color: var(--haze); cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease);
}
.share__btn:hover {
  color: var(--abyss); background: var(--accent); border-color: var(--accent);
}
.share__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.share__btn--copy svg { stroke-linecap: round; }
/* The X, Facebook, LinkedIn and WhatsApp marks are solid glyphs, not strokes. */
.share__row > a svg { fill: currentColor; stroke: none; }
.share__btn.is-copied { color: var(--abyss); background: var(--accent); border-color: var(--accent); }

/* --- Shark Sensei: the academy note that closes every post --------------- */

.sensei {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--turq) 7%, var(--abyss-hi)),
      var(--abyss-hi) 70%);
  display: flex; flex-direction: column; gap: 1rem;
}
.sensei__eyebrow {
  font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--turq); margin: 0;
}
.sensei__title {
  font-family: var(--display); font-weight: 400; font-size: 1.45rem;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--shell);
  margin: 0; text-wrap: balance;
}
.sensei__lede { margin: 0; color: var(--haze); line-height: 1.65; font-size: 0.96rem; }
.sensei__lede a { color: var(--turq); text-underline-offset: 3px; }

.sensei__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 680px) { .sensei__grid { grid-template-columns: 1fr 1fr; } }

.sensei__card {
  background: var(--abyss); padding: 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  text-decoration: none; color: inherit;
  transition: background 0.35s var(--ease);
}
.sensei__card:hover, .sensei__card:focus-visible { background: var(--raise); }
.sensei__k {
  font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--haze-dim); margin: 0;
}
.sensei__n {
  font-family: var(--label); font-size: 0.98rem; font-weight: 500;
  color: var(--shell); margin: 0; letter-spacing: 0.01em;
}
.sensei__card:hover .sensei__n { color: var(--turq); }
.sensei__d { margin: 0; color: var(--haze); font-size: 0.88rem; line-height: 1.55; }
.sensei__req {
  margin-top: auto; padding-top: 0.6rem;
  font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--haze-dim);
}
.sensei__foot { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }

/* Inline mentions inside post copy pick up the accent without shouting. */
.post__body a { color: var(--turq); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post__body a:hover { color: var(--shell); }

/* --- Figures inside a post ---------------------------------------------- */

.post__body figure {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.post__body figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.post__body figcaption {
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.05em; line-height: 1.6; color: var(--haze-dim);
  padding-left: 0.85rem; border-left: 2px solid var(--turq);
}
/* A portrait frame would run past the fold on its own, so it is capped and
   centred rather than filling the measure. */
.post__body figure.is-portrait img { max-width: 26rem; margin-inline: auto; }

/* --- Centred layout -----------------------------------------------------
   The page is built on one centre line: heading blocks sit on it, and only
   running prose and card interiors stay left-aligned, because centred body
   copy starts every line in a different place and slows reading. */

.hero__readout,
.hero__actions { justify-content: center; }
.hero__readout { width: 100%; }

/* Section heads become one centred column rather than a heading with an aside
   pushed to the right edge. */
.sec-head {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 1rem;
}
.sec-head__aside {
  justify-self: center;
  text-align: center;
  max-width: 56ch;
}
.sec-head .stack { align-items: center; }

/* Heading blocks inside split sections sit on the centre line; the paragraphs
   under them do not. */
.split .stack { text-align: center; align-items: center; }
.split .stack .prose { text-align: left; align-self: stretch; }

/* The tiger-day ledger and the limits panel lead with a centred heading. */
.ledger > .stack,
.rules > .stack { text-align: center; align-items: center; }
.ledger__foot { text-align: center; }

/* Card and panel interiors keep their own alignment: a centred label above a
   left-aligned value reads as a mistake rather than a choice. */
.card, .dive, .isle, .rule-item, .step, .pcard__body, .channel, .sensei__card { text-align: left; }

/* Type over photography: the scrim handles the frame, this handles the words.
   A soft pool behind the text block keeps the headline legible over a bright
   seabed without flattening the rest of the picture. */
.masthead:not(.masthead--plain) .shell,
.hero .shell { position: relative; }
.masthead:not(.masthead--plain) .shell::before,
.hero .shell::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  bottom: -2rem; width: min(62rem, 108%); height: 88%;
  background: radial-gradient(ellipse 62% 58% at 50% 72%,
    color-mix(in srgb, var(--abyss) 70%, transparent) 0%,
    color-mix(in srgb, var(--abyss) 42%, transparent) 52%,
    transparent 76%);
}
.masthead__inner, .hero__inner { z-index: 1; }

/* --- Photo credit -------------------------------------------------------
   Sits in the corner of the header it belongs to. Small, but a credit that
   cannot be read is not a credit. */
.media-credit {
  position: absolute; right: var(--gut); bottom: 0.9rem; z-index: 2;
  margin: 0; font-family: var(--label); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--haze) 78%, transparent);
  text-shadow: 0 1px 12px rgba(2, 10, 18, 0.9);
  pointer-events: none;
}
.media-credit span { color: var(--shell); }
/* Narrow screens keep it pinned to the foot of the header rather than letting
   it fall back into the flow, where it landed in the middle of the picture. */
@media (max-width: 640px) {
  .media-credit { left: 0; right: 0; bottom: 0.6rem; text-align: center; }
}


/* --- Glass header over the picture --------------------------------------
   A blurred panel needs something behind it. The header used to sit above the
   masthead in the flow, so the only thing it refracted was the page ground and
   the glass was invisible. The first band now slides up underneath it: the
   photograph runs to the top of the window and the header floats on it.
   Type is unaffected — it is anchored to the bottom of these blocks. */
:root { --rail-h: 86px; }
@media (max-width: 900px) { :root { --rail-h: 74px; } }

main > .hero:first-child,
main > .masthead:not(.masthead--plain):first-child {
  margin-top: calc(-1 * var(--rail-h));
}
/* keep the visible area the same once the top is tucked under the header */
main > .masthead:not(.masthead--plain):first-child { min-height: calc(clamp(30rem, 84vh, 48rem) + var(--rail-h)); }


/* The wordmark's second line sits on glass, over whatever the header
   photograph is doing. Turquoise is mid-luminance: measured at 2.81:1 over a
   bright sky, and no realistic glass tint fixes that without killing the blur.
   A light cyan keeps the brand cast and clears AA. The footer mark, which sits
   on a flat dark ground, keeps the pure accent. */
.rail .wordmark__txt small { color: color-mix(in srgb, var(--accent) 22%, var(--shell)); }

/* Nav links sit on glass over whatever the header photograph is doing. --haze
   measured 3.7-3.8:1 against a blurred bright sky; lifted toward --shell it
   clears AA while staying distinct from the current-page and hover states,
   which are full --shell. */
/* All nav links sit at full --shell. At a 32% panel the current-page link was
   already white and still measured 4.37:1 over a bright blurred sky, so tinting
   the others at all put them below AA. State is carried by the accent underline
   (.rail__link::after), which is the clearer signal anyway. */
.rail__link { color: var(--shell); }
.rail__link:not([aria-current="page"]):not(:hover) { opacity: 0.92; }

/* Credit inside a figure caption: same line as the caption, set apart by
   colour rather than by a break, so it reads as an attribution and not as
   part of the sentence. */
.fig-credit {
  font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--haze-dim);
  white-space: nowrap; margin-left: 0.5rem;
}
.foot__credit {
  font-family: var(--label); font-size: var(--t-micro);
  letter-spacing: 0.06em; color: var(--haze-dim); margin: 0;
}

/* --- Where the header hands over to the page ----------------------------
   Two problems met at this line. The content after a header had no top
   padding at all, so the first paragraph began the moment the picture ended.
   And the header's scrim resolves to --abyss while the page gradient at that
   scroll position is a lighter blue, so the two met at a visible step.
   Room, and a dissolve. */
.post__head + .shell--narrow,
main > .hero:first-child + section,
main > .masthead:not(.masthead--plain):first-child + section {
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
}
.post__head + .shell--narrow::before,
main > .hero:first-child + section::before,
main > .masthead:not(.masthead--plain):first-child + section::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1;
  height: clamp(5rem, 11vw, 10rem); pointer-events: none;
  background: linear-gradient(180deg,
    var(--abyss) 0%,
    color-mix(in srgb, var(--abyss) 72%, transparent) 34%,
    color-mix(in srgb, var(--abyss) 34%, transparent) 64%,
    transparent 100%);
}

/* --- Hero breathing ------------------------------------------------------
   A slow zoom in over 6s, easing back over 4s, on a 10s loop.

   It animates the independent `scale` property rather than `transform`,
   because the parallax writes an inline `transform` to these same images on
   every scroll frame — an animation on `transform` would simply be overwritten.
   The two compose: parallax keeps its translate and its 1.22 crop scale, and
   this rides on top of it. */
@keyframes heroBreathe {
  0%   { scale: 1;     animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  60%  { scale: 1.055; animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); }
  100% { scale: 1; }
}

.hero__media img,
.masthead__media img {
  animation: heroBreathe 10s infinite;
  will-change: scale;
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .masthead__media img { animation: none; scale: 1; }
}

/* --- The header gets out of the way ------------------------------------- */
.rail { transform: translate3d(0, 0, 0); }
.rail[data-hidden="true"] { transform: translate3d(0, -100%, 0); }

/* A keyboard user tabbing into the bar must see it, and :focus-within does that
   declaratively — no event to miss. The JS focusin handler stays as a second
   line, but this is the one that is guaranteed to fire. */
.rail[data-hidden="true"]:focus-within { transform: translate3d(0, 0, 0); }

/* The transform joins the existing transition list rather than replacing it,
   so the glass tint and the hairline keep animating too. */
.rail {
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), transform 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}