:root {
  --ink: #172338;
  --muted: #687487;
  --line: #dfe4eb;
  --paper: #f7f5f0;
  --card: #fffdfa;
  --navy: #13233a;
  --navy-soft: #1b304c;
  --accent: #e56f45;
  --accent-soft: #f6e0d6;
  --blue: #2d6cae;
  --shadow: 0 18px 50px rgba(24, 39, 64, .08);
  --radius: 18px;
}
* { 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", Georgia, serif; line-height: 1.75; }
body.dark { --ink:#e6edf6; --muted:#9aa9bc; --line:#314157; --paper:#101a2a; --card:#16243a; --navy:#e8eef7; --navy-soft:#cbd8e8; --accent:#ff916a; --accent-soft:#3b2d2a; --blue:#7bb2ec; --shadow:0 18px 50px rgba(0,0,0,.25); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.site-noise { position: fixed; inset: 0; opacity: .028; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); z-index: 5; }
.site-header { position: sticky; top: 0; z-index: 4; height: 76px; padding: 0 clamp(22px, 5vw, 78px); display:flex; align-items:center; justify-content:space-between; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.brand { display:flex; align-items:center; gap:11px; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#fff; background:var(--accent); font: 700 13px ui-sans-serif, system-ui; transform: rotate(-5deg); }
.brand b { display:block; font-size:17px; line-height:1.1; }.brand small { display:block; color:var(--muted); font: 11px ui-sans-serif, system-ui; margin-top:3px; letter-spacing:.12em; }
.main-nav { display:flex; gap:34px; margin-left:90px; font: 14px ui-sans-serif, system-ui; color:var(--muted); }.main-nav a:hover, .main-nav a.active { color:var(--ink); }
.header-actions { display:flex; align-items:center; gap:12px; }.icon-button { width:35px;height:35px;border:0;background:transparent;color:var(--ink);font-size:27px;cursor:pointer;line-height:1; }.theme-toggle { border:1px solid var(--line); background:var(--card); border-radius:99px; height:31px; padding:4px 7px; display:flex; align-items:center; gap:5px; color:var(--muted); cursor:pointer; }.theme-toggle i { display:block; width:18px;height:18px;background:var(--accent);border-radius:50%; }
.page-shell { max-width: 1240px; margin: 0 auto; padding: 70px clamp(22px, 5vw, 54px) 90px; min-height: calc(100vh - 150px); }
.hero { display:grid; grid-template-columns: 1.05fr .95fr; gap:70px; align-items:center; padding: 18px 0 82px; }.eyebrow { color:var(--accent); font: 700 12px ui-sans-serif, system-ui; text-transform:uppercase; letter-spacing:.18em; }.hero h1 { font-size: clamp(44px, 6.2vw, 79px); line-height:1.08; letter-spacing:-.06em; margin:18px 0 24px; max-width:650px; }.hero h1 em { color:var(--accent); font-style:normal; }.hero-lede { max-width:510px; color:var(--muted); font-size:17px; margin:0 0 32px; }.hero-meta { display:flex; gap:12px; align-items:center; color:var(--muted); font:13px ui-sans-serif, system-ui; }.avatar { width:33px;height:33px;border-radius:50%; display:grid;place-items:center;background:var(--navy);color:var(--paper);font-size:12px;font-weight:700; }.hero-art { min-height:350px; position:relative; }.orbital { position:absolute; inset:12% 8%; border:1px solid var(--line); border-radius:50%; transform:rotate(-17deg); }.orbital:before,.orbital:after { content:""; position:absolute; border:1px solid var(--line); border-radius:50%; inset:15% -9%; transform:rotate(58deg); }.orbital:after { inset:-5% 24%; transform:rotate(44deg); }.art-card { position:absolute; width:260px; padding:24px; border-radius:15px; background:var(--navy); color:#f6f2eb; box-shadow:var(--shadow); right:8%; top:15%; transform:rotate(7deg); }.art-card:after { content:""; display:block; width:75px; height:75px; border:1px solid rgba(255,255,255,.35); border-radius:50%; margin:24px 0 -6px auto; }.art-card b { font-size:21px; line-height:1.2; display:block; }.art-card span { font:12px ui-sans-serif,system-ui; opacity:.6; }.art-note { position:absolute; left:4%; bottom:10%; width:178px; padding:17px; background:var(--accent-soft); color:var(--accent); border-radius:13px; font:700 12px ui-sans-serif,system-ui; transform:rotate(-8deg); }.art-note strong { display:block; font-size:34px; line-height:1; margin-bottom:4px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:22px; margin-bottom:25px; }.section-heading h2 { font-size:22px; margin:0; letter-spacing:-.03em; }.section-heading a { color:var(--accent); font:13px ui-sans-serif,system-ui; }.content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:55px; }.featured-card { display:grid; grid-template-columns: 1.15fr .85fr; background:var(--navy); color:#f8f4ed; border-radius:var(--radius); overflow:hidden; min-height:300px; box-shadow:var(--shadow); }.featured-copy { padding:34px; display:flex; flex-direction:column; justify-content:space-between; }.featured-copy .eyebrow { color:#ffad8e; }.featured-copy h3 { font-size:31px; line-height:1.25; letter-spacing:-.045em; margin:15px 0 10px; }.featured-copy p { color:#b5c2d1; font-size:14px; }.featured-visual { position:relative; overflow:hidden; background:#1d3553; }.featured-visual svg { width:100%;height:100%; position:absolute; inset:0; }.read-link { color:#ffad8e; font:700 13px ui-sans-serif, system-ui; }.article-list { display:grid; gap:1px; margin-top:22px; }.article-row { display:grid; grid-template-columns: 106px 1fr 70px; gap:20px; align-items:center; padding:21px 0; border-bottom:1px solid var(--line); }.article-row time { color:var(--muted); font:12px ui-sans-serif,system-ui; }.article-row h3 { font-size:19px; margin:0 0 4px; letter-spacing:-.025em; }.article-row p { color:var(--muted); font-size:13px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.article-row .arrow { color:var(--accent); font:24px ui-sans-serif; text-align:right; }.sidebar { display:flex; flex-direction:column; gap:25px; }.side-card { background:var(--card); border:1px solid var(--line); border-radius:15px; padding:22px; }.side-card h3 { font-size:16px; margin:0 0 15px; }.side-card p { color:var(--muted); font-size:13px; margin:0; }.tag-list { display:flex; flex-wrap:wrap; gap:8px; }.tag { border:1px solid var(--line); border-radius:99px; padding:4px 10px; color:var(--muted); font:12px ui-sans-serif,system-ui; cursor:pointer; }.tag:hover { color:var(--accent); border-color:var(--accent); }.newsletter { background:var(--accent); color:#fff; border:0; }.newsletter p { color:#fff4ef; }.newsletter input { border:0; width:100%; margin-top:18px; padding:10px 12px; border-radius:8px; background:#fff1eb; color:#49322a; outline:0; }.newsletter button { width:100%; margin-top:8px; padding:9px; border:1px solid rgba(255,255,255,.55); background:transparent; color:white; border-radius:8px; cursor:pointer; }
.page-title { max-width:760px; margin-bottom:45px; }.page-title h1 { font-size:53px; line-height:1.12; letter-spacing:-.055em; margin:15px 0; }.page-title p { color:var(--muted); max-width:590px; }.archive-tools { display:flex; gap:10px; margin-bottom:30px; }.search-box { flex:1; position:relative; }.search-box input { width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink); outline:none; }.filter-button { border:1px solid var(--line); background:var(--card); padding:0 16px; border-radius:9px; color:var(--muted); cursor:pointer; }.article-detail { max-width:860px; margin:0 auto; }.article-header { text-align:center; margin-bottom:48px; }.article-header .tag { display:inline-block; color:var(--accent); border-color:var(--accent); cursor:default; }.article-header h1 { font-size:clamp(37px,5vw,64px); line-height:1.14; letter-spacing:-.06em; margin:20px 0; }.article-header p { max-width:650px; margin:0 auto; color:var(--muted); font-size:17px; }.article-info { margin-top:21px; color:var(--muted); font:12px ui-sans-serif,system-ui; }.prose { font-size:17px; }.prose > p:first-child { font-size:20px; color:var(--navy-soft); }.dark .prose > p:first-child { color:var(--navy-soft); }.prose h2 { font-size:30px; line-height:1.3; margin:50px 0 15px; letter-spacing:-.04em; }.prose h3 { font-size:21px; margin:30px 0 10px; }.prose p { margin:0 0 20px; }.prose ul { padding-left:24px; }.prose li { margin:7px 0; }.prose blockquote { margin:30px 0; padding:18px 24px; border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--navy-soft); }.code { margin:25px 0; padding:20px; background:#111d2e; color:#d8e7f5; border-radius:11px; overflow:auto; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }.diagram { margin:30px 0 38px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:15px; }.diagram svg { display:block; width:100%; height:auto; }.caption { text-align:center; color:var(--muted); font:12px ui-sans-serif,system-ui; margin-top:8px; }.article-end { border-top:1px solid var(--line); margin-top:55px; padding-top:25px; display:flex; justify-content:space-between; color:var(--muted); font:13px ui-sans-serif,system-ui; }.about-card { max-width:860px; display:grid; grid-template-columns:170px 1fr; gap:45px; align-items:start; }.profile-seal { width:150px;height:150px;border-radius:50%; display:grid;place-items:center; background:var(--navy);color:var(--paper); font-size:32px; letter-spacing:-.12em; }.about-card h2 { font-size:36px; line-height:1.2; margin:0 0 16px; }.about-card p { color:var(--muted); }.now-list { margin-top:34px; padding-top:23px; border-top:1px solid var(--line); display:grid; gap:13px; }.now-list div { display:flex; gap:22px; font:13px ui-sans-serif,system-ui; }.now-list span { color:var(--accent); width:75px; }.site-footer { border-top:1px solid var(--line); padding:34px clamp(22px, 5vw, 78px); }.footer-inner { max-width:1240px; margin:auto; display:flex; align-items:end; gap:40px; }.footer-inner b { font-size:15px; }.footer-inner p { margin:4px 0 0; color:var(--muted); font:12px ui-sans-serif,system-ui; }.footer-links { display:flex; gap:18px; margin-left:auto; color:var(--muted); font:12px ui-sans-serif,system-ui; }.footer-links a:hover { color:var(--accent); }.footer-year { color:var(--muted); font:12px ui-sans-serif,system-ui; }.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%, 15px); opacity:0; pointer-events:none; transition:.25s; background:var(--navy); color:var(--paper); padding:10px 18px; border-radius:99px; font:13px ui-sans-serif,system-ui; z-index:9; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 840px) { .site-header {height:64px}.main-nav{margin-left:0;gap:14px}.main-nav a:nth-child(3){display:none}.hero{grid-template-columns:1fr;gap:10px;padding-bottom:50px}.hero-art{min-height:250px}.content-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.featured-card{grid-template-columns:1fr}.featured-visual{min-height:180px}.about-card{grid-template-columns:1fr}.profile-seal{width:100px;height:100px;font-size:23px}.footer-inner{align-items:start;flex-wrap:wrap}.footer-links{margin-left:0}.footer-year{margin-left:auto} }
@media (max-width: 540px) { .page-shell{padding-top:40px}.brand small{display:none}.main-nav{font-size:12px}.hero h1{font-size:46px}.hero-lede{font-size:15px}.sidebar{display:flex}.article-row{grid-template-columns:1fr 40px;gap:9px}.article-row time{grid-column:1 / -1}.article-row p{white-space:normal}.article-row .arrow{grid-row:1 / span 2;grid-column:2}.page-title h1{font-size:42px}.archive-tools{flex-direction:column}.filter-button{height:42px}.prose{font-size:16px}.prose h2{font-size:26px}.footer-year{width:100%;margin:0} }