/**
 * Marram.
 *
 * ── The banned list ──────────────────────────────────────────────────────
 *
 * Seven habits made every previous theme in this catalogue read as the same
 * theme in a different colour. They are banned here by name, and each one has a
 * stated replacement, because banning without replacing just produces a
 * plainer version of the same page:
 *
 *  1. BANNED  uppercase, wide-tracked small mono labels.
 *     INSTEAD Sentence-case text at ordinary tracking. Where a marker is
 *             needed, it is a hole number set in the display face at a size
 *             nobody could mistake for a label.
 *
 *  2. BANNED  the display-serif / neutral-sans / mono-label trio.
 *     INSTEAD One family, one grotesque, used across a very wide size range.
 *             The contrast in this page is scale and weight, not typeface.
 *
 *  3. BANNED  hairline rules as the main separator, everything centred in one
 *             max-width column, everything left-aligned.
 *     INSTEAD Two tracks that do not share a centre: a narrow card rail and a
 *             wide land. Sections are separated by the ground changing behind
 *             them — the field's own hour moves as you scroll — not by lines.
 *
 *  4. BANNED  the row of huge statistics.
 *     INSTEAD The only numbers on this site are a real scorecard's: par, yards,
 *             stroke index. They are set as a card is set, in a column, at
 *             reading size.
 *
 *  5. BANNED  the h2-plus-grey-subtitle section head.
 *     INSTEAD Sections open on their own terms — a hole opens on its number, a
 *             passage of writing opens on its first line.
 *
 *  6. BANNED  the grid of equal cards.
 *     INSTEAD Holes are laid out at the size their character deserves: the
 *             famous ones take the width, the ordinary ones sit small.
 *
 *  7. BANNED  a single accent colour.
 *     INSTEAD Three, all of them things that actually grow on a links: marram
 *             green, gorse yellow, heather. They are used together.
 *
 * ── The ground ───────────────────────────────────────────────────────────
 *
 * The page's background is not a colour, it is a live WebGL field of grass
 * (assets/js/modules/links.js). Everything below assumes that: sections are
 * transparent and carry their legibility on their own panels, and the fallback
 * for the field failing is a flat, still palette declared here.
 *
 * @package Marram
 */

/* ───────────────────────────  1. Tokens  ─────────────────────────────── */

:root {
	/*
	 * Three living accents, not one.
	 *
	 * Measured against the *worst case* the panel material reaches, not against
	 * flat #f4f1e8: the panels are painted by the renderer, take a little of the
	 * hour's colour, dip in the ribbon troughs and let some dark land through at
	 * 0.84 alpha, so their darkest paper is around L=0.67 rather than L=0.885.
	 * The original values cleared 4.5:1 on paper and failed on the real thing.
	 * These are set against a *measured* darkest-5%-of-panel of L≈0.53, sampled
	 * from an element screenshot of a real panel over the running field — not
	 * against an estimate, which was optimistic by a third.
	 */
	--marram: #414a38;      /* the grass          — 5.1:1 at the panel's darkest */
	--gorse: #c9a227;       /* the whin           — decorative only, never text */
	/* Pin cloth. Read by the renderer, so a club's own colours reach the
	   course itself and not just the page furniture. */
	--flag: #c2392e;
	--heather: #523c4d;     /* the rough          — 5.5:1 at the panel's darkest */

	/* Ground and ink. Cool, sandy, coastal — never cream. */
	--sand: #e8e2d4;
	--sand-deep: #d6cdb9;
	--shell: #f4f1e8;
	--ink: #1d241f;
	--ink-soft: #46503f;
	--ink-faint: #434a40;   /* 5.1:1 at the panel's darkest */
	--slate: #33413f;

	/* Panels that sit over the live field. */
	--panel: rgba(244, 241, 232, 0.93);
	--panel-strong: rgba(244, 241, 232, 0.985);
	--panel-dark: rgba(20, 26, 21, 0.80);
	--panel-line: rgba(29, 36, 31, 0.14);

	--sans: 'Marram Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--pad: clamp(1.1rem, 4.5vw, 5rem);
	--rail: clamp(0px, 22vw, 19rem);
	--measure: 36rem;
	--maxw: 108rem;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────  2. Base + type  ──────────────────────────── */

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

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

body {
	margin: 0;
	/* The still fallback. Replaced by the live field once it has drawn. */
	background: linear-gradient(180deg, #bcd0dd 0%, #d8dcc9 46%, #cfc6ae 100%) fixed;
	color: var(--ink);
	font-family: var(--sans);
	font-size: clamp(1rem, 0.95rem + 0.22vw, 1.1rem);
	font-weight: 380;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.has-links body { background: none; }

img, svg, canvas, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--sans);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.022em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gorse); color: var(--ink); }

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--slate);
	outline-offset: 3px;
	border-radius: 2px;
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}
.sr-only:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 12px 18px;
	background: var(--shell);
	z-index: 200;
}

