/* design/site/site.css
 *
 * The site stylesheet: the frame and every shared component, for every published page of Your Career Type.
 * Authored (Claude, 2026-10-12) from the locked type page (A5, tools/build_type_page_a5_style.py) value for value,
 * with every colour, shadow, radius and track height read from tokens.css. Order on every page:
 * tokens.css, this file, then at most one page-kind layer (type.css, method.css, scan.css, home.css).
 * A component is defined here once; a page layer never restyles it, it only sets the variables a component reads.
 * The spec: docs/2026-10-12-site-technical-spec-v0.1.md. The catalogue: pages/components.html.
 */

:root {
  --rail: 248px; --notes: 232px; --gap: var(--space-32); --col-wide: 860px; --col-read: 720px; --col: var(--col-wide); --measure: 68ch;
  --frame: calc(var(--rail) + var(--col) + var(--gap) + var(--notes) + 64px);
  --title: 1.125rem;                        /* a list lead-in */
  --card-title: 1.25rem;                    /* every card and panel title */
  --chapter-gap: var(--space-96); --section-gap: var(--space-72);   /* tightened 2026-10-14 (operator): 144 and 88 before */
  --tint-o: color-mix(in srgb, var(--tone-2) 14%, var(--white)); --tint-g: color-mix(in srgb, var(--charcoal) 8%, var(--white));   /* origin's ends, which have no letter colour */
  --tint-f-soft: color-mix(in srgb, var(--letter-f) 5%, var(--white)); --tint-f: color-mix(in srgb, var(--letter-f) 10%, var(--white)); --tint-f-strong: color-mix(in srgb, var(--letter-f) 20%, var(--white)); --tint-f-fix: color-mix(in srgb, var(--letter-f) 12%, var(--plate-light));
  --tint-v-soft: color-mix(in srgb, var(--letter-v) 5%, var(--white)); --tint-v: color-mix(in srgb, var(--letter-v) 10%, var(--white)); --tint-v-strong: color-mix(in srgb, var(--letter-v) 20%, var(--white)); --tint-v-fix: color-mix(in srgb, var(--letter-v) 12%, var(--plate-light));
  --tint-r-soft: color-mix(in srgb, var(--letter-r) 5%, var(--white)); --tint-r: color-mix(in srgb, var(--letter-r) 10%, var(--white)); --tint-r-strong: color-mix(in srgb, var(--letter-r) 20%, var(--white)); --tint-r-fix: color-mix(in srgb, var(--letter-r) 12%, var(--plate-light));
  --tint-w-soft: color-mix(in srgb, var(--letter-w) 5%, var(--white)); --tint-w: color-mix(in srgb, var(--letter-w) 10%, var(--white)); --tint-w-strong: color-mix(in srgb, var(--letter-w) 20%, var(--white)); --tint-w-fix: color-mix(in srgb, var(--letter-w) 12%, var(--plate-light));
  --tint-c-soft: color-mix(in srgb, var(--letter-c) 5%, var(--white)); --tint-c: color-mix(in srgb, var(--letter-c) 10%, var(--white)); --tint-c-strong: color-mix(in srgb, var(--letter-c) 20%, var(--white)); --tint-c-fix: color-mix(in srgb, var(--letter-c) 12%, var(--plate-light));
  --tint-m-soft: color-mix(in srgb, var(--letter-m) 5%, var(--white)); --tint-m: color-mix(in srgb, var(--letter-m) 10%, var(--white)); --tint-m-strong: color-mix(in srgb, var(--letter-m) 20%, var(--white)); --tint-m-fix: color-mix(in srgb, var(--letter-m) 12%, var(--plate-light));
  --tint-s-soft: color-mix(in srgb, var(--letter-s) 5%, var(--white)); --tint-s: color-mix(in srgb, var(--letter-s) 10%, var(--white)); --tint-s-strong: color-mix(in srgb, var(--letter-s) 20%, var(--white)); --tint-s-fix: color-mix(in srgb, var(--letter-s) 12%, var(--plate-light));
  --tint-p-soft: color-mix(in srgb, var(--letter-p) 5%, var(--white)); --tint-p: color-mix(in srgb, var(--letter-p) 10%, var(--white)); --tint-p-strong: color-mix(in srgb, var(--letter-p) 20%, var(--white)); --tint-p-fix: color-mix(in srgb, var(--letter-p) 12%, var(--plate-light));
  --tint-o-fix: color-mix(in srgb, var(--charcoal) 7%, var(--plate-light)); --tint-g-fix: color-mix(in srgb, var(--charcoal) 7%, var(--plate-light));
}
/* the site's secondary ink is the type page's, 8.2:1 on white; it wins over the tokens' own in both themes */
:root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --ink-dim: var(--ink-2); }
/* the two columns, one place (2026-10-15): wide for a type page, read for a method page, which takes it in method.css */
@media (min-width: 1600px) { :root { --col-wide: 960px; --col-read: 800px; } }
@media (min-width: 1920px) { :root { --col-wide: 1040px; --col-read: 880px; --notes: 260px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
/* every page opens on a light fade under the top bar, easing into the page's white over its first 560px (the operator,
   2026-10-15: "I kind of like that as a feel"). It carries the page's own letters, left to right: an aspect page its two
   ends, a type page its family's two letters (site_frame.frame's fade, as --fade-a and --fade-b on the body); every
   other page the Varied tint it began with. Origin's ends have no letter colour, so they take tone 2 and the charcoal */
body { margin: 0; background: linear-gradient(180deg, transparent, var(--white) 560px) top / 100% 560px no-repeat,
  linear-gradient(90deg, var(--fade-a, var(--tint-v-soft)), var(--fade-b, var(--tint-v-soft))) top / 100% 560px no-repeat, var(--white); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.sr, .theme button span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); padding: var(--space-10) var(--space-16); border-radius: var(--r-md); }
.skip:focus { left: 16px; }
p { margin: 0; }

/* ---- type: one size per role, page-wide ---- */
.h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; max-width: 22ch; text-wrap: balance; }
.h3 { margin: 0 0 var(--space-20); font-family: var(--font-display); font-weight: 700; font-size: var(--text-headline); line-height: 1.2; letter-spacing: -0.02em; max-width: 32ch; text-wrap: balance; }
.h4 { margin: var(--space-48) 0 var(--space-20); font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.3; letter-spacing: -0.01em; }
.h3 + .h4 { margin-top: var(--space-8); }
.title, .lead-in { font-family: var(--font-display); font-weight: 700; font-size: var(--title); line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); }
.title { font-size: var(--card-title); }
.lead, .ch-lead { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.label { font-family: var(--font-display); font-size: var(--text-label); font-weight: 600; line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-dim); }
.prose { max-width: var(--measure); display: grid; gap: var(--space-16); }
.prose + .list, .prose + .method { margin-top: var(--space-28); }
.more-link { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.arr { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
a:hover .arr { transform: translateX(3px); }

/* ---- icons: one source, images/icons.svg, inlined by the build as a hidden sprite at the start of each page's body
   (2026-10-14: an external sprite reference rendered blank in some browsers, proxies and on file://) ---- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic-on-s { stroke: var(--ic-on); }
.ic-on-f { fill: var(--ic-on); }
.ic {width: 24px; height: 24px; display: block; flex: none; color: var(--ink); --ic-on: var(--white); }
.ic-sm { width: 18px; height: 18px; }
.ic-md { width: 20px; height: 20px; }

/* ==== buttons: primary, outline, soft, secondary, quiet; pills, the action colour for the one primary ==== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: 52px; padding: 0 var(--space-28); border: 0; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-button); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn-sm { min-height: 44px; padding: 0 var(--space-20); font-size: var(--text-button-sm); }
.btn-lg { min-height: 56px; padding: 0 var(--space-32); font-size: var(--text-button-lg); }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); box-shadow: var(--lift); transform: translateY(-1px); }
.btn-primary:active { background: var(--action-deep); transform: none; box-shadow: none; }
.btn-secondary { background: var(--paper); color: var(--ink); box-shadow: var(--ring-15) var(--line-strong); }
.btn-secondary:hover { box-shadow: var(--ring-15) var(--ink); }
.btn-outline { background: transparent; color: var(--action); box-shadow: var(--ring-15) var(--action); }
.btn-outline:hover { background: var(--action); color: var(--on-action); }
.btn-soft { background: var(--stone); color: var(--ink); }
.btn-soft:hover { background: var(--line); }
.stage-dark .btn-soft { background: var(--stage-paper); color: var(--stage-ink); box-shadow: var(--ring-1) var(--stage-edge); }
.stage-dark .btn-soft:hover { background: var(--stage-line); }
.btn .ic { color: currentColor; }
.quiet { background: none; border: 0; padding: 0 var(--space-4); min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ==== the charcoal stage: the reveal, the close, the blind spot, nothing else ==== */
.stage-dark { --ink: var(--stage-ink); --ink-dim: var(--stage-ink-dim); --line: var(--stage-line); --action: var(--stage-ink); --action-hover: var(--pure-white); --action-deep: var(--line-strong); --on-action: var(--charcoal); --paper: var(--stage-paper); --line-strong: var(--stage-line-strong);
  --tile-mute: var(--tile-mute-dark); --tile-mute-ink: var(--tile-mute-ink-dark); --tile-mute-edge: none;
  background: var(--charcoal); color: var(--stage-ink); }

/* ==== the top bar ==== */
.bar { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: var(--sh-rule); transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
/* at the top of a page the bar lets the fade through, and takes the white and its rule once the page scrolls under it
   (site.js sets html.scrolled), or while a menu is open (the operator, 2026-10-15: "the top menu is white and it's kind
   of weird"). Without the script it stays white */
html.js:not(.scrolled) .bar:not(:has(.mnav-t[aria-expanded="true"])) { background: transparent; box-shadow: none; }
.bar-in { height: 60px; display: flex; align-items: center; gap: var(--space-12); padding: 0 var(--space-24); max-width: var(--frame); margin-inline: auto; }
.lockup { display: flex; align-items: center; gap: var(--space-10); text-decoration: none; color: var(--ink); flex: none; }
.lockup img { height: 28px; width: auto; display: block; }
.lk-d { display: none; }
/* a figure from the store (L.figure_img): its light and dark files, as wide as their box */
.fig-img { display: block; }
.fig-img img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-l { display: none; } :root:not([data-theme="light"]) .lk-d { display: block; } }
:root[data-theme="dark"] .lk-l { display: none; } :root[data-theme="dark"] .lk-d { display: block; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-wordmark); letter-spacing: var(--track-wordmark); }
.theme { display: flex; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-pill); background: var(--stone); flex: none; }
.theme button, .theme-c { width: 36px; height: 36px; border: 0; border-radius: var(--r-round); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--paper); box-shadow: var(--sh-pick); }
.theme .ic, .theme-c .ic { width: 18px; height: 18px; }
.bar-cta { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; position: relative; flex: none; }
.chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease-out); }
.pnav details[open] summary .chev, [aria-expanded="true"] > .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.theme-c { width: 44px; height: 44px; background: var(--stone); }
/* the menus, on the sister app's pattern (2026-10-13): a few top-level items, the sections with a caret opening a
   full-width panel of cards under the bar, closed by a 2px ink rule; the current section underlined in ink */
