@charset "UTF-8";

/* Local variable fonts: one compact Latin file per family, no third-party
   request and no layout dependency on an external stylesheet. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
}

/* ==========================================================================
   YACHTWEBSITE — INDEPENDENT YACHT JOURNAL
   Design System v2.0  ·  "Open Water"
   System fonts only. No external requests. No decorative chrome.
   --------------------------------------------------------------------------
   00  Reset
   01  Tokens
   02  Typography
   03  Layout
   04  Motion primitives
   05  Header / Navigation
   06  Buttons & links
   07  Sea, swell & waterline
   08  Hero
   09  Cards & media
   10  Fleet rail
   11  Accordion
   12  Forms
   13  Prose / Editorial
   14  Footer
   15  Responsive
   16  Reduced motion & print
   ========================================================================== */

/* 00 · RESET ============================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--c-azure); color: #fff; }

/* 01 · TOKENS ============================================================= */

:root {
  /* — Palette · the actual colours of the Mediterranean —————————— */
  --c-canvas:    #F2F8FA;   /* sea light — cool, bright page ground     */
  --c-canvas-2:  #FFFFFF;   /* lifted panel                             */
  --c-surface:   #FFFFFF;
  --c-mist:      #DCEDF3;   /* haze on the horizon                      */
  --c-shallow:   #B9E6E6;   /* sand under two metres of water           */
  --c-foam:      #8FE0DC;   /* foam / wake                              */
  --c-turquoise: #12B5AC;   /* shallow water                            */
  --c-azure:     #0A6FAC;   /* Mediterranean blue — brand primary       */
  --c-azure-lt:  #1791D4;   /* lit water                                */
  --c-deep:      #075E8C;   /* deeper water                             */
  --c-ink:       #04263C;   /* hull navy — primary text                 */
  --c-ink-soft:  #1B4A64;   /* secondary text                           */
  --c-muted:     #4A6B7C;   /* captions — AA on canvas                  */
  --c-gold:      #D99A2B;   /* sunlight on brass — used sparingly       */
  --c-coral:     #E4533A;   /* signal flag — errors only                */

  /* Text-weight variants. The accents above are tuned for marks, rules and the
     dark footer; on the light canvas they fall below 4.5:1 and must not carry
     small text. These two are the same hues taken down to legible. */
  --c-teal-ink:  #0B7D78;   /* teal for small text on canvas — 4.64:1   */
  --c-coral-ink: #C0341C;   /* error text on canvas — 5.86:1            */
  --c-gold-ink:  #8A6116;   /* brass for small text on canvas — 5.15:1  */

  --c-line:      rgba(4, 38, 60, .13);
  --c-line-soft: rgba(4, 38, 60, .07);
  --c-shadow:    rgba(4, 38, 60, .14);

  /* — Typography · self-hosted fonts with installed fallbacks ————————— */
  /* Fraunces carries the optical-size axis, so the display face genuinely
     changes shape between a 5rem headline and a 1rem card title rather than
     being scaled. Inter does the reading. Both fall back to the previous
     system stacks, so the page is still correct before the fonts land. */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, "Times New Roman", Times, serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
            "Courier New", monospace;

  --t-xs:   clamp(.688rem, .66rem + .12vw, .75rem);
  --t-sm:   clamp(.813rem, .78rem + .15vw, .875rem);
  --t-base: clamp(.938rem, .90rem + .18vw, 1.031rem);
  --t-md:   clamp(1.063rem, 1.00rem + .30vw, 1.25rem);
  --t-lg:   clamp(1.25rem, 1.10rem + .70vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.40rem + 1.60vw, 2.85rem);
  --t-2xl:  clamp(2.15rem, 1.55rem + 2.70vw, 4.1rem);
  --t-3xl:  clamp(2.5rem, 1.60rem + 4.20vw, 5.6rem);

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter:    clamp(1.25rem, .6rem + 3vw, 4rem);
  --maxw:      1320px;
  --measure:   70ch;

  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.25, .46, .45, .94);
  --e-back: cubic-bezier(.34, 1.4, .64, 1);

  --radius: 3px;
}

/* 02 · TYPOGRAPHY ========================================================= */

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink-soft);
  background: var(--c-canvas);
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

/* Scale pushed well past the old ceiling. The page had no moment where the
   type asserted itself; the headline is now the loudest thing on the screen
   by a wide margin, which is what gives a page presence. */