/* ─────────────────────────  3. The field  ────────────────────────────── */

.field {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	contain: strict;
}

.field__canvas {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2s var(--ease);
}
.field__canvas.is-ready { opacity: 1; }

/* Content sits above the land. Both need their own stacking context: a fixed,
   painted canvas otherwise draws over ordinary static flow content whatever
   the document order says. */
.site-main,
.masthead,
.site-footer { position: relative; z-index: 1; }
.masthead { z-index: 60; }
.drawer { z-index: 70; }

/* ─────────────────────────  4. Panels  ──────────────────────────────── */

/*
 * Everything readable rides on a panel. There is live grass moving behind every
 * pixel of this site; text set directly on it would be unreadable at any colour,
 * so legibility is a structural rule here rather than a per-section decision.
 */
.panel {
	background: var(--panel);
	backdrop-filter: blur(3px) saturate(105%);
	-webkit-backdrop-filter: blur(3px) saturate(105%);
}
.panel--strong { background: var(--panel-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel--dark { background: var(--panel-dark); color: var(--shell); }

/* ─────────────────────────  5. Masthead  ────────────────────────────── */

.masthead {
	position: fixed;
	inset: 0 0 auto;
	padding: clamp(0.9rem, 1.8vw, 1.5rem) var(--pad);
	transition: transform 0.5s var(--out), background-color 0.45s var(--ease), color 0.45s var(--ease);
	/* Over the opening the bar has live sky behind it and nothing else, so it
	   carries its own contrast; once it settles onto a panel it goes back to
	   ink. The dark-on-dawn-sky state this replaced was unreadable. */
	color: var(--shell);
	text-shadow: 0 1px 14px rgba(12, 20, 14, 0.55);
}
.masthead::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(14, 22, 16, 0.42), rgba(14, 22, 16, 0));
	transition: opacity 0.45s var(--ease);
	pointer-events: none;
}
.masthead.is-settled {
	background: var(--panel-strong);
	color: var(--ink);
	text-shadow: none;
}
.masthead.is-settled::after { opacity: 0; }
.masthead .wordmark__where { color: inherit; opacity: 0.78; }

/* Interior pages open on a panel rather than on the sky. */
body:not(.home) .masthead { color: var(--ink); text-shadow: none; }
body:not(.home) .masthead::after { opacity: 0; }
.masthead.is-gone { transform: translateY(-104%); }

.masthead__inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	max-width: var(--maxw);
	margin-inline: auto;
}

.wordmark { text-decoration: none; display: flex; align-items: baseline; gap: 0.6rem; }
.wordmark__name {
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}
.wordmark__where {
	font-size: 0.82rem;
	color: var(--ink-faint);
	font-weight: 400;
}

.nav-list {
	display: flex;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	list-style: none;
	margin: 0; padding: 0;
	font-size: 0.95rem;
}
.nav-list a {
	text-decoration: none;
	padding-block: 0.3rem;
	background-image: linear-gradient(var(--gorse), var(--gorse));
	background-size: 0 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.4s var(--out);
}
.nav-list a:hover, .nav-list a:focus-visible { background-size: 100% 2px; }
.nav-list .sub-menu { display: none; }

.masthead__end { display: flex; align-items: center; gap: 1rem; }

.drawer-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	color: inherit;
}
.drawer-toggle i {
	display: block;
	width: 22px; height: 1.5px;
	background: currentColor;
	margin: 5px 0;
	transition: transform 0.35s var(--out);
}
.drawer-toggle[aria-expanded='true'] i:first-child { transform: translateY(3.25px) rotate(9deg); }
.drawer-toggle[aria-expanded='true'] i:last-child { transform: translateY(-3.25px) rotate(-9deg); }

