/* ────────────────────────────────────────────────────────────────
   JZ Brand · v3 visual identity
   Source: /home/evecc/project-eve/projects/personal-visual-identity/index.html
   Spec doc: jz-visual-identity repo · design-notes.md
   Author: G (张济, jizhang.io)
   Last revised: 2026-05-14

   Consumed by:
   - jizhang.io homepage
   - jizhang.io/articles/* (every article page)
   - Any other jizhang.io surface

   Page-specific layout / one-off rules stay in the page's own <style>.
   ──────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Space+Grotesk:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap");

:root {
  /* canonical Ivory — near-white, cool, brand gold + crimson */
  --bg:           #fdfdfb;
  --paper:        #ffffff;
  --paper-2:      #f3f4ee;
  --paper-3:      #e4e6dd;
  --rule:         #bfc3b8;
  --rule-soft:    #e4e6dd;
  --ink:          #101216;
  --ink-2:        #24272c;
  --ink-3:        #4c5158;
  --ink-mute:     #82868c;
  --gold:         #b9893a;
  --gold-soft:    #ead7a8;
  --crimson:      #a32820;
  --crimson-soft: #f0d7d2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { overflow-x: hidden; }

/* ──────────────── Base layout ──────────────── */
.shell { max-width: 1180px; margin: 0 auto; padding: 0 28px 100px; }
@media (max-width: 720px) { .shell { padding: 0 22px 70px; } }
@media (max-width: 420px) { .shell { padding: 0 18px 60px; } }

/* Bilingual visibility helpers */
body.lang-zh .en-only, body.lang-en .zh-only { display: none !important; }

/* ──────────────── Typography utility classes ──────────────── */
.serif-en   { font-family: 'Source Serif 4', 'IBM Plex Serif', Georgia, serif; }
.serif-cn   { font-family: 'Noto Serif SC', 'Source Serif 4', serif; }
.sans-cn    { font-family: 'Noto Sans SC', 'Space Grotesk', sans-serif; }
.sans-en    { font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif; }
.mono       { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cinzel     { font-family: 'Cinzel', Georgia, serif; letter-spacing: 0.04em; }

/* ──────────────── Reading default ────────────────
   Articles / prose use serif body. Override per page if a surface
   needs sans (UI heavy / dashboard). */
body.reading {
  font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.75;
}
body.reading.lang-zh {
  font-family: 'Noto Serif SC', 'Source Serif 4', serif;
  line-height: 1.9;
}
@media (max-width: 720px) {
  body.reading { font-size: 16px; line-height: 1.72; }
  body.reading.lang-zh { font-size: 15.5px; line-height: 1.88; }
}

/* ──────────────── Masthead (top bar) ────────────────
   Geist Mono uppercase metadata strip. Border-bottom 1px ink. */
.masthead {
  border-bottom: 1px solid var(--ink);
  padding: 30px 0 16px;
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  flex-wrap: wrap;
  gap: 14px;
}
.masthead a { color: var(--ink-3); text-decoration: none; }
.masthead a:hover { color: var(--ink); }
.masthead .crumbs .sep { color: var(--rule); margin: 0 8px; }
.masthead-right { display: inline-flex; gap: 18px; align-items: baseline; }
@media (max-width: 720px) {
  .masthead { padding: 22px 0 14px; margin-bottom: 28px; font-size: 9.5px; letter-spacing: 0.14em; gap: 10px; }
  .masthead-right { gap: 12px; }
}

/* ──────────────── Lang toggle ────────────────
   Sits in masthead-right or topbar. */
.lang-toggle { display: inline-flex; border: 1px solid var(--ink); background: transparent; }
.lang-toggle button {
  background: transparent;
  border: none;
  padding: 3px 10px;
  font: inherit;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.lang-toggle button.active { background: var(--ink); color: var(--bg); }

/* ──────────────── Cover title (h1) ────────────────
   Cinzel uppercase for EN. Noto Serif SC for ZH. */
h1.cover {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 56px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
  max-width: 900px;
}
h1.cover .gold { color: var(--gold); }
h1.cover-cn {
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 38px);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ink);
  max-width: 900px;
}
@media (max-width: 720px) {
  h1.cover { font-size: 26px; }
  h1.cover-cn { font-size: 24px; line-height: 1.4; }
}

/* ──────────────── Meta line ────────────────
   Below cover title, above content. Geist Mono uppercase mute. */
