/* Globenet Green. The page is a dark room lit by LEDs; the light controls re-light it.
   Archivo, Inter Tight and JetBrains Mono are licensed under the SIL Open Font License 1.1. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Set by boot.js and client/light.ts. Defaults match DEFAULT_LIGHT (4000 K, 80%). */
  --light-rgb: 255 206 166;
  --light-level: 0.8;

  --green: #7ac143;
  --orange: #f47735;
  --green-glow: #a1d078;
  --orange-glow: #f9aa7c;

  --room: #0b0c0a;
  --surface: #121410;
  --raised: #191c16;
  --line: #2a2e25;
  --ink: color-mix(in srgb, #efeee7 88%, rgb(var(--light-rgb)));
  --muted: color-mix(in srgb, #a8aa9d 88%, rgb(var(--light-rgb)));
  --green-text: var(--green);
  --orange-text: var(--orange);
  --focus: #7ac143;
  --button-bg: var(--green);
  --button-ink: #0b0c0a;
  --unlit: #262a22;
  --field-line: #6b6f62;

  /* Light that falls on the walls: scales with brightness, takes the colour temperature. */
  --wash: rgb(var(--light-rgb) / calc(0.11 * var(--light-level)));
  --glow: rgb(var(--light-rgb) / calc(0.5 * var(--light-level)));

  --font: "Archivo", system-ui, sans-serif;
  --font-heading: "Inter Tight", "Archivo", system-ui, sans-serif;
  --body-size: 1.125rem;
  /* Body copy: a little softer than headings, AA in both room modes at every setting. */
  --body: color-mix(in srgb, var(--ink) 82%, var(--room));
  --font-led: "JetBrains Mono", ui-monospace, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  --step-3: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  --step-4: clamp(2.8rem, 1.2rem + 6vw, 6.4rem);
  --step-5: clamp(2.6rem, 0.4rem + 5.4vw, 6.2rem);

  --max: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --header-h: 84px;

  color-scheme: dark;
}

/* Room lights on: clean white paper. The colour temperature tints it by at most 5%, less as the
   lights dim, and it never darkens. Panels sit on it in light grey, raised parts in white.
   Text colours here pass WCAG AA at every setting (checked at 2700 K, 6500 K, 10% and 100%). */
:root[data-lights="on"] {
  --room: color-mix(in srgb, rgb(var(--light-rgb)) calc(5% * var(--light-level)), #fff);
  --surface: color-mix(in srgb, var(--room) 96%, #141511);
  --raised: #fff;
  --line: color-mix(in srgb, var(--room) 86%, #141511);
  --ink: #141511;
  --muted: #474a40;
  --green-text: #365a18;
  --orange-text: #963806;
  --focus: #365a18;
  --button-bg: #365a18;
  --button-ink: #fff;
  --unlit: color-mix(in srgb, var(--room) 85%, #141511);
  --field-line: #6f7266;
  /* The room is evenly lit, so the strips wash nothing (a faint gradient on white would show as rings). */
  --wash: transparent;
  --glow: transparent;
  --shadow: rgb(20 21 17 / 0.08);
  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--room);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--step-0);
  font-stretch: 100%;
  line-height: 1.6;
  color: var(--ink);
  background: var(--room);
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--step-3);
  text-shadow: 0 0 calc(28px * var(--light-level)) var(--glow);
}

h3 {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--green-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

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

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

::selection {
  background: var(--green);
  color: #0b0c0a;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* boot.js adds .js before first paint. Parts that only work with JavaScript stay out of the
   way without it, and appear without a layout shift with it. */
html:not(.js) [data-needs-js] {
  display: none !important;
}

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

/* Readout numerals, set in a monospace like an instrument display. */
.led {
  font-family: var(--font-led);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  color: var(--green-text);
  text-shadow: 0 0 calc(18px * var(--light-level)) rgb(122 193 67 / calc(0.55 * var(--light-level)));
}

:root[data-lights="on"] .led {
  text-shadow: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--room) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: background-color 0.3s ease;
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: block;
  margin-right: auto;
  text-decoration: none;
}

.brand-slot {
  width: clamp(120px, 16vw, 180px);
  aspect-ratio: 1014.399 / 344.97514;
  flex-shrink: 0;
  margin-right: auto;
}

.brand-scroll {
  width: 100%;
}

.brand-scroll.is-floating {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 51;
  margin: 0;
  transform-origin: top left;
}

.brand .logo {
  width: auto;
  height: 60px;
  overflow: visible;
}

:root:not([data-lights="on"]) .brand .logo .arc {
  filter: drop-shadow(0 0 calc(5px * var(--light-level)) rgb(122 193 67 / calc(0.45 * var(--light-level))));
}

:root:not([data-lights="on"]) .brand .logo .arc-orange {
  filter: drop-shadow(0 0 calc(5px * var(--light-level)) rgb(244 119 53 / calc(0.45 * var(--light-level))));
}

.logo .dot {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  /* The dots power on in sequence as the page opens, and chase on hover. Nothing waits for it. */
  .logo .dot {
    animation: dot-on 0.45s ease-out both;
    animation-delay: calc(120ms + var(--i) * 70ms);
  }

  .brand:hover .logo .dot,
  .brand:focus-visible .logo .dot {
    animation: dot-chase 0.8s ease-in-out both;
    animation-delay: calc(var(--i) * 55ms);
  }
}

@keyframes dot-on {
  from {
    opacity: 0.12;
  }
}

@keyframes dot-chase {
  40% {
    transform: scale(1.45);
  }
}

.site-nav ul {
  display: flex;
  gap: clamp(0.25rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--unlit);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

:root[data-lights="on"] .site-nav a:hover::after,
:root[data-lights="on"] .site-nav a[aria-current="page"]::after {
  box-shadow: none;
}

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

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

/* The header's light button shows the current light. */
.light-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.light-button:hover {
  border-color: var(--muted);
}

.light-button-bulb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(var(--light-rgb));
  opacity: calc(0.35 + 0.65 * var(--light-level));
  box-shadow: 0 0 calc(16px * var(--light-level)) rgb(var(--light-rgb) / 0.8);
}

:root[data-lights="on"] .light-button-bulb {
  box-shadow: inset 0 0 0 1px rgb(20 21 17 / 0.4);
}

@media (max-width: 420px) {
  .light-button-text {
    display: none;
  }

  .light-button {
    padding: 0.55rem;
  }
}

/* ---------- Light controls (header popover and hero wall plate) ---------- */

.light-panel {
  position: fixed;
  inset: auto;
  top: calc(var(--header-h) - 6px);
  right: max(var(--gutter), calc((100vw - var(--max)) / 2));
  width: min(360px, calc(100vw - 2rem));
  margin: 0;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

:root[data-lights="on"] .light-panel {
  box-shadow: 0 18px 44px rgb(20 21 17 / 0.12), 0 2px 6px var(--shadow);
}

.light-panel-title {
  margin-bottom: 1rem;
  font-size: var(--step-0);
  text-shadow: none;
}

.controls {
  display: grid;
  gap: 1.1rem;
}

.control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
}

.control label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
}

.control output {
  font-family: var(--font-led);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink);
}

.control input[type="range"] {
  grid-column: 1 / -1;
}

/* Range sliders drawn as a lit track with a knob. */
input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--track, var(--line));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--track, var(--line));
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 3px solid var(--room);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 0 14px var(--glow);
  -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--room);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 0 14px var(--glow);
}

