:root{
  --line:rgba(23,26,33,.09);
  --card:rgba(255,255,255,.5);
  --card-border:rgba(255,255,255,.7);
  --dir:#7c6cf0;
  --dir-glow:color-mix(in srgb, var(--dir) 35%, transparent);
}
html[data-theme="dark"]{
  --line:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.04);
  --card-border:rgba(255,255,255,.10);
  --dir-glow:color-mix(in srgb, var(--dir) 50%, transparent);
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px;
  backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  border-bottom:1px solid var(--line);
}
.nav a{ font-size:10.5px; letter-spacing:.12em; color:var(--muted); text-decoration:none; transition:color .2s ease; }
.nav a:hover{ color:var(--ink); }
.nav .trail{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav .sep{ opacity:.35; }
.nav .brand{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; letter-spacing:-.02em; font-size:14px; color:var(--ink); }
.nav .current{ font-size:10.5px; letter-spacing:.12em; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.nav .right{ display:flex; align-items:center; gap:12px; }
.nav .copy{ font-size:10px; letter-spacing:.1em; color:var(--muted); opacity:.66; }

.wrap{ max-width:960px; margin:0 auto; padding:104px 24px 120px; }

.hero{ display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; padding:24px 0 64px; }
.hero-icon{ width:200px; height:200px; filter:drop-shadow(0 18px 30px rgba(31,45,80,.18)) drop-shadow(0 10px 56px var(--dir-glow)); }
.hero-icon svg, .hero-icon img{ width:100%; height:100%; shape-rendering:geometricPrecision; }
.hero-text .num{ font-size:10.5px; letter-spacing:.18em; color:var(--muted); margin-bottom:16px; }
.hero-text h1{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(40px,7vw,64px); letter-spacing:-.025em; line-height:1; text-wrap:balance; }
.hero-text .tag{ margin-top:18px; font-size:13px; line-height:1.6; color:var(--muted); max-width:420px; }
.dir-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dir); margin-right:10px; box-shadow:0 0 16px var(--dir-glow); }

.sep-line{ height:1px; background:linear-gradient(to right, transparent, var(--line) 15%, var(--line) 85%, transparent); margin:48px 0; }

.block{ padding:8px 0; }
.block-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:24px; }
.block-head .n{ font-size:10.5px; letter-spacing:.18em; color:var(--muted); }
.block-head h2{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(26px,4vw,34px); letter-spacing:-.02em; text-wrap:balance; }

.prose{ font-family:"Golos Text", system-ui, sans-serif; font-size:17px; line-height:1.75; max-width:68ch; }
.prose p{ margin:0 0 1.1em; hyphens:auto; }
.prose h2{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:1.4em; letter-spacing:-.02em; margin:1.6em 0 .6em; }
.prose h3{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:1.15em; margin:1.4em 0 .5em; }
.prose ul{ margin:0 0 1.1em; padding-left:1.2em; display:grid; gap:.4em; }
.prose li::marker{ color:var(--dir); }
.prose a{ color:var(--dir); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{ margin:1.5em 0; padding:.2em 0 .2em 1.2em; border-left:2px solid var(--dir); color:var(--muted); font-style:italic; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{ padding:22px 20px; border-radius:16px; background:var(--card); border:1px solid var(--card-border); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); transition:transform .2s ease, background-color .2s ease; }
.step:hover{ transform:translateY(-3px); background:color-mix(in srgb, var(--card) 100%, var(--dir) 5%); }
.step .n{ font-size:10px; letter-spacing:.2em; color:var(--muted); margin-bottom:12px; }
.step h3{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:17px; letter-spacing:-.01em; margin-bottom:8px; }
.step p{ font-size:12px; line-height:1.55; color:var(--muted); }

.includes{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; }
.includes li{ background:var(--card); padding:16px 20px; font-size:13px; display:flex; align-items:center; gap:12px; }
.includes li::before{ content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--dir); box-shadow:0 0 10px var(--dir-glow); }

.cta{ padding:40px; border-radius:22px; background:var(--card); border:1px solid var(--card-border); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.cta h2{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(22px,3.2vw,30px); letter-spacing:-.02em; }
.cta p{ margin-top:8px; font-size:12.5px; color:var(--muted); max-width:46ch; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:11.5px; letter-spacing:.12em; text-decoration:none; transition:transform .2s ease, background-color .2s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); background:var(--dir); }
.btn::after{ content:"→"; transition:transform .2s ease; }
.btn:hover::after{ transform:translateX(3px); }

@media (max-width:880px){
  .hero{ grid-template-columns:1fr; gap:28px; text-align:center; justify-items:center; padding-bottom:48px; }
  .hero-icon{ width:170px; height:170px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .includes{ grid-template-columns:1fr; }
  .cta{ flex-direction:column; text-align:center; justify-items:center; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .wrap{ padding:88px 18px 100px; }
}

.page-head{ padding:24px 0 48px; }
.page-head h1{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(40px,7vw,60px); letter-spacing:-.025em; text-wrap:balance; }
.page-head p{ margin-top:14px; color:var(--muted); font-size:13px; line-height:1.6; max-width:52ch; }
.empty{ color:var(--muted); font-size:13px; padding:40px 0; text-align:center; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.chip{ font-size:9.5px; letter-spacing:.12em; color:var(--muted); border:1px solid var(--card-border); border-radius:999px; padding:3px 9px; }
.chip.dir{ color:var(--bg); background:var(--dir); border-color:transparent; }

.cover{ margin:8px 0 40px; padding:56px 24px; border-radius:24px; background:var(--card); border:1px solid var(--card-border); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); display:grid; place-items:center; }
.cover svg, .cover img{ width:min(320px,60%); height:auto; shape-rendering:geometricPrecision; filter:drop-shadow(0 24px 48px rgba(31,45,80,.20)) drop-shadow(0 12px 64px var(--dir-glow)); }

.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--card-border); border-radius:16px; overflow:hidden; margin:0 0 8px; }
.facts > div{ background:var(--card); padding:16px 20px; }
.facts dt{ font-size:9.5px; letter-spacing:.18em; color:var(--muted); margin-bottom:8px; }
.facts dd{ font-size:12.5px; line-height:1.5; }

.metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.metric{ padding:24px 22px; border-radius:16px; background:var(--card); border:1px solid var(--card-border); }
.metric .v{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(30px,4vw,42px); letter-spacing:-.02em; }
.metric .suf{ font-size:.5em; color:var(--dir); margin-left:4px; }
.metric .l{ margin-top:8px; font-size:11px; letter-spacing:.08em; color:var(--muted); }

.quote{ margin:8px 0; padding:28px 32px; border-radius:18px; background:var(--card); border:1px solid var(--card-border); font-family:"Golos Text", system-ui, sans-serif; font-size:19px; line-height:1.6; font-style:italic; }
.quote footer{ margin-top:14px; font-size:11px; letter-spacing:.1em; color:var(--muted); font-style:normal; }

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tile{ display:grid; gap:14px; padding:24px; border-radius:20px; background:var(--card); border:1px solid var(--card-border); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); text-decoration:none; color:var(--ink); transition:transform .2s ease, background-color .2s ease; }
.tile:hover{ transform:translateY(-4px); background:color-mix(in srgb, var(--card) 100%, var(--dir) 5%); }
.tile .scene{ height:180px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--dir) 8%, transparent); border:1px solid var(--card-border); }
.tile .scene svg, .tile .scene img{ width:120px; height:120px; shape-rendering:geometricPrecision; filter:drop-shadow(0 12px 24px var(--dir-glow)); }
.tile .year{ font-size:10px; letter-spacing:.18em; color:var(--muted); }
.tile h2{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:22px; letter-spacing:-.02em; }
.tile p{ font-size:12.5px; color:var(--muted); line-height:1.6; }
.tile .tags{ display:flex; gap:8px; flex-wrap:wrap; }

.posts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--card-border); border-radius:18px; overflow:hidden; }
.post-row{ display:grid; grid-template-columns:110px 1fr auto; gap:18px; align-items:baseline; padding:20px 24px; background:var(--card); text-decoration:none; color:var(--ink); transition:background-color .2s ease; }
.post-row:hover{ background:color-mix(in srgb, var(--card) 100%, var(--dir) 5%); }
.post-row time{ font-size:10px; letter-spacing:.14em; color:var(--muted); }
.post-row h2{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em; }
.post-row p{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.post-row .arr{ color:var(--muted); }

.layout{ display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; }
.toc{ position:sticky; top:88px; }
.toc .cap{ font-size:10px; letter-spacing:.18em; color:var(--muted); margin-bottom:14px; }
.toc ol{ list-style:none; display:grid; gap:10px; border-left:1px solid var(--line); padding-left:16px; }
.toc a{ font-size:11.5px; color:var(--muted); text-decoration:none; line-height:1.4; display:block; transition:color .2s ease; }
.toc a:hover, .toc a.active{ color:var(--ink); }

.post-head{ padding:8px 0 40px; }
.post-head h1{ font-family:"Expletus Sans", system-ui, sans-serif; font-weight:600; font-size:clamp(34px,5.4vw,52px); letter-spacing:-.025em; line-height:1.05; text-wrap:balance; }
.post-head .dek{ margin-top:16px; font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch; }
.byline{ margin-top:20px; display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); }
.avatar{ width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:9px; letter-spacing:.08em; }
.byline .dot{ opacity:.4; }

.progress{ position:fixed; top:0; left:0; right:0; height:2px; background:var(--dir, var(--ink)); transform-origin:0 50%; transform:scaleX(0); z-index:6; }
.top{ position:fixed; right:22px; bottom:22px; width:40px; height:40px; border-radius:50%; border:1px solid var(--card-border); background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--ink); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.top.show{ opacity:1; pointer-events:auto; }

@media (max-width:880px){
  .layout{ grid-template-columns:1fr; }
  .toc{ display:none; }
  .facts{ grid-template-columns:1fr 1fr; }
  .metrics{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .post-row{ grid-template-columns:1fr; gap:6px; }
  .post-row .arr{ display:none; }
}

/* optical centering for isometric art, scaled per size:
   88px -> +4px (base.css), 120px -> +5px, 200px -> +9px, 320px -> +14px */
.tile .scene svg, .tile .scene img{ margin-left:10px; }
.hero-icon svg, .hero-icon img{ margin-left:18px; }
.cover svg, .cover img{ margin-left:28px; }

.glossary{display:grid;gap:16px}
.term{padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--card-border)}
.term dt{font-family:"Expletus Sans",system-ui,sans-serif;font-weight:600;font-size:16px;margin-bottom:8px}
.term dd{font-size:13px;line-height:1.6;color:var(--muted)}

.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.3em; }
.prose th, .prose td{ border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; }
.prose th{ font-family:"JetBrains Mono", ui-monospace, monospace; font-size:10.5px; letter-spacing:.1em; color:var(--muted); background:var(--card); }
.prose td{ font-size:14.5px; line-height:1.55; }
.prose tr:first-child th{ border-top:none; }
@media (max-width:680px){
  .prose table{ display:block; overflow-x:auto; white-space:nowrap; }
}