/* Offing: the yard in daylight. Concrete, ink, fender orange, hull white, and pencil. */
@font-face { font-family: "Big Shoulders Stencil Display"; src: url("/assets/fonts/specimen/big-shoulders-stencil-display-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/specimen/onest-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

body.spec-offing { margin: 0; background: #C9CDCB; }

.of {
  --of-concrete: #C9CDCB; --of-concrete-2: #BCC1BF; --of-ink: #0E1517; --of-fender: #FF5B1F; --of-hull: #F6F5F1;
  --of-graphite: #3B4345; --of-graphite-2: #7B8486; --of-steel: #8E979A; --of-steel-hi: #E6E9E9; --of-brass: #B8913F;
  --of-rule: rgba(14, 21, 23, .16); --of-sea-deep: #3E5D5C; --of-sea: #6A8984; --of-sea-lit: #B3C4BE;
  --of-stencil: "Big Shoulders Stencil Display", "Arial Narrow", sans-serif;
  --of-text: "Onest", "Helvetica Neue", Arial, sans-serif;
  --of-nav-h: 56px; --of-side: clamp(16px, 4vw, 64px); --of-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative; color: var(--of-ink); font-family: var(--of-text); font-size: clamp(16px, .2vw + 15px, 17px); line-height: 1.58; font-weight: 400;
  background-color: var(--of-concrete);
  background-image: radial-gradient(rgba(14, 21, 23, .045) 1px, transparent 1.6px), radial-gradient(rgba(14, 21, 23, .04) 1.4px, transparent 2.4px);
  background-size: 3px 3px, 7px 7px; background-position: 0 0, 2px 3px;
  font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.of *, .of *::before, .of *::after { box-sizing: border-box; }
.of :focus-visible { outline: 3px solid var(--of-fender); outline-offset: 3px; }
.of a { color: inherit; }
.of-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.of-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── the rail, the tape, the sleeve ───────────────────────── */
.of-rail { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--of-steel-hi) 0 28%, var(--of-steel) 60%, #6E777A 100%); box-shadow: 0 1px 0 rgba(14, 21, 23, .35), 0 3px 6px rgba(14, 21, 23, .12); }
.of-tape { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 44px; padding: 0 20px; border: 0; background: none; color: var(--of-ink); font: 640 12px/1 var(--of-text); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.of-tape::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--of-fender); clip-path: polygon(3px 0, calc(100% - 2px) 0, 100% 12%, calc(100% - 3px) 31%, 100% 50%, calc(100% - 2px) 69%, 100% 88%, calc(100% - 3px) 100%, 2px 100%, 0 86%, 3px 68%, 0 50%, 2px 32%, 0 14%); }
.of-tape:disabled { cursor: default; }
.of-tape:disabled::before { background: #E9C3B2; }
.of-sleeve { position: relative; background: var(--of-hull); border-radius: 3px; }
.of-sleeve::after { content: ""; position: absolute; inset: -6px; border-radius: 6px; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .42) 48%, transparent 56%), rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.of-yardmark { position: absolute; right: var(--of-side); top: clamp(24px, 4vw, 56px); margin: 0; font: 840 clamp(120px, 17vw, 300px)/.8 var(--of-stencil); text-transform: uppercase; color: rgba(14, 21, 23, .09); pointer-events: none; user-select: none; white-space: nowrap; }

/* ── pencil ─────────────────────────────────────────────────── */
.of-fig { display: block; flex: none; overflow: visible; filter: url(#of-graphite); }
.of-fig path { fill: none; stroke: var(--of-graphite); stroke-width: var(--of-sw, .85); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.of-fig.of-was path { stroke: var(--of-graphite-2); }
.of-fig .of-strike, .of-fig.of-was .of-strike { stroke: var(--of-graphite); stroke-width: calc(var(--of-sw, .85) * .8); }

/* ── nav ────────────────────────────────────────────────────── */
.of-nav { position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--of-nav-h); background: var(--of-hull); }
.of-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(180deg, var(--of-steel-hi), var(--of-steel) 70%, #6E777A); box-shadow: 0 2px 4px rgba(14, 21, 23, .12); }
.of-nav-in { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 36px); height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--of-side); }
.of-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 760 22px/1 var(--of-stencil); letter-spacing: .04em; text-transform: uppercase; margin-right: auto; }
.of-gp { display: block; flex: none; }
.of-mk-o { fill: var(--of-ink); }
.of-mk-cut { fill: var(--of-hull); }
.of-mk-sea { fill: var(--of-fender); }
.of-links { display: flex; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.of-links a { display: inline-block; padding: 8px 0; font: 500 15px/1.2 var(--of-text); text-decoration: none; background: linear-gradient(var(--of-ink), var(--of-ink)) 0 100% / 0 1.5px no-repeat; transition: background-size .26s var(--of-ease); }
.of-links a:hover { background-size: 100% 1.5px; }
.of-ask-tab { min-height: 36px; padding: 0 18px; }
.of-menu { display: none; }

/* ── hero: the sea trial ───────────────────────────────────── */
.of-hero { position: relative; height: clamp(560px, calc(100svh - var(--bar-h, 40px) - var(--of-nav-h)), 940px); overflow: hidden; --of-rail-y: 64px; --of-card-w: 432px; --of-card-r: 64px; }
.of-trial { position: absolute; inset: 0; overflow: hidden; background: var(--of-sea-deep); }
.of-poster { position: absolute; inset: 0; display: block; }
.of-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%; }
.of-helm { position: absolute; inset: 0; outline-offset: -6px; cursor: crosshair; touch-action: none; }
.of-helm:focus-visible { outline-offset: -6px; }
.of-sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.of-live .of-sea { opacity: 1; }
.of-live .of-poster { visibility: hidden; }
.of-pontoon { position: absolute; left: 0; bottom: 0; width: 30%; height: 76px; pointer-events: none; border-top: 4px solid #6F7778;
  background-color: #C3C8C6; background-image: radial-gradient(rgba(14, 21, 23, .09) 1px, transparent 1.5px), linear-gradient(90deg, transparent 0 calc(33.3% - 1px), rgba(14, 21, 23, .2) calc(33.3% - 1px) 33.3%, transparent 33.3% calc(66.6% - 1px), rgba(14, 21, 23, .2) calc(66.6% - 1px) 66.6%, transparent 66.6%);
  background-size: 5px 5px, 100% 100%; box-shadow: 0 -1px 0 rgba(255, 255, 255, .25), 5px -5px 14px rgba(14, 21, 23, .32); }
.of-spray { position: absolute; left: 20px; bottom: 7px; font: 840 60px/.8 var(--of-stencil); text-transform: uppercase; color: rgba(14, 21, 23, .62); letter-spacing: .02em; white-space: nowrap;
  -webkit-mask-image: radial-gradient(rgba(0, 0, 0, .8) 1px, #000 1.6px); mask-image: radial-gradient(rgba(0, 0, 0, .8) 1px, #000 1.6px); -webkit-mask-size: 4px 4px; mask-size: 4px 4px; }
.of-fender { position: absolute; top: -12px; width: 30px; height: 13px; border-radius: 7px; background: linear-gradient(180deg, #FF7A45, var(--of-fender) 45%, #D9491A); box-shadow: 2px 3px 4px rgba(14, 21, 23, .35); }
.of-fender:nth-of-type(1) { left: 52%; }
.of-fender:nth-of-type(2) { left: 80%; }
.of-fender:nth-of-type(3) { right: -9px; top: 18px; width: 13px; height: 30px; background: linear-gradient(90deg, #D9491A, var(--of-fender) 55%, #FF7A45); }
.of-cleat { position: absolute; top: 6px; width: 24px; height: 8px; border-radius: 4px; background: #4F5759; box-shadow: 1px 2px 0 rgba(14, 21, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.of-cleat:nth-of-type(1) { left: 40%; }
.of-cleat:nth-of-type(2) { left: 68%; }
.of-wedge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .3s var(--of-ease); }
.of-wedge path { fill: none; stroke: var(--of-hull); stroke-width: 1.4; stroke-linecap: round; opacity: .9; filter: url(#of-graphite); }
.of-wedge .of-fig path { stroke: var(--of-hull); }
.of-wedge-on .of-wedge { opacity: 1; }
.of-wedge-note { position: absolute; left: 24px; top: calc(var(--of-rail-y) + 28px); max-width: 250px; margin: 0; padding: 10px 14px; background: var(--of-hull); font: 420 13px/1.4 var(--of-text); color: var(--of-graphite); box-shadow: 0 6px 14px rgba(14, 21, 23, .25); rotate: -1.2deg; }
.of-hint { position: absolute; left: 32px; bottom: 104px; max-width: 250px; margin: 0; padding: 12px 16px 12px 30px; background: var(--of-hull); color: var(--of-ink); font: 500 14px/1.4 var(--of-text); pointer-events: none; box-shadow: 0 8px 16px rgba(14, 21, 23, .28); rotate: -2deg; transform-origin: 12px 50%;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(50% + 8px), 0 calc(50% - 8px)); }
.of-hint::before { content: ""; position: absolute; left: 12px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--of-sea-deep); box-shadow: 0 0 0 2px var(--of-brass); }
.of-hint.of-torn { animation: of-tear .7s var(--of-ease) forwards; }
@keyframes of-tear { 30% { rotate: -9deg; } 100% { rotate: -24deg; translate: -30px 90px; opacity: 0; } }
.of-pen-chip { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 0 14px; font-size: 11px; background: var(--of-fender); box-shadow: 0 4px 10px rgba(14, 21, 23, .3); }
@media (min-width: 900px) { .of-pen-chip { display: none; } }
.of-hero:not(.of-live) .of-pen-chip, .of-hero:not(.of-sim) .of-pontoon { display: none; }

.of-hero-rail { position: absolute; left: 0; right: 0; top: var(--of-rail-y); z-index: 3; box-shadow: 0 1px 0 rgba(14, 21, 23, .35), 6px 12px 7px rgba(14, 21, 23, .2); }
.of-hero-hang { position: absolute; z-index: 4; right: var(--of-card-r); top: calc(var(--of-rail-y) - 9px); width: var(--of-card-w); transform-origin: 50% 0; rotate: 1.1deg; }
.of-hook { position: absolute; left: calc(50% - 20px); top: 0; z-index: 2; overflow: visible; }
.of-hook-s { fill: none; stroke: #7F888B; stroke-width: 3.2; stroke-linecap: round; }
.of-grom { fill: var(--of-brass); stroke: #8C6B27; stroke-width: 1; }
.of-grom-hole { fill: #3E4447; }
.of-hcard { margin-top: 38px; padding: 26px 28px 22px; box-shadow: 0 2px 0 rgba(14, 21, 23, .08), 0 22px 44px -12px rgba(14, 21, 23, .5); }
.of-head { margin: 0 0 14px; font: 680 22px/1 var(--of-stencil); letter-spacing: .03em; text-transform: uppercase; }
.of-hcard h1 { margin: 0 0 14px; font: 780 clamp(34px, 4.4vw + 4px, 68px)/.92 var(--of-stencil); letter-spacing: .005em; text-transform: uppercase; }
.of-br-b { display: none; }
.of-sub { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #1D2628; max-width: 34em; }
.of-pencil { margin: 0; padding: 4px 0 0; border-top: 1px solid var(--of-rule); }
.of-prow { display: grid; grid-template-columns: 118px 1fr; align-items: center; min-height: 40px; border-bottom: 1px solid var(--of-rule); }
.of-prow dt { font: 640 12px/1.2 var(--of-text); letter-spacing: .09em; text-transform: uppercase; }
.of-prow dt span { display: block; font-weight: 440; letter-spacing: .04em; text-transform: none; color: var(--of-graphite); }
.of-slate { position: relative; margin: 0; min-height: 34px; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; padding: 3px 2px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.of-line { display: flex; align-items: center; gap: 10px; }
.of-smudge { position: absolute; right: 2px; top: 50%; translate: 0 -50%; opacity: .3; filter: blur(.7px); pointer-events: none; }
.of-small { margin: 10px 0 14px; font: 420 13px/1.45 var(--of-text); color: var(--of-graphite); }
.of-hbtns { display: none; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.of-live .of-hbtns { display: flex; }
.of-pbtn { min-height: 44px; padding: 0 2px; border: 0; background: none; font: 560 14px/1 var(--of-text); color: var(--of-ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--of-graphite-2); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.of-pbtn[aria-pressed="true"] { text-decoration-color: var(--of-fender); text-decoration-thickness: 3px; }
.of-pbtn:disabled { color: var(--of-graphite-2); cursor: default; }
.of-down { display: inline-block; margin-top: 12px; font: 560 14px/1.2 var(--of-text); text-decoration: none; }
.of-down span { display: inline-block; transition: translate .26s var(--of-ease); }
.of-down:hover span { translate: 0 3px; }
.of-lever { display: none; }

@media (max-width: 1180px) and (min-width: 900px) {
  .of-hero { --of-rail-y: 48px; --of-card-w: 360px; --of-card-r: 32px; }
  .of-hcard { padding: 22px 24px 18px; }
  .of-hcard h1 { font-size: 52px; }
  .of-pontoon { width: 36%; }
  .of-spray { font-size: 56px; }
}
/* a short hero (1366 x 768, 1280 x 720): the compact card */
@media (min-width: 900px) and (max-height: 820px) {
  .of-sub-more { display: none; }
  .of-hcard h1 { font-size: clamp(34px, 3.4vw + 4px, 56px); }
  .of-pencil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
  .of-prow { grid-template-columns: 1fr; align-content: start; padding: 6px 0 2px; }
  .of-prow dt span { display: inline; }
  .of-slate { min-height: 30px; }
  .of-small { margin: 8px 0 10px; }
  .of-down { margin-top: 6px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .of-small { display: none; }
  .of-hcard { padding-top: 20px; padding-bottom: 14px; }
  .of-head { margin-bottom: 10px; }
}

/* phones and tablets held upright: water above, the card hung below it */
@media (max-width: 899px) {
  .of { --of-nav-h: 48px; }
  .of-links { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 3px); flex-direction: column; gap: 0; padding: 8px 20px 14px; background: var(--of-hull); box-shadow: 0 16px 30px rgba(14, 21, 23, .25); border-radius: 0 0 3px 3px; }
  .of-links a { display: block; padding: 12px 0; font-size: 17px; }
  .of-nav-open .of-links { display: flex; }
  .of-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 600 14px/1 var(--of-text); color: var(--of-ink); letter-spacing: .04em; cursor: pointer; }
  .of-menu::after { content: ""; width: 14px; height: 8px; margin-left: 8px; border-top: 2px solid; border-bottom: 2px solid; }
  .of-ask-tab { padding: 0 14px; }
  .of-hero { height: auto; overflow: visible; --of-rail-y: calc(var(--of-sea-h) - 70px); --of-sea-h: max(260px, 52svh); padding-bottom: 8px; }
  .of-trial { position: relative; height: var(--of-sea-h); }
  .of-helm { touch-action: pan-y; }
  .of-poster img { object-position: 50% 30%; }
  .of-hero-hang { position: relative; right: auto; top: auto; width: auto; margin: -79px 16px 0; rotate: .6deg; display: flow-root; }
  .of-hcard { margin-top: 38px; padding: 20px 20px 18px; }
  .of-hcard h1 { font-size: clamp(34px, 9vw + 4px, 64px); }
  .of-pontoon { width: 46%; height: 46px; bottom: 84px; max-width: 300px; }
  .of-spray { font-size: 38px; left: 10px; bottom: 4px; }
  .of-cleat { top: 5px; width: 18px; height: 6px; }
  .of-fender { width: 22px; height: 10px; top: -9px; }
  .of-fender:nth-of-type(3) { top: 8px; width: 10px; height: 22px; }
  .of-hint { left: 16px; bottom: 150px; max-width: 220px; font-size: 13px; top: auto; }
  .of-wedge-note { left: 16px; top: 12px; max-width: 200px; font-size: 12px; }
  .of-pencil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
  .of-prow { grid-template-columns: 1fr; align-content: start; padding: 8px 0 4px; }
  .of-slate { min-height: 30px; }
  .of-live .of-lever { display: block; position: absolute; left: 12px; top: 64px; width: 44px; height: 196px; }
  .of-live .of-hcard { padding-left: 68px; }
  .of-live .of-pen-btn { display: none; }
  .of-hcard { display: flex; flex-direction: column; }
  .of-head { order: 0; }
  .of-hcard h1 { order: 1; }
  .of-pencil { order: 2; }
  .of-sub { order: 3; margin: 14px 0 0; }
  .of-small { order: 4; }
  .of-hbtns { order: 5; }
  .of-down { order: 6; align-self: flex-start; }
  .of-lever input { writing-mode: vertical-lr; direction: rtl; width: 44px; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, transparent 20px, var(--of-ink) 20px 24px, transparent 24px); cursor: pointer; }
  .of-lever input::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 22px; border-radius: 11px; background: var(--of-fender); box-shadow: inset 0 -4px 0 rgba(14, 21, 23, .2), 0 2px 4px rgba(14, 21, 23, .35); }
  .of-lever input::-moz-range-thumb { width: 40px; height: 22px; border: 0; border-radius: 11px; background: var(--of-fender); }
  .of-lever::after { content: "Throttle"; position: absolute; left: 50%; bottom: -22px; translate: -50% 0; font: 640 10px/1 var(--of-text); letter-spacing: .09em; text-transform: uppercase; color: var(--of-graphite); }
}
@media (max-width: 899px) and (min-width: 600px) {
  .of-hero-hang { margin-left: auto; margin-right: 32px; max-width: 560px; }
  .of-hero { --of-sea-h: max(360px, 56svh); }
}
@media (max-width: 899px) and (max-height: 640px) {
  .of-hero { --of-sea-h: max(220px, 44svh); --of-rail-y: calc(var(--of-sea-h) - 54px); }
  .of-hero-hang { margin-top: -63px; }
  .of-hcard { margin-top: 38px; padding-top: 14px; }
  .of-head { margin-bottom: 8px; }
  .of-hcard h1 { font-size: 34px; margin-bottom: 8px; }
  .of-br-a { display: none; }
  .of-br-b { display: inline; }
  .of-live .of-lever { top: 44px; height: 150px; }
  .of-pontoon { display: none; }
  .of-hint { bottom: 76px; left: 10px; max-width: 200px; font-size: 12px; padding: 8px 10px 8px 26px; }
}
@media (max-width: 380px) {
  .of-live .of-hcard { padding-left: 62px; padding-right: 14px; }
  .of-prow dt { font-size: 11px; letter-spacing: .06em; }
}

/* ── the sections: each hangs from its own rail ─────────────── */
.of-sec { position: relative; padding: clamp(64px, 9vw, 144px) var(--of-side); overflow: clip; }
.of-sec > .of-rail { position: absolute; left: 0; right: 0; top: 0; }
.of-sec > :not(.of-rail, .of-yardmark) { position: relative; max-width: 1312px; margin-left: auto; margin-right: auto; }
.of-sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.of-sec-head > * { max-width: 760px; }
.of-sec h2 { margin: 0 0 18px; font: 740 clamp(34px, 3.2vw + 6px, 56px)/.95 var(--of-stencil); text-transform: uppercase; text-wrap: balance; }
.of-sec h3 { margin: 0 0 8px; font: 680 clamp(22px, 1.4vw + 8px, 30px)/1 var(--of-stencil); letter-spacing: .03em; text-transform: uppercase; }
.of-lead { margin: 0 0 16px; font-size: clamp(18px, .6vw + 14px, 22px); line-height: 1.45; font-weight: 380; max-width: 34em; }
.of-sec p { max-width: 62ch; }
.of-sec-load, .of-sec-yard { background-color: var(--of-concrete-2); }
.of-cl { font: 640 12px/1.2 var(--of-text); letter-spacing: .09em; text-transform: uppercase; }
.of-pn { display: inline-block; font: 500 17px/1.35 var(--of-text); color: var(--of-graphite); filter: url(#of-graphite); rotate: -.8deg; }
.of-close, .of-nameline { font-size: 17px; font-weight: 500; }
.of-inline { min-height: 0; margin-left: 4px; font-size: inherit; }
.of-card, .of-sheet, .of-tag, .of-water, .of-chart-card, .of-crew-card, .of-form, .of-bring, .of-taped { background: var(--of-hull); border-radius: 3px; box-shadow: 0 2px 0 rgba(14, 21, 23, .06), 0 16px 30px -14px rgba(14, 21, 23, .45); }
.of-tag-hang, .of-form-hang { position: relative; display: flow-root; }
.of-hang > .of-hook { position: absolute; left: calc(50% - 20px); top: 0; z-index: 2; }
.of-corner { display: inline-block; padding: 5px 9px 4px; background: var(--of-fender); font: 640 11px/1 var(--of-text); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 50%, 100% 100%, 0 100%, 2px 50%, 0 0); }

/* ── the rack ─────────────────────────────────────────────── */
.of-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 16px; margin: 0; padding: 0; list-style: none; }
.of-rk { position: relative; padding-top: 38px; }
.of-rk::before { content: ""; position: absolute; top: 12px; left: -100vw; right: -100vw; height: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--of-steel-hi) 0 28%, var(--of-steel) 60%, #6E777A); box-shadow: 0 1px 0 rgba(14, 21, 23, .35); }
.of-rk > .of-hook { position: absolute; left: calc(50% - 20px); top: 3px; z-index: 3; }
.of-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 16px 16px; text-decoration: none; rotate: var(--of-tilt, 0deg); transform-origin: 50% -30px; transition: translate .3s var(--of-ease), rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
.of-card::after, .of-sheet::after, .of-tag::after, .of-form::after { content: ""; position: absolute; inset: -6px; border-radius: 6px; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .38) 48%, transparent 56%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.of-card:hover, .of-card:focus-visible { translate: 0 -6px; rotate: calc(var(--of-tilt, 0deg) + 1deg); }
.of-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.of-bay { font: 820 clamp(44px, 4vw, 64px)/.8 var(--of-stencil); }
.of-type { font: 620 15px/1.25 var(--of-text); }
.of-card-pr { display: block; width: 100%; height: auto; aspect-ratio: 1230 / 560; margin: 2px 0; }
.of-cfigs { display: grid; }
.of-cf { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; border-bottom: 1px solid var(--of-rule); }
.of-cf .of-cl { font-size: 11px; }
.of-cf .of-fig { margin-left: auto; }
.of-cnote { margin-top: auto; padding-top: 6px; font: 500 15px/1.3 var(--of-text); color: var(--of-graphite); filter: url(#of-graphite); rotate: -1deg; }

/* the profiles, printed in ink */
.of-card-pr use, .of-sh-pr use, .of-lines use, .of-lines path { stroke: var(--of-ink); }
[id^="of-pr-"] path, [id^="of-pr-"] ellipse, .of-lines path, .of-pr-wl { fill: none; stroke: var(--of-ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
[id^="of-pr-"] .of-pr-hull { fill: var(--of-hull); }
[id^="of-pr-"] .of-pr-dark { fill: var(--of-graphite); }
[id^="of-pr-"] .of-pr-glass { fill: rgba(123, 132, 134, .35); }
[id^="of-pr-"] .of-pr-fine, .of-lines .of-pr-fine { stroke: var(--of-graphite-2); stroke-width: .8px; }
[id^="of-pr-"] .of-pr-boot { stroke: var(--of-fender); stroke-width: 2.5px; }
.of-pr-wl { stroke: var(--of-sea); stroke-dasharray: 6 4; }

/* the sheet */
.of-sheets { display: grid; gap: 40px; margin-top: 56px; }
.of-sheet-back { display: none; }
.of-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "ph side" "pr pr" "vd vd" "nt acts"; gap: 24px 40px; padding: clamp(20px, 3vw, 40px); scroll-margin-top: calc(var(--bar-h, 40px) + 80px); }
.of-sh-ph { grid-area: ph; margin: 0; }
.of-sh-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.of-sh-lines { display: grid; align-content: center; gap: 12px; padding: 16px; border: 1px solid var(--of-rule); background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(106, 137, 132, .12) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(106, 137, 132, .12) 23px 24px); }
.of-lines { display: block; width: 100%; height: auto; }
.of-lines-note { margin: 0; font: 500 15px/1.35 var(--of-text); color: var(--of-graphite); filter: url(#of-graphite); rotate: -.6deg; }
.of-sh-side { grid-area: side; }
.of-sh-bay { margin: 0; font: 820 clamp(88px, 8vw, 120px)/.8 var(--of-stencil); }
.of-sheet h3 { margin: 16px 0 10px; }
.of-sh-cond { margin: 0 0 16px; }
.of-spec { width: 100%; border-collapse: collapse; font: 460 15px/1.3 var(--of-text); font-variant-numeric: tabular-nums lining-nums; }
.of-spec th, .of-spec td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--of-rule); text-align: left; vertical-align: top; }
.of-spec th { width: 42%; font: 640 11px/1.9 var(--of-text); letter-spacing: .09em; text-transform: uppercase; }
.of-sh-pr { grid-area: pr; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--of-rule); }
.of-sh-pr svg { display: block; width: 100%; height: auto; max-height: 210px; }
.of-sh-pr figcaption { margin-top: 6px; font: 420 13px/1.4 var(--of-text); color: var(--of-graphite); }
.of-verdict { grid-area: vd; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.of-verdict dt { margin-bottom: 6px; font: 680 22px/1 var(--of-stencil); letter-spacing: .03em; text-transform: uppercase; }
.of-verdict dd { margin: 0; }
.of-ynote { grid-area: nt; display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 18px; background: #E9E6DC; clip-path: polygon(0 4%, 3% 0, 100% 3%, 99% 50%, 100% 97%, 2% 100%, 0 96%, 1% 50%); }
.of-sheet-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: flex-end; margin: 0; }
.of-back { font-weight: 560; text-underline-offset: 5px; }
.of-js .of-sheet { display: none; }
.of-js .of-sheet.of-on { display: grid; }
.of-js .of-sheets { margin-top: 0; }
.of-rack-open .of-cards { display: none; }
.of-rack-open .of-sheet-back { display: inline-flex; margin-bottom: 20px; }
::view-transition-group(of-sheet), ::view-transition-group(of-bay), ::view-transition-group(of-figs) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(of-sheet), ::view-transition-new(of-sheet) { height: 100%; object-fit: cover; }
.of-drop { animation: of-drop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes of-drop { from { rotate: calc(var(--of-tilt, 0deg) + 1.5deg); translate: 0 -6px; } }

/* ── load it up ──────────────────────────────────────────── */
.of-load-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px 48px; align-items: start; }
.of-boatview { position: relative; max-width: 860px; }
.of-load-cv { display: none; width: 100%; height: 100%; }
.of-ld-stills { display: grid; gap: 18px; }
.of-ld-still { margin: 0; }
.of-ld-svg { display: block; width: 100%; height: auto; }
.of-ld-svg path, .of-ld-svg circle, .of-ld-svg rect { fill: none; stroke: var(--of-ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.of-ld-svg .of-pr-hull, .of-ld-item circle, .of-ld-item rect, .of-ld-item path { fill: var(--of-hull); }
.of-ld-svg .of-pr-dark { fill: var(--of-graphite); }
.of-ld-svg .of-pr-glass { fill: rgba(123, 132, 134, .35); }
.of-ld-svg .of-pr-boot { stroke: var(--of-fender); stroke-width: 4; }
.of-ld-behind { opacity: .55; }
.of-ld-svg .of-ld-sea { fill: var(--of-sea); stroke: none; opacity: .86; }
.of-ld-svg .of-ld-line { stroke: var(--of-sea-lit); stroke-width: 2; }
.of-ld-still figcaption { font: 420 14px/1.45 var(--of-text); color: var(--of-graphite); }
.of-ld-still b { color: var(--of-ink); font-weight: 640; }
.of-loader { display: none; }
.of-js .of-boatview { aspect-ratio: 16 / 9; }
.of-js .of-load-cv { display: block; position: absolute; inset: 0; }
.of-js .of-ld-stills { display: none; }
.of-js .of-loader { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; margin-top: 28px; }
.of-deck { position: relative; aspect-ratio: 910 / 320; max-width: 640px; }
.of-deck > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.of-deck-v { display: none; }
.of-deck path, .of-deck circle { fill: none; stroke: var(--of-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.of-deck .of-dk-hull { fill: var(--of-hull); }
.of-deck .of-dk-house { fill: #E9E6DC; }
.of-deck .of-dk-fine { stroke: var(--of-graphite-2); stroke-width: 1px; }
.of-deck .of-dk-dash { stroke: var(--of-graphite-2); stroke-dasharray: 5 4; }
.of-slot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px dashed var(--of-graphite-2); border-radius: 50%; background: rgba(246, 245, 241, .9); color: var(--of-graphite-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.of-slot svg, .of-tok svg, .of-fuel svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.of-slot.of-full { border: 2px solid var(--of-ink); color: var(--of-ink); background: var(--of-hull); }
.of-slot.of-can { border: 2.5px solid var(--of-fender); background: #FFE3D6; }
.of-slot.of-over { background: var(--of-fender); color: var(--of-ink); }
.of-tray-wrap .of-cl { margin: 0 0 10px; }
.of-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.of-tok { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 10px; border: 1.5px solid var(--of-rule); border-radius: 3px; background: var(--of-hull); color: var(--of-ink); font: 560 14px/1.2 var(--of-text); text-align: left; cursor: grab; touch-action: none; }
.of-tok small { display: block; font-weight: 420; font-size: 12px; color: var(--of-graphite); }
.of-tok .of-left { margin-left: 4px; font: 640 11px/1 var(--of-text); letter-spacing: .06em; text-transform: uppercase; color: var(--of-graphite); }
.of-tok[aria-checked="true"] { border-color: var(--of-ink); box-shadow: inset 0 -4px 0 var(--of-fender); }
.of-tok:disabled { opacity: .45; cursor: default; }
.of-ghost { position: fixed; z-index: 800; pointer-events: none; translate: -50% -50%; box-shadow: 0 10px 24px rgba(14, 21, 23, .35); }
.of-fuel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
.of-fuel label { display: inline-flex; align-items: center; gap: 8px; font: 640 12px/1 var(--of-text); letter-spacing: .09em; text-transform: uppercase; }
.of-fuel input { flex: 1 1 140px; min-width: 120px; height: 44px; accent-color: var(--of-fender); }
.of-fuel output { font: 500 15px/1 var(--of-text); min-width: 8em; }
.of-tag-hang::before { content: ""; position: absolute; left: -24px; right: -24px; top: 12px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--of-steel-hi) 0 28%, var(--of-steel) 60%, #6E777A); box-shadow: 0 1px 0 rgba(14, 21, 23, .35); }
.of-tag-hang > .of-hook { top: 3px; }
.of-tag { position: relative; margin-top: 38px; padding: 26px 24px 18px; rotate: -.5deg; }
.of-seas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.of-seas legend { margin-bottom: 8px; }
.of-seas label { position: relative; }
.of-seas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.of-seas span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--of-rule); font: 560 13px/1.15 var(--of-text); cursor: pointer; }
.of-seas input:checked + span { border-color: var(--of-fender); background: var(--of-fender); }
.of-seas input:focus-visible + span { outline: 3px solid var(--of-fender); outline-offset: 3px; }
.of-tag .of-lfigs { display: block; }
.of-tag .of-lfigs .of-prow { grid-template-columns: 124px 1fr; padding: 0; }
.of-tag .of-lfigs .of-prow dt span { display: block; }
.of-yline { margin: 14px 0 0; min-height: 2.8em; }
.of-water { margin-top: 28px; padding: 24px; }
.of-water dl { display: grid; gap: 14px; margin: 0; }
.of-water dt { font-weight: 640; }
.of-water dd { margin: 0; }

/* ── the route, on a taped chart ─────────────────────────── */
.of-sec .of-chart-card { position: relative; max-width: 1080px; padding: clamp(18px, 3vw, 44px); }
.of-ctape { position: absolute; width: 96px; height: 28px; background: rgba(233, 230, 220, .88); box-shadow: 0 1px 2px rgba(14, 21, 23, .15); }
.of-ctape:nth-child(1) { left: -22px; top: 6px; rotate: -38deg; }
.of-ctape:nth-child(2) { right: -22px; top: 6px; rotate: 38deg; }
.of-ctape:nth-child(3) { left: -22px; bottom: 6px; rotate: 38deg; }
.of-ctape:nth-child(4) { right: -22px; bottom: 6px; rotate: -38deg; }
.of-chart-box { position: relative; }
.of-chart { display: block; width: 100%; height: auto; }
.of-chart path, .of-chart circle { fill: none; stroke: var(--of-ink); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.of-chart .of-ch-land { fill: url(#of-hatch); stroke: none; }
.of-chart .of-ch-hl { stroke: rgba(59, 67, 69, .28); stroke-width: 1.2; }
.of-chart .of-ch-beach { stroke: var(--of-graphite-2); stroke-dasharray: 1 5; stroke-width: 2; }
.of-chart .of-ch-wall { fill: var(--of-graphite); stroke-width: 1; }
.of-chart .of-ch-pen { fill: var(--of-fender); stroke: var(--of-ink); }
.of-chart .of-ch-lead { stroke: var(--of-graphite); stroke-dasharray: 8 6; stroke-width: 1; }
.of-chart .of-ch-leader { stroke: var(--of-graphite-2); stroke-dasharray: 2 5; }
.of-chart .of-ch-mark { fill: var(--of-ink); }
.of-chart .of-ch-contour { stroke: rgba(106, 137, 132, .6); stroke-dasharray: 2 6; }
.of-chart .of-ch-north { fill: var(--of-ink); }
.of-chart .of-ch-route { stroke: var(--of-graphite); stroke-width: 3; filter: url(#of-graphite); }
.of-chart .of-ch-drift { stroke: var(--of-graphite); stroke-dasharray: 1 6; stroke-width: 3; }
.of-chart .of-ch-run { stroke: var(--of-graphite-2); stroke-width: 2.2; stroke-dasharray: 7 4; filter: url(#of-graphite); }
.of-chart text { fill: var(--of-ink); text-transform: uppercase; }
.of-ch-big { font: 840 76px/1 var(--of-stencil); letter-spacing: .03em; }
.of-ch-lab { font: 740 32px/1 var(--of-stencil); letter-spacing: .04em; }
.of-ch-small { font: 600 16px/1 var(--of-text); letter-spacing: .14em; }
.of-chart .of-ch-depth { text-transform: none; letter-spacing: .04em; fill: var(--of-graphite-2); }
.of-stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 24px 0 0; padding: 0; list-style: none; }
.of-stop h3 { font-size: clamp(22px, 1vw + 12px, 26px); }
.of-stop p { margin: 0; font-size: 15px; line-height: 1.45; }
.of-run-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 500 14px/1.3 var(--of-text); color: var(--of-graphite); }
.of-run-note[hidden] { display: none; }
.of-run-note svg { fill: none; stroke: var(--of-graphite-2); stroke-width: 1.6; }
.of-nameline { margin: 24px 0 0; }
@media (min-width: 900px) {
  .of-stops { display: block; margin: 0; }
  .of-stop { position: absolute; left: var(--sx); top: var(--sy); width: 24%; padding: 12px 14px; background: rgba(246, 245, 241, .92); }
  .of-run-note { position: absolute; left: 36%; top: 91%; }
}

/* ── the survey ──────────────────────────────────────────── */
#of-survey { timeline-scope: --of-m1, --of-m2, --of-m3, --of-m4; }
.of-survey-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 8vw, 120px); align-items: start; }
.of-survey-ph { position: sticky; top: calc(var(--bar-h, 40px) + 80px); margin: 0; }
.of-sv-frame { position: relative; height: min(780px, calc(100svh - var(--bar-h, 40px) - 150px)); max-width: 100%; aspect-ratio: 2 / 3; border: 8px solid var(--of-hull); box-shadow: 0 16px 30px -14px rgba(14, 21, 23, .45); }
.of-sv-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.of-marks { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s var(--of-ease); }
.of-gp { fill: none; stroke: var(--of-fender); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.of-clean .of-marks { opacity: 0; }
.of-survey-ph figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; font: 420 13px/1.4 var(--of-text); color: var(--of-graphite); }
.of-find { position: relative; min-height: 52vh; padding: 12vh 0 0 44px; }
.of-find:first-child { padding-top: 0; min-height: 40vh; }
.of-glyph { position: absolute; left: 0; top: calc(12vh - 2px); width: 30px; height: 30px; fill: none; stroke: var(--of-fender); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.of-find:first-child .of-glyph { top: -2px; }
.of-find p { margin: 0; font-size: 18px; }
.of-find-1 { view-timeline: --of-m1 block; }
.of-find-2 { view-timeline: --of-m2 block; }
.of-find-3 { view-timeline: --of-m3 block; }
.of-find-4 { view-timeline: --of-m4 block; }
.of-bring { margin-top: 40px; padding: 24px 28px; }
.of-bring p:last-child { margin-bottom: 0; }

/* ── the yard, from above ────────────────────────────────── */
.of-plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); border-top: 22px solid var(--of-sea); background: var(--of-concrete) radial-gradient(rgba(14, 21, 23, .06) 1px, transparent 1.6px) 0 0 / 5px 5px; box-shadow: 0 0 0 1px var(--of-rule); }
.of-pz { position: relative; padding: 20px 24px 26px; border-left: 3px solid rgba(246, 245, 241, .85); }
.of-pz:first-child { border-left: 0; }
.of-pz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--of-fender) 0 18px, transparent 18px 30px); opacity: .9; }
.of-pz-mark { margin: 8px 0 12px; font: 840 44px/.85 var(--of-stencil); text-transform: uppercase; color: rgba(14, 21, 23, .62); }
.of-pz-draw { display: block; width: 100%; height: auto; max-height: 150px; margin-bottom: 14px; }
.of-pz-draw .of-pz-ink, .of-pz-cr { fill: none; stroke: var(--of-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.of-pz-sea { fill: var(--of-sea); }
.of-pz-tape { stroke: var(--of-fender); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.of-hull-s { fill: var(--of-hull); stroke: var(--of-ink); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.of-hull-f { fill: none; stroke: var(--of-graphite-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.of-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; padding: 0; list-style: none; border-top: 3px solid rgba(246, 245, 241, .85); }
.of-bays li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 8px; border-bottom: 3px solid rgba(246, 245, 241, .85); border-right: 3px solid rgba(246, 245, 241, .85); }
.of-bays b { flex: none; width: 36px; font: 780 24px/1 var(--of-stencil); color: rgba(14, 21, 23, .7); }
.of-bays svg { flex: 1; min-width: 0; height: 36px; }
.of-bay-her { box-shadow: inset 0 0 0 3px var(--of-fender); }
.of-pz h3 { font-size: 22px; }
.of-pz p:last-child { margin: 0; font-size: 16px; }
.of-yard-phs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.of-taped { position: relative; margin: 0; padding: 10px 10px 12px; rotate: -.6deg; }
.of-taped + .of-taped { rotate: .7deg; }
.of-taped::before { content: ""; position: absolute; left: calc(50% - 50px); top: -12px; width: 100px; height: 26px; background: rgba(233, 230, 220, .88); rotate: -2deg; box-shadow: 0 1px 2px rgba(14, 21, 23, .15); }
.of-taped img { display: block; width: 100%; height: auto; }
.of-taped figcaption { margin-top: 8px; font: 420 13px/1.4 var(--of-text); color: var(--of-graphite); }
.of-sec-yard .of-close { margin-top: 32px; }

/* ── the crew, the office ───────────────────────────────── */
.of-sec-crew { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.of-crew-card { width: min(100%, 560px); margin-left: auto; margin-right: 8%; padding: 28px 32px; rotate: .4deg; }
.of-crew-card h2 { font-size: clamp(30px, 2.4vw + 8px, 44px); }
.of-crew-card p { margin: 0; }
.of-coil { display: block; width: 150px; height: auto; margin: -8px 0 8px; fill: none; stroke: var(--of-graphite); stroke-width: 1.4; filter: url(#of-graphite); }
.of-form-hang { max-width: 800px; }
.of-form-hang::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: 12px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--of-steel-hi) 0 28%, var(--of-steel) 60%, #6E777A); box-shadow: 0 1px 0 rgba(14, 21, 23, .35); }
.of-form-hang > .of-hook { top: 3px; }
.of-form { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; margin-top: 38px; padding: clamp(24px, 4vw, 44px); transform-origin: 50% -30px; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(106, 137, 132, .16) 35px 36px); }
.of-form > .of-head, .of-form > .of-wide, .of-form > .of-send, .of-form > .of-status, .of-form > p.of-field:first-of-type { grid-column: 1 / -1; }
.of-field { display: grid; gap: 6px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
p.of-field > label, .of-field legend { font: 640 12px/1.2 var(--of-text); letter-spacing: .09em; text-transform: uppercase; }
.of-field legend { margin-bottom: 8px; padding: 0; }
fieldset.of-field label { display: flex; gap: 10px; align-items: center; min-height: 40px; line-height: 1.3; }
.of-form input[type="text"], .of-form input[type="number"], .of-form select, .of-form textarea { width: 100%; min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 1.5px solid var(--of-graphite); border-radius: 0; background: transparent; font: 400 16px/1.4 var(--of-text); color: var(--of-ink); }
.of-form select { padding-right: 20px; }
.of-form input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--of-fender); }
.of-stepper { display: flex; align-items: center; gap: 8px; max-width: 200px; }
.of-stepper button { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--of-ink); border-radius: 3px; background: none; font: 500 20px/1 var(--of-text); color: var(--of-ink); cursor: pointer; }
.of-stepper input { text-align: center; }
.of-send { margin: 6px 0 0; }
.of-status { min-height: 1.5em; margin: 0; font-weight: 560; }
.of-swing { animation: of-swing 1.3s cubic-bezier(.3, .7, .4, 1); }
@keyframes of-swing { 15% { rotate: 1.4deg; } 38% { rotate: -.9deg; } 60% { rotate: .45deg; } 80% { rotate: -.15deg; } }

/* ── the foot ────────────────────────────────────────────── */
.of-foot { position: relative; padding: 48px var(--of-side) 64px; }
.of-foot > .of-rail { position: absolute; left: 0; right: 48px; top: 0; }
.of-stopper { position: absolute; right: -14px; top: -5px; width: 16px; height: 16px; border-radius: 3px; background: var(--of-ink); }
.of-foot-in { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; max-width: 1312px; margin: 0 auto; }
.of-foot-brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 760 22px/1 var(--of-stencil); letter-spacing: .04em; text-transform: uppercase; }
.of-foot .of-mk-cut { fill: var(--of-concrete); }
.of-foot-place { margin: 0; color: var(--of-graphite); }
.of-foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.of-foot-links a { display: inline-block; padding: 10px 0; font-size: 15px; }

/* ── scroll: the route pencils itself in, the marks go on, the yard marks are sprayed ── */
@keyframes of-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes of-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes of-spray { from { -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; } to { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } }
@supports (animation-timeline: view()) {
  .of-chart-box { view-timeline: --of-chart block; }
  .of-ch-route { stroke-dasharray: 1 1; animation: of-draw linear both; animation-timeline: --of-chart; animation-range: entry 30% cover 62%; }
  @media (min-width: 900px) {
    .of-stop { animation: of-show linear both; animation-timeline: --of-chart; }
    .of-stop:nth-child(1) { animation-range: entry 30% entry 50%; }
    .of-stop:nth-child(2) { animation-range: entry 55% entry 75%; }
    .of-stop:nth-child(3) { animation-range: entry 85% cover 50%; }
    .of-stop:nth-child(4) { animation-range: cover 52% cover 62%; }
  }
  .of-gp { animation: of-draw linear both; animation-range: entry 40% cover 45%; }
  .of-gp-1 { animation-timeline: --of-m1; }
  .of-gp-2 { animation-timeline: --of-m2; }
  .of-gp-3 { animation-timeline: --of-m3; }
  .of-gp-4 { animation-timeline: --of-m4; }
  .of-yardmark { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%), radial-gradient(#000 1.1px, transparent 1.7px); mask-image: linear-gradient(90deg, #000 45%, transparent 55%), radial-gradient(#000 1.1px, transparent 1.7px); -webkit-mask-size: 300% 100%, 5px 5px; mask-size: 300% 100%, 5px 5px; -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat; animation: of-spray linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}
.of-nosda .of-ch-route, .of-nosda .of-gp { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--of-ease); }
.of-nosda .of-drawn .of-ch-route, .of-nosda .of-drawn.of-gp { stroke-dashoffset: 0; }

/* ── widths ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .of-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
  .of-load-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
  .of-js .of-loader { grid-template-columns: 1fr; }
  .of-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .of-pz-hard { grid-column: 1 / -1; grid-row: 1; border-left: 0; border-bottom: 3px solid rgba(246, 245, 241, .85); }
  .of-bays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-pz-lift { border-left: 0; }
}
@media (max-width: 899px) {
  .of-sheet { grid-template-columns: 1fr; grid-template-areas: "ph" "side" "pr" "vd" "nt" "acts"; }
  .of-verdict { grid-template-columns: 1fr; }
  .of-sheet-acts { justify-content: flex-start; }
  .of-load-grid { grid-template-columns: 1fr; }
  .of-load-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; align-items: start; }
  .of-water { margin-top: 38px; }
  .of-survey-grid { grid-template-columns: 1fr; }
  .of-survey-ph { position: relative; top: 0; }
  .of-sv-frame { height: auto; width: min(100%, 520px); }
  .of-find, .of-find:first-child { min-height: 0; padding: 0 0 28px 44px; }
  .of-glyph, .of-find:first-child .of-glyph { top: -2px; }
  .of-gp { animation-timeline: view(); animation-range: entry 70% cover 40%; }
  .of-crew-card { margin-right: 0; }
}
@media (max-width: 699px) {
  .of-cards { display: block; }
  .of-rk { padding-top: 0; }
  .of-rk:first-child { padding-top: 38px; }
  .of-rk + .of-rk { margin-top: calc(88px - var(--of-ch)); }
  .of-rk + .of-rk::before, .of-rk + .of-rk > .of-hook { display: none; }
  .of-cards { --of-ch: 350px; }
  .of-card { height: var(--of-ch); rotate: calc(var(--of-tilt) * .4); box-shadow: 0 -2px 0 rgba(14, 21, 23, .05), 0 -10px 18px -12px rgba(14, 21, 23, .45); }
  .of-card-top { align-items: center; justify-content: flex-start; gap: 14px; }
  .of-bay { font-size: 44px; }
  .of-type { position: absolute; left: 88px; top: 26px; right: 76px; }
  .of-card-top .of-corner { margin-left: auto; }
  .of-card-pr { width: 72%; margin-top: 22px; }
  .of-js .of-loader { grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: 16px; }
  .of-deck { aspect-ratio: 320 / 910; max-height: 520px; }
  .of-deck-h { display: none; }
  .of-deck-v { display: block; }
  .of-slot { left: var(--y); top: calc(100% - var(--x)); }
  .of-tray { flex-direction: column; }
  .of-tok { width: 100%; }
  .of-js .of-boatview { aspect-ratio: 4 / 3; }
  .of-plan { grid-template-columns: 1fr; }
  .of-pz, .of-pz-lift { border-left: 0; border-bottom: 3px solid rgba(246, 245, 241, .85); }
  .of-bays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-yard-phs { grid-template-columns: 1fr; }
  .of-form { grid-template-columns: 1fr; }
  .of-ch-lab, .of-ch-small, .of-ch-leader { display: none; }
  .of-stops { grid-template-columns: 1fr; }
  .of-foot-links { margin-left: 0; }
}
@media (max-width: 699px) and (max-height: 640px) {
  .of-rk + .of-rk { margin-top: calc(76px - var(--of-ch)); }
  .of-js .of-boatview { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .of *, .of *::before, .of *::after { transition: none !important; animation: none !important; }
  .of-hint.of-torn { display: none; }
  .of-ch-route, .of-gp { stroke-dashoffset: 0 !important; }
  .of-stop { opacity: 1 !important; }
  .of-yardmark { -webkit-mask: none !important; mask: none !important; }
}
::view-transition-group(*) { animation-duration: 420ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }