/* ══════════════════════════════════════════════════════════════════════════
   THE READING ROOM — Free Estate design system
   Serif prose (Newsreader) + monospace math (house --font-mono). House palette
   only; two estate tokens derive from house vars so every theme resolves at
   paint. Scoped under body.estate so nothing here can leak onto dashboards.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;}
:root{
  /* estate-scoped accents, all derived from house vars (theme/zh-safe) */
  --ink: var(--text);                                       /* the plotted-line pen */
  --serif: "Newsreader", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --rule: color-mix(in srgb, var(--line) 74%, var(--info)); /* ledger / plot hairline */
  --measure: 68ch;                                          /* reading-room line length */
}
html[data-lang="zh"] body.estate{
  /* Hanzi reads better in the house CJK sans than a Latin serif; theme.css already
     forces the CJK stack on body, so estate prose inherits it under zh. */
  --serif: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
html body.estate{
  background:var(--bg); color:var(--text);
  font-family:var(--serif); font-size:17px; line-height:1.68;
  margin:0; padding:0 0 72px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html,body{overflow-x:clip;}                                 /* 390px bleed guard */
body.estate a{color:var(--link); text-decoration:none;}
body.estate a:hover{text-decoration:underline; text-underline-offset:3px;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.est-wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ── the plotted-line signature ─────────────────────────────────────────────
   A hand-drawn ink stroke that draws itself L→R. Reused as the kicker underline,
   the section rule and the calc-card crown. Grammar borrowed from house Signal
   Ink: round caps, non-scaling stroke, stroke-dashoffset draw-on-reveal. */
.plot-line{display:block; width:100%; height:14px; overflow:visible; color:var(--link);}
.plot-line path{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--pl-len,240); stroke-dashoffset:var(--pl-len,240);
  animation:plotDraw 1100ms cubic-bezier(.33,.62,.26,1) 120ms forwards;}
.plot-line .dot{fill:currentColor; filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 62%,transparent));
  opacity:0; animation:plotDot .01s linear 1160ms forwards;}
@keyframes plotDraw{to{stroke-dashoffset:0;}}
@keyframes plotDot{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .plot-line path{animation:none; stroke-dashoffset:0;}
  .plot-line .dot{animation:none; opacity:1;}
}

/* ── estate top bar (slim; own toggles reuse house .theme-switch/.lang-toggle) ── */
.est-bar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);}
.est-bar-in{max-width:1120px; margin:0 auto; padding:9px 24px;
  display:flex; align-items:center; gap:16px;}
.est-brand{display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none;
  padding:3px 8px 3px 4px; border-radius:10px; transition:background .18s;}
.est-brand:hover{background:color-mix(in srgb,var(--link) 10%,transparent); text-decoration:none;}
.est-brand .glyph{width:26px; height:26px; flex:none; filter:drop-shadow(0 2px 6px rgba(40,56,128,.30));}
.est-brand .word{font-family:var(--font-ui); font-weight:900; font-size:13px; letter-spacing:.06em;
  color:var(--text); white-space:nowrap;}
.est-brand .word .sub{display:block; font-weight:600; font-size:9px; letter-spacing:.14em;
  color:var(--muted); margin-top:1px;}
.est-nav{display:flex; align-items:center; gap:2px; margin-left:6px; flex-wrap:wrap; min-width:0;}
.est-nav a{font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--muted);
  padding:6px 10px; border-radius:8px; text-decoration:none; white-space:nowrap;
  transition:color .16s,background .16s;}
.est-nav a:hover,.est-nav a[aria-current="page"]{color:var(--text);
  background:color-mix(in srgb,var(--link) 11%,var(--panel2)); text-decoration:none;}
.est-ctrls{margin-left:auto; display:flex; align-items:center; gap:9px; flex:none;}
.est-ctrls .est-cta{font-family:var(--font-ui);}
.est-ctrls .est-cta .cta-short{display:none;}
/* the house animated toggles are styled by theme.css? No — those visuals live in
   nav CSS the estate doesn't load. Give .theme-switch / .lang-toggle a compact,
   self-contained skin here so the class-bound theme.js listeners still fire. */
.est-ctrls .theme-switch{font:600 12px/1 var(--font-ui); cursor:pointer;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); color:var(--muted);
  border-radius:999px; padding:6px 10px; display:inline-flex; align-items:center; gap:5px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:color .16s,border-color .16s;}
