/* Straightaway design tokens: colour, type scale, space, and the light / dark theme contract.
   Source: MOCKUP/css/tokens.css. A "field" (f-paper, f-tint, f-pale, f-forest) sets the colours of everything
   inside it, so a block only has to say which ground it sits on. Dark mode redefines the fields, not the blocks.
   Rust is for large text and non-text marks; --rust-text is the small-text rust. Fill-only tokens (colours that
   may back a shape but never carry text): --strand, --rust, --rust-tint, --hl in light mode. */
:root {
  --forest: #1E3A2B;
  --green: #2F6B47;
  --hl: #D7EBDC;
  --tint: #F2F7F3;
  --line: #C9D6CD;
  --ink: #1A1A1A;
  --gray: #6B6B6B;
  --white: #FFFFFF;
  --rust: #B5603E;
  --rust-text: #9A4F31;
  --rust-tint: #F5E6DE;
  --strand: #AEC1B4;
  --bar-off: #E5EBE6;
  --page-bg: #FFFFFF;
  --mark-bg: #D7EBDC;
  --mark-fg: inherit;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Type is sized from the container it sits in (cqi), never from the viewport. */
  --fs-display: clamp(2.5rem, 1.5rem + 4.2cqi, 4.75rem);
  --fs-page: clamp(2.25rem, 1.4rem + 3.2cqi, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9cqi, 3rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75cqi, 2rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35cqi, 1.3125rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2cqi, 1.125rem);
  --fs-letter: clamp(1.0625rem, 1rem + 0.25cqi, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-def: clamp(4.5rem, 1.5rem + 13cqi, 12.5rem);

  --gutter: clamp(20px, 5vw, 48px);
  --max: 1280px;
  --section: clamp(4.5rem, 3rem + 6vw, 10rem);
  --radius: 0.25rem;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Header: --header-h is the resting height, --header-h-stuck (template setting, written inline) the
     compact height once the page has scrolled. Every sticky offset and scroll-padding derives from them. */
  --header-h: 76px;
}

@media (max-width: 899.98px) {
  :root { --header-h: 64px; }
}

[data-bs-theme="dark"] {
  --line: #31483A;
  --ink: #E6EFE9;
  --gray: #B4C4B9;
  --rust: #E0916E;
  --rust-text: #F0B197;
  --rust-tint: #3A2A24;
  --strand: #4A6354;
  --bar-off: #2A3D31;
  --hl: #2E5740;
  --page-bg: #0F1A14;
  --mark-bg: #2E5740;
  --mark-fg: #FFFFFF;
}

.f-paper, .f-tint, .f-pale, .f-forest {
  background: var(--bg);
  color: var(--fg);
}

.f-paper  { --bg: #FFFFFF; --fg: var(--ink); --head: var(--forest); --link: var(--green); --link-hover: var(--forest); --muted: var(--gray); --panel: #FFFFFF; --panel-line: var(--line); --focus: var(--green); --accent: var(--green); --btn-bg: var(--green); --btn-fg: #FFFFFF; --btn-hover: var(--forest); --btn-hover-fg: #FFFFFF; }
.f-tint   { --bg: #F2F7F3; --fg: var(--ink); --head: var(--forest); --link: var(--green); --link-hover: var(--forest); --muted: #5E5E5E; --panel: #FFFFFF; --panel-line: var(--line); --focus: var(--green); --accent: var(--green); --btn-bg: var(--green); --btn-fg: #FFFFFF; --btn-hover: var(--forest); --btn-hover-fg: #FFFFFF; }
.f-pale   { --bg: #D7EBDC; --fg: #1A1A1A; --head: var(--forest); --link: #24553A; --link-hover: var(--forest); --muted: #3F4A43; --panel: #FFFFFF; --panel-line: #A9C4B2; --focus: #1E3A2B; --accent: var(--forest); --btn-bg: var(--green); --btn-fg: #FFFFFF; --btn-hover: var(--forest); --btn-hover-fg: #FFFFFF; }
.f-forest { --bg: #1E3A2B; --fg: #FFFFFF; --head: #FFFFFF; --link: #D7EBDC; --link-hover: #FFFFFF; --muted: #CFE0D4; --panel: #274735; --panel-line: #5E7C6A; --focus: #D7EBDC; --accent: #D7EBDC; --btn-bg: #FFFFFF; --btn-fg: #1E3A2B; --btn-hover: #D7EBDC; --btn-hover-fg: #1E3A2B; }

[data-bs-theme="dark"] .f-paper { --bg: #0F1A14; --fg: #E6EFE9; --head: #FFFFFF; --link: #9AD4AE; --link-hover: #FFFFFF; --muted: #B4C4B9; --panel: #16251C; --panel-line: #31483A; --focus: #9AD4AE; --accent: #9AD4AE; --btn-bg: #9AD4AE; --btn-fg: #0F1A14; --btn-hover: #D7EBDC; --btn-hover-fg: #0F1A14; }
[data-bs-theme="dark"] .f-tint  { --bg: #14221A; --fg: #E6EFE9; --head: #FFFFFF; --link: #9AD4AE; --link-hover: #FFFFFF; --muted: #B4C4B9; --panel: #1B2D22; --panel-line: #31483A; --focus: #9AD4AE; --accent: #9AD4AE; --btn-bg: #9AD4AE; --btn-fg: #0F1A14; --btn-hover: #D7EBDC; --btn-hover-fg: #0F1A14; }
[data-bs-theme="dark"] .f-pale  { --bg: #213A2C; --fg: #F1F7F3; --head: #FFFFFF; --link: #D7EBDC; --link-hover: #FFFFFF; --muted: #CFE0D4; --panel: #1A2F23; --panel-line: #46634F; --focus: #D7EBDC; --accent: #D7EBDC; --btn-bg: #9AD4AE; --btn-fg: #0F1A14; --btn-hover: #D7EBDC; --btn-hover-fg: #0F1A14; }