/*
 * tlt-site.css — TLT public-site design standard, v1.5.1 (Story 29.4; bullet row 29.1 rev;
 *   3-up + prose bullets and step numbers 29.5; scene sections + reveal, centred
 *   default, site header + footer nav, start-aligned prose: 29.5 CEO revisions;
 *   header-aware scroll padding + print: 29.5 Gate 2)
 *
 * The single stylesheet for every public page EXCEPT "/" (index.html),
 * which is frozen (Story 27.6) and must never link this file.
 * Served at /public/tlt-site.css. Spec: docs/design/public-site-standard.md
 * Governance: docs/design/governance.md
 *
 * Rules for editing this file:
 *   - Tokens, base, layout and components only. No page-specific rules, no IDs.
 *   - New colours go into the token block below, never into a component.
 *   - Any visual change follows the governance process (CEO sign-off).
 *
 * Fonts are self-hosted (CSP: font-src 'self'). Latin subset, woff2.
 * Licences sit beside each font in fonts/<family>/.
 */

/* ------------------------------------------------------------------ */
/* 1. Fonts                                                           */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Permanent Marker";
  src: url("fonts/permanent-marker/permanent-marker-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "Kaushan Script";
  src: url("fonts/kaushan-script/kaushan-script-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

/* Variable font: one file covers 500 / 600 / 700 (axis 200–700). */
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald/oswald-latin-wght.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* Variable font: one file covers 400 / 500 / 600 (axis 100–900). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* ------------------------------------------------------------------ */
/* 2. Tokens                                                          */
/* ------------------------------------------------------------------ */

:root {
  /* Colour — palette (the only hex values allowed on a public page) */
  --night: #0b0e06;
  --surface: #151a0e;
  --line: #2c351f;
  --text: #e8eadf;
  --muted: #aab09f;
  --lime: #c4d66b;
  --copper: #b4652d;
  --copper-light: #d38a4f;
  --copper-deep: #a25b28;   /* derived: copper fill behind small white text (AA 5.17:1) */
  --cream: #f4efe6;
  --ink: #16191a;
  --ink-muted: #4d5244;     /* derived: secondary text on cream (AA 7.04:1) */
  --white: #ffffff;
  --paper-line: #d9d0c1;   /* derived: hairlines on cream (decorative only) */

  /* Colour — surface roles. Sections re-point these; components read them. */
  --c-bg: var(--night);
  --c-panel: var(--surface);
  --c-text: var(--text);
  --c-muted: var(--muted);
  --c-line: var(--line);
  --c-accent: var(--copper-light);
  --c-focus: var(--lime);

  /* Font stacks */
  --font-display: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
  --font-script: "Kaushan Script", "Brush Script MT", "Segoe Script", cursive;
  --font-heading: "Oswald", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale (fluid between 390px and 1440px viewports) */
  --fs-display: clamp(2.75rem, 1.6rem + 4.7vw, 5.5rem);   /* 44 → 88 */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.1vw, 4rem);          /* 36 → 64 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.65vw, 2.75rem);     /* 28 → 44 */
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);       /* 20 → 24 */
  --fs-eyebrow: 0.8125rem;                                /* 13 */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); /* 17 → 20 */
  --fs-body: 1rem;                                        /* 16 */
  --fs-small: 0.875rem;                                   /* 14 */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --track-heading: 0.06em;
  --track-button: 0.08em;
  --track-eyebrow: 0.12em;

  /* Spacing — 4px base. Named by pixel value. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Layout */
  --max-width: 1160px;
  --gutter: var(--space-24);
  --section-pad: var(--space-64);
  --tear: 24px;               /* height of a torn edge */

  /* Radius */
  --radius-sm: 6px;           /* buttons, inputs */
  --radius-md: 10px;          /* cards, photos */
  --radius-lg: 14px;          /* panels */

  /* Borders / frames */
  --frame: 3px solid var(--copper);
  --divider: 2px solid var(--copper);

  /* Interaction */
  --target-min: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
  --dur-reveal: 500ms;        /* v1.3.0 scroll reveal */
  --reveal-step: 80ms;        /* stagger between items revealed together */

  /* Site header (v1.4.0) */
  --header-h: 64px;
}

