/* IBM Plex Mono 400 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 600 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 400 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 500 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 600 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 700 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 700 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Serif 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Serif 600 - latin */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Design tokens - ascode.nl
   Palette derives from the Ascode mark: ink #1a1a1a, cyan #54c8ea.
   The brand cyan is only 1.94:1 on white, so it never carries text on a
   light ground: --accent (a deepened sibling, 7.1:1) does that, and the
   cyan is reserved for dark grounds, rules and markers.
   Redefine tokens only - never component rules - per theme.
   ========================================================================== */

:root {
	/* --- surfaces & ink (light) --- */
	--ground:        #ffffff;
	--surface:       #f3f7f8;
	--surface-2:     #e7eff1;
	--ink:           #14191c;
	--ink-muted:     #55666d;   /* 5.6:1 on --ground */
	--rule:          #d6e1e4;
	--rule-strong:   #b6c7cc;

	/* --- brand --- */
	--accent:        #0a5f7d;   /* 7.1:1 on --ground - links, CTAs */
	--accent-hover:  #084c65;
	--cyan:          #54c8ea;   /* the mark's cyan - dark grounds & markers */

	/* --- semantic (never decorative) --- */
	--ok:            #1a6b4d;
	--warn:          #8a5406;
	--crit:          #9b2c2c;
	--ok-bg:         #e3f2ea;
	--warn-bg:       #fbf0dc;
	--crit-bg:       #fbe6e6;

	/* --- inverted panel: footer, hero panel, code --- */
	--panel:         #0e1418;
	--panel-2:       #161f24;
	--panel-ink:     #e6eef1;
	--panel-muted:   #93a9b1;
	--panel-rule:    #27353c;

	/* --- selection / focus --- */
	--focus:         #0a5f7d;

	/* --- type --- */
	--sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
	--step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.08rem);
	--step-1:  clamp(1.13rem, 1.07rem + 0.30vw, 1.30rem);
	--step-2:  clamp(1.33rem, 1.22rem + 0.55vw, 1.65rem);
	--step-3:  clamp(1.55rem, 1.36rem + 0.95vw, 2.10rem);
	--step-4:  clamp(1.85rem, 1.50rem + 1.75vw, 2.70rem);
	--step-5:  clamp(2.20rem, 1.60rem + 3.00vw, 3.60rem);

	/* --- space: 8px base --- */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

	/* --- measure & layout ---
	   The measure stays near 68 characters at every size, because that is a
	   readability constant, not a screen-size one. On very wide displays the
	   column grows *physically* instead, by scaling the root font size - same
	   character count, larger text - and the shell widens so multi-column
	   sections use the space rather than sitting in the middle of it. */
	--measure: 68ch;
	--shell: 1180px;
	--shell-wide: 1180px;
	--gutter: clamp(20px, 5vw, 48px);

	--radius: 4px;
	--radius-lg: 6px;
	--shadow: 0 1px 2px rgb(20 25 28 / .05), 0 8px 24px -16px rgb(20 25 28 / .30);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground:      #0e1418;
		--surface:     #161f24;
		--surface-2:   #1f2b32;
		--ink:         #e6eef1;
		--ink-muted:   #9fb3ba;
		--rule:        #27353c;
		--rule-strong: #3a4c55;

		--accent:       #54c8ea;   /* 9.6:1 on --ground */
		--accent-hover: #8adcf3;
		--cyan:         #54c8ea;

		--ok:      #6fd3a5;
		--warn:    #e5b55f;
		--crit:    #f0908d;
		--ok-bg:   #14302a;
		--warn-bg: #322613;
		--crit-bg: #351d1f;

		--panel:       #05090b;
		--panel-2:     #101a1f;
		--panel-ink:   #e6eef1;
		--panel-muted: #93a9b1;
		--panel-rule:  #1e2a30;

		--focus:   #54c8ea;
		--shadow:  0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -16px rgb(0 0 0 / .8);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--ground:      #0e1418;
	--surface:     #161f24;
	--surface-2:   #1f2b32;
	--ink:         #e6eef1;
	--ink-muted:   #9fb3ba;
	--rule:        #27353c;
	--rule-strong: #3a4c55;

	--accent:       #54c8ea;
	--accent-hover: #8adcf3;
	--cyan:         #54c8ea;

	--ok:      #6fd3a5;
	--warn:    #e5b55f;
	--crit:    #f0908d;
	--ok-bg:   #14302a;
	--warn-bg: #322613;
	--crit-bg: #351d1f;

	--panel:       #05090b;
	--panel-2:     #101a1f;
	--panel-ink:   #e6eef1;
	--panel-muted: #93a9b1;
	--panel-rule:  #1e2a30;

	--focus:   #54c8ea;
	--shadow:  0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -16px rgb(0 0 0 / .8);

	color-scheme: dark;
}
/* ==========================================================================
   Base - reset, layout primitives, typography
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

/* Large displays: grow the type rather than the line length. A 40" screen at
   normal viewing distance wants bigger text, not 140-character lines. Because
   the measure is set in ch, the column grows with the font and the character
   count per line does not move. */
