/* ============================================================
   theme.css — single flat editable stylesheet.
   Edit any value here; the build re-hashes the file name so
   browsers and CDNs can never serve a stale copy. Quartz-style
   variable names are kept so palettes port over directly.
   ============================================================ */

:root {
  /* light palette — clean Apple-style neutrals + single blue accent */
  --light: #ffffff;        /* page background */
  --lightgray: #d2d2d7;    /* borders / hairlines */
  --gray: #86868b;         /* faint text */
  --darkgray: #515154;     /* muted text */
  --dark: #1d1d1f;         /* primary ink */
  --secondary: var(--accent);  /* links / accent */
  --tertiary: var(--accent);   /* secondary accent */
  --highlight: rgba(52, 199, 89, 0.10);
  --textHighlight: rgba(52, 199, 89, 0.22);
  --accent: #186e2e;       /* brand green (light mode) */
  --codeBg: #f3f0e6;       /* code surface (paper) */

  /* sticky-note paper surfaces — opaque warm paper, soft stains, no ruled lines */
  --glassBg: #fdfaf0;
  --glassStrong: #fffdf6;
  --glassBorder: rgba(60, 50, 30, 0.12);
  --glassHi: rgba(255, 255, 255, 0.9);
  --glassShadow: none;
  --glassBlur: none;
  /* real vintage-paper photo texture (self-hosted, hashed by the build).
     Swap the image at ssg/assets/paper-texture.jpg.
     --paperWash is a veil drawn OVER the texture: higher alpha = fainter
     texture (lower opacity), alpha 0 = full-strength texture. Tune here. */
  --paperTex: url("/paper-texture.beaba46fea.jpg");
  --paperBlend: multiply;
  --paperWash: rgba(255, 253, 246, 0.78);
  /* faint strewn paper sheets tiled across the desk background */
  --paperPile: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'720'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C0.5)'%20stroke%3D'rgba(120%2C110%2C80%2C0.10)'%20stroke-width%3D'1'%3E%3Crect%20x%3D'60'%20y%3D'80'%20width%3D'150'%20height%3D'190'%20rx%3D'4'%20transform%3D'rotate(-8%20135%20175)'%2F%3E%3Crect%20x%3D'430'%20y%3D'40'%20width%3D'170'%20height%3D'150'%20rx%3D'4'%20transform%3D'rotate(6%20515%20115)'%2F%3E%3Crect%20x%3D'250'%20y%3D'300'%20width%3D'160'%20height%3D'200'%20rx%3D'4'%20transform%3D'rotate(-3%20330%20400)'%2F%3E%3Crect%20x%3D'520'%20y%3D'420'%20width%3D'150'%20height%3D'180'%20rx%3D'4'%20transform%3D'rotate(10%20595%20510)'%2F%3E%3Crect%20x%3D'90'%20y%3D'470'%20width%3D'170'%20height%3D'160'%20rx%3D'4'%20transform%3D'rotate(4%20175%20550)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  --titleFont: "Inter", system-ui, sans-serif;
  --headerFont: "Inter", system-ui, sans-serif;
  --bodyFont: "Inter", system-ui, sans-serif;
  --codeFont: "IBM Plex Mono", ui-monospace, monospace;

  --maxContent: 760px;
  --sidebar: 300px;
  --radius: 12px;
}

