/* 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: 32px; --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: 96px; --section-gap: 72px;   /* tightened 2026-10-14 (operator): 144 and 88 before */
  --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 the same light fade, the Varied tint at 5% easing into the page's white over its first 560px,
   under the top bar (the operator, 2026-10-15: "I kind of like that as a feel ... make sure that all the pages have
   that"; it was home's hero and the scan's alone) */
body { margin: 0; background: linear-gradient(180deg, var(--tint-v-soft), var(--white) 560px) 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: 10px var(--s-4); 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 20px; 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(--s-7) 0 20px; 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(--s-2); }
.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(--s-4); }
.prose + .list, .prose + .method { margin-top: 28px; }
.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(--s-2); min-height: 52px; padding: 0 26px; 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 18px; font-size: var(--text-button-sm); }
.btn-lg { min-height: 56px; padding: 0 30px; 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(--s-1); 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(--s-3); padding: 0 var(--s-5); max-width: var(--frame); margin-inline: auto; }
.lockup { display: flex; align-items: center; gap: 10px; 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: 2px; padding: 3px; 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(--s-2); 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: 28px; 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: 10px; height: 60px; padding: 0 14px; 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-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: 28px var(--s-5) 30px; }
.mcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
/* 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(--s-3); }
.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(--s-2); align-content: start; height: 100%; padding: var(--s-3) var(--s-3) var(--s-4); 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(--s-1); height: 120px; margin-bottom: 6px; 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(--s-4); }
.tfam { padding: var(--s-4) 14px 14px; 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: 10px; 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(--s-1) 0 var(--s-3); 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(--s-3) 14px; 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(--s-5); align-items: start; }
.tmap { margin: 110px 0 0; font-family: var(--font-display); }
.dr-b .tmap { margin: 18px 0 var(--s-1); max-width: 190px; }
.tcells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.tcell { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 10px; 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(--s-4); 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(--s-1) 20px var(--s-5); }
.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 18px; }
.dr-pgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.dr-pg { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-2); 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(--s-1); }
.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: 10px 0 6px; }
.dr-cells { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dr-cells .tcell { grid-template-columns: 30px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; padding: 6px var(--s-2); 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(--s-3); padding: 18px 0 0; }
.dr-theme .label { text-transform: none; letter-spacing: 0; font-size: var(--text-small); }
.dr-foot { flex: none; padding: var(--s-3) 20px var(--s-4); box-shadow: var(--sh-rule-up); background: var(--white); }
.dr-foot .scan-call { justify-items: stretch; gap: 6px; }
.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(--s-4); padding: 0 var(--s-5); 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(--s-1) 22px; }
.mfam a, .mfam .soon { display: inline-flex; align-items: center; gap: var(--s-2); 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: 2px 7px; 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: 40px 20px var(--s-6) var(--s-5); scrollbar-width: thin; }
.rail-id { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); align-items: center; margin-bottom: var(--s-5); }
.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: 1px; }
.rail-l a.r { position: relative; display: block; padding: 7px 10px 7px var(--s-4); 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: 2px 0 var(--s-2); padding: 0 0 0 var(--s-3); display: none; }
.ch-l.open > .subs { display: grid; }
.subs a.r { font-size: .875rem; padding: 5px 10px 5px var(--s-4); }
/* 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: 10px; }
.scan-note { margin: 0; font: 500 .875rem/1.4 var(--font-display); color: var(--ink-dim); }
.rail-cta { margin-top: 28px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--stone); display: grid; gap: 10px; justify-items: start; }
.rail-cta .scan-call { justify-items: stretch; gap: var(--s-2); }
.rail-cta .btn { justify-content: center; text-align: center; }
.rail-cta .scan-note { font-size: .8125rem; text-align: center; }
.rail-hint { margin-top: var(--s-4); 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(--s-1); 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(--s-6) var(--s-6) 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(--s-4); max-width: 60ch; }
.ch-h + .sec { padding-top: 36px; }

/* ---- the copy-link icon on every heading ---- */
.anc { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 6px; 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, 26px); max-width: var(--measure); }
.list > li { display: grid; grid-template-columns: var(--mk) minmax(0, 1fr); column-gap: 18px; align-items: start; }
.list .lead-in { display: block; margin-bottom: 3px; }
.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: 9px; } .list-quote .mk { padding-top: var(--s-3); }
.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: 1px; }
.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: 22px; }
.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: 3px; }
.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(--s-2); margin: 10px 0 0; padding: 3px var(--s-3) 3px var(--s-1); 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(--s-6); }
.sp { margin-top: var(--s-1); }
.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: 14px; }
.tc { padding: 20px; display: grid; gap: 10px; align-content: start; }
.tc .title { margin: var(--s-1) 0 0; }
.tc p { font-size: .9375rem; line-height: 1.5; color: var(--ink-dim); }
.plates { display: flex; gap: 6px; }
.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(--s-1); 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: 3px; }
.tiles-m { --tile-w: 26px; --tile-h: 30px; --tile-r: var(--r-tile-m); --tile-fs: .9375rem; --tile-gap: 4px; }
.tiles-l { --tile-w: 52px; --tile-h: 60px; --tile-r: var(--r-tile-l); --tile-fs: var(--text-headline); --tile-gap: 6px; }
.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: 28px; 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(--s-3); 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(--s-3); 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(--s-2); }
.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: 40px 0; max-width: var(--prose, var(--measure)); padding: 26px 30px 28px; border-radius: var(--r-lg); background: var(--stone); display: grid; gap: 10px; }
.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: 13px 28px 11px 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(--s-4) 28px var(--s-4) 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: 18px; }
.bt tbody tr:last-child > * { padding-bottom: 18px; }
.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: 14px; }
.sx-ch { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 2px; }
.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: 6px; text-align: center; }
.sx-f { display: grid; gap: 14px; align-content: start; padding: 18px var(--s-4) 18px; 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: 10px; padding: 0 var(--s-1); 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: 10px; }
.sx-t { display: grid; justify-items: center; gap: 6px; padding: 14px 10px var(--s-3); 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(--s-2) 36px; padding: 0 0 10px; margin-bottom: var(--s-1); 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: 14px; }
.sx-k { display: inline-flex; align-items: center; gap: 6px; 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: 14px; padding: 28px 30px 30px; 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: 14px; 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(--s-4); margin-top: 6px; }
.fam-gb > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: var(--s-4) 18px; border-radius: var(--r-md); background: color-mix(in srgb, var(--white) 78%, transparent); }
.fam-gb b { display: block; margin-bottom: var(--s-1); 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(--s-3); 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: 10px; justify-items: start; }
.em-row { display: flex; gap: var(--s-2); width: 100%; }
.em-in { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 22px; 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: 6px 14px; 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: 6px var(--s-4); padding: 14px var(--s-5); 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(--s-3); 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(--s-5); align-items: center; padding: 20px 0 22px; 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: 6px; 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(--s-2); 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(--s-3); margin-top: var(--s-1); 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: 20px; }
.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(--s-5) 20px 20px; 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: 3px; 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(--s-1) 10px; 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: 10px; padding: 18px 22px 22px; }
.cand-b .title { margin: 0; }
.cand-what { font-size: .9375rem; line-height: 1.5; }
.cand-why { padding-top: var(--s-3); 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(--s-1); }

