/* boattender.com
 *
 * Built to plan/web/SITES-DESIGN-DIRECTION-2026-09-13.md §3 and the two
 * artboards, plan/design/canvas/sites/BoatTender.dc.html (1440) and
 * BoatTenderPhone.dc.html (390).
 *
 * Written narrow-first: the base rules are the 390 artboard, and the 1080
 * breakpoint is the 1440 one. Both artboards render from the same markup, so a
 * string cannot drift between the two widths (A-17).
 *
 * Every colour below is a named role, never a hue picked for a section (§1.3
 * ruling 1). --hazard is a state, not a decoration: it means a hazard report
 * and nothing else, it is never used as text, and its opacity is the report's
 * age (B-2).
 */

:root {
	--ground: #ffffff;
	--wash: #f1f6f8;
	--deep: #0b2430;
	--ink: #0b2430;

	--body: #3e525c;
	--row: #4a5b64;
	--meta: #5f727c;
	--footer-body: #5a6e78;

	--signal: #b23f29;          /* every word and every button */
	--hazard: #d4543f;          /* hazard reports on the map only, never text */

	--on-deep-body: #a9bfc9;
	--on-deep-label: #e0836f;

	--hairline: #e2e9ec;
	--sheet-edge: #c7d4da;
	--map-ground: #dce7eb;
	--photo-ph: #c9d8de;
	--gone: #b3c3cb;

	--sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--gutter: 20px;
	--focus: 2px;
}

/* A-4: three artboards reported phantom clipping without this. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
}

p {
	margin: 0;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 700;
	text-wrap: pretty;
}

ol,
dl,
dd,
dt {
	margin: 0;
	padding: 0;
}

ol {
	list-style: none;
}

a {
	color: var(--ink);
	text-decoration: none;
}

a:hover {
	color: var(--signal);
}

/* §5.6 / A-7: a visible ring on every interactive element, in the site's ink.
   `outline: none` with no replacement is a defect, not a style. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus) solid var(--ink);
	outline-offset: var(--focus);
}

.band--deep a:focus-visible,
.button--signal:focus-visible {
	outline-color: var(--ground);
}

/* Off the top rather than off the left: a link parked at left:-9999px reads as
   an element outside the frame to the geometry pass, and an instrument that
   reports a known-good technique as a defect gets ignored. */
.skip-link {
	position: absolute;
	left: 0;
	top: -200px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--deep);
	color: var(--ground);
	font-size: 16px;
	font-weight: 600;
}

.skip-link:focus {
	top: 0;
	color: var(--ground);
}

/* ---------------------------------------------------------------- type tiers
 * Three tiers below body and no fourth (A-16). Body never under 16 px.
 * Citations and fine print are 13 px mono. Labels are 10–11 px mono, uppercase,
 * letter-spaced at or above 0.12em, and are never a sentence to be read.
 */

.label {
	font-family: var(--mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--meta);
}

.label--signal {
	color: var(--signal);
}

.label--ondeep {
	color: var(--on-deep-label);
}

.label--meta {
	letter-spacing: 0.16em;
}

.label--photo {
	letter-spacing: 0.14em;
	color: var(--body);
}

.prose p,
.hero__sub,
.reports__intro,
.deep__p,
.cta__p,
.decay__p,
.disclaimer {
	font-size: 17px;
	line-height: 1.6;
	color: var(--body);
}

/* ------------------------------------------------------------------- header */

.site-header {
	border-bottom: 1px solid var(--hairline);
	background: var(--ground);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	padding: 0 var(--gutter);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--ink);
}

.brand:hover {
	color: var(--ink);
}

.brand__word {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.anchor {
	flex-shrink: 0;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

/* The 390 artboard draws the header with the button only. */
.site-header__marinas {
	display: none;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a5b64;
}

/* The filled header button, kept for the day there is a listing behind it. */
.site-header__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	background: var(--deep);
	color: var(--ground);
	font-size: 16px;
	font-weight: 600;
}

.site-header__cta:hover {
	background: #0e2e3d;
	color: var(--ground);
}

/* What it wears until then: the same weight as the other header link, because
   the page's one real action is at the bottom and this one is not an action
   yet. Weight speaks before text does. */
.site-header__quiet {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a5b64;
}

/* --------------------------------------------------------------------- hero */

.hero {
	background: var(--wash);
}

.hero__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 44px var(--gutter) 36px;
}

.hero__h {
	font-size: 44px;
	line-height: 1.02;
	letter-spacing: -0.034em;
}

