/*
  Kinetic Signal: shared stylesheet for every page.
  Noise in, signal out: one saturated field, one family (Archivo), one lime signal.

  Order: variables, fonts, reset, base, layout, components, sections, utilities,
  animations (keyframes, page transition, hidden states), media queries.

  Breakpoints (mobile first, min-width only): 480px, 768px, 1024px, 1280px.
  Custom properties cannot drive @media conditions, so the values live in the queries.

  The contract for page files is COMPONENTS.md. Page CSS (css/<page>.css) never repeats a rule from this file.
*/

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
  /* Palette (DESIGN.md 2.1). Components read regime tokens, never these directly. */
  --blue: #1D2CF3;
  --blue-deep: #1020B0;
  --ink: #0A0C24;
  --paper: #F4F5FB;
  --paper-2: #E3E6F4;
  --tracer: #D4FF3A;
  --mist: #C9CDFB;
  --haze: #A3A8CC;
  --slate: #4A4E6E;
  --alarm: #FFC2B3;
  --line-blue: rgba(244, 245, 251, 0.24);
  --line-ink: rgba(244, 245, 251, 0.16);
  --line-paper: rgba(10, 12, 36, 0.16);
  --line-tracer: rgba(10, 12, 36, 0.24);

  /* Type: one variable family. Width by font-stretch, weight by font-weight. */
  --font: "Archivo", "Archivo Fallback", sans-serif;
  --fs-wall: clamp(3rem, 1.6rem + 7vw, 8.5rem);
  /* Keyword walls: smaller than --fs-wall, so the longest keyword fits on one line at 360px. */
  --fs-wordwall: clamp(2.25rem, 0.9rem + 6.2vw, 7rem);
  --fs-d1: clamp(2.5rem, 1.6rem + 4.5vw, 6.5rem);
  --fs-readout: clamp(3.5rem, 2rem + 6vw, 8rem);
  --fs-form: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --fs-d2: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  --fs-quote: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);
  --fs-role: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
  --fs-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
  --fs-button: 0.875rem;
  --measure: 62ch;
  --measure-lead: 38ch;

  /* Grid and spacing (DESIGN.md 2.3) */
  --cols: 4;
  --margin: clamp(1.25rem, 4vw, 4rem);
  --gutter: clamp(1rem, 1.6vw, 1.5rem);
  --max: 96rem;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4rem, 2rem + 8vw, 10rem);
  --head-gap: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  --header-h: 3.75rem;
  --header-h-compact: 3.5rem;
  /* Space the fixed header takes from the top of the first section (0 when it is in flow). */
  --header-offset: var(--header-h);
  --radius-pill: 999px;
  --tap: 2.75rem;

  /* Motion (DESIGN.md 3): the same four curves are registered in GSAP by main.js. */
  --ease-lock: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sweep: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-tick: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-drift: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-tick: 150ms;
  --dur-micro: 300ms;
  --dur-reveal: 600ms;
  --dur-lock: 700ms;
  --dur-hero: 800ms;
  --dur-page: 800ms;
  --dur-draw: 1200ms;

  /* Layers: content 1, sticky filter bar 30, header 40. Menus use the native top layer. */
  --z-content: 1;
  --z-filter: 30;
  --z-header: 40;
}

/* Regimes: every page (on <html>) and every section carries one. */
.regime-blue {
  --ground: var(--blue);
  --ground-hover: var(--blue-deep);
  --fg: var(--paper);
  --fg-2: var(--mist);
  --accent: var(--tracer);
  --focus: var(--tracer);
  --line: var(--line-blue);
}

.regime-paper {
  --ground: var(--paper);
  --ground-hover: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--slate);
  --accent: var(--blue);
  --focus: var(--blue);
  --line: var(--line-paper);
}

.regime-ink {
  --ground: var(--ink);
  --ground-hover: var(--ink);
  --fg: var(--paper);
  --fg-2: var(--haze);
  --accent: var(--tracer);
  --focus: var(--tracer);
  --line: var(--line-ink);
}

