/* ==========================================================================
   Kairos v6 — design tokens
   Identity carried over from v5, restated in oklch with a display-p3 upgrade.
   ========================================================================== */

:root {
  /* --- Colour -------------------------------------------------------------
     sRGB hex first (universal fallback), then oklch, then p3 for wide-gamut.
     Browsers take the last declaration they understand. */

  --ink:        #0A1E2C;
  --ink-soft:   #274050;
  --sea:        #12566B;
  --sea-deep:   #0B3A4A;
  --foam:       #F4F8F8;
  --canvas:     #EAE3D2;
  --brass:      #C19A3F;
  --brass-deep: #9C7729;

  --ink:        oklch(0.24 0.045 236);
  --ink-soft:   oklch(0.37 0.042 236);
  --sea:        oklch(0.42 0.075 220);
  --sea-deep:   oklch(0.31 0.062 224);
  --foam:       oklch(0.97 0.005 200);
  --canvas:     oklch(0.91 0.028 88);
  --brass:      oklch(0.69 0.115 82);
  --brass-deep: oklch(0.56 0.098 80);

  /* Surfaces */
  --panel:      color-mix(in oklab, var(--foam) 92%, transparent);
  --panel-edge: color-mix(in oklab, var(--foam) 50%, transparent);
  --hairline:   color-mix(in oklab, var(--ink) 16%, transparent);
  --scrim:      color-mix(in oklab, var(--ink) 55%, transparent);

  /* --- Type ---------------------------------------------------------------
     Wordmark stays Marcellus (option b — the mark is the identity).
     Headlines move to Fraunces variable: opsz does real work 1rem -> 5rem.
     Body is Inter variable. HUD/eyebrows/log stay IBM Plex Mono. */

  --font-mark:    'Marcellus', Georgia, serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Kairos Greek', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fraunces is shipped with opsz + wght only, so optical sizing is handled by
     font-optical-sizing:auto rather than an explicit variation setting. */
  --display-axes: normal;

  /* Fluid modular scale, ~1.25 minor third at small / ~1.333 at large.
     Clamped against viewport so nothing needs a media query. */
  --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.46vw, 1.48rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.53rem + 0.99vw, 2.31rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.42vw, 2.89rem);
  --step-5:  clamp(2.49rem, 2.08rem + 2.03vw, 3.61rem);
  --step-6:  clamp(2.99rem, 2.42rem + 2.85vw, 4.52rem);
  --step-7:  clamp(3.58rem, 2.79rem + 3.96vw, 5.65rem);

  --lh-tight: 1.06;
  --lh-head:  1.14;
  --lh-body:  1.6;

  --tracking-mark:  0.42em;   /* the wordmark's signature */
  --tracking-eyebrow: 0.3em;
  --tracking-mono:  0.16em;

  /* --- Space (same fluid principle) --------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.59rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.22vw, 0.89rem);
  --space-s:   clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
  --space-m:   clamp(1.50rem, 1.41rem + 0.45vw, 1.78rem);
  --space-l:   clamp(2.00rem, 1.88rem + 0.61vw, 2.38rem);
  --space-xl:  clamp(3.00rem, 2.82rem + 0.91vw, 3.56rem);
  --space-2xl: clamp(4.00rem, 3.76rem + 1.21vw, 4.75rem);
  --space-3xl: clamp(6.00rem, 5.64rem + 1.82vw, 7.13rem);

  /* --- Motion -------------------------------------------------------------
     Named easings so the whole site moves with one hand. */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);      /* reveals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* transitions */
  --ease-sail: cubic-bezier(0.34, 1.24, 0.64, 1);   /* the sail-fill overshoot */
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  700ms;

  /* --- Misc --------------------------------------------------------------- */
  --radius:    4px;
  --measure:   66ch;
  --shadow-panel: 0 24px 60px color-mix(in oklab, var(--ink) 35%, transparent);
  --focus-ring: 2px solid var(--brass);
}

/* Wide-gamut upgrade. This is where the brass and sea visibly out-class
   a competitor's sRGB on a MacBook or iPhone. */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --sea:        oklch(0.42 0.095 220);
      --sea-deep:   oklch(0.31 0.080 224);
      --brass:      oklch(0.69 0.145 82);
      --brass-deep: oklch(0.56 0.125 80);
    }
  }
}

