/* ============================================================
   SAGE, 1992 Custom 54' Steel Trawler
   "Ship's papers" editorial: cream chart-paper, hunter green,
   gold-leaf serif, varnished teak, life-ring orange accents.
   ============================================================ */

/* Webfonts, self-hosted (SIL Open Font License). Same latin woff2 files Google
   Fonts served, same descriptors, so nothing changes visually. Self-hosting
   removes two third-party origins from the critical path and a measured
   ~2 s first-paint hold that Chrome applied intermittently when the Google
   Fonts CSS landed before the first frame (2026-08-18 traces). Latin subset
   only: the page contains no latin-ext, cyrillic or vietnamese text. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f6f1e4;
  --paper-2: #efe7d2;
  --paper-3: #e7dcc0;
  --ink: #22301f;
  --ink-soft: #45523f;
  --green: #1f4d3a;
  --green-deep: #143327;
  --green-night: #0e2119;
  --gold: #b9892f;
  --gold-bright: #d9a93f;
  --brass: #8c6e2e;
  --brass-deep: #6e5320;
  --teak: #7c4a2d;
  --orange: #e8622c;
  --white: #fcfaf3;
  --line: rgba(34, 48, 31, 0.18);
  --line-strong: rgba(34, 48, 31, 0.35);
  --shadow: 0 22px 60px -18px rgba(20, 32, 24, 0.35);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* chart-paper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(34,48,31,0.028) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(34,48,31,0.028) 79px 80px);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* height:auto is REQUIRED, not cosmetic. The intrinsic width and height
   attributes on the image tags create presentational hints for BOTH
   dimensions. Author CSS overrides the width hint (to 100%/46%) but left the
   height hint standing, so a height attribute of 2000 rendered as a literal
   height:2000px and every aspect-ratio below was ignored, because aspect-ratio
   only applies when height is auto. Result was 264x4016 sliver crops. Rules
   that genuinely want a filled box (.gitem img, .steel-grid img,
   .feature-photos .tall) set height themselves and are more specific, so they
   still win. */
img { max-width: 100%; display: block; height: auto; }

::selection { background: var(--gold-bright); color: var(--green-night); }

a { color: inherit; }

.wrap { position: relative; z-index: 2; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-deep);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow .coord { color: var(--ink-soft); letter-spacing: 0.18em; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; }

.section-title {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  letter-spacing: -0.015em;
  margin: 1.1rem 0 1.4rem;
}
.section-title em { font-style: italic; color: var(--green); }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 38em;
}

.dropcap::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 4.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--green);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  color: var(--white);
}
/* Scrim so nav text never sits on bare sky. The hero photo is bright at the
   top, and text-shadow alone left the gold wordmark under 2:1 there. Fades
   out once .scrolled paints its own solid background. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,33,25,0.72), rgba(14,33,25,0.34) 62%, rgba(14,33,25,0));
  transition: opacity 0.4s var(--ease);
}
.nav.scrolled::before { opacity: 0; }
.nav.scrolled {
  background: rgba(14, 33, 25, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.4);
  /* Over .loop and .visit the bar is the same #0e2119 as the section behind it,
     so at 92% the section's gold headline ghosted through right next to the
     gold wordmark and read as a render glitch. A hairline gives the bar an
     edge without making it opaque everywhere else. */
  border-bottom: 1px solid rgba(217,169,63,0.22);
}
.nav-mark {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.34em;
  text-decoration: none;
  color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.nav-links { display: flex; gap: 1.7rem; align-items: center; }
.nav-links a {
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  background: rgba(14,33,25,0.35);
  backdrop-filter: blur(2px);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright) !important;
  padding: 0.8em 1.2em;
  border-radius: 2px;
  transition: background 0.25s, color 0.25s;
}
.nav-cta:hover { background: var(--gold-bright); color: var(--green-night) !important; }
@media (max-width: 900px) { .nav-links a:not(.nav-cta) { display: none; } }
/* Below 720px the fixed .call-bar carries the same action, and the nav CTA
   ran off the right edge at 390px. One CTA, not two overlapping ones. */
@media (max-width: 720px) { .nav-cta { display: none; } }

/* the current section, in both the desktop nav and the mobile rail */
.nav-links a.here { opacity: 1; color: var(--gold-bright); }

