@import url("tokens.css");

:root { --site-paper:var(--fs-paper); --site-raised:var(--fs-paper-raised); --site-text:var(--fs-text); --site-strong:var(--fs-text); --site-muted:var(--fs-text-muted); --site-faint:var(--fs-text-faint, var(--fs-text-muted)); --site-border:var(--fs-border); --site-hair:var(--fs-hairline); --site-fire:var(--fs-fire); --site-gold:var(--fs-metal); --site-wood:var(--fs-wood); --site-water:var(--fs-water); --site-earth:var(--fs-earth); --site-maxw:660px; }
* { box-sizing:border-box; } html,body { margin:0; } body { background:var(--site-paper); color:var(--site-text); font-family:var(--fs-font-body); line-height:var(--fs-leading); -webkit-font-smoothing:antialiased; }

/* THE PAGE GROUND — a hanging scroll behind the whole site, not a hero ornament.
   Only 5 of 28 pages ever carried the old hero-scoped facade; the other 23 were bare
   paper. This puts the painting behind every page at once.
   `fixed` so the scroll holds still while the content moves over it — the reading
   experience of an actual 立軸, and it keeps the composition intact instead of cropping
   a tall painting into a short hero band.
   A negative z-index paints above body's background but beneath its content, so the art
   sits between the paper and the copy without touching either. The centre band of the
   art is empty by construction, which is where the text column lands. */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("assets/facade-light.webp");
  background-repeat:no-repeat; background-position:center top; background-size:cover;
  opacity:var(--fs-map-woodblock-opacity);
}
@media (prefers-color-scheme: dark) {
  /* Not the light art inverted — inverting a painting yields a photographic negative.
     This is a separately drawn asset: the same scene in thick ivory linework on black. */
  :root:not([data-theme="light"]) body::before { background-image:url("assets/facade-dark.webp"); opacity:var(--fs-map-woodblock-dark-opacity); }
}
:root[data-theme="dark"] body::before { background-image:url("assets/facade-dark.webp"); opacity:var(--fs-map-woodblock-dark-opacity); }
@media (prefers-reduced-motion: no-preference) { body::before { background-attachment:fixed; } }

/* THE READING SCRIM — paper washed back over the centre column, fading out to reveal the
   painting at the margins. The exact inverse of the radial mask this file used to carry.
   Why it must exist: the art's empty river band is ~45% of the image width, but the text
   column is 660px — on a wide viewport the copy spills past the void into the linework.
   Why it must be structural rather than measured: check-site-visual.mjs reads
   getComputedStyle().backgroundColor, so it can see background COLOURS and is blind by
   construction to a background IMAGE. It cannot ever tell us whether this art eats the
   text — the failure count is identical with and without the facade precisely because the
   probe never sees it. So legibility here is guaranteed by geometry, not asserted by a
   gate that cannot look. ::after paints over ::before, both beneath the content. */
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, var(--site-paper) 24%, var(--site-paper) 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, var(--site-paper) 14%, var(--site-paper) 86%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  opacity:.82;
} .wrap { max-width:var(--site-maxw); margin:0 auto; padding:0 var(--fs-space-5); } a { color:inherit; }
header.top { display:flex; align-items:center; gap:var(--fs-space-3); padding:var(--fs-space-5); max-width:var(--site-maxw); margin:0 auto; } .mark-zh { font-family:var(--fs-font-cjk-display); font-size:26px; letter-spacing:1px; color:var(--site-strong); } .mark-en { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--site-muted); } .beta { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--site-gold); border:1px solid color-mix(in srgb,var(--site-gold) 55%,transparent); border-radius:999px; padding:3px 10px; }
.site-nav { display:flex; gap:var(--fs-space-3); margin-left:auto; font-size:var(--fs-text-sm); } .site-nav a { color:var(--site-muted); text-decoration:none; } .site-nav a:hover,.hero-proof a { color:var(--site-accent); }
/* Where a page has no header.top to hang the control on (privacy.html, zh/privacy.html),
   theme.js mounts this unbranded slot instead of fabricating a second masthead. */
