/* ===========================================================
   Norman Li — design tokens
   =========================================================== */
:root{
  --bg:#FBF9F6;
  --surface:#F5F2EB;
  --surface-2:#EFEBE1;
  --ink:#1A1C1E;
  --ink-soft:#585c60;
  --accent:#2C5282;
  --accent-soft:#3d6699;
  --border:rgba(26,28,30,0.12);
  --border-strong:rgba(26,28,30,0.22);
  --code-bg:#F0ECE2;
  --shadow:0 1px 2px rgba(26,28,30,0.06), 0 8px 24px rgba(26,28,30,0.05);

  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2rem;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
  --radius: 3px;
  --content-w: 42rem;
  --wide-w: 72rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#121416; --surface:#1a1d20; --surface-2:#202427;
    --ink:#E3E6E8; --ink-soft:#a2a9ae;
    --accent:#8fb0dd; --accent-soft:#729bcf;
    --border:rgba(227,230,232,0.14); --border-strong:rgba(227,230,232,0.26);
    --code-bg:#191c1f;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#121416; --surface:#1a1d20; --surface-2:#202427;
  --ink:#E3E6E8; --ink-soft:#a2a9ae;
  --accent:#8fb0dd; --accent-soft:#729bcf;
  --border:rgba(227,230,232,0.14); --border-strong:rgba(227,230,232,0.26);
  --code-bg:#191c1f;
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --bg:#FBF9F6; --surface:#F5F2EB; --surface-2:#EFEBE1;
  --ink:#1A1C1E; --ink-soft:#585c60;
  --accent:#2C5282; --accent-soft:#3d6699;
  --border:rgba(26,28,30,0.12); --border-strong:rgba(26,28,30,0.22);
  --code-bg:#F0ECE2;
  --shadow:0 1px 2px rgba(26,28,30,0.06), 0 8px 24px rgba(26,28,30,0.05);
}

/* ===========================================================
   Base
   =========================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.65;
}
::selection{ background:var(--accent); color:var(--bg); }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5{ font-family:var(--font-serif); font-weight:600; line-height:1.3; text-wrap:balance; margin:0 0 var(--space-4); }
h1{ font-size:var(--text-2xl); }
h2{ font-size:var(--text-xl); margin-top:var(--space-7); }
h3{ font-size:var(--text-lg); margin-top:var(--space-6); }
p{ margin:0 0 var(--space-4); }
ul,ol{ padding-left:1.3em; }
code, pre, kbd{ font-family:var(--font-mono); }
code{ background:var(--code-bg); padding:.1em .35em; border-radius:2px; font-size:.9em; }
pre{ background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); overflow-x:auto; font-size:.85rem; line-height:1.7; }
pre code{ background:none; padding:0; }
blockquote{ margin:var(--space-5) 0; padding-left:var(--space-5); border-left:2px solid var(--border-strong); color:var(--ink-soft); font-style:italic; }
hr{ border:none; border-top:1px solid var(--border); margin:var(--space-7) 0; }
table{ border-collapse:collapse; width:100%; margin:var(--space-5) 0; font-size:.92rem; }
th, td{ text-align:left; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
th{ font-family:var(--font-sans); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
td{ font-variant-numeric:tabular-nums; }
.table-wrap{ overflow-x:auto; }

.container{ max-width:var(--wide-w); margin:0 auto; padding:0 var(--space-6); }
.prose{ max-width:var(--content-w); }
@media (max-width:720px){ .container{ padding:0 var(--space-4); } }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
main{ display:block; min-height:60vh; }

/* ===========================================================
   Site header / nav
   =========================================================== */
.site-header{ border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:40; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) 0; gap:var(--space-4); }
.nav .word{ font-family:var(--font-serif); font-weight:600; font-size:1.15rem; color:var(--ink); text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:var(--space-5); list-style:none; margin:0; padding:0; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:var(--space-4); }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px; color:var(--ink); font-family:var(--font-sans); cursor:pointer; }

.icon-btn{ background:none; border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; }
.icon-btn:hover{ color:var(--ink); border-color:var(--border-strong); }

.search-trigger{ display:flex; align-items:center; gap:var(--space-2); font-size:.82rem; color:var(--ink-soft); border:1px solid var(--border); border-radius:14px; padding:5px 12px; background:none; cursor:pointer; font-family:var(--font-sans); }
.search-trigger:hover{ border-color:var(--border-strong); color:var(--ink); }
.kbd{ font-family:var(--font-mono); font-size:.7rem; border:1px solid var(--border-strong); border-radius:3px; padding:0 4px; }

