/* ==========================================================================
   Contour — the structural stylesheet shared by every design.
   A design is tokens (the variables below), a layout family, a navigation style, a transition,
   a reveal, a background and a little CSS of its own. Nothing in here names a colour or a font
   directly: everything reads a variable, so the editor can change anything live.
   ========================================================================== */

:root {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #57544f;
  --line: rgba(17, 17, 17, 0.16);
  --accent: #e9504e;
  --accent-2: #3a62d6;
  --accent-3: #f7da52;
  --on-accent: #ffffff;
  --bf-ink: var(--ink);
  --bf-wash: var(--accent);
  --bg-line: var(--line);
  --bg-accent: var(--accent);

  --font-display: Georgia, serif;
  --font-body: system-ui, sans-serif;
  --font-label: ui-monospace, Menlo, monospace;

  --fs-base: 17px;
  --fs-display: clamp(3.5rem, 11vw, 12rem);
  --fs-h2: clamp(2rem, 3.8vw, 4.25rem);
  --fs-h3: clamp(1.25rem, 1.4vw, 1.6rem);
  --fs-lede: clamp(1.15rem, 1.3vw, 1.5rem);
  --fs-stat: clamp(3rem, 8vw, 8rem);
  --fs-statement: clamp(1.8rem, 3.4vw, 3.6rem);
  --fs-label: 0.72rem;
  --display-weight: 400;
  --display-style: normal;
  --display-case: none;
  --display-tracking: -0.02em;
  --display-leading: 0.92;
  --heading-weight: 400;
  --heading-case: none;
  --heading-tracking: -0.01em;
  --heading-leading: 1.05;
  --body-weight: 400;
  --body-leading: 1.55;
  --label-case: uppercase;
  --label-tracking: 0.12em;
  --label-weight: 400;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 36rem;
  --radius: 0px;
  --border: 1px;
  --gap: clamp(1rem, 2.2vw, 2.25rem);
  --mast-h: 4.5rem;
  --rail-w: 15rem;
  --page-top: calc(var(--mast-h) + clamp(1.5rem, 5vh, 4rem));
  --page-bottom: clamp(2rem, 6vh, 4.5rem);

  --t-dur: 700ms;
  --t-ease: cubic-bezier(0.65, 0, 0.25, 1);
  --r-dur: 800ms;
  --r-stagger: 70ms;
  --r-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dir: 1;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: var(--fs-base); }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--ink); color: var(--bg); }
.skip:focus { top: 1rem; }

/* ---------- layers ---------- */

.bg-layer, .bf-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bg-layer { z-index: 0; height: 100vh; height: 100lvh; bottom: auto; }   /* the tallest viewport: never resized by a phone's address bar */
.bf-layer { z-index: 40; }
#site { position: fixed; inset: 0; z-index: 1; }
.bg-css { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- typography roles ---------- */

.c-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
}
.c-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  text-wrap: balance;
}
.c-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--heading-weight);
  line-height: 1.2;
  letter-spacing: calc(var(--heading-tracking) / 2);
}
.c-lede { font-size: var(--fs-lede); line-height: 1.4; max-width: var(--measure); text-wrap: pretty; }
.c-body { max-width: var(--measure); text-wrap: pretty; }
.c-label, .c-kicker {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--label-weight);
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
  line-height: 1.5;
}
.c-kicker { color: var(--muted); }
.c-stat {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--display-weight);
  line-height: 0.9;
  letter-spacing: var(--display-tracking);
}
.c-statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: var(--heading-weight);
  line-height: 1.08;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}
