/* Johnew Zhang — site styles. House format shared with the Trident Macro Monitor and
   Johnew's Kitchen: dark band, underline tabs, ruled section heads, small-caps eyebrows. */

:root{
  color-scheme:light;
  --ground:#f5f5f1; --surface:#ffffff; --surface-2:#ecece6;
  --ink:#0f1a2b; --ink-2:#44505f; --muted:#5d6672; --rule:#d5d7d0;
  --band:#0b1f3a; --band-text:#f3f5f9; --accent:#1f4e8c;
  --investing:#1f4e8c; --academic:#6a3d8f; --culture:#1f6b52; --sports:#9a5b06;
  --academic-soft:#efe8f5; --investing-soft:#e3eaf4; --culture-soft:#e3efe9; --sports-soft:#f5ead7;
  --display:"DM Serif Display","Iowan Old Style",Georgia,serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",Arial,sans-serif;
  --ui:Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#0f1319; --surface:#161b23; --surface-2:#1e2530;
  --ink:#e3e8ef; --ink-2:#b4bdc9; --muted:#8f99a7; --rule:#2c3440;
  --band:#070d18; --band-text:#eef2f8; --accent:#6ea3e6;
  --investing:#6ea3e6; --academic:#b48ee0; --culture:#5dbb95; --sports:#e0a648;
  --academic-soft:#2a2136; --investing-soft:#17263b; --culture-soft:#183026; --sports-soft:#35290f;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0f1319; --surface:#161b23; --surface-2:#1e2530;
  --ink:#e3e8ef; --ink-2:#b4bdc9; --muted:#8f99a7; --rule:#2c3440;
  --band:#070d18; --band-text:#eef2f8; --accent:#6ea3e6;
  --investing:#6ea3e6; --academic:#b48ee0; --culture:#5dbb95; --sports:#e0a648;
  --academic-soft:#2a2136; --investing-soft:#17263b; --culture-soft:#183026; --sports-soft:#35290f;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.inner{max-width:1160px;margin:0 auto;padding-left:28px;padding-right:28px}
@media (max-width:700px){.inner{padding-left:16px;padding-right:16px}}
.serif{font-family:var(--display);font-weight:400}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pillar accent: set --pc on any container */
.p-investing{--pc:var(--investing);--pc-soft:var(--investing-soft)}
.p-academic{--pc:var(--academic);--pc-soft:var(--academic-soft)}
.p-culture{--pc:var(--culture);--pc-soft:var(--culture-soft)}
.p-sports{--pc:var(--sports);--pc-soft:var(--sports-soft)}

/* Band and tabs */
.band{background:var(--band);color:var(--band-text)}
.band .inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.mark{flex:none;width:32px;height:32px;border:1.5px solid var(--band-text);display:grid;place-items:center;font-family:var(--display);font-size:15px;line-height:1}
.brand-name{margin:0;font-family:var(--ui);font-size:14.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.brand-sub{font-family:var(--ui);font-size:11.5px;opacity:.78;margin-top:1px}
.band-btn{margin-left:auto;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--band-text);background:transparent;border:1px solid rgba(255,255,255,.55);padding:0 14px;min-height:36px;border-radius:2px;cursor:pointer;white-space:nowrap}
.band-btn:hover{background:rgba(255,255,255,.12)}
.tabs{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.tabs ul{list-style:none;margin:0 auto;padding:0 28px;display:flex;overflow-x:auto;scrollbar-width:none;max-width:1160px}
.tabs ul::-webkit-scrollbar{display:none}
.tabs a{display:block;padding:11px 12px 9px;font-family:var(--ui);font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--pc,var(--accent))}
@media (max-width:700px){.tabs ul{padding:0 8px}}

/* Type helpers */
.eyebrow{font-family:var(--ui);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--pc,var(--accent))}
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;border-bottom:2px solid var(--ink);padding-bottom:7px;margin-bottom:14px}
.shead h2{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1;margin:4px 0 0}
.more{margin-left:auto;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--accent);text-decoration:none}
.sub{font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:6px;margin:30px 0 4px;display:flex;align-items:baseline;gap:10px;scroll-margin-top:60px}
.sub span{font-family:var(--mono);font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.lede{font-size:16.5px;color:var(--ink-2);max-width:74ch;margin:0 0 10px}
.stats{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:2px 16px;margin:0 0 18px}
.stats b{font-weight:500;color:var(--ink)}
section{padding-top:24px;padding-bottom:40px}

/* Buttons */
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;border-radius:2px;border:1px solid var(--ink)}
.btn.solid{background:var(--band);color:var(--band-text);border-color:var(--band)}