/* ---------- chapter rail (mobile navigation) ----------
   Hiding the nav links below 900px left a 21,212px page with NO navigation of
   any kind and six sections unreachable except by thumb-scrolling. This is a
   visible horizontally-scrolled index rather than a hamburger drawer: the
   ship's-papers world wants a document index, and a drawer would hide the one
   thing the page most needs to expose. */
.chapters { display: none; }
@media (max-width: 900px) {
  .chapters {
    display: flex;
    /* full-row basis so it wraps below the wordmark instead of being squeezed
       by the parent's space-between */
    flex: 0 0 100%;
    width: 100%;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* matches .nav's own horizontal padding; there is no --pad token here */
    padding: 0 clamp(1.2rem, 4vw, 3rem) 0.6rem;
    margin: 0.55rem calc(-1 * clamp(1.2rem, 4vw, 3rem)) 0;
    scroll-padding-inline: clamp(1.2rem, 4vw, 3rem);
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85em;
    border: 1px solid rgba(217,169,63,0.34);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--gold-bright);
    background: rgba(14,33,25,0.9);
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
  }
  .chapters a.here {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    color: var(--green-night);
  }
  /* the rail rides inside the fixed bar, so the bar needs its own ground once
     it is more than one line tall */
  .nav { flex-wrap: wrap; align-items: center; padding-bottom: 0; }
  .nav::before { background: rgba(14,33,25,0.94); opacity: 1; }
  .nav.scrolled::before { opacity: 1; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  background-color: var(--green-night); /* readable text before the photo paints, and if it never does */
  background-size: cover;
  background-position: center 62%;
  z-index: -2;
  animation: heroDrift 24s var(--ease) both;
}
@keyframes heroDrift {
  from { transform: scale(1.12); }
  to { transform: scale(1.02); }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,33,25,0.62) 0%, rgba(14,33,25,0.08) 36%, rgba(14,33,25,0.18) 60%, rgba(14,33,25,0.9) 100%);
}
.hero-inner {
  width: 100%;
  padding: 0 clamp(1.2rem, 5vw, 4.5rem) clamp(2.4rem, 6vh, 4.5rem);
}
.hero-kicker {
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  /* 0.88, not 0.45. At 0.45 the photograph composites through at 55%, so this
     label's contrast is a FUNCTION OF THE CROP: measured 8.97:1 where dark
     water sits behind it and 1.31:1 over the white hull, which is why two
     passes at two viewports disagreed and why an earlier note recorded "7.35:1"
     as if it were a fixed property. Gold #d9a93f at 12.8px needs 4.5:1. At 0.88
     the worst case over pure white is 5.4:1, so it passes over ANY photo.
     Do not lower this to recover the see-through look. */
  background: rgba(14,33,25,0.88);
  backdrop-filter: blur(3px);
  width: fit-content;
  padding: 0.55em 1.1em;
  border-radius: 2px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-top: 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.hero-kicker::before, .hero-kicker::after { content: ""; height: 1px; width: 3rem; background: var(--gold-bright); opacity: 0.7; }
.hero h1 {
  font-size: clamp(4.2rem, 14vw, 10.5rem);
  font-weight: 560;
  letter-spacing: 0.08em;
  line-height: 0.9;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
}
.hero-sub {
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.85rem 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-style: italic;
}
.hero-sub .dot { opacity: 0.55; font-style: normal; }
.hero-price {
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Phone: the kicker's fixed-width rules and 0.34em tracking gave .hero-inner a
   min-content width wider than the viewport, which pushed the price line off
   the right edge. body's overflow-x:hidden was hiding it rather than fixing it. */
@media (max-width: 640px) {
  .hero-kicker {
    display: block;          /* flex + width:fit-content refused to wrap */
    width: auto;
    max-width: 100%;
    letter-spacing: 0.18em;
    padding: 0.55em 0.85em;
    line-height: 1.7;
  }
  .hero-kicker::before, .hero-kicker::after { display: none; }
  .hero-sub { gap: 0.5rem 1rem; }
  .hero-sub .dot { display: none; }
}

.btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 1.9em;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--gold-bright); color: var(--green-night); }
.btn-solid:hover { background: var(--white); }
.btn-ghost { border-color: rgba(252,250,243,0.65); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(252,250,243,0.12); }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-deep); }
/* background:none is required, not cosmetic: #print-specs is a <button>, so it
   inherits the UA's rgb(239,239,239) and was rendering as the only cool-grey
   surface on an all-warm page, right beside a visually "identical" <a>. */
