/* ============================================================================
   CATALYST — Website  ·  pages.css
   Page-specific styles for the essay (Article) + path (Course) templates.
   Layers on top of home.css / watercolor.css / catalyst-v3.css.
   ========================================================================== */

/* a subtle painted ground for inner-page heroes */
.p-top{ position:relative; overflow:hidden; background:var(--paper); }
.p-top .h-field .b1{ --pig:var(--pig-indigo); opacity:.32; }
.p-top .h-field .b2{ --pig:var(--pig-plum); opacity:.24; }
.p-top .h-field .b3{ --pig:var(--pig-amber); opacity:.16; }
.p-top-in{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:clamp(34px,5vw,68px) var(--pad) clamp(28px,3vw,40px); }

.p-breadcrumb{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-faint); font-weight:500; }
.p-breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.p-breadcrumb a:hover{ color:var(--ink); }
.p-breadcrumb svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; transform:rotate(-90deg); opacity:.7; }

/* ── ESSAY ─────────────────────────────────────────────────────────────── */
.p-kicker{ font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pigment,var(--pig-indigo)); }
.p-title{ font-family:var(--font-display); font-weight:480; letter-spacing:-.022em; line-height:1.04;
  font-size:clamp(2.1rem,4.6vw,3.3rem); margin:16px 0 0; color:var(--ink); text-wrap:balance; }
.p-dek{ font-size:1.2rem; line-height:1.5; color:var(--ink-soft); margin:20px 0 0; max-width:54ch; text-wrap:pretty; }
.p-byline{ display:flex; align-items:center; gap:13px; margin-top:28px; }
.p-byline .av{ width:44px; height:44px; border-radius:50%; overflow:hidden; position:relative; flex:none; }
.p-byline .who{ font-weight:600; font-size:.95rem; }
.p-byline .who small{ display:block; color:var(--ink-faint); font-weight:500; margin-top:2px; }

.p-cover{ max-width:1000px; margin:clamp(20px,3vw,34px) auto 0; padding:0 var(--pad); }
.p-cover .art{ height:clamp(220px,34vw,420px); border-radius:24px; overflow:hidden; position:relative; box-shadow:0 34px 70px -42px rgba(28,20,10,.5); }

/* long-form prose */
.p-article{ max-width:680px; margin:0 auto; padding:clamp(36px,5vw,64px) var(--pad) clamp(20px,3vw,32px); }
.p-article > *{ margin:0; }
.p-article > * + *{ margin-top:1.45em; }
.p-article p{ font-size:1.18rem; line-height:1.72; color:color-mix(in oklab,var(--ink),transparent 6%); }
.p-article .lead{ font-size:1.34rem; line-height:1.6; color:var(--ink); }
.p-article .lead::first-letter{ font-family:var(--font-display); font-weight:560; font-size:3.6em; float:left; line-height:.78; padding:6px 12px 0 0; color:color-mix(in oklab,var(--pig-indigo),var(--ink) 30%); }
.p-article h2{ font-family:var(--font-display); font-weight:560; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.01em; line-height:1.16; margin-top:1.9em; }
.p-article h3{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; margin-top:1.7em; }
.p-article blockquote{ margin:1.7em 0; padding:6px 0 6px 26px; border-left:3px solid var(--pig-amber);
  font-family:var(--font-display); font-weight:440; font-style:italic; font-size:1.4rem; line-height:1.4; color:var(--ink); }
.p-article blockquote cite{ display:block; font-family:var(--font-ui); font-style:normal; font-weight:600; font-size:.86rem; color:var(--ink-faint); margin-top:12px; letter-spacing:.02em; }
.p-article a{ color:color-mix(in oklab,var(--pig-indigo),var(--ink) 24%); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.p-article strong{ font-weight:600; color:var(--ink); }
.p-article hr{ border:0; height:1px; background:var(--hairline); margin:2.4em 0; }
.p-pull{ font-family:var(--font-display); font-weight:480; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.28; letter-spacing:-.01em;
  color:color-mix(in oklab,var(--pig-indigo),var(--ink) 22%); margin:1.8em 0; text-wrap:balance; }

/* inline CTA card inside an essay */
.p-inline-cta{ max-width:680px; margin:clamp(34px,4vw,52px) auto; padding:0 var(--pad); }
.p-inline-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); display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.p-inline-cta .box .t{ flex:1; min-width:240px; }
.p-inline-cta .box h3{ font-family:var(--font-display); font-weight:560; font-size:1.45rem; margin:0; }
.p-inline-cta .box p{ margin:8px 0 0; color:var(--ink-soft); }