h1 { font-size: clamp(2.4rem, 1.30rem + 4.9vw, 6.2rem); letter-spacing: -0.032em; line-height: .98; }
h2 { font-size: clamp(1.95rem, 1.30rem + 2.9vw, 4.0rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.45rem, 1.14rem + 1.4vw, 2.4rem); line-height: 1.14; }
h4 { font-size: clamp(1.00rem,  .88rem +  .56vw, 1.40rem); line-height: 1.25; }
h5 { font-size: clamp( .85rem,  .80rem +  .24vw, 1.00rem); line-height: 1.32; }

/* the h1 stays upright — the accent is colour, not slant */
h1 .display-i, .hero__title .display-i { font-style: normal; }

em, .italic { font-style: italic; }
.display-i { font-style: italic; color: var(--c-azure); }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--c-ink); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-azure);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: ""; width: 1.8em; height: 1px;
  background: currentColor; opacity: .6; flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--gold { color: var(--c-gold-ink); }
.eyebrow--muted { color: var(--c-muted); }

.lede {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--c-ink-soft);
  max-width: 48ch;
}

.small { font-size: var(--t-sm); }
.muted { color: var(--c-muted); }
.ink   { color: var(--c-ink); }

/* 03 · LAYOUT ============================================================= */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 1560px; }
.shell--narrow { max-width: 900px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--flush-top { padding-top: 0; }
.section--white { background: var(--c-surface); }
.section--mist { background: linear-gradient(180deg, var(--c-canvas), var(--c-mist)); }
.section--ink { background: var(--c-ink); color: rgba(255,255,255,.76); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .eyebrow { color: var(--c-foam); }
.section--ink .muted { color: rgba(255,255,255,.55); }
/* The page had no tonal rhythm at all — eight sections on one ground. These
   let a section invert completely so the eye has somewhere to stop. */
.section--ink .numeral { color: var(--c-foam); }
.section--ink .lede { color: rgba(255,255,255,.74); }
.section--ink .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
}
.section--ink .card p { color: rgba(255,255,255,.66); }
.section--ink .card:hover {
  background: rgba(255,255,255,.075);
  box-shadow: 0 26px 54px -30px rgba(0,0,0,.5);
}
.section--ink .btn { --btn-bg: #fff; --btn-fg: var(--c-ink); }
.section--ink .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.section--ink a:not(.btn):not(.card) { color: #fff; }

.grid { display: grid; gap: var(--s-6); }
/* Card grids reflow on their own content rather than on device breakpoints —
   a card is never squeezed below a readable width, and there is no cliff where
   three columns become one. min() keeps a single card inside a narrow phone. */
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-12 { grid-template-columns: repeat(12, 1fr); }

/* Only the END is set so a .start-N utility can place the item freely. */
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
/* Section markers ride the margin. Without this the label column is a third of
   the page and two lines tall against prose that runs for several screens — on
   the manifesto block that left 89% of the column empty. Same idiom as .toc. */
.g-12 > .span-4:not([class*="start-"]),
.g-12 > .span-5:not([class*="start-"]) {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.start-2 { grid-column-start: 2; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-9 { grid-column-start: 9; }

.flow > * + * { margin-top: var(--s-4); }
.flow-lg > * + * { margin-top: var(--s-6); }

.stack-head { max-width: 60ch; }
.stack-head .eyebrow { margin-bottom: var(--s-4); }
.stack-head h2 + p { margin-top: var(--s-5); }

.rule { height: 1px; background: var(--c-line); border: 0; }

.numeral {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  color: var(--c-teal-ink);
  display: block;
  margin-bottom: var(--s-3);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-ink); color: #fff; padding: 1rem 1.5rem;
  font-size: var(--t-sm);
}
.skip-link:focus { left: 0; }

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

/* 04 · MOTION PRIMITIVES ==================================================
   Anything that hides content before animating is scoped to `.js`, set by an
   inline script in <head>. With scripting off every page renders in full.
   ========================================================================= */

.line-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.js .line-mask > span {
  display: block;
  transform: translateY(108%);
  opacity: 0;
  transition: transform 1.05s var(--e-out), opacity .8s var(--e-out);
  transition-delay: var(--dly, 0ms);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: translateY(0); opacity: 1; }

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .7s var(--e-soft), transform .7s var(--e-out);
  transition-delay: var(--dly, 0ms);
}
.is-in .word { opacity: 1; transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--dly, 0ms);
}
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal].is-in   { opacity: 1; transform: none; }

.media-reveal { position: relative; overflow: hidden; }
.js .media-reveal > img,
.js .media-reveal > .media-inner {
  transform: scale(1.08);
  transition: transform 1.4s var(--e-out);
}
.js .media-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-canvas);
  transform-origin: bottom;
  transition: transform 1.1s var(--e-out);
  z-index: 2;
}
.js .media-reveal.is-in > img,
.js .media-reveal.is-in > .media-inner { transform: scale(1); }
.js .media-reveal.is-in::after { transform: scaleY(0); }

