/* ============================================================
   TOKENS
============================================================ */
:root{
  --paper:       oklch(0.972 0.008 82);
  --paper-2:     oklch(0.945 0.012 82);
  --paper-3:     oklch(0.915 0.014 82);
  --ink:         oklch(0.185 0.010 50);
  --ink-2:       oklch(0.36 0.010 50);
  --ink-3:       oklch(0.55 0.008 50);
  --ink-4:       oklch(0.72 0.006 50);
  --rule:        oklch(0.86 0.010 80);
  --rule-2:      oklch(0.78 0.012 80);
  --accent:      oklch(0.52 0.210 26);
  --accent-deep: oklch(0.44 0.190 26);
  --accent-2:    oklch(0.93 0.05 32);
  --link:        oklch(0.42 0.09 245);
  --link-2:      oklch(0.86 0.04 245);
  --ok:          oklch(0.52 0.09 150);
  --warn:        oklch(0.58 0.10 75);
  --circuit-ink: oklch(0.86 0.010 80);

  --fs-display: clamp(2.5rem, 4.5vw, 4rem);
  --fs-h1:      clamp(2rem, 3vw, 2.75rem);
  --fs-h2:      1.625rem;
  --fs-h3:      1.125rem;
  --fs-body:    1.0625rem;
  --fs-meta:    0.8125rem;
  --fs-micro:   0.75rem;

  --serif: "Fraunces", "Georgia", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --page-x: clamp(24px, 4vw, 56px);
  --maxw:   1240px;
}

/* ============================================================
   BASE RESET
============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }
a{ color: var(--ink); text-decoration: none; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   MASTHEAD / HEADER
============================================================ */
.masthead{
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(1.1);
}
.masthead__row{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 68px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width: 48px; height: 32px; flex-shrink: 0;
}
.brand__mark img{ width: 100%; height: 100%; object-fit: contain; }
.brand__meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  margin-left: 4px;
  font-weight: 400;
}
@media (max-width:640px){ .brand__meta{ display:none; } }

.nav{
  display:flex; gap:2px; justify-content:center;
  font-size: 0.9375rem;
}
.nav a{
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  font-weight: 450;
  white-space: nowrap;
}
.nav a:hover{ color: var(--ink); background: var(--paper-2); }
.nav a.on{ color: var(--ink); background: var(--paper-3); }
.nav__sep{
  width:1px; align-self:stretch; margin: 8px 8px;
  background: var(--rule);
}
.nav__disabled{
  color: var(--ink-4);
  padding: 8px 12px;
  font-size: 0.9375rem;
  cursor: default;
  white-space: nowrap;
}
@media (max-width: 900px){ .nav{ display:none; } }

.tools{ display:flex; gap:8px; align-items:center; }
.search-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  background: var(--paper);
  transition: border-color .15s, color .15s;
  cursor: pointer;
}
.search-btn:hover{ border-color: var(--rule-2); color: var(--ink-2); }
.search-btn kbd{
  font: 11px/1 var(--mono);
  color: var(--ink-4);
  border: 1px solid var(--rule);
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--paper-2);
}
.hamburger{
  display:none;
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  align-items:center; justify-content:center;
  cursor: pointer;
}
.hamburger svg{ width:18px; height:18px; }
@media (max-width: 900px){ .hamburger{ display:inline-flex; } }

.nav-mobile{
  display:none;
  flex-direction:column;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 12px var(--page-x);
  gap: 4px;
}
.nav-mobile.open{ display:flex; }
.nav-mobile a, .nav-mobile .nav__disabled{
  display:block;
  padding: 10px 12px;
  color: var(--ink-2);
  border-radius: 4px;
  font-size: 1rem;
}
.nav-mobile a:hover{ background: var(--paper-2); color: var(--ink); }
.nav-mobile .nav__disabled{ color: var(--ink-4); }

/* ============================================================
   CONTAINERS
============================================================ */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-x);
}
.wrap--narrow{ max-width: 920px; }

/* ============================================================
   INDEX LABEL
============================================================ */
.ix{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display:inline-flex; align-items:center; gap:8px;
}
.ix::before{ content:""; width:22px; height:1px; background: currentColor; display:inline-block; }
.ix--plain::before{ display:none; }

