/* ==========================================================================
   Huw Williams Golf · Design System v4 "GROUNDWORK"
   Direction A per CREATIVE-DIRECTION.md. Every choice traces to provenance:
   pigmented sandstone ground and irrigated emerald (the 6am Montgomerie
   range), gunmetal ink and stamped caps (the worn wedge), settle easing
   (one ball flight, two skies), idle sway reserved for one accent
   (marram grass at Pyle & Kenfig).
   Anchored rail layout. Schibsted Grotesk display over Source Serif 4 body.
   No counters, no tickers, no drawn arcs, no monospace labels.
   ========================================================================== */

:root {
	/* Colour, oklch. Sandstone is a colour, not an off-white. */
	--sand: oklch(91.5% 0.038 84);
	--sand-2: oklch(88.5% 0.048 82);
	--raised: oklch(95% 0.022 86);
	--ink: oklch(32% 0.018 252);          /* gunmetal, not near-black */
	--ink-soft: oklch(44% 0.018 250);
	--ink-faint: oklch(55% 0.014 248);
	--emerald: oklch(46% 0.115 156);      /* irrigated turf against sand */
	--emerald-deep: oklch(39% 0.105 157);
	--slate: oklch(47% 0.045 240);        /* Atlantic secondary */
	--bone: oklch(97% 0.012 90);
	--hairline: color-mix(in oklch, var(--ink) 16%, transparent);
	--hairline-2: color-mix(in oklch, var(--ink) 30%, transparent);

	/* Type */
	--font-display: 'Schibsted Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	--fs-body: 1.0625rem;
	--fs-lede: clamp(1.15rem, 1.6vw, 1.35rem);
	--fs-h3: clamp(1.3rem, 2vw, 1.6rem);
	--fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
	--fs-h1: clamp(2.6rem, 5.5vw, 4.6rem);
	--lh-body: 1.65;
	--ls-tight: -0.018em;
	--ls-stamp: 0.18em;
	--measure: 62ch;

	/* Layout */
	--rail-w: 264px;
	--content-max: 1060px;
	--gutter: clamp(1.25rem, 4vw, 3.25rem);
	--band-y: clamp(3.75rem, 7.5vw, 6.75rem);
	--radius: 3px;

	/* Motion: the house curve lands softly (launch, apex, fall) */
	--ease-land: cubic-bezier(0.18, 0.7, 0.16, 1);
	--dur: 420ms;
	--dur-slow: 760ms;

	--topbar-h: 64px;
	--dock-h: 72px;
}

/* Cross-page View Transitions where supported; instant elsewhere. */
@view-transition { navigation: auto; }

/* ==========================================================================
   Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, picture, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--ls-tight);
	color: var(--ink);
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; transition: color var(--dur) var(--ease-land); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--emerald); color: var(--bone); }

.skip-link {
	position: fixed; top: 10px; left: 10px; z-index: 200;
	background: var(--ink); color: var(--bone);
	padding: 10px 16px; border-radius: var(--radius);
	font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease-land);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }

/* ==========================================================================
   Stamped caps: the wedge's maker's stamp, pressed not printed
   ========================================================================== */
.stamp {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: var(--ls-stamp); text-transform: uppercase;
	color: var(--ink-soft);
}
.stamp::before { content: ""; width: 14px; height: 1px; background: var(--emerald); flex: 0 0 auto; }
.stamp--bare::before { display: none; }

/* ==========================================================================
   The rail (desktop) and topbar/dock (mobile)
   ========================================================================== */