.regime-tracer {
  --ground: var(--tracer);
  --ground-hover: var(--tracer);
  --fg: var(--ink);
  --fg-2: var(--ink);
  --accent: var(--blue);
  --focus: var(--ink);
  --line: var(--line-tracer);
}

.regime-blue,
.regime-paper,
.regime-ink,
.regime-tracer {
  background-color: var(--ground);
  color: var(--fg);
}

/* ==========================================================================
   2. Fonts: Archivo variable, latin subset, self-hosted (fonts/LICENSES.md)
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  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;
}

/* Arial tuned to Archivo's metrics (measured with HarfBuzz), so the swap barely moves text. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 98.81%;
  ascent-override: 88.86%;
  descent-override: 21.25%;
  line-gap-override: 0%;
}

/* ==========================================================================
   3. Reset
   ========================================================================== */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Zero specificity, so component classes can set their own padding. */
:where(ul[role="list"], ol[role="list"]) {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

p,
h1,
h2,
h3,
h4,
blockquote,
figcaption,
li {
  overflow-wrap: break-word;
}

/* ==========================================================================
   4. Base
   ========================================================================== */

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:lang(ar) {
  font-family: "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
}

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

/* One focus ring everywhere, in the regime's focus color. It also works in forced colors. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Type roles (DESIGN.md 2.2) */
.h-display {
  font-size: var(--fs-d1);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h-title {
  font-size: var(--fs-d2);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.t-lead {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.t-label {
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

/* Text column: capped at --max, with the page margin on both sides. */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* The grid: 4 columns, 8 from 768px, 12 from 1024px. Children span the full row by default. */
.cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.cols > * {
  grid-column: 1 / -1;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* ==========================================================================
   6. Components
   ========================================================================== */

/* ---- Icons: inline SVG sprite, viewBox 24, stroke 1.5, square caps ---- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- Wordmark "The Tick": AMR, a price tick, SAKR ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: var(--tap);
  font-size: 1.125rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark-tick {
  width: 1.5rem;
  height: 0.75rem;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.wordmark-tick polyline {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

/* ---- Label: accent square, caps text, hairline to the right edge ---- */
.label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}

.section-head {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--head-gap);
}

/* ---- Buttons ---- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 3.25rem;
  padding-inline: 1.75rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  font-size: var(--fs-button);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-micro) linear, background-color var(--dur-micro) linear;
}

.btn .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-micro) var(--ease-lock);
}

.btn:hover .icon,
.btn:focus-visible .icon {
  transform: translateX(4px);
}

/* Signal and ink buttons: a layer scales in from the side the pointer enters (main.js sets --entry). */
.btn--signal,
.btn--ink {
  --layer: var(--paper);
}

.btn--signal {
  background: var(--tracer);
  color: var(--ink);
}

.btn--ink {
  --layer: var(--blue);
  background: var(--ink);
  color: var(--paper);
}

.btn--signal::before,
.btn--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--layer);
  transform: scaleX(0);
  transform-origin: var(--entry, left) center;
  transition: transform var(--dur-micro) var(--ease-lock);
}

.btn--signal:hover::before,
.btn--signal:focus-visible::before,
.btn--ink:hover::before,
.btn--ink:focus-visible::before {
  transform: scaleX(1);
}

.btn--ghost {
  border: 1.5px solid var(--fg);
  color: var(--fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--fg);
  color: var(--ground);
}

.btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Link: 1px underline that redraws from the left on hover ---- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* The hit area reaches past the text, so a one-line link is a 44px touch target (DESIGN.md 7). */
.link::before {
  content: "";
  position: absolute;
  inset: -0.85rem -0.5rem;
}

.link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.15em;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.link .icon {
  width: 1em;
  height: 1em;
}

/* ---- Chips ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--fg-2);
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chip--toggle {
  height: var(--tap);
  padding-inline: 1rem;
  border: 1.5px solid var(--fg);
  color: var(--fg);
  cursor: pointer;
  transition: color var(--dur-tick) linear, background-color var(--dur-tick) linear;
}

.chip--toggle:hover {
  background: var(--ground-hover);
}

.chip--toggle[aria-pressed="true"] {
  background: var(--fg);
  color: var(--ground);
}

.chip-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* ---- Panel: a hard rectangle under a 2px rule ---- */
.panel {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 2px solid var(--fg);
}

.panel--raised {
  background: var(--paper-2);
}

/* ---- Status line: accent dot plus caps text ---- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-dot {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

/* ---- Letter masks: every animated letter or digit sits in its own padded mask ---- */
.m {
  display: inline-block;
  overflow: clip;
  padding-block: 0.2em;
  margin-block: -0.2em;
}

.ch,
.d {
  display: inline-block;
}

/* ---- Fitted titles: a word that fills its container exactly (--fit = measured width in em) ---- */
.fit {
  display: block;
  container-type: inline-size;
}

.fit-word {
  display: block;
  font-size: clamp(3.5rem, calc(100cqi / var(--fit)), 22rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
  Each letter mask has the letter's measured Archivo 125/900 advance (--w, em) minus the
  0.02em tracking, so no letter moves when Archivo replaces the narrower fallback font (CLS 0).
  A mask without --w keeps its natural width.
*/
.fit-word .m {
  width: calc((var(--w) - 0.02) * 1em);
}

.h1-sub {
  display: block;
  font-size: var(--fs-role);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ---- Readout: a locked value over a caps label (SM5) ---- */
.readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.readout-value {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.1em;
  font-size: var(--fs-readout);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* The lock underline: 3px accent, snaps in once the digits settle. */
.readout-value::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform var(--dur-tick) var(--ease-tick);
}

.digits {
  display: inline-flex;
  align-items: baseline;
}

.i-star {
  width: 0.68em;
  height: 0.68em;
  margin-inline-start: 0.04em;
  fill: currentColor;
}

.readout-label {
  color: var(--fg-2);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Word wall: keywords at poster scale, wrapping across the full width ---- */
.wordwall-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.2em;
  padding-inline: var(--margin);
  font-size: var(--fs-wordwall);
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* A keyword never breaks inside itself ("METATRADER 4/5" stays one unit). */
.wordwall-list > li {
  display: inline-block;
  white-space: nowrap;
}

/*
  Separator: the label's accent square, raised to the middle of the caps. It is a box,
  not a character, so it never reads as part of a name such as "C# / .NET Core".
*/
.wordwall-list > li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-inline: 0.24em 0.08em;
  vertical-align: 0.3em;
  background: var(--accent);
}

/* main.js marks the last item of each line: a separator there separates nothing. */
.wordwall-list > li.is-line-end::after {
  visibility: hidden;
}

/* ---- Review card: the data-review-id / data-quote contract (verify_content.py) ---- */
/* minmax(0, 1fr): the default auto track is as wide as the longest unbroken run ("thank you......."). */
.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 2px solid var(--fg);
}

.review[hidden] {
  display: none;
}

.review blockquote {
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.review figcaption {
  display: grid;
  gap: var(--s-3);
}

.review-source {
  color: var(--fg-2);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0;
  list-style: none;
}

.review-tags li {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--fg-2);
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  font-size: 0.6875rem;
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Type follows the quote length (data-len): the shorter the quote, the bigger it sets. */
.review[data-len="xs"] blockquote {
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.review[data-len="s"] blockquote {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
}

.review[data-len="m"] blockquote {
  font-size: 1.0625rem;
}

.review[data-len="l"] blockquote {
  font-size: 1rem;
}

.review--feature blockquote {
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ---- Quote mark: the drawn opening mark above a featured quote ---- */
.quote-mark {
  width: 3rem;
  height: auto;
  fill: var(--accent);
}

/* ---- Form controls (the form sits on blue; errors use --alarm) ---- */
.field {
  display: grid;
  gap: var(--s-2);
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.25em 0 0.2em;
  border: 0;
  border-bottom: 2px solid var(--fg);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  transition: border-color var(--dur-tick) linear, box-shadow var(--dur-tick) linear;
}

.input::placeholder {
  color: var(--fg-2);
  opacity: 1;
}

/* Focus and error thicken the underline to 3px with a shadow, so nothing shifts. */
.input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.input[aria-invalid="true"] {
  border-color: var(--alarm);
  box-shadow: 0 1px 0 0 var(--alarm);
}

textarea.input {
  resize: vertical;
}

select.input {
  appearance: none;
  padding-inline-end: 1.5em;
  cursor: pointer;
}

select.input option {
  background: var(--paper);
  color: var(--ink);
}

/* A drawn chevron for selects: wrap the select in .select. */
.select {
  position: relative;
  display: inline-grid;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.2em;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--alarm);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}

.field-error[hidden] {
  display: none;
}

.field-error .icon {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   7. Sections: skip link, header, menu, CTA band, footer
   ========================================================================== */

/* ---- Skip link: first focusable, a tracer pill on focus ---- */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: var(--margin);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--tap);
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--tracer);
  color: var(--ink);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  transform: translateY(-200%);
}

/* The ring keeps the regime focus color: it sits on the header ground, 3px off the pill. */
.skip-link:focus-visible {
  transform: none;
}

/* ---- Header: fixed, page regime, compacts after 80px of scroll ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--fg);
  pointer-events: none;
  view-transition-name: site-header;
}

/* The compact bar: a ground-colored strip that fades in (opacity only). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-h-compact);
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  opacity: 0;
  transition: opacity var(--dur-micro) linear;
}

.site-header.is-compact::before {
  opacity: 1;
}

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
  padding-inline: var(--margin);
  transition: transform var(--dur-micro) var(--ease-lock);
}

/* Compact: the row moves up so it centers in the 3.5rem strip (transform only). */
.site-header.is-compact .header-bar {
  transform: translateY(calc((var(--header-h-compact) - var(--header-h)) / 2));
}

.header-bar > * {
  pointer-events: auto;
}

.site-nav {
  display: none;
  margin-inline-start: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.75rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--tap);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-index {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.nav-label {
  position: relative;
}

.nav-link[aria-current="page"] .nav-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.45em;
  left: 0;
  height: 3px;
  background: var(--accent);
}

/* Hover: the label rolls up and an aria-hidden copy rolls in. */
.roll {
  display: inline-grid;
  overflow: clip;
  vertical-align: top;
}

.roll > span {
  grid-area: 1 / 1;
  transition: transform var(--dur-micro) var(--ease-lock);
}

.roll > span + span {
  transform: translateY(110%);
}

.nav-link:hover .roll > span:first-child {
  transform: translateY(-110%);
}

.nav-link:hover .roll > span + span {
  transform: none;
}

.nav-link--pill {
  height: var(--tap);
  padding-inline: 1.1rem;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-tick) linear, color var(--dur-tick) linear;
}

.nav-link--pill:hover {
  background: var(--fg);
  color: var(--ground);
}

.nav-link--pill:hover .nav-index {
  color: inherit;
}

.nav-link--pill[aria-current="page"] {
  background: var(--fg);
  color: var(--ground);
}

/* On the filled pill the index takes the label color (mist on paper would be 1.42:1). */
.nav-link--pill[aria-current="page"] .nav-index {
  color: inherit;
}

.nav-link--pill[aria-current="page"] .nav-label::after {
  display: none;
}

/* Motion toggle: shown only with JS, hidden when the OS asks for reduced motion. */
.motion-toggle {
  display: none;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--fg-2);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-tick) linear;
}

.motion-toggle:hover {
  color: var(--fg);
}

/* The icon takes the toggle's text color: the tracer stays the one strong lime line (DESIGN.md 1). */
.motion-toggle .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.motion-toggle[aria-pressed="true"] .icon-wave,
.motion-toggle[aria-pressed="false"] .icon-flat {
  display: none;
}

/* Below 1024px the menu button replaces the inline nav (only with JS). */
html.js .menu-button,
html.js .menu .motion-toggle {
  display: inline-flex;
}

/* Without JS below 1024px, the header sits in the flow and its links wrap under the wordmark.
   From 1024px it stays fixed on a solid strip (see the media query). */
html:not(.js) {
  --header-offset: 0px;
}

html:not(.js) .site-header {
  position: relative;
  height: auto;
}

html:not(.js) .header-bar {
  flex-wrap: wrap;
  row-gap: 0;
  padding-block: var(--s-2);
}

html:not(.js) .site-nav {
  display: block;
  flex-basis: 100%;
  margin-inline-start: 0;
}

.menu-button {
  display: none;
  align-items: center;
  gap: var(--s-2);
  height: var(--tap);
  margin-inline-start: auto;
  padding-inline: 1.1rem 0.9rem;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-button .icon,
.menu-close .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---- Menu: a modal <dialog> on ink, opened with showModal() ---- */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  overscroll-behavior: contain;
}

.menu[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.menu::backdrop {
  background: var(--ink);
}

/* The page behind the open menu does not scroll. */
html.menu-open {
  overflow: hidden;
}

/* The bar sticks to the top, so Close stays in reach when the menu scrolls (phone in landscape). */
.menu-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
  padding-inline: var(--margin);
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--tap);
  padding-inline: 1.1rem 0.9rem;
  border: 1.5px solid var(--fg);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-nav {
  align-self: center;
  padding: var(--s-6) var(--margin);
}

.menu-nav ol {
  display: grid;
  gap: 0.15em;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}

.menu-word {
  display: inline-block;
}

.menu-link[aria-current="page"] {
  color: var(--accent);
}

.menu-foot {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5) var(--margin) var(--s-7);
  border-top: 1px solid var(--line);
}