.drawer {
	position: fixed;
	inset: 0;
	background: var(--panel-strong);
	display: grid;
	place-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s var(--ease);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.drawer a {
	text-decoration: none;
	font-size: clamp(1.8rem, 7vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	display: block;
	padding: 0.35em 0;
}
.drawer .sub-menu { display: none; }

/* ─────────────────────────  6. Buttons  ─────────────────────────────── */

.btn {
	display: inline-block;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	padding: 0.8em 1.5em;
	border: 1.5px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.btn--fill { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.btn--fill:hover { background: var(--slate); border-color: var(--slate); }

/* ─────────────────────────  7. Reveals  ─────────────────────────────── */

[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.9s var(--out), transform 0.9s var(--out);
}
[data-reveal].is-shown { opacity: 1; transform: none; }

[data-reveal-words] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-reveal-words] .w > i {
	display: inline-block;
	font-style: inherit;
	transform: translateY(104%);
	transition: transform 0.85s var(--out);
	transition-delay: calc(var(--i) * 42ms);
}
[data-reveal-words].is-shown .w > i { transform: none; }

/* ─────────────────────────  8. Footer  ──────────────────────────────── */

.site-footer {
	margin-top: clamp(4rem, 10vw, 9rem);
	background: var(--panel-strong);
	padding: clamp(3rem, 7vw, 6rem) var(--pad) clamp(2rem, 4vw, 3rem);
}
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; }

.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 4rem);
	align-items: start;
}
.footer__where p { margin-bottom: 0.4rem; }
.footer__tel a { text-decoration: none; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--marram); }
.footer__base {
	margin-top: clamp(2.5rem, 6vw, 5rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--panel-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--ink-faint);
}

/* ─────────────────────────  9. Utilities  ───────────────────────────── */