.mnav { margin-left: var(--space-28); height: 60px; }
.mnav-l { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.mnav-a, .mnav-t { display: inline-flex; align-items: center; gap: var(--space-10); height: 60px; padding: 0 var(--space-14); border: 0; background: none; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink-dim); text-decoration: none; cursor: pointer; }
.mnav-a:hover, .mnav-t:hover, .mnav-t[aria-expanded="true"] { color: var(--ink); }
.mnav-a.on, .mnav-t.on, .mnav-t[aria-expanded="true"] { color: var(--ink); box-shadow: var(--sh-under); }
.mnav-t .chev { width: 7px; height: 7px; }
.mnav-g { display: flex; }
.mnav-ab { padding-right: var(--space-4); }
.mnav-tc { min-width: 28px; justify-content: center; padding: 0 var(--space-10) 0 var(--space-4); }   /* a target of 24px or more (WCAG 2.5.8) */
.mnav-g:has(.mnav-tc[aria-expanded="true"]) .mnav-ab, .mnav-g:hover .mnav-ab { color: var(--ink); }
.mnav-g:has(.mnav-tc[aria-expanded="true"]) .mnav-ab { box-shadow: var(--sh-under); }
.mnav-a:focus-visible, .mnav-t:focus-visible { outline: 2px solid var(--action); outline-offset: -10px; border-radius: var(--r-md); }
.mpanel { position: absolute; left: 0; right: 0; top: 60px; z-index: 49; background: var(--white); box-shadow: var(--sh-panel); border-bottom: 2px solid var(--ink); max-height: calc(100vh - 60px); overflow-y: auto; }
.bar:has(.mnav-t[aria-expanded="true"])::after { content: ""; position: fixed; inset: 60px 0 0; z-index: 48; background: color-mix(in srgb, var(--charcoal) 18%, transparent); pointer-events: none; }
.mpanel-in { max-width: var(--frame); margin-inline: auto; padding: var(--space-28) var(--space-24) var(--space-32); }
.mcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
/* three menus (operator, 2026-10-15): Go deeper's six theory pages, the two coming ones as whole cards greyed with a Coming soon
   badge; The five aspects, one card per aspect page */
.mcards.mc6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-12); }
.mcards.mc5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mcard-soon { cursor: default; position: relative; }
.mcard-soon:hover { background: none; }
.mcard-soon .mcard-art > * { filter: grayscale(1); opacity: .45; }
.mcard-soon b, .mcard-soon .mcard-l { color: var(--ink-dim); }
.mcard-soon > .soon-k { justify-self: start; }
.art-myst { display: block; height: var(--h); aspect-ratio: 238 / 334; }
.art-myst .myst { width: 100%; }
.mcard { display: grid; gap: var(--space-8); align-content: start; height: 100%; padding: var(--space-12) var(--space-12) var(--space-16); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out); }
.mcard:hover, .mcard[aria-current] { background: var(--stone); }
.mcard-art { display: flex; align-items: center; justify-content: center; gap: var(--space-4); height: 120px; margin-bottom: var(--space-6); border-radius: var(--r-md); background: var(--stone); }
.mcard:hover .mcard-art, .mcard[aria-current] .mcard-art { background: var(--paper); }
.mcard-art img { height: 84px; width: auto; }
.mcard b { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.01em; }
.mcard-l { display: block; font-family: var(--font-display); font-weight: 500; font-size: .9375rem; line-height: 1.4; color: var(--ink-dim); }
.mcard[aria-current] b::after { content: " (this page)"; font-weight: 500; color: var(--ink-dim); }
.tfams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); }
.tfam { padding: var(--space-16) var(--space-14) var(--space-14); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--la) 0 50%, var(--lb) 50% 100%); }
.tfam-h { display: flex; align-items: center; gap: var(--space-10); font-family: var(--font-display); font-size: 1.0625rem; color: inherit; text-decoration: none; }
a.tfam-h:hover b, a.tfam-h:focus-visible b { text-decoration: underline; text-underline-offset: .12em; }
.tfam-h b { font-weight: 800; letter-spacing: -0.01em; }
.tfam p { margin: var(--space-4) 0 var(--space-12); font-family: var(--font-display); font-weight: 500; font-size: .875rem; line-height: 1.4; color: var(--ink); }
/* a type's line on hover or focus, below its cell (operator, 2026-10-15: "they should go down from the mouse pointer, not up";
   above, the top row's were cut off at the top of the screen), toward the inside of its family card. Where the whole panel fits
   the screen it may spill over the page, so the bottom row's line is not cut off at the panel's foot */
@media (hover: hover) and (pointer: fine) and (min-height: 640px) { #mp-types { overflow: visible; } }
.tcells .tcell { position: relative; }
.tcell-tip { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tcells .tcell-tip { display: block; position: absolute; top: calc(100% + 8px); z-index: 3; width: 250px; padding: var(--space-12) var(--space-14); border-radius: var(--r-md);
    background: var(--paper); color: var(--ink); box-shadow: var(--sh-panel); font-family: var(--font-display); font-weight: 500; font-size: .8125rem; line-height: 1.45;
    text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); pointer-events: none; }
  .tcells li:nth-child(odd) .tcell-tip { left: 0; }
  .tcells li:nth-child(even) .tcell-tip { right: 0; }
  .tcells .tcell:hover .tcell-tip, .tcells .tcell:focus-visible .tcell-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .tcells .tcell-tip { transition: none; transform: none; } }
/* where a type sits in its family, drawn once beside the four families (operator, 2026-10-15), in place of letter tiles in every cell */
.tpanel { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.tmap { margin: var(--space-120) 0 0; font-family: var(--font-display); }
.dr-b .tmap { margin: var(--space-20) 0 var(--space-4); max-width: 190px; }
.tcells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.tcell { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-10) var(--space-6) var(--space-10); border-radius: var(--r-md); background: var(--card); text-align: center; font-family: var(--font-display); font-weight: 600; font-size: .875rem; line-height: 1.2; color: var(--ink); text-decoration: none; box-shadow: var(--sh-card); }
a.tcell:hover, .tcell.on { box-shadow: var(--ring-2) var(--ink), var(--sh-card); }
.tcell-s img { height: 64px; width: auto; display: block; }
.tcell-soon { color: var(--ink); font-weight: 500; box-shadow: none; background: transparent; }
.tcell-soon .tcell-s { opacity: .55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tfam { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); } }
:root[data-theme="dark"] .tfam { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); }