@media (max-width: 760px) {
  :root {
    --gutter: var(--space-16);
    --section-pad: var(--space-48);
    --header-h: 56px;
  }
}

/* ------------------------------------------------------------------ */
/* 3. Base                                                            */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* v1.5.1 (Story 29.5 Gate 2): the sticky .site-header covers the top
     --header-h of the viewport, so every scroll-into-view (anchor jump,
     keyboard focus, a form focusing its first invalid field) stops below
     it. WCAG 2.2 SC 2.4.11 Focus Not Obscured. The extra --space-8 clears
     the 3px + 3px focus ring (and, measured in Chromium, a smooth focus
     scroll with padding at exactly the header edge can stop short under
     it); scenes take the 8px back with a negative scroll-margin, so an
     anchor jump still lands a scene flush under the header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-8));
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-accent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--c-text);
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--lime);
  color: var(--night);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* 4. Layout                                                          */
/* ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* v1.4.0 (CEO-directed): centred by default — "default template shoudl
   have every page centered in the view". Form fields opt back to start. */
.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--c-bg);
  color: var(--c-text);
  text-align: center;
}

/* Cream "paper" interlude */
.section--paper {
  --c-bg: var(--cream);
  --c-panel: var(--white);
  --c-text: var(--ink);
  --c-muted: var(--ink-muted);
  --c-line: var(--paper-line);
  --c-accent: var(--copper-deep);
  --c-focus: var(--ink);
}

/* Dark band — one step lifted from night */
.section--band {
  --c-bg: var(--surface);
  --c-panel: var(--night);
  border-block: 1px solid var(--line);
}

/* Copper band — short, punchy statements and CTAs */
.section--copper {
  --c-bg: var(--copper-deep);
  --c-panel: var(--night);
  --c-text: var(--white);
  --c-muted: var(--cream);
  --c-line: var(--copper-light);
  --c-accent: var(--white);
  --c-focus: var(--white);
}

/*
 * Scene section (v1.3.0, CEO-directed 2026-09-26): "make sure each area is
 * the focus and as you scroll the next section appears". A scene fills at
 * least one viewport and centres its content, so an anchor jump or a scroll
 * stop shows one section, not the tail of the next. Taller content just
 * grows the section; nothing is clipped. Torn edges overlap a neighbour by
 * --tear, so a scene grows by one tear for each overlap it takes part in
 * (its own top tear, its own bottom tear, a torn-top next section), and a
 * torn-top scene lands its anchor below its tear. No scroll-snap (see the
 * standard, §5).
 */
.section--scene {
  --scene-t: 0px;
  --scene-b: 0px;
  --scene-n: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* v1.4.0: one viewport less the sticky header, landing just under it.
     v1.5.1: the header offset is html's scroll-padding-top (header + 8px);
     the scene takes the 8px back so it lands flush under the header. */
  min-height: calc(100vh - var(--header-h) + var(--scene-t) + var(--scene-b) + var(--scene-n));
  min-height: calc(100svh - var(--header-h) + var(--scene-t) + var(--scene-b) + var(--scene-n));
  scroll-margin-top: calc(-1 * var(--space-8));
}

/* A torn-top scene lands one tear higher, so the tear sits under the header. */
.section--scene.torn-edge--top {
  --scene-t: var(--tear);
  scroll-margin-top: calc(-1 * (var(--space-8) + var(--tear)));
}

.section--scene.torn-edge--bottom {
  --scene-b: var(--tear);
}

.section--scene:has(+ .torn-edge--top) {
  --scene-n: var(--tear);
}

/*
 * Reveal on scroll (v1.3.0). Hidden ONLY under html.reveal-on, which
 * /public/tlt-site.js adds after showing what is already on screen — so no
 * JS or reduced motion means everything is simply visible.
 */
.reveal-on [data-reveal] {
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
}

.reveal-on [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--space-24));
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}

/* v1.5.1 (Story 29.5 Gate 2): print everything. Items not yet scrolled to
   are otherwise printed blank, the sticky header repeats nothing useful and
   viewport-tall scenes waste pages. */