.theme-mount { display:flex; justify-content:flex-end; max-width:var(--site-maxw); margin:0 auto; padding:var(--fs-space-4) var(--fs-space-5) 0; }
.theme-toggle { flex:none; width:26px; height:26px; padding:0; border:1px solid var(--site-hair); border-radius:50%; background:var(--site-raised); color:var(--site-muted); font:600 11px/1 var(--fs-font-num); cursor:pointer; } .theme-toggle:hover { color:var(--site-text); border-color:var(--site-gold); } .theme-toggle:focus-visible { outline:3px solid var(--site-gold); outline-offset:3px; }
.hero { text-align:center; padding:var(--fs-space-6) 0 var(--fs-space-2); } .coin { width:150px; height:150px; margin:var(--fs-space-2) auto var(--fs-space-5); filter:drop-shadow(var(--fs-shadow)); display:block; } .hero h1 { margin:0; font-weight:400; } .hero h1 .zh { display:block; font-family:var(--fs-font-cjk-display); font-size:76px; line-height:1; color:var(--site-strong); letter-spacing:4px; font-weight:700; } .hero .en { display:block; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--site-muted); margin:var(--fs-space-2) 0 0; } .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .tag { font-size:28px; color:var(--site-strong); margin:36px auto var(--fs-space-3); max-width:26ch; line-height:1.18; letter-spacing:-.01em; } .tag .nb { white-space:nowrap; } .sub { color:var(--site-muted); max-width:48ch; margin:0 auto; line-height:1.62; } .creed { margin:var(--fs-space-4) auto var(--fs-space-1); color:var(--site-strong); font-size:17px; letter-spacing:.01em; } .creed b { color:var(--site-gold); font-weight:600; }
.hero { position:relative; isolation:isolate; overflow:hidden; } .hero > :not(.art-facade) { position:relative; z-index:1; }
/* Retired: the facade is now the page ground (body::before, top of file), so a hero-scoped
   copy would paint the same painting twice at two different crops. The markup keeps its
   aria-hidden div; this makes it inert rather than churning 5 HTML files for nothing. */
.art-facade { display:none; } .hero-proof { margin:var(--fs-space-4) auto 0; font-size:var(--fs-text-sm); } .hero-proof a { text-decoration:none; }
.cta-row { display:flex; flex-direction:column; align-items:center; gap:var(--fs-space-2); margin:28px 0 var(--fs-space-3); } .availability { color:var(--site-muted); font-size:var(--fs-text-sm); } .hosts { font-size:12px; color:var(--site-faint); letter-spacing:.04em; } .rule { height:1px; background:linear-gradient(90deg,transparent,var(--site-border),transparent); margin:44px 0; } section h2 { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--site-gold); font-weight:600; margin:0 0 var(--fs-space-3); } section p { color:var(--site-text); margin:0 0 var(--fs-space-3); } .lead { color:var(--site-muted); } .faq h3 { font-size:16px; color:var(--site-strong); margin:22px 0 var(--fs-space-2); } .faq p { margin:0 0 var(--fs-space-1); } .faq a,.privacy a { color:var(--site-accent,var(--fs-accent)); }
.chips { display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:var(--fs-space-2); margin:var(--fs-space-2) 0 var(--fs-space-1); } .chip { display:flex; flex-direction:column; gap:var(--fs-space-2); border:1px solid var(--site-hair); border-radius:var(--fs-radius-md); padding:var(--fs-space-3); background:var(--site-raised); } .chip-hd { display:flex; align-items:center; justify-content:space-between; gap:var(--fs-space-3); } .chip-why { font-size:12.5px; line-height:1.5; color:var(--site-muted); margin:0; } .chip b { font-weight:600; color:var(--site-strong); } .chip-en { color:var(--site-muted); font-size:12px; margin-left:6px; } .chip-el { display:inline-flex; flex:none; align-items:center; justify-content:flex-end; gap:5px; line-height:1; } .chip-el i { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 4px; border:1px solid color-mix(in srgb,currentColor 42%,var(--site-hair)); border-radius:var(--fs-radius-sm); background:color-mix(in srgb,currentColor 18%,var(--site-paper)); font-size:19px; font-style:normal; font-weight:700; line-height:1; } .e-wood{color:var(--site-wood)} .e-fire{color:var(--site-fire)} .e-earth{color:var(--site-earth)} .e-metal{color:var(--site-gold)} .e-water{color:var(--site-water)} .el-legend { display:flex; flex-wrap:wrap; gap:var(--fs-space-4); margin-top:var(--fs-space-4); font-size:13px; color:var(--site-muted); } .el { display:inline-flex; align-items:center; gap:7px; } .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .cols h3 { font-size:14px; margin:0 0 var(--fs-space-2); color:var(--site-strong); } .cols .is h3 { color:var(--site-wood); } .cols ul { margin:0; padding-left:18px; color:var(--site-muted); } .cols li { margin:5px 0; } footer { margin:56px 0 40px; text-align:center; color:var(--site-faint); font-size:13px; } footer .links a { color:var(--site-muted); text-decoration:none; margin:0 10px; } footer .links a:hover { color:var(--site-text); } .counter { display:inline-flex; align-items:center; gap:var(--fs-space-2); margin:var(--fs-space-5) 0 var(--fs-space-3); font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--site-muted); } .counter[hidden] { display:none; } .counter .coinmark { color:var(--site-gold); } .disc { max-width:46ch; margin:var(--fs-space-3) auto 0; color:var(--site-faint); line-height:1.7; }
.privacy .wrap { padding:40px var(--fs-space-5) 64px; } .privacy .back { font-size:13px; color:var(--site-muted); text-decoration:none; } .privacy h1 { font-size:28px; color:var(--site-strong); margin:22px 0 var(--fs-space-1); } .privacy .updated { color:var(--site-faint); font-size:13px; margin:0 0 28px; } .privacy h2 { font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--site-gold); margin:30px 0 var(--fs-space-2); } .privacy p,.privacy li { color:var(--site-text); } .privacy .muted { color:var(--site-muted); } .privacy ul { padding-left:20px; } .privacy li { margin:6px 0; } .privacy .rule { margin:34px 0; border:0; }
/* No opaque paper here: it would paint over the fixed page ground and leave a hard
   horizontal seam where the hero ends and the painting starts. `isolation:isolate` is
   dropped for the same reason — it created a stacking context that trapped the art. */