/* ==== 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: 88px; padding: 52px 52px 44px; 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: 11px 40px var(--s-3); 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: 28px; }
.pr-pair { display: grid; grid-template-columns: 168px auto 168px; align-items: start; column-gap: 18px; }
.pr-pair figure { margin: 0; display: grid; justify-items: center; gap: var(--s-3); }
.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: -36px; 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(--s-1); 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(--s-3); 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: 10px; }
.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 30px; 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(--s-6) 56px; 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: 56px; padding: 30px 30px 20px; }
.pr-compact .pr-ribbon span { padding: var(--s-2) 30px 9px; 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: 14px 18px; }
.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: 2px; }
.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: 6px; }
.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(--s-5); }
.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: 14px 22px; }
  .pr-compact .pr-h { font-size: 1.1875rem; }
  .pr-compact .em-go { padding: 0 20px; }
  .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(--s-2); 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: -32px; }
  .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: 72px; padding: 44px 18px 26px; border-width: 5px; }
  .pr-compact { margin-top: var(--s-7); padding: 28px var(--s-4) var(--s-4); }
  .pr-compact .pr-art { width: 46px; max-width: none; }
  .pr-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--s-2); width: 100%; max-width: 330px; }
  .pr-art { width: 100%; max-width: 128px; }
  .pr-arrow { width: 36px; height: 36px; margin-top: -32px; }
  .pr-arrow .ic { width: 18px; height: 18px; }
  .pr-cap { font-size: .9375rem; }
  .myst-mark { font-size: 1.375rem; }
  .pr-ribbon span { padding: 10px 30px 11px; 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: 14px; }
.tw { display: grid; justify-items: center; align-content: start; gap: var(--s-1); padding: 22px var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--stone); text-align: center; }
.tw-art { display: grid; place-items: center; height: 168px; margin-bottom: var(--s-2); }
.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(--s-2); 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(--s-9); }
/* 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: 14px; 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(--s-5); padding: 38px 34px; 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: 6px; 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(--s-2); min-height: 44px; align-content: center; flex-wrap: wrap; justify-self: start; padding-block: var(--s-2); 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: 26px 20px; gap: 14px; } .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: 30px 28px; gap: 20px; }
.pg-next:has(.pg-art) .pg-t b { font-size: 1.75rem; }
.pg-art { display: flex; align-items: center; justify-content: center; gap: var(--s-1); 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: 22px 18px; gap: 14px; } .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(--s-9); font-family: var(--font-display); }
.foot-in { padding: 40px var(--s-6) var(--s-5); 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: 28px var(--s-7); }
.foot-k { display: block; margin-bottom: 10px; font-weight: 700; font-size: .9375rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.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: 10px; }
.foot-fam { display: grid; gap: 2px; }
.foot-fam-h { display: inline-flex; align-items: center; gap: var(--s-2); 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(--s-2); padding-left: 2px; }
.foot-fam-t i { font-style: normal; color: var(--on-stage-dim); }
.foot-go { grid-column: 3; margin-top: -12px; }   /* 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(--s-6); padding-top: var(--s-5); border-top: var(--hair) solid var(--stage-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s-4) var(--s-7); 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(--s-1) 0 0; max-width: 46ch; font-size: .9375rem; line-height: 1.45; color: var(--on-stage-dim); }
.foot-nl .signup { gap: var(--s-2); 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(--s-5); padding-top: var(--s-3); border-top: var(--hair) solid var(--stage-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.foot-row .legal { margin-top: 0; display: flex; gap: 0 var(--s-5); }
/* 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(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-2) 28px; }
.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: 10px var(--s-4); 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: 6px; min-height: 44px; padding: 0 var(--s-4); 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: 3px; }
}
: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: 3px; }

/* ==== 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: 72px; --section-gap: 60px; }
  .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(--s-3); height: 48px; padding: 0 20px; 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(--s-1) var(--s-3) var(--s-3); max-height: 70vh; overflow-y: auto; }
  .pnav-list a { padding: var(--s-3) var(--s-2); 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(--s-1); border-top: var(--hair) solid var(--line); }
  .pnav-list a.pn-sub { padding: 9px var(--s-2) 9px var(--s-5); 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: 28px var(--s-5) 0; }
  .sec { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .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(--s-3); }
  .ab { grid-template-columns: 52px minmax(0, 1fr) 52px; column-gap: 10px; padding: var(--s-4) 0 18px; }
  .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: 6px; }
  .sc-lab { font-size: 1.0625rem; }
  .sixteen { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sx-ch, .sx-rh, .sx-corner { display: none; }
  .sx-key { grid-column: 1; order: -1; justify-content: flex-start; gap: 6px 20px; padding: 0 0 6px; }
  .sx-ax { display: block; margin-top: 2px; }
  .sx-fh { align-items: flex-start; }
  .sx-f { padding: 14px var(--s-3) var(--s-3); gap: 10px; }
  .sx-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .sx-t { padding: var(--s-3) var(--s-2) 10px; gap: 6px; }
  .sx-t img { max-width: 120px; }
  .sx-n { font-size: .875rem; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
  .fam { padding: 22px 20px 22px; }
  .fam-gb { grid-template-columns: minmax(0, 1fr); }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .tw { padding: 14px 6px var(--s-4); }
  .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: 14px; }
}
@media (max-width: 700px) {
  :root { --chapter-gap: 56px; --section-gap: 52px; }
  .pmain { padding: 20px var(--s-4) 0; }
  .h3 { font-size: 1.5rem; }
  .lead, .ch-lead { font-size: 1.125rem; }
  .ground { padding: var(--s-4); }
  .tc { padding: var(--s-4); }
  .list-scene { --mk: 72px; } .list-scene .draw { width: 72px; height: 72px; } .list-scene .draw img { width: 60px; }
  .list-scene > li { column-gap: var(--s-4); }
  .list-draw { --mk: 44px; } .plate { width: 44px; height: 44px; } .plate img { width: 36px; height: 36px; }
  .foot-in { padding: var(--s-6) 20px 20px; }
  .foot-go { grid-column: 1 / -1; margin-top: 0; }
  .foot-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5) 20px; }
  .foot-nl { margin-top: var(--s-5); padding-top: 20px; }
  .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: 72px; }
  .callout { padding: 22px 20px var(--s-5); }
}
@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(--s-3); gap: 6px; }
  .lockup { gap: 6px; 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: 6px; } .bar-cta .btn-sm { padding: 0 var(--s-3); white-space: nowrap; }
  .types { gap: var(--s-2); }
  :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: 72px var(--s-6) 0; }
.pv-h { margin: 0 0 20px; 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(--s-7); }
.pv-sec p { margin-top: var(--s-3); max-width: 64ch; font-size: 1.0625rem; line-height: 1.6; }
.pv-404 { padding-bottom: var(--s-7); }
.pv-act { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.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; }