.js .draw path, .js .draw line, .js .draw circle, .js .draw polyline {
  stroke-dasharray: var(--len, 2200);
  stroke-dashoffset: var(--len, 2200);
  transition: stroke-dashoffset 2.2s var(--e-out);
  transition-delay: var(--dly, 0ms);
}
.draw.is-in path, .draw.is-in line, .draw.is-in circle, .draw.is-in polyline {
  stroke-dashoffset: 0;
}

@keyframes drift-x { to { transform: translateX(-50%); } }
@keyframes lift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(.5deg); } }
@keyframes glint { 0%, 100% { opacity: .35; transform: scaleX(1); } 50% { opacity: .7; transform: scaleX(1.08); } }
@keyframes hairline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 05 · HEADER / NAVIGATION =============================================== */

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  background: rgba(242, 248, 250, .96);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 var(--c-line-soft);
  transition: transform .5s var(--e-out), background-color .4s ease, box-shadow .4s ease;
}
.header.is-stuck {
  background: rgba(242, 248, 250, .88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 var(--c-line-soft);
}
.header.is-hidden { transform: translateY(-102%); }

.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding-block: clamp(1rem, .6rem + 1vw, 1.5rem);
  transition: padding .4s var(--e-out);
}
.header.is-stuck .header__bar { padding-block: .85rem; }

/* Logo lockup */
.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand__mark { width: 36px; height: 36px; flex: none; transition: transform .6s var(--e-out); }
.brand:hover .brand__mark { transform: translateY(-2px); }
.brand__type { display: flex; flex-direction: column; gap: .18rem; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: .17em;
  line-height: 1;
  color: var(--c-ink);
  text-transform: uppercase;
}
/* colour must follow the wordmark's parent — the global `b` rule sets ink, which
   is a direct selector and so beats inheritance, turning "website" invisible
   against the dark footer and the on-sea header. */
.brand__name b { font-weight: 700; color: inherit; }
.brand__tag {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1;
}
.header--on-sea .brand__name { color: #fff; }
.header--on-sea .brand__tag { color: rgba(255,255,255,.6); }

.nav { display: flex; align-items: center; gap: clamp(1.2rem, .4rem + 1.5vw, 2.2rem); }
.nav__link {
  position: relative;
  font-size: var(--t-sm);
  color: var(--c-ink);
  padding-block: .3rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--c-azure);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--e-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--c-azure); }

/* A link that opens a panel has to say so. Drawn rather than typed, so it sits
   on the same 1px drafting grid as the accordion icon and the rules. */
.nav__link--menu { display: inline-flex; align-items: center; gap: .5rem; }
.nav__caret {
  width: 5px; height: 5px; flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--c-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .4s var(--e-out), color .4s ease;
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret {
  color: var(--c-azure);
  transform: translateY(1px) rotate(225deg);
}

.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 1rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 270px;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  box-shadow: 0 20px 50px -18px var(--c-shadow);
  padding: .6rem;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--e-out), transform .35s var(--e-out), visibility .35s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__panel a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .68rem .8rem;
  font-size: var(--t-sm);
  color: var(--c-ink);
  transition: background-color .3s ease, padding-left .3s var(--e-out);
}
.nav__panel a:hover { background: var(--c-canvas); padding-left: 1.1rem; }
.nav__panel a i {
  font-family: var(--f-mono); font-style: normal;
  font-size: .58rem; letter-spacing: .1em; color: var(--c-teal-ink);
}

.header__cta { display: flex; align-items: center; gap: var(--s-4); }

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 810; }
.burger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--c-ink);
  transition: transform .45s var(--e-out), width .35s var(--e-out);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; width: 15px; }
.burger:hover span:nth-child(2) { width: 22px; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); width: 22px; }

