@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#122035; --navy:#101b31; --night:#0c1528; --paper:#fbfaf7; --text:#435364; --teal:#09695b; --mint:#9cf0dc; --line:#dce5e3; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.55 'DM Sans',system-ui,sans-serif; }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3,.brand,.jump strong { font-family:Manrope,system-ui,sans-serif; }
a { color:inherit; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid #168d78; outline-offset:4px; }
[id] { scroll-margin-top:18px; }
.wrap { width:min(1040px,100% - clamp(32px,9vw,112px)); margin-inline:auto; }
.skip { position:absolute; top:8px; left:8px; z-index:3; padding:10px 14px; background:white; transform:translateY(-160%); }
.skip:focus { transform:none; }
.top { background:var(--night); color:#e9f0f9; border-bottom:1px solid #ffffff24; }
.mast { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:63px; }
.brand { font-size:28px; font-weight:800; letter-spacing:-.08em; text-decoration:none; white-space:nowrap; }
.mast nav { display:flex; gap:clamp(12px,2.7vw,30px); flex-wrap:wrap; }
.mast nav a { display:flex; align-items:center; min-height:44px; color:#dce6ef; font-size:14px; text-decoration:none; white-space:nowrap; }
.mast nav a:hover { text-decoration:underline; }
.hero { background:radial-gradient(ellipse at 88% 59%,#213d53,transparent 63%),var(--navy); color:#f4f8fd; padding-block:clamp(33px,5.6vw,67px); }
.topic { color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:10px 0 13px; font-size:clamp(42px,6.6vw,78px); line-height:1.02; letter-spacing:-.067em; font-weight:800; text-wrap:balance; }
.deck { max-width:59ch; color:#d3e1ec; font-size:clamp(16px,1.8vw,20px); }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.jump a { display:flex; align-items:center; gap:8px; min-height:44px; padding:7px 11px; background:#1b3248; color:#edf7fa; border:1px solid #ffffff29; border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; }
.jump a:hover { background:#24445a; }
.jump strong { color:var(--mint); font-size:18px; line-height:1; }
.section { padding-block:clamp(34px,5.2vw,60px); }
h2 { margin-top:5px; font-size:clamp(27px,4.3vw,44px); line-height:1.1; letter-spacing:-.052em; font-weight:800; }
.section-intro { margin-top:7px; color:var(--text); }
.examples { display:grid; gap:12px; margin-top:20px; }
.example { padding:clamp(13px,2vw,21px); background:white; border:1px solid var(--line); border-radius:9px; }
.example-head { display:flex; justify-content:space-between; align-items:start; gap:5px 12px; margin-bottom:11px; }
.example-head h3 { margin-top:2px; font-size:clamp(19px,2.35vw,26px); letter-spacing:-.038em; line-height:1.19; font-weight:800; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.panel { padding:9px 12px 10px; background:#f4f6f6; border-radius:5px; }
.panel h4 { margin-bottom:2px; font-size:13px; font-weight:800; color:var(--ink); }
.panel p { color:var(--text); font-size:14px; line-height:1.47; }
.panel.comment { background:#eaf5f1; border-left:3px solid #348475; }
.panel.comment h4 { color:#15594d; }
.citation { margin-top:9px; color:#4a5e6d; font-size:12px; }
.citation span { margin-inline:2px; }
.footer { background:#eef2f1; border-top:1px solid #dce5e3; padding-block:24px; }
.footer p { font-size:13px; color:var(--text); }
.footer a { font-size:13px; color:var(--teal); font-weight:700; }
@media(max-width:660px) {
  .pair { grid-template-columns:1fr; }
}
@media(max-width:420px) {
  .mast { align-items:center; min-height:59px; gap:8px; }
  .mast nav { gap:8px; }
  .mast nav a { font-size:12px; }
  .example-head { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.hero { color:var(--ink); background:#eef4f8; border-bottom:1px solid #d9e6ef; padding-block:clamp(28px,4.6vw,54px); }
.review-identity { display:flex; align-items:center; gap:12px; }
.review-identity img { background:#fff; border:1px solid #d6e1e8; border-radius:4px; padding:5px; width:82px; height:auto; }
.review-name { color:#123e66; font-weight:800; }
.review-date,.independent { font-size:13px; color:#4b6173; }
.hero h1 { font-size:clamp(36px,5.6vw,65px); margin-block:13px 8px; }
.hero .deck { color:#43586d; font-size:clamp(15px,1.65vw,18px); }
.independent { margin-top:4px; }
.jump { margin-top:13px; }
.jump a { background:#fff; border-color:#ccdee9; color:#173e61; }
.jump a:hover { background:#e6f0f8; }
.jump strong { color:#1b5683; }
.evidence { display:grid; grid-template-columns:132px minmax(0,1.75fr) minmax(0,1fr); align-items:start; gap:clamp(8px,1.6vw,16px); }
figure { margin:0; }
.cover { align-self:start; padding:7px 6px 5px; background:#f2f4f5; border-radius:5px; text-align:center; }
.cover img { display:block; width:100%; height:clamp(92px,12vw,125px); object-fit:contain; object-position:center; }
.cover figcaption { margin-top:4px; color:#4c5e6c; font-size:10px; }
.extract { min-width:0; }
.extract-title { color:#3c5265; font-size:12px; font-weight:800; margin-bottom:4px; }
.zoom { position:relative; display:block; width:100%; padding:5px; border:1px solid #d4dfe5; border-radius:5px; background:#fff; cursor:zoom-in; }
.zoom:hover { border-color:#356791; }
.zoom:focus-visible,.close-zoom:focus-visible { outline:3px solid #2377a6; outline-offset:3px; }
.zoom img { display:block; width:100%; max-height:204px; object-fit:contain; }
.zoom::after { content:"Enlarge ↗"; display:block; text-align:right; color:#174e77; padding:3px 2px 0; font:700 11px/1.3 'DM Sans',system-ui,sans-serif; }
.panel.comment { padding:9px 10px; background:#eaf2f8; border-left-color:#3773a3; }
.panel.comment img { display:block; margin-bottom:3px; background:#fff; border-radius:3px; padding:2px; }
.panel.comment h4 { color:#15456d; }
.extract-dialog { width:min(1030px,calc(100% - 30px)); max-height:calc(100dvh - 30px); padding:0; border:1px solid #bdcfdf; border-radius:9px; background:white; color:var(--ink); box-shadow:0 20px 70px #12203555; }
.extract-dialog::backdrop { background:#102439b8; }
.dialog-head { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 13px; background:#edf4f9; border-bottom:1px solid #d4e3ef; }
.dialog-head h2 { margin:0; font-size:clamp(15px,2.7vw,22px); }
.close-zoom { min-height:38px; border:1px solid #bacfde; border-radius:4px; background:#fff; color:#173e61; padding:4px 10px; font-weight:700; cursor:pointer; }
.dialog-image { padding:10px; }
.dialog-image img { display:block; width:100%; height:auto; }
@media(max-width:760px) {
  .evidence { grid-template-columns:97px minmax(0,1fr); }
  .evidence .comment { grid-column:1 / -1; }
}
@media(max-width:420px) {
  .evidence { grid-template-columns:75px minmax(0,1fr); }
  .cover img { height:78px; }
}

.mast nav a[aria-current="page"] { color:#fff; font-weight:700; }
.jump a[aria-current="page"] { background:#173e61; border-color:#173e61; color:#fff; }
.jump a[aria-current="page"] strong { color:#c2e6ff; }
.footer-layout { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:5px 14px; }