.hero__sub {
	max-width: 36em;
}

/* The one thing a reader can actually do, so it is not the smallest line in the
   block any more. */
.hero__note {
	font-size: 17px;
	line-height: 1.6;
	color: var(--body);
}

/* The badges, kept for the day there are listings behind them. Rendered only
   when boattender_store_links() returns both URLs; see parts/stores.php. */
.stores {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

.stores__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.store {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 20px;
	border: 1.5px solid var(--deep);
	color: var(--ink);
}

.store__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.store__kicker {
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--meta);
}

.store__name {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* And the thing they cannot, quietest. */
.hero__stores {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--meta);
}

/* --------------------------------------------------------------------- map */

/* The card at this width is a BOTTOM SHEET, which is what a map application
   actually does on a phone, so it stays on the drawing rather than becoming a
   caption beneath it (design director, 2026-09-13). "Covers nothing" is the
   wrong test for an element whose whole idiom is to overlay; the condition is
   that no marked object falls in the band the sheet occupies. So the box is
   taller than the drawing and the sheet gets that band to itself — the map
   content sits above it, which is also what a real map does when it pans a
   selection clear of the sheet.
   The drawing keeps its own 390 x 400 proportion, anchored to the top, so
   `slice` still never has to crop it. */
.hero__map {
	position: relative;
	aspect-ratio: 390 / 512;
	overflow: hidden;
	background: var(--map-ground);
}

/* The drawing is the query container: 1cqw is 1% of ITS width, which is what
   lets the card be sized in the drawing's own units instead of the page's.
   Design director 2026-09-13: a constant footprint buys stability by
   construction — once the geometry is identical at every width, a position
   legal at 1440 is legal everywhere, and the defect class stops existing
   rather than being avoided. At 1440 the drawing is 820 wide, so every value
   below is its 1440 pixel figure divided by 8.2. */
.hero__draw {
	position: absolute;
	inset: 0;
	container-type: inline-size;
}

.map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.map--wide {
	display: none;
}


.callout {
	--panel-mode: sheet;          /* pinned to the bottom edge at this width */
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 16px;
	background: var(--ground);
	box-shadow: 0 10px 30px rgba(11, 36, 48, 0.16);
}

.callout__head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 600;
}

.callout__dot {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hazard);
}

.callout__body {
	font-size: 16px;
	line-height: 1.5;
	color: var(--row);
}

.callout__meta {
	padding-top: 6px;
	border-top: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--meta);
}

/* ------------------------------------------------------------------- bands */

.band {
	padding: 48px var(--gutter) 44px;
}

.band--white {
	background: var(--ground);
}

.band--wash {
	background: var(--wash);
}

.band--deep {
	background: var(--deep);
	color: var(--ground);
}

.h2 {
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.h2--deep,
.h2--cta {
	font-size: 31px;
	line-height: 1.1;
}

.split,
.split__lead,
.split__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.prose {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ----------------------------------------------------------------- marinas */

.marinas {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.marinas__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sheet {
	margin: 12px 0 0;
	background: var(--ground);
	box-shadow: 0 12px 34px rgba(11, 36, 48, 0.12);
}

/* F-7: a real photograph of the founder's own lake replaces this. The box is
   reserved at its final proportion so nothing shifts when it lands (A-10). */
.sheet__photo {
	display: flex;
	align-items: flex-end;
	height: 104px;
	padding: 12px;
	background: var(--photo-ph);
}

.sheet__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 18px 20px;
}

.sheet__title {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sheet__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sheet__where {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--meta);
}

/* A-5: an equal-width column row is a grid, never a row of flex-grow: 1. */
.sheet__actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sheet__action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border: 1.5px solid var(--sheet-edge);
	font-size: 16px;
	font-weight: 600;
}

.sheet__action--fill {
	border-color: var(--deep);
	background: var(--deep);
	color: var(--ground);
}

.sheet__rows {
	display: flex;
	flex-direction: column;
}

.sheet__row {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 0;
	border-top: 1px solid var(--hairline);
}

.sheet__value {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
}

/* B-5: the citation is the point of the section. It is never shrunk below the
   13 px fine-print floor, never greyed past --meta, and never hidden. */
.sheet__cite {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--meta);
}

/* ----------------------------------------------------------------- reports */