/* the phone: a burger beside the call, and a drawer that holds everything; nothing floats over the header */
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-round); background: var(--stone); cursor: pointer; place-items: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; border-radius: var(--r-sm); background: var(--ink); position: relative; content: ""; }
.burger span::before { position: absolute; top: -6px; } .burger span::after { position: absolute; top: 6px; }
.drawer { position: fixed; inset: 0; z-index: 100; background: var(--white); display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
html.dr-open { overflow: hidden; }
.dr-head { flex: none; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-16); box-shadow: var(--sh-rule); }
.dr-x { width: 44px; height: 44px; border: 0; border-radius: var(--r-round); background: var(--stone); cursor: pointer; display: grid; place-items: center; }
.dr-x span, .dr-x span::after { display: block; width: 18px; height: 2px; border-radius: var(--r-sm); background: var(--ink); transform: rotate(45deg); content: ""; }
.dr-x span::after { transform: rotate(90deg); }
.dr-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-20) var(--space-24); }
.dr-l { list-style: none; margin: 0; padding: 0; }
.dr-l > li { border-bottom: 1px solid var(--line); }
.dr-t { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.dr-b { padding: 0 0 var(--space-20); }
.dr-pgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.dr-pg { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-8); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.dr-pg[aria-current] { background: var(--stone); box-shadow: var(--ring-2) var(--action); }
.dr-pg-soon { cursor: default; }
.dr-pg-soon .dr-art > * { filter: grayscale(1); opacity: .45; }
.dr-pg-soon b { color: var(--ink-dim); }
.dr-pg-soon .soon-k { display: inline-block; margin-top: var(--space-4); }
.dr-art { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: var(--r-md); background: var(--stone); }
.dr-pg[aria-current] .dr-art { background: var(--paper); }
.dr-art img { height: 40px; width: auto; }
.dr-art img:not(:only-child) { height: 28px; }
.dr-pg b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.dr-pg span span { display: block; font-family: var(--font-display); font-weight: 500; font-size: .875rem; line-height: 1.4; color: var(--ink-dim); }
.dr-fam { padding: var(--space-10) 0 var(--space-6); }
.dr-cells { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dr-cells .tcell { grid-template-columns: 30px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: var(--space-6) var(--space-8); box-shadow: var(--ring-1) var(--line); }
.dr-cells .tcell-soon { box-shadow: none; }
.dr-cells .tcell.on { box-shadow: var(--ring-2) var(--ink); }
.dr-cells .tcell-s img { height: 36px; }
.dr-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-20) 0 0; }
.dr-theme .label { text-transform: none; letter-spacing: 0; font-size: var(--text-small); }
.dr-foot { flex: none; padding: var(--space-12) var(--space-20) var(--space-16); box-shadow: var(--sh-rule-up); background: var(--white); }
.dr-foot .scan-call { justify-items: stretch; gap: var(--space-6); }
.dr-foot .btn, .dr-foot .scan-note { justify-content: center; text-align: center; }

/* ==== the method strip: where a method page sits among the six ==== */
.mfam { box-shadow: var(--sh-rule); font-family: var(--font-display); font-size: .875rem; }
.mfam-in { display: flex; align-items: center; gap: var(--space-16); padding: 0 var(--space-24); height: 44px; max-width: var(--frame); margin-inline: auto; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.mfam-in::-webkit-scrollbar { display: none; }
.mfam-k { font-size: var(--text-small); font-weight: 700; color: var(--ink); flex: none; }
.mfam ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4) var(--space-24); }
.mfam a, .mfam .soon { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; font-weight: 500; color: var(--ink-dim); text-decoration: none; }
.mfam a:hover { color: var(--ink); text-decoration: underline; }
.mfam a[aria-current] { color: var(--ink); font-weight: 700; box-shadow: var(--sh-under); }
.mfam .soon { color: var(--ink-dim); }
.soon-k { font-family: var(--font-display); font-size: var(--text-micro); font-weight: 600; letter-spacing: 0; text-transform: none; padding: var(--space-2) var(--space-8); border-radius: var(--r-pill); background: var(--stone); color: var(--ink-dim); }

/* ---- the phone's chapter strip ---- */
.pnav { display: none; }

/* ==== the frame: rail and reading column, centred with a maximum width ==== */
.page { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); max-width: calc(var(--rail) + var(--col) + 64px); margin-inline: auto; }
/* one rail on method and type pages (the operator, 2026-10-15, pick 6a: the method pages' look, "no numbers, no lines"):
   the current item by weight and a short bar in the action colour, a stone plate on hover */
.rail { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; padding: var(--space-40) var(--space-20) var(--space-32) var(--space-24); scrollbar-width: thin; }
.rail-id { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-12); align-items: center; margin-bottom: var(--space-24); }
.rail-id img { width: 44px; height: auto; display: block; }
.rail-id b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.rail-id span { font-family: var(--font-mono); font-weight: 600; font-size: .875rem; letter-spacing: .08em; color: var(--ink-dim); }
.rail-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-px); }
.rail-l a.r { position: relative; display: block; padding: var(--space-8) var(--space-10) var(--space-8) var(--space-16); border-radius: var(--r-md); font-family: var(--font-display); font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--ink-dim); text-decoration: none; }
.rail-l a.r:hover { color: var(--ink); background: var(--stone); }
.rail-l a.r.on { color: var(--ink); font-weight: 700; }
.rail-l a.r.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-sm); background: var(--action); }
.subs { list-style: none; margin: var(--space-2) 0 var(--space-8); padding: 0 0 0 var(--space-12); display: none; }
.ch-l.open > .subs { display: grid; }
.subs a.r { font-size: .875rem; padding: var(--space-6) var(--space-10) var(--space-6) var(--space-16); }
/* the one call to the scan, on every page (the operator, 2026-10-15): the button, one short line under it, no title */
.scan-call { display: grid; justify-items: start; gap: var(--space-10); }
.scan-note { margin: 0; font: 500 .875rem/1.4 var(--font-display); color: var(--ink-dim); }
.rail-cta { margin-top: var(--space-28); padding: var(--space-16); border-radius: var(--r-lg); background: var(--stone); display: grid; gap: var(--space-10); justify-items: start; }
.rail-cta .scan-call { justify-items: stretch; gap: var(--space-8); }
.rail-cta .btn { justify-content: center; text-align: center; }
.rail-cta .scan-note { font-size: .8125rem; text-align: center; }
.rail-hint { margin-top: var(--space-16); font-family: var(--font-display); font-size: .8125rem; line-height: 1.4; color: var(--ink-dim); }
.rail-hint kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-4); border-radius: var(--r-sm); box-shadow: var(--ring-1) var(--line-strong); font: 600 .75rem/1 var(--font-mono); color: var(--ink); }
@media (pointer: coarse) { .rail-hint { display: none; } }
.pmain { min-width: 0; padding: var(--space-32) var(--space-32) 0; }
.sec { display: grid; grid-template-columns: minmax(0, var(--col)); padding-top: var(--section-gap); }
.cell { min-width: 0; }
.sec-top { padding-top: 0; }
.ch { position: relative; }
.ch-h { max-width: var(--col); padding-top: var(--chapter-gap); }
.ch-lead { margin-top: var(--space-16); max-width: 60ch; }
.ch-h + .sec { padding-top: var(--space-36); }

/* ---- the copy-link icon on every heading ---- */
.anc { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: var(--space-6); vertical-align: middle; border-radius: var(--r-md); color: var(--ink-dim); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.anc .ic { color: currentColor; }
:is(.h2, .h3):hover .anc, .anc:focus-visible, .anc.ok { opacity: 1; }
.anc.ok { color: var(--letter-r); }
@media (hover: none) { .anc { display: none; } }

/* ==== the one list style: a bullet, a bold lead-in, the explanation directly below; space between items ==== */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--list-gap, var(--space-28)); max-width: var(--measure); }
.list > li { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); column-gap: var(--space-20); align-items: start; }
.list .lead-in { display: block; margin-bottom: var(--space-4); }
.list p { color: var(--ink-dim); font-size: var(--list-fs, inherit); }
.list .mk { display: grid; justify-items: center; }
.list-dot, .list-quote { --mk: 12px; } .list-dot .mk { padding-top: var(--space-10); } .list-quote .mk { padding-top: var(--space-12); }
.dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--ink); }
.list-icon { --mk: 26px; } .list-icon .mk { padding-top: 0; }
.list-dom { --mk: 16px; } .list-dom .mk { padding-top: var(--space-px); }
.dom { width: 14px; height: 24px; display: block; color: var(--dom, var(--letter-s)); --ic-on: var(--on-letter); }
.list-draw { --mk: 52px; } .list-draw > li { min-height: 52px; }
.plate { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--t); display: grid; place-items: center; }
.plate img { width: 42px; height: 42px; }
.list-scene { --mk: 96px; } .list-scene > li { column-gap: var(--space-24); }
.list-scene .draw { width: 96px; height: 96px; border-radius: var(--r-lg); background: var(--stone); display: grid; place-items: center; }
.list-scene .draw img { width: 80px; height: auto; display: block; }
.list-quote .lead-in { font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: var(--title); letter-spacing: 0; }
.list-num { --mk: 30px; } .list-num .mk { font: 600 .9375rem/1 var(--font-mono); color: var(--ink-dim); padding-top: .45em; }
.list-go { --mk: 22px; } .list-go .mk { padding-top: var(--space-4); }
.list-go .lead-in { font-size: 1.125rem; text-decoration: none; }
.list-go .lead-in:hover { text-decoration: underline; }
.list-go .rm-d { display: block; color: var(--ink-dim); }
.chip { display: flex; width: max-content; max-width: 100%; align-items: center; gap: var(--space-8); margin: var(--space-10) 0 0; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); border-radius: var(--r-chip); background: var(--paper); box-shadow: var(--ring-1) var(--line-strong);
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1.2; color: var(--ink); text-decoration: none; vertical-align: middle; white-space: nowrap; }
/* a chip never pushes the page wider than the screen: its name wraps when it cannot fit (2026-10-14) */
.chip > span:not(.tiles):not(.arr) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.chip:hover { box-shadow: var(--ring-2) var(--action); }
span.chip:hover { box-shadow: var(--ring-1) var(--line-strong); }

