/* Tokenova design tokens — the ONLY place raw colour values may appear (G.4).
Skin "Chrome Signal" (2026-10-08, Q14): charcoal ink + one signal-lime accent (hue ≈121°), Bitter headlines (2026-10-12, thay Be Vietnam Pro),
Noto Sans body, Y2K used only as accents (chrome hairlines, glossy pill buttons, sparkle), channel colour-coding kept.
Previous skin "Ledger Green" archived outside the shell. */
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/assets/fonts/bitter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700 900; font-display: swap;
src: url("/assets/fonts/bitter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("/assets/fonts/noto-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
src: url("/assets/fonts/noto-sans-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* metric-matched fallbacks so the swap does not shift layout */
@font-face { font-family: "Bitter Fallback"; src: local("Georgia"); size-adjust: 102%; ascent-override: 92%; descent-override: 25%; }
@font-face { font-family: "Noto Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 102%; descent-override: 28%; }
:root {
color-scheme: light;
/* primary — signal lime, hue ≈121° (500 = fills/buttons with dark text; 700+ = text-safe) */
--primary-50: #EAFBEA; --primary-100: #CFF5D0; --primary-200: #A4EBA6; --primary-300: #6FDE72; --primary-400: #45D449;
--primary-500: #2BD12F; --primary-600: #1FB023; --primary-700: #1A7A1D; --primary-800: #125915; --primary-900: #0B3D0C;
/* neutrals — cool grey around the charcoal ink */
--neutral-0: #FFFFFF; --neutral-25: #FCFCFD; --neutral-50: #F5F6F8; --neutral-100: #ECEDF0; --neutral-200: #DFE0E3;
--neutral-300: #C2C4C9; --neutral-400: #9A9DA3; --neutral-500: #74777D; --neutral-600: #5F6166; --neutral-700: #44464B;
--neutral-800: #2B2D31; --neutral-900: #222222; --neutral-950: #1B1D21;
/* accent — market red for warnings/down moves */
--accent-300: #FF9C8F; --accent-500: #D91400; --accent-700: #9C0E00;
/* semantic */
--success-bg: #E6F4EC; --success-fg: #00612A; --success-border: #8CCBA6;
--warning-bg: #FFF4DC; --warning-fg: #6B4A00; --warning-border: #E2B54E;
--danger-bg: #FDECEA; --danger-fg: #9C0E00; --danger-border: #E59A93;
--info-bg: #E8F1FA; --info-fg: #164F86; --info-border: #93BCE3;
--up: #007C32; --down: #D91400;
/* channel colours (category-color-coded) — text-safe on the page background (≥5.5:1) */
--ch-payments: #1E64A8; --ch-banking: #7A5A00; --ch-open-finance: #00706A; --ch-lending: #A3245E;
--ch-regtech: #5543A0; --ch-security: #B3261E; --ch-digital-assets: #86198F; --ch-wealthtech: #475569;
--ch-tools: #2B2D31; --ch-glossary: #44464B; --ch-site: #1A7A1D;
/* surfaces */
--bg: var(--neutral-50); --surface-1: var(--neutral-25); --surface-2: var(--neutral-100); --surface-3: var(--neutral-200);
--text: var(--neutral-950); --text-2: var(--neutral-700); --text-3: var(--neutral-600);
--link: var(--primary-700); --link-hover: var(--primary-800);
--border-subtle: var(--neutral-200); --border-strong: var(--neutral-800); --rule: var(--neutral-950);
--masthead-bg: var(--neutral-900); --masthead-fg: var(--neutral-0); --masthead-muted: var(--primary-200);
--brand: var(--primary-500); --brand-strong: var(--primary-700); --brand-soft: var(--primary-50); --on-brand: #141414;
--brand-hi: #8BF08D; --brand-lo: var(--primary-600);
--focus-ring: var(--neutral-950);
--photo-tint: rgba(196, 134, 60, .10);
--scrim: rgba(20, 21, 24, .55);
--img-filter: none;
--mark-bg: #FFE9A8;
/* Y2K accents: chrome (metallic) and gloss — decoration only, never behind text that must be read */
--chrome: linear-gradient(135deg, #F7F8FA 0%, #B9BEC7 22%, #FFFFFF 40%, #9AA1AD 62%, #EEF0F3 80%, #B3B8C2 100%);
--gloss-hi: rgba(255, 255, 255, .65); --gloss-lo: rgba(0, 0, 0, .14);
--glow-brand: rgba(43, 209, 47, .32);
--ink-chip: #1B1D21;
/* typography */
--font-head: "Bitter", "Bitter Fallback", Georgia, serif;
--font-body: "Noto Sans", "Noto Fallback", Arial, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fs-body: 1.125rem; /* 18px */
--fs-small: 0.9375rem; /* 15px */
--fs-xs: 0.8125rem; /* 13px */
--fs-h4: 1.25rem;
--fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
--fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.125rem);
--fs-display: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
--lh-body: 1.65; --lh-head: 1.15; --measure: 64ch; /* UI/UX 2026-10-15: 68ch of Noto Sans ≈ 78 cpl at 18px → 64ch ≈ 73 */
--tracking-label: .08em;
/* spacing — 4px scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
--gutter: 24px;
--container: 1240px;
/* shape */
--radius-1: 6px; --radius-2: 10px; --radius-3: 16px; --radius-pill: 999px;
--bw-1: 1px; --bw-2: 2px; --bw-3: 3px;
--elev-0: none;
--elev-1: 0 1px 2px rgba(20, 21, 24, .08);
--elev-2: 0 4px 14px rgba(20, 21, 24, .12);
--elev-3: 0 18px 48px rgba(20, 21, 24, .22);
--z-base: 1; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;
/* motion */
--dur-1: 120ms; --dur-2: 250ms; --dur-3: 450ms;
--ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.6, 0, .3, 1);
}
@media (max-width: 640px) { :root { --gutter: 16px; --fs-body: 1.0625rem; } }
/* Q17 (2026-10-17): fixed identity background — deep GRAPHITE + signal lime is the default whatever the OS scheme
(no prefers-color-scheme switch any more); the theme button still switches to the light skin = the :root values above.
[data-theme="dark"] (stored choice) and no choice both land here. */
:root[data-theme="dark"], :root:not([data-theme="light"]) { /* styleguide_swatches() splits on ":root[data-theme" */
color-scheme: dark;
--bg: #16191D; --surface-1: #1C2025; --surface-2: #22272D; --surface-3: #2B3138;
--text: #ECEEF1; --text-2: #C9CBCF; --text-3: #ACAEB1;
--link: var(--primary-300); --link-hover: var(--primary-200);
--border-subtle: rgba(255, 255, 255, .10); --border-strong: #C9CBCF; --rule: #ECEEF1;
--masthead-bg: #121519; --masthead-fg: #ECEEF1; --masthead-muted: var(--primary-200);
--brand: #3DDC41; --brand-strong: var(--primary-300); --brand-soft: #142B17; --on-brand: #141414;
--brand-hi: #8BF08D; --brand-lo: var(--primary-500);
--success-bg: #12301E; --success-fg: #8FE0B0; --success-border: #2F6B45;
--warning-bg: #33280C; --warning-fg: #F1D08A; --warning-border: #7A5A16;
--danger-bg: #3A1513; --danger-fg: #FFB0A6; --danger-border: #7E2A23;
--info-bg: #12263A; --info-fg: #A9CDF0; --info-border: #2C5C8A;
--up: #2FBF6B; --down: #FF5A47;
--ch-payments: #8DB9EA; --ch-banking: #E3C46A; --ch-open-finance: #6FD0C8; --ch-lending: #F29BC1;
--ch-regtech: #B7AAF0; --ch-security: #F59C93; --ch-digital-assets: #EE9AF5; --ch-wealthtech: #B4C0CF;
--ch-tools: #DFE0E3; --ch-glossary: #C9CBCF; --ch-site: var(--primary-300);
--focus-ring: #ECEEF1;
--photo-tint: rgba(196, 134, 60, .08);
--img-filter: brightness(.8) contrast(1.05);
--mark-bg: #5A4710;
--chrome: linear-gradient(135deg, #5C6170 0%, #C9CED8 25%, #3D414B 48%, #AEB4C0 70%, #4A4F5B 100%);
--gloss-hi: rgba(255, 255, 255, .45); --gloss-lo: rgba(0, 0, 0, .3);
--glow-brand: rgba(61, 220, 65, .26);
--ink-chip: #ECEEF1;
--elev-1: 0 1px 2px rgba(0, 0, 0, .5); --elev-2: 0 4px 14px rgba(0, 0, 0, .55); --elev-3: 0 18px 48px rgba(0, 0, 0, .7);
}
/* journey band + motion (Q17, 2026-10-17): the hero frame is ALWAYS graphite (it carries the video), in both skins */
:root {
--journey-bg: #16191D; --journey-fg: #ECEEF1; --journey-sub: #B4BAC2; --journey-rule: #343B44;
--journey-chip: rgba(22, 25, 29, .80); --journey-chip-hover: #22272D; --journey-chip-border: rgba(236, 238, 241, .24);
--journey-accent: #2BD12F; --journey-accent-soft: #8BF08D; --journey-on-accent: #141414;
--mv-bg: var(--journey-bg); --mv-toggle-bg: rgba(22, 25, 29, .82); --mv-toggle-fg: #ECEEF1;
--mv-toggle-border: rgba(236, 238, 241, .45); --mv-focus: #8BF08D;
}
/* ---- 00-base.css ---- */
/* base: reset, typography, layout primitives */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body);
line-height: var(--lh-body); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-inline-size: 100%; }
picture { display: contents; } /* WebP wrapper: the ![]()
inside keeps its own layout */
picture > source { display: none; } /* layout 19/10: với picture "contents", (UA: display block) thành ô lưới rỗng → ảnh hàng .row bị đẩy sang cột 2, chữ xuống hàng dưới */
img { filter: var(--img-filter); }
mark { background: var(--mark-bg); color: inherit; border-radius: 2px; padding-inline: 1px; }
figcaption { font-size: 0.75rem; line-height: 1.35; }
img { block-size: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: var(--lh-head); margin: 0; color: var(--text); letter-spacing: -.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd { font-family: var(--font-mono); font-size: .88em; }
kbd { display: inline-block; padding-inline: var(--s-1); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-1);
background: var(--surface-2); line-height: 1.4; font-size: var(--fs-xs); }
:focus-visible { outline: var(--bw-3) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-1); }
::selection { background: var(--primary-200); color: var(--neutral-950); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100px; z-index: var(--z-modal); padding: var(--s-2) var(--s-4);
background: var(--brand); color: var(--on-brand); font-weight: 700; border-radius: var(--radius-2); }
.skip:focus { inset-block-start: var(--s-2); }
.band { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.main > .band { margin-block-start: var(--s-7); }
.main > .band:first-child { margin-block-start: 0; }
.dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--ch, var(--brand)); flex: none; }
.tagtxt { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 600; }
.badge { display: inline-block; padding: 0 var(--s-2); border-radius: var(--radius-1); font-size: var(--fs-xs); font-weight: 700;
letter-spacing: .02em; vertical-align: middle; }
.badge--primary { background: var(--brand-soft); color: var(--brand-strong); border: var(--bw-1) solid var(--primary-300); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* ---- 10-buttons.css ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-block-size: 44px; padding: var(--s-2) var(--s-5);
border: var(--bw-2) solid transparent; border-radius: var(--radius-2); font-weight: 700; font-size: var(--fs-small); line-height: 1.2;
text-decoration: none; cursor: pointer; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn--secondary { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--primary-300); }
.btn--secondary:hover { border-color: var(--brand); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-subtle); }
.btn--ghost:hover { border-color: var(--border-strong); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--sm { min-block-size: 44px; padding: var(--s-1) var(--s-4); font-size: var(--fs-xs); }
.btn--lg { min-block-size: 52px; padding: var(--s-3) var(--s-6); font-size: var(--fs-body); }
.iconbtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: var(--bw-1) solid var(--border-subtle);
border-radius: var(--radius-2); background: var(--bg); color: var(--text); cursor: pointer; }
.iconbtn:hover { border-color: var(--border-strong); }
.iconbtn svg { inline-size: 22px; block-size: 22px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: var(--tracking-label); color: var(--ch, var(--brand)); text-decoration: none; line-height: 1.3; }
.tag::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: currentColor; }
a.tag { min-block-size: 44px; }
a.tag:hover { text-decoration: underline; color: var(--ch, var(--brand)); }
/* ---- 20-header.css ---- */
/* masthead (2026-10-12): ONE sticky row — logo · channel chips · compact search · theme. No utility strip, no second menu row. */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg); }
.masthead::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 2px; background: var(--chrome); pointer-events: none; }
.hbar { display: flex; align-items: center; gap: var(--s-4); min-block-size: 68px;
padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; color: var(--text); text-decoration: none; flex: none; }
.brand__mark { inline-size: 36px; block-size: 36px; }
.brand__word { inline-size: 116px; block-size: 28px; color: var(--text); }
.chips { flex: 1 1 auto; min-inline-size: 0; }
.chips__list { display: flex; flex-wrap: nowrap; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.chips__list::-webkit-scrollbar { display: none; }
.chip-ch { display: inline-flex; align-items: center; gap: 7px; min-block-size: 36px; padding-inline: 10px; border: var(--bw-1) solid var(--border-subtle);
border-radius: var(--radius-pill); background: var(--surface-1); color: var(--text); font-weight: 700; font-size: var(--fs-xs);
text-decoration: none; white-space: nowrap; transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
.chip-ch .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; }
.chip-ch:hover { border-color: var(--ch, var(--brand)); color: var(--text); }
.chip-ch.is-current { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.hbar__tools { display: flex; gap: var(--s-2); flex: none; margin-inline-start: auto; }
.hbar__tools .iconbtn { border-radius: var(--radius-pill); }
.hbar__tools .iconbtn svg { inline-size: 19px; block-size: 19px; }
.hbar__menu { display: none; }
/* drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); }
.drawer[hidden] { display: none; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(360px, 88vw); overflow-y: auto; padding: var(--s-4) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
background: var(--bg); box-shadow: var(--elev-3); display: flex; flex-direction: column; gap: var(--s-5); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__list { list-style: none; border-block-start: var(--bw-1) solid var(--border-subtle); }
.drawer__list li a { display: flex; align-items: center; gap: var(--s-3); min-block-size: 48px; border-block-end: var(--bw-1) solid var(--border-subtle);
color: var(--text); font-weight: 700; text-decoration: none; }
.drawer__list--util li a { font-weight: 600; color: var(--text-2); }
@media (max-width: 760px) {
.hbar { min-block-size: 58px; gap: var(--s-3); }
.chips, .hbar__theme { display: none; }
.hbar__menu { display: inline-grid; }
.brand__mark { inline-size: 32px; block-size: 32px; }
.brand__word { inline-size: 100px; block-size: 24px; }
}
/* ---- 30-footer.css ---- */
.footer { margin-block-start: var(--s-9); padding-block: var(--s-8) calc(var(--s-6) + env(safe-area-inset-bottom));
padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); background: var(--masthead-bg); color: var(--masthead-fg); }
.footer a { color: var(--masthead-fg); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--masthead-fg); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s-6); padding-block-end: var(--s-6);
border-block-end: var(--bw-1) solid var(--neutral-700); }
.footer__brand p { margin-block-start: var(--s-4); color: var(--masthead-muted); font-size: var(--fs-small); max-inline-size: 32ch; }
.footer .brand { color: var(--masthead-fg); --text: var(--masthead-fg); --brand: var(--primary-400); --bg: var(--masthead-bg); }
.footer .brand__word { color: var(--masthead-fg); }
.footer__h { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; margin-block-end: var(--s-3); }
.footer__col ul { list-style: none; display: grid; gap: 0; }
.footer__col li a { display: inline-flex; align-items: center; min-block-size: 44px; font-size: var(--fs-small); color: var(--masthead-muted); }
.footer__col li a:hover { color: var(--masthead-fg); }
.footer__base { display: grid; gap: var(--s-3); padding-block-start: var(--s-5); font-size: var(--fs-xs); color: var(--masthead-muted); }
.footer__risk strong { color: var(--masthead-fg); }
.totop { margin-inline-start: var(--s-3); font-weight: 700; padding-block: 4px; } /* ≥24px hit area (UI/UX 2026-10-15) */
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) {
.footer { margin-block-start: var(--s-7); padding-block: var(--s-6) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.footer__grid { gap: var(--s-4) var(--s-4); padding-block-end: var(--s-4); }
.footer__brand p { margin-block-start: var(--s-2); }
.footer__h { margin-block-end: 0; font-size: 1rem; }
.footer__base { padding-block-start: var(--s-3); gap: var(--s-2); }
}
/* ---- 40-cards.css ---- */
/* section heads: slab title over a double ledger rule */
.sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; align-content: start; }
.sec > * { grid-column: 1 / -1; }
.sec > .shead__title, .sec > .shead__more { grid-row: 1; align-self: stretch; margin-block-end: var(--s-5); padding-block: var(--s-4) var(--s-3);
border-block-start: var(--bw-2) solid var(--rule); box-shadow: inset 0 3px 0 var(--bg), inset 0 4px 0 var(--rule); }
.sec > .shead__title { grid-column: 1; }
.sec > .shead__more { grid-column: 2; padding-inline-start: var(--s-4); }
.shead__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; }
.shead__more { display: inline-flex; align-items: flex-start; justify-content: flex-end; gap: 4px; min-block-size: 44px; font-weight: 700; font-size: var(--fs-small); text-decoration: none; white-space: nowrap; }
.shead__more:hover { text-decoration: underline; }
/* generic card */
.card { display: flex; flex-direction: column; gap: var(--s-3); min-inline-size: 0; }
.card__media { margin: 0; display: grid; gap: 6px; }
.card__img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-2); background: var(--surface-3); }
.card__body { display: grid; gap: var(--s-2); align-content: start; }
.card__kicker { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.card__type { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.card__title { font-size: 1.1875rem; line-height: 1.25; }
.card__title a, .row__title a, .mini__title, .path__title a { color: var(--text); text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-3) var(--ease-out); }
.card__title a:hover, .row__title a:hover, .mini__title:hover, .path__title a:hover { background-size: 100% 1px; color: var(--text); }
/* tap targets (UI/UX 2026-10-15): inline headline links get vertical padding (≥24px hit area, no layout shift); hover rule stays on the text baseline */
.card__title a, .row__title a, .mini__title, .path__title a { padding-block: 3px; background-position: 0 calc(100% - 3px); }
.card__title--xl { font-size: var(--fs-display); line-height: 1.1; }
.card__dek { color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.card--lead .card__dek { font-size: 1.125rem; }
.card__meta { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.credit { font-size: 0.75rem; line-height: 1.35; color: var(--text-3); overflow-wrap: anywhere; }
.credit a { color: var(--text-3); padding-block: 4px; } /* ≥24px hit area on photo-credit links (UI/UX 2026-10-15) */
.credit a:hover { color: var(--text); }
.credit--row { display: block; margin-block-start: var(--s-1); }
.credit--short { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-block: 4px; margin-block: -4px; }
.credit--short > span { display: inline; }
.card__media figcaption { min-inline-size: 0; }
.card--slim .card__img { aspect-ratio: 3 / 2; }
.card--slim .card__title { font-size: 1.0625rem; }
.card--slim .card__dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.5; }
.card--tool .card__img { aspect-ratio: 3 / 2; }
.card--tool .card__dek { font-size: 1rem; line-height: 1.5; }
.card--feat .card__img { aspect-ratio: 3 / 2; }
.card--feat .card__title { font-size: 1.375rem; }
.card--tight .card__img { aspect-ratio: 3 / 2; }
.card--tight .card__title { font-size: 1.125rem; }
/* compact image-left row (river) */
.row { display: grid; grid-template-columns: 168px 1fr; gap: var(--s-4); padding-block: var(--s-4); border-block-end: var(--bw-1) solid var(--border-subtle); }
.row:first-child { padding-block-start: 0; }
.row--noimg { grid-template-columns: 1fr; }
.row__img { inline-size: 168px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-2); background: var(--surface-3); }
.row__body { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
.row__title { font-size: 1.1875rem; line-height: 1.25; }
.row__dek { font-size: 1rem; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* numbered minis (rails) */
.minis { list-style: none; display: grid; }
.mini { display: flex; gap: var(--s-3); padding-block: var(--s-3); border-block-end: var(--bw-1) solid var(--border-subtle); }
.mini:last-child { border-block-end: 0; }
.mini__n { font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--ch, var(--brand)); min-inline-size: 1.4ch; }
.mini__title { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; display: inline; }
.mini .card__kicker { margin-block-end: 2px; }
.rail, .rail__inner { display: grid; gap: var(--s-3); align-content: start; }
.rail__title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; padding-block-end: var(--s-2); border-block-end: var(--bw-2) solid var(--rule); }
.rail__title--sub { font-size: 1.0625rem; margin-block-start: var(--s-4); }
.rail__note { font-size: var(--fs-small); color: var(--text-3); }
.rail__cta { justify-self: start; margin-block-start: var(--s-2); }
.skeleton { display: inline-block; block-size: 16px; border-radius: var(--radius-1); background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3));
background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.toast { display: inline-block; padding: var(--s-2) var(--s-4); border-radius: var(--radius-2); background: var(--neutral-950); color: var(--neutral-0);
font-weight: 700; font-size: var(--fs-small); box-shadow: var(--elev-2); }
.toast--float { position: fixed; inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom)); inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--z-toast); }
/* ---- 45-motion.css ---- */
/* motion-kit 0.1.0 (copied 2026-10-17 from ~/Claude/Projects/motion-kit/src/motion-kit.css; Q17). Colours come from tokens.css (--mv-*). */
.mv { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--mv-ratio, 16 / 9); background: var(--mv-bg); margin: 0; }
.mv__poster, .mv__poster img, .mv__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.mv__video { opacity: 0; transition: opacity .35s ease-out; }
.mv--playing .mv__video { opacity: 1; }
.mv__toggle {
position: absolute; z-index: 3; inset-block-end: var(--mv-toggle-inset, 12px); inset-inline-end: var(--mv-toggle-inset, 12px);
inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
border-radius: var(--radius-pill); border: var(--bw-1) solid var(--mv-toggle-border);
background: var(--mv-toggle-bg); color: var(--mv-toggle-fg);
}
.mv__toggle[hidden] { display: none; }
.mv__toggle:hover { border-color: var(--mv-focus); }
.mv__toggle:focus-visible { outline: 3px solid var(--mv-focus); outline-offset: 2px; }
.mv__toggle svg { inline-size: 18px; block-size: 18px; }
.mv__toggle .mv__i-play { display: none; }
.mv__toggle[aria-pressed="true"] .mv__i-play { display: block; }
.mv__toggle[aria-pressed="true"] .mv__i-pause { display: none; }
.mv--static .mv__video { display: none; }
@media (prefers-reduced-motion: reduce) { .mv__video, .mv__toggle { display: none !important; } }
/* cross-document view transitions (technique D). Destination names are static; the source link gets its name at
pageswap from data-vt (motion-kit.js), so a name is never used twice on one page. Unsupported browsers just navigate. */
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
.masthead { view-transition-name: site-header; }
.arthero__h1, .chhero__h1 { view-transition-name: vt-headline; }
.photo--lead .photo__img { view-transition-name: vt-photo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(vt-headline), ::view-transition-group(vt-photo) { animation-duration: .38s; animation-timing-function: var(--ease-out); }
::view-transition-old(vt-headline), ::view-transition-new(vt-headline) { block-size: 100%; inline-size: auto; object-fit: none; object-position: left top; }
}
/* ---- 50-home.css ---- */
/* home + hub layouts (bands follow the reference portal: lead + rail, river + rail, 4-up rows) */
.main > .band--top:first-child { margin-block-start: var(--s-6); }
/* home intro (UI/UX 2026-10-15): the visible H1 is the largest text on the first screen; block stays ≤ ~35% of a 900px desktop screen */
.main > .band.intro:first-child { margin-block-start: var(--s-6); }
.intro__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-3) var(--s-7); align-items: end; }
.intro__h1 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.04; max-inline-size: 15ch; }
.intro__dek { font-size: 1.125rem; line-height: 1.55; color: var(--text-2); max-inline-size: 48ch; }
.intro__cta { margin-block-start: var(--s-4); }
.main > .band.intro + .band--top { margin-block-start: var(--s-6); }
@media (max-width: 760px) {
.main > .band.intro:first-child { margin-block-start: var(--s-5); }
.intro__inner { grid-template-columns: 1fr; }
.intro__dek { font-size: 1.0625rem; }
.intro__cta { margin-block-start: var(--s-3); }
.main > .band.intro + .band--top { margin-block-start: var(--s-5); }
}
.top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .95fr); grid-template-rows: auto auto; gap: var(--s-5) var(--s-6); }
.top__lead { grid-row: 1 / span 2; grid-column: 1; padding-inline-end: var(--s-6); border-inline-end: var(--bw-1) solid var(--border-subtle); }
.top__second--1 { grid-column: 2; grid-row: 1; }
.top__second--2 { grid-column: 2; grid-row: 2; padding-block-start: var(--s-5); border-block-start: var(--bw-1) solid var(--border-subtle); }
.top__rail { grid-column: 3; grid-row: 1 / span 2; padding-inline-start: var(--s-6); border-inline-start: var(--bw-1) solid var(--border-subtle); }
@media (max-width: 760px) { .top__rail { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: var(--bw-2) solid var(--rule); } }
.card--lead .card__img { aspect-ratio: 3 / 2; }
.river { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--s-7); }
.river__rail { padding-inline-start: var(--s-6); border-inline-start: var(--bw-1) solid var(--border-subtle); }
.chlist { list-style: none; display: grid; }
.chlist li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); border-block-end: var(--bw-1) solid var(--border-subtle); }
.chlist a { display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; color: var(--text); font-weight: 700; text-decoration: none; }
.chlist a:hover { color: var(--ch); text-decoration: underline; }
.chlist__n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.quad > .card + .card { position: relative; }
.terms3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
.termrow { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); padding-block: var(--s-3); border-block-end: var(--bw-1) solid var(--border-subtle); }
.termrow--noimg { grid-template-columns: 1fr; }
.termrow__img { inline-size: 64px; block-size: 64px; object-fit: cover; border-radius: var(--radius-2); }
.termrow__name { padding-block: 2px; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: var(--text); text-decoration-color: var(--ch); } /* motion-dot0 17/10: target 22→26px tall */
.termrow__def { font-size: 1rem; color: var(--text-2); line-height: 1.5; }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.path { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: var(--bw-1) solid var(--border-subtle); border-block-start: var(--bw-3) solid var(--ch); border-radius: var(--radius-2); background: var(--surface-1); }
.path__fig { margin: 0; display: grid; gap: 4px; }
.path__img { inline-size: 100%; block-size: 92px; object-fit: cover; border-radius: var(--radius-1); }
.path__title { font-size: 1.25rem; }
.path__list { padding-inline-start: 1.3em; display: grid; gap: var(--s-1); font-size: var(--fs-small); }
.path__list a { color: var(--text); font-weight: 600; padding-block: 3px; }
.path__list li::marker { color: var(--ch); font-weight: 700; }
.srcgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-7); }
.srcgrid__intro { color: var(--text-2); font-size: 1.0625rem; }
.srcgrid__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }
.srcgrid__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); }
.srcgrid__list a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; color: var(--text); text-decoration: none; }
.srcgrid__list a:hover { text-decoration: underline; color: var(--brand); }
.srcgrid__list span { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
/* channel hub */
.chhero { padding-block: var(--s-6) var(--s-5); border-block-end: var(--bw-1) solid var(--border-subtle); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.chhero__label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-3); }
.chhero__label .dot { background: var(--ch, var(--brand)); }
.chhero__h1 { font-size: var(--fs-h1); position: relative; padding-inline-start: var(--s-4); border-inline-start: 6px solid var(--ch, var(--brand)); }
.chhero__dek { font-size: 1.25rem; color: var(--text-2); max-inline-size: 62ch; line-height: 1.5; }
.chhero__qa { max-inline-size: 75ch; color: var(--text); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.others { list-style: none; display: grid; }
.others li { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-4); align-items: baseline; border-block-end: var(--bw-1) solid var(--border-subtle); }
.others a { display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; color: var(--text); font-weight: 700; text-decoration: none; }
.others a:hover { color: var(--ch); text-decoration: underline; }
.others span { font-size: var(--fs-small); color: var(--text-2); }
.prose--rail { font-size: 1rem; }
.prose.prose--rail .prose__h2, .prose.prose--rail h2 { font-size: 1.125rem; margin-block: var(--s-4) var(--s-2); }
.prose.prose--rail > * { margin-block-start: var(--s-3); }
.prose.prose--rail .anchor { display: none; }
.prose--rail p { margin-block-end: var(--s-3); }
.termlinks { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.termlinks a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s-3); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-pill);
font-size: var(--fs-small); font-weight: 600; color: var(--text); text-decoration: none; }
.termlinks a:hover { border-color: var(--brand); color: var(--brand); }
.rail__sources .sources { margin-block-start: var(--s-4); }
.rail__sources .prose__h2 { font-size: 1.0625rem; }
@media (max-width: 1024px) {
.top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.top__rail { grid-column: 1 / -1; grid-row: auto; padding-inline-start: 0; border-inline-start: 0; }
.quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.terms3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srcgrid { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 760px) {
.top { grid-template-columns: 1fr; gap: var(--s-4); }
.top__lead, .top__second--1, .top__second--2 { grid-column: 1; grid-row: auto; padding-inline-end: 0; border-inline-end: 0; }
.top__second--2 { padding-block-start: var(--s-4); border-block-start: var(--bw-1) solid var(--border-subtle); }
.top__second .card { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-3); align-items: start; }
.top__second .card__img { aspect-ratio: 1; }
.top__second .card__media figcaption { display: none; }
.top__second .card__title { font-size: 1.0625rem; }
.top__second .card__dek { display: none; }
.river { grid-template-columns: 1fr; }
.river__list .row { grid-template-columns: 96px 1fr; gap: var(--s-3); }
.river__list .row__img { inline-size: 96px; aspect-ratio: 1; }
.river__list .row__title { font-size: 1.0625rem; }
.river__list .row__dek, .river__list .credit--row { display: none; }
.band--river .river__rail { display: none; }
.t-hub .band--river .river__rail { display: grid; padding-inline-start: 0; border-inline-start: 0; }
.quad { gap: var(--s-5) var(--s-4); }
.quad .card__dek { display: none; }
.quad .card__title { font-size: 1rem; }
.terms3 { grid-template-columns: 1fr; }
.paths { grid-template-columns: 1fr; gap: var(--s-3); }
.path__fig { margin: 0; display: grid; gap: 4px; }
.path__img { block-size: 64px; }
.srcgrid { grid-template-columns: 1fr; gap: var(--s-4); }
.srcgrid__list { grid-template-columns: 1fr; }
.trio { grid-template-columns: 1fr; gap: var(--s-4); }
.trio__item--2 .card, .trio__item--3 .card { display: grid; grid-template-columns: 112px 1fr; gap: var(--s-3); align-items: start; }
.trio__item--2 .card__img, .trio__item--3 .card__img { aspect-ratio: 1; }
.trio__item--2 figcaption, .trio__item--3 figcaption, .trio__item--2 .card__dek, .trio__item--3 .card__dek { display: none; }
.trio__item--2 .card__title, .trio__item--3 .card__title { font-size: 1.0625rem; }
.others li { grid-template-columns: 1fr; gap: 0; padding-block-end: var(--s-2); }
.chhero__dek { font-size: 1.0625rem; }
}
.rail--about .rail__inner { grid-template-columns: minmax(0, 1fr) auto; }
.rail--about .rail__inner > * { grid-column: 1 / -1; }
.rail--about .rail__inner > .rail__title { grid-column: 1; }
.rail__jump { grid-column: 2; align-self: stretch; display: inline-flex; align-items: center; min-block-size: 44px; padding-block-end: var(--s-2);
border-block-end: var(--bw-2) solid var(--rule); font-size: var(--fs-small); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rail--about .rail__inner > .rail__jump { grid-column: 2; }
.coming { margin-block-start: var(--s-5); padding: var(--s-4) var(--s-5); border: var(--bw-1) dashed var(--border-subtle); border-radius: var(--radius-2); color: var(--text-2); font-size: var(--fs-small); }
.coming__t { font-weight: 700; color: var(--text); margin-block-end: var(--s-2); }
.coming ul { padding-inline-start: 1.2em; display: grid; gap: 2px; }
/* Read next on article/tool pages: one column of compact rows on phones (reference blueprint: 1 column) */
@media (max-width: 760px) {
.band--related .quad { grid-template-columns: 1fr; gap: var(--s-3); }
.band--related .card { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); align-items: start; padding-block-end: var(--s-3); border-block-end: var(--bw-1) solid var(--border-subtle); }
.band--related .card__img { aspect-ratio: 1; }
.band--related figcaption { display: none; }
}
.river__count, .river__jump { display: none; }
@media (max-width: 760px) {
.river__list--hub { display: grid; grid-template-columns: 1fr auto; }
.river__list--hub > * { grid-column: 1 / -1; }
.river__list--hub > .river__count { display: block; grid-column: 1; align-self: center; font-size: var(--fs-small); color: var(--text-3); font-weight: 600; }
.river__list--hub > .river__jump { display: inline-flex; grid-column: 2; align-items: center; min-block-size: 44px; font-weight: 700; font-size: var(--fs-small); text-decoration: none; }
}
.rail__sources summary { display: flex; align-items: center; min-block-size: 44px; font-weight: 700; font-size: var(--fs-small); cursor: pointer; border-block-start: var(--bw-1) solid var(--border-subtle); }
.rail__sources .sources .prose__h2 { display: none; }
.river__sub { font-size: 1.125rem; padding-block: var(--s-5) var(--s-2); border-block-end: var(--bw-2) solid var(--rule); margin-block-end: var(--s-4); }
.prose.prose--rail { font-size: .9688rem; }
/* ---- 52-journey.css ---- */
/* Q17 (2026-10-17) home frame "journey strip + columns": a horizontal card-payment journey (21:9 video in a rounded
graphite frame, parties as HTML links laid over it), then columns of real explainers per channel.
The frame stays graphite in both skins (--journey-* tokens); positions match motion-kit stations.json. */
.main > .band.intro + .band.journey { margin-block-start: var(--s-6); }
.journey__head { display: grid; gap: var(--s-2); margin-block-end: var(--s-4); }
.journey__title { font-size: var(--fs-h2); line-height: var(--lh-head); max-inline-size: 30ch; }
.journey__title a { color: var(--text); text-decoration: none; }
.journey__title a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: .15em; }
.journey__dek { color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; max-inline-size: 70ch; }
.journey__stage { position: relative; border-radius: var(--radius-3); overflow: hidden; background: var(--journey-bg); border: var(--bw-1) solid var(--journey-rule); }
.journey__mv { --mv-ratio: 21 / 9; }
.journey__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.stop { position: absolute; inset-inline-start: var(--x); inset-block-start: calc(var(--y) + 20%); transform: translateX(-50%); pointer-events: auto; }
.stop__a, .journey__settle {
display: grid; justify-items: center; align-content: center; gap: 1px; min-block-size: 44px; padding: 5px 12px;
border-radius: var(--radius-2); border: var(--bw-1) solid var(--journey-chip-border); background: var(--journey-chip);
color: var(--journey-fg); text-decoration: none; text-align: center; white-space: nowrap;
}
.stop__label, .journey__settle { font-family: var(--font-head); font-weight: 700; font-size: clamp(.875rem, .72rem + .4vw, 1.0625rem); line-height: 1.2; }
.stop__sub { font-size: .8125rem; line-height: 1.25; color: var(--journey-sub); }
.stop__a:hover, .journey__settle:hover { border-color: var(--journey-accent); background: var(--journey-chip-hover); }
.stop__a:hover .stop__label, .journey__settle:hover span { text-decoration: underline; text-decoration-color: var(--journey-accent); text-underline-offset: .18em; }
.stop__a:focus-visible, .journey__settle:focus-visible { outline: 3px solid var(--journey-accent-soft); outline-offset: 2px; }
.journey__settle { position: absolute; inset-inline-start: 60%; inset-block-start: 84%; transform: translate(-50%, -50%); border-radius: var(--radius-pill);
border-color: var(--journey-accent); background: var(--journey-bg); color: var(--journey-accent-soft); padding-inline: 16px; }
.journey__more { margin-block-start: var(--s-4); }
@media (max-width: 960px) { .stop__sub { display: none; } .stop__a { padding-inline: 8px; } }
@media (max-width: 640px) {
.journey__mv { --mv-ratio: 4 / 5; }
.stop { inset-inline-start: 40%; inset-block-start: var(--ty); transform: translateY(-50%); }
.stop__a { justify-items: start; text-align: start; padding: 4px 10px; }
.stop__sub { display: block; }
.journey__settle { inset-inline-start: 3%; inset-block-start: auto; inset-block-end: 2.5%; transform: none; }
.journey__title { font-size: 1.5rem; }
}
/* columns of explainers per channel */
.stagecols__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.stagecol { display: grid; align-content: start; gap: var(--s-1); padding-block-start: var(--s-3); border-block-start: var(--bw-3) solid var(--ch); }
.stagecol__title { font-size: 1.125rem; line-height: 1.25; }
.stagecol__title a { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; color: var(--text); text-decoration: none; }
.stagecol__title a:hover { text-decoration: underline; text-decoration-color: var(--ch); }
.stagecol__title .dot { background: var(--ch); }
.stagecol__n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-block-end: var(--s-2); }
.stagecol__list { list-style: none; margin: 0; padding: 0; display: grid; }
.stagecol__list li { border-block-end: var(--bw-1) solid var(--border-subtle); }
.stagecol__list a { display: flex; align-items: center; min-block-size: 44px; padding-block: 8px; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--text); text-decoration: none; }
.stagecol__list a:hover { text-decoration: underline; text-decoration-color: var(--ch); text-underline-offset: .15em; }
@media (max-width: 1024px) { .stagecols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stagecols__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
/* ---- 60-article.css ---- */
/* article hero + body + rail */
.arthero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); align-items: end; padding-block: var(--s-6) var(--s-5);
border-block-end: var(--bw-1) solid var(--border-subtle); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--fs-xs); color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s-2); color: var(--border-subtle); }
.crumbs a { color: var(--text-3); text-decoration: none; display: inline-block; padding-block: var(--s-1); }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { display: inline-block; max-inline-size: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding-block: var(--s-1); }
.arthero__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-inline-size: 0; }
.arthero__kicker { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.arthero__h1 { font-size: var(--fs-h1); max-inline-size: 22ch; }
.arthero__dek { font-size: 1.25rem; line-height: 1.5; color: var(--text-2); max-inline-size: 60ch; }
.arthero__meta { display: grid; gap: var(--s-3); justify-items: start; }
.metacard { display: grid; inline-size: 100%; margin: 0; border-block-start: var(--bw-2) solid var(--rule); }
.metacard div { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); font-size: var(--fs-small); }
.metacard dt { color: var(--text-3); white-space: nowrap; }
.metacard dd { margin: 0; font-weight: 700; text-align: end; }
.artbody { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); }
.main > .artbody { margin-block-start: var(--s-6); }
.artrail { position: relative; }
.toc { position: sticky; inset-block-start: 76px; display: grid; gap: var(--s-2); padding-block-end: var(--s-5); max-block-size: calc(100vh - 96px); overflow-y: auto; }
.toc__title { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; padding-block-end: var(--s-2); border-block-end: var(--bw-2) solid var(--rule); }
.toc ol { list-style: none; display: grid; counter-reset: toc; }
.toc li a { display: block; padding: 7px 0 7px var(--s-3); border-inline-start: var(--bw-2) solid var(--border-subtle); color: var(--text-2); text-decoration: none; font-size: var(--fs-small); line-height: 1.35; }
.toc li a:hover { color: var(--text); border-color: var(--border-strong); }
.toc li a[aria-current="true"] { color: var(--text); font-weight: 700; border-color: var(--brand); }
.progress { block-size: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-block-start: var(--s-2); }
.progress span { display: block; block-size: 100%; inline-size: 0; background: var(--brand); }
.rail--more { margin-block-start: var(--s-5); }
.rail--more .mini__title { font-size: 1rem; }
.toc-m { display: none; }
/* prose */
.prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); align-content: start; min-inline-size: 0; max-inline-size: 760px; }
.prose > * { grid-column: 1 / -1; margin-block-start: var(--s-5); min-inline-size: 0; }
.prose code { overflow-wrap: anywhere; }
.prose > :first-child { margin-block-start: 0; }
.prose > .byline__who { grid-column: 1; margin-block-start: 0; }
.prose > .byline__meta { grid-column: 2; margin-block-start: 0; text-align: end; }
.byline__who, .byline__meta { font-size: var(--fs-xs); color: var(--text-3); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); font-weight: 600; }
.byline__who a { color: var(--text-2); }
.prose p, .prose li { max-inline-size: var(--measure); }
.prose .prose__h2 { font-size: var(--fs-h2); margin-block-start: var(--s-7); position: relative; scroll-margin-top: 72px; }
.prose h3 { font-size: var(--fs-h3); margin-block-start: var(--s-6); }
.anchor { position: absolute; inset-inline-start: -1.1em; color: var(--border-subtle); text-decoration: none; opacity: 0; transition: opacity var(--dur-1); }
.prose__h2:hover .anchor, .anchor:focus-visible { opacity: 1; color: var(--brand); }
.list { padding-inline-start: 1.25em; display: grid; gap: var(--s-2); }
.list li::marker { color: var(--brand); }
.cite { font-size: .7em; line-height: 0; margin-inline-start: 1px; }
.cite a { text-decoration: none; font-weight: 700; color: var(--brand); padding: 0 1px; }
/* tap targets (UI/UX 2026-10-15): bigger hit areas without moving text — padding is cancelled by an equal negative margin */
.cite a { padding: 6px 6.5px; margin-inline: -5.5px; } /* motion-dot0 17/10: target 23→24px wide, text does not move */
.anchor { padding-inline: 3px; }
.byline a, .byline__who a, .metacard dd a { padding-block: 3px; }
.cite a:hover { text-decoration: underline; }
.qa { padding: var(--s-4) var(--s-5); border-inline-start: 6px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.qa__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--brand-strong); margin-block-end: var(--s-1); }
.qa__text { font-size: 1.1875rem; line-height: 1.55; font-weight: 500; }
.keypoints { padding: var(--s-4) var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-2); }
.keypoints__title { font-size: 1.125rem; margin-block-end: var(--s-2); }
.keypoints ul { list-style: none; display: grid; gap: var(--s-2); }
.keypoints li { position: relative; padding-inline-start: 1.5em; font-size: 1.0625rem; }
.keypoints li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .55em; inline-size: 10px; block-size: 6px;
border-inline-start: var(--bw-2) solid var(--brand); border-block-end: var(--bw-2) solid var(--brand); transform: rotate(-45deg); }
.photo { margin-inline: 0; margin-block-end: 0; display: grid; gap: var(--s-2); }
.photo__img { inline-size: 100%; border-radius: var(--radius-2); background: var(--surface-3); }
.photo--lead .photo__img { aspect-ratio: 16 / 9; object-fit: cover; }
.conclusion { padding-block-start: var(--s-1); }
.prose section > .prose__h2 + *, .prose .conclusion > p { margin-block-start: var(--s-3); }
.sources .sources__list { margin-block-start: var(--s-3); }
.check { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface-2); border-radius: var(--radius-2); font-size: var(--fs-small); }
.check__icon { inline-size: 28px; block-size: 28px; }
.check__t { font-weight: 700; }
/* byline under the H1 + short author box at the end (author = Organization "Tokenova Editorial Desk") */
.byline { font-size: var(--fs-small); color: var(--text-3); font-weight: 600; }
.byline a { color: var(--text-2); }
.authorbox { padding: var(--s-4) var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-inline-start: 6px solid var(--rule); border-radius: 0 var(--radius-2) var(--radius-2) 0; font-size: var(--fs-small); }
.authorbox__t { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-3); margin-block-end: var(--s-1); }
.authorbox__name { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--text); margin-block-end: var(--s-1); }
.sources__list { padding-inline-start: 1.6em; display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.sources__list li { max-inline-size: none; }
.sources__list li:target { background: var(--warning-bg); border-radius: var(--radius-1); }
.sources__list a { overflow-wrap: anywhere; }
@media (max-width: 1024px) {
.arthero, .artbody { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-6); }
}
@media (max-width: 760px) {
.arthero { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); }
.arthero__main { min-inline-size: 0; }
.arthero__dek { font-size: 1.0625rem; }
.metacard { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); border-block-start: 0; }
.metacard div { border: 0; padding-block: 0; gap: var(--s-1); }
.metacard div:nth-child(4) { display: none; }
.metacard dt::after { content: ":"; }
.arthero__meta .btn { display: none; }
.crumbs ol { flex-wrap: nowrap; overflow: hidden; }
.crumbs li { white-space: nowrap; }
.crumbs li:last-child { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs [aria-current] { max-inline-size: 100%; }
}
@media (max-width: 760px) {
.toc-m summary::after { content: "▾"; margin-inline-start: auto; color: var(--brand); }
.toc-m[open] summary::after { content: "▴"; }
.artbody { grid-template-columns: 1fr; }
.main > .artbody { margin-block-start: var(--s-4); }
.artrail { display: none; }
.toc-m { display: block; border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-2); }
.toc-m summary { min-block-size: 48px; display: flex; align-items: center; padding-inline: var(--s-4); font-weight: 700; cursor: pointer; }
.toc-m ol { padding: 0 var(--s-4) var(--s-3) calc(var(--s-4) + 1.2em); display: grid; gap: var(--s-1); font-size: var(--fs-small); }
.toc-m a { display: flex; align-items: center; min-block-size: 44px; }
.qa, .keypoints, .check { padding: var(--s-3) var(--s-4); }
.qa__text { font-size: 1.0625rem; }
.prose > .photo { margin-inline: calc(var(--gutter) * -1); }
.prose > .photo .photo__img { border-radius: 0; }
.prose > .photo figcaption { padding-inline: var(--gutter); }
.photo--lead .photo__img { aspect-ratio: 4 / 3; }
.anchor { display: none; }
}
/* mobile article toolbar (share + jump to sources) */
.arttool { display: none; }
@media (max-width: 760px) {
.prose > .arttool { display: inline-flex; align-items: center; min-block-size: 44px; margin-block-start: 0; grid-column: 1; justify-self: start;
padding: 0 var(--s-3); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-2); background: var(--bg);
font: 700 var(--fs-xs)/1 var(--font-body); color: var(--text); text-decoration: none; cursor: pointer; }
.prose > .arttool--end { grid-column: 2; justify-self: end; }
.prose > .arttool + .arttool + * { margin-block-start: var(--s-4); }
}
@media (max-width: 480px) { .crumbs li:last-child { display: none; } .crumbs li:nth-last-child(2)::after { content: ""; } }
/* ---- 70-blocks.css ---- */
/* in-article components */
.block__title { font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; margin-block-end: var(--s-3); }
/* table: real table on wide screens, stacked cards ≤640px */
.tbl { margin-inline: 0; margin-block-end: 0; display: grid; gap: var(--s-2); }
.tbl__cap { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; }
.tbl__scroll { overflow-x: auto; border-block-start: var(--bw-2) solid var(--rule); }
.tbl table, .calc table, .pubtable { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td, .calc th, .calc td, .pubtable th, .pubtable td { padding: var(--s-2) var(--s-3); text-align: start; vertical-align: top; border-block-end: var(--bw-1) solid var(--border-subtle); }
.tbl thead th, .calc thead th, .pubtable thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-3); background: var(--surface-2); }
.tbl tbody th, .pubtable tbody th { font-weight: 700; }
.tbl tbody tr:hover { background: var(--surface-1); }
.tbl__note { font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 640px) {
.tbl__scroll { border-block-start: 0; overflow: visible; }
.tbl thead, .pubtable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.tbl table, .tbl tbody, .tbl tr, .tbl th, .tbl td,
.pubtable, .pubtable tbody, .pubtable tr, .pubtable th, .pubtable td { display: block; inline-size: 100%; }
.tbl tr, .pubtable tr { margin-block-end: var(--s-3); border: var(--bw-1) solid var(--border-subtle); border-block-start: var(--bw-3) solid var(--brand); border-radius: var(--radius-2); overflow: hidden; }
.tbl tbody th, .pubtable tbody th { background: var(--surface-2); }
.tbl td, .pubtable td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--s-3); overflow-wrap: anywhere; }
.tbl, .tbl table { min-inline-size: 0; max-inline-size: 100%; }
.tbl th { overflow-wrap: anywhere; }
.tbl td::before, .pubtable td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tbl td:last-child { border-block-end: 0; }
.calc th, .calc td { padding: var(--s-2) 4px; font-size: var(--fs-xs); text-align: end; white-space: nowrap; }
.calc th:first-child, .calc td:first-child { text-align: start; }
.calc thead th { letter-spacing: 0; }
.calc .tbl__scroll { border-block-start: var(--bw-2) solid var(--rule); overflow-x: auto; }
.calc th:nth-child(2), .calc td:nth-child(2) { display: none; }
.calc .calc__sched::after { content: "Each monthly payment is the same as the amount shown above."; display: block; font-size: var(--fs-xs); color: var(--text-3); margin-block-start: var(--s-2); }
}
/* callouts */
.callout { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--radius-2); border: var(--bw-1) solid; }
.callout__icon { inline-size: 26px; block-size: 26px; }
.callout__title { font-weight: 700; margin-block-end: var(--s-1); }
.callout--note { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.callout--tip { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.callout--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.callout--example { background: var(--surface-2); color: var(--text); border-color: var(--border-subtle); }
.callout a { color: inherit; font-weight: 700; }
/* steps */
.steps ol { list-style: none; display: grid; gap: 0; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); padding-block: var(--s-3); position: relative; }
.steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 21px; inset-block: 52px -4px; inline-size: 2px; background: var(--border-subtle); }
.steps__n { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.steps__t { font-weight: 700; font-size: 1.0625rem; }
/* flow diagram */
.flow { margin-inline: 0; margin-block-end: 0; padding: var(--s-4) var(--s-4) var(--s-3); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-3); background: var(--surface-1); display: grid; gap: var(--s-3); }
.flow__svg { inline-size: 100%; block-size: auto; }
.flow__svg--v { display: none; max-inline-size: 360px; margin-inline: auto; }
.flow__box { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.5; }
.flow__box--end { fill: var(--brand-soft); stroke: var(--brand); }
.flow__num { font-family: var(--font-head); font-weight: 700; font-size: 13px; fill: var(--brand); }
.flow__label { font-family: var(--font-body); font-weight: 700; font-size: 16px; fill: var(--text); }
.flow__sub { font-family: var(--font-body); font-size: 12.5px; fill: var(--text-2); }
.flow__svg--h .flow__label { font-size: 21px; }
.flow__svg--h .flow__sub { font-size: 15px; }
.flow__svg--h .flow__num { font-size: 15px; }
.flow__arrow { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.flow figcaption { font-size: var(--fs-small); color: var(--text-3); }
@media (max-width: 900px) { .flow__svg--h { display: none; } .flow__svg--v { display: block; } }
/* factbox */
.factbox { padding: var(--s-4) var(--s-5); border-block: var(--bw-2) solid var(--rule); background: var(--surface-1); }
.factbox dl { margin: 0; display: grid; }
.factbox__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); }
.factbox__row:last-child { border-block-end: 0; }
.factbox dt { color: var(--text-2); font-size: var(--fs-small); }
.factbox dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .factbox__row { grid-template-columns: 1fr; gap: 0; } .factbox dd { text-align: start; } }
/* timeline */
.timeline ol { list-style: none; display: grid; border-inline-start: var(--bw-2) solid var(--brand); margin-inline-start: 6px; }
.timeline li { position: relative; padding: 0 0 var(--s-4) var(--s-5); }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 6px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); border: var(--bw-2) solid var(--brand); }
.timeline__d { font-weight: 700; font-family: var(--font-head); }
/* worked example */
.example { padding: var(--s-4) var(--s-5); border: var(--bw-1) dashed var(--brand); border-radius: var(--radius-2); }
.example__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--brand-strong); }
.example__rows { margin: var(--s-3) 0 0; display: grid; font-variant-numeric: tabular-nums; }
.example__rows div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); padding-block: var(--s-2); border-block-start: var(--bw-1) solid var(--border-subtle); font-size: var(--fs-small); }
.example__rows dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; min-inline-size: 0; }
.example__rows dt { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .example__rows div { grid-template-columns: minmax(0, 1fr); gap: 0; } .example__rows dd { text-align: start; } }
/* mistakes */
.mistakes { padding: var(--s-4) var(--s-5); background: var(--danger-bg); border-radius: var(--radius-2); }
.mistakes .block__title { color: var(--danger-fg); }
.mistakes ul { list-style: none; display: grid; gap: var(--s-3); }
.mistakes li { position: relative; padding-inline-start: 1.8em; }
.mistakes li::before { content: "✕"; position: absolute; inset-inline-start: 0; inset-block-start: 0; font-weight: 700; color: var(--danger-fg); }
.mistakes__t { font-weight: 700; }
/* pull quote */
.pull { margin-inline: 0; margin-block-end: 0; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-inline-start: 4px solid var(--brand); font-family: var(--font-head); font-size: 1.375rem; line-height: 1.35; }
.pull footer { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-3); margin-block-start: var(--s-2); }
/* FAQ */
.faq { display: grid; gap: 0; }
.faq .prose__h2 { margin-block-end: var(--s-3); }
.faq__item { border-block-end: var(--bw-1) solid var(--border-subtle); }
.faq__item:first-of-type { border-block-start: var(--bw-2) solid var(--rule); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; min-block-size: 52px; padding-block: var(--s-3);
cursor: pointer; font-weight: 700; font-size: 1.0625rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-head); font-size: 1.5rem; line-height: 1; color: var(--brand); transition: transform var(--dur-2) var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-block-end: var(--s-4); color: var(--text-2); }
/* ---- 80-forms-search-tools.css ---- */
/* forms */
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 700; font-size: var(--fs-small); }
.field input, .field select, .field textarea { inline-size: 100%; min-block-size: 48px; padding: var(--s-2) var(--s-3); font-size: 1rem;
border: var(--bw-1) solid var(--neutral-500); border-radius: var(--radius-2); background: var(--bg); color: var(--text); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--bw-3) solid var(--focus-ring); outline-offset: 1px; }
.field [aria-invalid="true"], .field--error input { border-color: var(--danger-fg); }
.field__err { font-size: var(--fs-xs); color: var(--danger-fg); font-weight: 700; }
.field__wrap { display: flex; align-items: stretch; }
.field__wrap input { border-radius: 0; flex: 1; min-inline-size: 0; }
.field__wrap input:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2); }
.field__wrap input:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.field__wrap input:only-child { border-radius: var(--radius-2); }
.field__affix { display: grid; place-items: center; min-inline-size: 44px; padding-inline: var(--s-2); background: var(--surface-3); border: var(--bw-1) solid var(--neutral-500); font-weight: 700; color: var(--text-2); }
.field__affix:first-child { border-inline-end: 0; border-radius: var(--radius-2) 0 0 var(--radius-2); }
.field__affix:last-child { border-inline-start: 0; border-radius: 0 var(--radius-2) var(--radius-2) 0; }
.check-l { display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; margin-inline-end: var(--s-4); font-weight: 600; }
.check-l input { inline-size: 20px; block-size: 20px; accent-color: var(--brand); }
.hp { position: absolute; inset-inline-start: -9999px; }
.contact { display: grid; gap: var(--s-4); max-inline-size: 560px; padding: var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-3); background: var(--surface-1); }
.contact .btn { justify-self: start; }
.contact__status { font-weight: 700; }
.contact__status[data-state="ok"] { color: var(--success-fg); }
.contact__status[data-state="err"] { color: var(--danger-fg); }
/* search dialog */
.sdialog { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; justify-items: center; align-items: start; padding: 10vh var(--gutter) 0; }
.sdialog[hidden] { display: none; }
.sdialog__panel { inline-size: min(680px, 100%); background: var(--bg); border-radius: var(--radius-3); box-shadow: var(--elev-3); overflow: hidden; border-block-start: var(--bw-3) solid var(--brand); }
.sdialog__form { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); border-block-end: var(--bw-1) solid var(--border-subtle); }
.sdialog__form > svg { inline-size: 22px; block-size: 22px; color: var(--text-3); }
.sdialog__form input { flex: 1; min-inline-size: 0; block-size: 52px; border: 0; background: transparent; font-size: 1.125rem; }
.sdialog__form input:focus-visible { outline: var(--bw-3) solid var(--focus-ring); outline-offset: -3px; border-radius: var(--radius-1); }
.sresults { list-style: none; max-block-size: 55vh; overflow-y: auto; }
.sresults li a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-block-end: var(--bw-1) solid var(--border-subtle); text-decoration: none; color: var(--text); }
.sresults li a:hover, .sresults li[aria-selected="true"] a { background: var(--brand-soft); }
.sresults__t { font-weight: 700; }
.sresults__m { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.sresults__d { font-size: var(--fs-small); color: var(--text-2); }
.sresults__empty { padding: var(--s-4); color: var(--text-2); }
.sdialog__hint { padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
/* search page */
.searchpage { display: flex; gap: var(--s-2); max-inline-size: 640px; }
.searchpage input { flex: 1; min-inline-size: 0; min-block-size: 52px; padding-inline: var(--s-4); font-size: 1.125rem; border: var(--bw-2) solid var(--border-strong); border-radius: var(--radius-2); background: var(--bg); }
.searchpage__status { color: var(--text-2); font-size: var(--fs-small); }
.sres { list-style: none; display: grid; max-inline-size: 820px; }
.sres li { border-block-end: var(--bw-1) solid var(--border-subtle); }
.sres li > a { display: grid; gap: var(--s-1); padding-block: var(--s-4); text-decoration: none; color: var(--text); }
.sres li > a:hover .sresults__t { text-decoration: underline; }
.sres .sresults__t { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.sres .sresults__d { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--text-2); }
.sres .sresults__m, .sresults__m { display: inline-flex; align-items: center; gap: 6px; color: var(--ch, var(--brand-strong)); }
.sres .sresults__m::before, .sresults__m::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: currentColor; }
.sres li.sres__empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-block-start: var(--bw-3) solid var(--brand); border-radius: var(--radius-3); background: var(--surface-1); }
.sres__icon { grid-row: span 3; inline-size: 40px; block-size: 40px; color: var(--brand-strong); }
.sres__empty-t { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.25; margin: 0; }
.sres__empty p { margin: 0; color: var(--text-2); }
.sres__sugg { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.sres__sugg .chip { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s-4); border: var(--bw-1) solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.sres__sugg .chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.sres__sugg .btn { margin-inline-start: auto; }
@media (max-width: 640px) { .sres li.sres__empty { grid-template-columns: 1fr; } .sres__icon { grid-row: auto; } .sres__sugg .btn { margin-inline-start: 0; } }
.searchpage__status:empty { display: none; }
.sall { margin-block-start: var(--s-6); }
.sall__list { list-style: none; columns: 2 320px; column-gap: var(--s-7); margin-block-start: 0; }
.sall__list li { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); padding-block: 2px; border-block-end: var(--bw-1) solid var(--border-subtle); }
.sall__list .tagtxt { white-space: nowrap; line-height: 1.2; padding-block-end: 6px; }
.sall__list a { font-weight: 600; display: inline-flex; align-items: center; min-block-size: 44px; }
/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-block-start: var(--bw-3) solid var(--brand); border-radius: var(--radius-3); background: var(--surface-1); }
.calc__form { display: grid; gap: var(--s-4); align-content: start; }
.calc__out { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); background: var(--bg); border-radius: var(--radius-2); border: var(--bw-1) solid var(--border-subtle); }
.calc__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-3); }
.calc__label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.calc__out dl { margin: 0; display: grid; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); }
.calc__row dt { font-size: var(--fs-small); color: var(--text-2); }
.calc__row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.calc__row--main dd { font-family: var(--font-head); font-size: 1.75rem; color: var(--brand-strong); }
.calc__sched { grid-column: 1 / -1; }
.calc__sched .tbl__scroll { border-block-start: var(--bw-2) solid var(--rule); }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; padding: var(--s-4); } }
/* ---- 90-pages.css ---- */
/* glossary, start here, sources, static pages, 404, styleguide */
.az { position: sticky; inset-block-start: 49px; z-index: calc(var(--z-sticky) - 1); background: var(--bg); padding-block: var(--s-2); border-block-end: var(--bw-1) solid var(--border-subtle); }
.az ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; }
.az a, .az span { display: grid; place-items: center; inline-size: 36px; block-size: 40px; font-family: var(--font-head); font-weight: 700; text-decoration: none; border-radius: var(--radius-1); }
.az a { color: var(--text); }
.az a:hover { background: var(--brand-soft); color: var(--brand-strong); }
.az span { color: var(--border-subtle); }
.gl { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-5); padding-block: var(--s-5); border-block-end: var(--bw-1) solid var(--border-subtle); scroll-margin-top: 110px; }
.gl__letter { font-size: 3rem; line-height: 1; color: var(--brand); }
.gl__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.gl__item dt a { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--text); text-decoration-color: var(--ch); }
.gl__item dd { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-small); }
@media (max-width: 760px) { .gl { grid-template-columns: 1fr; gap: var(--s-2); } .gl__list { grid-template-columns: 1fr; } .gl__letter { font-size: 2rem; } .az { inset-block-start: 48px; } .az a, .az span { inline-size: 44px; block-size: 44px; } }
.band--paths-full { display: grid; gap: var(--s-6); }
.pathfull { padding: var(--s-5); border: var(--bw-1) solid var(--border-subtle); border-block-start: 6px solid var(--ch, var(--brand)); border-radius: var(--radius-2); scroll-margin-top: 80px; }
.pathfull__title { font-size: var(--fs-h2); }
.pathfull__why { color: var(--text-2); margin-block: var(--s-2) var(--s-4); max-inline-size: 70ch; }
.pathfull__list { padding-inline-start: 1.5em; display: grid; gap: var(--s-4); }
.pathfull__list li::marker { font-family: var(--font-head); font-weight: 700; color: var(--ch, var(--brand)); }
.pathfull__list a { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.pathfull__list p { color: var(--text-2); font-size: var(--fs-small); }
.pubtable { max-inline-size: 760px; }
.pubtable td { font-variant-numeric: tabular-nums; }
.prose--page { max-inline-size: 760px; }
.notfound { padding-block: var(--s-7) var(--s-6); }
.nf__rows { max-inline-size: 820px; }
.nf__list { list-style: none; display: grid; gap: var(--s-2); margin-block-start: var(--s-4); }
.nf__list a { font-weight: 700; display: inline-block; padding-block: var(--s-1); }
.sg { display: grid; gap: var(--s-4); }
.sg__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.sw { display: grid; grid-template-columns: 40px 1fr; gap: 2px var(--s-3); font-size: var(--fs-xs); align-items: center; }
.sw__chip { grid-row: span 3; inline-size: 40px; block-size: 40px; border-radius: var(--radius-1); border: var(--bw-1) solid var(--border-subtle); }
.sg__h1 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; }
.sg__h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); }
.sg__h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); }
.sg__space { display: grid; gap: var(--s-2); }
.sg__space div { display: flex; align-items: center; gap: var(--s-3); }
.sg__space span { block-size: 14px; background: var(--brand); }
.sg__row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.sg__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.sg__cards { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-5); }
.sg__rows { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-6); }
@media (max-width: 760px) { .sg__cards, .sg__rows { grid-template-columns: 1fr; } }
.sg__states .is-hover.btn--primary { transform: translateY(-1px); filter: saturate(1.08); box-shadow: inset 0 1px 0 var(--gloss-hi), inset 0 -2px 0 var(--gloss-lo), 0 10px 24px var(--glow-brand); }
.sg__states .is-focus { outline: var(--bw-3) solid var(--focus-ring); outline-offset: 2px; }
.sg__states .is-active { transform: translateY(1px); }
.sg__states a.is-hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.sg__states a { display: inline-flex; align-items: center; min-block-size: 44px; }
.band--page { padding-block-start: var(--s-5); }
.prose.prose--page > .prose__h2:first-child, .prose.prose--page > .callout:first-child { margin-block-start: 0; }
/* ---- 95-y2k.css ---- */
/* Y2K accent layer (skin "Chrome Signal", Q14) — chrome hairlines, glossy pill buttons, sparkle.
Rules: decoration only; text that must be read never sits on chrome/gloss; every motion stops under prefers-reduced-motion.
--brand is now a FILL colour (bright lime, dark text on it); anything that is TEXT uses --brand-strong (≥4.5:1). */
/* 1 · text that used the fill colour → text-safe dark green */
.srcgrid__list a:hover, .termlinks a:hover,
.prose__h2:hover .anchor, .anchor:focus-visible, .cite a, .gl__letter, .mini__n { color: var(--ch, var(--brand-strong)); }
.cite a, .prose__h2:hover .anchor, .anchor:focus-visible, .gl__letter { color: var(--brand-strong); }
.faq__item summary::after, .toc-m summary::after { color: var(--brand-strong); }
.flow__num { fill: var(--brand-strong); }
.list li::marker, .pathfull__list li::marker { color: var(--ch, var(--brand-strong)); }
/* 2 · glossy pill buttons */
.btn, .tag-chip, .chip { border-radius: var(--radius-pill); }
.btn--primary {
background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 46%, var(--brand-lo) 100%);
color: var(--on-brand);
box-shadow: inset 0 1px 0 var(--gloss-hi), inset 0 -2px 0 var(--gloss-lo), 0 6px 16px var(--glow-brand);
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.btn--primary:hover, .btn--primary.is-hover { background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 46%, var(--brand-lo) 100%); color: var(--on-brand);
transform: translateY(-1px); filter: saturate(1.08); box-shadow: inset 0 1px 0 var(--gloss-hi), inset 0 -2px 0 var(--gloss-lo), 0 10px 24px var(--glow-brand); }
.btn--secondary { border-color: var(--brand); }
.steps__n { background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 50%, var(--brand-lo) 100%); color: var(--on-brand);
box-shadow: inset 0 1px 0 var(--gloss-hi), 0 0 0 3px var(--bg), 0 0 0 4px var(--border-subtle); }
/* 3 · pill search + inputs */
.searchpage input, .field input, .field select, .field textarea { border-radius: var(--radius-pill); }
.field textarea { border-radius: var(--radius-3); }
/* 4 · chrome hairline under the sticky one-row header: see 20-header.css (.masthead::after) */
/* 5 · chrome ring on the brand mark + calculator + search panels */
.brand__mark { filter: drop-shadow(0 1px 0 var(--gloss-hi)); }
.calc, .sdialog__panel, .sres li.sres__empty { border-block-start-color: var(--brand); position: relative; }
.calc::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: var(--chrome);
-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* 6 · sparkle ✦ on the home lead headline and channel hero (one per page, decorative) */
.card--lead .card__title::after, .chhero__h1::after { content: "✦"; display: inline-block; margin-inline-start: .18em; font-size: .42em; vertical-align: super;
color: var(--brand); animation: y2k-twinkle 2.8s ease-in-out infinite; }
@keyframes y2k-twinkle { 50% { opacity: .3; transform: scale(.72) rotate(18deg); } }
/* 7 · cards lift on hover (pointer devices only) */
@media (hover: hover) {
.card, .path { transition: transform var(--dur-2) var(--ease-out); }
.card:hover, .path:hover { transform: translateY(-4px); }
}
/* 9 · reading progress uses the fill colour with a soft glow */
.progress span { box-shadow: 0 0 8px var(--glow-brand); }
@media (prefers-reduced-motion: reduce) {
.card--lead .card__title::after, .chhero__h1::after { animation: none; }
.btn--primary, .card, .path { transition: none; }
.btn--primary:hover, .card:hover, .path:hover { transform: none; }
}
/* 10 · headline rhythm for Bitter (slab): heavier, tighter display sizes; body headings stay 700 */
h1, .card__title--xl, .chhero__h1, .arthero h1 { font-weight: 700; letter-spacing: -.015em; }
h2, h3, .shead__title { letter-spacing: -.005em; }