/* --------------------------------------------------------------------------
   Fonts. Variable, self-hosted, subset to Latin + Croatian diacritics
   (č ć ž š đ) + the Greek καιρός. size-adjust on the fallbacks keeps CLS ~0
   during the swap.
   -------------------------------------------------------------------------- */

/* Fraunces — opsz + wght axes only. The SOFT/WONK axes are not used by this
   design, and dropping them saved ~78 KB. opsz genuinely works across the
   1rem -> 5rem range the site sets. */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-optical-sizing: auto;
  font-display: swap;
}
/* Italic is set exactly once ("One captain, both decks.") so it is subset to
   that line plus the lowercase alphabet. */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-var-italic.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: italic;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* The wordmark: six letters of Marcellus and nothing else (1.4 KB).
   font-display:block so the mark never flashes in a fallback face. */
@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-mark.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
  unicode-range: U+004B, U+0041, U+0049, U+0052, U+004F, U+0053; /* K A I R O S */
}
/* καιρός in the hero eyebrow — the Latin mono subset has no Greek, so this
   2.4 KB face covers exactly those six characters. */
@font-face {
  font-family: 'Kairos Greek';
  src: url('../assets/fonts/greek-kairos.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0370-03FF;
}

/* Metric-matched fallbacks — measured against the real faces so swapping in
   doesn't shift layout. */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Kairos v6 — layout, components, motion
   Concatenated after tokens.css by build.py into assets/site.css
   ========================================================================== */

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-text),'Inter-fallback',system-ui,sans-serif;
  font-size:var(--step-0);line-height:var(--lh-body);
  color:var(--ink);background:var(--ink);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:var(--focus-ring);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--ink)}

/* ---------- the scene canvas sits behind everything ---------- */
#sea{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* Poster paints instantly; the scene fades over it once it's ready.
   This is what keeps LCP off the critical path of a 700 KB renderer. */
#poster{
  position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:opacity 900ms var(--ease-out);
}
body.scene-ready #poster{opacity:0}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-s) var(--space-l);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             backdrop-filter var(--dur-base) var(--ease-out);
  view-transition-name:site-header;
}
header.stuck{
  background:color-mix(in oklab,var(--ink) 84%,transparent);
  border-bottom-color:color-mix(in oklab,var(--brass) 28%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.wordmark{
  font-family:var(--font-mark);font-size:1.25rem;
  letter-spacing:var(--tracking-mark);text-indent:var(--tracking-mark);
  color:var(--foam);text-decoration:none;
  view-transition-name:wordmark;
}
nav ul{display:flex;gap:var(--space-m);list-style:none;align-items:center}
nav a{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--foam);text-decoration:none;opacity:.82;
  transition:opacity var(--dur-fast),color var(--dur-fast);
}
nav a:hover,nav a:focus-visible{opacity:1;color:var(--brass)}
nav a[aria-current="page"]{color:var(--brass);opacity:1}
@media(max-width:860px){nav li.hide-m{display:none}}

/* ---------- HUD: a working instrument ---------- */
.hud{
  position:fixed;left:var(--space-l);bottom:var(--space-m);z-index:30;
  display:flex;align-items:center;gap:var(--space-xs);
  color:var(--foam);font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.14em;pointer-events:none;
  text-shadow:0 1px 10px color-mix(in oklab,var(--ink) 70%,transparent);
}
.hud svg{width:42px;height:42px;flex:none}
.hud .needle{transform-origin:50% 50%;transition:transform 900ms var(--ease-out)}
.hud__read{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:719px){
  .hud{left:var(--space-s);bottom:var(--space-s)}
  .hud svg{width:32px;height:32px}
}

/* progress rail — pure CSS, tied to document scroll */
.rail{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:31;
  background:var(--brass);transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
  .rail{animation:rail linear;animation-timeline:scroll(root block)}
  @keyframes rail{to{transform:scaleX(1)}}
}

.cue{
  position:fixed;bottom:var(--space-m);left:50%;translate:-50% 0;z-index:30;
  color:var(--foam);font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.22em;text-align:center;pointer-events:none;
  transition:opacity var(--dur-slow);
}
.cue__chev{display:block;font-size:1rem;letter-spacing:0;animation:dip 2.4s ease-in-out infinite}
@keyframes dip{0%,100%{translate:0 0}50%{translate:0 7px}}
body.sailing .cue{opacity:0}
@media(max-width:719px){.cue{display:none}}

/* ---------- sections ---------- */
main{position:relative;z-index:10}
.leg{
  min-height:105svh;display:flex;align-items:center;
  padding:var(--space-3xl) 6vw;
}
.leg--center{justify-content:center;text-align:center}
.leg--left{justify-content:flex-start}
.leg--right{justify-content:flex-end}

/* ---------- hero ---------- */
.hero__inner{max-width:52rem;position:relative;z-index:1}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--canvas);margin-bottom:var(--space-m);
  text-shadow:0 1px 10px color-mix(in oklab,var(--ink) 60%,transparent);
}
h1{
  font-family:var(--font-display),'Fraunces-fallback',Georgia,serif;
  font-variation-settings:var(--display-axes);
  font-weight:400;font-size:var(--step-7);line-height:var(--lh-tight);
  letter-spacing:-0.015em;color:var(--foam);text-wrap:balance;
  text-shadow:0 2px 26px color-mix(in oklab,var(--ink) 50%,transparent);
}
h1 span{display:block}
h1 .brass{color:var(--brass);font-style:italic}
.hero__sub{
  margin:var(--space-m) auto 0;max-width:34rem;
  font-size:var(--step-1);font-weight:300;line-height:1.55;color:var(--foam);
  text-shadow:0 1px 14px color-mix(in oklab,var(--ink) 60%,transparent);
}
.hero__ctas{margin-top:var(--space-l);display:flex;gap:var(--space-xs);justify-content:center;flex-wrap:wrap}