.img-absent {
	display: block;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(120% 80% at 30% 15%, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
		linear-gradient(160deg, var(--sand-deep), var(--marram) 130%);
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ─────────────────────────  10. Responsive  ─────────────────────────── */

@media (max-width: 900px) {
	.nav-list { display: none; }
	.drawer-toggle { display: block; }
	.footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────  11. Reduced motion  ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.field { display: none; }
	.has-links body {
		background: linear-gradient(180deg, #bcd0dd 0%, #d8dcc9 46%, #cfc6ae 100%) fixed;
	}
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	[data-reveal-words] .w > i { transform: none; transition: none; }
	.masthead { transition: none; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body[data-motion='calm'] .field { display: none; }
body[data-motion='calm'] { background: linear-gradient(180deg, #bcd0dd 0%, #d8dcc9 46%, #cfc6ae 100%) fixed; }

/* ─────────────────────────  12. The opening  ────────────────────────── */

/*
 * The opening does not sit on a panel: it is the one place the field is meant
 * to be looked at directly, so the type carries its own legibility instead.
 */
.opening {
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding: 0 var(--pad) clamp(4rem, 12vh, 8rem);
}
.opening__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.opening__line {
	font-size: clamp(3rem, 13vw, 12rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	color: var(--shell);
	text-shadow: 0 2px 30px rgba(12, 20, 14, 0.5), 0 1px 6px rgba(12, 20, 14, 0.4);
	margin-bottom: 0.4em;
}
.opening__sub {
	max-width: var(--measure);
	color: var(--shell);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	text-shadow: 0 1px 16px rgba(12, 20, 14, 0.7), 0 1px 4px rgba(12, 20, 14, 0.5);
}

/* ─────────────────────────  13. The card act  ───────────────────────── */

/*
 * Two tracks that do not share a centre: the card on one side, the writing on
 * the other, at different widths. This is the layout the whole site is built
 * on, and it is what replaces the single centred column.
 */
.card-act { padding: clamp(3rem, 10vh, 8rem) var(--pad); }
.card-act__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 6rem);
	align-items: start;
}

.card { padding: clamp(1.2rem, 2vw, 1.8rem); position: sticky; top: 6rem; }
.card__head { font-weight: 600; margin-bottom: 0.9rem; }
.card__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.card__table th, .card__table td { text-align: right; padding: 0.28rem 0.2rem; }
.card__table thead th { font-weight: 500; color: var(--ink-faint); border-bottom: 1.5px solid var(--ink); padding-bottom: 0.5rem; }
.card__table tbody th, .card__table tfoot th { text-align: left; font-weight: 400; }
.card__table tbody th a { text-decoration: none; display: flex; gap: 0.5rem; align-items: baseline; }
.card__table tbody th a:hover .card__name { color: var(--marram); }
.card__name { color: var(--ink-faint); font-size: 0.82em; }
.card__sum td, .card__sum th { border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); font-weight: 600; }
.card__table tfoot th, .card__table tfoot td { border-top: 1.5px solid var(--ink); font-weight: 600; padding-top: 0.5rem; }
.card__foot { margin-top: 0.9rem; font-size: 0.8rem; color: var(--ink-faint); }

.card-act__prose {
	padding: clamp(1.4rem, 3vw, 3rem);
	max-width: 46rem;
}
.lede { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.34; letter-spacing: -0.015em; }

/* ─────────────────────────  14. Selected holes  ─────────────────────── */

/*
 * Deliberately unequal. Each hole gets the width its character earns, and the
 * offsets stop the column of them settling into a rhythm.
 */
.picks { padding: clamp(2rem, 8vh, 6rem) var(--pad); max-width: var(--maxw); margin-inline: auto; }
.pick { margin-bottom: clamp(2.5rem, 7vw, 6rem); }
.pick__media { position: relative; display: block; }
.pick__media img { width: 100%; object-fit: cover; }
.pick__no {
	position: absolute;
	left: clamp(0.6rem, 1.4vw, 1.2rem);
	bottom: clamp(0.2rem, 1vw, 0.6rem);
	font-size: clamp(3.5rem, 9vw, 8rem);
	font-weight: 600;
	line-height: 0.8;
	color: var(--shell);
	letter-spacing: -0.05em;
	text-shadow: 0 2px 26px rgba(12, 20, 14, 0.65);
}
.pick__body { padding-top: 0.9rem; max-width: 34rem; }
.pick__title { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.pick__title a { text-decoration: none; }
.pick__title a:hover { color: var(--marram); }
.pick__hazard { margin: 0.4rem 0 0.3rem; color: var(--ink-soft); }
.pick__spec { margin: 0; color: var(--ink-faint); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.pick--full .pick__media img { aspect-ratio: 21 / 9; }
.pick--wide { width: min(100%, 72ch); margin-left: auto; }
.pick--wide .pick__media img { aspect-ratio: 16 / 9; }
.pick--half { width: min(100%, 62%); }
.pick--half .pick__media img { aspect-ratio: 4 / 3; }
.pick--small { width: min(100%, 40%); margin-left: clamp(0px, 14vw, 12rem); }
.pick--small .pick__media img { aspect-ratio: 3 / 4; }

.picks__more { margin-top: clamp(1rem, 3vw, 2rem); }

/* ─────────────────────────  15. People + journal  ───────────────────── */

.people { padding: clamp(2rem, 6vh, 5rem) var(--pad); }
.people__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(1.4rem, 3.5vw, 3.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.4rem, 3vw, 3rem);
}
.person__name { font-size: 1.3rem; }
.person__role { color: var(--marram); margin: 0.2rem 0 0.6rem; font-size: 0.92rem; }
.person__bio { color: var(--ink-soft); font-size: 0.95rem; }

.journal { padding: clamp(2rem, 6vh, 5rem) var(--pad); }
.journal__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1rem, 2.4vw, 2rem);
	align-items: start;
}
.entry { padding: clamp(1.1rem, 2.2vw, 1.8rem); }
/* The three entries step down, so the row is never a set of level cards. */
.entry:nth-child(2) { margin-top: clamp(0px, 3vw, 2.5rem); }
.entry:nth-child(3) { margin-top: clamp(0px, 6vw, 5rem); }
.entry__title { font-size: 1.2rem; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { color: var(--heather); }
.entry__excerpt { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ─────────────────────────  16. Closing  ────────────────────────────── */

.closing { min-height: 78svh; display: grid; align-items: center; padding: clamp(3rem, 10vh, 8rem) var(--pad); }
.closing__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.closing__line {
	font-size: clamp(2.4rem, 9vw, 8rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.98;
	color: var(--shell);
	text-shadow: 0 2px 30px rgba(12, 20, 14, 0.55), 0 1px 6px rgba(12, 20, 14, 0.45);
	margin-bottom: 0.35em;
}
.closing__sub {
	max-width: var(--measure);
	color: var(--shell);
	text-shadow: 0 1px 16px rgba(12, 20, 14, 0.7), 0 1px 4px rgba(12, 20, 14, 0.5);
	margin-bottom: 1.4rem;
}
.closing .btn { color: var(--shell); border-color: var(--shell); background: rgba(20, 28, 22, 0.35); }
.closing .btn:hover { background: var(--shell); color: var(--ink); }

.opening__hint {
	position: absolute;
	bottom: clamp(1rem, 3vh, 2rem);
	left: var(--pad);
	margin: 0;
	font-size: 0.82rem;
	color: var(--shell);
	opacity: 0.75;
	text-shadow: 0 1px 12px rgba(12, 20, 14, 0.8);
}
.opening { position: relative; }

@media (max-width: 900px) {
	.card-act__inner { grid-template-columns: minmax(0, 1fr); }
	.card { position: static; }
	.pick--half, .pick--small, .pick--wide { width: 100%; margin-left: 0; }
	.pick--small .pick__media img,
	.pick--half .pick__media img,
	.pick--wide .pick__media img,
	.pick--full .pick__media img { aspect-ratio: 16 / 10; }
	.entry:nth-child(2), .entry:nth-child(3) { margin-top: 0; }
}

/* ─────────────────────────  17. The round  ──────────────────────────── */

.round-head { padding: clamp(7rem, 18vh, 12rem) var(--pad) clamp(1.5rem, 4vw, 3rem); }
.round-head__inner { max-width: var(--maxw); margin-inline: auto; padding: clamp(1.4rem, 3.5vw, 3rem); }
.round-head__title { font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: -0.04em; }
.round-head__sub { margin: 0.8rem 0 0; max-width: var(--measure); color: var(--ink-soft); }

.round { max-width: var(--maxw); margin-inline: auto; padding: clamp(1rem, 4vw, 3rem) var(--pad) clamp(3rem, 8vw, 6rem); }

/*
 * Holes alternate sides and vary in width by par. Two consecutive holes never
 * share an edge, which is the point — a scorecard is regular, a links is not.
 */
.hole {
	display: grid;
	gap: clamp(0.8rem, 2vw, 1.6rem);
	margin-bottom: clamp(2.5rem, 7vw, 6rem);
	align-items: end;
}
.hole--left { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
.hole--right { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
.hole--right .hole__media { order: 2; }

.hole--short { width: min(100%, 54%); }
.hole--mid { width: min(100%, 78%); }
.hole--long { width: 100%; }
.hole--right.hole--short, .hole--right.hole--mid { margin-left: auto; }

.hole__media { position: relative; display: block; }
.hole__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hole__no {
	position: absolute;
	left: clamp(0.5rem, 1.2vw, 1rem);
	bottom: clamp(0.1rem, 0.8vw, 0.5rem);
	font-size: clamp(2.6rem, 7vw, 6rem);
	font-weight: 600;
	line-height: 0.8;
	letter-spacing: -0.05em;
	color: var(--shell);
	text-shadow: 0 2px 24px rgba(12, 20, 14, 0.7);
}
/* Floor raised so the text always clears the renderer's edge feather. */
.hole__body { padding: clamp(1.15rem, 1.8vw, 1.4rem); }
.hole__title { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
.hole__title a { text-decoration: none; }
.hole__title a:hover { color: var(--marram); }
.hole__spec { display: flex; gap: 1.2rem; margin: 0.7rem 0; font-variant-numeric: tabular-nums; }
.hole__spec dt { color: var(--ink-faint); font-size: 0.78rem; margin: 0; }
.hole__spec dd { margin: 0; font-weight: 600; font-size: 1.05rem; }
.hole__wind { margin: 0 0 0.3rem; color: var(--heather); font-size: 0.9rem; }
.hole__hazard { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

/* ─────────────────────────  18. One hole  ───────────────────────────── */

.sh-head { position: relative; min-height: 76svh; display: grid; align-items: end; }
.sh-head__media { position: absolute; inset: 0; }
.sh-head__media img { width: 100%; height: 100%; object-fit: cover; }
.sh-head__media .img-absent { height: 100%; aspect-ratio: auto; }
.sh-head__copy {
	position: relative;
	padding: 0 var(--pad) clamp(2rem, 6vh, 4rem);
	max-width: var(--maxw);
	margin-inline: auto;
	width: 100%;
	color: var(--shell);
	text-shadow: 0 2px 26px rgba(12, 20, 14, 0.6), 0 1px 5px rgba(12, 20, 14, 0.5);
}
.sh-head__no { font-size: clamp(4rem, 16vw, 14rem); font-weight: 600; line-height: 0.78; letter-spacing: -0.06em; margin: 0; opacity: 0.92; }
.sh-head__title { font-size: clamp(1.8rem, 5vw, 4rem); letter-spacing: -0.035em; margin-top: 0.1em; }
.sh-head__wind { margin: 0.5rem 0 0; opacity: 0.9; }

.sh-body {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(2rem, 6vw, 4.5rem) var(--pad);
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
}
.sh-card { padding: clamp(1.1rem, 2.2vw, 1.6rem); position: sticky; top: 6rem; }
.sh-card__list { margin: 0; display: grid; gap: 0.55rem; font-variant-numeric: tabular-nums; }
.sh-card__list > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.sh-card__list dt { color: var(--ink-faint); font-size: 0.88rem; }
.sh-card__list dd { margin: 0; font-weight: 600; }
.sh-card__unit { font-weight: 400; color: var(--ink-faint); font-size: 0.8em; margin-left: 0.25em; }
.sh-card__hazard { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--panel-line); font-size: 0.9rem; color: var(--ink-soft); }

.sh-prose { padding: clamp(1.3rem, 3vw, 2.8rem); max-width: 44rem; }
.sh-prose__named { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); }
.sh-advice {
	margin: 1.6rem 0;
	padding-left: 1.1rem;
	border-left: 3px solid var(--gorse);
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	line-height: 1.36;
	letter-spacing: -0.012em;
}
.sh-advice cite { display: block; margin-top: 0.5rem; font-size: 0.85rem; font-style: normal; color: var(--ink-faint); }

.sh-nav {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.sh-nav__link { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; background: var(--panel); padding: 0.7rem 1rem; }
.sh-nav__no { font-weight: 600; font-size: 1.3rem; }
.sh-nav__all { text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; }
.sh-nav__all:hover { color: var(--marram); }

/* ─────────────────────────  19. Documents  ──────────────────────────── */

.doc { max-width: var(--maxw); margin-inline: auto; padding: clamp(7rem, 18vh, 12rem) var(--pad) clamp(3rem, 8vw, 6rem); }
.doc__head { margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.doc__title { font-size: clamp(2.2rem, 7vw, 5.5rem); letter-spacing: -0.04em; color: var(--shell); text-shadow: 0 2px 26px rgba(12,20,14,0.55), 0 1px 5px rgba(12,20,14,0.45); }
.doc__date { color: var(--shell); opacity: 0.85; margin: 0.6rem 0 0; text-shadow: 0 1px 14px rgba(12,20,14,0.7); }
.doc__body { padding: clamp(1.4rem, 3.5vw, 3.2rem); max-width: 46rem; }
.doc__body h2 { font-size: 1.5rem; margin: 1.6em 0 0.5em; }
.doc__comments { margin-top: 2rem; padding: clamp(1.2rem, 3vw, 2.4rem); max-width: 46rem; }

.pagination, .comments { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding-inline: 0.7rem; text-decoration: none; background: var(--panel); }
.pagination .current { background: var(--ink); color: var(--shell); }

.searchform { display: flex; gap: 0.5rem; }
.searchform input { font: inherit; padding: 0.7em 0.9em; border: 1.5px solid var(--panel-line); background: var(--shell); }

@media (max-width: 900px) {
	.hole--left, .hole--right { grid-template-columns: minmax(0, 1fr); }
	.hole--right .hole__media { order: 0; }
	.hole--short, .hole--mid, .hole--long { width: 100%; margin-left: 0; }
	.sh-body { grid-template-columns: minmax(0, 1fr); }
	.sh-card { position: static; }
}

/* ─────────────────  20. Type that outlives its background  ──────────── */

/*
 * Everything below was written pale, because the live field behind it is dark
 * grass. When the field is absent — reduced motion, no WebGL, or a device the
 * quality governor pulled it from — the ground becomes a pale sky gradient and
 * pale-on-pale is unreadable.
 *
 * So ink is the default and pale is the exception, granted only under
 * `.has-links`, which is set by the renderer once it is actually drawing. The
 * safe state is the one that applies when nothing has run.
 */
.opening__line,
.opening__sub,
.opening__hint,
.closing__line,
.closing__sub,
.doc__title,
.doc__date {
	color: var(--ink);
	text-shadow: none;
}

.opening__sub,
.closing__sub,
.doc__date { color: var(--ink-soft); }

.opening__hint { color: var(--ink-faint); opacity: 1; }

.closing .btn { color: var(--ink); border-color: var(--ink); background: transparent; }
.closing .btn:hover { background: var(--ink); color: var(--shell); }

.has-links .opening__line,
.has-links .closing__line,
.has-links .doc__title {
	color: var(--shell);
	text-shadow: 0 2px 30px rgba(12, 20, 14, 0.55), 0 1px 6px rgba(12, 20, 14, 0.45);
}
.has-links .opening__sub,
.has-links .closing__sub,
.has-links .doc__date {
	color: var(--shell);
	text-shadow: 0 1px 16px rgba(12, 20, 14, 0.7), 0 1px 4px rgba(12, 20, 14, 0.5);
}
.has-links .opening__hint {
	color: var(--shell);
	opacity: 0.75;
	text-shadow: 0 1px 12px rgba(12, 20, 14, 0.8);
}
.has-links .closing .btn { color: var(--shell); border-color: var(--shell); background: rgba(20, 28, 22, 0.35); }
.has-links .closing .btn:hover { background: var(--shell); color: var(--ink); }

/* The masthead over the opening has the same problem and the same answer. */
.masthead { color: var(--ink); text-shadow: none; }
.masthead::after { opacity: 0; }
.has-links body.home .masthead { color: var(--shell); text-shadow: 0 1px 14px rgba(12, 20, 14, 0.55); }
.has-links body.home .masthead::after { opacity: 1; }
.masthead.is-settled,
.has-links body.home .masthead.is-settled { color: var(--ink); text-shadow: none; }
.has-links body.home .masthead.is-settled::after { opacity: 0; }

/*
 * A hole's header sets pale type over its photograph. The photograph is always
 * there, but a hole with no picture yet falls back to a *light* panel, so the
 * scrim is what guarantees the text is legible either way.
 */
.sh-head::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Weighted to cover the whole lower half, not just the last few percent:
	   the hole number is 200px tall and sits well above the foot of the frame,
	   so a gradient that only darkens the very bottom leaves the largest
	   element on the page sitting on bare photograph. */
	background: linear-gradient(to top, rgba(14, 22, 16, 0.78) 0%, rgba(14, 22, 16, 0.55) 34%, rgba(14, 22, 16, 0.18) 68%, rgba(14, 22, 16, 0.10) 100%);
	pointer-events: none;
}
.sh-head__copy { z-index: 1; }

/*
 * The same guarantee for every place a big pale numeral sits on an image.
 *
 * The number is the navigation on these pages, so it cannot depend on the
 * photograph behind it being dark — and a hole with no picture yet falls back
 * to a *light* panel, which is the worst case rather than an edge case.
 */
.hole__media,
.pick__media { position: relative; }

.hole__media::after,
.pick__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 22, 16, 0.62) 0%, rgba(14, 22, 16, 0.06) 46%, rgba(14, 22, 16, 0) 100%);
	pointer-events: none;
}
.hole__no,
.pick__no { z-index: 1; }

/* ─────────────────  21. Panels painted by the renderer  ─────────────── */

/*
 * When the field is running, the panels are drawn into its canvas as a flowing
 * material (see PANEL_FRAG) rather than filled here — so they hand back their
 * own background and keep only their padding and their text.
 *
 * This is scoped to `.has-links` for the same reason everything else is: the
 * state that applies when no script has run has to be the safe one. Without the
 * renderer these stay exactly the opaque, legible panels they were.
 */
.has-links .panel,
.has-links .panel--strong,
.has-links .site-footer {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/*
 * The dark panel is a different thing — it is a deliberate inversion, not a
 * reading surface, so it keeps its own fill either way.
 */
.has-links .panel--dark { background: var(--panel-dark); }

/*
 * A hairline of the panel's own edge, kept even when the canvas paints the
 * body. The shader feathers the fill outward; this keeps the corner legible as
 * a corner so the panel still reads as a placed object.
 */
.has-links .panel {
	box-shadow: 0 1px 44px rgba(20, 30, 22, 0.10);
}