/* tags + share */
.p-end{ max-width:680px; margin:0 auto; padding:8px var(--pad) clamp(40px,5vw,64px); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.p-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.p-tag{ font-size:.8rem; font-weight:600; color:var(--ink-soft); background:color-mix(in oklab,var(--paper),#fff 30%);
  border:1px solid var(--hairline); padding:.45em .8em; border-radius:999px; text-decoration:none; }

/* related band reuses .h-essays-grid / .h-essay */
.p-related{ border-top:1px solid var(--hairline); }

/* ── PATH ──────────────────────────────────────────────────────────────── */
.p-path-grid{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(30px,4vw,52px) var(--pad) clamp(36px,4vw,56px); display:grid; grid-template-columns:1fr 360px; gap:clamp(30px,4vw,60px); align-items:center; }
.p-path-meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.p-pill{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.86rem; color:var(--ink-soft);
  background:color-mix(in oklab,var(--paper),#fff 30%); border:1px solid var(--hairline); padding:.5em .85em; border-radius:999px; }
.p-pill svg{ width:16px; height:16px; stroke:color-mix(in oklab,var(--pigment),var(--ink) 30%); stroke-width:1.8; fill:none; }
.p-path-cover{ position:relative; }
.p-path-cover .art{ aspect-ratio:4/5; border-radius:24px; overflow:hidden; position:relative; box-shadow:0 34px 70px -40px rgba(28,20,10,.5); }
.p-path-cover .art .topic-ic{ width:46px; height:46px; }
.p-path-cover .art .topic-ic .ic{ width:24px; height:24px; }
.p-teacher{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.p-teacher .av{ width:40px; height:40px; border-radius:50%; overflow:hidden; position:relative; flex:none; }
.p-teacher .who{ font-weight:600; font-size:.92rem; }
.p-teacher .who small{ display:block; color:var(--ink-faint); font-weight:500; }

.p-section{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad); }
.p-section.narrow{ max-width:760px; }
.p-learn{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; margin-top:24px; }
.p-learn li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); list-style:none; line-height:1.5; }
.p-learn .mk{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; margin-top:2px;
  background:color-mix(in oklab,var(--pigment),var(--paper) 74%); color:color-mix(in oklab,var(--pigment),var(--ink) 38%); }
.p-learn .mk svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.4; fill:none; }

/* day list */
.p-days{ display:flex; flex-direction:column; margin-top:8px; }
.p-day{ display:flex; gap:18px; padding:18px 4px; align-items:center; }
.p-day + .p-day{ border-top:1px solid var(--hairline); }
.p-day .idx{ width:46px; flex:none; font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums;
  font-size:1.6rem; color:var(--ink-faint); line-height:1; }
.p-day.free .idx{ color:color-mix(in oklab,var(--pigment),var(--ink) 26%); }
.p-day .b{ flex:1; }
.p-day .b .n{ font-family:var(--font-display); font-weight:600; font-size:1.16rem; line-height:1.2; }
.p-day .b .m{ font-size:.88rem; color:var(--ink-faint); margin-top:4px; }
.p-day .badge{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; flex:none;
  color:color-mix(in oklab,var(--pigment),var(--ink) 34%); background:color-mix(in oklab,var(--pigment),var(--paper) 78%);
  border:1px solid color-mix(in oklab,var(--pigment),transparent 70%); padding:.4em .7em; border-radius:999px; }
.p-day .glyph{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; border:1px solid var(--hairline); color:var(--ink-faint); }
.p-day .glyph svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; }
.p-day .glyph svg.fill{ fill:currentColor; stroke:none; }
.p-day.free .glyph{ background:color-mix(in oklab,var(--pigment),var(--ink) 26%); border-color:transparent; color:#fff; }

/* sample lesson card (reuses .h-day1 look) */
.p-sample{ background:color-mix(in oklab,var(--paper),var(--pig-indigo) 6%); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.p-sample-in{ max-width:760px; margin:0 auto; padding:clamp(40px,5vw,64px) var(--pad); }

/* sticky-ish enrol bar pieces reuse .h-tier */

@media (max-width:860px){
  .p-path-grid{ grid-template-columns:1fr; gap:28px; }
  .p-path-cover{ max-width:300px; }
  .p-learn{ grid-template-columns:1fr; }
  .p-article .lead::first-letter{ font-size:3em; }
}