/* hero scrim — measured, not eyeballed. Keeps foam-on-sky at AA. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--ink) 40%,transparent) 0%,
    color-mix(in oklab,var(--ink) 18%,transparent) 38%,
    color-mix(in oklab,var(--ink) 56%,transparent) 100%);
}
.hero{position:relative;isolation:isolate}

/* ---------- the course plot ---------- */
.plot{position:absolute;inset:0;z-index:0;pointer-events:none}
.plot__line{
  fill:none;stroke:var(--brass);stroke-width:1.5;stroke-dasharray:4 5;
  stroke-linecap:round;opacity:.85;stroke-dashoffset:1200;
  animation:draw 3.2s var(--ease-out) .5s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.plot__fix,.plot__dest{fill:none;stroke:var(--brass);stroke-width:1.5;opacity:0;
  animation:pop .6s var(--ease-sail) forwards;transform-box:fill-box;transform-origin:center}
.plot__fix{animation-delay:.3s}
.plot__dest{animation-delay:3.4s}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:.9;scale:1}}
.plot__label{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  fill:var(--brass);opacity:0;animation:fade .8s ease forwards}
.plot__label--a{animation-delay:.7s}
.plot__label--b{animation-delay:3.7s}
@keyframes fade{to{opacity:.9}}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:var(--step--2);
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:var(--radius);padding:1rem 1.7rem;display:inline-block;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             translate var(--dur-base) var(--ease-out);
}
.btn:hover{translate:0 -2px}
.btn--solid{background:var(--brass);color:var(--ink);border:1px solid var(--brass);font-weight:500}
.btn--solid:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--foam)}
.btn--ghost{border:1px solid color-mix(in oklab,var(--foam) 60%,transparent);color:var(--foam)}
.btn--ghost:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- panel (content over the sea) ---------- */
.panel{
  width:min(34rem,100%);
  background:var(--panel);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--panel-edge);border-top:3px solid var(--brass);
  border-radius:var(--radius);padding:var(--space-l);
  box-shadow:var(--shadow-panel);
}
.panel--wide{width:min(56rem,100%)}
.leg__marker{
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);margin-bottom:var(--space-s);
}
h2{
  font-family:var(--font-display),'Fraunces-fallback',Georgia,serif;
  font-variation-settings:var(--display-axes);
  font-weight:400;font-size:var(--step-4);line-height:var(--lh-head);
  letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;
}
h3{
  font-family:var(--font-display),'Fraunces-fallback',Georgia,serif;
  font-variation-settings:var(--display-axes);
  font-weight:400;font-size:var(--step-1);line-height:1.2;color:var(--ink);
}
.panel p{margin-top:var(--space-s);color:var(--ink-soft);font-weight:300;max-width:var(--measure)}
.panel p + p{margin-top:var(--space-xs)}
.lede{font-size:var(--step-1);color:var(--ink)}