/* ============================================================
   HERO
============================================================ */
.hero{
  padding: 72px 0 40px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 2px 2px, var(--circuit-ink) 1px, transparent 1.5px),
    linear-gradient(to right, transparent calc(100% - 1px), var(--circuit-ink) calc(100% - 1px));
  background-size: 48px 48px, 48px 100%;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);
}
.hero > .wrap{ position: relative; z-index: 1; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 72px;
  align-items: end;
}
@media (max-width: 960px){
  .hero{ padding: 40px 0 28px; }
  .hero__grid{ grid-template-columns: 1fr; gap: 40px; }
}
.hero__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 16px;
  max-width: 14ch;
}
.hero__title em{
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  position: relative;
}
.hero__title em::after{
  content:"";
  position: absolute;
  right: -14px; top: 50%;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--accent);
}
.hero__sub{
  max-width: 42ch;
  margin-top: 24px;
  font-size: 1.0625rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.hero__aside{
  border-left: 1px solid var(--rule);
  padding-left: 32px;
  padding-bottom: 8px;
}
@media (max-width: 960px){
  .hero__aside{ border-left: 0; padding-left:0; border-top: 1px solid var(--rule); padding-top: 32px; }
}
.hero__stats{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-bottom: 28px;
}
.stat{ border-right: 1px solid var(--rule); padding-right: 16px; }
.stat:last-child{ border-right:0; padding-right:0; }
.stat + .stat{ padding-left: 16px; }
#hero-result a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule2); padding-bottom: 1px; font-weight: 500; }
#hero-result a:hover{ border-bottom-color: var(--accent); }
#hero-result strong{ font-weight: 600; color: var(--ink); }
.stat__num{ font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stat__label{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 8px; }

.entries{
  margin-top: 48px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
  background: var(--paper);
}
@media (max-width: 860px){ .entries{ grid-template-columns: 1fr; } }
.entry{
  padding: 28px 26px 56px;
  display:block;
  position: relative;
  border-right: 1px solid var(--rule);
  transition: background .2s;
}
.entry:last-child{ border-right:0; }
@media (max-width: 860px){
  .entry{ border-right:0; border-bottom: 1px solid var(--rule); }
  .entry:last-child{ border-bottom:0; }
}
.entry:hover{ background: var(--paper-2); }
.entry--disabled{ pointer-events:none; opacity: 0.45; }
.entry__ix{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.entry__title{ font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; margin-top: 16px; color: var(--ink); }
.entry__hint{ margin-top: 12px; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; max-width: 32ch; }
.entry__arrow{ position:absolute; right: 22px; bottom: 22px; font-family: var(--serif); font-size: 1.5rem; color: var(--accent); transition: transform .2s; }
.entry::before{ content:""; position:absolute; top: 0; left: 0; width: 24px; height: 2px; background: var(--accent); }
.entry:hover .entry__arrow{ transform: translateX(4px); }

/* ============================================================
   SECTION
============================================================ */
.section{ padding: 72px 0; border-bottom: 1px solid var(--rule); }
.section--tight{ padding: 48px 0; }
.section--paper{ background: var(--paper-2); }
.section-head{
  display:flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
.section-head__l{ max-width: 60ch; }
.section-head h2{ font-family: var(--serif); font-weight: 400; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; margin-top: 14px; }
.section-head p{ color: var(--ink-2); margin-top: 16px; font-size: 1.0625rem; }
.section-head__r{
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  display:inline-flex; align-items:center; gap:8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--ink); white-space: nowrap;
}
.section-head__r:hover{ color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   TOPIC MATRIX
============================================================ */
.matrix{
  display:grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px){ .matrix{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .matrix{ grid-template-columns: 1fr; } }
.cell{
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 24px 64px;
  display:block;
  min-height: 180px;
  position: relative;
  transition: background .2s;
}
.cell:hover{ background: var(--paper-2); }
.cell__ix{ position:absolute; top:18px; right:20px; font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.cell::before{ content:""; position:absolute; top: 0; left: 0; width: 6px; height: 6px; background: var(--accent); transform: translate(-3px, -3px); transition: transform .2s, width .2s; }
.cell:hover::before{ width: 20px; transform: translate(0, -3px); }
.cell__kicker{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cell__title{ font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1.15; margin-top: 12px; color: var(--ink); }
.cell__desc{ color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; margin-top: 12px; max-width: 32ch; }
.cell__foot{
  position:absolute; bottom:18px; left:24px; right:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em;
}
.cell__count em{ font-style: normal; color: var(--ink); font-weight: 500; }

/* ============================================================
   CONCEPT STRIP
============================================================ */
.concept-strip{ display:flex; flex-wrap:wrap; gap: 10px 12px; }
.c-tag{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family: var(--serif); font-weight: 400; font-size: 1.0625rem;
  color: var(--ink);
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
  transition: background .15s, border-color .15s;
}
.c-tag:hover{ background: var(--paper-2); border-color: var(--rule-2); }
.c-tag--on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c-tag__ix{ font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.06em; }
.c-tag--on .c-tag__ix{ color: oklch(0.7 0.010 80); }

.alpha{ display:flex; flex-wrap:wrap; gap:4px; font-family: var(--mono); font-size: 12px; margin-bottom: 24px; }
.alpha a{ display:inline-flex; align-items:center; justify-content:center; min-width: 28px; padding: 4px 6px; color: var(--ink-3); border: 1px solid transparent; border-radius: 2px; }
.alpha a.on{ color: var(--ink); border-color: var(--rule); background: var(--paper); }
.alpha a:hover{ color: var(--ink); }
.alpha span{ color: var(--ink-4); padding: 4px 6px; }

/* ============================================================
   PATH CARDS
============================================================ */
.paths{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px){ .paths{ grid-template-columns: 1fr; } }
.path{
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 26px 90px;
  position: relative; min-height: 320px; display:block;
}
.path:hover{ background: var(--paper-2); }
.path__tag{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); display:flex; justify-content:space-between; }
.path__tag em{ font-style: normal; color: var(--ink-3); }
.path__title{ font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; margin-top: 14px; }
.path__desc{ color: var(--ink-3); font-size: 0.9375rem; line-height: 1.5; margin-top: 12px; }
.path__steps{ margin-top: 20px; font-size: 0.875rem; color: var(--ink-2); }
.path__step{ display:flex; gap:10px; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.path__step:last-child{ border-bottom:0; }
.path__step span:first-child{ font-family: var(--mono); font-size: 11px; color: var(--ink-4); min-width: 22px; }
.path__step--done span:first-child{ color: var(--accent); }
.path__step--done span:last-child{ color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.path__cta{
  position:absolute; bottom: 24px; left: 26px; right: 26px;
  display:flex; justify-content: space-between; align-items:center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.path__cta b{ font-weight: 500; color: var(--accent); font-family: var(--sans); font-size: 13px; letter-spacing:0; }

/* ============================================================
   FEED
============================================================ */
.feed{ border-top: 1px solid var(--rule); }
.feed__row{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px; padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
@media (max-width: 720px){
  .feed__row{ grid-template-columns: 48px 1fr; }
  .feed__row > :nth-child(3){ grid-column: 1 / -1; }
}
.feed__ix{ font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.06em; }
.feed__body h3{ font-family: var(--serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
a.feed__row:hover .feed__body h3{ color: var(--accent); }
.feed__meta{ display:flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 10px; }
.feed__meta em{ font-style: normal; color: var(--accent); }
.feed__desc{ margin-top: 10px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; max-width: 72ch; }
.feed__date{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em; }

/* ============================================================
   ASK BAR
============================================================ */
.ask{
  margin: 32px 0 0; padding: 20px 22px;
  border: 1px solid var(--rule); background: var(--paper);
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  border-radius: 2px; cursor: text;
  transition: border-color .15s;
}
.ask:hover{ border-color: var(--rule-2); }
.ask__label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-right: 1px solid var(--rule); padding-right: 16px; white-space: nowrap; }
.ask__label--btn{ background: none; border: 0; border-right: 1px solid var(--rule); padding: 0 16px 0 0; cursor: pointer; user-select: none; transition: opacity .15s; }
.ask__label--btn:hover{ opacity: 0.7; }
.ask input{ border: 0; outline: 0; background: transparent; width: 100%; font-size: 1rem; color: var(--ink); }
.ask input::placeholder{ color: var(--ink-4); }
.ask__hint{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 720px){
  .ask{ grid-template-columns: 1fr; gap: 10px; }
  .ask__label{ border-right:0; padding-right:0; }
}

/* ============================================================
   BREADCRUMB
============================================================ */
.crumbs{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; padding: 18px 0; display:flex; flex-wrap:wrap; gap: 6px; }
.crumbs a{ color: var(--ink-3); }
.crumbs a:hover{ color: var(--ink); }
.crumbs span[aria-current]{ color: var(--ink); }
.crumbs .sep{ color: var(--ink-4); }

/* ============================================================
   PAGE TITLE BLOCK
============================================================ */
.ptitle{ padding: 48px 0 40px; border-bottom: 1px solid var(--rule); }
.ptitle__kicker{ font-family: var(--mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.ptitle__ix{ color: var(--ink-4); padding-left: 10px; }
.ptitle h1{ font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.025em; margin-top: 18px; max-width: 20ch; }
.ptitle__lede{ margin-top: 24px; font-size: 1.125rem; color: var(--ink-2); max-width: 64ch; line-height: 1.55; }
.ptitle__split{ display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 32px; align-items: start; }
.ptitle__aside{ padding: 20px 24px; background: var(--paper-2); border-left: 3px solid var(--rule2); margin-top: 24px; }
.ptitle__aside ul{ list-style: none; padding: 0; margin: 0; }
.ptitle__aside li{ padding: 6px 0; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.ptitle__aside li:last-child{ border-bottom: 0; padding-bottom: 0; }
@media (max-width: 860px){ .ptitle__split{ grid-template-columns: 1fr; } .ptitle__aside{ border-left: 0; border-top: 3px solid var(--rule2); } }

/* ============================================================
   CONCEPT / 3-COLUMN CPAGE
============================================================ */
.cpage{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 56px; padding: 48px 0 64px; align-items: start;
}
@media (max-width: 1100px){
  .cpage{ grid-template-columns: 1fr 280px; gap: 40px; }
  .cpage > .toc{ display:none; }
}
@media (max-width: 820px){ .cpage{ grid-template-columns: 1fr; gap: 32px; } }

.toc{ position: sticky; top: 92px; font-size: 0.875rem; border-left: 1px solid var(--rule); padding-left: 18px; }
.toc__label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.toc ol{ counter-reset: toc; display:flex; flex-direction:column; gap: 3px; }
.toc a{ display:flex; gap: 10px; padding: 5px 0; color: var(--ink-3); line-height: 1.4; counter-increment: toc; }
.toc a::before{ content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex-shrink: 0; }
.toc a:hover{ color: var(--ink); }
.toc a.on{ color: var(--accent); }
.toc a.on::before{ color: var(--accent); }

.cbody section{ padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.cbody section:last-child{ border-bottom:0; }
.cbody h2{ font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 18px; display:flex; align-items:baseline; gap: 14px; }
.cbody h2::before{ content: attr(data-ix); font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.08em; min-width: 28px; }
.cbody p{ color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; max-width: 66ch; }
.cbody p + p{ margin-top: 14px; }
.cbody strong{ color: var(--ink); font-weight: 600; }

.prereq-list{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin-top: 6px; }
@media (max-width: 600px){ .prereq-list{ grid-template-columns: 1fr; } }
.prereq-item{ border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 18px; display:block; transition: background .2s; }
.prereq-item:hover{ background: var(--paper-2); }
.prereq-item__k{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.prereq-item__t{ font-family: var(--serif); font-size: 1.125rem; margin-top: 6px; color: var(--ink); }
.prereq-item__m{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.03em; }

.mrow{ display:grid; grid-template-columns: 40px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.mrow:last-child{ border-bottom:0; }
.mrow__ix{ font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.mrow__t{ font-family: var(--serif); font-size: 1.125rem; color: var(--ink); }
.mrow__m{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

.next{
  margin-top: 32px; padding: 24px 26px;
  background: var(--paper-2); border-left: 3px solid var(--accent);
  display:grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.next:hover{ background: var(--paper-3); }
.next__label{ font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.next__title{ font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; margin-top: 6px; }
.next__desc{ color: var(--ink-2); font-size: 0.9375rem; margin-top: 6px; max-width: 52ch; }
.next__arrow{ font-family: var(--serif); font-size: 2rem; color: var(--accent); }

.infobox{ position: sticky; top: 92px; border: 1px solid var(--rule); background: var(--paper); padding: 20px 22px; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.infobox h3{ font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; font-weight: 500; }
.infobox dl{ display:grid; gap: 14px; }
.infobox dt{ font-size: 10px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.infobox dd{ font-family: var(--sans); font-size: 0.9375rem; color: var(--ink); }
.infobox dd a{ color: var(--link); }
.infobox dd a:hover{ color: var(--accent); }
.infobox dd.row{ display:flex; flex-wrap: wrap; gap: 6px; }
.infobox__term{ font-family: var(--serif); font-size: 1.375rem; color: var(--ink); letter-spacing: -0.01em; }
.infobox__trans{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.02em; }
.infobox hr{ border:0; border-top: 1px dashed var(--rule); margin: 14px 0 0; }

.chip{ display:inline-block; padding: 3px 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); }
.chip--accent{ color: var(--accent); border-color: var(--accent); }
.chip--level-1{ color: var(--ok); border-color: var(--ok); }
.chip--level-2{ color: var(--link); border-color: var(--link); }
.chip--level-3{ color: var(--warn); border-color: var(--warn); }
.chip--solid{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   TOPIC PAGE
============================================================ */
.topic-meta{ display:grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 32px; }
@media (max-width: 720px){ .topic-meta{ grid-template-columns: repeat(2,1fr); } }
.topic-meta__item{ padding: 18px 20px; border-right: 1px solid var(--rule); }
.topic-meta__item:last-child{ border-right: 0; }
@media (max-width: 720px){
  .topic-meta__item:nth-child(2n){ border-right:0; }
  .topic-meta__item:nth-child(1),.topic-meta__item:nth-child(2){ border-bottom:1px solid var(--rule); }
}
.topic-meta__l{ font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.topic-meta__v{ font-family: var(--serif); font-size: 1.75rem; letter-spacing: -0.015em; margin-top: 8px; color: var(--ink); }
.topic-meta__s{ font-size: 0.875rem; color: var(--ink-3); margin-top: 2px; }

.start-here{
  padding: 28px 30px; background: var(--ink); color: var(--paper);
  display:grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  margin-top: 32px; position: relative; overflow: hidden;
}
.start-here::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, transparent 0 23px, oklch(0.28 0.01 50) 23px 24px, transparent 24px),
    linear-gradient(to bottom, transparent 0 23px, oklch(0.28 0.01 50) 23px 24px, transparent 24px),
    radial-gradient(circle at 24px 24px, var(--accent) 1.5px, transparent 2px);
  background-size: 24px 24px, 24px 24px, 48px 48px;
  opacity: 0.55; pointer-events: none;
}
.start-here > *{ position: relative; z-index: 1; }
.start-here__k{ font-family: var(--mono); font-size: 11px; color: var(--accent-2); letter-spacing: 0.08em; text-transform: uppercase; }
.start-here__t{ font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; margin-top: 10px; }
.start-here__m{ margin-top: 10px; font-family: var(--mono); font-size: 11px; color: oklch(0.82 0.010 80); letter-spacing: 0.05em; }
.start-here__btn{ display:inline-flex; align-items:center; gap: 10px; padding: 12px 18px; background: var(--paper); color: var(--ink); font-size: 0.9375rem; font-weight: 500; border-radius: 2px; }
.start-here__btn:hover{ background: var(--accent-2); }
@media (max-width: 640px){ .start-here{ grid-template-columns: 1fr; } }

.with-aside{ display:grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; padding: 48px 0 64px; align-items: start; }
@media (max-width: 900px){ .with-aside{ grid-template-columns: 1fr; gap: 32px; } }

.aside-nav{ position: sticky; top: 92px; border-left: 1px solid var(--rule); padding-left: 24px; }
.aside-nav__title{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.aside-nav ol{ display:flex; flex-direction:column; }
.aside-nav li a{ display:grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 8px 0; font-size: 0.9375rem; color: var(--ink-2); border-top: 1px solid var(--rule); align-items: baseline; }
.aside-nav li:last-child a{ border-bottom: 1px solid var(--rule); }
.aside-nav li a::before{ content: attr(data-ix); font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.aside-nav li a em{ font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }
.aside-nav li a:hover{ color: var(--ink); }
.aside-nav li a.on{ color: var(--accent); }
.aside-nav li a.on::before{ color: var(--accent); }

/* ============================================================
   CATALOG
============================================================ */
.catalog-top{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.catalog-count{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; }
.catalog-count em{ font-style: normal; color: var(--ink); font-weight: 500; font-size: 14px; }
.catalog-tools{ display:flex; gap: 12px; align-items:center; }
.view-toggle{ display:flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.view-toggle button{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-right: 1px solid var(--rule); }
.view-toggle button:last-child{ border-right: 0; }
.view-toggle button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.sort-select{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); padding: 6px 28px 6px 10px; border-radius: 2px; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23777' d='M2 4l3 3 3-3z'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
.chips-active{ display:flex; flex-wrap:wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.chip-active{ display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; }
.chip-active b{ color: var(--ink-3); font-weight:400; }
.chip-active__x{ width: 14px; height: 14px; display:inline-flex; align-items:center; justify-content:center; color: var(--ink-3); }
.chip-clear{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); padding: 5px 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.chip-clear:hover{ color: var(--accent); text-decoration-color: var(--accent); }

.catalog-layout{ display:grid; grid-template-columns: 180px minmax(0,1fr); gap: 40px; align-items: start; }
@media (max-width: 900px){ .catalog-layout{ grid-template-columns: 1fr; } }
.filters{ padding-right: 20px; border-right: 1px solid var(--rule); position: sticky; top: 92px; }
.filters h4{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 10px; }
.filters h4:first-child{ margin-top: 0; }
.filters label{ display:grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items:center; padding: 6px 0; font-size: 0.9375rem; color: var(--ink); cursor: pointer; }
.filters input[type=checkbox]{ width: 14px; height: 14px; accent-color: var(--accent); }
.filters label em{ font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.filters a.more{ display:inline-block; margin-top:6px; color:var(--ink-3); text-decoration:underline; text-underline-offset:4px; font-size:11px; font-family: var(--mono); }
.filter-more-wrap{ max-height: 18px; overflow: hidden; mask-image: linear-gradient(to bottom, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); transition: max-height .25s ease; }
.filter-more-wrap.open{ max-height: 9999px; mask-image: none; -webkit-mask-image: none; }
.filter-more-btn{ display:block; margin-top:6px; background:none; border:0; padding:0; font-family:var(--mono); font-size:11px; color:var(--accent); cursor:pointer; letter-spacing:0.04em; }

.cat-table{ width: 100%; border-collapse: collapse; }
.cat-table thead th{ text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.cat-table tbody tr{ border-bottom: 1px solid var(--rule); transition: background .15s; }
.cat-table tbody tr:hover{ background: var(--paper-2); }
.cat-table td{ padding: 14px 12px 14px 0; vertical-align: top; font-size: 0.9375rem; }
.cat-table .c-ix{ font-family: var(--mono); font-size: 12px; color: var(--ink-4); width: 56px; }
.cat-table .c-title{ font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); width: 38%; }
.cat-table .c-title a{ color: var(--ink); }
.cat-table .c-title a:hover{ color: var(--accent); }
.cat-table .c-title small{ display:block; color: var(--ink-3); font-family: var(--sans); font-size: 12px; margin-top: 4px; max-width: 46ch; }
.cat-table .c-meta{ color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.cat-table .c-chip{ width: 1%; white-space: nowrap; }

.cat-grid{ display:grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (max-width: 760px){ .cat-grid{ grid-template-columns: 1fr; } }
.mcard{ border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px; display:block; position: relative; }
.mcard:hover{ background: var(--paper-2); }
.mcard__top{ display:flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.mcard__t{ font-family: var(--serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; margin-top: 10px; color: var(--ink); letter-spacing: -0.01em; }
.mcard__d{ margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.mcard__foot{ margin-top: 16px; display:flex; gap: 8px; flex-wrap:wrap; }

/* ============================================================
   PATH STEPS
============================================================ */
.progress{ display:flex; align-items:center; gap: 16px; margin-top: 20px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.progress__bar{ flex: 1; height: 4px; background: var(--paper-3); border-radius: 2px; overflow:hidden; max-width: 320px; }
.progress__fill{ height: 100%; background: var(--accent); border-radius: 2px; }

.steps{ margin-top: 40px; counter-reset: step; }
.step{ display:grid; grid-template-columns: 100px 1fr 220px; gap: 32px; padding: 28px 0; border-top: 1px solid var(--rule); position: relative; align-items: start; }
.step:last-child{ border-bottom: 1px solid var(--rule); }
.step__ix{ font-family: var(--mono); font-size: 12px; color: var(--ink-4); letter-spacing: 0.08em; }
.step__ix b{ display:block; font-family: var(--serif); font-size: 2rem; color: var(--ink); margin-top: 4px; letter-spacing:-0.02em; font-weight:400; }
.step--done .step__ix b{ color: var(--ink-3); }
.step--current .step__ix b{ color: var(--accent); }
.step__body h3{ font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.step__body p{ margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; max-width: 52ch; }
.step__body .meta{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }
.step__side{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.step__side a{ display:inline-flex; align-items:center; gap: 8px; padding: 10px 14px; border: 1px solid var(--rule); color: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: 0; border-radius: 2px; }
.step--done .step__side a{ border-color: var(--ok); color: var(--ok); }
.step--current .step__side a{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step__side small{ display:block; margin-top: 8px; color: var(--ink-3); font-size: 11px; }
@media (max-width: 900px){
  .step{ grid-template-columns: 80px 1fr; }
  .step__side{ grid-column: 1 / -1; padding-left: 80px; }
}
@media (max-width: 560px){ .step__side{ padding-left: 0; } }

/* ============================================================
   ARTICLE (full text)
============================================================ */
.article{ padding: 40px var(--page-x) 64px; }
.article-grid{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 72px; align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.article-grid.is-no-toc,
.article-grid.is-reader{ grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.article-grid.is-reader .toc,
.article-grid.is-no-toc .toc{ display:none; }
@media (max-width: 900px){ .article-grid{ grid-template-columns: 1fr; gap: 40px; } .article-grid .toc{ display:none; } }
@media (max-width: 600px){ .article-body{ padding: 0; } }

.reader-toggle{ display:inline-flex; align-items:center; gap:8px; padding: 7px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); background: var(--paper); cursor: pointer; transition: border-color .15s, color .15s; margin-top: 14px; }
.reader-toggle:hover{ border-color: var(--ink); color: var(--ink); }
.reader-toggle svg{ width: 12px; height: 12px; }

.article-body{ font-family: var(--serif); font-weight: 400; max-width: 68ch; }
.article-grid.is-reader .article-body,
.article-grid.is-no-toc .article-body{ max-width: 72ch; margin: 0 auto; }
.article-body > .lead{ font-size: 1.375rem; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.article-body h2{ font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; margin: 44px 0 16px; display:flex; gap:14px; align-items:baseline; scroll-margin-top: 88px; }
.article-body h2::before{ content: attr(data-ix); font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; min-width: 28px; }
.article-body h3{ font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.2; margin: 28px 0 10px; scroll-margin-top: 88px; }
.article-body p{ font-size: 1.125rem; line-height: 1.65; color: var(--ink); margin-bottom: 14px; }
.article-body p strong{ font-weight: 600; }
.article-body blockquote{ margin: 24px 0; padding: 12px 0 12px 20px; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-2); font-size: 1.1rem; }
.article-body blockquote cite{ display:block; margin-top: 10px; font-family: var(--mono); font-size: 11px; font-style: normal; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.article-body ul{ margin: 10px 0 18px 0; }
.article-body ul li{ position: relative; padding-left: 24px; font-size: 1.125rem; line-height: 1.65; margin-bottom: 8px; color: var(--ink); }
.article-body ul li::before{ content:""; position:absolute; left: 0; top: 0.7em; width: 12px; height: 1px; background: var(--accent); }
.article-body a{ color: var(--link); border-bottom: 1px solid var(--link-2); text-decoration: none; }
.article-body a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.article-body table{ width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 1rem; }
.article-body table thead th{ text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 10px 16px; border-top: 1px solid var(--rule); border-bottom: 2px solid var(--rule2); }
.article-body table tbody tr{ border-bottom: 1px solid var(--rule); transition: background .15s; }
.article-body table tbody tr:hover{ background: var(--paper-2); }
.article-body table td{ padding: 12px 16px; vertical-align: top; line-height: 1.5; border-right: 1px solid var(--rule); }
.article-body table td:last-child{ border-right: 0; }
.article-body table thead th:last-child{ border-right: 0; }
.article-body table thead th{ border-right: 1px solid var(--rule); }

.pull{ margin: 36px 0; padding: 24px 26px 24px 48px; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); position: relative; }
.pull::before{ content:"«"; position:absolute; top: 8px; left: 14px; font-size: 3rem; color: var(--accent); font-family: var(--serif); line-height: 1; }

.article-appendix{ max-width: 780px; margin: 64px auto 0; padding-top: 48px; border-top: 2px solid var(--ink); display:grid; gap: 48px; }
.article-appendix__meta{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
@media (max-width: 720px){ .article-appendix__meta{ grid-template-columns: 1fr 1fr; } }
.amk{ font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; display:block; }
.amv{ font-family: var(--serif); font-size: 1rem; color: var(--ink); line-height: 1.4; }
.amv .chip{ margin: 2px 4px 2px 0; }

.article-foot{ margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); display:grid; gap: 24px; }
.byline{ display:grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items:center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.byline__av{ width: 48px; height: 48px; background: var(--accent); color: var(--paper); display:inline-flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
.byline__n{ font-family: var(--serif); font-size: 1.125rem; color: var(--ink); }
.byline__m{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.03em; }
.byline__cta{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 10px; border:1px solid var(--rule); }
.rq{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px){ .rq{ grid-template-columns: 1fr; } }
.rq a{ padding: 14px 16px; border:1px solid var(--rule); display:block; background: var(--paper); }
.rq a:hover{ background: var(--paper-2); }
.rq__k{ font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing:0.08em; text-transform:uppercase; }
.rq__t{ font-family: var(--serif); font-size: 1.125rem; margin-top: 4px; color: var(--ink); }

/* ============================================================
   VIDEO EMBED
============================================================ */
.video-embed{ position: relative; aspect-ratio: 16/9; background: var(--ink); margin-bottom: 1.5rem; overflow: hidden; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================
   FOOTER
============================================================ */
.foot{
  background: var(--ink);
  color: oklch(0.82 0.010 80);
  margin-top: 80px;
  padding: 56px 0 40px;
  position: relative; overflow: hidden;
}
.foot::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, transparent 0 31px, oklch(0.27 0.01 50) 31px 32px, transparent 32px),
    radial-gradient(circle at 32px 32px, var(--accent) 1.5px, transparent 2.5px);
  background-size: 32px 100%, 64px 64px;
  opacity: 0.5; pointer-events: none;
}
.foot > .wrap{ position: relative; z-index: 1; }
.foot__grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid oklch(0.32 0.012 60); }
@media (max-width: 820px){ .foot__grid{ grid-template-columns: 1fr 1fr; gap: 28px; } }
.foot__brand{ font-family: var(--sans); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); display:flex; align-items:center; gap: 12px; }
.foot__brand img{ width: 48px; height: 32px; object-fit: contain; }
.foot__tag{ margin-top: 10px; font-size: 0.9375rem; max-width: 36ch; line-height: 1.5; }
.foot h5{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.62 0.010 80); margin-bottom: 14px; font-weight: 500; }
.foot ul{ display:flex; flex-direction:column; gap: 8px; }
.foot a{ color: oklch(0.82 0.010 80); font-size: 0.9375rem; }
.foot a:hover{ color: var(--paper); }
.foot__bot{ padding-top: 20px; display:flex; justify-content:space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: oklch(0.62 0.010 80); }

/* ============================================================
   ASK MODAL
============================================================ */
.modal-overlay{ display:none; position:fixed; inset:0; z-index:200; background: oklch(0 0 0 / 0.6); align-items:center; justify-content:center; padding: 20px; }
.modal-overlay.active{ display:flex; }
.modal-box{ background: var(--paper); border: 1px solid var(--rule); max-width: 640px; width:100%; padding: 32px; }
.modal-title{ font-family: var(--serif); font-weight:400; font-size: 1.5rem; letter-spacing:-0.015em; margin-bottom: 8px; }
.modal-hint{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-bottom: 20px; }
.modal-textarea{ width:100%; border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; font-family: var(--serif); font-size: 1rem; resize: vertical; min-height: 100px; border-radius: 2px; outline:none; }
.modal-textarea:focus{ border-color: var(--ink); }
.modal-actions{ display:flex; gap:10px; margin-top:12px; }
.modal-submit{ padding: 10px 20px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: background .15s; }
.modal-submit:hover{ background: var(--accent); }
.modal-submit:disabled{ opacity:0.6; cursor:default; }
.modal-cancel{ padding: 10px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 2px; }
.modal-result{ margin-top:16px; font-size: 0.9375rem; line-height:1.65; }
.modal-result--loading{ color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.modal-result--error{ color: var(--accent); }
.modal-result--ok{ font-family: var(--serif); }

/* ============================================================
   UTILITIES
============================================================ */
.sep-v{ width:1px; background: var(--rule); align-self: stretch; }
.mt-16{ margin-top: 16px; }
.mt-24{ margin-top: 24px; }
.mt-32{ margin-top: 32px; }
.muted{ color: var(--ink-3); }
.mono{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.divider{ border:0; border-top: 1px solid var(--rule); margin: 32px 0; }

.author-tag{ display:inline-flex; align-items:center; padding: 3px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--paper); border-radius: 2px; }

.empty-state{ padding: 80px 0; text-align:center; font-family: var(--mono); color: var(--ink-3); font-size: 13px; letter-spacing: 0.04em; }
.empty-state__title{ font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-bottom: 12px; font-weight:400; }

/* Book cover */
.book-cover{ border: 1px solid var(--rule); max-width: 180px; display:block; margin-bottom: 1.25rem; }

/* Pagination */
.pager{display:flex;align-items:center;gap:16px;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:0.875rem;}
.pager__nums{display:flex;gap:4px;list-style:none;margin:0;padding:0;}
.pager__nums li{padding:4px 10px;border-radius:3px;}
.pager__nums li a{color:var(--ink-2);text-decoration:none;}
.pager__nums li a:hover{background:var(--paper-2);}
.pager__nums li.is-cur{background:var(--accent);color:#fff;}
.pager__gap{color:var(--ink-4);}
.pager__prev,.pager__next{color:var(--ink-2);text-decoration:none;}
.pager__prev:hover,.pager__next:hover{color:var(--accent);}
.pager__prev--off,.pager__next--off{color:var(--ink-4);cursor:default;}