@media print {
  .reveal-on [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
  }

  .site-header {
    position: static;
  }

  .site-nav__menu {
    display: none;
  }

  .section--scene {
    min-height: 0;
  }
}

.stack > * + * {
  margin-top: var(--space-16);
}

.grid-2,
.grid-3,
.grid-4,
.grid-5 {
  display: grid;
  gap: var(--gutter);
  align-items: start;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-4,
  .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 5. Typography                                                      */
/* ------------------------------------------------------------------ */

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--c-accent);
  margin-bottom: var(--space-12);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: 0.01em;
  color: var(--c-text);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1.1;
  color: var(--c-accent);
}

.h1,
.h2,
.h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
  color: var(--c-text);
  text-wrap: balance;
}

.h1 { font-size: var(--fs-h1); font-weight: 700; }
.h2 { font-size: var(--fs-h2); font-weight: 700; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0.04em; }

.lead {
  font-size: var(--fs-body-lg);
  color: var(--c-muted);
  max-width: 62ch;
  margin-inline: auto;   /* v1.4.0: centred by default */
}

.small {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ------------------------------------------------------------------ */
/* 6. Components                                                      */
/* ------------------------------------------------------------------ */

/* Button ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-12) var(--space-24);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* The companion's sled push (29.2) writes transform every frame; a
   transform transition would make the pushed button lag behind it. It is
   also lifted above later positioned siblings (framed photos) so it stays
   visible and clickable wherever the push takes it. */
.btn[data-figure-sled] {
  position: relative;
  z-index: 2;
  transition-property: background-color, border-color, color;
}

.btn--primary {
  background: var(--lime);
  color: var(--night);
}

.btn--primary:hover {
  background: var(--text);
  color: var(--night);
}

.btn--secondary {
  background: var(--copper-deep);
  color: var(--white);
}

.btn--secondary:hover {
  background: var(--copper-deep);
  border-color: var(--copper-light);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: var(--c-muted);
  color: var(--c-text);
}

.btn--ghost:hover {
  border-color: var(--c-text);
  color: var(--c-text);
}

/* Lime on cream has no edge (1.4:1) — outline it on paper. */
.section--paper .btn--primary {
  border-color: var(--ink);
}

/* Bullet row -------------------------------------------------------- */
/*
 * v1.1.0 (29.1 CEO revision): the ONE format for highlight and benefit
 * lists — "make all like the 45-60 min bullet and the team building,
 * increased energy etc. in the same format." Replaces the v1.0 stat row
 * and benefit card.
 *
 * Each .bullet is a subgrid spanning three row tracks (icon / title /
 * text), so every title and every subtext starts on the same line across
 * a row, whatever each title wraps to. The title track is at least two
 * lines tall (the fixed 2-line slot); it grows, never clips, at 200% zoom.
 * Copper dividers run between items. Phones: 2-up, the odd last item of
 * a 5-up row spans both columns.
 */

.bullet-row {
  --bullet-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--bullet-cols), minmax(0, 1fr));
  grid-auto-rows: auto;
  row-gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bullet-row--3 { --bullet-cols: 3; }   /* v1.2.0 */
.bullet-row--4 { --bullet-cols: 4; }
.bullet-row--5 { --bullet-cols: 5; }

.bullet {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: center;
  align-content: start;
  padding: var(--space-8) var(--space-16);
  text-align: center;
}

.bullet + .bullet {
  border-left: var(--divider);
}

.bullet__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-12);
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--c-accent);
  /* v1.2.0: an ordered row (ol.bullet-row) may put the step number here. */
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
}

.bullet__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bullet__title {
  align-self: start;
  min-height: calc(2em * var(--lh-heading));
  margin-bottom: var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-text);
}

.bullet__text {
  align-self: start;
  max-width: 24ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-muted);
}