input[type="range"]:focus-visible {
  outline-offset: 6px;
}

.range-kelvin {
  --track: linear-gradient(90deg, rgb(255 167 87), rgb(255 206 166) 34%, rgb(255 254 250));
}

.range-level {
  --track: linear-gradient(90deg, #1b1d18, rgb(var(--light-rgb)));
}

/* The room light switch: a rocker with a pilot light. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.switch-rocker {
  position: relative;
  flex: none;
  width: 34px;
  height: 52px;
  border-radius: 9px;
  background: linear-gradient(#20231d, #161814);
  box-shadow: inset 0 0 0 1px #34382f, 0 2px 0 #050605;
}

.switch-rocker::before {
  content: "";
  position: absolute;
  inset: 4px 4px 24px;
  border-radius: 6px;
  background: linear-gradient(#2b2f27, #1c1f19);
  box-shadow: 0 1px 0 #3a3f34 inset;
  transition: inset 0.12s ease, background-color 0.12s ease;
}

.switch-rocker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #3a2a20;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

:root[data-lights="on"] .switch-rocker {
  background: linear-gradient(#f2f2f0, #e4e4e0);
  box-shadow: inset 0 0 0 1px #cdcdc8, 0 2px 0 #c4c4bf;
}

:root[data-lights="on"] .switch-rocker::before {
  background: linear-gradient(#fff, #f1f1ee);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(20 21 17 / 0.2);
}

:root[data-lights="on"] .switch-rocker::after {
  background: #d8d2cb;
}

.switch[aria-checked="true"] .switch-rocker::before,
.switch[aria-pressed="true"] .switch-rocker::before {
  inset: 24px 4px 4px;
}

.switch[aria-checked="true"] .switch-rocker::after,
.switch[aria-pressed="true"] .switch-rocker::after {
  top: 9px;
  bottom: auto;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
}

:root[data-lights="on"] .switch[aria-checked="true"] .switch-rocker::after,
:root[data-lights="on"] .switch[aria-pressed="true"] .switch-rocker::after {
  box-shadow: 0 0 5px rgb(244 119 53 / 0.7);
}

.switch-state {
  display: block;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- Buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.button::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.button:hover::before,
.button:focus-visible::before {
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
}

.button-primary {
  background: var(--button-bg);
  color: var(--button-ink);
}

.button-primary:hover {
  color: var(--button-ink);
  box-shadow: 0 0 0 1px var(--button-bg), 0 0 28px rgb(122 193 67 / calc(0.55 * var(--light-level)));
}

:root[data-lights="on"] .button-primary:hover {
  background: #2a4712;
  box-shadow: none;
}

.button-quiet {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink);
}

.button-quiet:hover {
  border-color: var(--muted);
  color: var(--ink);
}

/* ---------- Sections ---------- */

main {
  display: block;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 3rem + 7vw, 9rem);
  isolation: isolate;
}