/* ==== one card and one stone plate ==== */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.card.stage-dark { background: var(--charcoal); }
.ground { background: var(--stone); border-radius: var(--r-lg); padding: var(--space-32); }
.sp { margin-top: var(--space-4); }
.card.link, .link { position: relative; transition: box-shadow var(--dur-fast) var(--ease-out); }
a.main { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }
.link a.main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card.link:hover { box-shadow: var(--halo-2) var(--action), var(--sh-card); }
.card.link:hover a.main { text-decoration-color: var(--action); }
.link:has(a.main:focus-visible) { outline: 2px solid var(--action); outline-offset: 3px; }
.link a.main:focus-visible { outline: none; }

/* ==== the type card: a type shown small, its code, its two family plates, its name and line ==== */
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-14); }
.tc { padding: var(--space-20); display: grid; gap: var(--space-10); align-content: start; }
.tc .title { margin: var(--space-4) 0 0; }
.tc p { font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.plates { display: flex; gap: var(--space-6); }
.pl { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; background: var(--c); }
.pl img { width: 86%; }
.types .tc:not(.lit) .pl { opacity: .55; }
.tc.lit { background: linear-gradient(135deg, var(--la) 0 50%, var(--lb) 50% 100%); box-shadow: var(--sh-lit); }
.tc.lit p { color: var(--ink); }

/* ==== the code tiles: one component in four sizes; a letter muted only where a section compares codes ==== */
:root { --tile-mute-edge: none; }
.tiles { display: inline-flex; gap: var(--tile-gap); vertical-align: middle; flex: none; }
.tiles i { font-style: normal; display: grid; place-items: center; width: var(--tile-w); height: var(--tile-h); border-radius: var(--tile-r); background: var(--c); color: var(--on-letter); font: 600 var(--tile-fs)/1 var(--font-mono); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tiles i.mu { background: var(--tile-mute); color: var(--tile-mute-ink); box-shadow: var(--tile-mute-edge); }
.tiles i.sfx { margin-left: var(--space-4); background: transparent; color: var(--ink); box-shadow: var(--ring-15) var(--ink); }
.tiles-s { --tile-w: 22px; --tile-h: 26px; --tile-r: var(--r-tile-s); --tile-fs: .8125rem; --tile-gap: var(--space-4); }
.tiles-m { --tile-w: 26px; --tile-h: 30px; --tile-r: var(--r-tile-m); --tile-fs: .9375rem; --tile-gap: var(--space-4); }
.tiles-l { --tile-w: 52px; --tile-h: 60px; --tile-r: var(--r-tile-l); --tile-fs: var(--text-headline); --tile-gap: var(--space-6); }
.tiles-xl { --tile-w: 64px; --tile-h: 74px; --tile-r: var(--r-tile-xl); --tile-fs: 2.125rem; --tile-gap: 0px; }
.tiles-xl i.sfx { box-shadow: var(--ring-25) var(--ink); }
/* white with a hairline on stone and tinted grounds */
.on-ground, .tc.lit { --tile-mute: var(--tile-mute-ground); --tile-mute-edge: var(--ring-1) color-mix(in srgb, var(--charcoal) 10%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.on-ground, .tc.lit) { --tile-mute-edge: none; } }
:root[data-theme="dark"] :is(.on-ground, .tc.lit) { --tile-mute-edge: none; }

/* ==== the shield, and a drawing on its plate ==== */
.shield { display: block; width: 100%; height: auto; }
.dplate { display: grid; place-items: center; border-radius: var(--r-lg); background: var(--plate-light); }
.dplate.sm { width: 52px; height: 52px; background: var(--t); }
.dplate.sm img { width: 44px; height: 44px; }

/* ==== the scale track: two end drawings on plates, the words in the middle, the track, the ends ==== */
.scale { display: grid; grid-template-columns: var(--endw, 112px) minmax(0, 1fr) var(--endw, 112px); column-gap: var(--space-28); align-items: center; }
.sc-end .dplate { width: var(--endw, 112px); height: var(--endw, 112px); }
.sc-end img { width: 86%; height: auto; }
.sc-mid { display: grid; gap: var(--space-12); text-align: center; min-width: 0; }
.sc-lab { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.trk { position: relative; display: block; height: var(--track-m); border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ca) 0%, color-mix(in srgb, var(--ca) 14%, var(--line)) 50%, color-mix(in srgb, var(--cb) 14%, var(--line)) 50%, var(--cb) 100%); }
.trk-s { height: var(--track-s); background: var(--line); }
.trk-l { height: var(--track-l); }
.trk-dot { position: absolute; left: var(--x, 50%); top: 50%; width: 20px; height: 20px; border-radius: var(--r-round); background: var(--c); transform: translate(-50%, -50%); box-shadow: var(--halo-3) var(--white); z-index: 1; }
.trk-dot.mid { background: var(--white); box-shadow: var(--ring-35) var(--ink), var(--halo-3) var(--white); }
.trk-e { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.trk-e > span { display: inline-flex; align-items: center; gap: var(--space-8); }
.trk-e .e-or { font-weight: 500; font-size: .8125rem; color: var(--ink-dim); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .trk[style*="--letter-p"] { --cb: var(--p-track-light) !important; } }
:root[data-theme="dark"] .trk[style*="--letter-p"] { --cb: var(--p-track-light) !important; }

/* ==== the callout: at most two a page; the claim to remember, and what this means for you ==== */
.callout { margin: var(--space-40) 0; max-width: var(--prose, var(--measure)); padding: var(--space-28) var(--space-32) var(--space-28); border-radius: var(--r-lg); background: var(--stone); display: grid; gap: var(--space-10); }
.callout-k { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--ink); }
.callout p { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; color: var(--ink); }
.callout-claim p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); line-height: 1.32; letter-spacing: -0.012em; text-wrap: balance; }

/* ==== the booktabs table ==== */
.tbl { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
table.bt { width: 100%; border-collapse: collapse; border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.bt thead th { padding: var(--space-14) var(--space-28) var(--space-12) 0; border-bottom: var(--hair) solid var(--ink); text-align: left; vertical-align: bottom;
  font-family: var(--font-display); font-weight: 600; font-size: .8125rem; line-height: 1.3; letter-spacing: .01em; color: var(--ink-dim); }
.bt thead td { border-bottom: var(--hair) solid var(--ink); }
.bt tbody th, .bt tbody td { padding: var(--space-16) var(--space-28) var(--space-16) 0; border-top: var(--hair) solid var(--line); text-align: left; vertical-align: top; font-size: .9375rem; line-height: 1.5; }
.bt tbody tr:first-child > * { border-top: 0; padding-top: var(--space-20); }
.bt tbody tr:last-child > * { padding-bottom: var(--space-20); }
.bt tbody th { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.bt th:last-child, .bt td:last-child { padding-right: 0; }

/* ==== the sixteen, as a map: the four families as a two-by-two, each on its two-colour split, its four shields inside ==== */
.sixteen { display: grid; grid-template-columns: 92px repeat(2, minmax(0, 1fr)); gap: var(--space-14); }
.sx-ch { display: flex; align-items: center; justify-content: center; gap: var(--space-10); padding-bottom: var(--space-2); }
.sx-ch img, .sx-rh img { width: 44px; height: 44px; }
.sx-ch b, .sx-rh b { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.sx-rh { display: grid; justify-items: center; align-content: center; gap: var(--space-6); text-align: center; }
.sx-f { display: grid; gap: var(--space-14); align-content: start; padding: var(--space-20) var(--space-16) var(--space-20); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--la) 0 50%, var(--lb) 50% 100%); }
.sx-fh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding: 0 var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }
a.sx-fh:hover b { text-decoration: underline; }
.sx-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
.sx-t { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-14) var(--space-10) var(--space-12); border-radius: var(--r-lg); background: color-mix(in srgb, var(--white) 72%, transparent); color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
a.sx-t:hover { background: var(--white); box-shadow: var(--sh-hover); transform: translateY(-2px); }
.sx-t img { width: 100%; max-width: 128px; }
.sx-n { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; line-height: 1.2; text-align: center; text-wrap: balance; }
.sx-ax { display: none; font-family: var(--font-display); font-weight: 500; font-size: .8125rem; letter-spacing: 0; color: var(--ink-dim); }
.sx-key { grid-column: 2 / -1; order: -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-36); padding: 0 0 var(--space-10); margin-bottom: var(--space-4); border-bottom: var(--hair) solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--ink-dim); }
.sx-kd { display: inline-flex; align-items: center; gap: var(--space-14); }
.sx-k { display: inline-flex; align-items: center; gap: var(--space-6); color: var(--ink); }
.sx-arr { font-size: 1rem; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sx-f { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); } }
:root[data-theme="dark"] .sx-f { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); }

