/*
  The download site.

  Every value here comes from brand/05-tokens/tokens.json. Where a number looks
  arbitrary it is a token, and site/generate.py --check fails if one drifts.

  Two rules from docs/design-system.md carry over unchanged, and they are the
  reason this page is achromatic:

    - Colour means state. Signal is the microphone being open. A download button
      is an action, and an action is never signal — so the page is built from the
      opacity ladder on ink, and the only coloured thing on it is the mark in the
      one place it depicts recording.
    - Focus is an ink hairline, never a signal border.
*/

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/Archivo-Variable.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

@font-face {
	font-family: "Chivo Mono";
	src: url("assets/fonts/ChivoMono-Variable.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--ground: #08090a;
	--surface: #101214;
	--raised: #171a1c;
	--line: #22262a;
	--ink: #f5f6f4;
	--signal: #4fd6c8;

	--primary: 1;
	--secondary: 0.72;
	--tertiary: 0.48;
	--quaternary: 0.3;
	--field: 0.16;

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

	--r-small: 6px;
	--r-large: 12px;

	--hover: 220ms; /* motion.hoverRule */
	--press: 120ms; /* motion.press */
}

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-variation-settings: "wdth" 92, "wght" 400;
	-webkit-font-smoothing: antialiased;
}

.wrap {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 var(--s5) var(--s12);
}

/* ── the hero ────────────────────────────────────────────────────────────────
 *
 * Ported from docs/brand-guidelines.html rather than designed here, because §14
 * of that document already decided what this is: "a dot field with a radial
 * wave expanding through it, drawn on a canvas… it loads instantly, scales to
 * any viewport, never dates, costs nothing to host and cannot rot."
 *
 * It is also the mark's own rule at another size — a fixed field of cells with
 * energy moving through it — which is the thing the guidelines say everything
 * visual in Talkie is.
 */

.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--line);
	margin: 0 calc(var(--s5) * -1) var(--s8);
}

.hero canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* The field has to fade out under the type rather than be turned down, so the
 * words sit at full contrast over a ground that is still moving. */
.hero .veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		#08090a 3%,
		#08090ae8 34%,
		#08090a66 74%,
		#08090a10 100%
	);
}

.hero .in {
	position: relative;
	z-index: 2;
	padding: 150px var(--s5) var(--s6);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

@media (max-width: 640px) {
	.hero .in {
		padding: 100px var(--s4) var(--s5);
	}
}

/* The sentence under the title. Display at body size on a wider measure than
 * prose gets, which is the guidelines' own lede. */
.lede {
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 34rem;
	opacity: var(--secondary);
	margin: 0;
}

/* ── the ladder ──────────────────────────────────────────────────────────── */

.secondary {
	opacity: var(--secondary);
}
.tertiary {
	opacity: var(--tertiary);
}

/* ── type ────────────────────────────────────────────────────────────────── */

/* Display XL — "marketing hero only", says the type scale, and this is the one
 * marketing hero there is. It stays on one line: the wrap width is 46rem and
 * the vw term is what let it grow past its own measure on a wide window. */
h1 {
	font-size: clamp(2.75rem, 7.5vw, 4.875rem); /* 78px */
	line-height: 0.97;
	letter-spacing: -0.042em;
	font-variation-settings: "wdth" 112, "wght" 700;
	margin: 0;
	text-wrap: balance;
}

h2 {
	font-size: 1.625rem; /* 26px */
	line-height: 1.1;
	letter-spacing: -0.032em;
	font-variation-settings: "wdth" 105, "wght" 650;
	margin: var(--s8) 0 var(--s3);
}

h3 {
	font-size: 1.0625rem; /* 17px */
	line-height: 1.18;
	letter-spacing: -0.028em;
	font-variation-settings: "wdth" 100, "wght" 600;
	margin: var(--s6) 0 var(--s2);
}

p,
li {
	margin: 0 0 var(--s4);
	max-width: 38rem;
}

strong {
	font-variation-settings: "wdth" 92, "wght" 600;
}

a {
	color: inherit;
	text-decoration-color: rgba(245, 246, 244, var(--tertiary));
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--hover) linear;
}

