/* ==========================================================================
   Vision Skylights: responsive foundation (laid once; every template inherits)
   Art direction: a daylight study drawn on tracing paper. Paper grounds,
   graphite lines, one cobalt pen, and the sun coloured in.
   ========================================================================== */

:root {
	--bg: #F5F6F7;
	--surface: #FFFFFF;
	--ink: #1D2126;
	--ink-soft: #4A525C;
	--rule: #DDE1E6;
	--rule-strong: #C9CFD6;
	--accent: #0847BE;
	--accent-deep: #063A9C;
	--accent-tint: #E7EEFB;
	--sun: #FDE4A4;
	--sun-line: #E9B949;
	--wa: #1F7A45;

	--f-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

	--fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.6rem);
	--fs-h2: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
	--fs-h3: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
	--fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
	--fs-lede: clamp(1.06rem, 1rem + .35vw, 1.25rem);
	--fs-small: .875rem;
	--fs-mono: .8125rem;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
	--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

	--pad-sec: clamp(48px, 6vw, 96px);
	--pad-sec-info: clamp(40px, 5vw, 80px);
	--gutter: clamp(16px, 4vw, 40px);
	--w-prose: 68ch;
	--w-std: 1260px;
	--w-wide: 1320px;
	--head-h: 64px;
	--radius: 4px;
	--radius-btn: 3px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	line-height: 1.65;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: var(--s4); top: -100px; z-index: 1000;
	background: var(--accent); color: #fff; padding: var(--s3) var(--s4); border-radius: var(--radius-btn);
}
.skip-link:focus { top: var(--s3); color: #fff; }
.site-main:focus { outline: none; }

/* Type ------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--f-sans); color: var(--ink); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
em.accent {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--accent);
	letter-spacing: 0;
	font-size: 1.08em;
}
.eyebrow, .kicker {
	font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500;
	letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.lede { font-size: var(--fs-lede); color: var(--ink-soft); line-height: 1.55; }

/* Section number: mono "04" + short cobalt rule, drawn by CSS (no text node). */
.sec-no { display: inline-flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.sec-no::before { content: attr(data-no); font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--accent); letter-spacing: .04em; }
.sec-no::after { content: ""; width: 32px; height: 1px; background: var(--accent); }
.sec-title { font-size: var(--fs-h2); max-width: 22ch; }

/* Containers --------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--w-std)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; }
.wrap--prose { width: min(100% - 2 * var(--gutter), var(--w-prose)); margin-inline: auto; }

/* Grid utilities: always a named minimum capped at the container (§7c.1). */
.grid { display: grid; gap: var(--s5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* Buttons ------------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
	min-height: 48px; padding: 0 var(--s5); border-radius: var(--radius-btn);
	font-weight: 600; font-size: .98rem; line-height: 1.2; text-decoration: none; text-align: center;
	border: 1.5px solid var(--accent); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn--line { background: transparent; color: var(--accent); }
.btn--line:hover, .btn--line:focus-visible { background: var(--accent-tint); color: var(--accent-deep); }
.btn--sm { min-height: 40px; padding: 0 var(--s4); font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* Prose (every long body) -------------------------------------------------- */
.prose { max-width: var(--w-prose); }
.prose > * + *,
.prose > section > * + * { margin-top: 1.1em; }
.prose > section > h3 { margin-top: 1.7em; }
.prose > section > h3 + * { margin-top: .6em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 1.6em; }
.prose h3 { margin-top: 1.7em; }
.prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { font-family: var(--f-mono); color: var(--accent); font-size: .9em; }
.prose a:not(.btn) { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose blockquote, .prose .note {
	border-left: 3px solid var(--accent); background: var(--accent-tint);
	padding: var(--s4) var(--s5); border-radius: 0 var(--radius) var(--radius) 0;
}
.prose .note--sun { border-left-color: var(--sun-line); background: #FFF7E3; }
.prose .note > :first-child { margin-top: 0; }
.prose .note p + p { margin-top: .6em; }

/* Tables must fit, never scroll: stack into label/value rows at <=768px. */
.table-wrap { margin-block: 1.4em; }
.rtable { font-size: .95rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.rtable th, .rtable td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.rtable th { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; background: var(--bg); }
.rtable tr:last-child td { border-bottom: 0; }
@media (max-width: 768px) {
	.rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
	.rtable tr { border-bottom: 1px solid var(--rule-strong); padding: var(--s2) 0; }
	.rtable td { border: 0; padding: var(--s1) var(--s4); display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--s3); }
	.rtable td::before { content: attr(data-label); font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding-top: .2em; }
}

/* Figures: block-level, centred, cropped from any source ratio (§3.4-3.5). */
.plate { margin-block: 1.8em; }
.plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; border-radius: var(--radius); background: var(--rule); }
.plate figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s2); font-family: var(--f-mono); font-size: .78rem; }

/* Motion (CSS only). Starting states exist only under .js-motion (§7c.6). */
@media (prefers-reduced-motion: no-preference) {
	.js-motion .hero__copy { animation: vs-fade .6s ease-out both; }
	.js-motion .hero__photo { animation: vs-fade .9s ease-out both; }
	@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
}