.c-muted, .soft { color: var(--muted); }
.blank { color: var(--accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

/* ---------- controls ---------- */

.c-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.4em;
  border: var(--border) solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.c-button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.c-cta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.c-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.c-button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.c-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.c-link { border-bottom: var(--border) solid var(--line); }
.c-link:hover { border-color: currentColor; }
.c-arrow { display: inline-block; width: 1.4em; height: 0.7em; }
.c-arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */

.shell { position: absolute; inset: 0; }
.c-masthead {
  position: absolute;
  z-index: 20;
  top: 0; left: 0; right: 0;
  height: var(--mast-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.c-masthead > * { pointer-events: auto; }
.c-brand { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; letter-spacing: var(--heading-tracking); }
.c-brand svg { width: auto; height: 1.2em; overflow: visible; }
.c-brand svg path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.c-brand img { height: 1.6em; width: auto; }
.c-nav { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
.c-nav__link {
  position: relative;
  display: inline-flex;
  gap: 0.5em;
  align-items: baseline;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
  color: var(--muted);
  padding: 0.3em 0;
  transition: color 0.25s ease;
}
.c-nav__link:hover, .c-nav__link[aria-current="page"] { color: var(--ink); }
.c-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.15em;
  height: var(--border);
  background: currentColor;
}
.c-nav__n { opacity: 0.55; font-variant-numeric: tabular-nums; }
.c-nav__short { display: none; }
.nav-tight .c-nav__full { display: none; }
.nav-tight .c-nav__short { display: inline; }
.nav-tight .c-nav { gap: 1rem; }
.nav-tighter .c-nav__n { display: none; }
.nav-tighter [data-navstyle] .c-nav__link, .nav-tighter.c-nav__link { padding-left: 0.5em; padding-right: 0.5em; }
.c-nav__link { white-space: nowrap; }
.c-menu { display: none; font-family: var(--font-label); font-size: var(--fs-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); }

.c-pager {
  position: absolute;
  z-index: 20;
  right: var(--gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
}
.c-pager button { padding: 0.4em 0.2em; color: var(--muted); }
.c-pager button:hover { color: var(--ink); }
.c-pager button[disabled] { opacity: 0.25; pointer-events: none; }
.c-pager__count { font-variant-numeric: tabular-nums; }
.c-progress { position: absolute; z-index: 20; left: 0; top: 0; height: 2px; background: var(--accent); width: calc(var(--progress, 0) * 100%); transition: width var(--t-dur) var(--t-ease); }
[data-progress="off"] .c-progress { display: none; }
[data-pager="off"] .c-pager { display: none; }

/* ---------- pages ---------- */

.pages { position: absolute; inset: 0; overflow: hidden; }
.c-page { position: absolute; inset: 0; visibility: hidden; background: var(--page-bg, transparent); }
.c-page.is-active { visibility: visible; }
.page__scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.page__grid {
  position: relative;
  min-height: 100%;
  padding: var(--page-top) var(--gutter) var(--page-bottom);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--gap);
  align-content: center;
}
.blk { grid-column: 1 / -1; min-width: 0; max-width: 100%; }

/* ---------- blocks ---------- */

.c-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; color: var(--muted); }
.c-list { display: grid; gap: var(--gap); }
.c-item { display: grid; gap: 0.35rem; align-content: start; }
.c-item__n { color: var(--muted); font-variant-numeric: tabular-nums; }
.list--methods { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.list--methods .c-item { border-top: var(--border) solid var(--line); padding-top: 0.9rem; }
.list--steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.list--steps .c-item { border-top: var(--border) solid var(--line); padding-top: 0.9rem; }
.list--steps .c-stat { font-size: clamp(2rem, 3.6vw, 3.6rem); margin: 0.2rem 0; }
.c-callout { display: grid; gap: 0.6rem; align-content: start; }
.callout--band { background: var(--accent); color: var(--on-accent); padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--radius); }
.callout--band .c-label, .callout--band .c-kicker { color: inherit; opacity: 0.8; }
.c-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; color: var(--muted); border-top: var(--border) solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.c-footer a:hover { color: var(--ink); }
.c-email { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--label-tracking); color: var(--muted); }
.c-email:hover { color: var(--ink); }


/* ---------- figures ---------- */

.c-figure { position: relative; margin: 0; }
.fig--map { display: flex; flex-direction: column; gap: 0.6rem; }
/* the interactive map (assets/js/britain.js draws it; its settings are the editor's Interactive map section) */
.map { position: relative; height: var(--map-h, min(76vh, 46rem)); min-height: 16rem; background: var(--map-panel, transparent); border: 1px solid var(--map-panel-line, transparent); border-radius: var(--map-panel-radius, 0); }
.map.has-panel { overflow: hidden; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: manipulation; }
.map-perch { position: absolute; width: 0; height: 0; }
.map-probe { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* the preview under the cursor */
.map-tip { position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 0.2rem; padding: 0.45rem 0.65rem; min-width: 7rem;
  background: var(--mh-bg); color: var(--mh-ink); border: 1px solid var(--mh-line); border-radius: var(--mh-radius); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.45);
  font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.map-tip.on { opacity: 1; transform: none; }
.map-tip__k { color: var(--mh-muted); }
.map-tip__v { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.map-tip__v em { font-style: normal; font-family: var(--font-label); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--mh-muted); }
:is(.map-tip, .mh-rl) i { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; background: var(--mh-amber); }
:is(.map-tip, .mh-rl) i[data-l="g"] { background: var(--mh-green); }
:is(.map-tip, .mh-rl) i[data-l="r"] { background: var(--mh-red); }
/* the results card */
.map-hud { --u: calc(var(--mh-scale, 1) * 1rem); position: absolute; z-index: 2; width: min(var(--mh-w, 252px), calc(100% - 1.2rem)); display: grid; gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 0.85) calc(var(--u) * 0.95); background: var(--mh-bg); color: var(--mh-ink); border: 1px solid var(--mh-line); border-radius: var(--mh-radius);
  box-shadow: 0 18px 40px -22px rgba(4,8,24,0.55), 0 2px 6px rgba(4,8,24,0.08); font-family: var(--font-body); font-size: calc(var(--u) * 0.8); line-height: 1.35; text-align: left; }
.map-hud.no-shadow { box-shadow: none; }
.map-hud:empty, .map-hud[hidden] { display: none; }
.map-hud[data-place="top-right"] { top: 0.6rem; right: 0.6rem; }
.map-hud[data-place="top-left"] { top: 0.6rem; left: 0.6rem; }
.map-hud[data-place="bottom-right"] { bottom: 0.6rem; right: 0.6rem; }
.map-hud[data-place="bottom-left"] { bottom: 0.6rem; left: 0.6rem; }
.map-hud[data-place="below"] { position: relative; width: auto; }
.map-hud :is(.mh-label, dt), .mh-foot, .mh-runline, .mh-keys, .mh-sub { font-family: var(--font-label); font-size: calc(var(--u) * 0.56); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-muted); font-weight: 700; }
.mh-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; padding-bottom: calc(var(--u) * 0.55); border-bottom: 1px solid var(--mh-line); }
.mh-title { font-family: var(--font-label); font-size: calc(var(--u) * 0.6); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--mh-ink); }
.mh-rec { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-label); font-size: calc(var(--u) * 0.58); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mh-rec b { color: var(--mh-amber); }
.mh-rec[data-l="g"] b { color: var(--mh-green); }
.mh-rec[data-l="r"] b { color: var(--mh-red); }
.mh-lights { display: inline-flex; gap: 3px; padding: 3px 6px; border: 1px solid var(--mh-line); border-radius: 999px; }
.mh-lights i { width: 7px; height: 7px; border-radius: 50%; opacity: 0.18; }
.mh-lights .r { background: var(--mh-red); color: var(--mh-red); }
.mh-lights .a { background: var(--mh-amber); color: var(--mh-amber); }
.mh-lights .g { background: var(--mh-green); color: var(--mh-green); }
.mh-rec[data-l="r"] .r, .mh-rec[data-l="a"] .a, .mh-rec[data-l="g"] .g { opacity: 1; box-shadow: 0 0 6px currentColor; }
.mh-run { display: none; gap: 0.35rem; }
.map-hud.is-running .mh-run { display: grid; }
.map-hud.is-running .mh-rec { visibility: hidden; }
.mh-runline { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--mh-accent); }
.mh-prog { height: 3px; background: var(--mh-line); overflow: hidden; }
.mh-prog i { display: block; height: 100%; width: 0; background: var(--mh-accent); }
.map-hud :is(.mh-main, .mh-src, .mh-stats) { transition: opacity 0.3s ease; }
.map-hud.is-running :is(.mh-main, .mh-src, .mh-stats) { opacity: 0.35; }
.mh-main { display: grid; gap: 0.25rem; }
.mh-big { font-family: var(--font-display); font-weight: 500; font-size: calc(var(--u) * 1.85); line-height: 1.05; color: var(--mh-accent); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.mh-int, .mh-rint { position: relative; height: 10px; }
.mh-int { margin-top: 0.15rem; }
.mh-int::before, .mh-rint::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--mh-line); }
.mh-int i, .mh-rint i { position: absolute; top: 2px; bottom: 2px; background: color-mix(in srgb, var(--mh-accent) 35%, transparent); border-left: 1.5px solid var(--mh-accent); border-right: 1.5px solid var(--mh-accent); }
.mh-int i { transform-origin: center; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.map-hud.is-running .mh-int i { transform: scaleX(0); }
.mh-int b, .mh-rint b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mh-ink); }
.mh-int s, .mh-rint s { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed var(--mh-muted); }
.mh-sub { font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: calc(var(--u) * 0.62); }
.mh-src { display: grid; gap: 0.35rem; }
.mh-bar { display: flex; height: 9px; gap: 2px; }
.mh-bar i { flex: 0 1 0; min-width: 2px; transition: flex-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.map-hud.is-running .mh-bar i { flex-grow: 1 !important; opacity: 0.35; }
.mh-bar .own, .mh-keys .own { background: var(--mh-own); }
.mh-bar .rival, .mh-keys .rival { background: var(--mh-rival); }
.mh-bar .new, .mh-keys .new { background: var(--mh-new); }
.mh-keys { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-weight: 400; letter-spacing: 0.05em; }
.mh-keys span { display: inline-flex; align-items: center; gap: 0.3rem; }
.mh-keys i { width: 7px; height: 7px; flex: none; }
.mh-keys b { color: var(--mh-ink); font-weight: 700; }
.mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.8rem; margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--mh-line); }
.mh-stats div { display: grid; gap: 0.1rem; min-width: 0; align-content: start; }
.mh-stats dt { font-size: calc(var(--u) * 0.5); }
.mh-stats dd { margin: 0; font-family: var(--font-display); font-size: calc(var(--u) * 1.05); color: var(--mh-ink); font-variant-numeric: tabular-nums; }
.mh-foot { font-weight: 400; letter-spacing: 0.06em; }
.mh-rankhead { font-weight: 400; }
.mh-rank { list-style: none; margin: 0; padding: 0; display: grid; }
.mh-rank li { display: grid; grid-template-columns: 1.1rem 3.6rem minmax(2rem, 1fr) auto 2.2rem; align-items: center; gap: 0.4rem; padding: 0.42rem 0.3rem; border-bottom: 1px solid var(--mh-line); }
.mh-rank li.is-current { background: color-mix(in srgb, var(--mh-accent) 9%, transparent); }
.mh-rn { font-family: var(--font-display); font-size: calc(var(--u) * 0.9); color: var(--mh-accent); }
.mh-rl { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-label); font-size: calc(var(--u) * 0.55); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.mh-rv { white-space: nowrap; font-family: var(--font-display); font-size: calc(var(--u) * 0.85); font-variant-numeric: tabular-nums; text-align: right; }
.mh-rp { font-family: var(--font-label); font-size: calc(var(--u) * 0.6); font-weight: 700; text-align: right; color: var(--mh-muted); }
/* the legend */
.map-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.4rem; color: var(--muted); }
.map-legend__keys { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.map-legend i { display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.4em; vertical-align: -0.05em; border: 1.5px solid var(--map-rival, var(--ink)); border-radius: 50%; background: var(--map-rival-fill, transparent); }
.map-legend i.own { background: var(--map-own, var(--ink)); border-color: var(--map-own, var(--ink)); }
.map-legend i.hh { width: 0.3em; height: 0.3em; border: 0; border-radius: 0; background: var(--map-hh, var(--ink)); box-shadow: 0.45em 0.1em 0 var(--map-lit, var(--accent)), 0.2em -0.35em 0 var(--map-hh, var(--ink)); vertical-align: 0.15em; margin-right: 0.85em; }
.map-legend i.gain { border: 1.5px solid var(--map-catch, var(--accent)); background: color-mix(in srgb, var(--map-catch, var(--accent)) 22%, transparent); border-radius: 40% 60% 50% 45%; }
.map-legend i.loss { border: 0; border-radius: 0; height: 0.32em; width: 1.4em; vertical-align: 0.15em; background: linear-gradient(90deg, var(--map-flow-own, #e0702e) 0 30%, transparent 30% 40%, var(--map-flow-rival, var(--accent)) 40% 65%, transparent 65% 75%, var(--map-flow-new, #2f86d0) 75%); }


.perch-dot { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ==========================================================================
   Navigation styles  (data-navstyle on .shell)
   ========================================================================== */

/* bar: the default above */

/* rail: a column on the left */
[data-navstyle="rail"] .c-masthead { right: auto; bottom: 0; width: var(--rail-w); height: auto; flex-direction: column; align-items: flex-start; padding: var(--gutter) 1.5rem; gap: 2.5rem; border-right: var(--border) solid var(--line); background: var(--rail-bg, transparent); }
[data-navstyle="rail"] .c-nav { flex-direction: column; align-items: flex-start; margin: 0; gap: 0.7rem; }
[data-navstyle="rail"] .pages { left: var(--rail-w); }
[data-navstyle="rail"] { --mast-h: 0rem; }
[data-navstyle="rail"] .c-nav__link[aria-current="page"]::after { left: -1.5rem; right: auto; top: 0.3em; bottom: 0.3em; width: 3px; height: auto; }

/* bottom: a bar along the foot */
[data-navstyle="bottom"] .c-masthead { top: auto; bottom: 0; border-top: var(--border) solid var(--line); background: var(--bg); }
[data-navstyle="bottom"] { --page-top: clamp(2rem, 7vh, 5rem); --page-bottom: calc(var(--mast-h) + 2rem); }
[data-navstyle="bottom"] .c-pager { bottom: calc(var(--mast-h) + 1rem); }

/* corner: brand and an index button; the nav is a full-screen overlay */
[data-navstyle="corner"] .c-menu, [data-navstyle="dots"] .c-menu { display: inline-block; margin-left: auto; }
[data-navstyle="corner"] .c-nav {
  position: fixed; inset: 0; z-index: -1; margin: 0;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.2rem;
  padding: var(--mast-h) var(--gutter);
  background: var(--menu-bg, var(--bg));
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
}
[data-navstyle="corner"] .c-nav .c-nav__link { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 5rem); text-transform: none; letter-spacing: var(--heading-tracking); color: var(--ink); line-height: 1.05; }
[data-navstyle="corner"] .c-nav .c-nav__link:hover { color: var(--accent); }
[data-navstyle="corner"] .c-nav .c-nav__n { font-family: var(--font-label); font-size: var(--fs-label); align-self: flex-start; margin-top: 0.8em; }
[data-navstyle="corner"].menu-open .c-nav { opacity: 1; visibility: visible; }
[data-navstyle="corner"] .c-nav__link[aria-current="page"]::after { display: none; }

/* dots: a vertical column of dots at the right edge */
[data-navstyle="dots"] .c-nav { position: fixed; right: calc(var(--gutter) * 0.6); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 0.9rem; margin: 0; }
[data-navstyle="dots"] .c-nav__link { width: 0.6rem; height: 0.6rem; padding: 0; border-radius: 50%; border: 1px solid var(--ink); font-size: 0; justify-content: flex-end; }
[data-navstyle="dots"] .c-nav__link[aria-current="page"] { background: var(--ink); }
[data-navstyle="dots"] .c-nav__link::before { content: attr(data-label); position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: var(--fs-label); white-space: nowrap; opacity: 0; transition: opacity 0.2s; color: var(--ink); }
[data-navstyle="dots"] .c-nav__link:hover::before { opacity: 1; }
[data-navstyle="dots"] .c-nav__link[aria-current="page"]::after { display: none; }
[data-navstyle="dots"] .c-menu { display: none; }

/* tabs: folder tabs along the top edge */
[data-navstyle="tabs"] .c-nav { gap: 0; align-self: flex-end; }
[data-navstyle="tabs"] .c-nav__link { padding: 0.7em 1.1em; border: var(--border) solid var(--line); border-bottom: 0; margin-left: calc(var(--border) * -1); border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); }
[data-navstyle="tabs"] .c-nav__link[aria-current="page"] { background: var(--bg); color: var(--ink); }
[data-navstyle="tabs"] .c-nav__link[aria-current="page"]::after { display: none; }
[data-navstyle="tabs"] .c-masthead { border-bottom: var(--border) solid var(--line); }

/* numbers: numbered index split across the top */
[data-navstyle="numbers"] .c-nav { gap: clamp(0.5rem, 1.1vw, 1.2rem); flex: 1; min-width: 0; justify-content: space-between; margin-left: 3rem; }
[data-navstyle="numbers"] .c-nav__link { flex-direction: column; gap: 0.1rem; min-width: 0; white-space: normal; line-height: 1.15; }
[data-navstyle="numbers"] .c-nav__n { opacity: 1; color: var(--ink); }
[data-navstyle="numbers"] .c-nav__link[aria-current="page"] { color: var(--accent); }
[data-navstyle="numbers"] .c-nav__link[aria-current="page"] .c-nav__n { color: var(--accent); }
[data-navstyle="numbers"] .c-nav__link[aria-current="page"]::after { display: none; }

/* index: a table-of-contents line under the brand, left aligned */
[data-navstyle="index"] .c-masthead { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem; height: auto; padding-top: 1.25rem; }
[data-navstyle="index"] .c-nav { margin: 0; gap: 0.2rem 1.1rem; flex-wrap: wrap; }
[data-navstyle="index"] { --mast-h: 5.5rem; }

/* none: brand only, the pager drives everything */
[data-navstyle="none"] .c-nav { display: none; }

@media (max-width: 860px) {
  .shell:not([data-navstyle="dots"]) .c-menu { display: inline-block; margin-left: auto; }
  .shell:not([data-navstyle="dots"]):not([data-navstyle="none"]) .c-nav {
    position: fixed; inset: 0; z-index: -1; margin: 0; width: auto; height: auto; transform: none;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem;
    padding: var(--mast-h) var(--gutter);
    background: var(--menu-bg, var(--bg));
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
  }
  .shell.menu-open:not([data-navstyle="dots"]) .c-nav { opacity: 1; visibility: visible; }
  .shell:not([data-navstyle="dots"]) .c-nav .c-nav__link { font-family: var(--font-display); font-size: 2rem; text-transform: none; letter-spacing: 0; color: var(--ink); border: 0; background: none; padding: 0.15em 0; }
  [data-navstyle="rail"] .c-masthead { width: auto; right: 0; bottom: auto; height: var(--mast-h); flex-direction: row; align-items: center; padding: 0 var(--gutter); border-right: 0; }
  [data-navstyle="rail"] .pages { left: 0; }
  [data-navstyle="rail"] { --mast-h: 4rem; }
  .page__grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
  html body .page__grid > .blk { grid-column: 1 / -1 !important; grid-row: auto !important; }
  [data-layout="board"] .r-list .c-item { grid-template-columns: minmax(0, 1fr) !important; gap: 0.2rem !important; }
  .c-display { font-size: min(var(--fs-display), 15vw) !important; }
  .c-h2 { font-size: min(var(--fs-h2), 9vw) !important; }
  .c-stat { font-size: min(var(--fs-stat), 16vw) !important; }
  .c-display, .c-h2, .c-statement { overflow-wrap: break-word; hyphens: auto; }
  [data-layout="diagonal"] .page__grid, [data-layout="diagonal"] .r-callout { transform: none !important; }
  .blk { transform: none !important; }
  .r-text { column-count: 1 !important; }
  .c-list { grid-template-columns: minmax(0, 1fr) !important; }
  .page__grid { padding-top: calc(var(--mast-h) + 1.5rem) !important; }
}

/* ==========================================================================
   Layout families  (data-layout on .shell)
   Blocks carry a role class: r-kicker r-title r-text r-list r-callout r-figure r-actions r-meta r-note
   ========================================================================== */

/* editorial — a margin column for labels, a wide column for the argument */
[data-layout="editorial"] .r-kicker { grid-column: 1 / span 3; }
[data-layout="editorial"] :where(.blk:not(.r-kicker)) { grid-column: 4 / -1; }
[data-layout="editorial"] .page--home :where(.blk) { grid-column: 1 / -1; }
[data-layout="editorial"] .page--home .r-text, [data-layout="editorial"] .page--home .r-actions { grid-column: 7 / -1; }
[data-layout="editorial"] .page--how .r-list, [data-layout="editorial"] .page--how .r-actions { grid-column: 1 / span 5; }
[data-layout="editorial"] .page--how .r-figure { grid-column: 6 / -1; grid-row: 2 / span 3; }

/* swiss — asymmetric, flush left, everything hung from a strict grid */
[data-layout="swiss"] .page__grid { align-content: start; }
[data-layout="swiss"] .r-kicker { grid-column: 1 / span 2; }
[data-layout="swiss"] .r-title { grid-column: 3 / -1; }
[data-layout="swiss"] .r-text, [data-layout="swiss"] .r-actions, [data-layout="swiss"] .r-meta, [data-layout="swiss"] .r-note { grid-column: 3 / span 5; }
[data-layout="swiss"] .r-list { grid-column: 3 / -1; }
[data-layout="swiss"] .r-callout { grid-column: 8 / -1; grid-row: span 2; }
[data-layout="swiss"] .r-figure { grid-column: 8 / -1; grid-row: 2 / span 4; }
[data-layout="swiss"] .page--home .r-callout { grid-column: 9 / -1; grid-row: 3; align-self: end; }
[data-layout="swiss"] .page--how .r-list, [data-layout="swiss"] .page--how .r-actions { grid-column: 3 / span 5; }
[data-layout="swiss"] .blk:not(.r-kicker):not(.r-title) { border-top: var(--border) solid var(--ink); padding-top: 0.75rem; }

/* columns — a newspaper: full-width headlines, text set in columns */
[data-layout="columns"] .page__grid { align-content: start; }
[data-layout="columns"] .r-kicker { grid-column: 1 / -1; border-bottom: var(--border) solid var(--ink); padding-bottom: 0.4rem; }
[data-layout="columns"] .r-title { grid-column: 1 / -1; }
[data-layout="columns"] .r-text { grid-column: 1 / span 8; column-count: 2; column-gap: var(--gap); column-rule: var(--border) solid var(--line); }
[data-layout="columns"] .r-text .c-body, [data-layout="columns"] .r-text .c-lede { max-width: none; }
[data-layout="columns"] .r-callout, [data-layout="columns"] .r-note { grid-column: 9 / -1; border-left: var(--border) solid var(--line); padding-left: var(--gap); }
[data-layout="columns"] .r-list { grid-column: 1 / -1; }
[data-layout="columns"] .r-figure { grid-column: 1 / span 7; grid-row: span 4; }
[data-layout="columns"] .page--how .r-list, [data-layout="columns"] .page--how .r-actions { grid-column: 8 / -1; }
[data-layout="columns"] .page--how .list--steps { grid-template-columns: 1fr; }
[data-layout="columns"] .r-actions, [data-layout="columns"] .r-meta { grid-column: 1 / -1; }

/* split — the left half holds the page's title still; the right half carries the rest */
[data-layout="split"] .page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; column-gap: calc(var(--gap) * 2); }
[data-layout="split"] .r-kicker, [data-layout="split"] .r-title { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
[data-layout="split"] .r-title { margin-top: calc(var(--fs-label) * 1.6 + 1.2rem); }
[data-layout="split"] .blk:not(.r-kicker):not(.r-title) { grid-column: 2; }
[data-layout="split"] .page__grid { align-content: start; padding-top: calc(var(--page-top) + 4vh); }
[data-layout="split"] .list--steps { grid-template-columns: 1fr; }
[data-layout="split"] .list--methods { grid-template-columns: 1fr 1fr; }

/* centered — one column down the middle */
[data-layout="centered"] .page__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; max-width: 60rem; margin: 0 auto; }
[data-layout="centered"] .c-lede, [data-layout="centered"] .c-body { margin-left: auto; margin-right: auto; }
[data-layout="centered"] .c-actions, [data-layout="centered"] .c-meta { justify-content: center; }
[data-layout="centered"] .r-list, [data-layout="centered"] .r-figure { width: 100%; text-align: left; }

/* poster — the title owns the page; everything else keeps to the corners */
[data-layout="poster"] .page__grid { grid-template-rows: auto 1fr auto auto; align-content: stretch; }
[data-layout="poster"] .r-kicker { grid-column: 1 / span 6; align-self: start; }
[data-layout="poster"] .r-title { grid-column: 1 / -1; align-self: center; }
[data-layout="poster"] .r-title .c-h2 { font-size: calc(var(--fs-h2) * 1.3); line-height: 0.95; }
[data-layout="poster"] .blk:not(.r-kicker):not(.r-title) { grid-column: span 6; align-self: end; }
[data-layout="poster"] .r-list, [data-layout="poster"] .r-figure { grid-column: 1 / -1; }
[data-layout="poster"] .page--home .r-title .c-display { font-size: calc(var(--fs-display) * 1.25); }

/* stack — each block framed like a card on a table */
[data-layout="stack"] .page__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin: 0 auto; align-content: start; }
[data-layout="stack"] .blk:not(.r-kicker):not(.r-title) { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.4vw, 2rem); box-shadow: var(--card-shadow, none); }
[data-layout="stack"] .list--methods, [data-layout="stack"] .list--steps { grid-template-columns: 1fr 1fr; }