.btn-outline { background: none; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }

.hero-scroll {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(2.4rem, 6vh, 4.5rem);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.75;
  display: flex; align-items: center; gap: 0.8rem;
  text-decoration: none;
}
.hero-scroll::after { content: ""; width: 1px; height: 3.4rem; background: currentColor; animation: scrollPulse 2.2s infinite var(--ease); }
@keyframes scrollPulse { 0%,100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); } }
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* ============ TICKER RIBBON ============ */
.ribbon {
  background: var(--green-night);
  color: var(--paper);
  overflow: hidden;
  border-top: 1px solid rgba(217,169,63,0.35);
  border-bottom: 1px solid rgba(217,169,63,0.35);
  padding: 0.85rem 0;
  position: relative;
  z-index: 3;
}
.ribbon-track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: ticker 42s linear infinite;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon-track span { display: flex; align-items: center; gap: 3.2rem; }
.ribbon-track b { color: var(--gold-bright); font-weight: 600; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============ SECTIONS ============ */
section { position: relative; }
.section-pad { padding: clamp(4.5rem, 10vw, 8.5rem) clamp(1.2rem, 5vw, 4.5rem); }
.container { max-width: 1200px; margin: 0 auto; }

/* reveal on scroll (JS-gated: without JS everything stays visible) */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.12s; } .rv-d2 { transition-delay: 0.24s; } .rv-d3 { transition-delay: 0.36s; }

/* ---------- STORY ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story-copy p + p { margin-top: 1.1em; }
.story-photos { position: relative; }
.story-photos .ph-main {
  box-shadow: var(--shadow);
  border: 6px solid var(--white);
  transform: rotate(1.4deg);
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.story-photos .ph-inset {
  position: absolute;
  width: 46%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  bottom: -14%;
  left: -8%;
  border: 6px solid var(--white);
  box-shadow: var(--shadow);
  transform: rotate(-3.2deg);
}
.story-photos figcaption {
  position: absolute;
  top: 100%;
  left: 45%;
  right: 0;
  text-align: right;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-photos { margin-top: 2.5rem; }
}

.burgee-note {
  margin-top: 2.2rem;
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.burgee-note b { color: var(--ink); }

/* ---------- STATS ---------- */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 2.2rem 1.4rem 2rem;
  border-right: 1px solid var(--line);
  text-align: center;
}
.stat:last-child { border-right: none; }
.stat .num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--green);
  line-height: 1;
}
.stat .num sup { font-size: 0.45em; color: var(--brass-deep); }
.stat .lbl {
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat { min-width: 0; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 1.6rem 0.6rem 1.4rem; }
  .stat .num { font-size: 1.55rem; }
  .stat .lbl { font-size: 0.58rem; letter-spacing: 0.12em; }
  .stat:nth-child(3n) { border-right: none; }
}
@media (max-width: 640px) {
  .story-photos .ph-inset { left: 0; }
}

/* ---------- LOOP MAP (dark chart) ---------- */
.loop {
  background:
    radial-gradient(1200px 700px at 75% 20%, rgba(31,77,58,0.55), transparent 60%),
    var(--green-night);
  color: var(--paper);
}
.loop .eyebrow { color: var(--gold-bright); }
.loop .eyebrow::before { background: var(--gold-bright); }
.loop .section-title em, .steel .section-title em, .visit .section-title em { color: var(--gold-bright); }
.loop .lede { color: rgba(246,241,228,0.78); }
.loop-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 980px) { .loop-grid { grid-template-columns: 1fr; } }
.loop-map-wrap { position: relative; }
.loop-map-wrap svg { width: 100%; height: auto; display: block; }

/* One grid for the whole list, not one per row. Each .loop-fact used to carry
   its own `auto 1fr`, so the tracks could not be shared and "~6,000" (92px)
   pushed its description 19px further right than the other three, staggering
   the column edge. subgrid keeps a single measured track for every row. */
.loop-facts {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.1rem;
}
.loop-fact {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 1.1rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(246,241,228,0.14);
}
@supports not (grid-template-columns: subgrid) {
  .loop-facts { grid-template-columns: 1fr; }
  .loop-fact { grid-template-columns: 5.4rem 1fr; }
}
.loop-fact .k {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--gold-bright);
  min-width: 4.6rem;
}
.loop-fact .v { font-size: 1rem; color: rgba(246,241,228,0.85); }

/* The fuel/range section was removed entirely on 2026-08-17 at the owner's
   instruction. Its rules (.fuel, .fuel-verdict, .range-cards, .range-card,
   .rc-num, .rc-lbl) went with it. */

/* ---------- FEATURE SPLITS (galley / pilothouse) ---------- */
.feature { overflow: clip; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 940px) { .feature-grid { grid-template-columns: 1fr; } }
/* #helm has two paragraphs and they ran together with zero separation at the
   same leading. .story-copy already had this rule; .feature never did. */
.feature-grid p + p { margin-top: 1.1em; }
.feature-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-photos img { border: 5px solid var(--white); box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-photos .tall { grid-row: span 2; object-fit: cover; height: 100%; aspect-ratio: auto; }
.feature-list { margin: 1.6rem 0 0; list-style: none; }
.feature-list li {
  padding: 0.75rem 0 0.75rem 2rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 1.02rem;
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 1.28rem;
  width: 0.85rem; height: 1px; background: var(--gold);
}
.pull-quote {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--green);
  border-left: 3px solid var(--gold);
  padding-left: 1.4rem;
}

.feature.alt { background: var(--paper-2); }

/* ---------- GALLERY ---------- */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 2rem 0 1.8rem;
}
.gf {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: 2rem;
  padding: 0.85em 1.35em;
  /* these measured 34.1px tall, under the 44px touch minimum, and they are the
     first thing a thumb meets in the gallery */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s;
}
.gf:hover { border-color: var(--green); color: var(--green); }
.gf.active { background: var(--green); border-color: var(--green); color: var(--white); }

/* filtering used to change the grid with no feedback of any kind */
.gallery-count {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gallery-noscript {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border: 1px dashed var(--line-strong);
  color: var(--ink-soft);
  max-width: 60ch;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-top: 1.1rem;
}
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gitem {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
  border-radius: 2px;
  background: var(--paper-3);
}
.gitem img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.6s;
}
.gitem:hover img { transform: scale(1.06); }
.gitem .tag {
  position: absolute; left: 0.7rem; bottom: 0.7rem;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(14,33,25,0.78); color: var(--paper);
  padding: 0.35em 0.8em; border-radius: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s var(--ease);
}
.gitem:hover .tag { opacity: 1; transform: none; }
.gitem.hidden { display: none; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 33, 25, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 3.5rem 1rem 4.5rem;
}
.lb.open { display: flex; }
.lb img { max-width: min(1200px, 94vw); max-height: 82vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lb-cap {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  color: var(--paper); font-family: var(--sans);
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85;
  max-width: min(70ch, 88vw); text-align: center;
}
/* position within the set: the arrows used to wrap silently through 53 images
   with no indication of where you were or how many were left */
.lb-num {
  position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%);
  color: var(--gold-bright); font-family: var(--sans);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.lb-btn {
  position: absolute;
  background: none; border: 1px solid rgba(252,250,243,0.4);
  color: var(--paper); font-size: 1.4rem; line-height: 1;
  width: 3rem; height: 3rem; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
  transition: all 0.25s;
}
.lb-btn:hover { background: rgba(252,250,243,0.14); border-color: var(--paper); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .lb-prev, .lb-next { bottom: 1.2rem; top: auto; transform: none; } }

/* ---------- STEEL (dark) ---------- */
.steel {
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(124,74,45,0.28), transparent 55%),
    #171a17;
  color: var(--paper);
}
.steel .eyebrow { color: var(--gold-bright); }
.steel .eyebrow::before { background: var(--gold-bright); }
.steel .lede { color: rgba(246,241,228,0.75); }
.steel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* dense is load-bearing: two figures span 2 of 3 columns, and with the
     default sparse flow the second one cannot start at column 3, so it wrapped
     and left a 389x611px hole in the middle of the haul-out evidence. An empty
     rectangle in the section that promises nothing is hidden reads as exactly
     the thing a rust-wary buyer fears. */
  grid-auto-flow: row dense;
  gap: 1rem;
  margin-top: 2.6rem;
}
@media (max-width: 900px) {
  .steel-grid { grid-template-columns: 1fr 1fr; }
  /* 7 figures where two span both columns is an odd count, so the last one
     would sit alone beside an empty cell. Let it close the section full width
     instead. dense cannot solve this: it backfills a hole with a LATER item and
     there is nothing after the last figure. */
  .steel-grid figure:last-child { grid-column: 1 / -1; }
  .steel-grid figure:last-child img { aspect-ratio: 8/3.05; }
}
.steel-grid figure { position: relative; overflow: hidden; border-radius: 2px; }
.steel-grid figure.wide { grid-column: span 2; }
.steel-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 0.7s var(--ease); }
.steel-grid figure.wide img { aspect-ratio: 8/3.05; }
.steel-grid figure:hover img { transform: scale(1.05); }
.steel-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem 0.8rem;
  background: linear-gradient(transparent, rgba(10,12,10,0.85));
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.steel-cta {
  margin-top: 2.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
  border: 1px dashed rgba(217,169,63,0.5);
  padding: 1.6rem 1.8rem;
}
.steel-cta p { font-family: var(--serif); font-style: italic; font-size: 1.25rem; flex: 1 1 20rem; }