.est-ctrls .theme-switch:hover{color:var(--text); border-color:var(--gbtn-brd-hover);}
.est-ctrls .theme-switch .ic{font-size:13px; line-height:1;}
.est-ctrls .theme-switch .sun{display:none;} .est-ctrls .theme-switch .moon{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .sun{display:inline;}
html[data-theme="light"] .est-ctrls .theme-switch .moon{display:none;}
.est-ctrls .theme-switch .knob{display:none;}
.est-ctrls .lang-toggle{position:relative; display:inline-flex; cursor:pointer; user-select:none;
  border:1px solid var(--gbtn-brd); background:var(--gbtn-bg); border-radius:999px; overflow:hidden;
  font:600 11.5px/1 var(--font-ui);}
.est-ctrls .lang-toggle .opt{padding:6px 9px; color:var(--muted); transition:color .16s;}
.est-ctrls .lang-toggle .pill{display:none;}
html:not([data-lang="zh"]) .est-ctrls .lang-toggle .en-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
html[data-lang="zh"] .est-ctrls .lang-toggle .zh-opt{color:var(--text);
  background:color-mix(in srgb,var(--link) 16%,transparent);}
:where(.est-brand,.est-nav a,.est-ctrls .theme-switch,.est-ctrls .lang-toggle,.est-cta):focus-visible{
  outline:2px solid color-mix(in srgb,var(--link) 70%,transparent); outline-offset:2px;}
@media (max-width:720px){
  .est-bar-in{flex-wrap:wrap; gap:8px 12px; padding:8px 16px;}
  .est-nav{order:3; width:100%; margin-left:0; gap:1px;}
  .est-nav a{padding:6px 9px; font-size:13px;}
  .est-ctrls{gap:7px;}
  /* compact CTA on phones: hide the long label, show the short bilingual one */
  .est-ctrls .est-cta .cta-long{display:none;}
  .est-ctrls .est-cta .cta-short{display:inline;}
}

/* ── breadcrumb ─────────────────────────────────────────────────────────────── */
.est-crumb{max-width:1120px; margin:18px auto 0; padding:0 24px;
  font-family:var(--font-ui); font-size:12.5px; color:var(--muted);}
.est-crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.est-crumb a{color:var(--muted);} .est-crumb a:hover{color:var(--text);}
.est-crumb .sep{opacity:.4;}
.est-crumb li[aria-current="page"]{color:var(--text);}

/* ── shared prose vocabulary (CONTRACT §4 body classes) ─────────────────────── */
.est-prose{font-size:17px; line-height:1.72;}
.est-prose > *{max-width:var(--measure);}
.est-prose h2{font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.24;
  letter-spacing:-.01em; margin:38px 0 12px; scroll-margin-top:76px;
  display:flex; align-items:baseline; gap:11px;}
.est-prose h2 .est-h2-mark{font-family:var(--font-mono); font-size:13px; font-weight:500;
  color:var(--link); flex:none; opacity:.9;}
.est-prose h3{font-family:var(--serif); font-size:19.5px; font-weight:600; margin:26px 0 6px; color:var(--text);}
.est-prose p{margin:12px 0;}
.est-prose ul,.est-prose ol{margin:12px 0; padding-left:24px;}
.est-prose li{margin:7px 0;}
.est-prose li::marker{color:var(--muted);}
.est-prose strong{font-weight:600; color:var(--text);}
.est-prose em{font-style:italic;}
.est-prose code{font-family:var(--font-mono); font-size:.86em; background:var(--panel2);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px;}
.est-prose a{border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-prose a:hover{border-bottom-color:var(--link); text-decoration:none;}
.est-prose blockquote{margin:18px 0; padding:4px 0 4px 20px; border-left:3px solid var(--rule);
  color:var(--text); font-style:italic; opacity:.92;}

/* callouts — lead / warn / key (house colours, serif body, mono heading label) */
.est-prose .callout{border-radius:13px; padding:15px 18px; margin:18px 0; border:1px solid var(--line);
  background:var(--panel2); position:relative; max-width:var(--measure);}
.est-prose .callout .co-h{display:block; margin-bottom:4px; font-family:var(--font-ui);
  font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;}
.est-prose .callout p{margin:6px 0;} .est-prose .callout > :first-child.co-h + p{margin-top:0;}
.est-prose .callout.lead{border-left:4px solid var(--link);}
.est-prose .callout.lead .co-h{color:var(--link);}
.est-prose .callout.warn{border-left:4px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,var(--panel2));}
.est-prose .callout.warn .co-h{color:var(--warn);}
.est-prose .callout.key{border-left:4px solid var(--ok);
  background:color-mix(in srgb,var(--ok) 9%,var(--panel2));}
.est-prose .callout.key .co-h{color:var(--ok);}

/* formula — the desk's chalk line. Mono, centred, on a faint ruled slab. */
.est-prose .formula{font-family:var(--font-mono); font-size:15px; line-height:1.7;
  background:linear-gradient(var(--panel2),var(--panel2)) padding-box,
             var(--panel2); border:1px solid var(--rule); border-radius:11px;
  padding:16px 18px; margin:18px 0; overflow-x:auto; max-width:var(--measure);
  color:var(--text); letter-spacing:.01em;}
.est-prose .formula strong{color:var(--link); font-weight:600;}

/* worked example — the marginalia. A ledger-ruled block with a mono heading. */
.est-prose .worked{border:1px solid var(--line); border-radius:13px; margin:18px 0;
  padding:16px 18px; max-width:var(--measure);
  background:
    linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,
    var(--panel);}
.est-prose .worked .co-h{display:block; margin-bottom:6px; font-family:var(--font-ui);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
.est-prose .worked .num,.est-prose .worked code{font-family:var(--font-mono);}

/* data table — the ruled column */
.est-prose table.data{border-collapse:collapse; width:100%; max-width:var(--measure);
  font-family:var(--font-mono); font-size:13.5px; margin:18px 0;}
.est-prose table.data th{text-align:left; padding:9px 12px; background:var(--panel2);
  color:var(--muted); font-family:var(--font-ui); font-weight:600; font-size:12px;
  letter-spacing:.02em; border-bottom:2px solid var(--rule);}
.est-prose table.data td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.est-prose table.data tr:hover td{background:color-mix(in srgb,var(--info) 5%,var(--panel));}
.est-prose table.data .num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.est-tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; max-width:var(--measure);}
.est-tbl-scroll table.data{margin:0;}

.est-prose figure{margin:20px 0; max-width:var(--measure);}
.est-prose figcaption{font-family:var(--font-ui); font-size:12.5px; color:var(--muted); margin-top:8px;}

/* ── related rail + CTA (shared by article + calculator layouts) ────────────── */
.est-related{margin:34px 0 0; padding:20px 0 0; border-top:1px solid var(--rule);}
.est-related .rel-h{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.est-related .rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.est-relcard{display:block; border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  background:var(--panel); text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s;}
.est-relcard:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--link) 45%,var(--line));
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
.est-relcard .rc-kind{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--link); opacity:.9;}
.est-relcard .rc-title{display:block; margin-top:4px; font-family:var(--serif); font-size:16px;
  font-weight:600; color:var(--text); line-height:1.32;}