.rail {
	position: fixed; inset-block: 0; left: 0; z-index: 90;
	width: var(--rail-w);
	display: flex; flex-direction: column;
	padding: 2rem 1.6rem;
	border-right: 1px solid var(--hairline);
	background: var(--sand);
}
.wordmark {
	font-family: var(--font-display); font-weight: 700;
	font-size: 1.18rem; letter-spacing: var(--ls-tight);
	color: var(--ink); text-decoration: none;
}
.wordmark b { color: var(--emerald); font-weight: 700; }
.rail nav { margin-top: 2.75rem; flex: 1; }
.rail nav ul { display: grid; gap: 0.45rem; }
.rail nav a {
	display: block; padding: 0.42rem 0;
	font-family: var(--font-display); font-size: 0.92rem; font-weight: 500;
	color: var(--ink-soft); text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--dur) var(--ease-land);
}
.rail nav a:hover { color: var(--ink); }
.rail nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--emerald); }
.rail__foot { display: grid; gap: 1rem; }
.rail__social { display: flex; gap: 1rem; font-family: var(--font-display); font-size: 0.78rem; }
.rail__social a { color: var(--ink-faint); text-decoration: none; }
.rail__social a:hover { color: var(--ink); }

.topbar {
	display: none;
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	height: var(--topbar-h);
	align-items: center; justify-content: space-between;
	padding: 0 var(--gutter);
	background: color-mix(in oklch, var(--sand) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--hairline);
}
.menu-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; }
.menu-toggle .bar { width: 22px; height: 1.5px; background: var(--ink); transition: transform var(--dur) var(--ease-land), opacity var(--dur) var(--ease-land); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.sheet {
	position: fixed; inset: 0; z-index: 80;
	background: var(--sand);
	padding: calc(var(--topbar-h) + 1.5rem) var(--gutter) 2rem;
	display: flex; flex-direction: column; gap: 2rem;
	overflow-y: auto;
	opacity: 0; transform: translateY(-8px);
	transition: opacity var(--dur) var(--ease-land), transform var(--dur) var(--ease-land);
}
.sheet[hidden] { display: none !important; }
.sheet.open { opacity: 1; transform: none; }
.sheet nav ul { display: grid; }
.sheet nav a {
	display: block; padding: 0.9rem 0;
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: var(--ls-tight);
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--hairline);
}
body.menu-open { overflow: hidden; }

.dock {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
	padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
	background: color-mix(in oklch, var(--sand) 90%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--hairline);
}

main { margin-left: var(--rail-w); }
@media (max-width: 1023px) {
	.rail { display: none; }
	.topbar { display: flex; }
	.dock { display: block; }
	main { margin-left: 0; padding-top: var(--topbar-h); padding-bottom: var(--dock-h); }
}

/* ==========================================================================
   Buttons and link CTAs
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
	padding: 0.95rem 1.5rem;
	font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--bone); background: var(--emerald);
	border-radius: var(--radius);
	text-decoration: none; white-space: nowrap;
	transition: background var(--dur) var(--ease-land), transform var(--dur) var(--ease-land);
}
.btn:hover { background: var(--emerald-deep); transform: translateY(-1px); }
.btn--full { width: 100%; }
.btn--quiet { background: transparent; color: var(--ink); border: 1px solid var(--hairline-2); }
.btn--quiet:hover { background: var(--raised); transform: translateY(-1px); }

/* The signature lives here: this button's label and destination are
   rewritten by the section currently in view (see main.js). */
.context-cta { position: relative; }
.context-cta .btn { transition: background var(--dur) var(--ease-land), opacity 200ms var(--ease-land), transform var(--dur) var(--ease-land); }
.context-cta.swapping .btn { opacity: 0; }

.link-cta {
	display: inline-flex; align-items: baseline; gap: 0.5rem;
	font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
	letter-spacing: var(--ls-stamp); text-transform: uppercase;
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--emerald);
	padding-bottom: 3px;
	transition: color var(--dur) var(--ease-land), gap var(--dur) var(--ease-land);
}
.link-cta:hover { color: var(--emerald); gap: 0.75rem; }
.link-cta .arrow { color: var(--emerald); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* ==========================================================================
   Bands and wrap
   ========================================================================== */
.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band-y); }
.band--alt { background: var(--sand-2); }
.band--rule { border-top: 1px solid var(--hairline); }
.measure { max-width: var(--measure); }

.band-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.band-head .stamp { margin-bottom: 1.1rem; }
.band-head h2 { font-size: var(--fs-h2); }
.band-head .lede { margin-top: 0.9rem; }
.lede { font-size: var(--fs-lede); color: var(--ink-soft); line-height: 1.55; max-width: 58ch; }