/* ==== the family card: a family on its two-colour split, its gains and breaks ==== */
.fam { container-type: inline-size; display: grid; gap: var(--space-14); padding: var(--space-28) var(--space-32) var(--space-32); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--la) 0 50%, var(--lb) 50% 100%); }
.fam-h { display: flex; align-items: center; gap: var(--space-14); margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-title); letter-spacing: -0.012em; }
.fam-l { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.fam-gb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); margin-top: var(--space-6); }
.fam-gb > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--space-12); align-items: start; padding: var(--space-16) var(--space-20); border-radius: var(--r-md); background: color-mix(in srgb, var(--white) 78%, transparent); }
.fam-gb b { display: block; margin-bottom: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.fam-gb p { font-size: .9375rem; line-height: 1.5; color: var(--ink); }
@container (max-width: 560px) { .fam-gb { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fam { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); } :root:not([data-theme="light"]) .fam-gb > div { background: var(--paper); } }
:root[data-theme="dark"] .fam { background: linear-gradient(90deg, var(--ca2) 0 50%, var(--cb2) 50% 100%) top / 100% 4px no-repeat, var(--stone); }
:root[data-theme="dark"] .fam-gb > div { background: var(--paper); }

/* ==== the signup: our own form, the email step of the components board (2026-10-13): a 52px pill field with a
   line-strong border and a soft focus ring in the action tint, the primary beside it; the error a charcoal chip that
   names the fix; after sending, one line on stone with a quiet Change; when our endpoint does not answer, a button to
   beehiiv's own signup page. One line and the privacy link under it ==== */
.signup { display: grid; gap: var(--space-12); max-width: 560px; }
.signup-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-headline); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.signup-p { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-dim); max-width: 46ch; }
.signup-form { display: grid; gap: var(--space-10); justify-items: start; }
.em-row { display: flex; gap: var(--space-8); width: 100%; }
.em-in { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 var(--space-24); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.em-in::placeholder { color: var(--ink-dim); opacity: 1; }
.em-in:hover { border-color: var(--ink-dim); }
.em-in:focus { outline: none; border-color: var(--action); box-shadow: var(--halo-4) color-mix(in srgb, var(--action) 18%, transparent); }
.em-in[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
.em-go { flex: none; }
.em-go[aria-busy="true"] { cursor: progress; opacity: .75; transform: none; box-shadow: none; }
.em-err { padding: var(--space-6) var(--space-14); border-radius: var(--r-pill); background: var(--charcoal); color: var(--stage-ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); line-height: 1.35; }
.stage-dark .em-err { background: var(--ink); color: var(--charcoal); }
.em-ok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-16); padding: var(--space-14) var(--space-24); border-radius: var(--r-lg); background: var(--stone); font-size: 1rem; line-height: 1.45; }
.stage-dark .em-ok { background: var(--paper); }
.em-addr { font-family: var(--font-mono); font-weight: 500; font-size: .9375rem; word-break: break-all; }
.em-fb { display: grid; gap: var(--space-12); justify-items: start; }
.em-fb-p { max-width: 46ch; font-size: var(--text-small); line-height: 1.5; color: var(--ink-dim); }
.signup-note { font-family: var(--font-display); font-weight: 500; font-size: .875rem; line-height: 1.45; color: var(--ink-dim); }
.signup-note a { color: var(--ink); }

/* ==== the five aspects at a glance, as an answer (B3, ruled 2026-09-29): every word in the middle column, the drawings
   unlabelled at both ends, the chosen one in colour and the other faded; the result and the chosen end's name in the
   colour of the end the bar points to; a 24px track with no notch (overruled 2026-10-14), the fill from the middle to a
   white marker ringed in that colour; a second answer set as a hollow ring ==== */
.abs { display: grid; }
.ab { display: grid; grid-template-columns: 104px minmax(0, 1fr) 104px; column-gap: var(--space-24); align-items: center; padding: var(--space-20) 0 var(--space-24); border-bottom: var(--hair) solid var(--line); }
.ab:first-child { border-top: var(--hair) solid var(--line); }
.ab-end img { display: block; width: 96px; height: 96px; margin: 0 auto; opacity: .3; filter: grayscale(1); transition: opacity var(--dur) var(--ease-out); }
.ab.on-a .ab-ea img, .ab.on-b .ab-eb img { opacity: 1; filter: none; }
.ab-mid { display: grid; gap: var(--space-6); min-width: 0; }
.ab-name { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); color: var(--ink-dim); }
.ab-res { min-height: 1.05em; margin-bottom: var(--space-8); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-headline); line-height: 1.05; letter-spacing: -0.01em; color: color-mix(in srgb, var(--c, var(--ink)) var(--word-mix), var(--ink)); }   /* a letter's colour as a word: --word-mix (the launch audit, 2026-10-15) */
.ab-t { position: relative; display: block; height: var(--track-l); border-radius: var(--r-pill); background: var(--line); }
.ab-fill { position: absolute; top: 0; bottom: 0; left: var(--l, 50%); width: var(--w, 0%); border-radius: var(--r-pill); background: var(--c, var(--line)); }
.ab-mk, .ab-mk2 { position: absolute; top: 50%; left: var(--x, 50%); display: none; border-radius: var(--r-round); transform: translate(-50%, -50%); box-sizing: border-box; }
.ab-mk { width: 30px; height: 30px; border: 5px solid var(--c); background: var(--paper); z-index: 3; }
.ab-mk2 { left: var(--x2, 50%); width: 32px; height: 32px; border: 4px solid var(--c2); background: color-mix(in srgb, var(--paper) 35%, transparent); z-index: 4; }
.ab.set .ab-mk, .ab.two .ab-mk2 { display: block; }
.ab-ew { display: flex; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: var(--text-small); color: var(--ink-dim); }
.ab.on-a .ab-wa, .ab.on-b .ab-wb { color: color-mix(in srgb, var(--c) var(--word-mix), var(--ink)); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .ab.set .ab-fill { animation: ab-grow 700ms var(--ease-out) both; }
  .ab.on-a .ab-fill { transform-origin: right center; }
  .ab.on-b .ab-fill { transform-origin: left center; }
  .ab.set .ab-mk { animation: ab-in 300ms 500ms var(--ease-out) both; }
}
@keyframes ab-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ab-in { from { opacity: 0; } to { opacity: 1; } }

/* ==== the candidate card: a type that might be yours (components board, Career types that might fit you). The negative
   card (the operator, 2026-10-14): a white top carrying the plain type shield, a charcoal foot carrying the copy, white
   on charcoal (the foot is a .stage-dark, so the copy, the tiles and the rule take the stage's tokens). The top stays a
   light plate in the dark theme, as the drawings' plates do ==== */
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-20); }
.cand { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--charcoal); }
.cand[hidden] { display: none; }
.cand-plate { position: relative; display: grid; place-items: center; padding: var(--space-24) var(--space-20) var(--space-20); background: var(--plate-light); }
/* the changed letter, the one lit tile among muted ones (the operator, 2026-10-14, the follow-up): a white ring with a
   charcoal gap round its own colour, so W, P and G all read on the charcoal foot. The dark Parallel takes its light step;
   the variant, which has no colour, becomes a white tile with a charcoal letter. The selector outranks the dark theme's
   Parallel rule */
.cand .cand-b.stage-dark .tiles-m i:not(.mu) { margin-inline: var(--space-4); box-shadow: var(--halo-2) var(--charcoal), var(--halo-4) var(--stage-ink); }
.cand .cand-b.stage-dark .tiles-m i[style*="--letter-p"]:not(.mu) { background: var(--p-light); }
.cand .cand-b.stage-dark .tiles-m i.sfx:not(.mu) { background: var(--stage-ink); color: var(--charcoal); }
.cand-plate img { width: 128px; height: auto; }
.cand-tag { position: absolute; top: 12px; left: 12px; padding: var(--space-4) var(--space-10); border-radius: var(--r-pill); background: var(--charcoal); color: var(--stage-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-micro); letter-spacing: .05em; text-transform: uppercase; }
.cand:has(.cand-tag) { box-shadow: var(--sh-lit); }
.cand-b { display: grid; align-content: start; gap: var(--space-10); padding: var(--space-20) var(--space-24) var(--space-24); }
.cand-b .title { margin: 0; }
.cand-what { font-size: .9375rem; line-height: 1.5; }
.cand-why { padding-top: var(--space-12); border-top: var(--hair) solid var(--line); font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.cand-why b { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.cand-why .cand-lab { display: block; margin-bottom: var(--space-4); }

/* ==== the promise: the site's email-harvest unit, one standalone banner, the same everywhere (the operator,
   2026-10-14). Never the result's charcoal, so it never reads as part of the result: a light card inside a heavy
   frame in the four letter colours, a bordure, with Coming soon as a ribbon heading it. The hero is the pair (your
   shield, an arrow, the locked best fit); beside it the heading, the body and the form, whose primary is the
   strongest thing in the box ==== */
.pr { position: relative; container-type: inline-size; margin-top: var(--space-96); padding: var(--space-56) var(--space-56) var(--space-48); background: var(--paper); border-radius: var(--r-lg);
  border: 6px solid; border-color: var(--letter-v) var(--letter-w) var(--letter-m) var(--letter-f); box-shadow: var(--sh-card); }
.pr-ribbon { position: absolute; top: 0; left: 50%; z-index: 1; margin: 0; transform: translate(-50%, calc(-50% - 3px)); }
.pr-ribbon span { display: block; padding: var(--space-12) var(--space-40) var(--space-12); background: var(--ink); color: var(--ground); white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%); }
/* stacked and centred by default; pair and words side by side only where the card itself is wide */
.pr-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-28); }
.pr-pair { display: grid; grid-template-columns: 168px auto 168px; align-items: start; column-gap: var(--space-20); }
.pr-pair figure { margin: 0; display: grid; justify-items: center; gap: var(--space-12); }
.pr-art { display: grid; place-items: end center; width: 168px; aspect-ratio: 238 / 334; }
.pr-art img { width: 100%; height: auto; }
.pr-art .lk { width: 92%; margin-bottom: 15.5%; }   /* the logo's shield drawn to the locked shield's visible size and baseline (the operator, 2026-10-15: the two should be the same size) */
.pr-arrow { align-self: center; margin-top: calc(-1 * var(--space-36)); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-round); box-shadow: var(--ring-15) var(--line-strong); color: var(--ink); }
.pr-arrow .ic { width: 22px; height: 22px; color: currentColor; }
.pr-cap { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center; text-wrap: balance; color: var(--ink); }
/* the locked shield: each quarter fades between its aspect's two letter colours, staggered, still deciding */
.myst { position: relative; display: block; width: 100%; aspect-ratio: 238 / 334; }
.myst-ring, .myst-q { position: absolute; left: 3.36%; top: 7.78%; width: 93.28%; height: 81.44%;
  -webkit-mask: url("../images/shields/small/vrms.svg") center / 100% 100% no-repeat; mask: url("../images/shields/small/vrms.svg") center / 100% 100% no-repeat; }