.page-hero { position:relative; padding:var(--fs-space-8) var(--fs-space-5); text-align:center; background:transparent; }  .page-hero > :not(.art-facade) { position:relative; z-index:1; } .page-hero h1 { font-family:var(--fs-font-latin-display); color:var(--site-strong); font-size:var(--fs-text-2xl); margin:0 auto var(--fs-space-3); } .page-hero p { max-width:48ch; margin:0 auto; color:var(--site-text); } .proof-wrap { max-width:var(--site-maxw); margin:0 auto; padding:var(--fs-space-6) var(--fs-space-5) var(--fs-space-8); } .proof-intro { color:var(--site-muted); } .proof-map { margin:var(--fs-space-5) 0; padding:var(--fs-space-3); background:var(--site-raised); border:1px solid var(--site-hair); border-radius:var(--fs-radius-lg); } .proof-map img { display:block; width:100%; height:auto; border-radius:var(--fs-radius-md); } .proof-map .proof-map-dark { display:none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proof-map .proof-map-light { display:none; } :root:not([data-theme="light"]) .proof-map .proof-map-dark { display:block; } } :root[data-theme="dark"] .proof-map .proof-map-light { display:none; } :root[data-theme="dark"] .proof-map .proof-map-dark { display:block; } .proof-map figcaption { margin-top:var(--fs-space-3); color:var(--site-muted); font-size:var(--fs-text-sm); } .attribution { font-size:var(--fs-text-sm); color:var(--site-muted); } .attribution a { color:var(--site-accent); } .factor-proof { display:grid; gap:var(--fs-space-3); margin:var(--fs-space-5) 0; } .proof-card { padding:var(--fs-space-4); background:var(--site-raised); border:1px solid var(--site-hair); border-radius:var(--fs-radius-md); } .proof-card h2 { margin:0 0 var(--fs-space-2); color:var(--site-strong); font-size:var(--fs-text-lg); } .proof-card p { margin:0 0 var(--fs-space-2); color:var(--site-text); } .proof-card .evidence { color:var(--site-muted); } .confidence { display:inline-block; padding:var(--fs-space-1) var(--fs-space-2); background:var(--fs-score-favorable-soft); color:var(--fs-water); border-radius:var(--fs-radius-sm); font-size:var(--fs-text-sm); font-weight:600; } .confidence.high { background:var(--fs-score-favorable-soft); } .confidence.medium { background:var(--fs-score-mixed-soft); } .limitation { padding:var(--fs-space-4); border-left:var(--fs-map-stroke-mid) solid var(--site-gold); background:var(--fs-frame-wash); } .limitation h2 { color:var(--site-strong); font-size:var(--fs-text-lg); margin:0 0 var(--fs-space-2); } .zh-page .page-hero h1 { font-family:var(--fs-font-cjk-display); }
.chip { text-decoration:none; } .chip:hover { border-color:var(--site-gold); background:var(--fs-frame-wash); } .chip:focus-visible,.factor-nav a:focus-visible,.factor-back:focus-visible { outline:3px solid var(--site-gold); outline-offset:3px; }
.factor-page .proof-wrap { padding-top:var(--fs-space-5); } .factor-kicker { color:var(--site-muted); font-size:var(--fs-text-sm); letter-spacing:.08em; text-transform:uppercase; } .factor-page .page-hero h1 { margin-bottom:var(--fs-space-1); } .factor-element { color:var(--site-gold); font-weight:600; } .factor-page h2 { margin-top:var(--fs-space-5); } .factor-page .factor-body { color:var(--site-text); } .factor-page .factor-note { color:var(--site-muted); } .factor-nav { display:flex; flex-wrap:wrap; gap:var(--fs-space-2); margin:var(--fs-space-5) 0; } .factor-nav a,.factor-back { color:var(--site-accent,var(--fs-accent)); } .factor-nav a { padding:var(--fs-space-2) var(--fs-space-3); border:1px solid var(--site-hair); border-radius:var(--fs-radius-md); text-decoration:none; background:var(--site-raised); } .factor-nav a:hover { border-color:var(--site-gold); }
/* TYPE ROLES — the display serif the tokens always defined but the page never used.
   DESIGN.md asks for "a serif to evoke tradition and authority" on headings; every role
   was computing to the body sans, so the page had no typographic hierarchy at all.
   The uppercase letter-spaced eyebrow (WHAT IT READS) is gone with it — AI-TELLS.md
   flags that pattern, and it was carrying no meaning the heading doesn't already carry. */