.drawer {
  position: fixed; inset: 0; z-index: 805;
  background: var(--c-canvas);
  padding: 6.5rem var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  /* Clipping hides the panel but leaves its links focusable — visibility takes
     them out of the tab order, and flips only once the close has finished. */
  visibility: hidden;
  transition: clip-path .7s var(--e-out), visibility .7s;
  overflow-y: auto;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer__list a {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem);
  line-height: 1.28;
  color: var(--c-ink);
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--e-out), transform .55s var(--e-out), color .3s;
}
.drawer.is-open .drawer__list a { opacity: 1; transform: none; }
.drawer__list a:hover { color: var(--c-azure); }
.drawer__foot { font-size: var(--t-sm); color: var(--c-muted); }

/* Independence notice. It sits in the document flow so it is present without
   JavaScript, while staying compact enough not to feel like a legal wall. */
.site-notice {
  padding-top: clamp(5.4rem, 4.8rem + 2vw, 6.8rem);
  background: var(--c-ink);
  color: rgba(255,255,255,.76);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-notice__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(.8rem, .5rem + 1.2vw, 1.8rem);
  padding-block: .9rem;
}
/* A disclosure only works if it is read. Capped to a readable measure so the
   line does not run to 115 characters on a wide screen. */
.site-notice p { font-size: var(--t-sm); line-height: 1.55; max-width: 68ch; }
.site-notice strong { color: #fff; }
.site-notice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-xs);
  color: #fff;
  border-bottom: 1px solid rgba(143,224,220,.7);
  transition: border-color .25s ease, color .25s ease;
}
.site-notice a:hover { color: var(--c-foam); border-color: currentColor; }
.site-notice + .phero { padding-top: clamp(3.4rem, 2.6rem + 4vw, 6rem); }
.site-notice + .hero {
  min-height: calc(100svh - 8rem);
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* 06 · BUTTONS & LINKS =================================================== */

.btn {
  --btn-fg: #fff;
  --btn-bg: var(--c-azure);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .65rem;
  padding: 1rem 1.9rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .45s var(--e-out), transform .45s var(--e-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-ink);
  transform: translateY(101%);
  transition: transform .5s var(--e-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { box-shadow: 0 14px 30px -14px rgba(10,111,172,.6); }
.btn svg { transition: transform .45s var(--e-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-fg: var(--c-ink);
  --btn-bg: transparent;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.btn--ghost:hover { --btn-fg: #fff; }
.btn--light { --btn-fg: var(--c-ink); --btn-bg: #fff; }
.btn--light:hover { --btn-fg: #fff; }
.btn--sm { padding: .75rem 1.3rem; font-size: var(--t-xs); }

.tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--c-azure);
  padding-bottom: .3rem;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(1);
  transition: transform .5s var(--e-out);
}
.tlink:hover::after { transform: scaleX(0); transform-origin: right; }
.tlink svg { transition: transform .45s var(--e-out); }
.tlink:hover svg { transform: translateX(4px); }

/* 07 · DRAFTING SHEET & HERO ============================================
   The brand language is the naval-architecture drawing: a white sheet, a
   faint drafting grid, and a line drawn on in pen.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: clamp(6.5rem, 5rem + 5vw, 9rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  background: var(--c-canvas);
}

/* Drafting grid, faded out at the edges so it never reads as a table */
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(4,38,60,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4,38,60,.075) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 55% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 72% at 55% 50%, #000 20%, transparent 78%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.hero__title {
  font-size: clamp(2rem, 1.28rem + 3.36vw, 4.48rem);
  line-height: 1.04;
  margin-bottom: clamp(1.1rem, 1rem + 1.2vw, 1.7rem);
}
.hero__lede { max-width: 40ch; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  margin-top: clamp(1.5rem, 1rem + 1.8vw, 2.3rem);
}

/* The sheet the drawing sits on */
.hero__sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: clamp(.9rem, .4rem + 1.6vw, 2rem);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 34px 70px -46px rgba(4, 38, 60, .45);
}
.hero__sheet svg { width: 100%; height: auto; }

.hero__caption {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  justify-content: space-between;
  margin-top: clamp(.6rem, .4rem + .6vw, 1rem);
  padding-top: .8rem;
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero__caption b { color: var(--c-azure); font-weight: 500; }

/* the sail tints fade in once the pen has finished the outline */
.js .hero__sheet .sk-sail { fill-opacity: 0; transition: fill-opacity 1.1s ease 1.5s; }
.js .hero__sheet .draw.is-in .sk-sail { fill-opacity: .07; }

/* Waterline rule running the width of the hero */
.hero__waterline {
  position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 5rem);
  height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(10,111,172,.35) 22%, rgba(10,111,172,.35) 78%, transparent);
}

/* Interior page header */
.phero {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 7vw, 11rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF7FA 100%);
  border-bottom: 1px solid var(--c-line-soft);
}
.phero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s-8); align-items: end; }
.phero h1 { font-size: var(--t-2xl); }
.phero__spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-6); }
/* An odd number of entries used to leave an empty cell beside the last one.
   The trailing item now takes the full width instead, so the block reads as a
   finished list at any count. */