:root[data-theme="dark"] {
  /* dark palette — warm "aged paper by lamplight": the SAME cream paper as
     light mode, just dimmed. Warm brown surfaces + warm ink, not cold black. */
  --light: #211c16;
  --lightgray: #423a2f;
  --gray: #9c9183;
  --darkgray: #c2b6a3;
  --dark: #efe6d4;         /* warm off-white ink (was cold #f5f5f7) */
  --secondary: var(--accent);
  --tertiary: var(--accent);
  --highlight: rgba(124, 195, 121, 0.12);
  --textHighlight: rgba(124, 195, 121, 0.26);
  --accent: #7cc379;       /* warm sage green — kin to light mode's #186e2e */
  --codeBg: #2a2319;

  /* sticky-note paper surfaces (dark) — warm coffee-toned paper, soft stains */
  --glassBg: #2b2419;
  --glassStrong: #302820;
  --glassBorder: rgba(240, 224, 190, 0.12);
  --glassHi: rgba(255, 245, 220, 0.10);
  --glassShadow: none;
  --glassBlur: none;
  /* same photo, blended gently so the dark surface keeps its warm tone.
     --paperWash veils it: higher alpha (of the dark surface colour) = fainter texture. */
  --paperTex: url("/paper-texture.beaba46fea.jpg");
  --paperBlend: soft-light;
  --paperWash: rgba(44, 36, 26, 0.72);
  --paperPile: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'720'%20height%3D'720'%3E%3Cg%20fill%3D'rgba(255%2C255%2C255%2C0.045)'%20stroke%3D'rgba(255%2C255%2C255%2C0.06)'%20stroke-width%3D'1'%3E%3Crect%20x%3D'60'%20y%3D'80'%20width%3D'150'%20height%3D'190'%20rx%3D'4'%20transform%3D'rotate(-8%20135%20175)'%2F%3E%3Crect%20x%3D'430'%20y%3D'40'%20width%3D'170'%20height%3D'150'%20rx%3D'4'%20transform%3D'rotate(6%20515%20115)'%2F%3E%3Crect%20x%3D'250'%20y%3D'300'%20width%3D'160'%20height%3D'200'%20rx%3D'4'%20transform%3D'rotate(-3%20330%20400)'%2F%3E%3Crect%20x%3D'520'%20y%3D'420'%20width%3D'150'%20height%3D'180'%20rx%3D'4'%20transform%3D'rotate(10%20595%20510)'%2F%3E%3Crect%20x%3D'90'%20y%3D'470'%20width%3D'170'%20height%3D'160'%20rx%3D'4'%20transform%3D'rotate(4%20175%20550)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }

body {
  margin: 0;
  /* bright, airy ambient gradient (light mode) + strewn paper sheets */
  background-color: #f3f6fb;
  background-image:
    var(--paperPile),
    radial-gradient(78rem 66rem at 16% 12%, rgba(255, 255, 255, 0.95), transparent 62%),
    radial-gradient(86rem 76rem at 84% 24%, rgba(52, 199, 89, 0.07), transparent 62%),
    radial-gradient(80rem 72rem at 78% 96%, rgba(140, 170, 255, 0.08), transparent 60%),
    radial-gradient(70rem 64rem at 30% 108%, rgba(255, 255, 255, 0.8), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 720px 720px, auto, auto, auto, auto;
  background-attachment: fixed;
  color: var(--dark);
  font-family: var(--bodyFont);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] body {
  background-color: #17120c;
  background-image:
    var(--paperPile),
    radial-gradient(64rem 54rem at 14% 8%, rgba(120, 92, 48, 0.30), transparent 60%),
    radial-gradient(58rem 50rem at 90% 16%, rgba(124, 195, 121, 0.10), transparent 58%),
    radial-gradient(60rem 54rem at 84% 102%, rgba(150, 110, 60, 0.16), transparent 58%),
    radial-gradient(56rem 50rem at 12% 108%, rgba(90, 70, 40, 0.22), transparent 58%);
}

/* ---- cursor-follow light: "rummaging through a pile of papers" ----
   --mx/--my are set by app.js on mousemove (fall back to centre).        */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* light theme: a soft warm pool of light with a green wash gliding over the papers */
body::before {
  background: radial-gradient(
    26rem 26rem at var(--mx, 50%) var(--my, 40%),
    rgba(96, 186, 96, 0.40),
    rgba(150, 214, 120, 0.20) 34%,
    rgba(255, 252, 235, 0.10) 56%,
    transparent 66%
  );
  mix-blend-mode: soft-light;
  transition: background 60ms linear;
}
/* dark theme: torch beam + the rest of the pile falls into shadow */
:root[data-theme="dark"] body::before {
  background: radial-gradient(
    20rem 20rem at var(--mx, 50%) var(--my, 40%),
    rgba(255, 246, 214, 0.20),
    rgba(255, 244, 208, 0.07) 40%,
    transparent 60%
  );
  mix-blend-mode: screen;
}
:root[data-theme="dark"] body::after {
  background: radial-gradient(
    30rem 30rem at var(--mx, 50%) var(--my, 40%),
    transparent 0,
    transparent 30%,
    rgba(0, 0, 0, 0.62) 85%
  );
}

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--textHighlight); }

