/**
 * Design tokens.
 *
 * --accent, --accent-ink, --accent-deep, --accent-s1, --accent-s2 and --signal
 * are written into the document head by speed_accent_css(), driven by the
 * Site settings accent option. The values here are the coral defaults, so the
 * site still renders correctly if that inline style is ever missing.
 */

:root {
	/* ---------------------------------------------------------------
	 * Greens. The whole ramp is the brand hue, 154deg at full saturation,
	 * so nothing on the page drifts off the brand colour.
	 * ------------------------------------------------------------- */
	--green-brand: #004225;   /* the brand green, and the page ground */
	--green-950:   #002E1A;   /* deepest, recessed panels */
	--green-900:   #00341D;   /* panel */
	--green-850:   #003B21;
	--green-800:   #00512D;   /* raised surface */
	--green-700:   #00753F;   /* rules and borders */
	--green-600:   #00944F;

	--bone:      #F0EBDF;   /* paper ground */
	--bone-2:    #E7E0D0;
	--bone-3:    #DDD5C2;
	--bone-line: #D9D1BE;

	/* Type colours, tuned against the brand green rather than inherited */
	--ink-dk:   #F0EBDF;   /*  9.78 on brand, AAA */
	--body-dk:  #C2C9BB;   /*  6.85 on brand, AA  */
	--mute-dk:  #A8AFA3;   /*  5.16 on brand, AA  */
	--ink-lt:   #004225;
	--body-lt:  #223B2E;
	--mute-lt:  #6B7264;

	/* Accent, overwritten inline from Site settings */
	--accent:      #EF806F;   /* fills, buttons, rules, display type */
	--accent-ink:  #F29A8C;   /* the same accent, lifted for SMALL text on green */
	--accent-deep: #A93E2D;   /* the accent on the light ground */
	--accent-s1:   #E77465;
	--accent-s2:   #DE6A5B;
	--signal:      #E0B541;   /* live and recording */

	/* ---------------------------------------------------------------
	 * Type. Archivo for headlines and display-scale figures, Literata for
	 * everything else.
	 * ------------------------------------------------------------- */
	--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--serif:   "Literata", Georgia, "Times New Roman", serif;

	/* Type scale. Huge, per the brief. */
	/* On a phone every one of these clamps to its floor, so the floors ARE the
	   mobile type scale and they were never set as one. Measured across the
	   four pages, desktop ran 100 / 88 / 81 / 76 / 64 / 50 / 48 / 40 / 25 and
	   mobile ran 40 / 38 / 36 / 32 / 30 / 26 / 22 / 19: the largest headings
	   had been squeezed to about a third of their desktop size while smaller
	   ones kept nearly two thirds, so the ladder flattened and two pairs
	   swapped places. These floors restore the desktop ORDER and open the gaps
	   back up, taking the top end as large as fits. Above ~700px the vw terms
	   take over and desktop is untouched. */
	--t-hero:      clamp(42px, 5.6vw, 88px);
	--t-display:   clamp(45px, 7.5vw, 100px);
	--t-section:   clamp(36px, 5.2vw, 64px);
	--t-statement: clamp(34px, 5vw, 64px);
	--t-lead:      clamp(20px, 2.3vw, 25px);
	--t-body:      18px;
	/* One size for standalone section copy, so it does not drift per band. */
	--t-copy:      clamp(17px, 1.7vw, 21px);
	--t-small:     16px;
	--t-label:     14px;

	/* Space, 4px scale */
	--s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
	--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
	--s9: 96px; --s10: 128px;

	--band-pad: clamp(88px, 12vw, 176px);
	--straddle-h: clamp(280px, 34vw, 520px);
	--wrap:     1500px;
	--measure:  60ch;

	/* Motion */
	--ease-out:   cubic-bezier(.16, .84, .44, 1);
	--ease-trace: cubic-bezier(.62, .02, .24, 1);
	--d-fast:    160ms;
	--d-mid:     260ms;
	--d-reveal:  620ms;
	--d-rule:    700ms;
	--d-trace:   2600ms;

	--z-header:  70;
	--z-reticle: 110;
	--z-ident:   90;

	/* Shared by the ident and the hero mask, so the handover is exact. */
	/* Width-only, which is why the ident looked wrong on a phone: 58vw of a
	   390px screen is 226px, and against 844px of height that is 17% of the
	   screen where the desktop mark is 26%. Proportionally wide but visually
	   lost, "a small logo animating in the background". Widening it on small
	   screens brings the height fraction back to roughly the desktop one. The
	   hero aperture starts from this same value, so the two stay in step. */
	--mask-start: min(58vw, 360px);
}

/* 78vw of a 390px screen is 304px wide and about 197px tall: 23% of the
   screen's height, against the desktop mark's 26%. Close enough that the two
   read as the same gesture at either size, and it still leaves a clear margin
   at the sides. */
@media (max-width: 640px) {
	:root { --mask-start: 78vw; }
}