.phero__spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.phero__spec div { border-top: 1px solid var(--c-line); padding-top: .8rem; }
.phero__spec dt {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted);
  margin-bottom: .4rem;
}
.phero__spec dd { font-family: var(--f-display); font-size: var(--t-md); color: var(--c-ink); line-height: 1.25; }

/* The breadcrumb is wayfinding, not an accent. It used to be mono, uppercase
   and letterspaced — identical treatment to the eyebrow directly beneath it,
   which put two competing micro-labels above every heading. It is now quiet
   body type so the eyebrow is the only accent label in that stack. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--f-body); font-size: var(--t-xs);
  color: var(--c-muted);
  margin-bottom: var(--s-5);
}
.crumbs a { color: var(--c-muted); transition: color .3s; display: inline-block; padding-block: .25rem; }
.crumbs a:hover { color: var(--c-azure); }
.crumbs span { opacity: .45; }

/* Drawing sheet — the vessel drawings presented as plates, not decoration */
.sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  padding: clamp(1rem, .5rem + 1.4vw, 1.9rem);
  box-shadow: 0 28px 60px -46px rgba(4, 38, 60, .42);
}
/* Corner brackets removed. The plate already reads as a drawing sheet from its
   border, rule and caption; the brackets were a fourth decorative layer on an
   image that also carries its own annotation. */
.sheet img { width: 100%; height: auto; }
.sheet figcaption {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  justify-content: space-between;
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sheet figcaption b { color: var(--c-azure); font-weight: 500; }

/* 09 · CARDS & MEDIA ===================================================== */

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.3rem);
  overflow: hidden;
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--c-turquoise);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--e-out);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -30px var(--c-shadow); }
.card:hover::after { transform: scaleX(1); }
.card h3, .card h4 { margin-bottom: var(--s-3); }
.card p { font-size: var(--t-sm); }

.vcard { position: relative; display: block; overflow: hidden; }
.vcard__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
}
.vcard__media img, .vcard__media svg {
  width: 86%; height: auto;
  transition: transform 1s var(--e-out);
  position: relative; z-index: 2;
}
.vcard:hover .vcard__media img,
.vcard:hover .vcard__media svg { transform: scale(1.05) translateY(-3px); }
.vcard__body { padding: var(--s-5) 0 var(--s-2); }
.vcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.vcard__body h3 { font-size: var(--t-lg); transition: color .35s; }
.vcard:hover .vcard__body h3 { color: var(--c-azure); }
.vcard__body p { font-size: var(--t-sm); color: var(--c-muted); margin-top: .55rem; }
.vcard__idx { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-teal-ink); letter-spacing: .12em; }

.frow { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-7); align-items: center; }
.frow + .frow { margin-top: clamp(3.5rem, 2rem + 5vw, 7rem); }
/* Placement lives here rather than inline on the element: an inline style wins
   against the media query below, which left the drawing in a 98px column. */
.frow__media { grid-column: 1 / span 6; }
.frow__body  { grid-column: 8 / span 5; }
.frow--flip .frow__media { grid-column: 7 / span 6; grid-row: 1; }
.frow--flip .frow__body  { grid-column: 1 / span 5; grid-row: 1; }

.spec { border-top: 1px solid var(--c-ink); }
.spec tr { border-bottom: 1px solid var(--c-line); }
.spec th, .spec td { padding: 1rem 0; text-align: left; vertical-align: top; font-size: var(--t-sm); }
.spec th {
  font-family: var(--f-mono); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-muted);
}
.spec td { color: var(--c-ink); }
.spec tbody tr { transition: background-color .35s; }
.spec tbody tr:hover { background: var(--c-canvas); }