/* The LED strip above each section washes the wall around it. The glow is centred on the strip and
   fades both ways, so there is no edge where one section meets the next. */
.section::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  height: min(90%, 860px);
  z-index: -1;
  background: radial-gradient(52% 62% at 50% 200px, var(--wash), transparent 72%);
  mask-image: linear-gradient(to bottom, transparent, #000 200px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 200px);
  pointer-events: none;
}

.section-head {
  display: grid;
  gap: 1.25rem;
  max-width: 54rem;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.section-head p {
  max-width: 40rem;
}

/* One style for body copy everywhere. Headings and the closing statement are the only other sizes. */
.hero-lede,
.section-head p,
.letter p,
.prose p,
.reason p,
.page-head p,
.legal p,
.legal li,
.contact-direct p {
  font-size: var(--body-size);
  line-height: 1.6;
  color: var(--body);
}

/* An LED strip between sections. It lights from the left as it scrolls into view. */
.strip {
  --strip-colour: var(--green);
  --strip-glow: rgb(122 193 67 / calc(0.6 * var(--light-level)));
  position: relative;
  height: 24px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  background: radial-gradient(circle, var(--unlit) 2px, transparent 2.6px) 0 50% / 16px 24px repeat-x;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--strip-colour) 2px, transparent 2.6px) 0 50% / 16px 24px repeat-x;
  filter: drop-shadow(0 0 calc(4px * var(--light-level)) var(--strip-glow));
}

.strip-orange {
  --strip-colour: var(--orange);
  --strip-glow: rgb(244 119 53 / calc(0.6 * var(--light-level)));
}

