/* ============================================================================
ANANTA Guide — base stylesheet (site 162 / batch 213)
Structure + the approved "night city" visual system. The token block below is
copied verbatim from 02-design/20260919-ananta/tokens_ANANTA.css (report 1026
r1, fileId 2042), which is the single source of truth for this site.
Every hue traces to a measured sample of official ANANTA material; none was
invented. Signature components: .hud-frame (HUD bracket fact card),
.status-pill (yes / no / not-published), and the platform matrix table.
Class hooks consumed by check-geo.mjs / capture.cjs must survive:
h1, .btn, details, .table-wrap, footer brand , byline, .
========================================================================== */
:root {
color-scheme: dark;
/* ---- surfaces (near-black, faint blue-slate cast) ---------------------- */
--surface-page: #090B0E; /* official rgba(9,11,14) */
--surface-inset: #0D1015; /* wells, code, table stripes */
--surface-raised: #14181F; /* section bands */
--surface-card: #191E26; /* cards, table surface */
--surface-card-hi: #21272F; /* card hover / selected row */
/* ---- text -------------------------------------------------------------- */
--ink-primary: #F7F7F7;
--ink-secondary: #C3C8D2;
--ink-muted: #8E96A3;
/* ---- brand + accents --------------------------------------------------- */
--brand: #00A2FF;
--brand-strong: #3FA8FD;
--brand-text: #7CC7FF;
--brand-2: #00ECE2;
--accent: #D37930;
/* ---- borders ----------------------------------------------------------- */
--border: #262C35;
--border-strong: #9B94B3;
/* ---- semantic states --------------------------------------------------- */
--state-yes: #45D48A;
--state-no: #FF5F6B;
--state-tbd: #E9A45E;
/* ---- typography -------------------------------------------------------- */
--font-display: "Chakra Petch", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--fs-display-hero: clamp(2.75rem, 7.2vw, 5.5rem);
--fs-display-page: clamp(2rem, 4.4vw, 3.25rem);
--fs-h2: clamp(1.375rem, 2.2vw, 1.875rem);
--fs-h3: 1.0625rem;
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-micro: 0.75rem;
--fs-data: 0.9375rem;
--lh-display: 0.95;
--lh-heading: 1.2;
--lh-body: 1.65;
--lh-data: 1.45;
--ls-display: 0.01em;
--ls-eyebrow: 0.16em;
/* ---- spacing & layout -------------------------------------------------- */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
--width-measure: 72rem;
--width-wide: 84rem;
--width-prose: 42rem;
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-pill: 999px;
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -28px rgba(0,0,0,0.9);
--ring-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--brand-strong);
/* signature component: the HUD bracket frame */
--hud-frame: rgba(0,162,255,0.55);
--hud-glow: rgba(0,162,255,0.18);
--label-on-brand: #04131F;
/* Template token aliases. check-consent.mjs §5 pins the CMP/ad layer to the
template's exact declarations, so that layer keeps the template property
values and is pointed at the ANANTA scale through these names instead of
being rewritten (which would silently drop the contract). */
--ink: var(--ink-primary);
--surface: var(--surface-card);
--surface-sunken: var(--surface-inset);
--brand-ink: var(--label-on-brand);
--radius: var(--radius-md);
--font-mono: var(--font-data);
/* masthead height, measured at >=768px (视觉系统_ANANTA.md §3.3) */
--masthead-h: 54px;
}
/* One theme only: the dark "night city" palette above, which is also the
official site's own choice. A second theme ships only on a real requirement. */
/* ---- self-hosted typefaces (Google Fonts, OFL 1.1 latin subsets) ---------- */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap;
src: url(/assets/fonts/ChakraPetch-600.latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap;
src: url(/assets/fonts/ChakraPetch-700.latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
src: url(/assets/fonts/Inter-var.latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url(/assets/fonts/IBMPlexMono-400.latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
src: url(/assets/fonts/IBMPlexMono-600.latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--surface-page);
color: var(--ink-secondary);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
background-image:
radial-gradient(1100px 520px at 12% -6%, rgba(0,162,255,0.16), transparent 62%),
radial-gradient(900px 460px at 92% 4%, rgba(0,236,226,0.08), transparent 60%);
background-repeat: no-repeat;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
.wrap { max-width: var(--width-measure); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--wide { max-width: var(--width-wide); }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
left: var(--sp-4); top: var(--sp-4); z-index: 50;
background: var(--surface-card); color: var(--ink-primary);
padding: var(--sp-2) var(--sp-4); border: 1px solid var(--brand);
}
/* Sticky masthead: in-page jumps must land below it. Two rows under 768px. */
section[id] { scroll-margin-top: 108px; }
@media (min-width: 768px) { section[id] { scroll-margin-top: 66px; } }
/* ---------- masthead ------------------------------------------------------- */
header.masthead {
position: sticky; top: 0; z-index: 30;
background: rgba(9,11,14,0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.masthead__inner { display: flex; align-items: center; gap: var(--sp-5); padding-block: var(--sp-3); }
.brandmark { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; color: var(--ink-primary); }
.brandmark:hover { text-decoration: none; color: var(--ink-primary); }
.brandmark b { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.brandmark span { font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.mainnav { margin-left: auto; display: flex; gap: var(--sp-5); flex-wrap: nowrap; }
.mainnav a { color: var(--ink-secondary); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.mainnav a:hover { color: var(--ink-primary); }
.mainnav a[aria-current] { color: var(--brand-text); }
.unofficial { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px var(--sp-3); white-space: nowrap; }
header [data-language-switcher] { display: flex; gap: var(--sp-3); }
header [data-language-switcher] a { color: var(--ink-secondary); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
header [data-language-switcher] a[aria-current="page"] { color: var(--brand-text); text-decoration: underline; }
/* ---------- signature component 1: HUD bracket frame ----------------------- */
.hud-frame { position: relative; border: 1px solid var(--hud-frame); box-shadow: 0 0 0 1px var(--hud-glow), inset 0 0 80px -40px var(--hud-glow); }
.hud-frame::before, .hud-frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--brand); }
.hud-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hud-strip { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); }
.hud-strip__dot { color: var(--brand); }
.hud-strip__right { margin-left: auto; }
.hud-eyebrow { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brand-text); margin: 0 0 var(--sp-3); }
.hud-eyebrow > span { flex: 0 1 auto; }
.hud-eyebrow::after { content: ""; flex: 1 1 var(--sp-6); min-width: var(--sp-4); height: 1px; background: var(--border); }
@media (max-width: 560px) { .hud-eyebrow::after { display: none; } }
/* ---------- buttons -------------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-small); text-decoration: none; border: 1px solid transparent; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--brand); color: var(--label-on-brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-strong); color: var(--label-on-brand); }
.btn.ghost { border-color: var(--border-strong); color: var(--ink-primary); }
.btn.ghost:hover { border-color: var(--brand-strong); color: var(--ink-primary); }
/* ---------- home: hero ----------------------------------------------------- */
.hero { padding-block: var(--sp-7) var(--sp-8); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-7); align-items: start; }
.hero__eyebrow { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-4); }
.hero h1 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: var(--lh-display); }
.hero h1 .name { display: block; font-size: var(--fs-display-hero); color: var(--ink-primary); letter-spacing: 0.005em; }
.hero h1 .claim { display: block; margin-top: var(--sp-3); font-size: clamp(1.125rem, 2.1vw, 1.5rem); font-weight: 600; color: var(--brand-text); letter-spacing: 0.01em; }
.hero__lede { margin: var(--sp-5) 0 0; max-width: var(--width-prose); color: var(--ink-secondary); font-size: 1.0625rem; }
.hero h1 .claim, h2 { text-wrap: balance; }
.hero__stats { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.hero__stats li { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.05em; color: var(--ink-primary); background: var(--surface-inset); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); padding: 4px var(--sp-3); white-space: nowrap; }
.hero__stamp { margin: var(--sp-5) 0 0; font-family: var(--font-data); font-size: var(--fs-small); color: var(--ink-muted); }
.hero__stamp b { color: var(--ink-primary); font-weight: 600; white-space: nowrap; }
/* HUD fact card (hero right column) */
.factcard { padding: 0; overflow: hidden; background: var(--surface-inset); }
.factcard dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.factcard .row { display: flex; gap: var(--sp-4); justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.factcard .row:first-of-type { border-top: 0; }
.factcard dt { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.factcard dd { margin: 0; text-align: right; color: var(--ink-primary); font-weight: 500; font-size: var(--fs-small); }
.factcard dd.mono { font-family: var(--font-data); }
.asof { display: block; font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 400; color: var(--ink-muted); }
.status-pill + .asof { margin-top: var(--sp-1); }
/* ---------- home: sections ------------------------------------------------- */
.section { padding-block: var(--sp-8); border-top: 1px solid var(--border); }
.section.band { background: var(--surface-raised); }
h2 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--ink-primary); letter-spacing: 0.01em; }
h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h3); color: var(--ink-primary); font-weight: 600; }
.headline { margin: var(--sp-3) 0 0; font-size: 1.0625rem; color: var(--ink-primary); font-weight: 600; max-width: var(--width-prose); }
.lede { margin: 0 0 var(--sp-6); max-width: var(--width-prose); }
.prose { max-width: var(--width-prose); margin: 0 0 var(--sp-5); }
.prose p { margin: 0 0 var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.note { max-width: var(--width-prose); color: var(--ink-muted); font-size: var(--fs-small); margin: var(--sp-3) 0 var(--sp-6); }
.src { font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); letter-spacing: 0.03em; }
.grid { display: grid; gap: var(--sp-4); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); }
.card h3 { font-size: 1rem; }
.card p { margin: 0; font-size: var(--fs-small); color: var(--ink-secondary); }
.card__meta { margin-top: var(--sp-4); font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); letter-spacing: 0.04em; }
.chip { display: inline-block; font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.05em; color: var(--ink-secondary); background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px var(--sp-3); }
.roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.roster__item { background: var(--surface-card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); padding: var(--sp-4); }
.roster__item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink-primary); letter-spacing: 0.02em; text-transform: uppercase; }
.roster__item span { font-size: var(--fs-small); color: var(--ink-muted); }
.videoframe { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-inset); padding: var(--sp-5); display: grid; gap: var(--sp-2); text-decoration: none; }
.videoframe b { color: var(--ink-primary); font-size: var(--fs-h3); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.videoframe:hover b { color: var(--brand-text); text-decoration-color: var(--brand-strong); }
.videoframe:hover { border-color: var(--border-strong); text-decoration: none; }
.videoframe span { font-family: var(--font-data); font-size: var(--fs-small); color: var(--ink-muted); }
.videoframe em { font-style: normal; color: var(--accent); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.chanlink { margin-top: var(--sp-5); font-family: var(--font-data); font-size: var(--fs-small); }
.tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.task { display: block; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); text-decoration: none; }
.task:hover { text-decoration: none; border-color: var(--border-strong); }
.task:hover h3 { color: var(--brand-text); }
.task-num { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.task h3 { margin-top: var(--sp-3); }
.task p { font-size: var(--fs-small); color: var(--ink-secondary); max-width: 40ch; }
.task .cta { display: inline-block; margin-top: var(--sp-4); font-weight: 700; font-size: var(--fs-small); color: var(--brand-text); }
.faq { display: grid; gap: var(--sp-3); }
.faq details { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-5); }
.faq summary { cursor: pointer; color: var(--ink-primary); font-weight: 600; font-size: 1rem; min-height: 32px; list-style: none; display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-data); font-size: 1.25rem; color: var(--brand); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--ink-secondary); }
.finalcta { border-top: 1px solid var(--border-strong); background: var(--surface-card); }
.finalcta .lede { margin-bottom: 0; }
/* ---------- signature component 2: status pill ----------------------------- */
.status-pill { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 3px var(--sp-3); border-radius: var(--radius-pill); border: 1px solid currentColor; white-space: nowrap; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill--yes { color: var(--state-yes); }
.status-pill--no { color: var(--state-no); }
.status-pill--tbd { color: var(--state-tbd); }
/* ---------- signature component 3: data tables ----------------------------
The platform matrix is an A-type enumeration surface: column alignment is the
whole point, so narrow screens scroll it sideways instead of reflowing it into
cards. Two independent conditions rule out a pinned header below 980px —
(1) overflow-x:auto on .table-wrap makes it the sticky context, and (2) the
masthead is two rows under 860px, so top:54px would land behind it. Both hold
from 980px up, so the header is pinned only there; below that the row's first
cell stays pinned to the left edge. Measured in 视觉系统_ANANTA.md §3.3.
Measured correction (2026-09-23, bsk): an ancestor with overflow-x:auto is a
scroll container, so a sticky thead th is translated only once and then
scrolls away with the table. Above 980px the table fits its wrapper, so the
wrapper drops out of the scroll-container role and the header pins for the
whole table; below 980px the wrapper keeps overflow-x:auto so the matrix
scrolls sideways with the first column pinned. */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); margin: var(--sp-5) 0; }
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: var(--fs-small); text-align: left; }
thead th { background: var(--surface-raised); color: var(--ink-primary); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-strong); }
tbody th { text-align: left; vertical-align: top; font-weight: 600; color: var(--ink-primary); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--ink-secondary); vertical-align: top; }
tbody tr:nth-child(odd) { background: var(--surface-inset); }
tbody tr:hover { background: var(--surface-card-hi); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td strong, th strong { color: var(--ink-primary); }
.num { font-family: var(--font-data); color: var(--ink-primary); white-space: nowrap; }
@media (max-width: 979px) {
tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface-card); box-shadow: 1px 0 0 var(--border); }
tbody tr:nth-child(odd) th { background: var(--surface-inset); }
}
@media (min-width: 980px) {
.table-wrap { overflow: visible; }
thead th { position: sticky; top: var(--masthead-h); z-index: 2; }
}
.scroll-hint { font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); margin: var(--sp-3) 0 0; letter-spacing: 0.04em; display: none; }
@media (max-width: 979px) { .scroll-hint { display: block; } }
.callexnote { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--accent); background: var(--surface-inset); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-small); }
.callexnote b { color: var(--ink-primary); }
/* ---------- article pages -------------------------------------------------- */
.article { max-width: var(--width-measure); margin-inline: auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }
.article.trust { max-width: 58rem; }
.crumb { font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); letter-spacing: 0.04em; }
.crumb a { color: var(--ink-muted); text-decoration: none; }
.crumb a:hover { color: var(--brand-text); }
.article h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-page); line-height: var(--lh-heading); color: var(--ink-primary); letter-spacing: 0.01em; margin: var(--sp-4) 0 var(--sp-4); }
.article .lead { font-size: 1.0625rem; max-width: var(--width-prose); color: var(--ink-secondary); }
.byline { font-family: var(--font-data); font-size: var(--fs-micro); color: var(--ink-muted); margin: var(--sp-4) 0 var(--sp-2); letter-spacing: 0.03em; }
.article h2 { font-size: var(--fs-h2); margin: var(--sp-7) 0 var(--sp-4); }
.article h3 { font-size: 1.25rem; margin: var(--sp-6) 0 var(--sp-3); }
.article p { max-width: var(--width-prose); }
.article ol, .article ul { max-width: var(--width-prose); padding-left: var(--sp-5); }
.article li { margin: var(--sp-2) 0; }
.article li strong { color: var(--ink-primary); }
.pagehead { padding-block: var(--sp-6) 0; }
.verdict { margin: var(--sp-5) 0 0; padding: var(--sp-5); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.verdict .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.25rem); color: var(--ink-primary); line-height: 1.15; margin: 0; max-width: none; }
.verdict p { margin: var(--sp-3) 0 0; max-width: 62ch; }
.verdict p:first-child { margin-top: 0; }
.jumpnav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 0; font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; }
.jumpnav a { color: var(--brand-text); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.jumpnav a:hover { border-bottom-color: var(--brand-text); }
.related { border-top: 1px solid var(--border); margin-top: var(--sp-7); padding-top: var(--sp-5); }
.related h2 { font-size: 1.25rem; margin: 0 0 var(--sp-4); }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); max-width: var(--width-prose); }
.related a { display: inline-block; border-top: 2px solid var(--brand); padding-top: var(--sp-3); min-height: 44px; font-weight: 700; color: var(--brand-text); text-decoration: none; }
.related a:hover { color: var(--brand-strong); text-decoration: underline; }
.sources { margin-top: var(--sp-6); font-size: var(--fs-small); }
.sources h2 { font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--sp-3); }
.sources ul { margin: 0; padding-left: var(--sp-5); max-width: 62ch; }
.sources li { margin: var(--sp-2) 0; color: var(--ink-muted); }
.sources a { color: var(--ink-secondary); }
/* ---------- footer --------------------------------------------------------- */
footer.sitefoot { border-top: 1px solid var(--border); background: var(--surface-inset); padding-block: var(--sp-7); font-size: var(--fs-small); }
.sitefoot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); }
.sitefoot h4 { margin: 0 0 var(--sp-3); font-family: var(--font-data); font-size: var(--fs-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); }
.sitefoot strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-primary); margin-bottom: var(--sp-3); }
.sitefoot p { margin: 0 0 var(--sp-3); color: var(--ink-secondary); max-width: 46ch; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sitefoot a { color: var(--ink-secondary); text-decoration: none; }
.sitefoot a:hover { color: var(--brand-text); }
.sitefoot time { font-family: var(--font-data); color: var(--ink-muted); }
.sitefoot__legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--ink-muted); font-size: var(--fs-micro); font-family: var(--font-data); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: center; }
/* ---------- consent choices entry point + section ------------------------- */
.consent-settings-button { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-5); min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink-primary); font: 600 var(--fs-small) var(--font-body); cursor: pointer; }
.consent-settings-button:hover { border-color: var(--brand-strong); }
.consent-choices { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); margin: var(--sp-5) 0 var(--sp-6); padding: var(--sp-5); }
.consent-choices h2 { font-size: 1.125rem; margin: 0 0 var(--sp-2); }
.consent-choices p { font-size: var(--fs-small); color: var(--ink-secondary); margin: 0; }
/* ---------- mandatory-choice page lock (site-ads.md §6) --------------------
tarteaucitron's own overlay blocks pointer events; these rules additionally
stop the background from scrolling (wheel, touch and keyboard) until the
visitor has picked accept or reject. Kept verbatim: check-consent.mjs §5. */
html.consent-choice-required,
body.consent-choice-required {
overflow: hidden !important;
overscroll-behavior: none;
}
body.consent-choice-required{
position:fixed;
inset:0;
width:100%;
}
/* ---------- self-hosted consent dialog ------------------------------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 24px 90px rgba(0,0,0,.45);font-family:var(--font-body)}
html body #tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible::before{background:rgba(8,10,12,.82) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:auto}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{box-sizing:border-box !important;width:min(700px,calc(100% - 48px)) !important;min-width:0 !important;max-width:700px !important;max-height:calc(100dvh - 48px);padding:clamp(30px,4.6vw,48px) !important;overflow-y:auto;border-radius:var(--radius)}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{display:block;margin-bottom:18px;color:var(--ink);font-family:var(--font-display);font-size:clamp(29px,4.4vw,42px);font-weight:800;line-height:1.05;letter-spacing:-1px;text-align:center}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{display:block;max-width:58ch;margin:0 auto 26px;padding:0;color:var(--ink);font-size:18px;line-height:1.6;text-align:center}
html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton{min-height:48px;padding:13px 18px !important;border-radius:8px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:700 15px/1.3 var(--font-body);cursor:pointer}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2{border:1px solid var(--border);background:var(--surface-sunken);color:var(--ink)}
/* Pre-script fallback: the Personalize control is removed at runtime and the
privacy control is replaced by a real link, so neither can flash as a
third button. */
html body #tarteaucitronRoot #tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronPersonalize,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrl,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog{display:none !important}
html body #tarteaucitronRoot [data-consent-privacy-link]{display:block;width:fit-content;margin:16px auto 0;color:var(--ink-muted);font-size:13px;line-height:1.4;text-align:center;text-decoration:underline;text-underline-offset:3px}
html body #tarteaucitronRoot [data-consent-privacy-link]:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* ---------- inert advertising placeholder (site-ads.md §4) -----------------
Ads are disabled for this site (site.config.json ads.enabled=false), so no
slot is emitted; the reservation rules stay in place because the flag must be
reversible without a stylesheet change. */
.ad-slot{--ad-slot-height:120px;display:grid;place-items:center;gap:6px;min-height:var(--ad-slot-height);margin:32px 0;padding:14px;overflow:hidden;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface-sunken);color:var(--ink-muted);text-align:center}
.ad-slot--banner{--ad-slot-height:96px;width:100%}
.ad-slot--rectangle{--ad-slot-height:280px;width:min(100%,360px);margin-right:auto;margin-left:auto}
.ad-slot-label{font:700 11px/1.4 var(--font-mono);letter-spacing:2px;text-transform:uppercase}
.ad-consent-note{margin:0;max-width:38ch;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.ad-slot-body{width:100%;overflow-wrap:anywhere}
.ad-slot-body iframe,.ad-slot-body img,.ad-slot-body ins{max-width:100%}
/* The "Ad" marker always stays visible; only the status copy is retired once
the network script has actually loaded. No creative is ever claimed. */
.ad-slot[data-ad-state="loaded"] > .ad-consent-note{display:none}
.ad-slot[data-ad-state="error"]{border-style:solid;border-color:var(--border)}
/* Mobile consent + ad reservation. The template's exact 760px block is kept
verbatim (check-consent.mjs §5 asserts it); ANANTA-specific breakpoints live
in the responsive section below. */
@media(max-width:760px){
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{width:calc(100% - 20px) !important;max-height:calc(100dvh - 20px);padding:26px 14px 20px !important}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{margin-bottom:14px;font-size:clamp(25px,8vw,34px)}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{margin-bottom:20px;font-size:16px;line-height:1.5}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig button{width:100% !important;margin:0 0 10px !important}
.ad-slot{margin:26px 0;padding:12px}
.ad-slot--rectangle{--ad-slot-height:250px}
}
/* ---------- responsive ----------------------------------------------------- */
@media (max-width: 1023px) {
.hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.grid--3, .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sitefoot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.masthead__inner { flex-wrap: wrap; gap: var(--sp-3); }
.mainnav { margin-left: 0; order: 3; width: 100%; gap: var(--sp-4); flex-wrap: wrap; }
.grid--3, .grid--2, .roster, .tasks { grid-template-columns: 1fr; }
.sitefoot__grid { grid-template-columns: 1fr; }
.section { padding-block: var(--sp-7); }
.btn { width: 100%; justify-content: center; }
/* "UNOFFICIAL FAN SITE" is chrome, and at 375px it pushed the masthead to
three rows (126px), cost the hero its fold and duplicated the hero eyebrow. */
.unofficial { display: none; }
.hero { padding-block: var(--sp-4) var(--sp-7); }
.hero__lede { margin-top: var(--sp-4); }
.hero__stats { margin-top: var(--sp-3); gap: 6px var(--sp-2); }
.hero__stamp { margin-top: var(--sp-4); }
.cta-row { margin-top: var(--sp-4); }
.article { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
.article h1 { font-size: 2rem; }
.wrap { padding-inline: var(--sp-4); }
}
@media (max-width: 420px) {
.hero h1 .name { font-size: 2.5rem; }
.factcard .row { flex-direction: column; gap: var(--sp-1); }
.factcard dd { text-align: left; }
/* The approved mobile masthead is two rows (首页内容包_ANANTA.md, mobile fix
note). The four nav labels plus 16px gaps come to 337px, which fits a real
375px viewport but not one with a classic scrollbar taking 15px, so the
gap drops to 12px here and the nav cannot take a third row either way. */
.mainnav { gap: var(--sp-3); }
}