.page-hero h1, section h2, .faq h3, .cols h3, .proof-card h2, .limitation h2 { font-family:var(--fs-font-display); }
section h2 { font-size:var(--fs-text-lg); letter-spacing:.02em; text-transform:none; font-weight:600; line-height:1.3; text-wrap:balance; }
.faq h3 { font-size:var(--fs-text-lg); line-height:1.35; text-wrap:balance; }
.lead,.sub,.chip-why { text-wrap:pretty; }
/* DESIGN-METHOD.md R3 #1 — every artwork gets a hairline outline so it never floats. */
.coin,.proof-map img { outline:1px solid rgba(255,255,255,.1); outline-offset:-1px; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .coin,:root:not([data-theme="dark"]) .proof-map img { outline-color:rgba(0,0,0,.1); } }
:root[data-theme="light"] .coin,:root[data-theme="light"] .proof-map img { outline-color:rgba(0,0,0,.1); }

/* THE FACTOR INDEX (owner-selected, 2026-07-15) — the ten factors as an almanac index,
   not a card grid. Ten equal boxes said no factor mattered more than another, so none
   did; AI-TELLS.md names "everything in equal boxes" outright, and a card kit is the
   shape a component library produces, not a considered page.
   Each factor now owns one generous row: term left, reading right, a hairline between.
   The measured fault this fixes: the grid ran at 8px gaps and 12px padding against an
   89px section rhythm — 11x tighter than the page around it. That was the congestion.
   Scoped to .landing: .chips is landing-only, but --site-maxw is shared with the
   privacy page, so it must not leak. */
.landing { --site-maxw:800px; }
.landing .hero { display:block; padding:var(--fs-space-6) 0 var(--fs-space-2); }
.landing .chips { display:block; margin-top:var(--fs-space-5); border-top:1px solid var(--site-hair); }
.landing .chip { display:grid; grid-template-columns:minmax(148px,30%) 1fr; align-items:start; gap:var(--fs-space-5); min-height:0; padding:var(--fs-space-4) 0; border:0; border-bottom:1px solid var(--site-hair); border-radius:0; background:transparent; }
.landing .chip-hd { align-items:flex-start; }
.landing .chip-why { font-size:var(--fs-text-md); line-height:1.6; }
.landing .el-legend { margin-top:var(--fs-space-5); }

@media (max-width:560px) { .cols { grid-template-columns:1fr; } .hero h1 .zh { font-size:58px; } .tag { font-size:23px; } .landing .chip { grid-template-columns:1fr; gap:var(--fs-space-2); } }