.myst-ring { background: var(--ink); }
.myst-q { transform: scale(.94); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 46.3% 1fr; gap: var(--space-4); background: var(--white); }
.myst-q i { --a: var(--letter-v); --b: var(--letter-f); background: color-mix(in srgb, var(--a), var(--b)); }
.myst-q i:nth-child(2) { --a: var(--letter-r); --b: var(--letter-w); }
.myst-q i:nth-child(3) { --a: var(--letter-m); --b: var(--letter-c); }
.myst-q i:nth-child(4) { --a: var(--letter-s); --b: var(--letter-p); }
.myst-mark { position: absolute; left: 50%; top: 45.5%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28%; aspect-ratio: 1; border-radius: var(--r-round);
  background: var(--pure-white); color: var(--charcoal); box-shadow: var(--ring-25) var(--charcoal); font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
/* each quarter toggles between its two letter colours, a crisp switch of about 180ms every 1.2 to 1.5s, the four on
   different beats so the shield is still deciding (the operator, 2026-10-14); static under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .myst-q i { animation: myst-decide 2.6s linear infinite; }
  .myst-q i:nth-child(2) { animation-duration: 2.4s; animation-delay: -0.7s; }
  .myst-q i:nth-child(3) { animation-duration: 3s; animation-delay: -1.9s; }
  .myst-q i:nth-child(4) { animation-duration: 2.8s; animation-delay: -1.2s; }
}
@keyframes myst-decide { 0%, 43% { background: var(--a); } 50%, 93% { background: var(--b); } 100% { background: var(--a); } }
.pr-copy { display: grid; justify-items: center; gap: var(--space-12); text-align: center; max-width: 620px; }
.pr-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-headline); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; color: var(--ink); }
.pr-body { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--ink-dim); }
.pr .signup { width: 100%; max-width: 560px; margin-top: var(--space-10); }
.pr .signup-form { justify-items: stretch; width: 100%; }
.pr .em-in { height: 58px; font-size: 1.0625rem; }
.pr .em-go { min-height: 58px; padding: 0 var(--space-32); font-size: var(--text-button-lg); }
.pr .em-go:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.pr .signup-note { max-width: 52ch; }
@container (min-width: 1000px) {
  .pr:not(.pr-compact) .pr-in { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; gap: var(--space-32) var(--space-56); align-items: center; }
  .pr:not(.pr-compact) .pr-copy { justify-items: start; text-align: left; }
}
/* the compact banner (the operator, 2026-10-14): the same component, less tall. One row where the card is wide (the
   small locked shield, the heading, the field and the button), two short rows where it is not; no body, the line under
   the form kept small. The pair keeps only the locked shield */
.pr-compact { margin-top: var(--space-56); padding: var(--space-32) var(--space-32) var(--space-20); }
.pr-compact .pr-ribbon span { padding: var(--space-8) var(--space-32) var(--space-10); font-size: .875rem; }
.pr-compact .pr-you, .pr-compact .pr-arrow, .pr-compact .pr-fit .pr-cap, .pr-compact .pr-body { display: none; }
.pr-compact .pr-in { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: center; gap: var(--space-14) var(--space-20); }
.pr-compact .pr-copy { display: contents; }
.pr-compact .pr-pair { display: block; }
.pr-compact .pr-art { width: 58px; }
.pr-compact .myst-mark { font-size: .875rem; box-shadow: var(--ring-15) var(--charcoal); }
.pr-compact .myst-q { gap: var(--space-2); }
.pr-compact .pr-h { font-size: var(--text-title); text-align: left; }
.pr-compact .signup { grid-column: 1 / -1; max-width: none; margin-top: 0; gap: var(--space-6); }
.pr-compact .em-in, .pr-compact .em-go { height: 52px; min-height: 52px; }
.pr-compact .em-go { font-size: var(--text-button); padding: 0 var(--space-24); }
.pr-compact .signup-note { font-size: .8125rem; text-align: left; }
@container (min-width: 700px) {
  .pr-compact .pr-in { grid-template-columns: auto minmax(0, 1fr) minmax(380px, 450px); gap: var(--space-14) var(--space-24); }
  .pr-compact .pr-h { font-size: 1.1875rem; }
  .pr-compact .em-go { padding: 0 var(--space-20); }
  .pr-compact .signup { grid-column: auto; }
}
/* a narrow card, a phone or a method page's reading column (the operator, 2026-10-15): the pair shrinks to fit */
@container (max-width: 600px) {
  .pr-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-8); width: 100%; max-width: 330px; }
  .pr-art { width: 100%; max-width: 128px; }
  .pr-compact .pr-art { width: 58px; max-width: none; }
  .pr-arrow { width: 36px; height: 36px; margin-top: calc(-1 * var(--space-32)); }
  .pr-arrow .ic { width: 18px; height: 18px; }
  .pr .em-row { flex-wrap: wrap; }
  .pr .em-in, .pr .em-go { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .pr { margin-top: var(--space-72); padding: var(--space-48) var(--space-20) var(--space-28); border-width: 5px; }
  .pr-compact { margin-top: var(--space-48); padding: var(--space-28) var(--space-16) var(--space-16); }
  .pr-compact .pr-art { width: 46px; max-width: none; }
  .pr-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--space-8); width: 100%; max-width: 330px; }
  .pr-art { width: 100%; max-width: 128px; }
  .pr-arrow { width: 36px; height: 36px; margin-top: calc(-1 * var(--space-32)); }
  .pr-arrow .ic { width: 18px; height: 18px; }
  .pr-cap { font-size: .9375rem; }
  .myst-mark { font-size: 1.375rem; }
  .pr-ribbon span { padding: var(--space-10) var(--space-32) var(--space-12); font-size: .9375rem; }
  .pr-h { font-size: var(--text-title); }
}