@media (min-width: 1700px) { html { font-size: 17.5px; } }
@media (min-width: 2200px) { html { font-size: 19px; } }
@media (min-width: 2800px) { html { font-size: 20.5px; } }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main { flex: 1 0 auto; }

::selection { background: var(--cyan); color: #0e1418; }

/* --- layout primitives --- */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* Multi-column sections (hero, offers, proof, footer) may use more width as
   the viewport grows - they are grids, not prose. */
@media (min-width: 1500px) { :root { --shell: 1340px; } }
@media (min-width: 1900px) { :root { --shell: 1480px; } }
@media (min-width: 2400px) { :root { --shell: 1620px; } }

.shell-narrow { max-width: 62rem; }
/* Pages that are nothing but prose: size the shell to the measure so the
   header rule ends exactly where the text does. */
.shell-prose { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: var(--sp-4); }

/* --- headings --- */
h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.015em;
	text-wrap: balance;
	margin: 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-family: var(--sans); letter-spacing: -.008em; line-height: 1.3; }
h4 { font-size: var(--step-0); font-family: var(--sans); letter-spacing: 0; }

p { margin: 0; }

/* --- links --- */
/* A bare URL used as link text has no break opportunities, so on a phone it
   pushes the whole page sideways. Let long unbroken strings break rather than
   overflow - `anywhere` only kicks in when there is no better option. */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--accent-hover); }
a:visited { color: var(--accent); }

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

/* --- media --- */
img, svg, video { max-width: 100%; height: auto; }
img[width][height] { height: auto; }
iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* --- code --- */
code, kbd, samp, pre { font-family: var(--mono); }
:not(pre) > code {
	font-size: .875em;
	background: var(--surface-2);
	padding: .12em .38em;
	border-radius: 3px;
	word-break: break-word;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }

/* --- utilities --- */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0); clip-path: inset(50%);
	height: 1px; width: 1px; overflow: hidden;
	position: absolute; white-space: nowrap;
}
.eyebrow {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}
.muted { color: var(--ink-muted); }
.lead { font-size: var(--step-1); color: var(--ink-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* Skip link */
.skip-link {
	position: absolute; left: var(--sp-4); top: var(--sp-2);
	transform: translateY(-200%);
	background: var(--accent); color: var(--ground);
	padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
	font-size: .9rem; font-weight: 600; text-decoration: none; z-index: 100;
}
.skip-link:focus { transform: translateY(0); color: var(--ground); }
/* ==========================================================================
   Components
   ========================================================================== */

/* --------------------------------------------------------------- buttons */
.btn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-family: var(--sans); font-size: .95rem; font-weight: 600;
	line-height: 1.2; text-decoration: none; white-space: nowrap;
	padding: 11px 18px; border-radius: var(--radius);
	background: var(--accent); color: var(--ground);
	border: 1px solid var(--accent);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btn:visited:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ground); }