@media (max-width:720px){
  .nav-links{
    position:fixed; inset:56px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start;
    padding:var(--space-6); gap:var(--space-5); transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease; border-top:1px solid var(--border);
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ font-size:1.05rem; }
  .nav-toggle{ display:inline-flex; }
}

/* ===========================================================
   Hero / home sections
   =========================================================== */
.hero{ padding:var(--space-8) 0 var(--space-7); border-bottom:1px solid var(--border); }
.eyebrow{ font-size:var(--text-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; display:block; margin-bottom:var(--space-3); }
.hero h1{ font-size:1.85rem; }
.hero .lede{ max-width:56ch; color:var(--ink-soft); font-size:var(--text-md); margin-top:var(--space-4); }

.home-section{ padding:var(--space-7) 0; border-bottom:1px solid var(--border); }
.home-section:last-of-type{ border-bottom:none; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-5); gap:var(--space-4); }
.section-head h2{ margin:0; font-size:var(--text-lg); }
.section-head .more{ font-size:.85rem; white-space:nowrap; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
@media (max-width:820px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }

.entry-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); text-decoration:none; color:inherit; display:block; transition:border-color .12s ease; }
.entry-card:hover{ border-color:var(--border-strong); }
.entry-card .kicker{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); }
.entry-card .title{ font-family:var(--font-serif); font-weight:600; margin:var(--space-2) 0; font-size:1rem; line-height:1.35; }
.entry-card .meta{ color:var(--ink-soft); font-size:.82rem; }

.stream-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.stream-row{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); font-size:.92rem; }
.stream-row .date{ color:var(--accent); font-family:var(--font-mono); font-size:.78rem; margin-right:var(--space-3); }
.stream-row .body-text{ color:var(--ink-soft); }
.stream-row .body-text a{ color:var(--accent); }

.timeline{ display:flex; flex-direction:column; gap:var(--space-3); }
.timeline-row{ display:flex; gap:var(--space-4); font-size:.94rem; align-items:baseline; }
.timeline-row .yr{ color:var(--accent); font-family:var(--font-mono); width:3.2em; flex-shrink:0; }
.timeline-row .ev{ color:var(--ink-soft); }

.cta-line{ text-align:center; padding:var(--space-6) 0; color:var(--ink-soft); }
.cta-line a{ margin:0 var(--space-2); }

/* ===========================================================
   Article / single page
   =========================================================== */
.page-head{ padding:var(--space-7) 0 var(--space-5); border-bottom:1px solid var(--border); }
.page-head .eyebrow{ color:var(--accent); }
.page-head h1{ font-size:1.7rem; margin-top:var(--space-2); }
.page-meta{ display:flex; flex-wrap:wrap; gap:var(--space-4); color:var(--ink-soft); font-size:.88rem; margin-top:var(--space-4); align-items:center; }
.tag-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.tag-chip{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:1px 10px; font-size:.78rem; color:var(--ink-soft); text-decoration:none; }
.tag-chip:hover{ color:var(--ink); border-color:var(--border-strong); }

.article-layout{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--space-8); padding:var(--space-7) 0 var(--space-9); align-items:start; }
@media (max-width:900px){ .article-layout{ grid-template-columns:1fr; } .article-layout .toc-wrap{ display:none; } }

.toc-wrap{ position:sticky; top:calc(var(--space-6) + 56px); font-size:.85rem; }
.toc-wrap .h{ font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; margin-bottom:var(--space-3); }
.toc-wrap nav ul{ list-style:none; margin:0; padding:0; }
.toc-wrap nav ul ul{ padding-left:var(--space-4); }
.toc-wrap nav a{ display:block; color:var(--ink-soft); text-decoration:none; padding:3px 0 3px var(--space-3); border-left:2px solid transparent; }
.toc-wrap nav a:hover{ color:var(--ink); }
.toc-wrap nav a.active{ color:var(--accent); border-left-color:var(--accent); }

.article-body{ max-width:var(--content-w); }
.article-body h2{ scroll-margin-top:var(--space-7); }
.article-body h3{ scroll-margin-top:var(--space-7); }
.article-body figure{ margin:var(--space-6) 0; }
.article-body figcaption{ font-size:.82rem; color:var(--ink-soft); margin-top:var(--space-2); text-align:center; }

.footnotes{ margin-top:var(--space-7); padding-top:var(--space-4); border-top:1px solid var(--border); font-size:.85rem; color:var(--ink-soft); }
.footnotes ol{ padding-left:1.3em; }
.footnote-ref a, .footnote-backref{ color:var(--accent); }

/* ===========================================================
   Digital Garden
   =========================================================== */
