:root{color-scheme:dark}*{box-sizing:border-box}html{background:var(--sv-bg);color:var(--sv-bone);scroll-behavior:smooth}body{margin:0;background:var(--sv-bg);font-family:var(--sv-font-body);line-height:1.58;overflow-x:hidden}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:var(--fs-space-1)}.factor-root{position:relative;min-height:100vh;min-height:100dvh}.grain,.coordinate-grid{position:fixed;inset:0;pointer-events:none;z-index:-2}.grain{background:url('/assets/site-v2/paper-charcoal.webp') center/500px;opacity:.12}.coordinate-grid{inset:var(--fs-space-5);z-index:-1;border:1px solid var(--sv-line);background:url('/assets/site-v2/paper-bone.webp') center/420px;opacity:.12;mix-blend-mode:soft-light}.factor-masthead{width:var(--sv-shell);margin:0 auto;padding:var(--fs-space-5) 0;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--fs-space-4);align-items:center;border-bottom:1px solid var(--sv-line);font:var(--fs-text-xs) var(--sv-font-mono);letter-spacing:.09em}.factor-mark{text-decoration:none;font:500 var(--fs-text-md) var(--sv-font-display);letter-spacing:.12em}.factor-mark span{font-family:var(--sv-font-cjk-display);color:var(--sv-noted);margin-left:var(--fs-space-1)}.factor-masthead>p{margin:0;text-align:center;color:var(--sv-compass)}.factor-masthead nav{display:flex;justify-content:flex-end;gap:var(--fs-space-4)}.language-toggle{color:var(--sv-noted)}.factor-case{width:var(--sv-shell);margin:0 auto}.factor-hero{position:relative;display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,6fr);gap:var(--fs-space-6);padding:clamp(var(--fs-space-8),11vw,9rem) 0 clamp(var(--fs-space-8),8vw,7rem)}.factor-docket{margin:0;padding-right:var(--fs-space-4);border-right:1px solid var(--sv-line);font:var(--fs-text-2xs)/1.7 var(--sv-font-mono);letter-spacing:.1em;color:var(--sv-compass)}.factor-docket p{margin:0 0 var(--fs-space-4)}.factor-hero-copy{max-width:760px}.factor-kicker,.ref-index,.ref-confidence,.diagram-head,.source-meta{font:var(--fs-text-xs) var(--sv-font-mono);letter-spacing:.1em}.factor-kicker{margin:0 0 var(--fs-space-5);color:var(--sv-noted)}.factor-hero h1{margin:0;letter-spacing:-.055em;line-height:.84;font-weight:500}.term-en{display:block;font:clamp(3.7rem,9vw,8.25rem) var(--sv-font-display)}.term-zh{display:block;margin-top:var(--fs-space-4);font:clamp(2rem,4.5vw,4.4rem) var(--sv-font-cjk-display);letter-spacing:.04em;color:var(--sv-noted)}.factor-summary{max-width:620px;margin:var(--fs-space-6) 0 0;font:var(--fs-text-xl)/1.38 var(--sv-font-display)}.factor-boundary{grid-column:2;margin:var(--fs-space-5) 0 0;padding-left:var(--fs-space-3);border-left:2px solid var(--sv-clear);max-width:430px;font:var(--fs-text-xs)/1.6 var(--sv-font-mono);letter-spacing:.04em;color:var(--sv-compass)}.teaching-diagram{margin:0 0 clamp(var(--fs-space-8),10vw,8rem);padding:var(--fs-space-4);border-top:1px solid var(--sv-divider);border-bottom:1px solid var(--sv-line);background:var(--sv-deep-indigo)}.diagram-head{display:flex;justify-content:space-between;gap:var(--fs-space-4);margin-bottom:var(--fs-space-4);color:var(--sv-noted)}.diagram-head p{margin:0}.diagram-head span{color:var(--sv-compass)}.diagram-frame{min-height:280px;display:grid;place-items:center;background:url('/assets/site-v2/paper-bone.webp') center/420px;border:1px solid var(--sv-divider);color:var(--sv-ink)}.diagram-frame>p{padding:var(--fs-space-5);font:var(--fs-text-xs) var(--sv-font-mono)}.diagram-frame svg{display:block;width:100%;height:auto}.teaching-diagram figcaption{margin-top:var(--fs-space-3);font:var(--fs-text-xs)/1.55 var(--sv-font-mono);letter-spacing:.04em;color:var(--sv-compass)}.threshold-note{width:min(740px,86%);margin:0 0 clamp(var(--fs-space-8),9vw,7rem) auto;padding:var(--fs-space-4) 0 var(--fs-space-4) var(--fs-space-5);border-left:2px solid var(--sv-watch)}.threshold-note p:last-child{max-width:620px;margin:0;font:var(--fs-text-sm)/1.65 var(--sv-font-body)}.threshold-note .ref-index{margin:0 0 var(--fs-space-2);color:var(--sv-watch)}.reference-body{padding-bottom:clamp(var(--fs-space-8),9vw,7rem)}.ref-section{display:grid;grid-template-columns:minmax(180px,2fr) minmax(0,5fr);gap:clamp(var(--fs-space-5),7vw,6rem);padding:clamp(var(--fs-space-6),7vw,5rem) 0;border-top:1px solid var(--sv-line)}.ref-section-head{align-self:start}.ref-index{margin:0 0 var(--fs-space-2);color:var(--sv-compass)}.ref-confidence{margin:0 0 var(--fs-space-4);color:var(--sv-noted)}.ref-section h2,.source-register h2{margin:0;font:500 var(--fs-text-2xl)/1.05 var(--sv-font-display);letter-spacing:-.035em}.ref-section-copy{max-width:650px;font:var(--fs-text-md)/1.7 var(--sv-font-body)}.ref-section-copy p{margin:0 0 var(--fs-space-5)}.ref-section-copy p:last-child{margin-bottom:0}.ref-section-copy ul{margin:0;padding-left:var(--fs-space-5)}.ref-section-copy li{padding-left:var(--fs-space-2);margin:0 0 var(--fs-space-3)}.ref-section-copy strong{font-weight:500;color:var(--sv-bone)}.ref-section-copy a{color:var(--sv-noted)}.ref-spatial{grid-template-columns:minmax(210px,3fr) minmax(0,4fr);margin-left:8%}.ref-severity{grid-template-columns:minmax(0,4fr) minmax(220px,3fr);margin-right:5%}.ref-severity .ref-section-head{grid-column:2;grid-row:1}.ref-severity .ref-section-copy{grid-column:1;grid-row:1;justify-self:end}.ref-mitigation{margin-left:16%}.ref-compliant{grid-template-columns:minmax(210px,3fr) minmax(0,4fr);margin-right:12%}.ref-field{grid-template-columns:minmax(150px,1fr) minmax(0,6fr);margin-left:5%}.source-register{display:grid;grid-template-columns:minmax(180px,2fr) minmax(0,5fr);gap:clamp(var(--fs-space-5),7vw,6rem);padding:clamp(var(--fs-space-6),7vw,5rem) 0;border-top:1px solid var(--sv-line)}.source-note{max-width:590px;margin:0 0 var(--fs-space-5);font:var(--fs-text-sm)/1.6 var(--sv-font-body);color:var(--sv-compass)}.source-register ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--sv-line)}.source-register li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--fs-space-4);padding:var(--fs-space-3) 0;border-bottom:1px solid var(--sv-line)}.source-name{font:var(--fs-text-sm)/1.45 var(--sv-font-body)}.source-meta{color:var(--sv-noted);text-align:right}.factor-footer{width:var(--sv-shell);margin:clamp(var(--fs-space-8),8vw,7rem) auto 0;padding:var(--fs-space-5) 0;border-top:1px solid var(--sv-line);display:flex;justify-content:space-between;gap:var(--fs-space-5);font:var(--fs-text-xs)/1.55 var(--sv-font-mono);letter-spacing:.07em;color:var(--sv-compass)}.factor-footer p{margin:0;max-width:440px}.factor-error{padding:clamp(var(--fs-space-8),15vw,10rem) 0}.factor-error h1{font:500 var(--fs-text-2xl) var(--sv-font-display)}.factor-error a{color:var(--sv-noted)}.zh{font-family:var(--sv-font-cjk-body)}.zh .factor-summary,.zh .ref-section-copy,.zh .source-name{font-family:var(--sv-font-cjk-body)}.zh .ref-section h2,.zh .source-register h2{font-family:var(--sv-font-cjk-display)}@media (max-width:699px){.coordinate-grid{inset:var(--fs-space-3)}.factor-masthead{width:86vw;grid-template-columns:1fr auto}.factor-masthead>p{display:none}.factor-masthead nav{gap:var(--fs-space-3)}.factor-case{width:86vw}.factor-hero{display:block;padding-top:clamp(var(--fs-space-8),22vw,9rem)}.factor-docket{display:flex;gap:var(--fs-space-3);padding:0 0 var(--fs-space-4);border-right:0;border-bottom:1px solid var(--sv-line)}.factor-docket p{margin:0}.term-en{font-size:clamp(3.1rem,15vw,5rem)}.term-zh{font-size:clamp(1.8rem,9vw,3rem)}.factor-summary{font-size:var(--fs-text-xl)}.factor-boundary{margin-left:0}.diagram-head{display:block}.diagram-head span{display:block;margin-top:var(--fs-space-2)}.diagram-frame{min-height:180px}.threshold-note{width:100%;padding-left:var(--fs-space-4)}.ref-section,.ref-spatial,.ref-severity,.ref-compliant,.ref-field,.source-register{display:block;margin-left:0;margin-right:0}.ref-section{padding:var(--fs-space-6) 0}.ref-section-head{margin-bottom:var(--fs-space-5)}.ref-severity .ref-section-head,.ref-severity .ref-section-copy{grid-column:auto;grid-row:auto;justify-self:auto}.source-register>div:first-child{margin-bottom:var(--fs-space-5)}.source-register li{grid-template-columns:1fr}.source-meta{text-align:left}.factor-footer{width:86vw;display:block}.factor-footer p+p{margin-top:var(--fs-space-3)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.td-schematic .td-panel{fill:var(--sv-bg);stroke:var(--sv-divider);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-divider{stroke:var(--sv-divider);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-ground{fill:none;stroke:var(--sv-divider);stroke-width:var(--fs-map-stroke-strong)}
.td-schematic .td-road{fill:none;stroke:var(--sv-road-diagram);stroke-width:var(--fs-space-5);stroke-linecap:round}
.td-schematic .td-road-major{fill:none;stroke:var(--sv-road-diagram);stroke-width:calc(var(--fs-space-5) + var(--fs-space-2));stroke-linecap:round}
.td-schematic .td-road-line{fill:none;stroke:var(--sv-bone);stroke-width:var(--fs-map-stroke-fine);stroke-dasharray:var(--fs-map-sparse-dash);opacity:var(--fs-map-sparse-opacity)}
.td-schematic .td-water{fill:none;stroke:var(--sv-clear);stroke-width:var(--fs-space-4);stroke-linecap:round}
.td-schematic .td-building{fill:var(--sv-map-ink-2);stroke:var(--sv-divider);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-home{fill:var(--sv-bone);stroke:var(--sv-bg);stroke-width:var(--fs-map-stroke-strong)}
.td-schematic .td-door{fill:var(--sv-bone);stroke:var(--sv-bg);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-land{fill:var(--sv-clear);stroke:var(--sv-clear);opacity:var(--fs-map-gap-opacity)}
.td-schematic .td-bright{fill:var(--sv-deep-indigo);stroke:var(--sv-clear);stroke-width:var(--fs-map-stroke-mid)}
.td-schematic .td-sector{fill:var(--sv-map-ink-2);stroke:var(--sv-divider);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-halo{fill:none;stroke:var(--sv-bone);stroke-width:var(--fs-map-stroke-fine)}
.td-schematic .td-guide{fill:none;stroke:var(--sv-compass);stroke-width:var(--fs-map-stroke-fine);stroke-dasharray:var(--fs-map-frontier-dash)}
.td-schematic .td-axis{fill:none;stroke:var(--sv-compass);stroke-width:var(--fs-map-stroke-mid)}
.td-schematic .td-route{fill:none;stroke:var(--sv-clear);stroke-width:var(--fs-map-stroke-mid);stroke-linecap:round}
.td-schematic .td-watch{fill:var(--sv-watch);stroke:var(--sv-watch)}
.td-schematic .td-clear{fill:var(--sv-clear);stroke:var(--sv-clear)}
.td-schematic .td-label{fill:var(--sv-bone);font:var(--fs-text-xs) var(--sv-font-mono);letter-spacing:var(--fs-space-1)}
.td-schematic .td-cn{fill:var(--sv-noted);font:var(--fs-text-xl) var(--sv-font-cjk-display)}
.td-schematic .td-sub{fill:var(--sv-compass);font:var(--fs-text-xs) var(--sv-font-body)}
.td-schematic .td-callout{fill:var(--sv-clear);font:var(--fs-text-2xs) var(--sv-font-mono);letter-spacing:var(--fs-space-1)}
.td-schematic .td-note{fill:var(--sv-compass);font:var(--fs-text-2xs) var(--sv-font-mono);letter-spacing:var(--fs-space-1)}
/* Back-to-reading breadcrumb (fix #4b): a calm mono link at the top of the case, shown
   only when the buyer arrived from a reading (?from=). */
.factor-back-reading{display:inline-block;margin:var(--fs-space-6) 0 calc(-1 * var(--fs-space-4));color:var(--sv-noted);font:var(--fs-text-xs) var(--sv-font-mono);letter-spacing:.06em;text-decoration:none}
.factor-back-reading:hover,.factor-back-reading:focus-visible{color:var(--sv-bone);text-decoration:underline}


/* .td-watch / .td-clear are the SEMANTIC colour classes and set both fill and stroke, so
   when they land on a stroke-only shape (a water bank, a guide, an axis) they used to
   re-fill it: the water-form banks rendered as solid red/teal domes that swallowed their
   own callouts. Restate fill:none for the stroke-only vocabulary — higher specificity,
   so the colour classes keep the stroke and lose the accidental fill. Text and the
   filled shapes (.td-building, .td-land, .td-sector, .td-door, .td-home) are untouched. */
.td-schematic .td-road.td-watch,.td-schematic .td-road.td-clear,
.td-schematic .td-road-major.td-watch,.td-schematic .td-road-major.td-clear,
.td-schematic .td-road-line.td-watch,.td-schematic .td-road-line.td-clear,
.td-schematic .td-water.td-watch,.td-schematic .td-water.td-clear,
.td-schematic .td-guide.td-watch,.td-schematic .td-guide.td-clear,
.td-schematic .td-axis.td-watch,.td-schematic .td-axis.td-clear,
.td-schematic .td-route.td-watch,.td-schematic .td-route.td-clear,
.td-schematic .td-ground.td-watch,.td-schematic .td-ground.td-clear,
.td-schematic .td-halo.td-watch,.td-schematic .td-halo.td-clear { fill:none; }


/* ── SECTION SPINE — site review 2026-07-29, C1 + C2 + C3 ────────────────────────
   C1: the six reference sections each carried a different offset (.ref-spatial 8% left,
   .ref-severity flipped AND 5% right, .ref-mitigation 16% left, .ref-compliant 12%
   right, .ref-field 5% left), so the case file zig-zagged down the page and stranded a
   half-empty column beside every heading. All five modifiers are dropped for ONE grid:
   a mono rail (section number + provenance stamp) and one strong content column.
   C2: ~7vw of flat dark between sections is cut to --sv-section-y, and each break gets a
   brass register tick over the rail instead of yet another bare hairline.
   C3: six equal prose walls got a reading order — the opening line of each section is
   set as its lead, and the cross-link to the mitigation register sits at the top of the
   file where a reader asking "so what do I do" will look. */
.factor-hero, .teaching-diagram, .threshold-note, .factor-mitigation-link,
.reference-body, .source-register, .factor-back-reading { width:min(100%, var(--sv-spine)); margin-inline:auto; }
.factor-hero { grid-template-columns:var(--sv-rail) minmax(0,1fr); gap:var(--sv-rail-gap); padding:clamp(var(--fs-space-8),8vw,6.5rem) 0 clamp(var(--fs-space-6),5vw,3.75rem); }
.factor-summary { max-width:var(--sv-measure); margin-top:var(--fs-space-5); }
.teaching-diagram { margin-bottom:var(--fs-space-6); }
.threshold-note { margin:0 auto var(--sv-section-y); padding:var(--fs-space-4) 0 var(--fs-space-4) var(--fs-space-5); }
.reference-body { padding-bottom:clamp(var(--fs-space-8),6vw,4.5rem); }

.ref-section, .ref-spatial, .ref-severity, .ref-mitigation, .ref-compliant, .ref-field, .source-register {
  position:relative; grid-template-columns:var(--sv-rail) minmax(0,1fr);
  column-gap:var(--sv-rail-gap); row-gap:0;
  margin-left:0; margin-right:0; padding:var(--sv-section-y) 0;
}
.ref-section::before, .source-register::before { content:""; position:absolute; left:0; top:-1px; width:var(--sv-rail); height:1px; background:var(--sv-divider); }
.ref-section-head, .ref-severity .ref-section-head { display:contents; }
.ref-index { grid-column:1; grid-row:1; align-self:start; margin:0; padding-top:.4rem; }
.ref-confidence { grid-column:1; grid-row:2; align-self:start; margin:0; padding-top:.15rem; }
.ref-section h2 { grid-column:2; grid-row:1; margin:0 0 var(--fs-space-5); font-size:clamp(var(--fs-text-2xl),2.5vw,2.5rem); }
.ref-section-copy, .ref-severity .ref-section-copy { grid-column:2; grid-row:2; justify-self:stretch; max-width:var(--sv-measure); }
.ref-section-copy > p:first-child { font-size:var(--fs-text-lg); line-height:1.55; color:var(--sv-bone); }
/* the source register carries the same rail; its head is a wrapper div, so it too folds
   into the section grid rather than inventing a third column system. */
.source-register > div:first-child { display:contents; }
.source-register > div:first-child h2 { grid-column:2; grid-row:1; margin:0 0 var(--fs-space-5); }
.source-register > div:last-child { grid-column:2; grid-row:2; max-width:var(--sv-measure); }

/* The 化解 cross-link (reading ⇄ factor ⇄ mitigation chain). Deliberately not a button:
   a bordered case-file cross-reference row, brass on the left edge like every other
   pointer on this surface. */
.factor-mitigation-link {
  display:flex; align-items:baseline; gap:var(--fs-space-3); flex-wrap:wrap;
  margin-bottom:var(--sv-section-y); padding:var(--fs-space-4) var(--fs-space-4) var(--fs-space-4) var(--fs-space-5);
  border-top:1px solid var(--sv-divider); border-bottom:1px solid var(--sv-line);
  border-left:2px solid var(--sv-noted);
  font:var(--fs-text-sm) var(--sv-font-mono); letter-spacing:.06em; color:var(--sv-bone);
  text-decoration:none;
}
.factor-mitigation-link b { font:400 var(--fs-text-lg) var(--sv-font-cjk-display); color:var(--sv-noted); letter-spacing:.08em; }
.factor-mitigation-link span { color:var(--sv-compass); }
.factor-mitigation-link:hover { border-left-color:var(--sv-clear); }
.factor-mitigation-link:hover span { color:var(--sv-bone); }
.factor-footer { width:min(100%, var(--sv-spine)); }
@media (max-width:699px) {
  .ref-section, .ref-spatial, .ref-severity, .ref-mitigation, .ref-compliant, .ref-field, .source-register { display:block; padding:clamp(var(--fs-space-6),9vw,3.5rem) 0; }
  .ref-section::before, .source-register::before { width:4rem; }
  .ref-section-head, .ref-severity .ref-section-head, .source-register > div:first-child { display:block; margin-bottom:var(--fs-space-4); }
  .factor-hero { display:block; }
  .threshold-note { width:100%; }
}
/* the source register is a sibling of .reference-body, not a child, so it needs the
   spine's own centring back after the shared section rule zeroes the inline margins. */
.source-register { margin-left:auto; margin-right:auto; }

/* ── 五行 MARK in the docket + kicker — the element, not just its English word.
   Site review D2 fixed the /factors/ register chips but the runtime factor page still
   printed "FACTOR REFERENCE · WOOD": the element went unnamed in Chinese, on /zh/ too.
   The mark now leads with the element's own character (木/火/土/金/水) and only that
   glyph carries the --sv-wx-* hue — the word beside it keeps the line's own colour, so
   a docket stays a docket. No frame here: these lines already sit in a ruled column and
   a second box would make them badges. (The chips on /factors/ keep the frame.) */
.wx-mark{white-space:nowrap}
.wx-mark .wx-glyph{margin-right:.15em;font-family:var(--sv-font-cjk-display);font-style:normal}
.wx-wood .wx-glyph{color:var(--sv-wx-wood)}
.wx-fire .wx-glyph{color:var(--sv-wx-fire)}
.wx-earth .wx-glyph{color:var(--sv-wx-earth)}
.wx-metal .wx-glyph{color:var(--sv-wx-metal)}
.wx-water .wx-glyph{color:var(--sv-wx-water)}
/* Facing/entrance have no 五行, so the mark reads 未定 / FORM and the glyph gets NO tint —
   stated here because the kicker's own colour is brass (--sv-noted) and inheriting it would
   look like a sixth element. Neutral compass ink, the same absence the chip shows. */
.wx-none .wx-glyph{color:var(--sv-compass)}