:root{
  --bg:#f5f6f3;
  --surface:#ffffff;
  --surface-2:#eef0ec;
  --text:#1c1e1d;
  --text-muted:#5b625e;
  --border:#dcded9;
  --accent:#1a8a79;
  --accent-ink:#0f5c50;
  --accent-soft:#c8873a;
  --accent-soft-bg:#f7ecd9;
  --code-bg:#eceeea;
  --shadow: 0 1px 2px rgba(20,25,22,.06), 0 6px 20px rgba(20,25,22,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171a;
    --surface:#1b1f22;
    --surface-2:#20262a;
    --text:#eceeec;
    --text-muted:#9aa39d;
    --border:#2a3134;
    --accent:#3fc7b0;
    --accent-ink:#9fe9dd;
    --accent-soft:#e8b45c;
    --accent-soft-bg:#3a2f1c;
    --code-bg:#20262a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#14171a; --surface:#1b1f22; --surface-2:#20262a; --text:#eceeec;
  --text-muted:#9aa39d; --border:#2a3134; --accent:#3fc7b0; --accent-ink:#9fe9dd;
  --accent-soft:#e8b45c; --accent-soft-bg:#3a2f1c; --code-bg:#20262a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f5f6f3; --surface:#ffffff; --surface-2:#eef0ec; --text:#1c1e1d;
  --text-muted:#5b625e; --border:#dcded9; --accent:#1a8a79; --accent-ink:#0f5c50;
  --accent-soft:#c8873a; --accent-soft-bg:#f7ecd9; --code-bg:#eceeea;
  --shadow: 0 1px 2px rgba(20,25,22,.06), 0 6px 20px rgba(20,25,22,.05);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,"Hiragino Sans","Yu Gothic",sans-serif;
  line-height:1.75;
  font-size:16px;
}
h1,h2,h3,h4{
  font-family:Georgia,"Iowan Old Style","Hiragino Mincho ProN","Yu Mincho",serif;
  text-wrap:balance;
  color:var(--text);
  line-height:1.3;
}
a{ color:var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.layout{ display:flex; max-width:1240px; margin:0 auto; align-items:flex-start; }

/* ---- Top bar ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1240px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-text{ display:flex; flex-direction:column; gap:1px; }
.brand-text .mark{
  font-family:Georgia,serif; font-weight:700; font-size:1.05rem;
  color:var(--accent-ink); letter-spacing:.02em; white-space:nowrap;
}
.brand-text .sub{ font-size:.72rem; color:var(--text-muted); white-space:nowrap; }
.nav-toggle{
  display:none; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:8px; padding:8px 12px; font-size:.85rem; cursor:pointer;
  white-space:nowrap; flex:none;
}

/* ---- Sidebar ---- */
.sidebar{
  width:272px; flex:none; position:sticky; top:57px;
  height:calc(100vh - 57px); overflow-y:auto;
  padding:24px 16px 40px 24px;
  border-right:1px solid var(--border);
}
.sidebar nav ol{ list-style:none; margin:0; padding:0; counter-reset:chap; }
.sidebar nav > ol > li{ counter-increment:chap; margin-bottom:2px; }
.sidebar a.chap{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-radius:8px; font-size:.88rem; color:var(--text);
  text-decoration:none;
}
.sidebar a.chap:hover{ background:var(--surface-2); }
.sidebar a.chap::before{
  content: counter(chap, decimal-leading-zero);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.72rem; color:var(--text-muted); flex:none; padding-top:1px;
}
.sidebar a.chap.active{ background:var(--accent-soft-bg); color:var(--accent-ink); font-weight:600; }
.sidebar .sub-links{ list-style:none; margin:2px 0 10px 30px; padding:0; border-left:1px solid var(--border); }
.sidebar .sub-links li a{
  display:block; padding:4px 10px; font-size:.78rem; color:var(--text-muted); text-decoration:none;
}
.sidebar .sub-links li a:hover{ color:var(--accent-ink); }
.sidebar-footer{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-size:.72rem; color:var(--text-muted); }

/* ---- Main content ---- */
main{ flex:1; min-width:0; padding:40px clamp(20px,4vw,64px) 100px; }
.content{ max-width:700px; }

.cover{ margin-bottom:56px; }
.cover .kicker{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-soft);
  font-weight:600; margin:0 0 10px;
}
.cover h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 14px; }
.cover p.lead{ font-size:1.05rem; color:var(--text-muted); max-width:60ch; margin:0 0 20px; }
.meta-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem;
  padding:5px 12px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted);
  background:var(--surface);
}