/* ---------- DOSSIER (records block inside steel section) ---------- */
.dossier {
  margin-top: 2.8rem;
  border: 1px dashed rgba(217,169,63,0.5);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  align-items: center;
}
@media (max-width: 900px) { .dossier { grid-template-columns: 1fr; } }
.dossier h3 { font-size: 1.6rem; margin-bottom: 0.7rem; color: var(--gold-bright); }
.dossier p { color: rgba(246,241,228,0.82); font-size: 1.02rem; }
.dossier-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; align-items: stretch; }
@media (max-width: 640px) { .dossier-actions { flex-direction: column; } }
.dossier-actions .btn { justify-content: center; text-align: center; }

/* ---------- REFIT TIMELINE ---------- */
.refit-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 2.6rem;
}
@media (max-width: 900px) { .refit-cols { grid-template-columns: 1fr; } }
.refit-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: 1.8rem 1.6rem;
  box-shadow: 0 14px 40px -22px rgba(20,32,24,0.35);
}
.refit-col h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.refit-col ul { list-style: none; }
.refit-col li {
  font-size: 0.98rem;
  padding: 0.55rem 0 0.55rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.refit-col li:last-child { border-bottom: none; }
.refit-col li::before {
  content: "◆";
  position: absolute; left: 0; top: 0.62rem;
  color: var(--gold);
  font-size: 0.6rem;
}

/* ---------- SPECS ---------- */
.specs { background: var(--paper-2); }
.specs-grid {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
@media (max-width: 900px) { .specs-grid { grid-template-columns: 1fr; } }
.spec-block h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold);
}
.spec-block dl { display: grid; grid-template-columns: auto 1fr; }
.spec-block dt, .spec-block dd {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.spec-block dt { color: var(--ink-soft); padding-right: 1.2rem; }
.spec-block dd { text-align: right; font-family: var(--sans); font-size: 0.92rem; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 2.2rem; max-width: 54rem; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  color: var(--gold);
  font-size: 1.5rem;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 46em; }
.faq-item .faq-body p + p { margin-top: 0.8em; }

/* ---------- VISIT / CONTACT ---------- */
.visit { background: var(--green-night); color: var(--paper); }
.visit .eyebrow { color: var(--gold-bright); }
.visit .eyebrow::before { background: var(--gold-bright); }
.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 940px) { .visit-grid { grid-template-columns: 1fr; } }
.broker-card {
  background: rgba(246,241,228,0.05);
  border: 1px solid rgba(217,169,63,0.4);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  backdrop-filter: blur(4px);
}
.broker-card h3 { font-size: 2rem; margin: 0 0 0.2rem; }
.broker-card .bk-org { color: rgba(246,241,228,0.75); font-style: italic; }
.broker-card .bk-lines { margin-top: 1.6rem; display: grid; gap: 0.85rem; }
.broker-card .bk-lines a {
  display: flex; align-items: center; gap: 0.9rem;
  min-height: 48px;
  text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  color: var(--paper);
  transition: color 0.2s, background 0.25s, border-color 0.25s;
}
.broker-card .bk-lines a:hover { color: var(--gold-bright); }
/* The page's actual conversion sat here as a 17px text link with a 35px tap
   target, quieter than the gold "Download the Spec Sheet" buttons 13,000px
   above it. This is the moment the whole page is built toward; it gets the
   weight. */