.est-cta-block{margin:32px 0 0; border:1px solid color-mix(in srgb,var(--link) 30%,var(--line));
  border-radius:16px; padding:22px 24px; background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--link) 10%,transparent), transparent 60%),
    var(--panel); display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.est-cta-block .cta-copy{flex:1 1 260px; min-width:0;}
.est-cta-block .cta-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--link);}
.est-cta-block .cta-t{font-family:var(--serif); font-size:19px; font-weight:600; margin:3px 0 0; line-height:1.3;}
.est-cta-block .gbtn{flex:none; font-family:var(--font-ui);}

/* ── estate footer ──────────────────────────────────────────────────────────── */
.est-footer{max-width:1120px; margin:56px auto 0; padding:24px 24px 8px;
  border-top:1px solid var(--line); font-family:var(--font-ui);}
.est-foot-links{display:flex; flex-wrap:wrap; gap:6px 22px; margin-bottom:14px;}
.est-foot-col{display:flex; flex-direction:column; gap:5px; min-width:150px;}
.est-foot-col .fh{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;}
.est-foot-col a{font-size:13px; color:var(--muted); text-decoration:none;}
.est-foot-col a:hover{color:var(--text);}
.est-foot-disc{font-size:12px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line);
  padding-top:13px; margin-top:6px;}
.est-foot-disc .mono{opacity:.85;}