a:hover {
	text-decoration-color: rgba(245, 246, 244, var(--primary));
}

code,
.label,
.data {
	font-family: "Chivo Mono", ui-monospace, monospace;
}

code {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-small);
	padding: 0.1em 0.4em;
}

.label {
	font-size: 0.65625rem; /* 10.5px */
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: var(--tertiary);
}

/* ── the mark ────────────────────────────────────────────────────────────── */

.mark {
	display: block;
	width: 40px;
	height: 40px;
}

/* The mark and the wordmark, as the guidelines pair them. */
.lockup {
	display: flex;
	align-items: center;
	gap: var(--s3);
	text-decoration: none;
}

.lockup .word {
	font-size: 1.625rem;
	letter-spacing: -0.032em;
	font-variation-settings: "wdth" 105, "wght" 650;
}

/* ── the download ────────────────────────────────────────────────────────────
 *
 * The button alone, centred, with room either side of it. Everything else is
 * below it and quieter.
 *
 * Two revisions got this wrong in opposite directions. Left-aligned with the
 * facts beside it, the button was one item in a row and read as a link. Centred
 * with everything else centred too, nothing had an anchor. What it wants is one
 * subject — the control — and then the small print, which is what this is.
 */
.download {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s5);
	margin: var(--s12) 0;
	text-align: center;
}

.get {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s3);
	margin: 0;
}

/* The facts, under the control and clearly subordinate to it. */
.download .label {
	margin: 0;
	max-width: 30rem;
	line-height: 1.8;
}

/* **The checksum is folded away.** It is for the few people who verify a
 * download, and on the page it was the largest run of text in the block — the
 * least-read thing shouting the loudest. Behind a disclosure it costs one click
 * for them and nothing for everybody else. */
.download details {
	margin: 0;
}

.download summary {
	cursor: pointer;
	list-style: none;
	font-family: "Chivo Mono", ui-monospace, monospace;
	font-size: 0.65625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: var(--quaternary);
	transition: opacity var(--hover) linear;
}

.download summary::-webkit-details-marker {
	display: none;
}

.download summary:hover,
.download details[open] summary {
	opacity: var(--tertiary);
}

.download summary:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 3px;
}

.download .data {
	margin: var(--s3) 0 0;
	max-width: 30rem;
	overflow-wrap: anywhere;
	line-height: 1.7;
	font-size: 0.75rem;
	opacity: var(--tertiary);
}

/* ── panels ──────────────────────────────────────────────────────────────── */

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-large);
	padding: var(--s5);
	margin: var(--s6) 0;
}

.panel > :last-child {
	margin-bottom: 0;
}

/* The beta band. Ink, not warning — nothing has failed and nobody has to act.
 * Warning in this system means a capture needs a human, and saying "early
 * software" in the colour reserved for that would be the page shouting. What
 * marks it out is the hairline at the primary rung, which is the one emphasis
 * the ladder allows without reaching for colour. */
.panel.beta {
	border-color: rgba(245, 246, 244, var(--quaternary));
}

.panel.beta h3 {
	margin-top: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--s8) 0;
}

blockquote {
	margin: var(--s5) 0;
	padding-left: var(--s4);
	border-left: 1px solid var(--line);
	opacity: var(--secondary);
}

ul {
	padding-left: var(--s5);
}

footer {
	margin-top: var(--s12);
	padding-top: var(--s5);
	border-top: 1px solid var(--line);
	font-size: 0.84375rem;
	opacity: var(--tertiary);
}

footer a {
	text-decoration-color: rgba(245, 246, 244, var(--quaternary));
}

/* The one place signal appears: it depicts the microphone being open. */
.recording-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--signal);
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}