.broker-card .bk-lines .bk-call { /* outranks the generic .bk-lines a colour above; measured 1.92:1 cream-on-gold before this */
  background: var(--gold-bright);
  color: var(--green-night);
  border: 1px solid var(--gold-bright);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-size: 1.08rem;
}
.broker-card .bk-lines .bk-call:hover { background: transparent; color: var(--gold-bright); }
.broker-card .bk-lines .bk-call .ic { border-color: currentColor; color: currentColor; }
.broker-card .bk-lines .ic {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(217,169,63,0.5);
  display: grid; place-items: center;
  color: var(--gold-bright);
  flex: none;
}
/* icons are drawn, never a Unicode glyph standing in for an icon system: the
   old &#9990; rendered as an illegible mark at this size */
.broker-card .bk-lines .ic svg { width: 15px; height: 15px; display: block; }
.bk-note { margin-top: 1.1rem; font-size: 0.86rem; line-height: 1.6; color: rgba(246,241,228,0.62); }
.visit-notes { margin-top: 2rem; font-size: 0.95rem; color: rgba(246,241,228,0.72); }
.visit-notes p + p { margin-top: 0.6em; }

/* ---------- FOOTER ---------- */
footer {
  background: #0a1712;
  color: rgba(246,241,228,0.55);
  padding: 2.6rem clamp(1.2rem, 5vw, 4.5rem);
  font-size: 0.82rem;
}
.foot-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
.foot-mark { font-family: var(--serif); letter-spacing: 0.3em; font-size: 1.3rem; color: var(--gold-bright); }
.foot-legal { max-width: 46em; line-height: 1.7; }
.foot-legal a { color: rgba(246,241,228,0.8); }

/* ---------- back to top ----------
   16,683px on desktop and 21,212px on mobile with no way back. Appears only
   after 1.5 viewports so it never competes with the hero. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 65;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217,169,63,0.5);
  border-radius: 50%;
  background: rgba(14,33,25,0.92);
  backdrop-filter: blur(6px);
  color: var(--gold-bright);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s;
}
.to-top.shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold-bright); color: var(--green-night); }
.to-top svg { width: 17px; height: 17px; display: block; }
/* clears the sticky call bar, which owns the bottom edge on mobile */
@media (max-width: 720px) { .to-top { bottom: calc(clamp(1rem, 3vw, 2rem) + 58px); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity 0.2s linear; } }

/* focus visibility */
a:focus-visible, button:focus-visible, .gitem:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}
.steel a:focus-visible, .visit a:focus-visible, .loop a:focus-visible { outline-color: var(--paper); }

/* compass deco */
.compass {
  position: absolute;
  opacity: 0.1;
  pointer-events: none;
  width: clamp(180px, 24vw, 340px);
}
.spin-slow { animation: spin 90s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- sticky mobile call bar ---------- */
.call-bar {
  display: none;
  transform: translateY(110%);
  transition: transform 0.4s var(--ease);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--green);
  color: var(--white);
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(14,33,25,0.35);
  border-top: 2px solid var(--gold-bright);
}
@media (max-width: 720px) {
  /* flex, not block: the bar now carries a drawn phone icon beside the label */
  .call-bar { display: flex; }
  .call-bar.shown { transform: none; }
  html:not(.js) .call-bar { transform: none; }
  .call-bar svg { width: 17px; height: 17px; flex: none; }
  footer { padding-bottom: 6.5rem; }
}