.callout{
  border:1px solid var(--border); border-left:3px solid var(--accent-soft);
  background:var(--surface); border-radius:10px; padding:14px 18px; margin:20px 0;
  box-shadow:var(--shadow); font-size:.92rem; color:var(--text);
}
.callout strong{ color:var(--accent-soft); }
.callout.warn{ border-left-color:#c65b4e; }
.callout.warn strong{ color:#c65b4e; }

/* ---- Breadcrumb (visible, mirrors BreadcrumbList structured data) ---- */
.breadcrumb{ font-size:.78rem; color:var(--text-muted); margin:0 0 14px; }
.breadcrumb a{ color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent-ink); text-decoration:underline; }

.eyebrow{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:.78rem; color:var(--accent);
  letter-spacing:.04em; margin-bottom:6px;
}
.content > h1{ font-size:1.7rem; margin:0 0 6px; padding-bottom:14px; border-bottom:1px solid var(--border); }
h2{ font-size:1.28rem; margin:36px 0 10px; scroll-margin-top:70px; }
h3{ font-size:1.05rem; margin:26px 0 8px; color:var(--accent-ink); }
p{ margin:0 0 14px; }
ul,ol{ padding-left:1.3em; margin:0 0 16px; }
li{ margin-bottom:6px; }
li > ol, li > ul{ margin-top:6px; }

code, kbd{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.86em; background:var(--code-bg); padding:.15em .45em; border-radius:5px;
}
kbd{ border:1px solid var(--border); border-bottom-width:2px; }

blockquote.source{
  margin:14px 0 22px; padding:8px 14px; border-left:2px solid var(--border);
  font-size:.82rem; color:var(--text-muted);
}
blockquote.source a{ color:var(--text-muted); }

.table-wrap{ overflow-x:auto; margin:0 0 20px; border:1px solid var(--border); border-radius:10px; }
table{ border-collapse:collapse; width:100%; font-size:.9rem; min-width:420px; }
thead th{
  text-align:left; background:var(--surface-2); padding:10px 14px; font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{ padding:9px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
td, th{ font-variant-numeric:tabular-nums; }

.term{
  display:inline-block; font-weight:600; color:var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding:.05em .4em; border-radius:5px;
}

.glossary-grid{ display:grid; gap:4px 18px; }
.end-nav{
  margin-top:56px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; font-size:.9rem;
}
.end-nav a{ text-decoration:none; }
.back-top{
  position:fixed; right:28px; bottom:28px; width:42px; height:42px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none;
  font-size:1.1rem; opacity:.9;
}
.back-top:hover{ color:var(--accent-ink); }

@media (max-width: 880px){
  .nav-toggle{ display:inline-block; }
  .sidebar{
    position:fixed; inset:57px 0 0 0; width:100%; height:calc(100vh - 57px);
    background:var(--bg); transform:translateX(-100%); transition:transform .2s ease;
    z-index:30; padding:20px;
  }
  .sidebar.open{ transform:translateX(0); }
  main{ padding:28px 18px 80px; }
}

.chapter-banner{
  margin:40px 0 0; padding-top:20px; border-top:1px solid var(--border);
  display:flex; justify-content:center;
}
.chapter-banner a{ display:inline-block; line-height:0; border-radius:6px; overflow:hidden; }
.chapter-banner img{ display:block; max-width:100%; height:auto; }

/* ---- Hub page teaser cards (index.html) ---- */
.hub-teaser{
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  padding:20px 22px; margin:0 0 16px; box-shadow:var(--shadow);
}
.hub-teaser .eyebrow{ margin-bottom:4px; }
.hub-teaser h2{ margin:0 0 8px; font-size:1.25rem; scroll-margin-top:0; }
.hub-teaser p{ margin:0 0 10px; color:var(--text-muted); font-size:.94rem; }
.hub-teaser a.more{ font-size:.88rem; font-weight:600; text-decoration:none; }