:root[data-lights="on"] .strip::after {
  filter: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip::after {
      animation: strip-light linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

@keyframes strip-light {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Hero ---------- */

.hero {
  --identity-gap: 2.5rem;
  position: relative;
  padding-block: var(--identity-gap) clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: clip;
  isolation: isolate;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.75rem;
  align-content: center;
  pointer-events: none;
}

.hero-copy > * {
  pointer-events: auto;
}

.hero h1 {
  text-shadow: 0 0 calc(40px * var(--light-level)) var(--glow);
}

.hero h1 .line {
  display: block;
}

/* One word of the headline is lit in brand green. */
.hero h1 .glow {
  color: var(--green-text);
  text-shadow: 0 0 calc(34px * var(--light-level)) rgb(122 193 67 / calc(0.65 * var(--light-level)));
}

:root[data-lights="on"] .hero h1 .glow {
  text-shadow: none;
}

.hero-lede {
  max-width: 34rem;
}

.hero-lede strong {
  font-weight: 700;
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.25rem;
}

.hero-identity {
  position: relative;
  width: min(55%, 40rem);
  margin-bottom: var(--identity-gap);
  z-index: 2;
  pointer-events: none;
  aspect-ratio: 1014.399 / 344.97514;
}

@media (max-width: 999px) {
  .hero-identity {
    width: 100%;
    max-width: 40rem;
  }
}

.hero-wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgb(122 193 67 / 0.12));
}

.hero-wordmark .word-green {
  fill: var(--green-text);
}

body:has(.globe-stage:hover) .brand-scroll .hero-wordmark {
  filter: drop-shadow(0 0 16px rgb(122 193 67 / 0.45));
}

:root[data-lights="on"] .hero-wordmark {
  filter: none;
}

.globe-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1;
  margin-inline: auto;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.globe-stage.is-dragging {
  cursor: grabbing;
}

/* The light the globe throws on the wall behind it. */
.globe-stage::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--light-rgb) / calc(0.13 * var(--light-level))), transparent);
  pointer-events: none;
}

:root[data-lights="on"] .globe-stage::before {
  display: none;
}

.globe-stage img,
.globe-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.globe-stage canvas {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.globe-stage.is-live canvas {
  opacity: 1;
}

.globe-stage.is-live img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.globe-poster-light,
:root[data-lights="on"] .globe-poster-dark {
  display: none;
}

:root[data-lights="on"] .globe-poster-light {
  display: block;
}

.globe-off [data-globe-only] {
  display: none !important;
}

.globe-caption {
  display: grid;
  gap: 0.9rem;
  max-width: 36rem;
  margin-inline: auto;
  font-size: var(--step--1);
  color: var(--muted);
  text-align: center;
}

.globe-caption strong {
  color: var(--ink);
}

.countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

.country::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 calc(10px * var(--light-level)) var(--orange);
}

:root[data-lights="on"] .country::before {
  background: var(--orange-text);
  box-shadow: none;
}

.country:hover,
.country[aria-pressed="true"] {
  border-color: var(--orange);
}

/* The wall plate: the same light controls as the header, on a switch plate. */
.plate {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-items: center;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding: 1.4rem 1.6rem;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 100%, #fff 3%), var(--surface));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 0 0 1px var(--line), 0 18px 40px rgb(0 0 0 / 0.25);
}

:root[data-lights="on"] .plate {
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--line), 0 12px 28px var(--shadow), 0 1px 3px var(--shadow);
}

.plate::before,
.plate::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 60%, #000);
}

.plate::before {
  left: 9px;
}

.plate::after {
  right: 9px;
}

.plate .controls {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1rem 2rem;
}