@media (max-width: 760px) {
  .bullet-row,
  .bullet-row--4,
  .bullet-row--5 {
    --bullet-cols: 2;
  }

  .bullet {
    padding-inline: var(--space-8);
  }

  .bullet:nth-child(odd) {
    border-left: 0;
  }

  .bullet-row--5 .bullet:last-child,
  .bullet-row--3 .bullet:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* A 3-up row that runs to a second line starts each line without a divider. */
@media (min-width: 761px) {
  .bullet-row--3 .bullet:nth-child(3n + 1) {
    border-left: 0;
  }
}

/*
 * v1.2.0 (Story 29.5): prose bullets. Same icon ring, Oswald title and
 * copper dividers, for items whose text is a sentence or a paragraph
 * rather than a short phrase (feature explainers, numbered steps, the
 * parents' safety pillars). The text is sentence case at body size.
 * v1.4.0 centred the item (icon, number, title) like every bullet.
 * v1.5.0 (CEO 2026-09-26: "Yes you can left-align long sentences"): the
 * paragraph is a centred 36ch block whose lines start-align, so long prose
 * reads from a straight left edge under a centred heading. Phones: one
 * column, with the copper divider running across between items.
 */
.bullet-row--prose .bullet {
  padding: var(--space-8) var(--space-24);
}

.bullet-row--prose .bullet__text {
  max-width: 36ch;
  text-align: start;   /* v1.5.0: long sentences start-align */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-transform: none;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .bullet-row.bullet-row--prose {
    --bullet-cols: 1;
  }

  .bullet-row--prose .bullet {
    padding-inline: 0;
    border-left: 0;
  }

  .bullet-row--prose .bullet + .bullet {
    padding-top: var(--space-24);
    border-top: var(--divider);
  }

  /* One column: no row to align with, so no empty second title line. */
  .bullet-row--prose .bullet__title {
    min-height: 0;
  }
}

/* Framed photo + brush banner -------------------------------------- */
/*
 * Photos keep their natural aspect ratio: the <img> MUST carry width and
 * height attributes (the source pixel size); the browser derives
 * aspect-ratio from them and height:auto keeps it. Never crop with a fixed
 * height + object-fit: cover — that is the "too zoomed in" failure.
 */

.photo {
  position: relative;
  margin: 0;
  border: var(--frame);
  border-radius: var(--radius-md);
  background: var(--surface);
  max-width: 100%;
}

.photo img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-md) - 3px);
}

/* Brush label over the lower-left edge (mockup A treatment). */
.photo__banner {
  position: absolute;
  left: calc(-1 * var(--space-8));
  bottom: var(--space-16);
  max-width: calc(100% - var(--space-16));
  padding: var(--space-8) var(--space-24) var(--space-8) var(--space-16);
  background: var(--copper-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  transform: rotate(-2deg);
  clip-path: polygon(0 6%, 4% 0, 38% 5%, 71% 0, 100% 4%, 97% 50%, 100% 94%, 64% 100%, 30% 95%, 3% 100%, 0 60%);
}

/* Torn paper edge --------------------------------------------------- */
/*
 * Put on a .section to tear its top or bottom edge; the neighbouring
 * section shows through the tear. The edge is a repeat-x SVG mask.
 */

.torn-edge--top,
.torn-edge--bottom {
  mask-repeat: repeat-x, no-repeat;
  mask-size: 240px var(--tear), 100% calc(100% - var(--tear) + 1px);
}

.torn-edge--top {
  margin-top: calc(-1 * var(--tear));
  padding-top: calc(var(--section-pad) + var(--tear));
  z-index: 1;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V11L9 14L20 7L28 12L41 3L50 9L62 7L72 13L81 5L93 9L101 3L112 10L122 7L131 12L143 3L151 9L164 7L173 12L184 4L193 8L205 3L213 10L223 6L240 11V24z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-position: top left, bottom left;
}

.torn-edge--bottom {
  margin-bottom: calc(-1 * var(--tear));
  padding-bottom: calc(var(--section-pad) + var(--tear));
  z-index: 1;
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0V13L9 10L20 17L28 12L41 21L50 15L62 17L72 11L81 19L93 15L101 21L112 14L122 17L131 12L143 21L151 15L164 17L173 12L184 20L193 16L205 21L213 14L223 18L240 13V0z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-position: bottom left, top left;
}

.torn-edge--top.torn-edge--bottom {
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V11L9 14L20 7L28 12L41 3L50 9L62 7L72 13L81 5L93 9L101 3L112 10L122 7L131 12L143 3L151 9L164 7L173 12L184 4L193 8L205 3L213 10L223 6L240 11V24z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0V13L9 10L20 17L28 12L41 21L50 15L62 17L72 11L81 19L93 15L101 21L112 14L122 17L131 12L143 21L151 15L164 17L173 12L184 20L193 16L205 21L213 14L223 18L240 13V0z'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-size: 240px var(--tear), 240px var(--tear), 100% calc(100% - 2 * var(--tear) + 2px);
  mask-position: top left, bottom left, center;
}

/* Form field -------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  text-align: start;   /* forms read from the start edge inside a centred page */
}