.byline{
  margin-top:var(--space-m);padding-top:var(--space-s);
  border-top:1px solid var(--hairline);
}
.byline strong{font-family:var(--font-display);font-variation-settings:var(--display-axes);
  font-weight:400;font-size:var(--step-1);display:block;color:var(--ink)}
.byline span{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.14em;
  color:var(--brass-deep);text-transform:uppercase}

/* ---------- service cards ---------- */
.cards{
  display:grid;gap:var(--space-m);width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  margin-top:var(--space-l);
}
.card{
  container-type:inline-size;
  background:var(--foam);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;display:block;
  box-shadow:0 1px 2px color-mix(in oklab,var(--ink) 6%,transparent);
  transition:translate 400ms var(--ease-out),box-shadow 400ms var(--ease-out),
             border-color 400ms var(--ease-out);
}
.card:hover,.card:focus-visible{
  translate:0 -4px;
  border-color:color-mix(in oklab,var(--brass) 55%,transparent);
  box-shadow:0 18px 40px color-mix(in oklab,var(--ink) 16%,transparent);
}
.card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sea-deep)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:scale 700ms var(--ease-out)}
.card:hover .card__media img{scale:1.04}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,color-mix(in oklab,var(--ink) 55%,transparent) 100%);
}
.card__kicker{
  position:absolute;left:var(--space-s);bottom:var(--space-2xs);z-index:1;
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);
}
.card__body{padding:var(--space-m)}
.card__body p{margin-top:var(--space-2xs);color:var(--ink-soft);
  font-size:var(--step--1);font-weight:300;line-height:1.55}
.card__cta{
  margin-top:var(--space-s);display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-deep);
}
.card__cta svg{transition:translate 300ms var(--ease-out)}
.card:hover .card__cta svg{translate:5px 0}
@container (min-width: 26rem){ .card__body{padding:var(--space-l)} }

/* ---------- the route (3 steps) ---------- */
.route{display:grid;gap:var(--space-m);margin-top:var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.step{padding:var(--space-m);border:1px solid var(--hairline);border-radius:var(--radius);
  border-top:2px solid var(--brass);background:color-mix(in oklab,var(--canvas) 22%,var(--foam))}
.step__n{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);display:block;margin-bottom:var(--space-2xs)}
.step p{margin-top:var(--space-2xs);font-size:var(--step--1)}

/* ---------- method spec (makes the route concrete) ---------- */
.spec{
  margin-top:var(--space-s);padding-top:var(--space-xs);
  border-top:1px solid var(--hairline);
  display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--space-xs);
  font-size:var(--step--1);
}
.spec dt{
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-deep);white-space:nowrap;padding-top:.15em;
}
.spec dd{color:var(--ink-soft);font-weight:300;line-height:1.45}
.route__note{
  margin-top:var(--space-m);padding-top:var(--space-s);
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.06em;
  color:var(--brass-deep);text-transform:none;
}

/* ---------- the chart table (interactive scoping instrument) ---------- */
.plotter{
  display:grid;gap:var(--space-m);margin-top:var(--space-l);text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
}
.plotter__set{border:0;padding:0}
.plotter__set legend{
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-deep);margin-bottom:var(--space-xs);padding:0;
}
.plotter__opts{display:grid;gap:.35rem}
.plotter__opts label{
  display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;
  padding:.55rem .7rem;border:1px solid var(--hairline);border-radius:var(--radius);
  font-size:var(--step--1);color:var(--ink-soft);line-height:1.4;
  transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out),color 200ms var(--ease-out);
}
.plotter__opts label:hover{border-color:color-mix(in oklab,var(--brass) 50%,transparent)}
.plotter__opts input{
  appearance:none;flex:none;width:.85rem;height:.85rem;margin-top:.25rem;border-radius:50%;
  border:1px solid var(--brass-deep);transition:box-shadow 200ms,background 200ms;
}
.plotter__opts input:checked{background:var(--brass);box-shadow:inset 0 0 0 2px var(--foam)}
.plotter__opts label:has(input:checked){
  border-color:var(--brass);color:var(--ink);
  background:color-mix(in oklab,var(--brass) 8%,transparent);
}
.plotter__opts input:focus-visible{outline:var(--focus-ring);outline-offset:2px}

