/* ============================================================================
   CATALYST — Website  ·  extra.css
   Catalogue (paths) · Essays index · FAQ · Legal pages.
   Layers on home.css + pages.css.
   ========================================================================== */

/* generic inner-page header reuses .p-top / .p-top-in from pages.css */
.x-head-in{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(34px,5vw,64px) var(--pad) clamp(26px,3vw,38px); }
.x-head .p-title{ max-width:18ch; }
.x-head .p-dek{ max-width:50ch; }

/* ── filter chips ──────────────────────────────────────────────────────── */
.x-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.x-chip{ font-weight:600; font-size:.9rem; color:var(--ink-soft); text-decoration:none;
  background:color-mix(in oklab,var(--paper),#fff 30%); border:1px solid var(--hairline); padding:.55em .95em; border-radius:999px; transition:all .15s; }
.x-chip:hover{ color:var(--ink); border-color:color-mix(in oklab,var(--ink),transparent 70%); }
.x-chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ── PATHS catalogue ───────────────────────────────────────────────────── */
.x-cat{ max-width:var(--maxw); margin:0 auto; padding:clamp(34px,4vw,56px) var(--pad) clamp(40px,5vw,72px); }
.x-cat-group + .x-cat-group{ margin-top:clamp(40px,5vw,64px); }
.x-cat-group h2{ font-family:var(--font-display); font-weight:560; font-size:1.5rem; letter-spacing:-.01em; margin:0 0 20px;
  display:flex; align-items:center; gap:12px; }
.x-cat-group h2 .dot{ width:12px; height:12px; border-radius:50%; background:var(--pigment); filter:url(#wc-edge-soft); }
.x-paths{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.x-pcard{ display:flex; flex-direction:column; background:color-mix(in oklab,var(--paper),#fff 32%); border:1px solid var(--hairline);
  border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s; }
.x-pcard:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(28,20,10,.5); }
.x-pcard .art{ height:128px; position:relative; }
.x-pcard .b{ padding:15px 16px 18px; flex:1; display:flex; flex-direction:column; }
.x-pcard .t{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; line-height:1.18; letter-spacing:-.01em; }
.x-pcard .d{ font-size:.8rem; color:var(--ink-faint); margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:8px; }
.x-pcard .d .sep{ width:3px; height:3px; border-radius:50%; background:currentColor; display:inline-block; }
.x-pcard .lvl{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }

/* ── ESSAYS index (reuses .h-essays-grid / .h-essay) ───────────────────── */
.x-essays{ max-width:var(--maxw); margin:0 auto; padding:clamp(34px,4vw,56px) var(--pad) clamp(40px,5vw,72px); }
.x-essays .h-essays-grid{ row-gap:24px; }
.x-feature-essay{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--hairline); border-radius:24px; overflow:hidden; margin-bottom:32px;
  background:color-mix(in oklab,var(--paper),#fff 32%); text-decoration:none; color:inherit; transition:box-shadow .18s; }
.x-feature-essay:hover{ box-shadow:0 26px 52px -32px rgba(28,20,10,.5); }
.x-feature-essay .art{ min-height:280px; position:relative; }
.x-feature-essay .b{ padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; justify-content:center; }
.x-feature-essay .kicker{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pig-rose); }
.x-feature-essay h2{ font-family:var(--font-display); font-weight:520; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1; letter-spacing:-.015em; margin:14px 0 0; }
.x-feature-essay p{ color:var(--ink-soft); margin:14px 0 0; max-width:46ch; }
.x-feature-essay .read{ margin-top:22px; font-weight:600; color:color-mix(in oklab,var(--pig-rose),var(--ink) 30%); display:inline-flex; align-items:center; gap:8px; }
.x-feature-essay .read svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; }

/* ── FAQ accordion ─────────────────────────────────────────────────────── */
.x-faq{ max-width:820px; margin:0 auto; padding:clamp(34px,4vw,56px) var(--pad) clamp(48px,5vw,80px); }
.x-faq-group{ margin-bottom:clamp(28px,3vw,40px); }
.x-faq-group > h2{ font-family:var(--font-display); font-weight:560; font-size:1.3rem; margin:0 0 8px; color:var(--ink); }
.x-q{ border-bottom:1px solid var(--hairline); }
.x-q summary{ list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--font-display); font-weight:560; font-size:1.18rem; letter-spacing:-.01em; color:var(--ink); }
.x-q summary::-webkit-details-marker{ display:none; }
.x-q summary::after{ content:""; position:absolute; right:6px; top:26px; width:13px; height:13px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg); transition:transform .2s; }
.x-q[open] summary::after{ transform:rotate(-135deg); }
.x-q .a{ padding:0 44px 24px 0; color:var(--ink-soft); font-size:1.04rem; line-height:1.6; }
.x-q .a p{ margin:0; }
.x-q .a p + p{ margin-top:12px; }
.x-q .a a{ color:color-mix(in oklab,var(--pig-indigo),var(--ink) 24%); text-decoration:underline; text-underline-offset:3px; }
.x-faq-cta{ max-width:820px; margin:0 auto; padding:0 var(--pad) clamp(56px,6vw,90px); }
.x-faq-cta .box{ background:color-mix(in oklab,var(--paper),var(--pig-indigo) 7%); border:1px solid var(--hairline); border-radius:22px;
  padding:clamp(26px,3vw,38px); text-align:center; }
.x-faq-cta h3{ font-family:var(--font-display); font-weight:560; font-size:1.5rem; margin:0; }
.x-faq-cta p{ color:var(--ink-soft); margin:10px 0 20px; }

/* ── LEGAL ─────────────────────────────────────────────────────────────── */
.x-legal{ max-width:1040px; margin:0 auto; padding:clamp(30px,4vw,48px) var(--pad) clamp(48px,6vw,84px);
  display:grid; grid-template-columns:240px 1fr; gap:clamp(30px,4vw,64px); align-items:start; }
.x-legal-toc{ position:sticky; top:90px; }
.x-legal-toc h4{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px; }
.x-legal-toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; display:flex; flex-direction:column; gap:9px; }
.x-legal-toc a{ color:var(--ink-soft); text-decoration:none; font-size:.92rem; line-height:1.35; display:flex; gap:9px; }
.x-legal-toc a:hover{ color:var(--ink); }
.x-legal-toc a::before{ counter-increment:toc; content:counter(toc); color:var(--ink-faint); font-variant-numeric:tabular-nums; font-weight:600; flex:none; }
.x-legal-body{ min-width:0; max-width:680px; }
.x-legal-body h2{ font-family:var(--font-display); font-weight:560; font-size:clamp(1.4rem,2.4vw,1.8rem); letter-spacing:-.01em; margin:2em 0 0; scroll-margin-top:90px; }
.x-legal-body h2:first-child, .x-legal-body > *:first-child{ margin-top:0; }
.x-legal-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin:1.5em 0 0; }
.x-legal-body p, .x-legal-body li{ font-size:1.04rem; line-height:1.66; color:color-mix(in oklab,var(--ink),transparent 8%); }
.x-legal-body p{ margin:1em 0 0; }
.x-legal-body ul{ margin:1em 0 0; padding-left:1.2em; }
.x-legal-body li{ margin-top:.5em; }
.x-legal-body a{ color:color-mix(in oklab,var(--pig-indigo),var(--ink) 24%); text-decoration:underline; text-underline-offset:3px; }
.x-legal-body strong{ color:var(--ink); font-weight:600; }
.x-legal-body table{ width:100%; border-collapse:collapse; margin:1.4em 0 0; font-size:.92rem; }
.x-legal-body th, .x-legal-body td{ text-align:left; padding:11px 14px; border:1px solid var(--hairline); vertical-align:top; line-height:1.45; }
.x-legal-body th{ background:color-mix(in oklab,var(--paper),var(--pig-indigo) 6%); font-weight:600; color:var(--ink); }
.x-legal-lead{ font-size:1.16rem; line-height:1.6; color:var(--ink-soft); padding-bottom:1.4em; border-bottom:1px solid var(--hairline); }

@media (max-width:860px){
  .x-paths{ grid-template-columns:1fr 1fr; }
  .x-feature-essay{ grid-template-columns:1fr; }
  .x-feature-essay .art{ min-height:180px; }
  .x-legal{ grid-template-columns:1fr; }
  .x-legal-toc{ position:static; }
  .x-legal-toc ol{ display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:540px){
  .x-paths{ grid-template-columns:1fr 1fr; }
}