/* ===== BASE TOKENS ===== */
:root{
  --bg:#ffffff;
  --surface:rgba(0,0,0,.02);
  --text:#1a1d23;
  --muted:#6b7280;
  --border:rgba(0,0,0,.08);
  --link:#3b6fd4;
  --accent:#3b6fd4;
  --primary:#3b6fd4;

  --content-max:72ch;
  --radius:8px;

  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-heading:var(--font-body);
}

/* Soft dark theme — no pure black or white */
html[data-theme="dark"]{
  --bg:#0f1623;
  --surface:rgba(255,255,255,.04);
  --text:#e6e9ef;
  --muted:#a9b4c0;
  --border:rgba(255,255,255,.08);
  --link:#8aa8ff;
  --accent:#8aa8ff;
  --primary:#6c8bd8;
}

/* ===== 16 CALM PALETTES (auto-selected by hash) ===== */
:root[data-palette="0"]{--primary:#6c8bd8;--accent:#9bb6ff;--link:#8aa8ff}
:root[data-palette="1"]{--primary:#5f9c8f;--accent:#7bc1b2;--link:#6dd3c4}
:root[data-palette="2"]{--primary:#8b7ec8;--accent:#a99be0;--link:#9d8fd6}
:root[data-palette="3"]{--primary:#c27c5a;--accent:#dba07e;--link:#d4956f}
:root[data-palette="4"]{--primary:#6b9e6b;--accent:#8fc08f;--link:#7db87d}
:root[data-palette="5"]{--primary:#b07aa3;--accent:#cc9abf;--link:#c08db5}
:root[data-palette="6"]{--primary:#7a94a8;--accent:#9bb4c8;--link:#8da6bc}
:root[data-palette="7"]{--primary:#c4956d;--accent:#ddb590;--link:#d5a880}
:root[data-palette="8"]{--primary:#6889a8;--accent:#89aac8;--link:#7b9dbe}
:root[data-palette="9"]{--primary:#9b8a6e;--accent:#baa98d;--link:#ad9c7e}
:root[data-palette="10"]{--primary:#7c8e5e;--accent:#9aad7b;--link:#8da06c}
:root[data-palette="11"]{--primary:#a07878;--accent:#bf9696;--link:#b28888}
:root[data-palette="12"]{--primary:#6a8fa0;--accent:#8ab0c0;--link:#7da3b5}
:root[data-palette="13"]{--primary:#8e7fa0;--accent:#ad9dbf;--link:#9f90b2}
:root[data-palette="14"]{--primary:#7ea07e;--accent:#9dc09d;--link:#8fb58f}
:root[data-palette="15"]{--primary:#a8866e;--accent:#c7a58c;--link:#ba987d}

/* Dark overrides per palette */
html[data-theme="dark"][data-palette="0"]{--primary:#6c8bd8;--accent:#9bb6ff;--link:#8aa8ff}
html[data-theme="dark"][data-palette="1"]{--primary:#5f9c8f;--accent:#7bc1b2;--link:#7bc1b2}
html[data-theme="dark"][data-palette="2"]{--primary:#8b7ec8;--accent:#b9ade6;--link:#a99be0}
html[data-theme="dark"][data-palette="3"]{--primary:#d4956f;--accent:#e8b899;--link:#dba07e}
html[data-theme="dark"][data-palette="4"]{--primary:#6b9e6b;--accent:#96c996;--link:#8fc08f}
html[data-theme="dark"][data-palette="5"]{--primary:#c08db5;--accent:#d9aed0;--link:#cc9abf}
html[data-theme="dark"][data-palette="6"]{--primary:#8da6bc;--accent:#a9c0d4;--link:#9bb4c8}
html[data-theme="dark"][data-palette="7"]{--primary:#d5a880;--accent:#e8c4a2;--link:#ddb590}
html[data-theme="dark"][data-palette="8"]{--primary:#7b9dbe;--accent:#9bb8d4;--link:#89aac8}
html[data-theme="dark"][data-palette="9"]{--primary:#baa98d;--accent:#d0c0a6;--link:#c4b498}
html[data-theme="dark"][data-palette="10"]{--primary:#8da06c;--accent:#a8be88;--link:#9aad7b}
html[data-theme="dark"][data-palette="11"]{--primary:#bf9696;--accent:#d4afaf;--link:#c9a3a3}
html[data-theme="dark"][data-palette="12"]{--primary:#7da3b5;--accent:#9bbdce;--link:#8ab0c0}
html[data-theme="dark"][data-palette="13"]{--primary:#9f90b2;--accent:#b8aaca;--link:#ad9dbf}
html[data-theme="dark"][data-palette="14"]{--primary:#8fb58f;--accent:#a8cea8;--link:#9dc09d}
html[data-theme="dark"][data-palette="15"]{--primary:#ba987d;--accent:#d0b49a;--link:#c7a58c}

/* ===== RESET + BASE ===== */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18.5px;
  line-height:1.72;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

p{margin:0 0 1em}

.container{
  max-width:72ch;
  margin:0 auto;
  padding:24px 20px;
}

/* ===== TWO-COLUMN LAYOUT ===== */
.layout{display:block}
.maincol{min-width:0;max-width:72ch}
.sidebar{display:none}

@media(min-width:1040px){
  .container{max-width:1100px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
  .sidebar{display:block;position:sticky;top:80px;padding-top:6px}
}

/* ===== HEADER ===== */
.site-header{
  position:sticky;
  top:0;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
  z-index:10;
}

.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.brand{
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
  white-space:nowrap;
  flex-shrink:0;
  text-decoration:none;
}
.brand:hover{text-decoration:none}

.topnav{display:none;align-items:center;gap:16px}
.topnav a{color:var(--muted);font-weight:500;font-size:.92rem;text-decoration:none}
.topnav a:hover{color:var(--text)}

@media(min-width:820px){
  .topnav{display:flex}
}

.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

.theme-toggle{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
  flex-shrink:0;
}
.theme-toggle:focus{outline:2px solid color-mix(in srgb, var(--primary) 50%, transparent);outline-offset:2px}

/* ===== INLINE SEARCH ===== */
.search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 14px;
  margin-left:auto;
  flex:1 1 0;
  max-width:320px;
  min-width:120px;
  transition:border-color .15s;
}
.search-wrap:focus-within{border-color:var(--primary)}

.search-icon{color:var(--muted);flex-shrink:0}

.search-wrap input{
  border:none;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:.88rem;
  font-family:inherit;
  width:100%;
  min-width:0;
}
.search-wrap input::placeholder{color:var(--muted)}

.search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  list-style:none;
  margin:0;
  padding:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-height:60vh;
  overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  z-index:20;
}
.search-results:empty{display:none}
.search-results li a{display:block;padding:10px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:background .1s}
.search-results li:last-child a{border-bottom:none}
.search-results li a:hover,.search-results li a:focus{background:var(--surface)}
.search-results li a strong{display:block;font-size:.9rem;margin-bottom:2px;text-decoration:none}
.search-results li a span{display:block;font-size:.8rem;color:var(--muted);line-height:1.35}
.sr-empty{padding:12px 14px;color:var(--muted);font-size:.88rem;text-align:center}

@media(max-width:819px){
  .search-wrap{max-width:160px}
}

/* ===== PAGE CONTENT ===== */
.page-title{
  font-family:var(--font-heading);
  font-size:1.85rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin:0 0 12px;
}

.muted{color:var(--muted)}

.page-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:18px;
}
.meta-sep{opacity:.4}
.meta-hub{color:var(--primary);font-weight:500;text-decoration:none}
.meta-hub:hover{text-decoration:underline}

/* Lede / summary box */
.lede{
  background:var(--surface);
  border-left:4px solid var(--primary);
  border-radius:var(--radius);
  padding:14px 18px;
  margin:0 0 24px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.6;
}

/* Article body wrapper */
.page-body{
  max-width:72ch;
}

.content h2{
  font-family:var(--font-heading);
  font-weight:600;
  margin:2em 0 0.6em;
  padding-bottom:0.35em;
  border-bottom:1px solid var(--border);
  line-height:1.25;
  letter-spacing:-0.01em;
  font-size:1.35rem;
}

.content h3{
  font-family:var(--font-heading);
  font-weight:600;
  margin:1.5em 0 0.4em;
  font-size:1.1rem;
  line-height:1.3;
}

.content p{margin:0 0 1em}
.content ul,.content ol{margin:0.5em 0 1.2em 1.4rem}
.content li{margin:0.3em 0}

/* Content boxes for definitions, notes */
.content blockquote{
  background:var(--surface);
  border-left:4px solid var(--primary);
  padding:1rem 1.25rem;
  border-radius:var(--radius);
  margin:1.5rem 0;
  color:var(--text);
  font-style:normal;
}
.content blockquote p:last-child{margin-bottom:0}

/* ===== CARDS ===== */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:18px;
}

@media(min-width:820px){
  .cards{grid-template-columns:1fr 1fr}
}

.card{
  display:block;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:transform .08s ease,border-color .08s ease;
}
.card:hover{
  text-decoration:none;
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--border) 35%, var(--primary));
}

.card-title{
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:6px;
  font-size:.95rem;
}

.card-summary{
  color:var(--muted);
  font-size:.88rem;
  line-height:1.5;
}

/* ===== RELATED ===== */
.related{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border);
}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:3rem;
}

.footer-inner{padding-top:18px;padding-bottom:24px}

.footer-links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
.footer-links a{color:var(--muted);font-size:.88rem;text-decoration:none}
.footer-links a:hover{color:var(--text)}

.small{font-size:.85rem}

/* ===== HOME ===== */
.home-hero{padding:8px 0 10px}
.home-title{font-family:var(--font-heading);font-size:2.2rem;font-weight:700;line-height:1.1;letter-spacing:-0.02em;margin:0 0 10px}
.home-tagline{color:var(--muted);margin:0 0 18px;font-size:1rem}
.home-actions{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 20px}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--primary);color:#fff;font-weight:600;font-size:.9rem;text-decoration:none}
.btn:hover{text-decoration:none;opacity:.9}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.home-section{margin-top:28px}
.section-title{font-family:var(--font-heading);font-weight:600;font-size:1.25rem;margin:0 0 12px;letter-spacing:-0.01em}

/* About block on homepage */
.about-block{background:var(--surface);border-radius:var(--radius);padding:1.5rem 1.75rem;margin-top:1.5rem;border:1px solid var(--border)}
.about-block p{margin:0.5rem 0;font-size:.92rem;color:var(--muted)}
.about-block a{color:var(--link)}

/* ===== SIDEBAR ===== */
.sidebox{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:14px;
}
.sidebox-title{font-weight:600;font-size:.9rem;margin-bottom:8px}
.sidelinks{margin:0;padding-left:18px}
.sidelinks li{margin:5px 0;font-size:.88rem}

/* TOC box */
.toc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:14px;
}
.toc .toc-body{font-size:.88rem;line-height:1.55}
.toc .toc-body ul{margin:6px 0 0 16px;padding:0}
.toc .toc-body li{margin:4px 0}
.toc .toc-body a{text-decoration:none;color:var(--muted)}
.toc .toc-body a:hover{color:var(--primary)}

/* ===== ADS ===== */
.adwrap{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:10px;margin:18px 0}
@media(min-width:1040px){
  .sidebar .adwrap{margin:0 0 14px}
}
.adplaceholder{min-height:180px}

/* ===== BREADCRUMBS ===== */
.breadcrumbs{margin:0 0 1rem;font-size:.88rem;color:var(--muted)}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.3rem}
.breadcrumbs li{display:inline-flex;align-items:center;gap:0.3rem}
.breadcrumbs li+li:before{content:"›";opacity:0.5;margin-right:0.2rem}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

/* ===== CONCEPT MAP ===== */
.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin:1.5rem 0}
.concept-hub{background:var(--surface);border-radius:var(--radius);padding:1.25rem 1.5rem;border:1px solid var(--border)}
.concept-hub h3{margin:0 0 0.5rem;font-size:1.05rem;font-weight:600}
.concept-hub h3 a{color:var(--text);text-decoration:none}
.concept-hub h3 a:hover{color:var(--primary)}
.hub-desc{font-size:.88rem;color:var(--muted);margin:0 0 0.75rem}
.concept-pages{list-style:none;padding:0;margin:0}
.concept-pages li{padding:0.2rem 0;font-size:.88rem}
.concept-pages li a{color:var(--link)}
.concept-pages .more{color:var(--muted);font-style:italic}
.concept-connections{margin-top:2rem}