/* khev-tools / design-expert — editorial system */

:root {
  --ink: #1a1815;
  --ink-soft: #423e38;
  --ink-mute: #6b655c;
  --ink-faint: #a8a195;
  --rule: #d6cfc1;
  --rule-soft: #e8e2d4;
  --paper: #f5f1ea;
  --paper-warm: #efe9dc;
  --paper-deep: #e8e1d0;
  --accent: oklch(72% 0.15 55);          /* warm amber-orange */
  --accent-deep: oklch(56% 0.13 55);
  --accent-mute: oklch(82% 0.07 55);
  --signal: oklch(48% 0.10 145);         /* moss, used once */

  --serif: "Source Serif 4", "GT Sectra", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Söhne", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, monospace;

  --max: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: 16px; line-height: 1.55; }

/* tight horizontal scroll guard */
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
a.link { border-bottom: 1px solid var(--rule); transition: border-color .15s; }
a.link:hover { border-color: var(--ink); }

/* ——— Type scale ——— */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 0.98;
  font-size: clamp(54px, 9vw, 132px);
  text-wrap: balance;
}
.display em {
  font-style: italic;
  color: var(--accent);
}
h3.section-title-sm {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 22ch;
}
h3.section-title-sm em { font-style: italic; color: var(--accent); }
.s-head.sm { padding: 24px 0 32px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.s-head.sm .num { padding-top: 6px; }
.s-head.sm .body { color: var(--ink-mute); font-size: 15px; max-width: 56ch; }

h2.section-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.02;
  font-size: clamp(40px, 5.4vw, 76px);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h3.sub {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  margin: 0 0 0.4em;
}
.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 32ch;
}
.body-lg {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}
.body { color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }
.note { color: var(--ink-mute); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; }

/* ——— Layout ——— */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vh, 160px) 0; position: relative; }
.section + .section { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }

/* hairline */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ——— Nav ——— */
nav.top {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(1.05);
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--rule);
}
nav.top .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
}
.brand {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.brand .slash { color: var(--accent); }
.brand .child { color: var(--ink-mute); }

/* Namespace switcher — round-trips between khev-tools/design-expert and khevin-mituti/portfolio */
.brand-switch {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  margin: -10px -12px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  min-height: 44px;
  transition: background 150ms;
}
.brand-switch:hover, .brand-switch:focus-visible {
  background: var(--rule-soft);
  outline: none;
}
.brand-switch .ns { color: var(--ink); }
.brand-switch .slash { color: var(--accent); margin: 0 1px; }
.brand-switch .child { color: var(--ink-mute); }
.brand-switch .chev {
  font-size: 14px;
  color: var(--ink-soft);
  margin-left: 6px;
  transition: transform 150ms cubic-bezier(0.16,1,0.3,1), color 150ms;
}
.brand-switch:hover .chev { color: var(--ink); }
.brand-switch[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  color: var(--ink);
}

/* `nav.top` qualifier raises specificity (0,2,2) over the generic
   `nav.top ul { display: flex }` rule (0,1,2) earlier in the file
   so the two namespace options stack vertically, matching the portfolio. */
nav.top ul.ns-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-width: 360px;
  box-shadow: 0 8px 32px -16px color-mix(in oklch, var(--ink) 16%, transparent);
  z-index: 60;
  display: block;
  gap: 0;
  flex-direction: column;
}
nav.top ul.ns-panel[hidden] { display: none; }
.ns-panel li[role="option"] {
  display: block;
  padding: 14px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 150ms;
}
.ns-panel li[role="option"]:hover,
.ns-panel li[role="option"]:focus-visible {
  background: var(--rule-soft);
  outline: none;
}
.ns-panel li[role="option"].current {
  background: color-mix(in oklch, var(--accent-mute) 30%, transparent);
}
.ns-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ns-row .mark { width: 12px; color: var(--accent-deep); font-size: 10px; }
.ns-row .slash { color: var(--accent); }
.ns-row .child { color: var(--ink-mute); }
.ns-desc {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 4px;
  margin-left: 20px;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .ns-panel { left: var(--gutter); right: var(--gutter); min-width: 0; }
}
nav.top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin-left: auto;
}
nav.top ul a:hover { color: var(--ink); }
nav.top .install {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
nav.top .install:hover { background: var(--ink); color: var(--paper); }

/* ——— Hero ——— */
.hero { padding: clamp(60px, 9vh, 130px) 0 clamp(70px, 10vh, 140px); position: relative; }
.hero .index {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: clamp(56px, 8vh, 120px);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-mute);
}
.hero .index a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--rule);
  padding-left: 10px;
  transition: color .15s, border-color .15s;
}
.hero .index a:first-child { border-left: 0; padding-left: 0; }
.hero .index a:hover { color: var(--ink); border-color: var(--ink); }
.hero .index .num { color: var(--ink); }

.hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 28px;
}
.hero-meta .pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mute);
  background: var(--paper);
}
.hero-meta .pill .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}

.hero .actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 36px;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .18s, color .18s, transform .18s;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { transform: translateY(-1px); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* "works with" strip */
.compat {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.compat .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compat .chip {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compat .chip .glyph {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-size: 11px;
  background: var(--paper-deep);
  color: var(--ink);
}
.compat .chip.muted { color: var(--ink-faint); }
.compat .chip.primary {
  color: var(--ink);
  background: var(--paper-warm);
  border: 0;
  padding: 8px 14px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
.compat .chip.primary .glyph {
  background: var(--accent);
  color: var(--paper);
  border-radius: 4px;
}
/* Clawd glyph — pixel-art mascot from PNG, no background, crisp pixels.
   Source PNG is 275×183 (≈3:2). We size by height and let width auto-scale,
   then nearest-neighbor render so the pixels stay sharp at small size. */
.compat .chip.primary .glyph.clawd {
  background: transparent;
  border-radius: 0;
  width: auto;
  height: 20px;
}
.compat .chip.primary .glyph.clawd img {
  height: 20px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

/* ——— Section header ——— */
.s-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  margin-bottom: clamp(40px, 6vh, 80px);
  align-items: start;
}
.s-head .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* ——— Foundation tablets ——— */
.found-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.found-grid .principle {
  grid-column: span 4;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.found-grid .principle .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 8px;
}
.found-grid .principle h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.found-grid .principle p { color: var(--ink-mute); font-size: 14.5px; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
  .found-grid .principle { grid-column: span 12; }
}

/* ——— Manifesto pull ——— */
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
.pull .accent { color: var(--accent); font-style: italic; }

/* ——— Commands ——— */
.cmd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-warm);
}
.cmd {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: background .15s;
}
.cmd:hover { background: var(--paper-warm); }
.cmd:nth-child(2n) { border-right: 0; }
.cmd:nth-last-child(-n+2) { border-bottom: 0; }
.cmd .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.cmd .num { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); padding-top: 8px; }
.cmd .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 8px; }
.cmd .slug {
  font-family: var(--mono);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.0;
  display: block;
  word-break: break-word;
}
.cmd .slug .slash { color: var(--accent); }
.cmd .slug .colon { color: var(--accent); }
.cmd h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
  color: var(--ink-mute);
}
.cmd p { font-size: 14.5px; color: var(--ink-mute); line-height: 1.5; margin: 0; max-width: 36ch; }
.cmd .ex {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .cmd-grid { grid-template-columns: 1fr; }
  .cmd { border-right: 0; border-bottom: 1px solid var(--rule) !important; }
  .cmd:last-child { border-bottom: 0 !important; }
}