/* The narrowest phones still in use, around 360px. The hero headlines are set
   in explicit lines, and the wipe groups by line, so a line that re-wraps
   sweeps two at once and the reveal loses its cascade. Measured at 360px, the
   largest sizes where every line still holds are 38 and 41; above this width
   the floors in :root apply. Two values, not a whole second scale. */
@media (max-width: 380px) {
	:root {
		--t-hero:    clamp(38px, 5.6vw, 88px);
		--t-display: clamp(41px, 7.5vw, 100px);
	}
}

/**
 * Bands own their own colour context. Every component reads --fg, --bg,
 * --rule and so on, never a ground colour directly, which is what lets the
 * same component sit on either ground without being restyled.
 */

.band--dark {
	--bg:        var(--green-brand);
	--fg:        var(--ink-dk);
	--body:      var(--body-dk);
	--mute:      var(--mute-dk);
	--rule:      var(--green-700);
	--rule-soft: #005C33;
	--surface:   var(--green-900);
	--surface-2: var(--green-950);
	--local-accent:     var(--accent);
	--local-accent-ink: var(--accent-ink);
	--mark-tint:        #00351D;
}

.band--deep {
	--bg:        var(--green-950);
	--fg:        var(--ink-dk);
	--body:      var(--body-dk);
	--mute:      var(--mute-dk);
	--rule:      #005C33;
	--rule-soft: #00451F;
	--surface:   var(--green-900);
	--surface-2: var(--green-850);
	--local-accent:     var(--accent);
	--local-accent-ink: var(--accent-ink);
	--mark-tint:        #002313;
}

.band--paper {
	--bg:        var(--bone);
	--fg:        var(--ink-lt);
	--body:      var(--body-lt);
	--mute:      var(--mute-lt);
	--rule:      var(--bone-line);
	--rule-soft: #E4DDCC;
	--surface:   var(--bone-2);
	--surface-2: var(--bone-3);
	/* The bright accent fails contrast on bone, so the light ground uses the
	   deep variant for text and keeps the bright accent for rules and marks. */
	--local-accent:     var(--accent-deep);
	--local-accent-ink: var(--accent-deep);
	--mark-tint:        #E4DCC9;
}

/* The page heroes, one step up the green ramp from the brand green. Lighter
   than the body of the site without leaving the palette, so the top of each
   page opens rather than starting at its darkest. The hero on the home page
   is a video and keeps its own ground. */
.page-hero {
	position: relative;
	--bg:        var(--green-800);
	--rule:      var(--green-700);
	--rule-soft: var(--green-700);
	--surface:   var(--green-brand);
	--mark-tint: var(--green-brand);
}

/* A darker beige. The paper ground one step down the existing bone ramp, so a
   section can lift off the dark greens without leaving the palette, and still
   sit apart from the plain paper bands either side of it. Text stays the
   paper set: green ink on beige. */
.band--sand {
	--bg:        var(--bone-2);
	--fg:        var(--ink-lt);
	--body:      var(--body-lt);
	--mute:      var(--mute-lt);
	--rule:      var(--bone-line);
	--rule-soft: #D2C9B4;
	--surface:   var(--bone-3);
	--surface-2: var(--bone-3);
	--mark-tint: var(--bone-3);
	--local-accent:     var(--accent);
	--local-accent-ink: var(--accent-deep);
}

.band--accent {
	--bg:        var(--accent);
	--fg:        var(--green-950);
	--body:      var(--green-950);
	--mute:      rgba(0, 46, 26, .70);
	--rule:      rgba(0, 46, 26, .28);
	--rule-soft: rgba(0, 46, 26, .14);
	--surface:   var(--accent-s1);
	--surface-2: var(--accent-s2);
	--local-accent:     var(--green-950);
	--local-accent-ink: var(--green-950);
	/* The ambient mark sits a shade under the ground it is drawn on. */
	--mark-tint:        var(--accent-mark);
}

/**
 * Text selection. The block is the accent with deep green ink, which is the
 * pair .band--accent already uses, so a selection reads as a piece of the site
 * rather than a browser default.
 *
 * The beiges cannot use the bright accent: gold on bone is 1.6:1, so the block
 * would barely register as a block at all. They take a deeper step of the same
 * hue with bone ink, which clears AA at body size on all three beiges (6.1 on
 * bone, 5.6 on bone-2, 5.0 on bone-3). The accent band inverts the site pair
 * rather than introducing a third colour.
 *
 * Every other ground is a green and inherits the root pair: the block reads
 * 6.0:1 on the brand green, 7.7 on green-950 and 4.9 on the page-hero green.
 */
:root {
	--sel-bg:  var(--accent);
	--sel-ink: var(--green-950);
}

.band--paper,
.band--sand,
.band--credits {
	--sel-bg:  #6B5318;
	--sel-ink: var(--bone);
}

.band--accent {
	--sel-bg:  var(--green-950);
	--sel-ink: var(--accent);
}

::selection {
	background-color: var(--sel-bg);
	color: var(--sel-ink);
}