@media (min-width: 760px) {
  .plate {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (min-width: 1000px) {
  .hero-grid {
    container-type: inline-size;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 0;
  }

  /* The headline runs over the edge of the globe. */
  .hero-copy {
    margin-right: -22%;
  }

  .hero-visual {
    /* Half the three-line heading height minus half the globe column width. */
    margin-top: calc(var(--step-5) * 1.38 - 27.38095cqw);
  }

  .globe-stage {
    max-width: none;
  }
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  align-self: start;
}

.facts div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  background: var(--surface);
}

.facts dt {
  font-size: var(--step--1);
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
}

.letter {
  display: grid;
  gap: 1.35rem;
  max-width: 44rem;
}

.signature {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
}

.signature b {
  display: block;
}

.signature span {
  color: var(--muted);
  font-size: var(--step--1);
}

.goals {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* The four goals as an LED sign: a pictogram over each word, lit one after another. */
.goal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.goal {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  color: var(--muted);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.goal:nth-child(odd) {
  --goal: var(--green-text);
  --goal-glow: rgb(122 193 67 / calc(0.6 * var(--light-level)));
}

.goal:nth-child(even) {
  --goal: var(--orange-text);
  --goal-glow: rgb(244 119 53 / calc(0.6 * var(--light-level)));
}

.goal-word {
  font-family: var(--font-led);
  font-weight: 700;
  font-size: clamp(1.6rem, 0.9rem + 2.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* An unlit pictogram is a dim version of the word's colour; lit, it takes the goal's colour and glows. */
.goal .pictogram {
  width: 88px;
  height: 88px;
}

.goal .pictogram circle {
  fill: currentColor;
}

.goal .pictogram svg {
  opacity: 0.4;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.goal:hover {
  color: var(--goal);
  text-shadow: 0 0 calc(22px * var(--light-level)) var(--goal-glow);
}

.goal:hover .pictogram svg {
  opacity: 1;
  filter: drop-shadow(0 0 calc(5px * var(--light-level)) var(--goal-glow));
}

@media (prefers-reduced-motion: no-preference) {
  .goal {
    animation: goal-cycle 8s steps(1, end) infinite;
  }

  .goal .pictogram svg {
    animation: goal-pictogram 8s steps(1, end) infinite;
  }

  .goal:nth-child(2),
  .goal:nth-child(2) .pictogram svg {
    animation-delay: 2s;
  }

  .goal:nth-child(3),
  .goal:nth-child(3) .pictogram svg {
    animation-delay: 4s;
  }

  .goal:nth-child(4),
  .goal:nth-child(4) .pictogram svg {
    animation-delay: 6s;
  }
}

@keyframes goal-cycle {
  0% {
    color: var(--goal);
    text-shadow: 0 0 calc(22px * var(--light-level)) var(--goal-glow);
  }
  25% {
    color: var(--muted);
    text-shadow: none;
  }
}

@keyframes goal-pictogram {
  0% {
    opacity: 1;
    filter: drop-shadow(0 0 calc(5px * var(--light-level)) var(--goal-glow));
  }
  25% {
    opacity: 0.4;
    filter: none;
  }
}

:root[data-lights="on"] .goal {
  text-shadow: none !important;
}

:root[data-lights="on"] .goal .pictogram svg {
  filter: none !important;
}

@media (min-width: 900px) {
  .goal-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

/* ---------- Supply ---------- */

.split {
  display: grid;
  gap: 2.5rem;
}

.prose {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  max-width: 44rem;
}

.split-side {
  display: grid;
  gap: 2.5rem;
  align-content: start;
}

.chips-block {
  display: grid;
  gap: 1rem;
}

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each brand sits on an LED package: a square with a lit die. */
.chip {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 700;
}

.chip::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgb(var(--light-rgb)) 0 5px, rgb(var(--light-rgb) / 0.2) 6px, transparent 11px),
    repeating-linear-gradient(90deg, #4a4d44 0 2px, transparent 2px 6px) 0 0 / 100% 4px no-repeat,
    #2a2d25;
  box-shadow: inset 0 0 0 2px #55594e, 0 0 calc(16px * var(--light-level)) rgb(var(--light-rgb) / calc(0.4 * var(--light-level)));
}

:root[data-lights="on"] .chip::before {
  background:
    radial-gradient(circle, #f1cf57 0 5px, rgb(241 207 87 / 0.35) 6px, transparent 8px),
    #fff;
  box-shadow: inset 0 0 0 2px #cfcfca;
}

.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sectors li {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 7rem);
  }
}

/* ---------- Applications: the switchboard ---------- */

/* Without JavaScript the five applications are a plain list. */
.switchboard {
  display: grid;
  gap: 1.5rem;
}

.scene-texts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.scene-text {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.scene-text p {
  color: var(--muted);
}

/* With JavaScript: a screen, the caption for the lit scene over its foot, and the switches. */
.js .switchboard {
  grid-template-columns: minmax(0, 1fr);
}

.js .scene-screen,
.js .scene-texts {
  grid-area: 1 / 1;
}

.js .scene-texts {
  display: block;
  align-self: end;
  z-index: 1;
  pointer-events: none;
}

.js .scene-text {
  display: none;
  padding: clamp(1rem, 0.6rem + 2vw, 2rem);
  border-radius: 0 0 24px 24px;
  background: linear-gradient(transparent, rgb(5 6 5 / 0.88) 42%);
  box-shadow: none;
  color: #efeee7;
}

.js .scene-text.is-active {
  display: grid;
}

.js .scene-text p {
  max-width: 40rem;
  color: #c9cabf;
}

.scene-screen {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #050605;
  box-shadow: inset 0 0 0 1px #20231d, 0 30px 80px rgb(0 0 0 / 0.35);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

:root[data-lights="on"] .scene-screen {
  box-shadow: 0 20px 50px rgb(20 21 17 / 0.16), 0 2px 6px var(--shadow);
}

.scene-screen.is-dragging {
  cursor: grabbing;
}

/* Without WebGL the scenes cannot run, so the applications show as the plain list. */
.scenes-off [data-scenes-only],
.js .scenes-off .scene-screen,
.js .scenes-off .switches {
  display: none !important;
}

.js .scenes-off .scene-texts {
  display: grid;
  grid-area: auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  pointer-events: auto;
}

.js .scenes-off .scene-text {
  display: grid;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}

.scene-screen canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media (min-width: 1000px) {
  .scene-screen canvas {
    aspect-ratio: 21 / 9;
  }
}

.switches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.switches .switch {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 1rem 0.5rem 0.9rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
  line-height: 1.2;
}

.switches .switch:hover {
  box-shadow: inset 0 0 0 1px var(--muted);
}

.switches .switch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--orange), 0 0 30px rgb(244 119 53 / calc(0.18 * var(--light-level)));
}

:root[data-lights="on"] .switches .switch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--orange-text);
}

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

  .js .scene-screen,
  .js .scene-texts {
    grid-area: auto;
  }

  .js .scene-text {
    padding: 0;
    background: none;
    color: var(--ink);
  }

  .js .scene-text p {
    color: var(--muted);
  }

  .scene-screen canvas {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Testing ---------- */

.certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each label sits in the middle of its box, whatever height the row ends up. */
.certs li {
  display: grid;
  place-items: center;
  min-width: 4.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--muted);
  border-radius: 10px;
  font-family: var(--font-led);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

/* ---------- Form fields ---------- */

.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.field label {
  font-size: var(--step--1);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  background: var(--room);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

/* With the room lights on, fields stay white whatever the colour temperature or brightness. */
:root[data-lights="on"] input[type="text"],
:root[data-lights="on"] input[type="email"],
:root[data-lights="on"] textarea {
  background: #fff;
}

input:hover,
textarea:hover {
  border-color: var(--muted);
}

/* Fields keep the site's solid focus ring and take its colour on their border too. */
input:focus-visible,
textarea:focus-visible {
  border-color: var(--focus);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--orange-text);
}

textarea {
  min-height: 4.5rem;
  resize: vertical;
}

/* ---------- Why us ---------- */

/* Nine reasons on the open page: one column, then two, then three by three. */
.reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.8rem + 2vw, 3.75rem) clamp(1.5rem, 0.8rem + 3vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.reason:nth-child(odd) {
  --pict: var(--green);
}

.reason:nth-child(even) {
  --pict: var(--orange);
}

:root[data-lights="on"] .reason:nth-child(odd) {
  --pict: var(--green-text);
}

:root[data-lights="on"] .reason:nth-child(even) {
  --pict: var(--orange-text);
}

/* Each advantage has a pictogram drawn in LEDs on a grid of unlit ones. */
.pictogram {
  width: 72px;
  height: 72px;
  margin-bottom: 0.9rem;
  /* Nine by nine unlit LEDs, whatever size the pictogram is drawn at. */
  background: radial-gradient(circle at center, var(--unlit) 1.3px, transparent 1.9px) 0 0 / calc(100% / 9) calc(100% / 9);
}

.pictogram svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pictogram circle {
  fill: var(--pict);
}

/* Switched off by the animation (client/pictograms.ts): only the unlit LED underneath shows.
   LEDs come on at once and fade out quickly. */
.pictogram circle.is-off {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

@media (min-width: 620px) and (max-width: 999px) {
  .reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.closing {
  max-width: 52rem;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-size: var(--step-2);
  line-height: 1.4;
  text-wrap: balance;
}

.closing strong {
  color: var(--green-text);
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.contact-direct p {
  font-size: var(--step-1);
}

.contact-direct a {
  font-weight: 700;
  color: var(--ink);
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .contact-direct {
    padding-top: 1.9rem;
  }
}

/* ---------- Pages ---------- */

.page-head {
  display: grid;
  gap: 1.25rem;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.page-head h1 {
  font-size: var(--step-4);
  line-height: 0.95;
}

.page-head p {
  max-width: 44rem;
}

.page-body {
  padding-bottom: clamp(4rem, 3rem + 5vw, 8rem);
}

.legal {
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
}

.legal h2 {
  margin-top: 1.5rem;
  font-size: var(--step-2);
  text-shadow: none;
}

.legal ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1.2rem;
}

/* Contact form */

.form {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}

.form-row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field-error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--orange-text);
}

.field-error:empty {
  display: none;
}

.form-status:empty {
  display: none;
}

.form-status {
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 600;
}

.form-status[data-state="ok"] {
  box-shadow: inset 0 0 0 2px var(--green-text);
}

.form-status[data-state="error"] {
  box-shadow: inset 0 0 0 2px var(--orange-text);
}

.form-status:focus {
  outline: none;
}

.form-legal {
  font-size: var(--step--1);
  color: var(--muted);
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile {
  min-height: 65px;
}

.button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- 404: lights out ---------- */

.lights-out {
  position: relative;
  min-height: calc(100vh - var(--header-h) - 12rem);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: clip;
  --torch-x: 50%;
  --torch-y: 40%;
}

.lights-out::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, var(--unlit) 2px, transparent 2.6px) 0 0 / 22px 22px;
}

.lights-out::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgb(var(--light-rgb)) 2px, transparent 2.6px) 0 0 / 22px 22px;
  mask-image: radial-gradient(circle 190px at var(--torch-x) var(--torch-y), #000, transparent);
  -webkit-mask-image: radial-gradient(circle 190px at var(--torch-x) var(--torch-y), #000, transparent);
  opacity: var(--light-level);
}

:root[data-lights="on"] .lights-out::after {
  background: radial-gradient(circle, var(--green-text) 2px, transparent 2.6px) 0 0 / 22px 22px;
  opacity: 1;
}

.lights-out .page-head {
  padding-block: 4rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: var(--step--1);
  color: var(--muted);
}

.site-footer-inner {
  display: grid;
  gap: 1.5rem;
}

.site-footer-inner > div {
  display: grid;
  gap: 0.4rem;
  max-width: 46rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .site-footer-inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* ---------- Motion ---------- */

/* Browsers without the Popover API would show the light panel all the time. They get the hero plate only. */
@supports not selector(:popover-open) {
  .light-button,
  .light-panel {
    display: none !important;
  }
}

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