/* Shared by every page. Each page links this first and keeps its own rules
   inline after it, so a page's rule wins any tie on specificity. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/inter-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;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(fonts/inter-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;
}

:root {
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

	/* Type scale. Site chrome only - the mock window keeps px to match the real app.
	   Five working steps: 14 fine print, 17 body, 18 feature copy, 20 feature
	   titles, then the two display sizes. The old scale bottomed out at 14px for
	   body text, which is a UI size, not a reading size. */
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1.0625rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.625rem;
	--text-3xl: clamp(1.75rem, 5vw, 2rem);
	/* The statement size, 32px to 42px. */
	--text-4xl: clamp(2rem, 6vw, 2.625rem);
	/* Caps at 3.5rem above ~470px; the floor keeps the headline inside a 320px screen. */
	--text-5xl: clamp(2.75rem, 12vw, 3.5rem);

	--tracking-tight: -0.032em;
	--tracking-snug: -0.021em;
	--tracking-normal: -0.011em;

	--color-bg: #ffffff;
	--color-bg-secondary: #f5f5f5;
	--color-surface: #ffffff;
	/* The footer's strip. A shade off the page rather than a shade under it. */
	--color-band: #fafafa;
	/* Three tones, not two: headings hold --color-text, running prose sits a
	   step off it, and secondary copy stays at --color-text-muted. Near-black
	   body copy over a white page reads heavier than this page wants. */
	--color-text: #1a1a1a;
	--color-text-body: #3d3d3d;
	--color-text-muted: #6b6b6b;
	--color-border: #e0e0e0;
	--color-border-strong: #c4c4c4;
	/* Chrome links read as text, not as accent. The accent survives in the
	   focus ring, the top glow, and the app mock, and nowhere else. */
	--color-link: var(--color-text);
	--color-accent: #a04f6e;
	--color-accent-bg: #f7eef2;
	/* The brand plum, the same literal as the app's --color-brand-default.
	   One value serves both themes, as it does in the app: this is a fill,
	   not type, so it does not have to be readable against two grounds. */
	--color-cta: #a04f6e;
	--color-cta-fg: #ffffff;
	/* Mid-tone now, so hover darkens against a light page — and lightens on
	   the dark ground below, where darkening would sink it into the page. */
	--color-cta-hover: color-mix(in srgb, var(--color-cta) 88%, black);
	--color-glow: color-mix(in srgb, var(--color-accent) 10%, transparent);
	--color-highlight: #ffeb3b;

	--shadow-sm: 0 1px 2px rgba(16, 12, 24, 0.04), 0 1px 3px rgba(16, 12, 24, 0.06);
	--shadow-md: 0 2px 6px -2px rgba(16, 12, 24, 0.06), 0 8px 20px -6px rgba(16, 12, 24, 0.1);
	--shadow-lg: 0 20px 60px -20px rgba(16, 12, 24, 0.25);
	/* Top highlight that stands in for a shadow in dark mode; no-op in light. */
	color-scheme: light;

	--space-sm: 1.25rem;
	--space-md: 2rem;
	--space-lg: 3rem;
	--space-xl: 5rem;
}

:root[data-theme="dark"] {
	--color-bg: #1a1a1c;
	--color-bg-secondary: #262629;
	--color-surface: #212124;
	/* Recessed in dark, so surfaces sitting on it still read as raised. */
	--color-band: #151517;
	--color-text: #e8e8e8;
	--color-text-body: #c4c4c4;
	--color-text-muted: #9a9a9a;
	--color-border: #33333a;
	--color-border-strong: #4a4a52;
	--color-link: var(--color-text);
	--color-accent: #cd8ca6;
	--color-accent-bg: rgba(205, 140, 166, 0.16);
	--color-cta: #a04f6e;
	--color-cta-fg: #ffffff;
	--color-cta-hover: color-mix(in srgb, var(--color-cta) 86%, white);
	--color-glow: color-mix(in srgb, var(--color-accent) 14%, transparent);
	/* Muted amber: full #ffeb3b behind light text is unreadable on a dark ground. */
	--color-highlight: #7a6400;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 10px 24px -8px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	background-color: var(--color-bg);
}

html,
body {
	margin: 0;
	padding: 0;
}

/* 18px is the page's only body size. There is no small print anywhere on
   it: the fine print sits at the same size as everything else and is
   separated by colour instead. */