/* ---------------------------------------------------------- layout */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--sidebar);
  gap: 2rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  font-size: 0.9rem;
}

.sidebar h3 {
  font-family: var(--headerFont);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--darkgray);
  margin: 1.4rem 0 0.6rem;
}

.content {
  position: relative;
  min-width: 0;
  background-color: var(--glassStrong);
  background-image: linear-gradient(var(--paperWash), var(--paperWash)), var(--paperTex);
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, var(--paperBlend);
  border: 1px solid var(--glassBorder);
  border-radius: 6px;
  box-shadow: var(--glassShadow);
  padding: 2rem 2.4rem 1.2rem;
  overflow: hidden;
}

/* ---------------------------------------------------------- left sidebar */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.site-title {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.92;
  color: var(--dark);
}
.site-title:hover { text-decoration: none; }
.site-title .brand {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.site-title .brand em {
  font-style: italic;
  color: var(--accent);
  display: inline-block;
  transform: rotate(-5deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-title:hover .brand em { transform: rotate(0deg) scale(1.1); }
.site-title .brand-sub {
  align-self: flex-end;
  margin-top: 0.05rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gray);
}

.head-actions { display: inline-flex; align-items: center; gap: 0.45rem; }
a.icon-btn { text-decoration: none; }
a.icon-btn:hover { text-decoration: none; }

.icon-btn {
  background: var(--glassBg);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border: 1px solid var(--glassBorder);
  box-shadow: var(--glassShadow);
  color: var(--dark);
  border-radius: 999px;
  cursor: pointer;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.icon-btn:hover { border-color: var(--secondary); color: var(--secondary); }
/* spin the glyph INSIDE the button, not the button box — the box never
   changes size/position, so it can't overflow the viewport or spawn a scrollbar */
.icon-btn-i {
  display: inline-flex;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-btn:hover .icon-btn-i { transform: rotate(-18deg) scale(1.12); }
.icon-btn:active .icon-btn-i { transform: rotate(0deg) scale(0.9); }

.search {
  width: 100%;
  margin: 1.25rem 0 1.4rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--glassBorder);
  border-radius: 999px;
  background: var(--glassBg);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  box-shadow: var(--glassShadow);
  color: var(--dark);
  font-family: var(--bodyFont);
  font-size: 0.9rem;
}
.search:focus { outline: none; border-color: var(--secondary); }

/* glass cards for sidebar widgets */
.explorer,
.graph,
.toc,
.backlinks {
  position: relative;
  background-color: var(--glassBg);
  background-image: linear-gradient(var(--paperWash), var(--paperWash)), var(--paperTex);
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, var(--paperBlend);
  border: 1px solid var(--glassBorder);
  border-radius: 6px;
  box-shadow: var(--glassShadow);
  padding: 0.5rem 1.15rem 1.15rem;
  margin-bottom: 1.1rem;
}
.explorer h3,
.toc h3,
.backlinks h3,
.graph-head h3 { margin-top: 0.8rem; margin-bottom: 0.8rem; }

/* ---------------------------------------------------------- explorer (folder-scoped) */
.explorer-head { margin: 0.4rem 0 0.7rem; }
.explorer-up {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--gray);
  margin-bottom: 0.5rem;
}
.explorer-up:hover { color: var(--secondary); text-decoration: none; }
.explorer-loc {
  display: block;
  font-family: var(--headerFont);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--darkgray);
}
.explorer-loc:hover { color: var(--secondary); text-decoration: none; }
/* vertical guide bar instead of long horizontal dashes */
.explorer-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--glassBorder);
}
.explorer-list li { margin: 0.3rem 0; line-height: 1.45; position: relative; }
.explorer-list a {
  color: var(--darkgray);
  display: inline-block;
  transition: color 0.15s ease, transform 0.15s ease;
}
.explorer-list a:hover { color: var(--secondary); text-decoration: none; transform: translateX(3px); }
.explorer-list li.folder a::before { content: "▸ "; color: var(--tertiary); }
.explorer-list li.file a::before { content: ""; }
.explorer-list li.folder a { color: var(--dark); font-weight: 600; }
.explorer-list a.active {
  color: var(--secondary);
  font-weight: 600;
}
/* highlight tick on the guide bar for the active file */
.explorer-list a.active::after {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.explorer-list li.hidden { display: none; }

/* ---------------------------------------------------------- collection card grid */
.collection { margin: 2rem 0 0.5rem; }
.ncards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.ncard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
  padding: 1rem 1.1rem;
  border-radius: 4px;
  /* folder buttons stay a flat paper colour — no photo texture */
  background-color: var(--glassBg);
  background-image: none;
  border: 1px solid var(--glassBorder);
  box-shadow: var(--glassShadow);
  color: var(--dark);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
}
/* slight random scatter so the cards read like pinned sticky notes */
.ncard:nth-child(3n+1) { transform: rotate(-0.9deg); }
.ncard:nth-child(3n+2) { transform: rotate(0.7deg); }
.ncard:nth-child(3n)   { transform: rotate(-0.3deg); }
.ncard:hover {
  text-decoration: none;
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  border-color: var(--accent);
  z-index: 2;
}
.ncard-kind {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  font-weight: 600;
}
.ncard-folder .ncard-title::before { content: "▸ "; color: var(--tertiary); }
.ncard-title {
  font-family: var(--headerFont);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--dark);
}
.ncard-desc { font-size: 0.8rem; color: var(--darkgray); line-height: 1.5; }
.ncard-meta { font-size: 0.72rem; color: var(--gray); }