/* ==== break, hold or gain: three things change can do to a career (the Why page and home) ==== */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-14); }
.tw { display: grid; justify-items: center; align-content: start; gap: var(--space-4); padding: var(--space-24) var(--space-16) var(--space-24); border-radius: var(--r-lg); background: var(--stone); text-align: center; }
.tw-art { display: grid; place-items: center; height: 168px; margin-bottom: var(--space-8); }
.tw-art img { width: 160px; height: auto; }
.tw-k { order: 3; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: var(--ink-dim); }
.tw-h { font-family: var(--font-display); font-weight: 800; font-size: var(--text-headline); line-height: 1.05; letter-spacing: -0.025em; }
.three figcaption { grid-column: 1 / -1; margin-top: var(--space-8); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
/* ==== previous and next, at the foot: text and tiles on white, breadcrumb style ==== */
.sec-tn { padding-top: var(--space-96); }
/* the pager, one on method, aspect and type pages (the operator, 2026-10-15, pick 6b): the Next page as a big card with
   its drawing or shield, Previous a small line under it, at the body text's width */
.pg { display: grid; gap: var(--space-14); max-width: min(100%, var(--prose-w, var(--container-read))); }
.pg-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-24); padding: var(--space-40) var(--space-36); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--ring-15) var(--ink-dim); text-decoration: none; color: var(--ink); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.pg-tx { display: grid; gap: var(--space-6); min-width: 0; }
.pg-k { font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.pg-t b { font-family: var(--font-display); font-weight: 800; font-size: 2.125rem; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.pg-arr { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--r-round); background: var(--ink); color: var(--ground); transition: transform var(--dur) var(--ease-out); }
.pg-arr .ic { width: 22px; height: 22px; color: currentColor; }
a.pg-next:hover { box-shadow: var(--ring-15) var(--ink); }
a.pg-next:hover .pg-arr { transform: translateX(4px); }
a.pg-next:focus-visible, a.pg-prev:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.pg-soon { box-shadow: none; border: 1.5px dashed var(--line-strong); background: transparent; }
.pg-soon .pg-t b { color: var(--ink-dim); }
.pg-soon .pg-arr { background: var(--line-strong); }
.pg-prev { display: inline-flex; align-items: baseline; gap: var(--space-8); min-height: 44px; align-content: center; flex-wrap: wrap; justify-self: start; padding-block: var(--space-8); text-decoration: none; color: var(--ink-dim); }
.pg-prev .pg-k { letter-spacing: .06em; }
.pg-pt b { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a.pg-prev:hover .pg-pt b { text-decoration-color: currentColor; }
.pg-soon .pg-pt b { color: var(--ink-dim); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .pg-next, .pg-arr { transition: none; } a.pg-next:hover .pg-arr { transform: none; } }
@media (max-width: 560px) { .pg-next { padding: var(--space-28) var(--space-20); gap: var(--space-14); } .pg-t b { font-size: 1.625rem; } .pg-arr { width: 48px; height: 48px; } }
.pg-next:has(.pg-art) { grid-template-columns: auto minmax(0, 1fr) auto; }
.pg-next:has(.pg-art) { padding: var(--space-32) var(--space-28); gap: var(--space-20); }
.pg-next:has(.pg-art) .pg-t b { font-size: 1.75rem; }
.pg-art { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100px; height: 88px; border-radius: var(--r-md); background: var(--stone); }
.pg-art img { height: 56px; width: auto; }
.pg-soon .pg-art > * { filter: grayscale(1); opacity: .45; }
@media (max-width: 560px) { .pg-next:has(.pg-art) { padding: var(--space-24) var(--space-20); gap: var(--space-14); } .pg-next:has(.pg-art) .pg-t b { font-size: 1.5rem; } .pg-art { width: 76px; height: 64px; } .pg-art img { height: 40px; } }

/* ==== the footer, the page's full width ==== */
.foot { margin-top: var(--space-96); font-family: var(--font-display); }
.foot-in { padding: var(--space-40) var(--space-32) var(--space-24); max-width: var(--frame); margin-inline: auto; }
/* compact, 2026-10-15 (operator: the footer "is gigantic"): one line per family with its four types, two short lists, the
   newsletter as one row, the legal row; the same order as the menu */
.foot-g { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-28) var(--space-48); }
.foot-k { display: block; margin-bottom: var(--space-10); font-weight: 700; font-size: .9375rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.foot-col a:not(.btn), .foot-col span, .legal a { font-weight: 500; font-size: .875rem; line-height: 1.6; color: var(--stage-ink); text-decoration: none; }
.foot-col span, .foot-soon { color: var(--on-stage-dim); }
.foot-col a:not(.btn):hover, .legal a:hover, .foot-fam-h:hover b { text-decoration: underline; text-underline-offset: .12em; }
.foot .soon-k { background: var(--stage-raised); color: var(--on-stage-dim); font-size: .75rem; }
.foot-fams { gap: var(--space-10); }
.foot-fam { display: grid; gap: var(--space-2); }
.foot-fam-h { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--stage-ink); text-decoration: none; font-weight: 700; font-size: .875rem; }
.foot-fam-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-8); padding-left: var(--space-2); }
.foot-fam-t i { font-style: normal; color: var(--on-stage-dim); }
.foot-go { grid-column: 3; margin-top: calc(-1 * var(--space-12)); }   /* under Go deeper on a laptop, a row of its own on a phone */
.foot-go .btn { white-space: nowrap; }
.foot .scan-note { font-size: .8125rem; color: var(--on-stage-dim); }
.foot-nl { margin-top: var(--space-32); padding-top: var(--space-24); border-top: var(--hair) solid var(--stage-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-16) var(--space-48); align-items: center; }
.foot-b { display: block; font-weight: 800; font-size: var(--text-title); letter-spacing: -0.015em; line-height: 1.2; }
.foot-nl p { margin: var(--space-4) 0 0; max-width: 46ch; font-size: .9375rem; line-height: 1.45; color: var(--on-stage-dim); }
.foot-nl .signup { gap: var(--space-8); max-width: 440px; }
.foot-nl .signup-note { font-size: .8125rem; }
.foot .em-in { font-family: var(--font-display); }
.foot .quiet { color: var(--stage-ink); }
.foot-row { margin-top: var(--space-24); padding-top: var(--space-12); border-top: var(--hair) solid var(--stage-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-32); }
.foot-row .legal { margin-top: 0; display: flex; gap: 0 var(--space-24); }
/* the bottom row: Privacy, Back to the top and the copyright in one face, size, weight and colour, on one line, each a 44px target */
.foot-row .legal a, .foot-row .legal .quiet, .foot .copy { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 500; font-size: .875rem; line-height: 1.4; color: var(--on-stage-dim); text-decoration: none; }
.foot .copy a { margin-left: .3em; color: var(--on-stage-dim); text-decoration: underline; text-underline-offset: .15em; }
.foot-row .legal a:hover, .foot .copy a:hover { color: var(--stage-ink); text-decoration: underline; }
.copy { font-family: var(--font-display); font-weight: 500; font-size: .875rem; color: var(--ink-dim); }
.copy a { color: var(--stage-ink); }
.legal { margin-top: var(--space-48); display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-28); }
.legal a { color: var(--ink-dim); }

/* a short message for share and copy-link, never "copied" unless it was */
.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 32px); padding: var(--space-10) var(--space-16); border-radius: var(--r-md); background: var(--charcoal); color: var(--stage-ink); box-shadow: var(--sh-toast); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.toast:empty { display: none; }
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: inline-flex; align-items: center; gap: var(--space-6); min-height: 44px; padding: 0 var(--space-16); border: 0; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-float); font-family: var(--font-display); font-weight: 600; font-size: .9375rem; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur); }
.to-top.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ==== dark: drawings keep a light plate; the P tile and plate lighten ==== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tiles i[style*="--letter-p"] { background: var(--p-light); box-shadow: var(--ring-1) var(--line-strong); }
  :root:not([data-theme="light"]) .foot { box-shadow: var(--sh-rule-up); }
  :root:not([data-theme="light"]) .plate { border-radius: var(--r-md); }
  :root:not([data-theme="light"]) .list-scene .draw { background: var(--plate-light); border-radius: var(--r-md); }
  :root:not([data-theme="light"]) .types .tc:not(.lit) .pl { opacity: 1; }
  :root:not([data-theme="light"]) .pl[style*="--letter-p"] { background: var(--p-light) !important; }
  :root:not([data-theme="light"]) .types .tc:not(.lit) .pl:not([style*="--letter-p"]) { filter: brightness(.8) saturate(.85); }
  :root:not([data-theme="light"]) :is(.sx-ch, .sx-rh) img { background: var(--plate-light); border-radius: var(--r-md); padding: var(--space-4); }
}
:root[data-theme="dark"] .tiles i[style*="--letter-p"] { background: var(--p-light); box-shadow: var(--ring-1) var(--line-strong); }
:root[data-theme="dark"] .foot { box-shadow: var(--sh-rule-up); }
:root[data-theme="dark"] .plate { border-radius: var(--r-md); }
:root[data-theme="dark"] .list-scene .draw { background: var(--plate-light); border-radius: var(--r-md); }
:root[data-theme="dark"] .types .tc:not(.lit) .pl { opacity: 1; }
:root[data-theme="dark"] .pl[style*="--letter-p"] { background: var(--p-light) !important; }
:root[data-theme="dark"] .types .tc:not(.lit) .pl:not([style*="--letter-p"]) { filter: brightness(.8) saturate(.85); }
:root[data-theme="dark"] :is(.sx-ch, .sx-rh) img { background: var(--plate-light); border-radius: var(--r-md); padding: var(--space-4); }