/* board — lists become ruled tables, the rest sits above them */
[data-layout="board"] .page__grid { align-content: start; }
[data-layout="board"] .r-kicker { grid-column: 1 / span 3; }
[data-layout="board"] .r-title { grid-column: 1 / -1; }
[data-layout="board"] .r-text, [data-layout="board"] .r-actions, [data-layout="board"] .r-meta { grid-column: 1 / span 7; }
[data-layout="board"] .r-callout, [data-layout="board"] .r-note { grid-column: 8 / -1; }
[data-layout="board"] .r-list { grid-column: 1 / -1; }
[data-layout="board"] .r-list .c-list { grid-template-columns: 1fr !important; gap: 0; }
[data-layout="board"] .r-list .c-item { grid-template-columns: 6rem minmax(0, 1.2fr) minmax(0, 2fr); align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-top: var(--border) solid var(--line); }
[data-layout="board"] .r-list .c-item > :only-child { grid-column: 1 / -1; }
[data-layout="board"] .r-figure { grid-column: 1 / -1; }

/* margin — a main column with notes in a wide right margin */
[data-layout="margin"] .page__grid { align-content: start; }
[data-layout="margin"] .blk { grid-column: 1 / span 8; }
[data-layout="margin"] .r-kicker, [data-layout="margin"] .r-note, [data-layout="margin"] .r-callout, [data-layout="margin"] .r-meta { grid-column: 9 / -1; }
[data-layout="margin"] .r-kicker { grid-row: 1; }
[data-layout="margin"] .r-title { grid-row: 1; }
[data-layout="margin"] .r-note, [data-layout="margin"] .r-callout { border-left: var(--border) solid var(--line); padding-left: 1rem; font-size: 0.92em; }
[data-layout="margin"] .r-note .c-statement, [data-layout="columns"] .r-note .c-statement, [data-layout="board"] .r-note .c-statement { font-size: calc(var(--fs-h3) * 1.2); }