/* 10 · FLEET RAIL ======================================================== */

.rail { position: relative; }
.rail__track {
  display: flex; gap: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-5);
  scrollbar-width: none;
  cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail__item { flex: 0 0 clamp(260px, 29vw, 400px); scroll-snap-align: center; }
.rail__nav { display: flex; align-items: center; gap: var(--s-4); }
.rail__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  color: var(--c-ink);
  transition: background-color .4s var(--e-out), color .4s, border-color .4s, transform .4s var(--e-out);
}
.rail__btn:hover { background: var(--c-azure); color: #fff; border-color: var(--c-azure); }
.rail__btn:active { transform: scale(.93); }
.rail__btn:disabled { opacity: .28; pointer-events: none; }

/* 11 · ACCORDION ========================================================= */

.acc { border-top: 1px solid var(--c-line); }
.acc__item { border-bottom: 1px solid var(--c-line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
  padding: clamp(1.1rem, 1rem + .7vw, 1.7rem) 0;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--t-md);
  color: var(--c-ink);
  transition: color .35s;
}
.acc__btn:hover { color: var(--c-azure); }
.acc__icon { position: relative; width: 14px; height: 14px; flex: none; margin-top: .5em; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .5s var(--e-out), opacity .35s;
}
.acc__icon::before { left: 0; top: 6.5px; width: 14px; height: 1.2px; }
.acc__icon::after  { left: 6.5px; top: 0; width: 1.2px; height: 14px; }
.acc__item.is-open .acc__icon::after { transform: rotate(90deg); opacity: 0; }
.acc__panel { overflow: hidden; }
.js .acc__panel { height: 0; transition: height .55s var(--e-out); }
.acc__panel > div { padding-bottom: clamp(1.1rem, 1rem + .7vw, 1.7rem); max-width: 64ch; font-size: var(--t-sm); }

/* 12 · FORMS ============================================================= */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }

.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 1.45rem 0 .65rem;
  font-size: var(--t-base);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: transparent;
  transition: border-color .4s var(--e-out);
  appearance: none;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { cursor: pointer; }
.field label {
  position: absolute; left: 0; top: 1.3rem;
  font-size: var(--t-base);
  color: var(--c-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .4s var(--e-out), color .4s var(--e-out);
}
.field input:focus ~ label,
.field textarea:focus ~ label,
.field select:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select:valid ~ label {
  transform: translateY(-1.3rem) scale(.72);
  color: var(--c-azure);
}
.field__bar {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--c-azure); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
.field input:focus ~ .field__bar,
.field textarea:focus ~ .field__bar,
.field select:focus ~ .field__bar { transform: scaleX(1); }
.field :focus-visible { outline: none; }
.field.is-error input, .field.is-error textarea { border-color: var(--c-coral); }
.field__err {
  display: block; margin-top: .45rem;
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--c-coral-ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s, transform .3s var(--e-out);
}
.field.is-error .field__err { opacity: 1; transform: none; }

.check { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--t-sm); color: var(--c-muted); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 18px; height: 18px; margin-top: .22rem;
  border: 1px solid var(--c-line); border-radius: 2px; position: relative;
  transition: background-color .35s var(--e-out), border-color .35s;
}
.check__box::after {
  content: ""; position: absolute; left: 5.5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .35s var(--e-back);
}
.check input:checked ~ .check__box { background: var(--c-azure); border-color: var(--c-azure); }
.check input:checked ~ .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--c-azure); outline-offset: 3px; }
.check a { color: var(--c-azure); text-decoration: underline; text-underline-offset: 3px; }

.form__note { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.7; }

.form__success {
  display: none;
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: rgba(18, 181, 172, .09);
  border-left: 2px solid var(--c-turquoise);
  border-radius: var(--radius);
}
.form__success.is-on { display: block; animation: fadeUp .55s var(--e-out); }

/* 13 · PROSE / EDITORIAL ================================================= */

/* min-width:0 so the column may shrink past a wide table's min-content — without
   it the grid track refuses to narrow and the whole page scrolls sideways. */
.prose { max-width: var(--measure); font-size: var(--t-base); min-width: 0; }
.prose > * + * { margin-top: 1.3em; }
.prose h2 {
  font-size: var(--t-xl);
  margin-top: 2.3em; margin-bottom: .1em;
  padding-top: 1.3em;
  border-top: 1px solid var(--c-line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-lg); margin-top: 1.9em; }