.menu-foot .motion-toggle {
  justify-self: start;
}

.menu-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

/* ---- Profile link: brand icon, name, external arrow (footer and menu) ---- */
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: color var(--dur-tick) linear;
}

.profile-link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.profile-link .icon-ext {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--fg-2);
  transition: transform var(--dur-micro) var(--ease-lock), color var(--dur-tick) linear;
}

.profile-link:hover .icon-ext,
.profile-link:focus-visible .icon-ext {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* ---- Inner-page intro (#intro): clears the fixed header; page CSS refines the layout ---- */
.page-intro {
  padding-block: calc(var(--header-offset) + var(--s-8)) var(--section-y);
}

.page-title {
  display: grid;
  gap: var(--s-5);
}

/* Letter masks reach 0.2em below the line box; keep the next line clear of a rising letter. */
.page-title .fit-word {
  margin-bottom: max(0px, calc(0.2em - var(--s-5)));
}

.page-lede {
  margin-top: var(--s-6);
}

/* ---- CTA band: the tracer regime closes every page ---- */
.cta-band {
  padding-block: clamp(4rem, 2rem + 6vw, 8rem);
}

.cta-grid {
  row-gap: var(--s-7);
  align-items: end;
}

.cta-title {
  font-size: var(--fs-d1);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Optional: one sentence per line from 768px, in the CTA title (.cta-line) or a display heading (.h-line). */
.cta-line,
.h-line {
  display: inline;
}

.cta-side {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}

.cta-side .btn {
  width: 100%;
}

/* ---- Footer: ink, the sign-off, three columns, the proof line ---- */
.site-footer {
  padding-block: var(--s-9) var(--s-6);
}

.footer-signoff {
  display: grid;
  margin-bottom: var(--s-8);
  font-size: var(--fs-wall);
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.footer-signoff .w {
  display: inline-block;
}

.footer-line--signal {
  color: var(--accent);
}

.footer-grid {
  row-gap: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.footer-head {
  margin-bottom: var(--s-3);
  color: var(--fg-2);
  font-size: var(--fs-label);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links li a {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  font-size: var(--fs-small);
  font-weight: 500;
}

.footer-links a[aria-current="page"] {
  color: var(--accent);
}

.footer-status {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-3);
}

.footer-status li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-small);
  font-weight: 500;
}

.footer-status .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.footer-status .status-dot {
  margin-inline: 0.25rem;
}

.footer-proof {
  margin-top: var(--s-8);
  color: var(--fg-2);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   8. Utilities
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot wrapper: off screen, not display:none, so bots still fill it. */
.hp {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Lenis 1.3.26 (MIT, Copyright (c) 2024 darkroom.engineering): the library's recommended CSS. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ==========================================================================
   9. Animations
   ========================================================================== */

@keyframes char-rise {
  from { transform: translateY(130%); }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes enter-rise {
  from { transform: translateY(1.5rem); }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(4vh);
  }
}

@keyframes line-redraw {
  from { transform: scaleX(0); }
}

@keyframes tick-draw {
  from { stroke-dashoffset: 1; }
}

@keyframes status-pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  14%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

/* Hover redraws: the link underline and the wordmark tick. */
.link:hover::after,
.link:focus-visible::after {
  animation: line-redraw var(--dur-micro) var(--ease-lock);
}

.wordmark:hover .wordmark-tick polyline,
.wordmark:focus-visible .wordmark-tick polyline {
  animation: tick-draw var(--dur-reveal) var(--ease-lock);
}

/*
  ---- SM4 Page slide: native cross-document View Transitions (CSS only) ----
  The opt-in (@view-transition { navigation: auto; }) is an inline <style> at the top of
  every page's <head>: if it waits for this file, Chrome can evaluate the new page before
  the file arrives and skip the transition (measured: 3 of 10 skipped, 0 of 10 inline).

  The old page lifts and dims toward ink (800ms, sweep). The new page rises with the lime
  band on its leading edge and locks into place (700ms, lock: about 70% of the travel in the
  first 200ms, so a click answers at once). The dim goes toward ink, not the destination
  ground, so a paper page never fades through an off-palette lavender over blue.
*/
::view-transition-group(root) {
  background: var(--ink);
}

/* The UA default blend (plus-lighter) adds the two pages where they overlap, so the overlap would glow. */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: vt-lift var(--dur-page) var(--ease-sweep) both;
}

::view-transition-new(root) {
  animation: vt-rise var(--dur-lock) var(--ease-lock) both;
  box-shadow: 0 -0.75rem 0 0 var(--tracer);
}

html:active-view-transition-type(back)::view-transition-old(root) {
  animation-name: vt-sink;
}

html:active-view-transition-type(back)::view-transition-new(root) {
  animation-name: vt-drop;
  box-shadow: 0 0.75rem 0 0 var(--tracer);
}

/*
  The header stays still while the pages move under it. Each header snapshot shows only over
  its own page: a clip that follows the new page's leading edge, with the same duration and
  curve as vt-rise and vt-drop. So the wordmark and nav always keep the colors of the page
  under them (a blue page and Reviews have opposite header colors). Reduced motion and motion
  off match none of these rules and keep the UA crossfade with the 160ms page fade.
*/
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off)::view-transition-old(site-header),
  html:not(.motion-off)::view-transition-new(site-header) {
    mix-blend-mode: normal;
    animation-duration: var(--dur-lock);
    animation-timing-function: var(--ease-lock);
    animation-fill-mode: both;
  }

  html:not(.motion-off)::view-transition-old(site-header) {
    animation-name: vt-head-old;
  }

  html:not(.motion-off)::view-transition-new(site-header) {
    animation-name: vt-head-new;
  }

  html:not(.motion-off):active-view-transition-type(back)::view-transition-old(site-header) {
    animation-name: vt-head-old-back;
  }

  html:not(.motion-off):active-view-transition-type(back)::view-transition-new(site-header) {
    animation-name: vt-head-new-back;
  }
}

@keyframes vt-lift {
  to {
    opacity: 0.25;
    transform: translateY(-14vh);
  }
}

@keyframes vt-rise {
  from { transform: translateY(100vh); }
}

@keyframes vt-sink {
  to {
    opacity: 0.25;
    transform: translateY(14vh);
  }
}

@keyframes vt-drop {
  from { transform: translateY(-100vh); }
}

@keyframes vt-fade {
  from { opacity: 0; }
}

/* Forward: the new page's top edge is at 100vh x (1 - progress). Old header above it, new below. */
@keyframes vt-head-old {
  from { clip-path: inset(0 0 calc(100% - 100vh) 0); }
  to { clip-path: inset(0 0 100% 0); }
}

@keyframes vt-head-new {
  from { clip-path: inset(100vh 0 0 0); }
  to { clip-path: inset(0); }
}

/* Back: the new page's bottom edge is at 100vh x progress. Old header below it, new above. */
@keyframes vt-head-old-back {
  from { clip-path: inset(0); }
  to { clip-path: inset(100vh 0 0 0); }
}

@keyframes vt-head-new-back {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 calc(100% - 100vh) 0); }
}