/* mosaic — every block a tile of a grid; tiles take the accent colours in turn */
[data-layout="mosaic"] .page__grid { gap: var(--tile-gap, var(--gap)); align-content: stretch; grid-auto-rows: minmax(8rem, auto); }
[data-layout="mosaic"] .blk { grid-column: span 6; padding: clamp(1rem, 2vw, 1.8rem); background: var(--surface); border-radius: var(--radius); }
[data-layout="mosaic"] .r-title { grid-column: span 12; }
[data-layout="mosaic"] .r-kicker { grid-column: span 4; background: var(--accent); color: var(--on-accent); }
[data-layout="mosaic"] .r-kicker .c-kicker { color: inherit; }
[data-layout="mosaic"] .r-kicker + .r-title { grid-column: span 8; }
[data-layout="mosaic"] .r-callout { background: var(--accent-2); color: var(--on-accent); }
[data-layout="mosaic"] .r-callout .c-label { color: inherit; }
[data-layout="mosaic"] .r-list, [data-layout="mosaic"] .r-figure { grid-column: span 12; }
[data-layout="mosaic"] .r-actions { background: var(--accent-3); }

/* map — a figure owns the right of the page; the text floats beside it in panels */
[data-layout="map"] .page__grid { align-content: center; }
[data-layout="map"] :where(.blk:not(.r-figure)) { grid-column: 1 / span 6; background: var(--panel, var(--surface)); padding: 1rem 1.25rem; border: var(--border) solid var(--line); border-radius: var(--radius); }
[data-layout="map"] .r-kicker { justify-self: start; padding: 0.4rem 0.8rem !important; }
[data-layout="map"] .r-figure { grid-column: 7 / -1; grid-row: 1 / span 8; align-self: stretch; }
[data-layout="map"] .page--home .r-figure { min-height: 72vh; }
/* pages without a figure use the right half for their lists and callouts */
[data-layout="map"] .c-page:not(.page--home):not(.page--how) :is(.r-list, .r-callout) { grid-column: 7 / -1; }

/* diagonal — the whole composition leans */
[data-layout="diagonal"] .page__grid { transform: rotate(var(--lean, -4deg)) scale(0.94); transform-origin: 50% 50%; }
[data-layout="diagonal"] .r-kicker { grid-column: 1 / span 4; }
[data-layout="diagonal"] .r-title { grid-column: 1 / span 11; }
[data-layout="diagonal"] .r-text, [data-layout="diagonal"] .r-actions, [data-layout="diagonal"] .r-meta { grid-column: 5 / -1; }
[data-layout="diagonal"] .r-callout { grid-column: 1 / span 4; transform: rotate(calc(var(--lean, -4deg) * -2)); }
[data-layout="diagonal"] .r-list, [data-layout="diagonal"] .r-figure { grid-column: 2 / -1; }
[data-layout="diagonal"] .r-note { grid-column: 7 / -1; }

/* spread — two facing pages */
[data-layout="spread"] .page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); align-content: center; }
[data-layout="spread"] .page__grid::before { content: ""; position: absolute; left: 50%; top: var(--page-top); bottom: var(--page-bottom); width: var(--border); background: var(--line); }
[data-layout="spread"] .r-kicker, [data-layout="spread"] .r-title, [data-layout="spread"] .r-callout { grid-column: 1; }
[data-layout="spread"] .blk:not(.r-kicker):not(.r-title):not(.r-callout) { grid-column: 2; }
[data-layout="spread"] .r-title { grid-row: 2 / span 3; }
[data-layout="spread"] .list--methods, [data-layout="spread"] .list--steps { grid-template-columns: 1fr; }

/* ==========================================================================
   Page transitions  (data-transition on .shell; .is-entering / .is-leaving on pages)
   ========================================================================== */

.c-page.is-entering, .c-page.is-leaving { animation-duration: var(--t-dur); animation-timing-function: var(--t-ease); animation-fill-mode: both; }
.c-page.is-leaving { z-index: 1; pointer-events: none; }
.c-page.is-entering { z-index: 2; }

/* sheets: every part of the move is a variable (a design sets them; Northern Lights' editor shows them in
   Boxes › Transitions). The new page may start late and the old one finish early, as fractions of --t-dur. */
[data-transition="sheets"] .is-entering { animation-name: t-sheets-in; animation-duration: calc(var(--t-dur) * (1 - var(--sheet-in-start, 0))); animation-delay: calc(var(--t-dur) * var(--sheet-in-start, 0)); }
[data-transition="sheets"] .is-leaving { animation-name: t-sheets-out; animation-duration: calc(var(--t-dur) * var(--sheet-out-end, 1)); }
@keyframes t-sheets-in { from { opacity: var(--sheet-in-fade, 0); transform: translate(calc(var(--dir) * var(--sheet-in-x, 0px)), calc(var(--dir) * var(--sheet-in-y, 6vh))) scale(var(--sheet-in-scale, 1)); } }
@keyframes t-sheets-out { to { opacity: var(--sheet-out-fade, 0); transform: translate(calc(var(--dir) * var(--sheet-out-x, 0px)), calc(var(--dir) * var(--sheet-out-y, -4vh))) scale(var(--sheet-out-scale, 1)); } }

[data-transition="fade"] .is-entering { animation-name: t-fade-in; }
[data-transition="fade"] .is-leaving { animation-name: t-fade-out; }
@keyframes t-fade-in { from { opacity: 0; } }
@keyframes t-fade-out { to { opacity: 0; } }

[data-transition="rise"] .is-entering { animation-name: t-rise-in; }
[data-transition="rise"] .is-leaving { animation-name: t-rise-out; }
@keyframes t-rise-in { from { opacity: 0; transform: translateY(calc(var(--dir) * 6vh)); } }
@keyframes t-rise-out { to { opacity: 0; transform: translateY(calc(var(--dir) * -4vh)); } }

[data-transition="slide"] .is-entering { animation-name: t-slide-in; }
[data-transition="slide"] .is-leaving { animation-name: t-slide-out; }
@keyframes t-slide-in { from { transform: translateX(calc(var(--dir) * 100%)); } }
@keyframes t-slide-out { to { transform: translateX(calc(var(--dir) * -30%)); opacity: 0.4; } }

[data-transition="lift"] .is-entering { animation-name: t-lift-in; }
[data-transition="lift"] .is-leaving { animation-name: t-lift-out; }
@keyframes t-lift-in { from { transform: translateY(calc(var(--dir) * 100%)); } }
@keyframes t-lift-out { to { transform: translateY(calc(var(--dir) * -12%)) scale(0.96); opacity: 0.3; } }

[data-transition="wipe"] .is-entering { animation-name: t-wipe-in; }
[data-transition="wipe"] .is-leaving { animation-name: t-hold; }
@keyframes t-wipe-in { from { clip-path: inset(0 calc(50% + var(--dir) * 50%) 0 calc(50% - var(--dir) * 50%)); } to { clip-path: inset(0 0 0 0); } }
@keyframes t-hold { to { opacity: 1; } }

[data-transition="iris"] .is-entering { animation-name: t-iris-in; }
[data-transition="iris"] .is-leaving { animation-name: t-hold; }
@keyframes t-iris-in { from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }

@property --blind { syntax: "<length>"; inherits: false; initial-value: 0px; }
[data-transition="blinds"] .is-entering { animation-name: t-blinds-in; -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--blind), transparent var(--blind) 9vh); mask-image: repeating-linear-gradient(to bottom, #000 0 var(--blind), transparent var(--blind) 9vh); }
[data-transition="blinds"] .is-leaving { animation-name: t-hold; }
@keyframes t-blinds-in { from { --blind: 0px; } to { --blind: 9.2vh; } }

[data-transition="flip"] .pages { perspective: 1800px; }
[data-transition="flip"] .is-entering { animation-name: t-flip-in; transform-origin: 0 50%; backface-visibility: hidden; }
[data-transition="flip"] .is-leaving { animation-name: t-flip-out; transform-origin: 100% 50%; backface-visibility: hidden; }
@keyframes t-flip-in { 0%, 45% { transform: rotateY(calc(var(--dir) * 70deg)); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes t-flip-out { 0% { transform: none; } 55%, 100% { transform: rotateY(calc(var(--dir) * -70deg)); opacity: 0; } }

[data-transition="zoom"] .is-entering { animation-name: t-zoom-in; }
[data-transition="zoom"] .is-leaving { animation-name: t-zoom-out; }
@keyframes t-zoom-in { from { opacity: 0; transform: scale(0.92); } }
@keyframes t-zoom-out { to { opacity: 0; transform: scale(1.06); } }

[data-transition="blur"] .is-entering { animation-name: t-blur-in; }
[data-transition="blur"] .is-leaving { animation-name: t-blur-out; }
@keyframes t-blur-in { from { opacity: 0; filter: blur(14px); } }
@keyframes t-blur-out { to { opacity: 0; filter: blur(14px); } }
/* Phones and tablets: a lighter blur (a whole page blurred at 14px every frame is heavy on a phone's GPU). */
@keyframes t-blur-in-lite { from { opacity: 0; filter: blur(4px); } }
@keyframes t-blur-out-lite { to { opacity: 0; filter: blur(4px); } }
@media (pointer: coarse) {
  [data-transition="blur"] .is-entering { animation-name: t-blur-in-lite; }
  [data-transition="blur"] .is-leaving { animation-name: t-blur-out-lite; }
}

[data-transition="diagonal"] .is-entering { animation-name: t-diag-in; }
[data-transition="diagonal"] .is-leaving { animation-name: t-hold; }
@keyframes t-diag-in { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 50% { clip-path: polygon(0 0, 120% 0, 0 120%, 0 120%); } to { clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%); } }

[data-transition="curtain"] .is-entering { animation-name: t-curtain-in; }
[data-transition="curtain"] .is-leaving { animation-name: t-hold; }
@keyframes t-curtain-in { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }

[data-transition="shutter"] .is-entering { animation-name: t-shutter-in; }
[data-transition="shutter"] .is-leaving { animation-name: t-hold; }
@keyframes t-shutter-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

[data-transition="cut"] .is-entering, [data-transition="cut"] .is-leaving { animation: none; }

[data-transition="steps"] .is-entering { animation-name: t-fade-in; animation-timing-function: steps(5, end); }
[data-transition="steps"] .is-leaving { animation-name: t-fade-out; animation-timing-function: steps(5, end); }

/* track: pages side by side on one strip */
[data-transition="track"] .c-page { visibility: visible; transform: translateX(calc((var(--i) - var(--cur)) * 100%)); transition: transform var(--t-dur) var(--t-ease); }
[data-transition="track"] .c-page.is-entering, [data-transition="track"] .c-page.is-leaving { animation: none; }

/* cover: each page slides over the last, which sinks back a little */
[data-transition="cover"] .c-page { visibility: visible; background: var(--page-bg, var(--bg)); transform: translateY(calc(clamp(0, var(--i) - var(--cur), 1) * 100%)) scale(calc(1 - clamp(0, var(--cur) - var(--i), 1) * 0.06)); transition: transform var(--t-dur) var(--t-ease), filter var(--t-dur) var(--t-ease); z-index: var(--i); }
[data-transition="cover"] .c-page.is-before { filter: brightness(0.9); }
[data-transition="cover"] .c-page.is-far { visibility: hidden; }
[data-transition="cover"] .c-page.is-entering, [data-transition="cover"] .c-page.is-leaving { animation: none; }

/* ==========================================================================
   Reveals  (data-reveal on .shell; .rv items inside a page, .is-in when shown)
   ========================================================================== */

.rv { transition-property: opacity, transform, clip-path, filter; transition-duration: var(--r-dur); transition-timing-function: var(--r-ease); transition-delay: calc(var(--rv-i, 0) * var(--r-stagger)); }
.rv.is-in { opacity: 1; transform: none; clip-path: none; filter: none; }
/* the clipping reveals open beyond the box, so anything a design draws outside a block stays visible */
:is([data-reveal="mask"], [data-reveal="clip"]) .rv.is-in { clip-path: inset(-2rem -16rem -2rem -16rem); }

[data-reveal="fade"] .rv:not(.is-in) { opacity: 0; }
[data-reveal="rise"] .rv:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }
[data-reveal="sink"] .rv:not(.is-in) { opacity: 0; transform: translateY(-1.25rem); }
[data-reveal="slide"] .rv:not(.is-in) { opacity: 0; transform: translateX(-2rem); }
[data-reveal="mask"] .rv:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(0.6rem); }
[data-reveal="blur"] .rv:not(.is-in) { opacity: 0; filter: blur(10px); }
[data-reveal="scale"] .rv:not(.is-in) { opacity: 0; transform: scale(0.94); }
[data-reveal="skew"] .rv:not(.is-in) { opacity: 0; transform: translateY(1rem) skewY(3deg); }
[data-reveal="steps"] .rv { transition-timing-function: steps(4, end); }
[data-reveal="steps"] .rv:not(.is-in) { opacity: 0; }
[data-reveal="none"] .rv { transition: none; }

/* letter and word reveals split the headings into spans */
.ch, .wd { display: inline-block; white-space: pre; transition: opacity var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease), filter var(--r-dur) var(--r-ease); transition-delay: calc(var(--rv-i, 0) * var(--r-stagger) + var(--ci, 0) * 22ms); }
.wd { white-space: normal; }
.ch-word { display: inline-block; white-space: nowrap; }
[data-reveal="letters"] .rv:not(.is-in) .ch, [data-reveal="words"] .rv:not(.is-in) .wd { opacity: 0; transform: translateY(0.45em) rotate(4deg); }
[data-reveal="letters"] .rv:not(.is-in):not(:has(.ch)), [data-reveal="words"] .rv:not(.is-in):not(:has(.wd)) { opacity: 0; transform: translateY(1rem); }
[data-reveal="type"] .rv .ch { transition-duration: 0s; transition-delay: calc(var(--rv-i, 0) * var(--r-stagger) + var(--ci, 0) * 28ms); }
[data-reveal="type"] .rv:not(.is-in) .ch { opacity: 0; }
[data-reveal="type"] .rv:not(.is-in):not(:has(.ch)) { opacity: 0; }

/* ==========================================================================
   Decor (data-decor tokens on .shell)
   ========================================================================== */

