:root{
  --ink:#141821; --ink-2:#4a5262; --paper:#faf8f3; --card:#ffffff;
  --rule:#ded7c9; --rule-2:#eae4d8; --accent:#0083ef; --deep:#4c2f92;
  --flag:#a8450b; --ok:#1d6b4a;
  --r1:2px; --r2:4px;
  --shell:1220px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Space Grotesk","Public Sans",system-ui,sans-serif;
  font-weight:700; line-height:1.16; letter-spacing:-.012em; margin:0 0 .5em}
h1{font-size:clamp(32px,4.1vw,50px)}
h2{font-size:clamp(25px,2.5vw,33px)}
h3{font-size:clamp(19px,1.5vw,21px); letter-spacing:-.006em}
p{margin:0 0 1.05em}
a{color:var(--accent)}
a:hover{color:var(--deep)}
img{max-width:100%; display:block}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:3px solid var(--deep); outline-offset:2px}

.frame{max-width:var(--shell); margin:0 auto; padding:0 28px}
.skipto{position:absolute; left:-9999px; display:inline-flex; align-items:center;
  min-height:44px; min-width:150px; padding:0 14px}
.skipto:focus{position:static; background:#fff; color:var(--ink)}

/* ---- masthead -------------------------------------------------------- */
.topbar{background:#fff; border-bottom:1px solid var(--rule)}
.topbar .frame{display:flex; align-items:center; gap:26px; min-height:74px}
.brandmark{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px;
  min-height:44px; text-decoration:none; color:var(--ink)}
.brandmark img{width:116px; height:auto}
.brandmark span{font-family:"Space Grotesk",sans-serif; font-size:15px; font-weight:700;
  letter-spacing:.005em; white-space:nowrap}
.navset{display:flex; flex-wrap:nowrap; gap:3px; align-items:center}
.navset a{display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  justify-content:center; padding:0 11px;
  font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  border-radius:var(--r1)}
.navset a:hover{background:#eef5fd; color:var(--deep)}
.navset a[aria-current=page]{color:var(--ink); box-shadow:inset 0 -3px 0 var(--accent)}

/* ---- hero ------------------------------------------------------------ */
.hero{background:linear-gradient(180deg,#fff 0%,#fff 62%,#fcfbf7 100%);
  padding:54px 0 34px}
.jumpbar{background:#fcfbf7; border-bottom:1px solid var(--rule)}
.hero .frame{max-width:var(--shell)}
.eyebrow{font-family:"DM Mono",ui-monospace,monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--deep); margin:0 0 14px}
.hero h1{max-width:19ch}
.leadline{font-size:19.5px; line-height:1.56; color:var(--ink-2); max-width:62ch; margin:0 0 28px}
.lookup{display:flex; gap:0; max-width:760px; border:2px solid var(--ink);
  border-radius:var(--r2); background:#fff; overflow:hidden}
.lookup-field{flex:1 1 auto; min-width:0; border:0; padding:17px 18px; font:inherit;
  font-size:17px; background:transparent; color:var(--ink)}
.lookup-field::placeholder{color:#8b93a2}
.lookup-go{flex:0 0 auto; border:0; background:var(--ink); color:#fff; font:inherit;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:16px;
  padding:0 26px; cursor:pointer; min-height:54px}
.lookup-go:hover{background:var(--deep)}
.lookup-why{font-size:14.5px; color:var(--ink-2); margin:11px 0 0; max-width:62ch}
.jumpstrip{display:flex; flex-wrap:wrap; gap:0 22px; align-items:center;
  border-top:1px solid var(--rule-2); padding:9px 0 11px}
.jumpstrip span{font-family:"DM Mono",monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#8b93a2}
.jumpstrip a{font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.jumpstrip a:hover{color:var(--deep); text-decoration:underline}

/* ---- category wall --------------------------------------------------- */
.tilewall{padding:46px 0 10px; background:var(--paper)}
.wallhead{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; margin-bottom:22px}
.wallhead h2{margin:0}
.wallhead p{margin:0; color:var(--ink-2); font-size:15.5px; max-width:56ch}
.tilegrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0;
  padding:0; list-style:none}
.tile{background:var(--card); border:1px solid var(--rule); border-radius:var(--r2);
  overflow:hidden}
.tile a{display:block; text-decoration:none; color:inherit}
.tile a:hover{background:#f4f8fe}
.tile-shot{aspect-ratio:1/1; overflow:hidden; background:#f1efe9}
.tile-shot img{width:100%; height:100%; object-fit:cover}
.tile-say{padding:11px 13px 13px}
.tile-name{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:15.5px;
  display:block; margin-bottom:3px}
.tile-dest{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#79828f}
.walltail{margin:20px 0 0; font-size:15px; color:var(--ink-2)}

/* ---- sections -------------------------------------------------------- */
main{display:block}
.slab{padding:52px 0; border-top:1px solid var(--rule-2)}
.slab:first-of-type{border-top:0}
.slab.tint{background:#fff}
.slab-head{max-width:70ch; margin:0 0 26px}
.slab-head p{color:var(--ink-2); margin-bottom:0}
.minor{font-size:14.5px; color:var(--ink-2)}
/* a link that is the whole paragraph is a control, not prose: give it a target */
p > a:only-child{display:inline-flex; align-items:center; min-height:44px;
  min-width:44px}

/* ---- the stub: this build's signature construct ---------------------- */
.stubrow{display:grid; grid-template-columns:168px minmax(0,1fr); gap:0;
  border:1px solid var(--rule); border-radius:var(--r2); background:var(--card);
  margin:0 0 20px; overflow:hidden}
.stub{background:#f5f2ea; border-right:1px solid var(--rule); padding:18px 16px;
  display:flex; flex-direction:column; gap:6px}
.stub-id{font-family:"DM Mono",monospace; font-size:19px; font-weight:500; color:var(--deep)}
.stub-path{font-size:12.5px; line-height:1.4; color:var(--ink-2)}
.stub-date{font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; color:#8b93a2;
  margin-top:auto}
.stub-body{padding:18px 22px 6px}
.verbatim{font-family:"Space Grotesk",sans-serif; font-size:18.5px; line-height:1.48;
  border-left:3px solid var(--accent); padding-left:16px; margin:0 0 14px; color:var(--ink)}
.readout{margin:0 0 14px}
.readout:last-child{margin-bottom:14px}

/* ---- figures --------------------------------------------------------- */
.plate{margin:0; border:1px solid var(--rule); border-radius:var(--r2); background:var(--card);
  display:flex; flex-direction:column; overflow:hidden}
.plate-mount{flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  padding:10px; background:#f7f5ef; min-height:0}
.plate-mount img{width:auto; max-width:100%; height:auto; border:1px solid var(--rule-2);
  background:#fff}
.plate-note{flex:0 0 auto; padding:12px 16px 14px; font-size:13.5px; line-height:1.5;
  color:var(--ink-2); border-top:1px solid var(--rule-2)}
.band{margin:0 0 26px}
.band .plate-mount{padding:18px}
.pairbox{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px;
  align-items:stretch; margin:0 0 30px}
.pairbox>.plate{height:100%}
.pairbox-say{display:flex; flex-direction:column; justify-content:flex-start}
.pairbox-say h3{margin-top:0}
.pairbox-say>:last-child{margin-bottom:0}
.pairbox.flip>.plate{order:2}
.pairbox.flip>.pairbox-say{order:1}
.bandpair{margin:0 0 30px}
.bandsay{columns:2; column-gap:46px; margin-top:4px}
.bandsay h3{column-span:all; margin-top:0}
.bandsay p:last-child{margin-bottom:0}
@media (max-width:860px){.bandsay{columns:1}}

/* ---- tables ---------------------------------------------------------- */
.scrollable{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px}
.scrollable .ledger{margin-bottom:0}
.ledger{width:100%; min-width:430px; border-collapse:collapse; font-size:15.5px; margin:0 0 18px;
  background:var(--card); border:1px solid var(--rule)}
.ledger caption{text-align:left; font-size:14px; color:var(--ink-2); padding:0 0 9px}
.ledger th,.ledger td{padding:10px 13px; border-bottom:1px solid var(--rule-2);
  text-align:left; vertical-align:top}
.ledger thead th{font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; background:#f5f2ea; border-bottom:1px solid var(--rule)}
.ledger tbody tr:last-child td{border-bottom:0}
.ledger .num{font-family:"DM Mono",monospace; white-space:nowrap}

/* ---- lists ----------------------------------------------------------- */
.ruleset{margin:0 0 18px; padding:0; list-style:none; counter-reset:rl}
.ruleset li{position:relative; padding:0 0 12px 40px; counter-increment:rl}
.ruleset li::before{content:counter(rl); position:absolute; left:0; top:1px;
  font-family:"DM Mono",monospace; font-size:13px; color:#fff; background:var(--deep);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center;
  justify-content:center}
.plainset{margin:0 0 18px; padding-left:21px}
.plainset li{margin-bottom:8px}

/* ---- tool ------------------------------------------------------------ */
.checkpanel{border:2px solid var(--ink); border-radius:var(--r2); background:var(--card);
  overflow:hidden}
.checkpanel-top{background:var(--ink); color:#fff; padding:15px 22px;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:17px}
.checkpanel-pick{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  padding:22px; border-bottom:1px solid var(--rule)}
.checkpanel-pick label{display:block; font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:7px}
.checkpanel-pick select,.checkpanel-pick input{width:100%; min-height:48px; font:inherit;
  font-size:16px; padding:10px 12px; border:1px solid var(--rule); border-radius:var(--r1);
  background:#fff; color:var(--ink)}
.checkpanel-out{padding:22px}
.verdict{font-family:"Space Grotesk",sans-serif; font-size:20px; font-weight:700;
  line-height:1.3; margin:0 0 14px}
.verdict.hot{color:var(--flag)}
.verdict.cool{color:var(--ok)}
.checkpanel-out .ledger{margin-bottom:0}
.checkpanel-note{padding:0 22px 20px; font-size:13.5px; color:var(--ink-2)}

/* ---- odds and ends --------------------------------------------------- */
.gohint{border:1px solid var(--rule); border-left:4px solid var(--accent); background:var(--card);
  border-radius:var(--r2); padding:20px 24px; margin:0 0 26px}
.gohint h3{margin-bottom:.35em}
.gohint p:last-child{margin-bottom:0}
.gohint a{font-weight:600}
.tagline{font-family:"DM Mono",monospace; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--deep); margin:0 0 9px}
.qa{border-top:1px solid var(--rule-2); padding:19px 0}
.qa:last-of-type{border-bottom:1px solid var(--rule-2)}
.qa h3{margin-bottom:.4em}
.qa p:last-child{margin-bottom:0}
.notefeed{margin:0; padding:0; list-style:none}
.notefeed li{display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px;
  border-top:1px solid var(--rule-2); padding:14px 0}
.notefeed li:last-child{border-bottom:1px solid var(--rule-2)}
.notefeed time{font-family:"DM Mono",monospace; font-size:13.5px; color:var(--deep)}
.crumbs{font-size:13.5px; color:var(--ink-2); padding:16px 0 0}
.crumbs a{color:var(--ink-2); display:inline-flex; align-items:center;
  min-height:44px; min-width:44px}
.pagelinks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0;
  padding:0; list-style:none}
.pagelinks li{border:1px solid var(--rule); border-radius:var(--r2); background:var(--card)}
.pagelinks a{display:block; padding:16px 18px; text-decoration:none; color:inherit;
  min-height:44px}
.pagelinks a:hover{background:#f4f8fe}
.pagelinks b{display:block; font-family:"Space Grotesk",sans-serif; font-size:16.5px;
  margin-bottom:3px}
.pagelinks span{font-size:14px; color:var(--ink-2)}

/* ---- footer ---------------------------------------------------------- */
.footset{background:#fff; border-top:1px solid var(--rule); margin-top:56px; padding:40px 0 48px}
.footgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px}
.footgrid h4{font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
.footgrid ul{margin:0; padding:0; list-style:none}
.footgrid li{margin-bottom:4px}
.footgrid a{font-size:15px; text-decoration:none; color:var(--ink-2);
  display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.footgrid a:hover{color:var(--deep); text-decoration:underline}
.footnote{border-top:1px solid var(--rule-2); margin-top:30px; padding-top:20px;
  font-size:13.5px; color:var(--ink-2); max-width:84ch}

@media (max-width:1080px){
  .navset{flex-wrap:wrap}
  .tilegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pairbox{gap:30px}
}
@media (max-width:860px){
  body{font-size:16.5px}
  .topbar .frame{flex-wrap:wrap; padding-top:12px; padding-bottom:12px; min-height:0}
  .brandmark{flex:0 0 auto}
  .navset{width:100%; order:3}
  .pairbox{grid-template-columns:minmax(0,1fr); gap:22px}
  .pairbox.flip>.plate{order:0}
  .pairbox.flip>.pairbox-say{order:0}
  .pairbox>.plate{height:auto}
  .stubrow{grid-template-columns:minmax(0,1fr)}
  .stub{border-right:0; border-bottom:1px solid var(--rule); flex-direction:row;
    align-items:baseline; gap:12px; flex-wrap:wrap}
  .stub-date{margin-top:0}
  .checkpanel-pick{grid-template-columns:minmax(0,1fr)}
  .footgrid{grid-template-columns:minmax(0,1fr)}
  .pagelinks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lookup{flex-direction:column; border-radius:var(--r2)}
  .lookup-go{width:100%}
  .notefeed li{grid-template-columns:minmax(0,1fr); gap:3px}
}
/* 375 首屏必须看得见搜索框（用户 2026-09-21 原话：搜索框要优先展示）。
   实测 375x812：导航在 .navset{flex-wrap:wrap} 下折成三行占 138px，
   把表单推到 top=757 / bottom=876 —— 超出首屏 64px，只露 55px。
   硬门 1 判的是 DOM 顺序与相对位置，判不到首屏位置，所以 frontstage 是 0 ERROR。
   解法：窄屏让导航单行横向滚动（每项仍是 44px 触点，不破硬门 60），
   并收一档标题与 lede 的行距。滚动容器是 nav 自身，document 不会横向溢出。 */
@media (max-width:420px){
  .navset{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px}
  .navset::-webkit-scrollbar{display:none}
  .navset a{flex:0 0 auto}
  .topbar .frame{padding-top:8px; padding-bottom:8px}
  .lede{line-height:1.5}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.core-reading{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.core-reading h2{font-size:1.5rem}#operator h2:not(:first-child){margin-top:2rem}#next .pagelinks span{font-size:.92rem}@media(max-width:700px){.core-reading{grid-template-columns:1fr;gap:1rem}.navset{scrollbar-width:thin}.navset::-webkit-scrollbar{display:block;height:4px}.navset::-webkit-scrollbar-thumb{background:#8ba4ba}}

@media(max-width:420px){.brandmark{max-width:100%;min-width:0;flex:0 1 auto}.brandmark span{min-width:0;white-space:normal;overflow-wrap:break-word}.navset{min-width:0;max-width:100%}}