.reports {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.reports__head,
.reports__lead {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.decay {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

.decay__state {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-top: 1px solid var(--hairline);
}

.decay__state:last-child {
	border-bottom: 1px solid var(--hairline);
}

.decay__pin {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

/* The heading and its sentence are one block, not two flex items: as siblings
   of the pin they each take a share of the row and the heading wraps to three
   words on three lines at 390. */
.decay__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.decay__h {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.decay__p {
	color: var(--row);
}

/* Four states of one object, not four features. The two faded states repeat a
   label that also appears at full opacity, so nothing is only legible faded. */
.decay__state--faded-1 {
	opacity: 0.66;
}

.decay__state--faded-2 {
	opacity: 0.34;
}

.decay__state--gone .decay__h,
.decay__state--gone .decay__p {
	color: var(--meta);
}

/* -------------------------------------------------------------- deep band */

.deep {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.deep__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 540px;
}

.deep__p {
	line-height: 1.62;
	color: var(--on-deep-body);
}

/* --------------------------------------------------------------------- cta */

.cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cta__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* B-9 / §5.4: the page's only signal-ink element, at the bottom, after the
   visitor has decided about the app. It does not compete with Get the app. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 600;
}

.button--signal {
	margin-top: 8px;
	background: var(--signal);
	color: var(--ground);
}

.button--signal:hover {
	background: #9c3724;
	color: var(--ground);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
	background: var(--wash);
	border-top: 1px solid var(--hairline);
	padding: 40px var(--gutter) 44px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.brand--footer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.brand--footer .brand__word {
	font-size: 16px;
}

/* B-8: the disclaimer sits above the link columns, not in the fine print. */
.disclaimer {
	font-size: 16px;
	color: var(--footer-body);
	max-width: 420px;
}

.site-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
}

.col {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.col > .label {
	margin-bottom: 8px;
}

.col__link,
.col__pending {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	font-size: 16px;
}

.col__pending {
	color: var(--meta);
}

/* A ruling beats a drawing (plan/design/NOTES-contexits-site.md). "Coming soon"
   is a status a reader has to read, not a section label, so it takes the 13 px
   mono fine-print tier the direction sets for citations rather than the 10-11 px
   label tier — and nothing in this footer sits below it. */
.soon {
	font-family: var(--mono);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--meta);
}

.col__soon {
	margin-top: 4px;
}

.colophon {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--meta);
}

.colophon__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	min-width: 44px;
	color: inherit;
	border-bottom: 1px solid currentColor;
}

/* ------------------------------------------------------------------ motion
 * §1.5: one 120 ms opacity settle on above-the-fold content and nothing else.
 * Nothing loops. The settle is armed by the script, so a page without
 * JavaScript renders the content visible rather than hiding it forever.
 */

.js .settle {
	animation: settle 120ms ease-out both;
}

@keyframes settle {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================== the stacked range, below 1200
 * Between the phone and the split layout the columns are full width, and a
 * sentence set across 928 px is 95 characters long. These caps bind only here:
 * at 1200 and above every prose column is already narrower than 36em, and the
 * block is bounded at 1199 so the artboard widths cannot move.
 */

@media (max-width: 1199px) {
	.prose p,
	.reports__intro,
	.cta__p {
		max-width: 36em;
	}
}

/* ================================================================== 768 px */

@media (min-width: 768px) {
	:root {
		--gutter: 48px;
	}

	.hero__copy {
		padding: 64px var(--gutter) 56px;
	}

	.hero__map {
		aspect-ratio: 820 / 640;
	}

	.map--wide {
		display: block;
	}

	.map--narrow {
		display: none;
	}

	.callout {
		/* DERIVED ON THE BUILT THEME from the moved drawing (canvas v21), against
		   all eight desktop widths at once: 234,235 in the drawing's own units.
		   Best of 94 positions legal everywhere — worst contact gap 1 unit to
		   the report it describes, worst margin to the next object 24.

		   ANCHORED BY ITS BOTTOM, which is the load-bearing part. The card's
		   height varies 110-189 drawing units because the type is pinned at its
		   floors and the text rewraps, so only one horizontal edge can be
		   width-invariant. The contact edge is the bottom, so the bottom is what
		   is anchored; top-anchoring makes contact hold at exactly one width and
		   is why every earlier position failed somewhere. */
		/* Derived on the built theme with the ring in place, gated read, 1-unit
		   grid, cover-nothing at all eight desktop widths. The most central of
		   5,211 legal positions: 75 units from the nearest frame edge, which is
		   the maximum available. Top-anchored again — bottom-anchoring existed
		   only to keep contact stable across the card's varying height, and
		   contact is dropped. */
		left: 58.1707%;
		right: auto;
		bottom: auto;
		/* 235 units from the TOP of a 640-unit drawing is (640-235)/640 in CSS,
		   which measures up from the bottom. The solver works top-down and CSS
		   `bottom` does not; emitting the solver's number straight into the
		   property put the card 170 units too low, onto the boat puck. The value
		   was right in the space it was computed in and wrong in the space it
		   was consumed in. */
		top: 34.0625%;
		--panel-mode: floating;
		width: 32.6829cqw;
		max-width: calc(100% - 2 * var(--gutter));
	}

	.band {
		padding: 72px var(--gutter) 64px;
	}

	.decay {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 40px;
		margin-top: 24px;
		padding-top: 32px;
		border-top: 1px solid var(--hairline);
	}

	.decay__state,
	.decay__state:last-child {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 0;
		border: 0;
	}

	.decay__text {
		gap: 14px;
	}

	.decay__pin {
		width: 60px;
		height: 60px;
	}

	.deep {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px;
	}

	.site-footer {
		padding: 56px var(--gutter) 56px;
	}
}

/* ================================================================= 1200 px
 * The 1440 artboard.
 *
 * Every horizontal value here is a PROPORTION that resolves to the artboard's
 * exact pixel at 1440 and stays sane below it. An artboard is one width, so a
 * layout value copied from it literally is unverified at every other width —
 * the contexits build clipped a headline into an 82 px column at 1024 doing
 * exactly that (plan/design/NOTES-contexits-site.md). The blocks stop being
 * side-by-side below 1200 rather than below 1080, so 1024 is comfortably inside
 * the stacked layout instead of one step from the narrow edge of the wide one.
 *
 * The arithmetic, once: the frame is 1440 with an 88 px gutter each side, so the
 * inner width is 1264. 88/1440 = 6.1111vw. 100/1264 = 7.9114% of the inner box,
 * but a gap cannot be a percentage of a grid's own track sizing without
 * circularity, so gaps are vw-capped instead: 100/1440 = 6.9444vw. Column
 * tracks are percentages of the 1264 inner box: 560 -> 44.3038%,
 * 430 -> 34.019%. Display type is vw-capped the same way, so it is the
 * artboard's size at 1440 and never larger.
 */

@media (min-width: 1200px) {
	:root {
		--gutter: min(6.1111vw, 88px);
		--col-gap: min(6.9444vw, 100px);
	}

	body {
		font-size: 20px;
	}

	.site-header__inner {
		min-height: 84px;
	}

	.brand__word {
		font-size: 19px;
	}

	.site-header__cta {
		min-height: 46px;
		padding: 0 22px;
		font-size: 16px;
	}

	.site-header__marinas {
		display: inline-flex;
	}

	.hero {
		display: flex;
		align-items: stretch;
	}

	.hero__copy {
		flex: 0 0 43.0556%;
		justify-content: center;
		gap: 28px;
		padding: 104px min(4.1667vw, 60px) 104px var(--gutter);
	}

	.hero__h {
		font-size: clamp(50px, 4.7222vw, 68px);
		letter-spacing: -0.035em;
	}

	.hero__sub {
		font-size: 21px;
		line-height: 1.55;
		max-width: 470px;
	}

	.hero__note {
		font-size: 19px;
		max-width: 470px;
	}

	.stores {
		gap: 12px;
		margin-top: 10px;
	}

	.stores__row {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.store {
		min-height: 56px;
		padding: 0 22px;
	}

	.store__name {
		font-size: 17px;
	}

	.hero__map {
		flex: 1 1 0;
		min-width: 0;
		aspect-ratio: auto;
		min-height: 640px;
	}

	/* At the split width the drawing keeps its own proportion, anchored to the
	   top, exactly as the 1440 artboard places it: a fixed 820 × 640 drawing in
	   a column the copy makes taller, with the map ground filling what is left.
	   Scaling it to cover instead crops the shoreline and moves the pins, which
	   is a different drawing from the one that was reviewed. */
	.hero__draw {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 820 / 640;
	}

	.callout {
		padding: max(13px, 1.9512cqw) max(15px, 2.1951cqw);
		gap: max(7px, 0.9756cqw);
	}

	/* Sized in drawing units, but never below the type floor. A constant
	   footprint scales the type with the drawing, and where the drawing renders
	   narrower than 820 — 683 px at 1200, 768 at 768 — that puts body text at
	   13.3 px and the citation at 10.8 px, under A-16's 16 px and 13 px floors.
	   Two standing rules in direct conflict, so the floor wins and the footprint
	   is constant only where it can be. Raised with the numbers. */
	.callout__head,
	.callout__body {
		font-size: max(16px, 1.9512cqw);
	}

	.callout__dot {
		width: 1.0976cqw;
		height: 1.0976cqw;
	}

	/* The citation tier is 13 px exactly, not a floor — A-16 allows three tiers
	   and no fourth, so a citation scaled UP to 14.5 px is as much a fourth tier
	   as one scaled down to 10.8 px. It does not scale at all. */
	.callout__meta {
		font-size: 13px;
		padding-top: 0.2439cqw;
		margin-top: 0.2439cqw;
	}

	.h2 {
		font-size: clamp(36px, 3.1944vw, 46px);
		line-height: 1.08;
		letter-spacing: -0.028em;
	}

	.h2--deep {
		font-size: clamp(33px, 2.9167vw, 42px);
	}

	.h2--cta {
		font-size: clamp(32px, 2.7778vw, 40px);
		letter-spacing: -0.026em;
	}

	.prose p,
	.reports__intro {
		font-size: 20px;
	}

	.deep__p,
	.cta__p {
		font-size: 19px;
	}

	.decay__h {
		font-size: 19px;
	}

	.decay__p {
		font-size: 16px;
		max-width: 250px;
	}

	.split {
		display: grid;
		grid-template-columns: minmax(0, 44.3038%) minmax(0, 1fr);
		column-gap: var(--col-gap);
		align-items: start;
		padding: 118px var(--gutter) 96px;
	}

	.split__lead {
		gap: 24px;
	}

	.split__body {
		max-width: 620px;
		gap: 22px;
		padding-top: 8px;
	}

	.marinas {
		display: grid;
		grid-template-columns: minmax(0, 600px) minmax(0, 34.019%);
		column-gap: var(--col-gap);
		align-items: center;
		padding: 108px var(--gutter) 112px;
	}

	.sheet {
		margin-top: 0;
	}

	.marinas__copy {
		gap: 24px;
	}

	.sheet__photo {
		height: 128px;
		padding: 14px;
	}

	.sheet__inner {
		gap: 18px;
		padding: 22px 24px 24px;
	}

	.sheet__name {
		font-size: 24px;
	}

	.sheet__actions {
		gap: 10px;
	}

	.sheet__action {
		min-height: 44px;
	}

	.sheet__value {
		font-size: 17px;
	}

	.sheet__row {
		padding: 13px 0;
	}

	.reports {
		gap: 56px;
		padding: 116px var(--gutter) 110px;
	}

	.reports__head {
		display: grid;
		grid-template-columns: minmax(0, 44.3038%) minmax(0, 1fr);
		column-gap: var(--col-gap);
		align-items: end;
	}

	.reports__lead {
		gap: 24px;
	}

	.reports__intro {
		max-width: 620px;
		padding-bottom: 6px;
	}

	.decay {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: min(2.7778vw, 40px);
		margin-top: 0;
		padding-top: 42px;
	}

	.decay__state {
		gap: 16px;
	}

	.deep {
		gap: min(7.6389vw, 110px);
		padding: 116px var(--gutter) 118px;
	}

	.deep__col {
		gap: 22px;
	}

	.deep__p {
		font-size: 19px;
	}

	.cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: min(5.5556vw, 80px);
		padding: 104px var(--gutter);
	}

	.cta__copy {
		max-width: 720px;
		gap: 18px;
	}

	.button--signal {
		flex-shrink: 0;
		min-height: 60px;
		padding: 0 34px;
		margin-top: 0;
		gap: 14px;
	}

	.site-footer {
		padding: 62px var(--gutter) 64px;
	}

	.site-footer__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: flex-start;
		gap: 40px min(5vw, 72px);
	}

	.site-footer__brand {
		gap: 16px;
	}

	.brand--footer .brand__word {
		font-size: 17px;
	}

	.site-footer__cols {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: min(5vw, 72px);
		row-gap: 6px;
		align-items: start;
	}

	.col:nth-of-type(1) {
		grid-area: 1 / 1;
	}

	.col:nth-of-type(2) {
		grid-area: 1 / 2;
	}

	.col:nth-of-type(3) {
		grid-area: 1 / 3;
	}

	.colophon {
		grid-area: 2 / 3;
	}
}