.prose h4 { font-size: var(--t-md); margin-top: 1.7em; font-family: var(--f-body); font-weight: 600; }
.prose a { color: var(--c-azure); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.prose a:hover { color: var(--c-ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul li { list-style: none; position: relative; padding-left: .3em; }
.prose ul li::before {
  content: ""; position: absolute; left: -1em; top: .7em;
  width: 6px; height: 1px; background: var(--c-turquoise);
}
.prose ol { list-style: decimal; }
.prose ol li::marker { font-family: var(--f-mono); font-size: .8em; color: var(--c-teal-ink); }
.prose li + li { margin-top: .5em; }
.prose blockquote {
  margin-block: 1.9em;
  padding-left: 1.6em;
  border-left: 2px solid var(--c-turquoise);
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.38;
  color: var(--c-ink);
}
.prose__lead { font-size: var(--t-md); line-height: 1.6; color: var(--c-ink); }
.prose code {
  font-family: var(--f-mono);
  font-size: .86em;
  padding: .15em .45em;
  background: var(--c-mist);
  border-radius: var(--radius);
  color: var(--c-deep);
  word-break: break-word;
}
.prose table { margin-block: 1.9em; font-size: var(--t-sm); }
.prose > table { display: block; overflow-x: auto; }
.prose th, .prose td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose thead th {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
  border-bottom-color: var(--c-ink);
}

.callout {
  margin-block: 2em;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-left: 2px solid var(--c-azure);
  border-radius: var(--radius);
}
.callout .eyebrow { margin-bottom: .7rem; }
.callout p { font-size: var(--t-sm); }
.callout--gold { border-left-color: var(--c-gold); }
.callout--gold .eyebrow { color: var(--c-gold-ink); }

.article { display: grid; grid-template-columns: 230px 1fr; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.toc { position: sticky; top: 7rem; }
.toc__title {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted);
  padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--c-line);
}
.toc a {
  display: block; padding: .45rem 0 .45rem .9rem;
  font-size: var(--t-sm); color: var(--c-muted);
  border-left: 1px solid var(--c-line);
  transition: color .3s, border-color .3s, padding-left .3s var(--e-out);
}
.toc a:hover, .toc a.is-active { color: var(--c-azure); border-color: var(--c-azure); padding-left: 1.25rem; }

/* 14 · FOOTER ============================================================ */

.footer { background: var(--c-ink); color: rgba(255,255,255,.62); position: relative; }
.footer a { color: rgba(255,255,255,.74); transition: color .3s; }
.footer a:hover { color: #fff; }
.footer__top { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s-7); }
.footer__col h5 {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-foam); margin-bottom: var(--s-5); font-weight: 500;
}
/* Padding buys the 24px minimum target without moving anything: the margin is
   reduced by exactly what the padding adds, so the visual rhythm is identical. */
.footer__col li + li { margin-top: .15rem; }
.footer__col a { font-size: var(--t-sm); display: inline-block; padding-block: .3rem; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: rgba(255,255,255,.45); }
.footer__blurb { font-size: var(--t-sm); max-width: 36ch; margin-top: var(--s-5); color: rgba(255,255,255,.58); }
.footer__mail { display: inline-block; margin-top: calc(var(--s-5) - .15rem); font-size: var(--t-sm); padding-block: .15rem; }

.footer__bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-xs); color: rgba(255,255,255,.45);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a { display: inline-block; padding-block: .2rem; }

/* The page used to end on a hairline rule and simply stop. The closer is a
   full-bleed inversion instead, so the last thing on screen is deliberate. */
.closer {
  display: flex; flex-wrap: wrap;
  gap: var(--s-7);
  align-items: flex-end;
  justify-content: space-between;
}
.closer > div { max-width: 46ch; }
@media (max-width: 720px) {
  .closer { flex-direction: column; align-items: stretch; gap: var(--s-6); }
  .closer .btn { justify-content: center; }
}

/* PLATE BAND ─────────────────────────────────────────────────────────────
   The drawings were shown as small boxed thumbnails, which wasted the only
   real artwork on the site. This runs one edge to edge on ink at hero scale
   and lets the caption sit on the drawing rather than under it. */
.plate-band {
  position: relative;
  background: var(--c-ink);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}