body {
	font-family: var(--font-sans);
	background-color: var(--color-bg);
	color: var(--color-text-body);
	font-size: var(--text-base);
	line-height: 1.5;
	/* Holds the footer at the bottom when the content is shorter than the
	   viewport, instead of leaving it floating mid-page. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--color-link);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* One column, left aligned, from the headline to the footer. Nothing on the
   page is centred and nothing is full-bleed. */
/* width:100% matters now that body is a flex column: auto margins on the
   cross axis suppress the default stretch, which left main shrink-to-fit
   and re-centred on its own content instead of on the page. */
.page {
	width: 100%;
	max-width: 1032px;
	margin: 0 auto;
	padding-inline: 2rem;
}

/* Masthead: icon and wordmark side by side on the same left axis as every
   heading and paragraph below them. A centred stack would be the only
   centred thing on the page. */
/* Pinned rather than inherited: the landing page wraps this in a div and the
   subpages in a link back home, so leaving the wordmark on currentColor gave
   it body colour on one and link colour on the other. */
.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--color-text);
	text-decoration: none;
}

/* The brand on the left and the primary links on the right, centred on the
   icon. The nav is the footer's in miniature, so on the home page it stays
   out of the hero's way. */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-bottom: 3.5rem;
}

.site-nav {
	display: flex;
	gap: 1.5rem;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.site-nav a[aria-current='page'] {
	color: var(--color-text);
}

/* No border: the icon is a solid rounded square with its own silhouette,
   so a hairline around it just reads as an outline. */
.brand img {
	width: 40px;
	height: 40px;
	border-radius: 9px;
}

/* The SVG carries only a viewBox, no width/height attributes, and sits in a
   flex row. Safari cannot infer an intrinsic width from that and clips the
   mark; a flex item is shrinkable besides. aspect-ratio derives the width
   from the height without the inference, and flex-shrink holds it open. */
.wordmark {
	height: 19px;
	width: auto;
	aspect-ratio: 1945.6 / 746;
	flex-shrink: 0;
	fill: currentColor;
}

h1 {
	font-size: clamp(2.25rem, 5vw, 2.5rem);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.15;
	letter-spacing: var(--tracking-snug);
	margin: 0 0 1.25rem;
	max-width: 18ch;
}

/* Section headings terminate in a full stop, which is the page's voice:
   each one is a statement, not a label. */
h2 {
	font-size: clamp(1.75rem, 4vw, 2rem);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.2;
	letter-spacing: var(--tracking-snug);
	margin: 0 0 1rem;
}

code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	padding: 0.1em 0.3em;
	border-radius: 4px;
	background-color: var(--color-bg-secondary);
}

kbd {
	font-family: var(--font-mono);
	font-size: 0.82em;
	border: 1px solid var(--color-border);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: 0.1em 0.35em;
}

.doc ul {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
}

.doc li {
	margin-bottom: 0.35rem;
}

/* The dateline. Muted and small, the one place the page has fine print. */
.fine-print {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin-top: 3rem;
}

main.page {
	padding-block: 3.5rem 6rem;
	flex: 1 0 auto;
}

/* A step down from the base h2, which sits only 8px off the h1 and so
   announced a one-paragraph section as loudly as the page title. */
.doc h2 {
	font-size: var(--text-2xl);
	letter-spacing: var(--tracking-normal);
	margin-top: 3rem;
}

.doc p {
	margin: 0 0 1rem;
}

.doc a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
	text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

.doc a:hover {
	color: var(--color-text);
	text-decoration-color: currentColor;
}

@media (max-width: 640px) {
	main.page {
		padding-block: 2.5rem 4rem;
	}
}

.site-footer {
	background-color: var(--color-band);
	border-top: 1px solid var(--color-border);
	padding-block: 3rem;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* Two groups, not one chain: who this is, and what you can do. Identity
   sits on the page's left axis and the links are pushed right, which is
   where a footer's links are conventionally looked for. Below its own
   content width the two simply stack, identity first. */
.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

/* Separated on space rather than middots, leaving the punctuation to the
   line that is actually a sentence. The whole strip is muted, so hovering
   a link is what brings it up to full text colour. */
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.site-footer p {
	margin: 0;
}

/* The social and feedback links continue the identity sentence on a wide footer. On a
   narrow one it takes its own line instead, so no dot is left hanging
   at either end of a wrap. */
.site-footer .footer-extra {
	white-space: nowrap;
}

.site-footer .footer-extra::before {
	content: '\00b7\00a0';
}

@media (max-width: 640px) {
	.site-footer .footer-extra {
		display: block;
		margin-top: 0.35rem;
	}

	.site-footer .footer-extra::before {
		content: none;
	}
}

/* A hairline set well off the baseline, faint until hovered. Uses real
   text-decoration rather than a border, so it skips descenders instead of
   striking through the g in Changelog and the p in support@. */
.site-nav a,
.site-footer a,
.link-button {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
	text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

.site-nav a:hover,
.site-footer a:hover,
.link-button:hover {
	color: var(--color-text);
	text-decoration-color: currentColor;
}