/* Hero */
.hero{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center;padding-top:44px;padding-bottom:26px}
.hero-text{flex:999 1 520px;min-width:0}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.6vw,54px);line-height:1.04;margin:10px 0 16px}
.hero p{margin:0 0 22px;font-size:18px;color:var(--ink-2);max-width:62ch}
.hero-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-links .mono{font-size:12.5px;color:var(--muted);display:flex;gap:14px;margin-left:6px}
.hero-photo{flex:1 1 200px;display:flex;justify-content:center}
.portrait{width:220px;height:220px;max-width:none;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}

/* Post rows */
.row{display:grid;grid-template-columns:120px minmax(0,1fr) 70px;gap:18px;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.row:hover .rt{text-decoration:underline}
.row .rd,.row .rm{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:3px}
.row .rm{text-align:right}
.row .rt{font-family:var(--display);font-size:23px;line-height:1.2;margin:3px 0 4px}
.row .rs{font-size:14.5px;color:var(--ink-2)}
.list-tight .row .rt{font-size:21px;margin-top:0}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:3px}.row .rm{display:none}.row .rd{order:3;padding-top:2px}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cards.narrow{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:16px 18px 18px;text-decoration:none;min-width:0}
.card.top{border-top:3px solid var(--pc,var(--accent))}
.card h3{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.15;margin:0}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
.card .foot{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:auto;padding-top:8px;border-top:1px dashed var(--rule)}
a.card:hover h3{text-decoration:underline}
.card-photo{margin:-16px -18px 4px;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Section pages */
.page-head{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,42px);line-height:1.08;margin:4px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{font-family:var(--ui);font-size:12.5px;font-weight:600;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);border-radius:2px;padding:0 12px;min-height:36px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.chip b{font-family:var(--mono);font-weight:400;opacity:.7}
.cols{display:flex;flex-wrap:wrap;gap:8px 44px;align-items:flex-start}
.cols>.main{flex:999 1 600px;min-width:0}
.cols>aside{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:16px;padding-top:30px}
.panel{background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--ink);padding:12px 14px}
.panel ul{margin:8px 0 0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.panel.soft{background:var(--pc-soft,var(--surface-2));border:0;border-radius:3px;padding:14px 16px}
.tag{font-family:var(--mono);font-size:11.5px;background:var(--surface-2);color:var(--ink-2);padding:3px 8px;border-radius:2px;text-decoration:none;display:inline-block}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.empty{border:1px dashed var(--rule);border-radius:3px;padding:24px 22px;background:var(--surface);color:var(--ink-2);max-width:640px}

/* Article */
.back{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pc,var(--accent));text-decoration:none}
.post-head{max-width:820px;padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:26px}
.post-head h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,50px);line-height:1.05;margin:8px 0 12px}
.post-meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}
.prose{flex:999 1 600px;min-width:0;max-width:740px}
.prose p,.prose li{font-size:17.5px;line-height:1.68}
.prose p{margin:0 0 16px}
.prose h1,.prose h2{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.15;margin:36px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule);scroll-margin-top:60px}
.prose h3{font-family:var(--ui);font-size:15px;font-weight:700;margin:26px 0 8px;scroll-margin-top:60px}
.prose h4{font-family:var(--ui);font-size:14px;font-weight:700;margin:20px 0 6px}
.prose>:first-child{margin-top:0}
.prose a{color:var(--pc,var(--accent))}
.prose img{display:block;margin:8px auto 16px;border-radius:3px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:28px 0}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin:4px 0}
.prose blockquote{margin:0 0 16px;padding:4px 16px;border-left:3px solid var(--rule);color:var(--ink-2)}
.prose table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;margin:0 0 16px;font-size:14px}
.prose th,.prose td{border:1px solid var(--rule);padding:6px 10px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:1px 5px;border-radius:2px}
.prose pre{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:12px 14px;overflow-x:auto;font-size:13.5px;line-height:1.5}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;padding:4px 0}
.prose .dayline{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:-6px 0 14px}
.prose .caption{margin:4px 0 22px}
.prose .caption img{margin-bottom:8px}
.prose .caption em{display:block;font-style:normal;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);text-align:center;max-width:620px;margin:0 auto}
.prose img{max-height:640px;width:auto}
.prose .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 22px}
.prose .pair figure{margin:0}
.prose .pair img{width:100%;max-height:none;margin:0 0 8px}
.prose .pair figcaption{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.hg{font-family:"Noto Sans Egyptian Hieroglyphs",serif;font-size:1.3em;line-height:1;white-space:nowrap}
.cartouche{display:inline-block;font-family:"Noto Sans Egyptian Hieroglyphs",serif;font-size:1.35em;line-height:1.35;white-space:nowrap;border:1.5px solid currentColor;border-right-width:4px;border-radius:1em;padding:0 .45em;margin:0 .1em;vertical-align:-.1em}
.prose .glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:4px 0 22px;padding:0;list-style:none}
.prose .glyphs li{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:10px 12px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.prose .glyphs .hg{display:block;font-size:40px;line-height:1.2;color:var(--ink);margin-bottom:4px}
.takeaway{display:flex;gap:12px;align-items:baseline;margin:0 0 24px}
.takeaway b{flex:none;font-family:var(--ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--surface);background:var(--pc,var(--accent));padding:3px 8px}
.takeaway span{font-size:16px;font-weight:600;line-height:1.45}
.toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--rule);font-size:14px;color:var(--ink-2);text-decoration:none}
.toc a.on{border-left-color:var(--pc,var(--accent));color:var(--ink);font-weight:600}
.post-aside{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:22px}
@media (min-width:1000px){.post-aside{position:sticky;top:60px}}
.post-foot{max-width:740px;margin-top:34px;border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:20px}
.author{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.prevnext{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.prevnext a{border:1px solid var(--rule);background:var(--surface);border-radius:3px;padding:12px 14px;text-decoration:none}
.prevnext .serif{font-size:18px;line-height:1.2;margin-top:4px}

/* About */
.about-hero{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-start;padding-bottom:26px;border-bottom:2px solid var(--ink)}
.about-hero .portrait{width:200px;height:200px;flex:none}
.about-hero .txt{flex:999 1 520px;min-width:0;max-width:780px}
.about-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.4vw,48px);line-height:1.05;margin:6px 0 14px}
.about-hero h1 span{color:var(--muted);font-size:.7em}
.about-hero p{margin:0 0 14px;font-size:17px;line-height:1.62}
.about-hero p.second{color:var(--ink-2);font-size:16.5px}
.edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:10px 0;border-bottom:1px solid var(--rule)}
.list-plain li:last-child{border-bottom:0}
.callig{display:flex;align-items:flex-start;gap:8px;margin-top:14px}
.callig img{min-width:0;height:auto;border:1px solid var(--rule);border-radius:3px;display:block;background:#fff}

.disclaimer{max-width:740px;margin:30px 0 0;padding:10px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);font-size:13px;line-height:1.5;color:var(--muted)}

.tools{margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.tools>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center}
.tools dt{font-family:var(--ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.tools dd{margin:0}
@media (max-width:500px){.tools>div{grid-template-columns:1fr;gap:4px}}

/* Footer */
.site-foot{border-top:2px solid var(--ink);margin-top:20px}
.site-foot .inner{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:18px;padding-bottom:34px;font-family:var(--ui);font-size:12px;color:var(--muted)}
.site-foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline;color:var(--ink)}

/* Syntax highlighting (rouge), muted */
.highlight .c,.highlight .c1,.highlight .cm{color:var(--muted);font-style:italic}
.highlight .k,.highlight .kn,.highlight .kd{color:var(--academic);font-weight:600}
.highlight .s,.highlight .s1,.highlight .s2{color:var(--culture)}
.highlight .mi,.highlight .mf{color:var(--sports)}
.highlight .nf,.highlight .nb{color:var(--investing)}

@media print{.band,.tabs,.post-aside,.site-foot,.post-foot{display:none!important}body{background:#fff}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}