.fix{
  display:block;text-align:left;margin-top:var(--space-l);padding:var(--space-m);
  border:1px solid color-mix(in oklab,var(--brass) 40%,transparent);
  border-left:3px solid var(--brass);border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in oklab,var(--canvas) 30%,var(--foam));
}
.fix__label{
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-deep);display:block;
}
.fix__station{
  display:block;margin-top:.2rem;
  font-family:var(--font-display),'Fraunces-fallback',Georgia,serif;
  font-variation-settings:var(--display-axes);font-weight:400;
  font-size:var(--step-2);line-height:1.15;color:var(--ink);
}
.fix .spec{margin-top:var(--space-s)}
.fix__honest{
  margin-top:var(--space-s);padding-top:var(--space-s);
  border-top:1px dashed color-mix(in oklab,var(--ink) 22%,transparent);
  font-size:var(--step--1);font-weight:300;color:var(--ink-soft);font-style:italic;
}
.fix__honest::before{
  content:"When not to bother — ";font-style:normal;font-family:var(--font-mono);
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-deep);
}
.fix .btn{margin-top:var(--space-m)}
@media (prefers-reduced-motion: no-preference){
  .fix--flash{animation:fix-in 420ms var(--ease-out)}
  @keyframes fix-in{from{opacity:.35;translate:0 5px}to{opacity:1;translate:0 0}}
}

/* ---------- the fleet log ---------- */
.flag{
  margin-top:var(--space-l);padding:var(--space-m);
  border:1px solid color-mix(in oklab,var(--brass) 40%,transparent);
  border-left:3px solid var(--brass);border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in oklab,var(--canvas) 35%,var(--foam));
}
.flag__tag{font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-deep)}
.flag__link{
  display:inline-block;margin-top:var(--space-2xs);
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.12em;
  color:var(--brass-deep);text-decoration:none;border-bottom:1px solid currentColor;
}
.flag__link:hover{color:var(--ink)}

.log{list-style:none;margin-top:var(--space-m);border-top:1px solid var(--hairline)}
.log li{
  display:flex;gap:var(--space-s);align-items:baseline;flex-wrap:wrap;
  padding:var(--space-xs) 0;border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;
  color:var(--ink-soft);
}
.log li b{color:var(--brass-deep);font-weight:400;flex:none;font-size:var(--step--2)}
.log li span{flex:1 1 14rem}
.log li a{
  font-size:var(--step--2);color:var(--brass-deep);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--brass) 45%,transparent);
}
.log li a:hover{color:var(--ink);border-bottom-color:currentColor}
/* status chips — colour-coded, but the word carries the meaning, not the colour */
.log li em{
  font-style:normal;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;
  padding:.18em .6em;border-radius:2px;white-space:nowrap;
  border:1px solid currentColor;
}
.log li em[data-s="live"]{color:oklch(0.48 0.10 155)}
.log li em[data-s="build"]{color:var(--brass-deep)}
.log li em[data-s="design"]{color:var(--sea)}

/* ==========================================================================
   INSTRUMENTS & CHARTS
   Enhancement over the sailing scene, not a replacement for it. The point is
   that the site should read as a navigator's working station — precision,
   measurement, plotted courses — rather than a holiday brochure.
   ========================================================================== */

/* Chart paper: faint bathymetric contours + a rhumb-line rose behind panels. */
.panel{position:relative;overflow:hidden}
.panel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    /* depth contours */
    repeating-radial-gradient(circle at 88% 8%,
      transparent 0 38px,
      color-mix(in oklab,var(--sea) 12%,transparent) 38px 39px),
    /* chart grid */
    linear-gradient(to right, color-mix(in oklab,var(--ink) 5%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab,var(--ink) 5%,transparent) 1px, transparent 1px);
  background-size:auto, 34px 34px, 34px 34px;
}
.panel > *{position:relative;z-index:1}