/* ---------------------------------------------------------- in-content backlinks */
.backlinks-block {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lightgray);
}
.backlinks-block h2 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.7rem;
}
.backlinks-block ul { margin: 0; padding-left: 1.1rem; }
.backlinks-block li { margin: 0.25rem 0; }

/* ---------------------------------------------------------- content */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--darkgray);
  margin-bottom: 1rem;
}
.breadcrumbs .sep { margin: 0 0.4rem; color: var(--gray); }
.breadcrumbs a { color: var(--darkgray); }

.article-title {
  font-family: var(--titleFont);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--glassBorder);
  color: var(--dark);
}

/* date + tag chips under the title */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin: -0.7rem 0 1.6rem;
  font-size: 0.82rem;
  color: var(--gray);
}
.article-lede {
  margin: -0.4rem 0 1.8rem;
  padding-left: 1rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-family: var(--bodyFont);
  font-size: 1.08rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--darkgray);
}
.article-meta .meta-sep { margin: 0 0.4rem; color: var(--lightgray); }
.article-meta .meta-upd { font-style: italic; }
.article-meta .tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.article-meta .tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--highlight);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s;
}
.article-meta .tag:hover { transform: translateY(-1px) rotate(-2deg); background: var(--textHighlight); }

article { max-width: var(--maxContent); }

article h1, article h2, article h3, article h4, article h5, article h6 {
  font-family: var(--headerFont);
  line-height: 1.25;
  margin: 2rem 0 0.8rem;
  scroll-margin-top: 1rem;
}
article h1 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.015em; }
article h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
article h3 { font-size: 1.25rem; font-weight: 600; }
article h4 { font-size: 1.1rem; font-weight: 600; }

article p { margin: 0.8rem 0; }
article img { max-width: 100%; height: auto; border-radius: var(--radius); }

article a.broken, .broken {
  color: var(--gray);
  border-bottom: 1px dashed var(--gray);
  cursor: not-allowed;
}

article ul, article ol { padding-left: 1.4rem; }
article li { margin: 0.25rem 0; }

article blockquote {
  margin: 1rem 0;
  padding: 0.4rem 1rem;
  border-left: 3px solid var(--tertiary);
  background: var(--highlight);
  color: var(--darkgray);
}

article code {
  font-family: var(--codeFont);
  font-size: 0.88em;
  background: var(--codeBg);
  padding: 0.15em 0.4em;
  border-radius: 6px;
}
article pre {
  position: relative;
  background: var(--codeBg);
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--gray);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.copy-btn svg { display: block; }
article pre:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover {
  color: var(--dark);
  background: rgba(127, 127, 127, 0.14);
  transform: rotate(-10deg) scale(1.12);
}
.copy-btn:active { transform: rotate(0deg) scale(0.92); }
.copy-btn.copied { transform: scale(1.05); }
.copy-btn.copied { color: var(--secondary); opacity: 1; }
article pre code {
  background: none;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.92rem;
}
article th, article td {
  border: 1px solid var(--lightgray);
  padding: 0.5rem 0.7rem;
  text-align: left;
}
article th { background: var(--highlight); }