/* ==========================================================================
   Hero: poster type over a framed photograph object
   ========================================================================== */
.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--band-y); }
.hero .stamp { margin-bottom: 1.4rem; }
.hero h1 { font-size: var(--fs-h1); max-width: 13ch; }
.hero .lede { margin-top: 1.4rem; }
.hero .cta-row { margin-top: 2.25rem; }

/* A print on a clubhouse wall: hairline frame, narrow mat, stamped caption */
.framed { margin-top: clamp(2.5rem, 5vw, 4rem); }
.framed__mat {
	background: var(--raised);
	border: 1px solid var(--hairline-2);
	padding: clamp(8px, 1.2vw, 14px);
}
.framed__mat > * { display: block; width: 100%; }
.framed figcaption {
	margin-top: 0.8rem;
	font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
	letter-spacing: var(--ls-stamp); text-transform: uppercase;
	color: var(--ink-faint);
}

/* Placeholder slot: never ships as final, see PLACEHOLDERS.md */
.slot {
	display: grid; place-items: center; text-align: center;
	background: var(--sand-2);
	border: 1px dashed var(--hairline-2);
	color: var(--ink-faint);
	padding: 1rem;
}
.slot span {
	font-family: var(--font-display); font-size: 0.74rem; font-weight: 600;
	letter-spacing: var(--ls-stamp); text-transform: uppercase;
}

/* ==========================================================================
   Triage trio (subgrid equalises the three journeys)
   ========================================================================== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.trio > a {
	display: grid; grid-template-rows: subgrid; grid-row: span 3;
	gap: 0.6rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--hairline-2);
	text-decoration: none; color: inherit;
}
.trio h3 { font-size: var(--fs-h3); transition: color var(--dur) var(--ease-land); }
.trio p { color: var(--ink-soft); font-size: 0.98rem; }
.trio > a:hover h3 { color: var(--emerald); }
.trio .link-cta { align-self: start; }
@media (max-width: 720px) { .trio { grid-template-columns: 1fr; } }

/* ==========================================================================
   Method rows
   ========================================================================== */