.decor-crop .page__grid::after {
  content: ""; position: absolute; inset: calc(var(--page-top) - 1.5rem) calc(var(--gutter) - 1rem) calc(var(--page-bottom) - 1.5rem);
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1.2rem 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 1.2rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1.2rem 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 1.2rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 1.2rem 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 1.2rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 1.2rem 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 1.2rem no-repeat;
  opacity: 0.6;
}
.decor-frame .page__grid { outline: var(--border) solid var(--line); outline-offset: calc(var(--gutter) * -0.5); }
.decor-folio .c-page::after { content: attr(data-folio); position: absolute; left: var(--gutter); bottom: 1rem; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--muted); pointer-events: none; }
.decor-dropcap .r-text .c-body:first-child::first-letter { float: left; font-family: var(--font-display); font-size: 3.4em; line-height: 0.8; padding: 0.08em 0.1em 0 0; color: var(--accent); }
.decor-rules .blk + .blk { border-top: var(--border) solid var(--line); padding-top: var(--gap); }
.decor-invert-home .page--home { --page-bg: var(--ink); color: var(--bg); }
.decor-invert-home .page--home .c-kicker, .decor-invert-home .page--home .c-label { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.decor-invert-contact .page--contact { --page-bg: var(--accent-2); color: var(--on-accent); }
.decor-invert-contact .page--contact .c-kicker, .decor-invert-contact .page--contact .c-label, .decor-invert-contact .page--contact .c-footer, .decor-invert-contact .page--contact .c-email { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.decor-invert-contact .page--contact .c-cta { background: var(--on-accent); color: var(--accent-2); border-color: var(--on-accent); }
.decor-invert-contact .page--contact .c-footer { border-color: color-mix(in srgb, var(--on-accent) 30%, transparent); }
.decor-shadow .blk:not(.r-kicker):not(.r-title) { box-shadow: 0.5rem 0.5rem 0 var(--ink); }
.decor-caps .c-h2, .decor-caps .c-display, .decor-caps .c-h3 { text-transform: uppercase; }
.decor-tabular { font-variant-numeric: tabular-nums; }
.decor-outline .c-display { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.decor-underline .c-h2 .known, .decor-underline .c-display span { background: linear-gradient(var(--accent-3), var(--accent-3)) 0 88% / 100% 0.28em no-repeat; }

.stamp {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 0.35em 0.7em; border: 3px solid currentColor; border-radius: 0.3em;
  font-family: var(--font-label); font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); opacity: 0.75; transform: rotate(var(--rot, -12deg)); mix-blend-mode: multiply;
}
.barcode { display: block; height: 3rem; width: 14rem; max-width: 100%; }
.barcode rect { fill: currentColor; }
.flap { display: inline-block; min-width: 0.62em; padding: 0 0.04em; margin: 0 0.02em; text-align: center; background: var(--flap-bg, #1b1b1b); color: var(--flap-ink, #f5d547); border-radius: 0.06em; position: relative; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); }
.flap.sp { background: transparent; }
.flap-word { display: inline-block; white-space: nowrap; }
.flap.sp::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .ch, .wd { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .c-page.is-entering, .c-page.is-leaving { animation: none !important; }
}

/* ==========================================================================
   Home-page artworks
   ========================================================================== */

.hero-art { position: relative; width: 100%; height: 100%; min-height: 14rem; color: var(--ink); }
.hero-art svg, .hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-coast { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.art-iso { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.35; vector-effect: non-scaling-stroke; }
.art-iso--major { stroke: var(--accent); opacity: 0.7; }
.art-ring { fill: none; stroke: currentColor; stroke-width: 0.6; opacity: 0.5; transform-origin: 0 0; animation: art-ring 4.8s linear infinite; animation-delay: calc(var(--k) * -0.68s); vector-effect: non-scaling-stroke; }
.art-site { fill: var(--accent); }
@keyframes art-ring { from { transform: scale(0.15); opacity: 0.9; } to { transform: scale(1.1); opacity: 0; } }
.art--counter { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; min-height: 8rem; }
.art-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   More layout families
   ========================================================================== */

/* bento: rounded tiles of different sizes */
[data-layout="bento"] .page__grid { align-content: start; grid-auto-flow: row dense; gap: var(--tile-gap, 0.75rem); }
[data-layout="bento"] .blk { grid-column: span 4; background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 1.8vw, 1.75rem); }
[data-layout="bento"] .r-kicker { grid-column: 1 / -1; background: none; border: 0; padding: 0 0.2rem; }
[data-layout="bento"] .r-title { grid-column: span 8; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 14rem; }
[data-layout="bento"] .r-text { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; }
[data-layout="bento"] .r-callout { background: var(--accent); color: var(--on-accent); border-color: transparent; }
[data-layout="bento"] .r-callout .c-label { color: inherit; opacity: 0.8; }
[data-layout="bento"] .r-note { grid-column: span 8; }
[data-layout="bento"] .r-list { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
[data-layout="bento"] .r-list .c-list { gap: var(--tile-gap, 0.75rem); }
[data-layout="bento"] .r-list .c-item { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 1.6vw, 1.5rem); border-top: var(--border) solid var(--line); }
[data-layout="bento"] .r-list .list-label { margin: 0 0 0.6rem 0.2rem; }
[data-layout="bento"] .r-figure { grid-column: span 8; grid-row: span 3; }
[data-layout="bento"] .page--home .r-figure { grid-column: span 4; }
[data-layout="bento"] .page--home .r-actions { display: flex; align-items: center; }
[data-layout="bento"] .page--contact .r-title { grid-column: 1 / -1; min-height: 0; }

/* hero: oversized titles across the page, the rest in a strip underneath */
[data-layout="hero"] .page__grid { align-content: end; }
[data-layout="hero"] .blk { grid-column: span 4; }
[data-layout="hero"] .r-kicker { grid-column: 1 / -1; }
[data-layout="hero"] .r-title { grid-column: 1 / -1; margin-bottom: 1vh; }
[data-layout="hero"] .r-title .c-h2 { font-size: calc(var(--fs-h2) * 1.55); line-height: 0.95; max-width: 22ch; }
[data-layout="hero"] .page--home .r-title .c-display { font-size: calc(var(--fs-display) * 1.2); }
[data-layout="hero"] .r-list, [data-layout="hero"] .r-figure { grid-column: 1 / -1; }
[data-layout="hero"] .r-text, [data-layout="hero"] .r-note { grid-column: span 6; }
[data-layout="hero"] .blk:not(.r-kicker):not(.r-title) { border-top: var(--border) solid var(--line); padding-top: 0.9rem; }

/* dashboard: every block a labelled panel */
[data-layout="dashboard"] .page__grid { align-content: start; gap: var(--tile-gap, 0.75rem); }
[data-layout="dashboard"] .blk { grid-column: span 6; position: relative; background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: 2.4rem clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.6vw, 1.4rem); }
[data-layout="dashboard"] .blk::before { content: attr(data-blk); position: absolute; left: clamp(1rem, 1.6vw, 1.4rem); top: 0.85rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
[data-layout="dashboard"] .blk::after { content: ""; position: absolute; right: 1rem; top: 1.05rem; width: 1.1rem; height: 0.25rem; background: radial-gradient(circle, var(--muted) 0.12rem, transparent 0.13rem) 0 50% / 0.4rem 0.25rem repeat-x; opacity: 0.7; }
[data-layout="dashboard"] .r-kicker { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
[data-layout="dashboard"] .r-kicker::before, [data-layout="dashboard"] .r-kicker::after { display: none; }
[data-layout="dashboard"] .r-title { grid-column: span 8; }
[data-layout="dashboard"] .r-callout { grid-column: span 4; }
[data-layout="dashboard"] .r-list { grid-column: 1 / -1; }
[data-layout="dashboard"] .r-figure { grid-column: span 7; grid-row: span 3; }
[data-layout="dashboard"] .page--home .r-figure { grid-column: span 6; grid-row: span 2; }

/* stagger: blocks zigzag left and right */
[data-layout="stagger"] .page__grid { align-content: start; }
[data-layout="stagger"] .blk { grid-column: 1 / span 7; }
[data-layout="stagger"] .blk:nth-child(even) { grid-column: 6 / -1; }
[data-layout="stagger"] .r-title { grid-column: 1 / span 11 !important; }
[data-layout="stagger"] .r-list, [data-layout="stagger"] .r-figure { grid-column: 2 / -1 !important; }
[data-layout="stagger"] .r-kicker { grid-column: 1 / -1 !important; }

/* window: each page in a rounded window inset from the edges */
[data-layout="window"] .page__scroll {
  inset: calc(var(--mast-h) + 0.25rem) var(--win-inset, clamp(0.6rem, 1.6vw, 1.5rem)) var(--win-inset, clamp(0.6rem, 1.6vw, 1.5rem));
  border: var(--border) solid var(--line); border-radius: calc(var(--radius) + 0.75rem);
  background: var(--surface); box-shadow: var(--card-shadow, 0 30px 80px rgba(0, 0, 0, 0.14));
}
[data-layout="window"] .page__grid { padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 4rem); }
[data-layout="window"] .blk { grid-column: 1 / span 8; }
[data-layout="window"] .r-callout, [data-layout="window"] .r-note, [data-layout="window"] .r-meta { grid-column: 9 / -1; }
[data-layout="window"] .r-title, [data-layout="window"] .r-list, [data-layout="window"] .r-figure { grid-column: 1 / -1; }
[data-layout="window"][data-navstyle="rail"] .page__scroll { inset: var(--win-inset, 1rem); }
[data-layout="window"][data-navstyle="bottom"] .page__scroll, [data-layout="window"][data-navstyle="dock"] .page__scroll { inset: var(--win-inset, 1rem) var(--win-inset, 1rem) calc(var(--mast-h) + 0.5rem); }
[data-layout="window"][data-navstyle="dock"] .page__scroll { bottom: 5rem; }

/* sheets: blocks stacked as overlapping sheets */
[data-layout="sheets"] .page__grid { grid-template-columns: minmax(0, 1fr); max-width: 54rem; margin: 0 auto; align-content: start; row-gap: 0; }
[data-layout="sheets"] .blk:not(.r-kicker) { position: relative; background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 2rem); margin-top: -0.6rem; box-shadow: var(--card-shadow, 0 -6px 24px rgba(0, 0, 0, 0.07)); rotate: -0.7deg; }
[data-layout="sheets"] .blk:not(.r-kicker):nth-child(even) { rotate: 0.6deg; translate: 0.9rem 0; }
[data-layout="sheets"] .r-kicker { margin-bottom: 1rem; }
[data-layout="sheets"] .list--methods, [data-layout="sheets"] .list--steps { grid-template-columns: 1fr 1fr; }

/* vertical: titles run up the left edge */
[data-layout="vertical"] .page__grid { grid-template-columns: auto repeat(11, minmax(0, 1fr)); align-content: center; }
[data-layout="vertical"] .r-title {
  grid-column: 1; grid-row: 1 / span 12; align-self: start;
  height: calc(100vh - var(--page-top) - var(--page-bottom) - 1rem); max-height: 52rem;
  writing-mode: vertical-rl; rotate: 180deg; margin-right: clamp(1rem, 3vw, 3rem);
}
[data-layout="vertical"] .r-title .c-h2 { font-size: min(var(--fs-h2), 6.2vh); line-height: 1; }
[data-layout="vertical"] .page--home .r-title .c-display { font-size: min(var(--fs-display), 17vh); }
[data-layout="vertical"] .blk:not(.r-title) { grid-column: 2 / span 7; }
[data-layout="vertical"] .r-callout, [data-layout="vertical"] .r-note, [data-layout="vertical"] .r-meta { grid-column: 9 / -1; }
[data-layout="vertical"] .r-list, [data-layout="vertical"] .r-figure { grid-column: 2 / -1; }
@media (max-width: 860px) {
  [data-layout="vertical"] .r-title { writing-mode: horizontal-tb; rotate: none; height: auto; margin: 0; }
  [data-layout="sheets"] .blk { rotate: none !important; translate: none !important; }
  [data-layout="window"] .page__scroll { inset: calc(var(--mast-h)) 0.4rem 0.4rem; }
}

/* "Our solution" in the new families */
@media (min-width: 861px) {
  [data-layout="dashboard"] .page--how .r-list, [data-layout="dashboard"] .page--how .r-actions { grid-column: span 5; }
  [data-layout="dashboard"] .page--how .r-title { grid-column: span 5; }
  [data-layout="dashboard"] .page--how .r-figure { grid-column: 6 / -1; grid-row: 2 / span 4; }
  [data-layout="dashboard"] .page--how .list--steps { grid-template-columns: 1fr; }
  [data-layout="vertical"] .page--how .blk:not(.r-title):not(.r-figure) { grid-column: 2 / span 5; }
  [data-layout="vertical"] .page--how .r-figure { grid-column: 7 / -1; grid-row: 1 / span 6; position: sticky; top: 0; align-self: start; }
  [data-layout="vertical"] .page--how .list--steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   More navigation styles
   ========================================================================== */

/* pill: the links in a floating rounded pill */
[data-navstyle="pill"] .c-nav {
  margin: 0 auto; padding: 0.3rem; gap: 0.1rem; border: var(--border) solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
[data-navstyle="pill"] .c-nav__link { padding: 0.5em 0.95em; border-radius: 999px; transition: background-color 0.25s ease, color 0.25s ease; }
[data-navstyle="pill"] .c-nav__link:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-navstyle="pill"] .c-nav__link[aria-current="page"] { background: var(--ink); color: var(--bg); }
[data-navstyle="pill"] .c-nav__link[aria-current="page"]::after { display: none; }
[data-navstyle="pill"] .c-masthead::after { content: ""; width: 5rem; flex: none; }

/* dock: a floating dock at the foot */
[data-navstyle="dock"] .c-nav {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0; z-index: 25;
  padding: 0.35rem; gap: 0.2rem; border: var(--border) solid var(--line); border-radius: calc(var(--radius) + 1rem);
  background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
[data-navstyle="dock"] .c-nav__link { padding: 0.6em 0.85em; border-radius: calc(var(--radius) + 0.6rem); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s; }
[data-navstyle="dock"] .c-nav__link:hover { transform: translateY(-5px) scale(1.08); background: color-mix(in srgb, var(--ink) 8%, transparent); }
[data-navstyle="dock"] .c-nav__link[aria-current="page"] { background: var(--ink); color: var(--bg); }
[data-navstyle="dock"] .c-nav__link[aria-current="page"]::after { display: none; }
[data-navstyle="dock"] .c-nav__full { display: none; }
[data-navstyle="dock"] .c-nav__short { display: inline; }
[data-navstyle="dock"] .c-nav__n { display: none; }
[data-navstyle="dock"] { --page-bottom: 6.5rem; }
[data-navstyle="dock"] .c-pager { bottom: 1.4rem; }
[data-navstyle="dock"] .decor-folio .c-page::after { bottom: 1.6rem; }

/* command: a palette opened from a search-style button, or Ctrl/Cmd K */
@media (min-width: 861px) {
  [data-navstyle="command"] .c-menu {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; margin-left: auto; min-width: 15rem;
    padding: 0.55em 0.8em; border: var(--border) solid var(--line); border-radius: calc(var(--radius) + 0.4rem);
    background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); font-size: 0;
  }
  [data-navstyle="command"] .c-menu::before { content: "Jump to a page\2026"; font-size: var(--fs-label); }
  [data-navstyle="command"] .c-menu::after { content: "\2318 K"; font-size: var(--fs-label); padding: 0.1em 0.45em; border: var(--border) solid var(--line); border-radius: 0.3rem; }
  [data-navstyle="command"] .c-nav {
    position: fixed; left: 50%; top: 16vh; width: min(34rem, 90vw); margin: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0.1rem; padding: 0.5rem;
    background: var(--surface); border: var(--border) solid var(--line); border-radius: calc(var(--radius) + 0.75rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 100vmax rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden; transform: translateX(-50%) scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  [data-navstyle="command"].menu-open .c-nav { opacity: 1; visibility: visible; transform: translateX(-50%); }
  [data-navstyle="command"] .c-nav::before { content: "Pages"; display: block; padding: 0.5rem 0.75rem 0.6rem; font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--label-tracking); text-transform: var(--label-case); color: var(--muted); border-bottom: var(--border) solid var(--line); margin-bottom: 0.3rem; }
  [data-navstyle="command"] .c-nav__link { justify-content: space-between; flex-direction: row-reverse; padding: 0.65rem 0.75rem; border-radius: calc(var(--radius) + 0.35rem); font-size: calc(var(--fs-label) * 1.15); color: var(--ink); }
  [data-navstyle="command"] .c-nav__link:hover, [data-navstyle="command"] .c-nav__link:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
  [data-navstyle="command"] .c-nav__link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  [data-navstyle="command"] .c-nav__link[aria-current="page"]::after { display: none; }
  [data-navstyle="command"] .c-nav__full { display: inline !important; }
  [data-navstyle="command"] .c-nav__short { display: none !important; }
  [data-navstyle="command"] .c-nav__n { display: inline !important; }
}

/* ==========================================================================
   More transitions
   ========================================================================== */

[data-transition="glitch"] .is-entering { animation-name: t-glitch-in; animation-timing-function: linear; }
[data-transition="glitch"] .is-leaving { animation-name: t-glitch-out; animation-timing-function: linear; }
@keyframes t-glitch-in {
  0% { opacity: 0; clip-path: inset(42% 0 44% 0); transform: translateX(-4%); }
  12% { opacity: 1; clip-path: inset(8% 0 72% 0); transform: translateX(5%); filter: hue-rotate(90deg) saturate(2); }
  26% { clip-path: inset(62% 0 4% 0); transform: translateX(-3%); }
  40% { clip-path: inset(0 0 30% 0); transform: translateX(2%) skewX(10deg); filter: none; }
  55% { clip-path: inset(0 0 0 0); transform: translateX(-1%) skewX(-4deg); }
  70% { transform: translateX(0.5%); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes t-glitch-out { 20% { transform: translateX(3%) skewX(-8deg); filter: hue-rotate(-90deg) saturate(3); } 45% { opacity: 0.5; transform: translateX(-5%); clip-path: inset(20% 0 30% 0); } 100% { opacity: 0; } }

[data-transition="cube"] .pages { perspective: 2200px; }
[data-transition="cube"] .c-page.is-entering, [data-transition="cube"] .c-page.is-leaving { background: var(--page-bg, var(--bg)); backface-visibility: hidden; }
[data-transition="cube"] .is-entering { animation-name: t-cube-in; transform-origin: calc(50% - var(--dir) * 50%) 50%; }
[data-transition="cube"] .is-leaving { animation-name: t-cube-out; transform-origin: calc(50% + var(--dir) * 50%) 50%; }
@keyframes t-cube-in { from { transform: translateX(calc(var(--dir) * 100%)) rotateY(calc(var(--dir) * 90deg)); } }
@keyframes t-cube-out { to { transform: translateX(calc(var(--dir) * -100%)) rotateY(calc(var(--dir) * -90deg)); } }

[data-transition="push"] .c-page.is-entering, [data-transition="push"] .c-page.is-leaving { background: var(--page-bg, var(--bg)); }
[data-transition="push"] .is-entering { animation-name: t-push-in; }
[data-transition="push"] .is-leaving { animation-name: t-push-out; }
@keyframes t-push-in { from { transform: translateY(calc(var(--dir) * 100%)); } }
@keyframes t-push-out { to { transform: translateY(calc(var(--dir) * -100%)); } }

[data-transition="sink"] .c-page.is-entering, [data-transition="sink"] .c-page.is-leaving { background: var(--page-bg, var(--bg)); overflow: hidden; }
[data-transition="sink"] .is-entering { animation-name: t-lift-in; }
[data-transition="sink"] .is-leaving { animation-name: t-sink-out; }
@keyframes t-sink-out { to { transform: scale(0.88); border-radius: 1.5rem; filter: brightness(0.6); } }

[data-transition="morph"] .is-entering { animation-name: t-morph-in; }
[data-transition="morph"] .is-leaving { animation-name: t-morph-out; }
@keyframes t-morph-in { from { clip-path: inset(34% 30% round 2.5rem); opacity: 0.5; transform: scale(1.04); } to { clip-path: inset(0 0 0 0 round 0); opacity: 1; transform: none; } }
@keyframes t-morph-out { to { opacity: 0; transform: scale(0.94); } }

/* ==========================================================================
   More reveals
   ========================================================================== */

[data-reveal="clip"] .rv:not(.is-in) { clip-path: inset(0 100% 0 0); }
[data-reveal="flip"] .rv:not(.is-in) { opacity: 0; transform: perspective(900px) rotateX(-65deg); transform-origin: 50% 0; }
[data-reveal="glitch"] .rv { transition-timing-function: steps(6, end); }
[data-reveal="glitch"] .rv:not(.is-in) { opacity: 0; transform: translateX(-0.7rem) skewX(-14deg); filter: hue-rotate(120deg) saturate(3); }
[data-reveal="focus"] .rv:not(.is-in) { opacity: 0; transform: scale(1.07); filter: blur(8px); }
@media (pointer: coarse) { [data-reveal="focus"] .rv:not(.is-in) { filter: none; } [data-reveal="blur"] .rv:not(.is-in) { filter: blur(3px); } }
[data-reveal="bounce"] .rv { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-reveal="bounce"] .rv:not(.is-in) { opacity: 0; transform: translateY(2.2rem) scale(0.96); }

/* ==========================================================================
   More decor
   ========================================================================== */

/* marquee: a band of scrolling text at the foot of every page */
.marquee { display: none; }
.decor-marquee .marquee {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; pointer-events: none;
  padding: 0.55rem 0; white-space: nowrap; background: var(--marquee-bg, var(--ink)); color: var(--marquee-ink, var(--bg));
  font-family: var(--marquee-font, var(--font-display)); font-size: var(--marquee-size, 1.05rem); line-height: 1.2;
  text-transform: var(--marquee-case, none); letter-spacing: var(--heading-tracking);
}
.marquee__track { display: inline-flex; animation: marquee var(--marquee-dur, 40s) linear infinite; }
.marquee__item { padding-right: 0.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.decor-marquee { --page-bottom: calc(clamp(2rem, 6vh, 4.5rem) + 2.6rem); }
.decor-marquee .c-pager { bottom: 3.6rem; }
.decor-marquee.shell[data-navstyle="dock"] .c-nav { bottom: 3.6rem; }

/* grain: film grain over everything */
.decor-grain::after {
  content: ""; position: absolute; inset: -50%; z-index: 30; pointer-events: none; opacity: var(--grain, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } 100% { transform: translate(0, 0); } }

/* glass: frosted panels */
.decor-glass .blk:not(.r-kicker):not(.r-title) {
  background: color-mix(in srgb, var(--surface) var(--glass, 55%), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: max(var(--radius), 1rem);
  padding: clamp(1rem, 2vw, 1.6rem);
}

/* glow: neon titles */
.decor-glow :is(.c-display, .c-h2, .c-stat, .c-statement) { text-shadow: 0 0 0.3em color-mix(in srgb, var(--accent) 65%, transparent), 0 0 1.1em color-mix(in srgb, var(--accent) 35%, transparent); }
.decor-glow .c-cta { box-shadow: 0 0 1.4rem color-mix(in srgb, var(--accent) 55%, transparent); }

/* scanlines */
.decor-scanlines::before {
  content: ""; position: absolute; inset: 0; z-index: 31; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, var(--scan, 0.16)) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35));
}

/* spotlight: a pool of light following the cursor */
.decor-spotlight .pages::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(var(--spot, 34rem) circle at var(--mx, 60%) var(--my, 35%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}

/* chunky: neo-brutalist borders and shadows */
.decor-chunky .blk:not(.r-kicker):not(.r-title) { background: var(--surface); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: clamp(1rem, 2vw, 1.6rem); }
.decor-chunky .c-button { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; }
.decor-chunky .c-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.decor-chunky .c-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.decor-chunky .map { overflow: hidden; }

/* pills */
.decor-pills :is(.c-kicker, .c-item__n, .list-label) { display: inline-block; justify-self: start; width: max-content; max-width: 100%; padding: 0.3em 0.85em; border: var(--border) solid var(--line); border-radius: 999px; background: var(--surface); }
.decor-pills .c-button { border-radius: 999px; }

/* gradient text */
.decor-gradient-text :is(.c-display, .c-h2, .c-stat) {
  background: linear-gradient(100deg, var(--grad-a, var(--accent)), var(--grad-b, var(--accent-2)) 55%, var(--grad-c, var(--accent-3)));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.decor-gradient-text :is(.c-display, .c-h2, .c-stat) * { -webkit-text-fill-color: transparent; }

/* crosshairs: engineering guides */
.decor-crosshairs .page__grid {
  background: linear-gradient(var(--line), var(--line)) calc(var(--gutter) - 1px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) calc(100% - var(--gutter)) 0 / 1px 100% no-repeat;
}
.decor-crosshairs .blk:not(.r-kicker) {
  padding-top: 1rem;
  background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 4px 0 / 1px 5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 9px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) calc(100% - 4px) 0 / 1px 5px no-repeat;
}

/* corners: viewfinder brackets */
.decor-corners .blk:not(.r-kicker):not(.r-title) {
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  --cc: var(--corner-ink, var(--accent));
  background:
    linear-gradient(var(--cc), var(--cc)) 0 0 / 0.9rem 1.5px no-repeat, linear-gradient(var(--cc), var(--cc)) 0 0 / 1.5px 0.9rem no-repeat,
    linear-gradient(var(--cc), var(--cc)) 100% 0 / 0.9rem 1.5px no-repeat, linear-gradient(var(--cc), var(--cc)) 100% 0 / 1.5px 0.9rem no-repeat,
    linear-gradient(var(--cc), var(--cc)) 0 100% / 0.9rem 1.5px no-repeat, linear-gradient(var(--cc), var(--cc)) 0 100% / 1.5px 0.9rem no-repeat,
    linear-gradient(var(--cc), var(--cc)) 100% 100% / 0.9rem 1.5px no-repeat, linear-gradient(var(--cc), var(--cc)) 100% 100% / 1.5px 0.9rem no-repeat;
}

/* badge: a turning circle of text */
.badge { position: absolute; z-index: 21; right: var(--gutter); bottom: 4.2rem; width: var(--badge-size, 7.5rem); height: var(--badge-size, 7.5rem); pointer-events: none; color: var(--badge-ink, var(--accent)); animation: badge-spin 22s linear infinite; }
.badge svg { width: 100%; height: 100%; overflow: visible; }
.badge text { font-family: var(--font-label); font-size: 8.4px; letter-spacing: 0.08em; text-transform: uppercase; fill: currentColor; }
.badge__mark { fill: currentColor; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .badge { display: none; } }

/* chrome: blocks as windows */
.decor-chrome .blk:not(.r-kicker):not(.r-title) {
  position: relative; border: var(--border) solid var(--line); border-radius: max(var(--radius), 0.7rem);
  background-color: var(--surface); padding: 2.6rem clamp(1rem, 1.6vw, 1.4rem) clamp(1rem, 1.6vw, 1.4rem);
  background-image: radial-gradient(circle at 1.05rem 1.1rem, #ff5f57 0.28rem, transparent 0.3rem), radial-gradient(circle at 1.9rem 1.1rem, #febc2e 0.28rem, transparent 0.3rem),
    radial-gradient(circle at 2.75rem 1.1rem, #28c840 0.28rem, transparent 0.3rem), linear-gradient(var(--line), var(--line));
  background-size: auto, auto, auto, 100% 1px; background-position: 0 0, 0 0, 0 0, 0 2.2rem; background-repeat: no-repeat;
}

/* highlight: a highlighter pen */
.decor-highlight :is(.c-statement, .c-verdict, .blank, .c-h2 .known, .callout--stakes .c-h3) {
  text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--hl, var(--accent-3)) 80%, transparent);
  text-decoration-thickness: 0.42em; text-underline-offset: -0.3em; text-decoration-skip-ink: none;
}

/* ==========================================================================
   More home artworks
   ========================================================================== */

.art--terminal { display: flex; align-items: stretch; min-height: 16rem; }
.art-term {
  margin: 0; width: 100%; padding: 1.1rem 1.2rem; overflow: hidden; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-label); font-size: clamp(0.7rem, 0.85vw, 0.85rem); line-height: 1.65; color: var(--ink);
  background: var(--term-bg, color-mix(in srgb, var(--ink) 6%, transparent)); border: var(--border) solid var(--line); border-radius: var(--radius);
}
.art-term .ok { color: var(--accent); }
.art-term .dim { color: var(--muted); }
.art-term .caret { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.art--dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; align-content: center; min-height: 12rem; }
.art-kpi { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.art-kpi b { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: var(--display-weight); line-height: 1; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.art-kpi svg { position: static; width: 100%; height: 2.4rem; overflow: visible; }
.art-kpi path { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.art-kpi path.area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.art--dashboard .art-note { grid-column: 1 / -1; color: var(--muted); }

.art--bars { display: flex; align-items: flex-end; gap: 0.35rem; min-height: 14rem; padding-top: 1rem; }
.art-bar { flex: 1; background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: calc(var(--radius) * 0.5) calc(var(--radius) * 0.5) 0 0; transition: height 1.2s cubic-bezier(0.65, 0, 0.25, 1), background-color 0.6s; height: 10%; }
.art-bar.hi { background: var(--accent); }

/* immersive: the words kept top left, the page open for the background */
[data-layout="immersive"] .page__grid { align-content: start; }
[data-layout="immersive"] .blk { grid-column: 1 / span 6; }
[data-layout="immersive"] .r-title { grid-column: 1 / span 8; }
[data-layout="immersive"] .r-list { grid-column: 1 / span 8; }
[data-layout="immersive"] .r-callout, [data-layout="immersive"] .r-note { grid-column: 1 / span 5; }
[data-layout="immersive"] .r-figure { grid-column: 7 / -1; grid-row: 1 / span 6; }
[data-layout="immersive"] .page--home .page__grid { align-content: center; }
@media (min-width: 861px) {
  [data-layout="immersive"] .page--how .blk:not(.r-figure) { grid-column: 1 / span 5; }
  [data-layout="immersive"] .page--how .r-figure { grid-column: 6 / -1; grid-row: 1 / span 6; position: sticky; top: 0; align-self: start; }
  [data-layout="immersive"] .page--how .list--steps { grid-template-columns: 1fr; }
}

/* scrim, vignette, canvas */
.decor-scrim .pages::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--scrim-dir, 100deg), color-mix(in srgb, var(--scrim, var(--bg)) var(--scrim-strength, 78%), transparent) 0%, color-mix(in srgb, var(--scrim, var(--bg)) 35%, transparent) 42%, transparent 68%);
}
.decor-scrim .c-page { z-index: 1; }
.decor-vignette::after { content: ""; position: absolute; inset: 0; z-index: 29; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, var(--vignette, 0.45))); }
.decor-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: var(--canvas-weave, 0.18); mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 1.2 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* "Our solution" keeps its steps beside the map in the layouts that otherwise stack everything */
@media (min-width: 861px) {
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .page__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important; max-width: none !important; align-content: start;
}
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .blk {
  grid-column: 1 !important; grid-row: auto !important;
}
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .r-title { grid-column: 1 !important; }
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .r-figure { grid-column: 2 !important; grid-row: 1 / span 6 !important; position: sticky; top: 0; align-self: start; }
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .list--steps { grid-template-columns: 1fr !important; }
.shell:is([data-layout="centered"], [data-layout="stack"], [data-layout="poster"], [data-layout="board"], [data-layout="mosaic"], [data-layout="diagonal"], [data-layout="columns"], [data-layout="spread"], [data-layout="bento"], [data-layout="hero"], [data-layout="stagger"], [data-layout="window"], [data-layout="sheets"]) .page--how .list--steps .c-item { grid-template-columns: 1fr !important; }

/* Split and margin put everything in one column, which leaves the map below the fold: on "How it
   works" the steps take the reading column and the map sits beside them, held in view */
.shell:is([data-layout="split"], [data-layout="margin"]) .page--how .r-figure { position: sticky; top: 0; align-self: start; }
[data-layout="split"] .page--how .r-kicker { grid-column: 1; grid-row: 1; }
[data-layout="split"] .page--how .r-title { grid-column: 1; grid-row: 2; margin-top: 0; }
[data-layout="split"] .page--how .blk:not(.r-kicker):not(.r-title):not(.r-figure) { grid-column: 1; }
[data-layout="split"] .page--how .r-figure { grid-column: 2; grid-row: 1 / span 6; }
[data-layout="margin"] .page--how .r-title { grid-column: 1 / span 8; grid-row: 1; }
[data-layout="margin"] .page--how .r-kicker { grid-column: 9 / -1; grid-row: 1; }
[data-layout="margin"] .page--how .blk:not(.r-kicker):not(.r-title):not(.r-figure) { grid-column: 1 / span 5; }
[data-layout="margin"] .page--how .r-figure { grid-column: 6 / -1; grid-row: 2 / span 5; }
[data-layout="margin"] .page--how .list--steps, [data-layout="split"] .page--how .list--steps { grid-template-columns: 1fr; }
}
.page--how .list--steps .c-stat { font-size: clamp(1.8rem, 3vw, 3rem); }