/* ---------- print: the spec sheet ---------- */
@media print {
  body::before, body::after, .nav, .chapters, .to-top, .ribbon, .hero-img, .hero::after, .hero-scroll,
  .loop, .gallery-filters, .gallery, #gallery, .lb, .call-bar, .dossier, #faq, .feature,
  .feature-photos, .story-photos, .steel-cta, .btn, .hero-ctas { display: none !important; }
  /* .steel-grid deliberately NOT hidden. This sheet exists to be handed to a
     surveyor, and the haul-out frames are the single most useful thing on it.
     Printing a steel-boat spec sheet with no picture of the steel was the
     defect. Two-up so the section costs one page, not five. */
  .steel-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    break-inside: avoid;
  }
  .steel-grid figure.wide { grid-column: span 2; }
  .steel-grid img { aspect-ratio: 4/3 !important; }
  .steel-grid figure.wide img { aspect-ratio: 8/3.05 !important; }
  /* The screen figure is a clipping frame: overflow:hidden plus img{height:100%}
     so the absolutely-positioned caption can sit over the photo. Turning the
     caption static below re-flows it OUTSIDE that frame, where overflow:hidden
     eats it -- all seven captions were silently absent from the printed sheet
     while the CSS above looked correct. Open the frame and let the img size
     itself. (Same height:100% trap as the sliver bug in e9e28b5.) */
  .steel-grid figure { overflow: visible !important; }
  .steel-grid img { height: auto !important; }
  .steel-grid figcaption {
    position: static !important;
    background: none !important;
    color: #333 !important;
    padding: 0.25rem 0 0 !important;
    font-size: 7.5pt !important;
    letter-spacing: 0.06em !important;
  }
  .specs-grid, .refit-cols { break-inside: auto; }
  .spec-block, .refit-col { break-inside: avoid; }
  /* keep a section heading with the block it introduces: without this the
     Particulars eyebrow and title orphaned onto a page of their own when the
     fuel section was removed on 2026-08-17 */
  .eyebrow, .section-title { break-after: avoid; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  .steel, .steel .section-title, .steel .eyebrow { background: none !important; color: #000 !important; }
  .section-title em { color: #333 !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: auto; color: #000; padding-top: 1rem; }
  .hero h1 { font-size: 34pt; text-shadow: none; }
  .hero-kicker, .hero-sub { color: #000; text-shadow: none; }
  /* The screen rule paints this box rgba(14,33,25,0.88) to beat the photo
     behind it. On paper there is no photo, so that box composites to
     rgb(43,60,53) and the #000 above lands on it at 1.80:1 -- the kicker
     effectively disappears from the sheet a buyer hands his surveyor.
     Raising the screen alpha is what broke print; strip the box here. */
  .hero-kicker { background: none !important; backdrop-filter: none !important; padding-left: 0; padding-right: 0; }
  .hero-kicker::before, .hero-kicker::after { background: #666 !important; opacity: 1; }
  .hero-price { color: #000; }
  section { padding: 0.8rem 0 !important; }
  .section-pad { padding: 0.8rem 0; }
  .stats, .stat { border-color: #ccc; }
  .visit, .steel { background: none; color: #000; }
  .visit .lede, .steel .lede { color: #333 !important; }
  .visit-notes, .visit-notes p, .visit-notes a { color: #333 !important; }
  .visit-notes b { color: #6b5320 !important; }
  .broker-card { border: 1px solid #999; background: none; }
  .broker-card .bk-lines a { color: #000; }
  .broker-card h3, .broker-card .bk-org { color: #222 !important; }
  /* bk-note is cream at 62% for the dark card on screen. Print strips the card
     background, leaving cream on white at ~1.05:1 -- the line telling the buyer
     that showings, records, survey and sea trial all go through the owner was
     invisible on the printed sheet. */
  .broker-card .bk-note { color: #333 !important; }
  /* dd is text-align:right with no horizontal padding. At desktop the three
     spec columns keep it clear of anything, but print collapses to one column
     and every value ended up flush against the edge of the beige block. */
  .spec-block dd { padding-right: 0.5rem !important; }
  .spec-block dt { padding-left: 0.5rem !important; }
  .hero-sub .dot:nth-last-of-type(2) { display: none; }
  .hero-price { display: block; margin-top: 0.35rem; }
  .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
  footer { background: none; color: #333; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}