.btn:visited { color: var(--ground); }
:root[data-theme="dark"] .btn:not(.btn-ghost),
:root[data-theme="dark"] .btn:not(.btn-ghost):visited { color: #05090b; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .btn:not(.btn-ghost),
	:root:not([data-theme="light"]) .btn:not(.btn-ghost):visited { color: #05090b; }
}
.btn.btn-ghost, .btn.btn-ghost:visited {
	background: transparent; color: var(--ink); border-color: var(--rule-strong);
}
.btn.btn-ghost:hover, .btn.btn-ghost:visited:hover {
	background: transparent; color: var(--ink); border-color: var(--ink);
}

/* --------------------------------------------------------------- header */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ground);
	border-bottom: 1px solid var(--rule);
}
.site-header .shell {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sp-4); padding-block: var(--sp-3);
}
.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); }
.brand:visited { color: var(--ink); }
/* Needs to out-rank `img[width][height] { height: auto }` in base.css, which is
   (0,2,1) - a bare .brand-logo loses to it and the mark renders at its intrinsic
   662x158. Sized in rem so it grows with the type on large displays. */
.brand img.brand-logo { height: 1.7rem; width: auto; display: block; }
.brand-mark { font-family: var(--mono); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.brand-mark i { font-style: normal; color: var(--cyan); }
.brand-sub {
	font-family: var(--mono); font-size: .65rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 420px) { .brand-sub { display: none; } }

.nav-group { display: flex; align-items: center; gap: var(--sp-5); }
.nav { display: none; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
@media (min-width: 960px) { .nav { display: flex; } }
.nav a {
	font-size: .92rem; font-weight: 500; text-decoration: none;
	color: var(--ink-muted); padding-block: 4px;
	border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a:visited:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.nav a:visited { color: var(--ink-muted); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cyan); }

/* mobile menu - CSS-only via <details> */
.menu { display: block; position: relative; }
@media (min-width: 960px) { .menu { display: none; } }
.menu > summary {
	list-style: none; cursor: pointer;
	font-family: var(--mono); font-size: .78rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
	padding: 8px 12px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--ink); }
.menu-panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
	min-width: 220px; background: var(--ground);
	border: 1px solid var(--rule); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: var(--sp-2);
	display: grid; gap: 2px;
}
.menu-panel a {
	text-decoration: none; color: var(--ink); font-size: .95rem; font-weight: 500;
	padding: 10px 12px; border-radius: 3px;
}
.menu-panel a:hover { background: var(--surface); }