.field__label {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--c-text);
}

.field__hint {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.field__error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--copper-light);
}

.section--paper .field__error {
  color: var(--copper-deep);
}

.input {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-12) var(--space-16);
  background: var(--c-panel);
  color: var(--c-text);
  border: 1px solid var(--c-muted);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);   /* ≥16px stops iOS zoom-on-focus */
  transition: border-color var(--dur) var(--ease);
}

.input::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

.input:hover {
  border-color: var(--c-text);
}

.input:focus-visible {
  border-color: var(--c-focus);
  outline-offset: 1px;
}

.input[aria-invalid="true"] {
  border-color: var(--copper-light);
}

textarea.input {
  min-height: 120px;
  resize: vertical;
}

/* Site header (v1.4.0) ---------------------------------------------- */
/*
 * CEO-directed 2026-09-26: "Make sure we can get back to the home page and
 * navigate around." Sticky, translucent night with blur; the logo links
 * home. Desktop shows the link list; phones (<=760px) show a <details> menu
 * that works without JS (tlt-site.js adds Esc / outside-click / link-click
 * close and aria-expanded). It sits above the stick-figure layer (z 60).
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  height: var(--header-h);
  background: color-mix(in srgb, var(--night) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--copper);
}

.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: 100%;
}

.site-header__home {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  border-radius: var(--radius-sm);
}

.site-header__logo {
  width: auto;
  height: calc(var(--header-h) - var(--space-16));
}

.site-nav__list,
.site-nav__panel {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-12);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}

.site-nav a:hover {
  color: var(--lime);
}

.site-nav a[aria-current="page"] {
  color: var(--copper-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.site-nav__menu {
  display: none;
}

.site-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--target-min);
  padding-inline: var(--space-12);
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.site-nav__toggle::-webkit-details-marker {
  display: none;
}

.site-nav__toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.site-nav__menu[open] .site-nav__toggle {
  border-color: var(--copper-light);
}

@media (max-width: 760px) {
  .site-nav__list {
    display: none;
  }

  .site-nav__menu {
    display: block;
  }

  .site-nav__panel {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: var(--space-8) var(--gutter) var(--space-16);
    background: var(--night);
    border-bottom: var(--divider);
  }

  .site-nav__panel a {
    font-size: var(--fs-body);
  }
}

/* Footer nav (v1.4.0): the same site links in every standard footer. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-8);
  margin: var(--space-24) 0 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-12);
  font-size: var(--fs-small);
  color: var(--copper-light);
}

.footer-nav a:hover {
  color: var(--text);
}

/* Site footer (v1.4.0) ---------------------------------------------- */
/*
 * CEO-directed 2026-09-26: "Just have the logo and copyright info and
 * links. it's already in the logo, make the logo bigger". Replaces the
 * v1 footer CTA (no script tagline, no actions). Compact, NOT a scene:
 * logo, then one centred row with the (c) line and the footer nav.
 * The logo source is 650px wide, so 240px (480 device px at 2x) never
 * upscales it.
 */
.site-footer {
  padding-block: var(--space-48);
  background: var(--night);
  border-top: var(--divider);
  text-align: center;
  color: var(--text);
}

.site-footer__logo {
  width: 240px;
  margin-inline: auto;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-24);
}

.site-footer__legal {
  font-size: var(--fs-small);
  color: var(--muted);
}

.site-footer__base .footer-nav {
  margin-top: 0;
}

@media (max-width: 760px) {
  .site-footer {
    padding-block: var(--space-32);
  }

  .site-footer__logo {
    width: 180px;
  }
}