html.motion-off::view-transition-old(root) {
  animation: none;
}

html.motion-off::view-transition-new(root) {
  animation: vt-fade 160ms linear both;
  box-shadow: none;
}

/*
  ---- Hidden states: one rule for the whole site ----
  Content may start hidden only when JS runs and motion is allowed. Every selector below
  sits in this query and starts with html.js:not(.motion-off). Without JS, with reduced
  motion, or with the motion toggle off, none of them match, so everything shows.
  Entrances that play once at load also carry :not(.intro-done), so turning motion back
  on never replays them (main.js adds intro-done after the intro).
*/
@media (prefers-reduced-motion: no-preference) {
  /* Default reveal: rise 2rem and fade in, 600ms lock, staggered by main.js (--reveal-delay). */
  html.js:not(.motion-off) [data-reveal] {
    transition:
      opacity var(--dur-reveal) var(--ease-lock) var(--reveal-delay, 0ms),
      transform var(--dur-reveal) var(--ease-lock) var(--reveal-delay, 0ms);
  }

  html.js:not(.motion-off) [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(2rem);
  }

  /*
    data-reveal="fade": opacity only, for elements whose transform belongs to SM3. They never
    transition transform: SM3 writes a new transform every frame, and a transform transition
    would restart on each write, so the word would lag or never move.
  */
  html.js:not(.motion-off) [data-reveal="fade"] {
    transition: opacity var(--dur-reveal) var(--ease-lock) var(--reveal-delay, 0ms);
  }

  html.js:not(.motion-off) [data-reveal="fade"]:not(.is-in) {
    transform: none;
  }

  /* A label's hairline draws from the left when its block reveals. */
  html.js:not(.motion-off) [data-reveal] .label::after,
  html.js:not(.motion-off) .label[data-reveal]::after {
    transition: transform var(--dur-reveal) var(--ease-lock) calc(var(--reveal-delay, 0ms) + 150ms);
  }

  html.js:not(.motion-off) [data-reveal]:not(.is-in) .label::after,
  html.js:not(.motion-off) .label[data-reveal]:not(.is-in)::after {
    transform: scaleX(0);
  }

  /*
    First-screen blocks never wait for a script: they rise as a CSS animation on the
    first-paint clock, with no fade, so their text paints at first paint (the same rule as
    the Home lede and the Contact form). --i is the place in the 80ms stagger.
    [data-enter] replaces [data-reveal] on a block that is on the first screen at every
    width. [data-enter="wide"] goes on a [data-reveal] block that is on the first screen from
    768px only: from there its hidden state is off, and below it reveals on scroll.
  */
  html.js:not(.motion-off):not(.intro-done) [data-enter=""] {
    animation: enter-rise var(--dur-reveal) var(--ease-lock) calc(var(--i, 0) * 80ms) backwards;
  }

  /* A label's hairline draws with its block, as in a reveal. */
  html.js:not(.motion-off):not(.intro-done) .label[data-enter=""]::after,
  html.js:not(.motion-off):not(.intro-done) [data-enter=""] .label::after {
    animation: line-redraw var(--dur-reveal) var(--ease-lock) calc(var(--i, 0) * 80ms + 150ms) backwards;
  }

  @media (min-width: 768px) {
    html.js:not(.motion-off) [data-enter="wide"]:not(.is-in) {
      opacity: 1;
      transform: none;
    }

    html.js:not(.motion-off):not(.intro-done) [data-enter="wide"] {
      animation: enter-rise var(--dur-reveal) var(--ease-lock) calc(var(--i, 0) * 80ms) backwards;
    }
  }

  /* SM5 Number lock: digits wait below their masks, the underline waits at zero width. */
  html.js:not(.motion-off) [data-lock]:not(.is-locked) .d {
    transform: translateY(130%);
  }

  html.js:not(.motion-off) [data-lock]:not(.is-locked) .readout-value::after {
    transform: scaleX(0);
  }

  /* SM5 for SVG diagram labels (no .d children): they lock as a whole. */
  html.js:not(.motion-off) svg [data-at]:not(.is-locked) {
    opacity: 0;
  }

  /* Signal paths (pathLength="1"): page scripts drive stroke-dashoffset; once="draw" uses CSS. */
  html.js:not(.motion-off) [data-path] {
    stroke-dasharray: 1;
  }

  html.js:not(.motion-off) [data-path]:not(.is-drawn) {
    stroke-dashoffset: 1;
  }

  html.js:not(.motion-off) [data-path="once"] {
    transition: stroke-dashoffset var(--dur-draw) var(--ease-sweep);
  }

  /* Inner-page fitted titles rise letter by letter inside the page slide (200ms base delay). */
  html.js:not(.motion-off):not(.intro-done) .page-title .ch {
    animation: char-rise var(--dur-hero) var(--ease-lock) calc(200ms + var(--i, 0) * 80ms) backwards;
  }

  /* Browsers without cross-document View Transitions: main rises in instead (SM4 fallback). */
  html.no-vt.js:not(.motion-off):not(.intro-done) main {
    animation: page-in var(--dur-reveal) var(--ease-lock) backwards;
  }

  /* Menu words rise in their masks, 80ms apart. */
  html.js:not(.motion-off) .menu[open] .menu-word {
    animation: char-rise var(--dur-reveal) var(--ease-lock) calc(60ms + var(--i, 0) * 80ms) backwards;
  }

  /* The one ambient DOM loop: the status dot, 8s period, after the intro, only on screen (main.js). */
  html.js:not(.motion-off) .status-dot.is-live::after {
    animation: status-pulse 8s var(--ease-drift) 3s infinite;
  }
}