.plate-band__art {
  width: min(1180px, 92vw);
  margin-inline: auto;
}
/* Line art is never cropped — the drawing is the whole point of it. */
.plate-band__art img { width: 100%; height: auto; }

/* PHOTOGRAPHY ────────────────────────────────────────────────────────────
   Same band, different media rules. A drawing is contained; a photograph is
   cropped to a chosen ratio and carries a scrim so type can sit on it. Drop
   files into assets/img/photo/ and point the <img> at them — nothing else
   in the markup changes. */
.plate-band--photo .plate-band__art {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.plate-band--photo .plate-band__art img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio, 21 / 9);
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.plate-band--photo .plate-band__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(4,38,60,.10) 0%,
              rgba(4,38,60,.05) 45%,
              rgba(4,38,60,.72) 100%);
  pointer-events: none;
}
/* Type laid over the photograph rather than under it. */
.plate-band__over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, .8rem + 2vw, 2.6rem);
  color: #fff;
  z-index: 1;
}
.plate-band__over h2, .plate-band__over h3 { color: #fff; max-width: 20ch; }
.plate-band__over p {
  margin-top: .6rem;
  max-width: 48ch;
  color: rgba(255,255,255,.86);
  font-size: var(--t-sm);
}
/* Ratio presets, so the crop is an art-direction decision rather than a guess. */
.ratio-cinema   { --ratio: 21 / 9; }
.ratio-wide     { --ratio: 16 / 9; }
.ratio-classic  { --ratio: 3 / 2; }
.ratio-portrait { --ratio: 4 / 5; }

@media (max-width: 720px) {
  /* A 21:9 crop is a letterbox slot on a phone; step every band to something
     that still shows the subject. */
  .plate-band--photo .plate-band__art img { aspect-ratio: var(--ratio-sm, 4 / 3); }
}
.plate-band__meta {
  width: min(1180px, 92vw);
  margin: clamp(1.2rem, .8rem + 1.2vw, 2rem) auto 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  justify-content: space-between; align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.plate-band__meta b { color: var(--c-foam); font-weight: 500; }
.plate-band__lede {
  width: min(1180px, 92vw);
  margin: clamp(1.6rem, 1rem + 2vw, 2.8rem) auto 0;
  max-width: 54ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

/* 15 · RESPONSIVE ======================================================== */

@media (max-width: 1180px) {
  .article { grid-template-columns: 1fr; }
  .toc { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__brand { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__cta .btn { display: none; }
  /* Collapse the 12-column grids: 11 fixed gaps alone exceed a phone viewport. */
  .g-12 { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; gap: var(--s-6); }
  .frow__media, .frow__body,
  .frow--flip .frow__media, .frow--flip .frow__body { grid-column: 1 / -1; grid-row: auto; }
  .frow--flip .frow__media { grid-row: 1; }
  .phero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  /* The hero stacks with the editorial rows: below this the two columns leave
     the lede wrapping at five words a line against a half-width drawing. */
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: 1 / -1; }
  /* stacked: nothing to ride alongside, and a pinned label would sit over the prose */
  .g-12 > .span-4, .g-12 > .span-5 { position: static; }
  .start-2, .start-6, .start-7, .start-9 { grid-column-start: 1; }
}

@media (max-width: 720px) {
  /* .g-2 and .g-3 reflow intrinsically and need no rule here. */
  .g-4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .phero__spec { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__waterline { display: none; }
  .scroll-cue { display: none; }
  .spec { display: block; overflow-x: auto; }
  .site-notice a { min-height: 38px; }
}

@media (max-width: 480px) {
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 1rem; letter-spacing: .14em; }
}

/* On narrow screens the action follows the disclosure instead of squeezing it. */
@media (max-width: 880px) {
  .site-notice__inner {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding-block: .8rem .95rem;
  }
  .site-notice a { justify-self: start; min-height: 32px; }
  .site-notice p { max-width: none; }
}

/* 16 · REDUCED MOTION & PRINT =========================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .word, .js .line-mask > span {
    opacity: 1 !important; transform: none !important;
  }
  .js .media-reveal::after { display: none; }
  .js .media-reveal > img, .js .media-reveal > .media-inner { transform: none; }
  .js .draw path, .js .draw line, .js .draw circle, .js .draw polyline { stroke-dashoffset: 0 !important; }
}

@media print {
  .header, .footer, .site-notice, .hero__grid, .hero__waterline { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}