/* ==== motion: each thing moves once as it comes into view; hidden states hang off a class the script adds ==== */
@media (prefers-reduced-motion: no-preference) {
  html.motion .rise { transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  html.motion .rise:not(.in) { opacity: 0; transform: translateY(14px); }
  html.motion .fig { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  html.motion .fig:not(.in) { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: no-preference) {
}
@media print {
  .rise, .fig { opacity: 1 !important; transform: none !important; }
  .bar, .mfam, .pnav, .rail, .to-top, .signup-form, .anc { display: none !important; }
  .page { display: block; }
  .card, .ground, .tiles i, .pl, .plate, .tc.lit, .stage-dark, .sx-f, .fam { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==== widths ==== */
@media (max-width: 999.98px) { .mnav, .theme-c { display: none; } .burger { display: grid; } }
@media (max-width: 1100px) {
  :root { --chapter-gap: var(--space-72); --section-gap: var(--space-64); }
  .page { display: block; max-width: none; }
  .rail { display: none; }
  .pnav { display: block; position: sticky; top: 60px; z-index: 40; background: var(--white); box-shadow: var(--sh-rule); transition: background-color var(--dur) var(--ease-out); }
  html.js:not(.scrolled) .pnav { background: transparent; }
  .pnav details { position: relative; }
  .pnav summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); height: 48px; padding: 0 var(--space-20); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
  .pnav summary::-webkit-details-marker { display: none; }
  .pnav-list { position: absolute; left: 0; right: 0; top: 48px; background: var(--white); box-shadow: var(--sh-drop); display: grid; padding: var(--space-4) var(--space-12) var(--space-12); max-height: 70vh; overflow-y: auto; }
  .pnav-list a { padding: var(--space-12) var(--space-8); font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-dim); text-decoration: none; }
  .pnav-list a.on { color: var(--ink); }
  /* every chapter and its subheadings from the start (operator, 2026-10-14); the bar names where you are */
  .pnav-list a.pn-ch:not(:first-child) { margin-top: var(--space-4); border-top: var(--hair) solid var(--line); }
  .pnav-list a.pn-sub { padding: var(--space-10) var(--space-8) var(--space-10) var(--space-24); font-weight: 500; font-size: .9375rem; line-height: 1.35; }
  .pnav-list a.pn-sub.on { font-weight: 700; }
  #pnav-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.js .pnav details:not([open]) .pnav-list { display: none; }
  .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
  .prog i { display: block; height: 100%; width: 0; background: var(--ink); }
  .pmain { padding: var(--space-28) var(--space-24) 0; }
  .sec { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-20); }
  .ch-h { max-width: none; }
  html { scroll-padding-top: 124px; }
}
@media (max-width: 1000px) {
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-g > .foot-types { grid-column: 1 / -1; }
  .foot-go { grid-column: 2; }
  .foot-nl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .scale { --endw: 60px; column-gap: var(--space-12); }
  .ab { grid-template-columns: 52px minmax(0, 1fr) 52px; column-gap: var(--space-10); padding: var(--space-16) 0 var(--space-20); }
  .ab-end img { width: 48px; height: 48px; }
  .ab-res { font-size: var(--text-title); }
  .em-row { flex-wrap: wrap; }
  .em-in, .em-go { flex: 1 1 100%; }
  .trk-e { font-size: .8125rem; gap: var(--space-6); }
  .sc-lab { font-size: 1.0625rem; }
  .sixteen { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .sx-ch, .sx-rh, .sx-corner { display: none; }
  .sx-key { grid-column: 1; order: -1; justify-content: flex-start; gap: var(--space-6) var(--space-20); padding: 0 0 var(--space-6); }
  .sx-ax { display: block; margin-top: var(--space-2); }
  .sx-fh { align-items: flex-start; }
  .sx-f { padding: var(--space-14) var(--space-12) var(--space-12); gap: var(--space-10); }
  .sx-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .sx-t { padding: var(--space-12) var(--space-8) var(--space-10); gap: var(--space-6); }
  .sx-t img { max-width: 120px; }
  .sx-n { font-size: .875rem; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
  .fam { padding: var(--space-24) var(--space-20) var(--space-24); }
  .fam-gb { grid-template-columns: minmax(0, 1fr); }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .tw { padding: var(--space-14) var(--space-6) var(--space-16); }
  .tw-art { height: 92px; }
  .tw-art img { width: 88px; }
  .tw-h { font-size: 1rem; }
  .tw-k { font-size: .75rem; }
  .bt tbody th, .bt tbody td, .bt thead th { padding-right: var(--space-14); }
}
@media (max-width: 700px) {
  :root { --chapter-gap: var(--space-56); --section-gap: var(--space-48); }   /* 52 before the scale of 2026-10-15 */
  .pmain { padding: var(--space-20) var(--space-16) 0; }
  .h3 { font-size: 1.5rem; }
  .lead, .ch-lead { font-size: 1.125rem; }
  .ground { padding: var(--space-16); }
  .tc { padding: var(--space-16); }
  .list-scene { --mk: 72px; } .list-scene .draw { width: 72px; height: 72px; } .list-scene .draw img { width: 60px; }
  .list-scene > li { column-gap: var(--space-16); }
  .list-draw { --mk: 44px; } .plate { width: 44px; height: 44px; } .plate img { width: 36px; height: 36px; }
  .foot-in { padding: var(--space-32) var(--space-20) var(--space-20); }
  .foot-go { grid-column: 1 / -1; margin-top: 0; }
  .foot-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24) var(--space-20); }
  .foot-nl { margin-top: var(--space-24); padding-top: var(--space-20); }
  .foot-go .scan-call { justify-items: stretch; }
  .foot-go .btn { width: 100%; justify-content: center; }
  .foot-go .scan-note { text-align: center; }
  .sec-tn { padding-top: var(--space-72); }
  .callout { padding: var(--space-24) var(--space-20) var(--space-24); }
}
@media (max-width: 560px) {
  .to-top { padding: 0; width: 44px; justify-content: center; font-size: 0; left: auto; right: 12px; bottom: 12px; }
  .to-top span { font-size: 1.125rem; }
  /* the phone header keeps the wordmark (the operator, 2026-10-14): a smaller size, tighter gaps, a compact call */
  .bar-in { padding: 0 var(--space-12); gap: var(--space-6); }
  .lockup { gap: var(--space-6); min-width: 0; }
  .lockup img { height: 24px; }
  .wordmark { font-size: var(--text-wordmark-sm); white-space: nowrap; }
  .mfam { display: none; }   /* the phone menu opens Go deeper on these pages (the operator, 2026-10-14) */
  .bar-cta { gap: var(--space-6); } .bar-cta .btn-sm { padding: 0 var(--space-12); white-space: nowrap; }
  .types { gap: var(--space-8); }
  :root { --card-title: 1.125rem; }
  .tc .plates .pl { width: 36px; height: 36px; }
}

/* the plain pages, privacy and not found (2026-10-15: their own lines here, so they no longer load home's layer) */
.pv-main { display: block; }
.pv { max-width: 760px; margin: 0 auto; padding: var(--space-72) var(--space-32) 0; }
.pv-h { margin: 0 0 var(--space-20); font-family: var(--font-display); font-weight: 800; font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.035em; }
.pv-sec { padding-top: var(--space-48); }
.pv-sec p { margin-top: var(--space-12); max-width: 64ch; font-size: 1.0625rem; line-height: 1.6; }
.pv-404 { padding-bottom: var(--space-48); }
.pv-act { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.pv-act .btn { flex: 1 1 auto; justify-content: center; }
.pv-act > .scan-call { flex: 1 1 auto; justify-items: stretch; }
.pv-act > .scan-call .scan-note { text-align: center; }

/* forgetting the result this browser keeps (site.js, 2026-10-15) */
.forgot { font: 500 .875rem/1.4 var(--font-display); color: var(--ink-dim); }
.rs-share .forget { align-self: center; }

/* the landing pages of the three top menu items (site_landings.py, 2026-10-15): the menu's own cards at page size */
.ld { max-width: 1040px; }
.ld-deep { margin-top: var(--space-16); font-family: var(--font-display); font-weight: 600; }
.ld-deep a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.ld-deep a:hover { text-decoration-color: currentColor; }
.ld-cards { margin-top: var(--space-48); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.ld-cards .mcard { background: var(--paper); box-shadow: var(--sh-card); }
.ld-cards .mcard-soon { background: transparent; box-shadow: none; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.ld-cards .mcard-art { height: 140px; }
.ld-cards .mcard-art img { height: 96px; }
.ld-types { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-32); align-items: start; margin-top: var(--space-48); }
.ld-types .tmap { margin: var(--space-12) 0 0; }
.ld-types .tfams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.ld-fam { scroll-margin-top: var(--space-80); padding: var(--space-24) var(--space-20) var(--space-20); }
.ld-fam h2.tfam-h { margin: 0; font-size: var(--card-title); }
.ld-fam p { font-size: .9375rem; }
.ld-fam .tcells { gap: var(--space-12); }
.ld-fam .tcell { padding: var(--space-14) var(--space-8); font-size: .9375rem; }
.ld-fam .tcell-s img { height: 96px; }
.ld-call { margin: var(--space-64) 0 var(--space-96); }
@media (max-width: 860px) { .ld-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ld-types { grid-template-columns: minmax(0, 1fr); } .ld-types .tmap { max-width: 200px; } }
@media (max-width: 640px) { .ld-types .tfams { grid-template-columns: minmax(0, 1fr); } .ld-fam .tcell-s img { height: 80px; } }
@media (max-width: 520px) { .ld-cards { grid-template-columns: minmax(0, 1fr); } }

/* the footer's Go deeper heading and the strip's label lead to Go deeper's landing page (2026-10-15), looking as before */
.foot-col a.foot-k { font-weight: 700; font-size: .9375rem; line-height: 1.3; color: var(--stage-ink); text-decoration: none; }
.foot-col a.foot-k:hover { text-decoration: underline; text-underline-offset: .12em; }
a.mfam-k { text-decoration: none; }
a.mfam-k:hover { text-decoration: underline; text-underline-offset: .12em; }

/* the drawer's way to a section's landing page, first in each section (2026-10-15) */
.dr-all { display: inline-flex; align-items: center; gap: var(--space-6); min-height: 44px; margin: var(--space-4) 0 var(--space-8); font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
.dr-all[aria-current] { text-decoration-color: currentColor; }