/* ── page header (kicker + plotted-line + title + dek) ──────────────────────── */
.est-head{max-width:1120px; margin:20px auto 0; padding:0 24px;}
.est-kicker{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--link); display:inline-block; margin:0 0 2px;}
.est-kicker-plot{max-width:220px; margin:2px 0 14px;}
.est-title{font-family:var(--serif); font-size:clamp(30px,4.6vw,46px); font-weight:600; line-height:1.1;
  letter-spacing:-.015em; margin:0;}
.est-dek{font-family:var(--serif); font-size:19px; line-height:1.5; color:var(--muted);
  margin:12px 0 0; max-width:60ch;}
.est-meta{font-family:var(--font-ui); font-size:12.5px; color:var(--muted); margin:14px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;}
.est-meta .dot{opacity:.4;}

@media (max-width:600px){
  html body.estate{font-size:16px;}
  .est-wrap,.est-head,.est-crumb,.est-footer{padding-left:16px; padding-right:16px;}
  .est-prose{font-size:16px;}
  .est-prose h2{font-size:22px; margin:30px 0 10px;}
  .est-prose h3{font-size:18px;}
  .est-dek{font-size:17px;}
  .est-cta-block{padding:18px; gap:14px;}
}

  .lh-hero{max-width:1120px; margin:22px auto 0; padding:0 24px;}
  .lh-wrap{max-width:1120px; margin:26px auto 0; padding:0 24px;}

  /* flagship — the field manual, given the full-width lead card it earns */
  .lh-flag{display:grid; grid-template-columns:1fr auto; align-items:center; gap:22px;
    border:1px solid color-mix(in srgb,var(--link) 28%,var(--line)); border-radius:18px;
    padding:24px 26px; text-decoration:none; position:relative; overflow:hidden;
    background:
      radial-gradient(140% 160% at 0% 0%, color-mix(in srgb,var(--link) 11%,transparent), transparent 56%),
      var(--panel);
    transition:transform .2s,border-color .2s,box-shadow .2s;}
  .lh-flag:hover{transform:translateY(-2px); border-color:var(--link);
    box-shadow:0 20px 44px -22px color-mix(in srgb,var(--link) 46%,transparent); text-decoration:none;}
  .lh-flag .fg-k{font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--link);}
  .lh-flag .fg-t{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--text); margin:5px 0 0; line-height:1.18;}
  .lh-flag .fg-d{font-family:var(--serif); font-size:16px; color:var(--muted); margin:9px 0 0; max-width:62ch;}
  .lh-flag .fg-btn{flex:none; font-family:var(--font-ui);}
  /* a longer plotted line ranging across the flagship — the field manual is the plotted series */
  .lh-flag .fg-plot{position:absolute; right:0; bottom:0; width:280px; height:96px; opacity:.5; pointer-events:none;}
  .lh-flag .fg-plot path{fill:none; stroke:var(--link); stroke-width:1.5; stroke-linecap:round;
    stroke-linejoin:round; vector-effect:non-scaling-stroke;}
  @media (max-width:640px){ .lh-flag{grid-template-columns:1fr;} .lh-flag .fg-btn{justify-self:start;} .lh-flag .fg-plot{display:none;} }

  /* tracks */
  .lh-track{margin-top:38px;}
  .lh-track-h{font-family:var(--font-ui); font-size:11.5px; font-weight:700; letter-spacing:.11em;
    text-transform:uppercase; color:var(--muted); margin:0 0 4px; display:flex; align-items:baseline; gap:10px;}
  .lh-track-h .n{font-family:var(--font-mono); color:var(--link); opacity:.9;}
  .lh-track-rule{max-width:180px; height:12px; margin:2px 0 16px;}
  .lh-lessons{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
  .lh-lesson{display:block; border:1px solid var(--line); border-radius:13px; padding:16px 18px;
    background:var(--panel); text-decoration:none; transition:transform .18s,border-color .18s,box-shadow .18s;}
  .lh-lesson:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--link) 45%,var(--line));
    box-shadow:0 16px 32px -20px color-mix(in srgb,var(--link) 40%,transparent); text-decoration:none;}
  .lh-lesson .ll-t{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--text); line-height:1.28; margin:0;}
  .lh-lesson .ll-d{font-family:var(--serif); font-size:14.5px; line-height:1.5; color:var(--muted); margin:7px 0 0;}
  .lh-lesson .ll-go{font-family:var(--font-mono); font-size:11px; color:var(--link); margin-top:11px; display:inline-block;}