/* --------------------------------------------------------------- hero */
.hero { border-bottom: 1px solid var(--rule); }
.hero .shell { padding-block: var(--sp-8) var(--sp-7); display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1000px) {
	.hero .shell {
		grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
		gap: var(--sp-8); padding-block: var(--sp-9) var(--sp-8);
	}
}
.hero h1 { max-width: 16ch; margin-block: var(--sp-5) var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-dek { font-size: var(--step-1); color: var(--ink-muted); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.byline {
	margin-top: var(--sp-6); padding-left: var(--sp-4);
	border-left: 2px solid var(--cyan); max-width: 46ch;
}
.byline p { font-size: .87rem; line-height: 1.5; color: var(--ink-muted); }
.byline b { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; }

/* --------------------------------------------------- inverted info panel */
.panel {
	background: var(--panel); color: var(--panel-ink);
	border: 1px solid var(--panel-rule); border-radius: var(--radius-lg);
	padding: var(--sp-5); box-shadow: var(--shadow);
}
.panel-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sp-3); flex-wrap: wrap;
	border-bottom: 1px solid var(--panel-rule);
	padding-bottom: var(--sp-3); margin-bottom: var(--sp-1);
}
.panel-head h2 {
	font-family: var(--mono); font-size: .72rem; font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase; color: var(--cyan);
}
.panel-head span { font-family: var(--mono); font-size: .66rem; color: var(--panel-muted); letter-spacing: .06em; }
.panel-row {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px var(--sp-3);
	align-items: center; padding-block: var(--sp-3);
	border-bottom: 1px solid var(--panel-rule);
}
.panel-row:last-of-type { border-bottom: 0; }
.panel-row .name { font-size: .9rem; font-weight: 500; line-height: 1.35; }
.panel-row .when {
	grid-column: 1; font-family: var(--mono); font-size: .72rem;
	color: var(--panel-muted); font-variant-numeric: tabular-nums;
}
.panel-row .status {
	grid-row: 1 / span 2; grid-column: 2;
	font-family: var(--mono); font-size: .62rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 3px; white-space: nowrap;
}
.status-live { background: rgb(111 211 165 / .14); color: #6fd3a5; border: 1px solid rgb(111 211 165 / .30); }
.status-def  { background: rgb(229 181 95 / .12); color: #e5b55f; border: 1px solid rgb(229 181 95 / .28); }
.panel-foot {
	border-top: 1px solid var(--panel-rule); margin-top: var(--sp-2); padding-top: var(--sp-3);
	font-size: .82rem; color: var(--panel-muted); line-height: 1.55;
}
.panel-foot strong { color: var(--panel-ink); font-weight: 600; }
.panel-foot a, .panel-foot a:visited { color: var(--cyan); }

/* --------------------------------------------------------------- proof */
.proof { border-bottom: 1px solid var(--rule); background: var(--surface); }
.proof .shell {
	padding-block: var(--sp-4);
	display: grid; gap: var(--sp-3) var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.proof div { font-family: var(--mono); font-size: .75rem; color: var(--ink-muted); line-height: 1.5; }
.proof b {
	display: block; font-family: var(--sans); font-size: .95rem;
	font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}

/* --------------------------------------------------------------- bands */
.band { padding-block: var(--sp-8); }
.band-tight { padding-block: var(--sp-2) var(--sp-8); }
.band-surface { background: var(--surface); border-block: 1px solid var(--rule); }
.band-head { max-width: 58ch; margin-bottom: var(--sp-6); }
.band-head h2 { margin-block: var(--sp-3) var(--sp-3); }
.band-head p { color: var(--ink-muted); font-size: var(--step-0); }

/* --------------------------------------------------------------- offers */
.offers {
	display: grid; gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 840px) { .offers { grid-template-columns: repeat(3, 1fr); } }
/* Four cards never sit in three columns. */
.offers-4 { grid-template-columns: 1fr; }
@media (min-width: 760px)  { .offers-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .offers-4 { grid-template-columns: repeat(4, 1fr); } }
.offer {
	background: var(--ground); padding: var(--sp-5);
	display: flex; flex-direction: column; gap: var(--sp-3);
}
.offer .n { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-muted); flex: 0 0 auto; }
.offer h3, .offer .offer-title { font-family: var(--sans); font-size: var(--step-1); letter-spacing: -.008em; line-height: 1.3; }
.offer > p:not(.n) { font-size: .95rem; color: var(--ink-muted); flex: 1; }
.offer .more {
	font-family: var(--mono); font-size: .76rem; font-weight: 500;
	letter-spacing: .04em; text-decoration: none;
}
.offer .more:hover { text-decoration: underline; }

/* --------------------------------------------------------- post listing */
.postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.postlist-item { border-bottom: 1px solid var(--rule); }
.postlist-link {
	display: grid; gap: var(--sp-2) var(--sp-6); grid-template-columns: 1fr;
	padding-block: var(--sp-5); text-decoration: none; color: inherit;
}
@media (min-width: 800px) { .postlist-link { grid-template-columns: 180px minmax(0, 1fr); align-items: start; } }
.postlist-link:hover h2 { color: var(--accent); }
.postlist-link:visited { color: inherit; }
.postlist-meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-muted); line-height: 1.7; }
.postlist-link h2 { font-family: var(--sans); font-size: var(--step-1); letter-spacing: -.008em; line-height: 1.3; margin-bottom: var(--sp-2); transition: color .15s ease; }
.postlist-link p { font-size: .95rem; color: var(--ink-muted); max-width: 62ch; }
.postlist-item-active .postlist-link h2 { color: var(--accent); }

