:root { --ink:#17212b; --muted:#65717e; --line:#dce3e8; --paper:#fcfcfb; --soft:#f0f5f6; --blue:#2c6673; --blue-dark:#174853; --accent:#e8b75a; --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif; font-size:17px; line-height:1.8; }
a { color:inherit; text-decoration-color:rgba(44,102,115,.45); text-underline-offset:3px; }
a:hover { color:var(--blue); }
.skip-link { position:absolute; left:-999px; top:0; padding:.45rem .8rem; background:var(--ink); color:white; z-index:10; }
.skip-link:focus { left:1rem; top:1rem; }
.site-header { border-bottom:1px solid var(--line); background:rgba(252,252,251,.94); }
.header-inner { width:min(var(--max),calc(100% - 2.5rem)); margin:auto; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; gap:.65rem; align-items:center; font-family:Arial,sans-serif; font-size:1.08rem; font-weight:800; text-decoration:none; letter-spacing:.02em; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-family:Georgia,serif; font-style:italic; font-size:1.12rem; }
nav { display:flex; gap:1.4rem; font-family:Arial,sans-serif; font-size:.92rem; }
nav a { text-decoration:none; color:var(--muted); }
main { width:min(var(--max),calc(100% - 2.5rem)); margin:auto; }
.hero { min-height:390px; display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:3rem; align-items:center; padding:5rem 0 4rem; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 .65rem; color:var(--blue); font-family:Arial,sans-serif; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { color:#152b36; line-height:1.35; letter-spacing:.01em; }
h1 { max-width:760px; margin:0; font-size:clamp(2.15rem,5vw,4.5rem); font-weight:700; }
.hero h1 + p { max-width:660px; margin:1.3rem 0 0; color:var(--muted); font-size:1.1rem; }
.hero-note { position:relative; overflow:hidden; align-self:end; padding:1.7rem; color:#e6f1f3; background:var(--blue-dark); border-radius:4px; font-family:Arial,sans-serif; }
.hero-note::after { content:""; position:absolute; width:170px; height:170px; right:-75px; top:-80px; border:1px solid rgba(255,255,255,.24); border-radius:50%; box-shadow:0 0 0 25px rgba(255,255,255,.05),0 0 0 50px rgba(255,255,255,.04); }
.hero-note span { display:block; position:relative; z-index:1; font-size:3.3rem; font-weight:800; line-height:1; color:var(--accent); }
.hero-note p { position:relative; z-index:1; margin:.65rem 0 .1rem; font-weight:700; }
.hero-note small { position:relative; z-index:1; color:#b8d0d5; }
.post-list { padding:5.2rem 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.2rem; }
.section-heading h2 { margin:0; font-size:2rem; }
.section-heading > p { max-width:270px; margin:0; color:var(--muted); font-size:.92rem; text-align:right; }
.post-card { display:grid; grid-template-columns:200px minmax(0,1fr) 130px; gap:1.4rem; align-items:center; padding:1.8rem 0; border-top:1px solid var(--line); }
.post-card:last-child { border-bottom:1px solid var(--line); }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; color:var(--muted); font-family:Arial,sans-serif; font-size:.78rem; }
.post-card h2 { margin:.2rem 0 .4rem; font-size:1.36rem; }
.post-card h2 a { text-decoration:none; }
.post-card p { grid-column:2; margin:0; color:var(--muted); font-size:.94rem; }
.tag { border:1px solid #cad8db; border-radius:999px; padding:.08rem .5rem; color:var(--blue); font-size:.7rem; white-space:nowrap; }
.read-link { grid-column:3; grid-row:1 / span 2; justify-self:end; color:var(--blue); font-family:Arial,sans-serif; font-size:.84rem; font-weight:700; text-decoration:none; }
.read-link span { font-size:1.1rem; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2.4rem max(1.25rem,calc((100% - var(--max))/2)); border-top:1px solid var(--line); color:var(--muted); font-family:Arial,sans-serif; font-size:.83rem; }
.site-footer strong { color:var(--ink); }.site-footer p { margin:.1rem 0 0; }.site-footer a { color:var(--blue); }
.article-layout { width:min(var(--max),calc(100% - 2.5rem)); display:grid; grid-template-columns:minmax(0,760px) 210px; justify-content:space-between; gap:4rem; padding:3.6rem 0 5.8rem; }
.breadcrumbs { margin:0 0 2.4rem; color:var(--muted); font-family:Arial,sans-serif; font-size:.78rem; }.breadcrumbs span { margin:0 .55rem; color:#a3aeb6; }
.article-header { padding-bottom:2.5rem; border-bottom:1px solid var(--line); }.article-header h1 { margin:.8rem 0 1rem; font-size:clamp(2rem,4.1vw,3.5rem); }.lead { margin:0; color:var(--muted); font-size:1.16rem; line-height:1.85; }
.article-body { padding-top:2.4rem; }.article-body h2 { margin:3rem 0 1rem; font-size:1.65rem; }.article-body h3 { margin:2rem 0 .7rem; font-size:1.22rem; }.article-body p { margin:0 0 1.22rem; }.article-body ul,.article-body ol { margin:.4rem 0 1.4rem; padding-left:1.45rem; }.article-body li { margin:.45rem 0; }.article-body code { padding:.1rem .35rem; border-radius:3px; background:#edf2f2; color:var(--blue-dark); font-family:ui-monospace,SFMono-Regular,monospace; font-size:.88em; }.note { margin:1.7rem 0; padding:1.1rem 1.25rem; border-left:3px solid var(--accent); background:#fff9ec; color:#5b4b2c; }.article-end { margin-top:3.3rem; padding:1rem 1.2rem; border:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.toc { position:sticky; top:1.5rem; align-self:start; margin-top:6.9rem; padding-left:1.25rem; border-left:1px solid var(--line); font-family:Arial,sans-serif; font-size:.8rem; line-height:1.55; }.toc p { margin:0 0 .7rem; color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.1em; }.toc ol { margin:0; padding-left:1rem; }.toc li { margin:.5rem 0; }.toc a { color:var(--muted); text-decoration:none; }.toc .toc-level-3 { margin-left:.45rem; font-size:.92em; }
.community-note { margin-top:1.4rem; padding:1.15rem 1.25rem; border:1px solid #c8dadd; border-radius:3px; background:#f1f7f7; color:#31515a; }.community-note strong { color:var(--blue-dark); font-family:Arial,sans-serif; font-size:.88rem; }.community-note p { margin:.4rem 0; }.community-note a { color:var(--blue-dark); font-weight:700; }.community-note small { color:#667c82; font-size:.78rem; }.related { margin-top:4.5rem; padding-top:2.2rem; border-top:1px solid var(--line); }.related h2 { margin:.1rem 0 1.1rem; font-size:1.6rem; }.related-grid { display:grid; gap:0 1.2rem; }.related .post-card { grid-template-columns:170px minmax(0,1fr) 110px; }.page { max-width:760px; padding:5rem 0 6rem; }.page h1 { font-size:clamp(2.2rem,4.6vw,3.8rem); }.page h2 { margin-top:3rem; }.page .lead { margin-top:1.3rem; }.page li { margin:.55rem 0; }.button { display:inline-block; margin-top:1.5rem; padding:.7rem 1rem; background:var(--blue); color:white; font-family:Arial,sans-serif; font-size:.88rem; font-weight:700; text-decoration:none; }.not-found { min-height:55vh; }
@media (max-width:760px) { body { font-size:16px; }.header-inner,main,.article-layout { width:min(100% - 2rem, var(--max)); }.header-inner { min-height:68px; }.hero { grid-template-columns:1fr; gap:2rem; min-height:0; padding:3.5rem 0; }.hero-note { max-width:320px; align-self:auto; }.section-heading { display:block; }.section-heading > p { max-width:none; margin-top:.8rem; text-align:left; }.post-card,.related .post-card { display:block; padding:1.45rem 0; }.post-card h2 { margin:.65rem 0 .4rem; }.post-card p { margin:0 0 .8rem; }.read-link { display:inline-block; }.article-layout { display:block; padding:2.4rem 0 4rem; }.toc { position:static; margin:2.3rem 0; padding:1rem 1.1rem; border-left:3px solid var(--blue); background:var(--soft); }.site-footer { padding:2rem 1rem; }.article-body h2 { margin-top:2.5rem; }.site-footer { align-items:flex-start; }.site-footer a { padding-top:.2rem; } }