.method { display: grid; gap: 0; }
.method__row {
	display: grid; grid-template-columns: minmax(0, 200px) 1fr;
	gap: clamp(1.25rem, 4vw, 3rem);
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	border-top: 1px solid var(--hairline);
}
.method__row:last-child { border-bottom: 1px solid var(--hairline); }
.method__row h3 { font-size: var(--fs-h3); }
.method__row .stamp { margin-bottom: 0.55rem; }
.method__row p { color: var(--ink-soft); max-width: var(--measure); }
@media (max-width: 640px) { .method__row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ==========================================================================
   Note grid (audiences, philosophy)
   ========================================================================== */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.note { padding-top: 1.1rem; border-top: 1px solid var(--hairline-2); }
.note .stamp { margin-bottom: 0.6rem; }
.note h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.note p { color: var(--ink-soft); font-size: 0.98rem; }
@media (max-width: 820px) { .notes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .notes { grid-template-columns: 1fr; } }

/* ==========================================================================
   Venue cards (container query: cards adapt to their own width)
   ========================================================================== */
.venues { container-type: inline-size; display: grid; gap: 1rem; }
.venue {
	display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem; align-items: baseline;
	padding: 1.2rem 0;
	border-top: 1px solid var(--hairline);
}
.venue:last-of-type { border-bottom: 1px solid var(--hairline); }
.venue h3 { font-size: 1.2rem; }
.venue p { grid-column: 1 / -1; color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.venue .stamp--bare { color: var(--emerald); }
@container (max-width: 540px) {
	.venue { grid-template-columns: 1fr; }
}
.venues-note { margin-top: 1rem; font-size: 0.92rem; color: var(--ink-faint); font-style: italic; }

/* ==========================================================================
   Packages with TBC price anchors
   ========================================================================== */
.packs { display: grid; gap: 0; }
.pack {
	display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 2rem; align-items: baseline;
	padding: 1.4rem 0;
	border-top: 1px solid var(--hairline);
}
.pack:last-child { border-bottom: 1px solid var(--hairline); }
.pack h3 { font-size: 1.25rem; }
.pack p { grid-column: 1; color: var(--ink-soft); margin: 0; max-width: 52ch; }
.pack__price { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.tbc {
	border-bottom: 2px dashed var(--slate);
	color: var(--slate);
	cursor: help;
}
@media (max-width: 560px) { .pack { grid-template-columns: 1fr; } }

/* ==========================================================================
   Quotes: supplied verbatim, with verifiable rating links
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.quote { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline-2); }
.quote blockquote { margin: 0; font-style: italic; font-size: 1.08rem; line-height: 1.55; }
.quote figcaption { margin-top: auto; }
.quote .who { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; font-style: normal; }
.quote .context { display: block; font-size: 0.85rem; color: var(--ink-faint); margin-top: 2px; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }
.proof-links { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: baseline; }

/* ==========================================================================
   Steps (online coaching loop)
   ========================================================================== */
.steps { display: grid; gap: 0; }
.step {
	display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.1rem; align-items: baseline;
	padding: 1.15rem 0; border-top: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__mark { font-family: var(--font-display); font-weight: 700; color: var(--emerald); font-size: 0.95rem; }
.step h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.2rem; }
.step p { color: var(--ink-soft); font-size: 0.97rem; margin: 0; }

/* ==========================================================================
   Split (text beside framed object)
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Forms: validated, with a real success state
   ========================================================================== */
.form { display: grid; gap: 1.15rem; max-width: 620px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
	font-family: var(--font-body); font-size: 1rem;
	color: var(--ink); background: var(--raised);
	border: 1px solid var(--hairline-2); border-radius: var(--radius);
	padding: 0.85rem 0.95rem;
	transition: border-color var(--dur) var(--ease-land);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--emerald); }
.field textarea { min-height: 140px; resize: vertical; }
.field .error { display: none; font-family: var(--font-display); font-size: 0.82rem; color: oklch(45% 0.12 30); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: oklch(55% 0.13 30); }
.field.invalid .error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-success {
	display: none;
	padding: 1.4rem 1.5rem;
	background: color-mix(in oklch, var(--emerald) 10%, var(--raised));
	border: 1px solid var(--emerald); border-radius: var(--radius);
}
.form-success h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.form-success p { margin: 0; color: var(--ink-soft); }
form.sent { display: none; }
form.sent + .form-success { display: block; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs details { border-top: 1px solid var(--hairline); }
.faqs details:last-child { border-bottom: 1px solid var(--hairline); }
.faqs summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
	padding: 1.25rem 0;
	font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--emerald); font-size: 1.3rem; transition: transform var(--dur) var(--ease-land); }
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs details > div { padding: 0 0 1.25rem; color: var(--ink-soft); max-width: var(--measure); }

/* ==========================================================================
   Trips list
   ========================================================================== */
.trips-list { display: grid; gap: 0; }
.trip {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: 1.15rem 0; border-top: 1px solid var(--hairline);
}
.trip:last-child { border-bottom: 1px solid var(--hairline); }
.trip h3 { font-size: 1.3rem; }
.trip .stamp--bare { color: var(--emerald); white-space: nowrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { border-top: 1px solid var(--hairline); padding-block: 2.5rem 5.5rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: baseline; }
.site-foot p, .site-foot a { font-family: var(--font-display); font-size: 0.82rem; color: var(--ink-faint); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
.site-foot ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   Reveals: settle on entry. Scroll-driven where supported, IO fallback.
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-land), transform var(--dur-slow) var(--ease-land); }
.reveal.in { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
	.reveal { opacity: 1; transform: none; transition: none; animation: settle both; animation-timeline: view(); animation-range: entry 0% entry 36%; }
	@keyframes settle { from { opacity: 0; transform: translateY(16px); } }
}

/* Idle sway: one accent per page, the marram grass at rest */
.sway { animation: sway 6.5s var(--ease-land) infinite alternate; transform-origin: bottom left; }
@keyframes sway { from { transform: rotate(-0.4deg); } to { transform: rotate(0.4deg); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
	.sway { animation: none !important; }
}

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; }