.pillar-chip {
	display: inline-block; font-family: var(--mono); font-size: .62rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
	border: 1px solid var(--rule-strong); border-radius: 999px;
	padding: 3px 9px; margin-bottom: var(--sp-2); text-decoration: none;
}
a.pillar-chip:hover { border-color: var(--accent); }

.more-link {
	display: inline-block; margin-top: var(--sp-5);
	font-family: var(--mono); font-size: .8rem; font-weight: 500;
	letter-spacing: .04em; text-decoration: none;
}
.more-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- tags */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.post-tag {
	font-family: var(--mono); font-size: .72rem; color: var(--ink-muted);
	border: 1px solid var(--rule); border-radius: 999px;
	padding: 3px 10px; text-decoration: none;
}
.post-tag:hover, .post-tag:visited:hover { color: var(--ink); border-color: var(--rule-strong); }
.post-tag:visited { color: var(--ink-muted); }

/* --------------------------------------------------------------- article */
.article-header { padding-block: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--rule); }
.article-header h1 { font-size: var(--step-4); }
.article-dek { font-size: var(--step-1); color: var(--ink-muted); margin-top: var(--sp-4); max-width: var(--measure); }
.article-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
	font-family: var(--mono); font-size: .76rem; color: var(--ink-muted);
	margin-top: var(--sp-5);
}
.article-meta .sep { color: var(--rule-strong); }

.prose-body { padding-block: var(--sp-6); }
.prose-body > :first-child { margin-top: 0; }
.prose-body > * { max-width: var(--measure); }
.prose-body > h2 { margin-block: var(--sp-8) var(--sp-4); font-size: var(--step-2); }
.prose-body > h3 { margin-block: var(--sp-6) var(--sp-3); }
.prose-body > h4 { margin-block: var(--sp-5) var(--sp-2); }
.prose-body > p { margin-bottom: var(--sp-4); }
.prose-body > ul, .prose-body > ol { margin-block: 0 var(--sp-4); padding-left: 1.35em; }
.prose-body li { margin-bottom: var(--sp-2); }
.prose-body > blockquote {
	margin: var(--sp-5) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 3px solid var(--cyan);
	font-family: var(--serif); font-size: var(--step-1); color: var(--ink-muted);
}
.prose-body img { border-radius: var(--radius); border: 1px solid var(--rule); }
.prose-body > figure, .prose-body > p > img, .prose-body > img { max-width: 100%; }
.prose-body :is(h2, h3, h4):target { scroll-margin-top: 90px; }

/* Wide things escape the measure, each in its own scroll container */
.prose-body > .table-wrap, .prose-body > pre, .prose-body > .collapsible-container {
	max-width: min(100%, 860px);
}
.table-wrap {
	overflow-x: auto;
	max-width: 100%;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	margin-block: var(--sp-5);
}
.table-wrap > table { margin: 0; }
.prose-body > .table-wrap { max-width: min(100%, 860px); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
	font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-muted); background: var(--surface);
	white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- code */
pre[class*="language-"], pre:not([class*="language-"]) {
	margin-block: var(--sp-5); padding: var(--sp-4);
	background: var(--panel); color: var(--panel-ink);
	border: 1px solid var(--panel-rule); border-radius: var(--radius);
	overflow-x: auto; font-size: .84rem; line-height: 1.6; tab-size: 2;
}
.code-block { position: relative; margin-block: var(--sp-5); }
.code-block > pre { margin-block: 0; }
.copy-btn {
	position: absolute; top: 8px; right: 8px;
	font-family: var(--mono); font-size: .66rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--panel-muted); background: var(--panel-2);
	border: 1px solid var(--panel-rule); border-radius: 3px;
	padding: 5px 9px; cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease;
	min-height: 32px;
}
@media (hover: none) { .copy-btn { min-height: 44px; min-width: 64px; } }
.code-block:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.copy-btn[data-copied] { color: var(--ok); border-color: var(--ok); opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }

/* --------------------------------------------------------------- callouts */
.callout {
	background: var(--surface); border: 1px solid var(--rule);
	border-left: 3px solid var(--cyan); border-radius: 0 var(--radius) var(--radius) 0;
	padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5);
}
.callout > .k {
	font-family: var(--mono); font-size: .7rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
	margin-bottom: var(--sp-2);
}
.callout > :last-child { margin-bottom: 0; }

.notice-dated {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
	border-radius: var(--radius); padding: var(--sp-4);
	margin-block: var(--sp-5); font-size: .92rem; max-width: var(--measure);
}
.notice-dated .k {
	font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--warn); white-space: nowrap; padding-top: 2px;
}
.notice-dated p { color: var(--ink); }

/* --------------------------------------------------------- series nav */
.series-nav {
	border: 1px solid var(--rule); border-radius: var(--radius);
	padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-6);
	background: var(--surface); max-width: var(--measure);
}
.series-nav .k {
	font-family: var(--mono); font-size: .68rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
	margin-bottom: var(--sp-3);
}
.series-nav ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); }
.series-nav li { font-size: .94rem; }
.series-nav li[aria-current="page"] { color: var(--ink); font-weight: 600; }
.series-nav li[aria-current="page"]::marker { color: var(--accent); }

/* --------------------------------------------------------- author block */
.author-block {
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	padding-block: var(--sp-6); margin-top: var(--sp-7);
}
.author-block .k {
	font-family: var(--mono); font-size: .7rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
	margin-bottom: var(--sp-3);
}
.author-block h2 { font-family: var(--sans); font-size: var(--step-1); margin-bottom: var(--sp-2); }
.author-block p { color: var(--ink-muted); font-size: .95rem; max-width: 58ch; margin-bottom: var(--sp-4); }

/* ----------------------------------------------------------- prev/next */
.links-nextprev {
	display: grid; gap: var(--sp-4); list-style: none; margin: var(--sp-6) 0 0; padding: 0;
}
@media (min-width: 720px) { .links-nextprev { grid-template-columns: 1fr 1fr; } }
.links-nextprev li {
	border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-4);
}
.links-nextprev .k {
	font-family: var(--mono); font-size: .68rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
	display: block; margin-bottom: var(--sp-2);
}
.links-nextprev a { font-weight: 600; text-decoration: none; }
.links-nextprev a:hover { text-decoration: underline; }
.links-nextprev-next { text-align: right; }

/* --------------------------------------------------------------- CTA */
.cta { background: var(--surface); border-top: 1px solid var(--rule); }
.cta .shell { padding-block: var(--sp-8); display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 880px) { .cta .shell { grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-8); } }
.cta h2 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.cta p { color: var(--ink-muted); max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--panel); color: var(--panel-muted); margin-top: auto; }
.site-footer .shell { padding-block: var(--sp-7) var(--sp-5); display: grid; gap: var(--sp-6); }
@media (min-width: 780px) { .site-footer .shell { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-7); } }
.site-footer h2 {
	font-family: var(--mono); font-size: .66rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
	margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer a, .site-footer a:visited { color: var(--panel-muted); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--panel-ink); text-decoration: underline; }
.site-footer .about { font-size: .92rem; line-height: 1.6; max-width: 42ch; }
.site-footer .about b { color: var(--panel-ink); }
.colophon { border-top: 1px solid var(--panel-rule); }
.colophon .shell {
	display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
	padding-block: var(--sp-4) var(--sp-5);
	font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
}