/* ——— Case (the WHY) ——— */
.case-stack { display: grid; gap: clamp(48px, 8vh, 120px); }
.case-block { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.case-block .label { grid-column: span 3; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 14px; border-top: 1px solid var(--rule); }
.case-block .body-col { grid-column: span 6; }
.case-block .visual { grid-column: span 3; }
.case-block h3 { margin-top: 0; }

@media (max-width: 1000px) {
  .case-block .label, .case-block .body-col, .case-block .visual { grid-column: span 12; }
}

/* before/after cards */
.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.ba .card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px 20px;
  background: var(--paper);
  min-height: 200px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.ba .card .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ba .card.before { background: linear-gradient(135deg, #6b46c1, #ec4899 140%); color: white; }
.ba .card.before .tag { color: rgba(255,255,255,0.7); }
.ba .card.before h5 { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 700; margin: 0; }
.ba .card.before p { font-size: 13px; opacity: 0.85; margin: 0; }
.ba .card.before .fake-btn {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  background: linear-gradient(90deg, #fff, #e9d5ff); color: #6b46c1;
  font-size: 12px; font-weight: 600;
  margin-top: auto;
}
.ba .card.after { background: var(--paper); }
.ba .card.after .tag { color: var(--accent); }
.ba .card.after h5 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; margin: 0; line-height: 1.05; }
.ba .card.after h5 em { font-style: italic; color: var(--accent); }
.ba .card.after p { font-size: 13px; color: var(--ink-mute); margin: 0; }
.ba .card.after .fake-btn {
  font-family: var(--mono); font-size: 12px;
  border-bottom: 1px solid var(--ink); align-self: flex-start;
  padding-bottom: 1px; margin-top: auto;
}

/* slop gallery */
.slop-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px;
}
.slop-grid .tile {
  aspect-ratio: 4/3;
  border-radius: 8px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 12px;
}
.slop-grid .tile .cap {
  font-family: var(--mono);
  font-size: 11px;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.slop-grid .tile.t1 { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.slop-grid .tile.t2 { background: #fff; border: 1px solid #ddd; }
.slop-grid .tile.t2::before {
  content: ""; position: absolute; inset: 12px; border-radius: 6px;
  background: #fafafa; border: 1px solid #eee; border-left: 4px solid #8b5cf6;
}
.slop-grid .tile.t3 { background: #f0f0f0; }
.slop-grid .tile.t3::before {
  content: ""; position: absolute; inset: 14px; border-radius: 8px; background: white; border: 1px solid #e5e5e5;
}
.slop-grid .tile.t3::after {
  content: ""; position: absolute; inset: 28px; border-radius: 6px; background: #fafafa; border: 1px solid #eee;
}
.slop-grid .tile.t4 { background: #fff; }
.slop-grid .tile.t4::before {
  content: "Aa"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-size: 64px; font-weight: 700; color: #1a1a1a;
}

@media (max-width: 760px) {
  .slop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ——— Library files ——— */
.library {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: 32px;
}
.library-col {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.library-col .col-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.library .row-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
  transition: background .15s, color .15s;
  /* button reset — these rows are <button> for accessibility */
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.library .row-item:hover {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.library .row-item:hover .name {
  color: var(--accent);
}
.library .row-item:focus { outline: none; }
.library .row-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.library .row-item .icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.library .row-item .icon svg {
  width: 100%; height: 100%; display: block;
  overflow: visible;
}
.library .row-item .icon svg path,
.library .row-item .icon svg circle,
.library .row-item .icon svg rect {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.library .row-item .icon svg .draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset .9s cubic-bezier(.6,.1,.2,1);
}
.library .row-item .icon svg .pulse {
  opacity: 0;
  transform-origin: center;
  transition: opacity .35s .5s ease;
}
.library .row-item:hover .icon svg .draw,
.library .row-item.in-view .icon svg .draw {
  stroke-dashoffset: 0;
}
.library .row-item:hover .icon svg .pulse,
.library .row-item.in-view .icon svg .pulse {
  opacity: 1;
  animation: lib-pulse 1.6s ease-in-out infinite;
}
@keyframes lib-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.library .row-item .name {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
}
.library .row-item .name .slash {
  color: var(--accent);
}
.library .row-item .desc {
  /* Description lives in the popover only — hidden in the row by design. */
  display: none;
}
.library .row-item .tag {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); text-align: right;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.library .row-item:hover .tag {
  color: color-mix(in oklch, var(--accent) 70%, var(--ink-soft));
}

@media (max-width: 800px) {
  .library {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .library-col + .library-col {
    margin-top: 24px;
  }
  .library .row-item { grid-template-columns: 40px 1fr auto; gap: 12px; }
}

/* ——— Pantheon ——— */
.pantheon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.pantheon .figure {
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 26px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
  background: var(--paper);
  transition: background .15s;
  overflow: hidden;
  isolation: isolate;
  /* button reset — these cards are <button> for accessibility */
  font: inherit;
  color: inherit;
  text-align: inherit;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pantheon .figure:hover { background: var(--paper-warm); }
.pantheon .figure:focus { outline: none; }
.pantheon .figure:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pantheon .figure:nth-child(3n) { border-right: 0; }
.pantheon .figure > .squiggle {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 65%;
  height: 90%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 95%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 95%);
  transition: opacity .25s, transform .35s ease;
}
.pantheon .figure:hover > .squiggle {
  opacity: 0.85;
  transform: translateY(-50%) translateX(-4px);
}
.pantheon .figure > .squiggle svg {
  width: 100%; height: 100%; display: block;
}
.pantheon .figure > .squiggle path,
.pantheon .figure > .squiggle line,
.pantheon .figure > .squiggle circle,
.pantheon .figure > .squiggle rect {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body[data-theme="ink"] .pantheon .figure > .squiggle {
  mix-blend-mode: screen;
  opacity: 0.55;
}
body[data-theme="ink"] .pantheon .figure:hover > .squiggle { opacity: 0.85; }

.pantheon .figure .top,
.pantheon .figure h4,
.pantheon .figure .credo {
  position: relative;
  z-index: 1;
}
.pantheon .figure .top { display: flex; justify-content: space-between; align-items: baseline; }
.pantheon .figure .num { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.pantheon .figure .disc { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }
.pantheon .figure h4 {
  font-family: var(--serif); font-weight: 400; font-size: 30px;
  letter-spacing: -0.014em; margin: 0; line-height: 1.0;
}
.pantheon .figure h4 .first { color: var(--ink-mute); display: block; font-size: 18px; font-style: italic; }
.pantheon .figure .credo {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink-soft); line-height: 1.4;
  margin-top: auto;
  text-wrap: pretty;
}
.pantheon .figure .credo::before { content: "“"; color: var(--accent); margin-right: 2px; font-size: 22px; line-height: 0; vertical-align: -8px;}
.pantheon .figure .credo::after { content: "”"; color: var(--accent); margin-left: 2px; font-size: 22px; line-height: 0; vertical-align: -8px;}

@media (max-width: 900px) {
  .pantheon { grid-template-columns: 1fr 1fr; }
  .pantheon .figure:nth-child(3n) { border-right: 1px solid var(--rule); }
  .pantheon .figure:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .pantheon { grid-template-columns: 1fr; }
  .pantheon .figure { border-right: 0 !important; }
}

/* ——— Install ——— */
/* Install grid — single column. Each step is a hairline-divided
   sub-section, not a bordered card. Vertical reading, consistent
   shape across all three steps. */
.install-grid {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.install-card {
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  /* Cap line length — at very wide viewports the card stretches past
     a comfortable reading width and the right column dwarfs the left
     rail. 960px keeps the rail-to-body proportion balanced. */
  max-width: 960px;
}
.install-card:last-child {
  border-bottom: none;
}
.install-card__head {
  /* Left rail — step label + h4 + description */
  position: relative;
}
.install-card .step {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.14em; text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}
.install-card h4 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.014em; margin: 0 0 14px; line-height: 1.1;
  text-wrap: balance;
}
.install-card__head p {
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}
.install-card__body {
  /* Right column — the terminal lives here, no extra wrapping chrome */
  min-width: 0;
}
.terminal {
  background: #0e0c0a;
  color: #f1ede4;
  border: 1px solid #2d2922;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  position: relative;
  overflow: hidden;
}
.terminal .prompt { color: oklch(75% 0.10 55); }
/* Color inversion vs. the prior version: the slash-command itself
   (.cmd-text — `/plugin install`, `/design-expert:plan`) carries the
   orange accent so the reader's eye lands on the verb first; the
   following argument or URL (.accent-c) reads in plain terminal-white
   so the variable part feels neutral against the named command. */
.terminal .cmd-text { color: oklch(80% 0.17 55); }
.terminal .accent-c { color: #f1ede4; }
.terminal .comment { color: #8a8275; font-style: italic; }
.terminal .ok { color: oklch(75% 0.14 145); }
.terminal .head-bar {
  display: flex; gap: 6px; margin-bottom: 12px; opacity: 0.5;
}
.terminal .head-bar span {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.2);
}

/* Copy-to-clipboard button — sits in the top-right of the terminal,
   subtle by default, lights up on hover. Click → writes the command
   stored in the parent .terminal[data-cmd] to clipboard, swaps label
   to "Copied" briefly, returns to "Copy". */
.terminal-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(241, 237, 228, 0.55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms, background 150ms, border-color 150ms;
}
.terminal-copy:hover {
  color: oklch(80% 0.17 55);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.terminal-copy:focus { outline: none; }
.terminal-copy:focus-visible {
  outline: 2px solid oklch(80% 0.17 55);
  outline-offset: 2px;
}
.terminal-copy__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.terminal-copy__label { line-height: 1; }
.terminal-copy.is-copied {
  color: oklch(75% 0.14 145);
  background: rgba(125, 200, 130, 0.08);
  border-color: rgba(125, 200, 130, 0.3);
}

/* Terminal output — visually fused with the .terminal above it.
   Same dark surface, hairline separator at top to mark "this is the
   system response, not your input", muted body color so the eye reads
   the command as the primary surface. The green ✓ stays as the
   semantic accent.
   Implementation: round the terminal's bottom corners to 0 and the
   output's top corners to 0 so the two blocks read as one. */
.terminal {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.terminal-output {
  margin-top: 0;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(241, 237, 228, 0.55);
  background: #0e0c0a;
  border: 1px solid #2d2922;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.terminal-output .ok {
  color: oklch(75% 0.14 145);
  font-weight: 500;
  margin-right: 6px;
}
.terminal-output .output-line { color: rgba(241, 237, 228, 0.55); }

.placeholder {
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 16px;
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--rule-soft) 8px 9px);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute);
  text-align: center;
  letter-spacing: 0.04em;
}

/* iPad and smaller — every install card becomes full-width vertical
   so Step 01 and Step 02 stack the same way Step 03 already does. */
@media (max-width: 900px) {
  #install .install-grid { grid-template-columns: 1fr; }
  #install .install-card[style*="grid-column"] { grid-column: 1 / -1 !important; }
}

/* ——— Changelog ——— */
.changelog {
  margin-top: 40px;
}
.changelog .entry {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.changelog .entry .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.changelog .entry .meta .ver { color: var(--ink); display: block; font-size: 14px; margin-bottom: 4px; }
.changelog .entry ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; }
.changelog .entry li { margin-bottom: 8px; line-height: 1.5; }
.changelog .entry li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 700px) {
  .changelog .entry { grid-template-columns: 1fr; gap: 8px; }
}

/* ——— FAQ ———
   Editorial back-page treatment — numbered Q-and-A entries with a
   mono caption naming the concern, big serif question, indented
   serif answer. No accordion: at six entries totaling ~250 words,
   always-open reads faster than click-to-disclose. */
.faq-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.faq-entry {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 36px 0 36px;
  border-bottom: 1px solid var(--rule);
}
.faq-entry:last-child { border-bottom: 0; }
.faq-entry__num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  padding-top: 8px;
}
.faq-entry__cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.faq-entry__q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  text-wrap: balance;
  color: var(--ink);
}
.faq-entry__a {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.faq-entry__a .mono {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
}

@media (max-width: 760px) {
  .faq-entry {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 28px 0;
  }
  .faq-entry__num {
    padding-top: 0;
    font-size: 11px;
    color: var(--ink-mute);
  }
  .faq-entry__q { font-size: 22px; margin: 4px 0 10px; }
  .faq-entry__a { font-size: 15.5px; }
}

/* ——— Footer ——— */
footer.foot {
  padding: 10px 0;
  border-top: 1px solid #2d2922;
  background: #222222;
}
footer.foot .colophon {
  font-family: var(--mono); font-size: 11px; color: #8a8275;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ——— Density modes ——— */
body[data-density="generous"] .section { padding: clamp(120px, 18vh, 240px) 0; }
body[data-density="tight"] .section { padding: clamp(56px, 8vh, 100px) 0; }

/* ——— Theme: ink ——— */
body[data-theme="ink"] {
  --paper: #1a1815;
  --paper-warm: #211e1a;
  --paper-deep: #292520;
  --ink: #f1ede4;
  --ink-soft: #cac3b3;
  --ink-mute: #92897a;
  --ink-faint: #5a544a;
  --rule: #2d2922;
  --rule-soft: #221f1a;
  --accent: oklch(78% 0.16 55);
}
body[data-theme="ink"] .ba .card.after { background: var(--paper-warm); }

/* ——— Hide nav scroll on tiny ——— */
@media (max-width: 700px) {
  nav.top ul { display: none; }
}

/* subtle entry animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.fade-in { opacity: 1; animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }


/* ——— Hero thesis (merged from former §03) ——— */
.hero-thesis {
  margin-top: clamp(60px, 8vh, 96px);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid var(--rule);
}
.hero-thesis .thesis-rule {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 6px;
}
.hero-thesis .thesis-rule::before {
  content: "Thesis";
}
.hero-thesis .thesis-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero-thesis .pull {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.04;
}
.hero-thesis .body {
  margin: 6px 0 0;
  max-width: 44ch;
  font-size: 16px;
  color: var(--ink-mute);
}
@media (max-width: 900px) {
  .hero-thesis { grid-template-columns: 1fr; gap: 20px; }
  .hero-thesis .thesis-body { grid-template-columns: 1fr; gap: 24px; }
}

/* ——— Section header with art tile (sections 01 + 02) ——— */
.s-head.s-head--art {
  grid-template-columns: 80px 1fr 170px;
  gap: 18px;
  align-items: start;
}
.s-head--art .art {
  width: 170px;
  height: 170px;
  border: 1px solid var(--rule);
  background: var(--paper-warm, var(--paper));
  position: relative;
  overflow: hidden;
}
.s-head--art .art::after {
  content: attr(data-cap);
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.s-head--art .art svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 900px) {
  .s-head.s-head--art { grid-template-columns: 80px 1fr; }
  .s-head--art .art { display: none; }
}

/* ——— SVG animation: §01 Foundation — composing a layout ——— */
.foundation-art .grid-line {
  stroke: var(--ink-faint);
  stroke-width: 0.5;
  opacity: 0;
  animation: fa-grid-fade 1.6s ease-out 0.1s forwards;
}
.foundation-art .grid-line:nth-child(2) { animation-delay: 0.2s; }
.foundation-art .grid-line:nth-child(3) { animation-delay: 0.3s; }
.foundation-art .grid-line:nth-child(4) { animation-delay: 0.4s; }
.foundation-art .grid-line:nth-child(5) { animation-delay: 0.5s; }
@keyframes fa-grid-fade {
  to { opacity: 0.55; }
}
.foundation-art .draw {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: fa-draw 2.2s cubic-bezier(.55,.05,.2,.99) 0.6s forwards;
}
.foundation-art .draw.d2 { animation-delay: 1.0s; }
.foundation-art .draw.d3 { animation-delay: 1.4s; }
@keyframes fa-draw {
  to { stroke-dashoffset: 0; }
}
.foundation-art .text-block {
  fill: var(--ink);
  opacity: 0;
  animation: fa-fill 0.7s ease-out forwards;
}
.foundation-art .text-block.tb1 { animation-delay: 1.6s; }
.foundation-art .text-block.tb2 { animation-delay: 1.8s; }
.foundation-art .text-block.tb3 { animation-delay: 2.0s; }
.foundation-art .accent-mark {
  fill: var(--accent);
  opacity: 0;
  animation: fa-fill 0.5s ease-out 2.2s forwards;
}
@keyframes fa-fill {
  to { opacity: 1; }
}
.foundation-art .label {
  font-family: var(--mono);
  font-size: 6px;
  fill: var(--ink-faint);
  letter-spacing: 0.1em;
  opacity: 0;
  animation: fa-fill 0.5s ease-out 2.4s forwards;
}

/* loop the whole sequence */
.foundation-art {
  animation: fa-loop 9s infinite;
}
@keyframes fa-loop {
  0%, 75% { opacity: 1; }
  85%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* ——— SVG animation: §02 Commands — terminal cursor + slash sequence ——— */
.commands-art .term-frame {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 0.6;
  opacity: 0.4;
}
.commands-art .prompt {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--ink-mute);
}
.commands-art .slash {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--accent);
  font-weight: 600;
}
.commands-art .verb {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--ink);
}
.commands-art .line-row {
  opacity: 0;
}
.commands-art .line-row.r1 { animation: ca-row 8s linear infinite; }
.commands-art .line-row.r2 { animation: ca-row 8s linear infinite 2s; }
.commands-art .line-row.r3 { animation: ca-row 8s linear infinite 4s; }
.commands-art .line-row.r4 { animation: ca-row 8s linear infinite 6s; }
@keyframes ca-row {
  0%   { opacity: 0; transform: translateY(2px); }
  4%   { opacity: 1; transform: none; }
  22%  { opacity: 1; }
  26%  { opacity: 0.35; }
  100% { opacity: 0.35; }
}
.commands-art .cursor {
  fill: var(--accent);
  animation: ca-blink 1s steps(2) infinite;
}
@keyframes ca-blink {
  50% { opacity: 0; }
}
.commands-art .verb-char {
  opacity: 0;
}
/* type-on for the active row's verb chars */
.commands-art .r1 .verb-char { animation: ca-type 8s linear infinite; }
.commands-art .r2 .verb-char { animation: ca-type 8s linear infinite 2s; }
.commands-art .r3 .verb-char { animation: ca-type 8s linear infinite 4s; }
.commands-art .r4 .verb-char { animation: ca-type 8s linear infinite 6s; }
.commands-art .verb-char:nth-child(1) { animation-delay: 0s; }
@keyframes ca-type {
  0%, 4%   { opacity: 0; }
  10%      { opacity: 1; }
  22%, 100% { opacity: 1; }
}



/* ——— Hero title (squared grid behind headline) ——— */
.hero { overflow: hidden; }
.hero .shell { position: relative; }
.hero-title {
  position: relative;
  margin: 0 0 0 -32px;
  padding: 28px 32px 36px;
  isolation: isolate;
}
.hero-title .hero-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: rgba(255,255,255,0.10);
  pointer-events: none;
  opacity: 0;
  animation: hg-fade 1.2s ease-out .15s forwards;
}
@keyframes hg-fade { to { opacity: 1; } }
.hero-title h1.display {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 9.4vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-title h1 .l1 { display: block; }
.hero-title h1 .l1 em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--accent);
}
.hero-title h1 .l2 {
  display: block;
  padding-left: clamp(80px, 12vw, 160px);
  font-family: var(--serif);
  font-size: clamp(72px, 9.4vw, 132px);
  letter-spacing: -0.025em;
  color: var(--ink);
  font-weight: 400;
  line-height: 0.96;
}
.hero-title h1 .l2 .under {
  color: var(--ink);
  display: inline;
}
/* Tight variant — preserves the desktop "at your service." tuning
   that previously lived as inline overrides on the .l2 span. */
.hero-title h1 .l2.l2--tight {
  font-size: 103px;
  letter-spacing: -3.7px;
  line-height: 0.75;
  text-align: left;
  padding: 0 0 0 80px;
}
@media (max-width: 760px) {
  .hero-title { margin: 0; padding: 18px; }
  .hero-title h1 .l2 { padding-left: 0; }
  .hero-title h1 .l2.l2--tight {
    font-size: clamp(44px, 13vw, 64px);
    letter-spacing: -1.5px;
    line-height: 0.95;
    padding: 0;
    text-align: left;
  }
}

/* ——— Hero art tile (terminal sequence above body-lg) ——— */
.hero-art {
  width: 100%;
  max-width: 256px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.02);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.hero-art::after {
  content: attr(data-cap);
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ——— Hero copy (paired sentences, same size) ——— */
.hero-copy {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
  max-width: 38ch;
}

/* ——— Library popover (native <dialog>) ———
   Click any S·NN row → modal with the row's icon, name, description,
   plus an excerpt of the punchiest paragraph from the underlying
   markdown skill file, bracketed by typographic ellipses. */
.lib-pop {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(680px, 92vw);
  width: 100%;
  max-height: calc(100vh - 4rem);
  margin: auto;
  overflow: visible;
}
.lib-pop::backdrop {
  background: rgba(26, 24, 21, 0.55);
  backdrop-filter: blur(2px);
}
.lib-pop__card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 28px 32px 24px;
  box-shadow: 0 1px 2px rgba(20,18,14,0.06), 0 12px 32px rgba(20,18,14,0.10);
}
.lib-pop__close-form { margin: 0; }
.lib-pop__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.lib-pop__close:hover { color: var(--ink); background: color-mix(in oklch, var(--paper-warm) 70%, transparent); }
.lib-pop__close:focus { outline: none; }
.lib-pop__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lib-pop__head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: center;
  padding-right: 44px; /* clear of close button */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.lib-pop__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lib-pop__icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lib-pop__icon svg path,
.lib-pop__icon svg circle,
.lib-pop__icon svg rect {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lib-pop__icon svg .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
.lib-pop__icon svg .pulse { opacity: 1; animation: lib-pulse 1.6s ease-in-out infinite; }

.lib-pop__name {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.lib-pop__desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0;
}

.lib-pop__excerpt {
  padding: 22px 4px 18px;
}
.lib-pop__ell {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--ink-faint);
  text-align: center;
}
.lib-pop__ell + .lib-pop__snippet { margin-top: 14px; }
.lib-pop__snippet + .lib-pop__ell { margin-top: 14px; }
.lib-pop__snippet {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.lib-pop__snippet em { font-style: italic; }

.lib-pop__foot {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.lib-pop__brand { color: var(--accent); }

@media (max-width: 600px) {
  .lib-pop__card { padding: 22px 20px 18px; }
  .lib-pop__head { grid-template-columns: 48px 1fr; gap: 14px; padding-right: 40px; }
  .lib-pop__icon { width: 48px; height: 48px; }
  .lib-pop__name { font-size: 16px; }
  .lib-pop__desc { font-size: 13.5px; }
  .lib-pop__snippet { font-size: 15.5px; line-height: 1.5; }
  .lib-pop__foot { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-pop__icon svg .pulse { animation: none; opacity: 1; }
}

/* ——— Pantheon popover (extends .lib-pop) ———
   Adds a portrait slot rendered with a warm sepia treatment so a
   B&W or color photograph harmonizes with the page's ink-on-paper
   palette. A typographic monogram is the placeholder until photos
   are dropped into assets/design-gods/{key}.jpg. */
.lib-pop--god .lib-pop__card { max-width: min(680px, 92vw); }
.god-pop__layout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: start;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
.god-pop__portrait {
  width: 140px;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: #2c1f12;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.god-pop__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) sepia(0.55) brightness(0.92) contrast(1.05);
}
.god-pop__portrait .monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  color: #d8c2a3;
  background: linear-gradient(180deg, #4a3826 0%, #2c1f12 100%);
  user-select: none;
}
.god-pop__meta {
  padding-right: 44px; /* clear close button */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lib-pop--god .lib-pop__name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.05;
  margin: 0;
}
.god-pop__lifespan {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin: 4px 0 4px;
}
.god-pop__movement {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  margin: 6px 0 0;
  line-height: 1.4;
}
.god-pop__movement strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 1px;
}
.god-pop__tags {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 8px 0 0;
}
.god-pop__summary {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 22px 4px 18px;
  text-wrap: pretty;
}
.god-pop__quote {
  margin: 0 4px 22px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--accent);
}
.god-pop__quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 8px;
}
.god-pop__quote cite {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .god-pop__layout { grid-template-columns: 96px 1fr; gap: 16px; }
  .god-pop__portrait { width: 96px; }
  .god-pop__portrait .monogram { font-size: 38px; }
  .lib-pop--god .lib-pop__name { font-size: 22px; }
  .god-pop__summary { font-size: 15px; margin: 18px 0 16px; }
  .god-pop__quote p { font-size: 15.5px; }
}

/* ——— Hero row layout (desktop default) ———
   Replaces the previous inline grid-column styles so a media query
   can collapse the hero copy to full width on mobile. */
.hero-row .hero-col-text { grid-column: span 6; }
.hero-row .hero-col-art  { grid-column: 8 / span 5; }
.hero-copy {
  margin-top: 14px;
  color: var(--ink-soft);
}

/* ——— Install chip (Claude Code) as a real link ———
   Editorial register: typography stays, plus a small ↗ glyph hinting
   the chip navigates rather than just labels. */
.compat a.chip.primary {
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.compat a.chip.primary:hover {
  background: color-mix(in oklch, var(--paper-warm) 70%, var(--accent) 12%);
}
.compat a.chip.primary:focus { outline: none; }
.compat a.chip.primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.compat a.chip.primary .chip-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  margin-left: 2px;
  transition: transform .15s, color .15s;
}
.compat a.chip.primary:hover .chip-arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

/* ——— Mobile nav toggle (hamburger) ———
   Hidden on desktop; shown on mobile to expand the nav into a panel. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}
.nav-toggle:hover { background: var(--rule-soft); }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ——— Mobile breakpoint (≤760px) ———
   Hero copy spans full width; nav collapses behind a hamburger that
   reveals a panel; library descriptions hide; pantheon cards halve. */
@media (max-width: 760px) {
  /* Hero row collapses; both children span the full width. */
  .hero-row { grid-template-columns: 1fr; gap: 28px; }
  .hero-row .hero-col-text,
  .hero-row .hero-col-art { grid-column: 1 / -1; }

  /* Nav: hide the inline list, show the hamburger.
     When toggled open, render the list as an absolute dropdown panel
     anchored to the right edge of the nav, matching the namespace switcher. */
  .nav-toggle { display: inline-flex; }
  nav.top ul.nav-primary {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: var(--gutter);
    margin: 0;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20,18,14,0.06), 0 12px 32px rgba(20,18,14,0.10);
    flex-direction: column;
    gap: 0;
    min-width: 180px;
  }
  nav.top ul.nav-primary[data-open="true"] { display: flex; }
  nav.top ul.nav-primary li { width: 100%; }
  nav.top ul.nav-primary a {
    display: block;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-mute);
    border-radius: 4px;
    min-height: 44px;
    line-height: 1.6;
  }
  nav.top ul.nav-primary a:hover { color: var(--ink); background: var(--rule-soft); }

  /* Library mobile: tighter padding. The row-item grid is set in the
     800px-mobile rule near the row-item definition; description stays
     hidden via the desktop rule (display: none). */
  .library .row-item { padding: 16px 0; }

  /* Pantheon: compact card — no credo, halved min-height. */
  .pantheon .figure {
    min-height: 120px;
    padding: 18px 18px;
    gap: 8px;
  }
  .pantheon .figure .credo { display: none; }
  .pantheon .figure h4 { font-size: 22px; }
  .pantheon .figure h4 .first { font-size: 14px; }
  /* Squiggle shrinks so the compact card stays balanced. */
  .pantheon .figure > .squiggle {
    width: 50%;
    height: 80%;
    right: -10px;
  }
}