/* ==========================================================================
   10. Media queries (mobile first)
   ========================================================================== */

@media (min-width: 480px) {
  .cta-side .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  :root {
    --cols: 8;
  }

  .btn {
    height: 3.5rem;
  }

  .cta-line,
  .h-line {
    display: block;
  }

  .footer-signoff {
    margin-bottom: var(--s-9);
  }

  .footer-grid > * {
    grid-column: span 4;
  }

  .footer-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  :root {
    --cols: 12;
    --header-h: 4.5rem;
  }

  html:not(.js) {
    --header-offset: var(--header-h);
  }

  html:not(.js) .site-header {
    position: fixed;
    height: var(--header-h);
  }

  /* No script, so no compact state: the strip is always on and content scrolls under a solid bar. */
  html:not(.js) .site-header::before {
    height: 100%;
    opacity: 1;
  }

  html:not(.js) .header-bar {
    flex-wrap: nowrap;
    padding-block: 0;
  }

  html:not(.js) .site-nav,
  .site-nav {
    display: block;
    flex-basis: auto;
    margin-inline-start: auto;
  }

  html.js .menu-button {
    display: none;
  }

  html.js .header-bar .motion-toggle {
    display: inline-flex;
  }

  /* The statement runs the full width; the action sits under its end. */
  .cta-title {
    grid-column: 1 / -1;
  }

  .cta-side {
    grid-column: 8 / -1;
    justify-items: end;
    text-align: end;
  }

  .footer-grid > *,
  .footer-grid > :last-child {
    grid-column: span 4;
  }
}

/* The OS setting wins: no motion toggle, and CSS animation and transition durations go to zero. */
@media (prefers-reduced-motion: reduce) {
  html.js .motion-toggle,
  html.js .header-bar .motion-toggle,
  html.js .menu .motion-toggle {
    display: none;
  }

  ::view-transition-old(root) {
    animation: none;
  }

  ::view-transition-new(root) {
    animation: vt-fade 160ms linear both;
    box-shadow: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}