/* ------------------------------------------------- collapsible (kept) */
.collapsible-container { border: 1px solid var(--rule); border-radius: var(--radius); margin-block: var(--sp-5); overflow: hidden; }
.collapsible-toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	background: var(--surface); border: 0; border-bottom: 1px solid var(--rule);
	padding: var(--sp-3) var(--sp-4); cursor: pointer; color: var(--ink);
	font-family: var(--mono); font-size: .8rem; font-weight: 600; text-align: left;
}
.collapsible-toggle:hover { background: var(--surface-2); }
.collapsible-icon { color: var(--accent); font-size: .7rem; }
.collapsible-content { padding: 0 var(--sp-4); }
.collapsible-content.collapsed { display: none; }
.collapsible-preview { position: relative; padding: 0 var(--sp-4); }
.collapsible-preview.hidden { display: none; }
.collapsible-preview-overlay {
	position: absolute; inset: auto 0 0 0; text-align: center;
	font-family: var(--mono); color: var(--ink-muted);
	background: linear-gradient(transparent, var(--ground) 70%); padding-top: var(--sp-5);
}

/* ------------------------------------------------- article + contents rail */
/* The article column is sized to the measure itself, not to a fraction of the
   shell. A 1fr column on a wide screen is far wider than the 68ch of text
   inside it, which leaves a gap between the prose and its own right edge - and
   any full-width rule then runs off past the text and reads as misaligned.
   Everything the reader reads (header, prose, prev/next) sits in this one
   column; the rail sits beside it; the pair is centred. */
.shell-article { max-width: 100%; }

.article-grid { display: block; max-width: var(--measure); margin-inline: auto; }
.article-main { min-width: 0; }

/* Below the breakpoint the contents list is not shown at all: on a narrow
   screen it is a wall of links between the reader and the article. */
.article-rail { display: none; }

@media (min-width: 1280px) {
	.article-grid {
		display: grid;
		max-width: none;
		grid-template-columns: minmax(0, var(--measure)) 15rem;
		gap: var(--sp-7);
		align-items: start;
		justify-content: center;
	}
	/* Margin rather than padding: the sticky offset is measured from the
	   element's outer edge, so padding here would shift the content down while
	   it is stuck. This lines the rail's heading up with the pillar chip. */
	.article-rail { display: block; position: sticky; top: 92px; margin-top: var(--sp-8); }
}
@media (min-width: 1900px) {
	.article-grid { grid-template-columns: minmax(0, var(--measure)) 17rem; gap: var(--sp-8); }
}

.toc-k {
	font-family: var(--mono); font-size: .68rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
	margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--rule);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc li { margin: 0; }
.toc a {
	display: block; text-decoration: none; color: var(--ink-muted);
	font-size: .84rem; line-height: 1.4; padding: 5px 0 5px 12px;
	border-left: 2px solid var(--rule);
}
.toc a:hover { color: var(--ink); border-left-color: var(--cyan); }
.toc a:visited { color: var(--ink-muted); }
.toc .toc-l3 a { padding-left: 24px; font-size: .8rem; }
.toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }

/* --------------------------------------------- heading anchor links */
/* @zachleat/heading-anchors injects a "#" placeholder after every heading and
   leaves the styling to us. Unstyled it prints a permanent hash beside each
   title, which on a wide screen reads as a typo. Show it only when the heading
   is hovered or the link is focused. */
heading-anchors .ha-placeholder {
	color: var(--rule-strong);
	font-family: var(--mono);
	font-weight: 400;
	font-size: .7em;
	margin-left: .4em;
	opacity: 0;
	transition: opacity .12s ease, color .12s ease;
	user-select: none;
}
heading-anchors :is(h1, h2, h3, h4, h5, h6):hover .ha-placeholder { opacity: 1; }
heading-anchors a:focus-visible .ha-placeholder { opacity: 1; color: var(--accent); }
heading-anchors a:hover .ha-placeholder { color: var(--accent); }
@media (hover: none) { heading-anchors .ha-placeholder { display: none; } }