/* Compass rose watermark on the wide panels */
.panel--wide::after{
  content:"";position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;
  z-index:0;pointer-events:none;opacity:.06;
  background:
    conic-gradient(from 0deg,
      var(--ink) 0 1deg, transparent 1deg 44deg,
      var(--ink) 44deg 46deg, transparent 46deg 89deg,
      var(--ink) 89deg 91deg, transparent 91deg 134deg,
      var(--ink) 134deg 136deg, transparent 136deg 179deg,
      var(--ink) 179deg 181deg, transparent 181deg 224deg,
      var(--ink) 224deg 226deg, transparent 226deg 269deg,
      var(--ink) 269deg 271deg, transparent 271deg 314deg,
      var(--ink) 314deg 316deg, transparent 316deg 360deg);
  border-radius:50%;
  mask:radial-gradient(circle, transparent 28%, #000 30%, #000 98%, transparent);
  -webkit-mask:radial-gradient(circle, transparent 28%, #000 30%, #000 98%, transparent);
}

/* Card media gets a chart overlay so the photography reads as survey material
   rather than stock scenery. */
.card__media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.5;mix-blend-mode:screen;
  background-image:
    linear-gradient(to right, color-mix(in oklab,var(--brass) 22%,transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab,var(--brass) 22%,transparent) 1px, transparent 1px);
  background-size:52px 52px;
  transition:opacity 500ms var(--ease-out);
}
.card:hover .card__media::before{opacity:.22}

/* Corner ticks — the crop marks of a chart plate */
.card__media{
  --tick: color-mix(in oklab,var(--brass) 70%,transparent);
}
.card__media .ticks{position:absolute;inset:8px;z-index:2;pointer-events:none}
.card__media .ticks::before,
.card__media .ticks::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--tick);opacity:.85;
}
.card__media .ticks::before{top:0;left:0;border-right:0;border-bottom:0}
.card__media .ticks::after{bottom:0;right:0;border-left:0;border-top:0}

/* Instrument strip — a readout band that makes each leg feel measured */
.instr{
  display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-m);
  margin-top:var(--space-m);padding-top:var(--space-s);
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.instr b{display:block;color:var(--brass-deep);font-weight:400;font-size:var(--step--2)}
.instr span{font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.06em}

@media (prefers-reduced-motion: reduce){
  .card__media::before{transition:none}
}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:10;padding:var(--space-xl) 6vw var(--space-l);
  text-align:center;color:color-mix(in oklab,var(--foam) 70%,transparent);
  font-family:var(--font-mono);font-size:var(--step--2);letter-spacing:.14em;
}
footer a{color:var(--brass);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fine{margin-top:var(--space-s);opacity:.6;text-transform:uppercase;font-size:var(--step--2)}

/* ==========================================================================
   Motion — CSS scroll-driven. Progressive enhancement, never load-bearing:
   without support, everything is simply visible.
   ========================================================================== */
@supports (animation-timeline: view()){
  .reveal{
    animation:reveal-in linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 30%;
  }
  @keyframes reveal-in{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}

  .reveal--right{animation-name:reveal-right}
  @keyframes reveal-right{from{opacity:0;translate:34px 0}to{opacity:1;translate:0 0}}

  .reveal--left{animation-name:reveal-left}
  @keyframes reveal-left{from{opacity:0;translate:-34px 0}to{opacity:1;translate:0 0}}

  /* cards stagger via their own view timelines, no JS delays needed */
  .cards .card{animation:reveal-in linear both;animation-timeline:view();
    animation-range:entry 0% cover 26%}
}

/* ==========================================================================
   Cross-document View Transitions. Static MPA, no framework.
   ========================================================================== */
@view-transition{ navigation:auto }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vt-out 220ms var(--ease-in-out) both}
  ::view-transition-new(root){animation:vt-in 320ms var(--ease-in-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
  /* the wordmark and header persist across the navigation rather than blinking */
  ::view-transition-group(wordmark),
  ::view-transition-group(site-header){animation-duration:320ms}
}

/* ==========================================================================
   Reduced motion — the poster, static panels, no scene, no drawing.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .plot__line{stroke-dashoffset:0}
  .plot__fix,.plot__dest,.plot__label{opacity:.9}
  #poster{opacity:1 !important}
  #sea{display:none}
  .cue{display:none}
}

/* ==========================================================================
   No-JS / no-WebGL. The page must be complete and sellable without the scene.
   ========================================================================== */
.no-js #poster{opacity:1}
.no-js .hud__read::after{content:""}