.garden-cluster{ margin-bottom:var(--space-7); }
.garden-cluster h2{ font-size:1.1rem; margin-top:0; }
.garden-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
@media (max-width:820px){ .garden-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .garden-grid{ grid-template-columns:1fr; } }
.garden-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:var(--space-3); }
.garden-card:hover{ border-color:var(--border-strong); }
.garden-card .g-title{ font-family:var(--font-serif); font-weight:600; font-size:1rem; }
.garden-card .g-def{ color:var(--ink-soft); font-size:.85rem; flex:1; }
.garden-card .g-back{ font-size:.78rem; color:var(--accent); border-top:1px solid var(--border); padding-top:var(--space-2); }

.concept-section{ margin-top:var(--space-6); }
.concept-section .h{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; margin-bottom:var(--space-3); }
.related-list, .backlink-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.related-list a, .backlink-list a{ text-decoration:none; }
.backlink-list li{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.backlink-list .b-kicker{ font-size:.7rem; text-transform:uppercase; color:var(--accent); }

/* ===========================================================
   Lab
   =========================================================== */
.status-chip{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:10px; font-weight:600; }
.status-chip.active{ background:rgba(63,107,74,.14); color:#3f6b4a; }
.status-chip.shipped{ background:rgba(44,82,130,.12); color:var(--accent); }
.status-chip.archived{ background:var(--surface-2); color:var(--ink-soft); }
@media (prefers-color-scheme: dark){
  .status-chip.active{ color:#8fcf9f; }
}
:root[data-theme="dark"] .status-chip.active{ color:#8fcf9f; }

/* ===========================================================
   Search overlay
   =========================================================== */
.search-overlay{
  position:fixed; inset:0; background:rgba(18,20,22,.45); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; z-index:100;
}
.search-overlay[hidden]{ display:none; }
.search-modal{ background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow); width:100%; max-width:560px; max-height:70vh; display:flex; flex-direction:column; }
.search-modal .s-input-row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.search-modal input{ flex:1; border:none; background:none; font-size:1rem; color:var(--ink); font-family:var(--font-sans); outline:none; }
.search-modal input::placeholder{ color:var(--ink-soft); }
.search-results{ overflow-y:auto; padding:var(--space-2) 0; }
.search-results .s-row{ display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-5); text-decoration:none; color:var(--ink); font-size:.92rem; }
.search-results .s-row .r-type{ color:var(--ink-soft); font-size:.75rem; flex-shrink:0; }
.search-results .s-row.active, .search-results .s-row:hover{ background:var(--surface-2); }
.search-empty{ padding:var(--space-5); color:var(--ink-soft); font-size:.9rem; }
.search-foot{ display:flex; gap:var(--space-5); padding:var(--space-3) var(--space-5); border-top:1px solid var(--border); font-size:.75rem; color:var(--ink-soft); }

/* ===========================================================
   About / Contact
   =========================================================== */
.about-grid{ display:grid; grid-template-columns:1fr 260px; gap:var(--space-8); padding:var(--space-7) 0 var(--space-9); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.stack-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.stack-list li{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2px 10px; font-size:.82rem; }
.side-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); }
.side-card h3{ font-size:.95rem; margin-top:0; }
.side-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2); font-size:.9rem; }

.contact-block{ padding:var(--space-8) 0; text-align:center; }
.contact-block .big-link{ font-family:var(--font-serif); font-size:1.4rem; }
.contact-block .also{ margin-top:var(--space-4); color:var(--ink-soft); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ border-top:1px solid var(--border); padding:var(--space-6) 0 var(--space-8); }
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); color:var(--ink-soft); font-size:.82rem; }
.footer-row a{ color:var(--ink-soft); }
.footer-row a:hover{ color:var(--accent); }

/* ===========================================================
   List pages (Essays / Lab / Garden / Stream index)
   =========================================================== */
.list-head{ padding:var(--space-7) 0 var(--space-5); border-bottom:1px solid var(--border); }
.list-head p{ color:var(--ink-soft); max-width:56ch; }
.filter-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }
.entry-list{ display:flex; flex-direction:column; padding:var(--space-6) 0; }
.entry-row{ display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; align-items:baseline; flex-wrap:wrap; }
.entry-row:last-child{ border-bottom:none; }
.entry-row .title{ font-family:var(--font-serif); font-weight:600; font-size:1.02rem; }
.entry-row .summary{ color:var(--ink-soft); font-size:.9rem; margin-top:2px; max-width:56ch; }
.entry-row .meta{ color:var(--ink-soft); font-size:.82rem; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ===========================================================
   Mermaid
   =========================================================== */
.mermaid{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5); margin:var(--space-6) 0; overflow-x:auto; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}