article hr { border: none; border-top: 1px solid var(--lightgray); margin: 2rem 0; }

mark { background: var(--textHighlight); color: inherit; }

.page-footer {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lightgray);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--gray);
}
.page-footer .socials { justify-self: start; }
.page-footer .footer-credit { justify-self: center; text-align: center; }
.page-footer .footer-contacts { justify-self: end; }
@media (max-width: 600px) {
  .page-footer { grid-template-columns: 1fr; justify-items: center; }
}
.page-footer .socials { display: flex; gap: 0.55rem; }
.page-footer .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: var(--darkgray);
  background: var(--glassBg);
  -webkit-backdrop-filter: var(--glassBlur);
  backdrop-filter: var(--glassBlur);
  border: 1px solid var(--glassBorder);
  box-shadow: var(--glassShadow);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.page-footer .social:hover {
  color: var(--light);
  background: var(--secondary);
  border-color: var(--secondary);
  transform: translateY(-2px);
  text-decoration: none;
}
.page-footer .social svg { fill: currentColor; display: block; }
.footer-credit { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }

/* click-to-copy contact buttons (email / phone) */
.footer-contacts { display: flex; gap: 0.55rem; }
.contact-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  color: var(--darkgray);
  background: var(--glassBg);
  border: 1px solid var(--glassBorder);
  box-shadow: var(--glassShadow);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.contact-btn:hover { color: var(--light); background: var(--secondary); border-color: var(--secondary); transform: translateY(-2px); }
.contact-btn.copied { color: var(--light); background: var(--accent); border-color: var(--accent); }
.contact-btn svg { display: block; }

/* small "copied!" popup above the icon */
.contact-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  white-space: nowrap;
  background: var(--accent);
  color: var(--light);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.contact-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}
.contact-btn.copied .contact-pop { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------- graph */
.graph { margin-bottom: 1rem; }
.graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.graph-head h3 { margin: 1.4rem 0 0.6rem; }
#graph-canvas {
  width: 100%;
  height: 220px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: grab;
  display: block;
}

.graph-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--glassBg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.graph-modal[hidden] { display: none; }
#graph-canvas-global { width: 100%; height: 100%; display: block; cursor: grab; }
#graph-close { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 51; }

/* ---------------------------------------------------------- toc (hierarchy) */
.toc-content,
.toc-content ul { list-style: none; margin: 0; padding: 0; }
/* nested levels get an indented connector rail */
.toc-content ul {
  margin-left: 0.4rem;
  padding-left: 0.85rem;
  border-left: 1.5px solid var(--lightgray);
}
.toc-content li { margin: 0.12rem 0; line-height: 1.3; }
.toc-content a {
  display: block;
  color: var(--darkgray);
  font-size: 0.82rem;
  padding: 0.12rem 0 0.12rem 0.6rem;
  margin-left: -0.85rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.toc-content a:hover { color: var(--secondary); text-decoration: none; }
.toc-content a.active {
  color: var(--secondary);
  font-weight: 600;
  border-left-color: var(--tertiary);
}
/* depth-graded type: top level reads strongest, deeper levels recede */
.toc-content > li > a {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark);
}
.toc-content ul a { font-weight: 500; font-size: 0.84rem; color: var(--darkgray); }
.toc-content ul ul a { font-weight: 400; font-size: 0.8rem; color: var(--gray); }
.toc-content ul ul ul a { font-size: 0.78rem; color: var(--gray); }

/* ---------------------------------------------------------- backlinks */
.backlinks ul { list-style: none; margin: 0; padding: 0; }
.backlinks li { margin: 0.3rem 0; font-size: 0.85rem; }
.muted { color: var(--gray); font-size: 0.85rem; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1200px) {
  .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar.right { display: none; }
}
@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 1rem 1.2rem 3rem;
  }
  .sidebar.left { position: static; max-height: none; }
}