.meta-line {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 18px;
  margin-bottom: 40px;
  display: flex;
  gap: 18px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) { .meta-line { margin-bottom: 32px; } }

/* ──────────────── Section + h2 ────────────────
   sec-num crimson Geist Mono "§ 01 · ...". h2 Cinzel uppercase, no border. */
section { margin-bottom: 56px; }
@media (max-width: 720px) { section { margin-bottom: 44px; } }
.sec-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 720px) { .sec-num { font-size: 10.5px; margin-bottom: 6px; } }
h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
  line-height: 1.1;
}
h2 .cn {
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  font-size: 0.65em;
  margin-left: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: none;
}
body.lang-zh h2 {
  font-family: 'Noto Serif SC', 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: clamp(22px, 2.6vw, 28px);
}
body.lang-zh h2 .cn { display: none; }
@media (max-width: 720px) {
  h2 { font-size: 22px; margin-bottom: 18px; }
  body.lang-zh h2 { font-size: 21px; }
}
h3 {
  font-family: 'Noto Serif SC', 'Cinzel', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.03em;
  margin: 26px 0 10px;
  color: var(--ink);
}

/* ──────────────── Section lede (opening paragraph) ──────────────── */
p.sec-lede {
  font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 28px;
  max-width: 820px;
}
body.lang-zh p.sec-lede {
  font-family: 'Noto Serif SC', 'Source Serif 4', serif;
  font-size: 19px;
  line-height: 1.7;
  font-weight: 500;
}
@media (max-width: 720px) {
  p.sec-lede { font-size: 17px; line-height: 1.6; max-width: none; }
  body.lang-zh p.sec-lede { font-size: 17.5px; }
}

/* ──────────────── Body prose ────────────────
   Wrap article body content in <div class="body">. Reading column 760. */
.body p, p {
  max-width: 760px;
  color: var(--ink-2);
  margin-bottom: 18px;
}
@media (max-width: 720px) { .body p, p { max-width: none; } }
.body a, p a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.14s ease, border-color 0.14s ease;
}
.body a:hover, p a:hover {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}

/* ──────────────── HR section break ──────────────── */
hr.section-break {
  border: none;
  border-top: 1px solid var(--rule);
  width: 28%;
  margin: 40px auto;
}
@media (max-width: 720px) { hr.section-break { margin: 32px auto; width: 40%; } }

/* ──────────────── Inline citation tooltip ────────────────
   Wrap inline link in <span class="cite-anchor"><a class="cite"...>name</a><span class="tip">source · date<span class="tip-url">url</span></span></span>
   Important: tooltip content must be inline-only (no <div>, no nested <a>) or
   browser parser will rip it out of the anchor. */
.cite-anchor {
  position: relative;
  display: inline;
  cursor: help;
}
.cite-anchor a.cite {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.14s ease, border-color 0.14s ease;
}
.cite-anchor a.cite::after {
  content: "↗";
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.66em;
  color: var(--gold);
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}
.cite-anchor:hover a.cite { color: var(--crimson); border-bottom-color: var(--crimson); }
.cite-anchor:hover a.cite::after { color: var(--crimson); }
.cite-anchor .tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  width: max-content;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Source Serif 4', 'Noto Serif SC', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 14px 10px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  transform: translateY(-3px);
}
.cite-anchor.right-anchor .tip { left: auto; right: 0; }
body.lang-zh .cite-anchor .tip { font-family: 'Noto Serif SC', 'Source Serif 4', serif; }
.cite-anchor:hover .tip,
.cite-anchor:focus-within .tip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cite-anchor .tip .tip-url {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.16);
  color: var(--gold);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  word-break: break-all;
}
@media (max-width: 720px) {
  .cite-anchor .tip { width: calc(100vw - 44px); max-width: calc(100vw - 44px); }
}

/* ──────────────── Button ──────────────── */
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--ink-2); }
.btn.accent { background: var(--crimson); color: var(--paper); border-color: var(--crimson); }
.btn.accent:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ──────────────── Footer signature ──────────────── */
.sig {
  margin-top: 64px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.sig a { color: var(--ink-mute); text-decoration: none; }
.sig a:hover { color: var(--ink); }

/* ──────────────── Panel / card ────────────────
   Used for sub-content blocks inside an article (callouts, refs, etc). */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px 24px;
  margin-bottom: 14px;
}
.panel-tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 10px;
}