/* ============================================================================
   CATALYST — v5 · "Bloom"  ·  catalyst-v5.css
   The chosen direction, baked in as the product default (layers over v3).
   Bloom = more watercolor on every surface · big soft line icons ·
   imagery-led · active nav in a soft painted well. Plus a long, scrollable
   Explore page with lots of options.
   ========================================================================== */

/* ── Bloom icon scale ──────────────────────────────────────────────────── */
.ic { width: 27px; height: 27px; stroke-width: 1.7; }
.nav .icw { width: 46px; height: 34px; }
.nav .icw .ic { width: 27px; height: 27px; }
.nav a { font-size: .6rem; }
.nav a.on .icw::before { inset: 0 2px; background: color-mix(in oklab, var(--pigment), var(--paper) 50%); }
:root.dark .nav a.on .icw::before { background: color-mix(in oklab, var(--pigment), transparent 52%); }
.nav a.create .ic { width: 32px; height: 32px; }

/* ── More watercolor: larger top wash (+ second bloom), stronger grain ──── */
.scr::after { height: 58%; background:
  radial-gradient(120% 80% at 20% 0%, color-mix(in oklab,var(--pigment),transparent 75%) 0%, transparent 62%),
  radial-gradient(92% 70% at 100% 16%, color-mix(in oklab,var(--pig-coral),transparent 84%) 0%, transparent 60%); }
:root.dark .scr::after { background:
  radial-gradient(120% 80% at 20% 0%, color-mix(in oklab,var(--pigment),transparent 70%) 0%, transparent 62%),
  radial-gradient(92% 70% at 100% 16%, color-mix(in oklab,var(--pig-coral),transparent 82%) 0%, transparent 60%); }
.scr::before { opacity: .8; }
.bau::after { opacity: .3; }
.feature .art { height: 200px; }      /* imagery leads */

/* ── Scroll behaviour (hidden scrollbars) ──────────────────────────────── */
.body.scroll-y { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.body.scroll-y::-webkit-scrollbar { display: none; }
.frame.tall { height: auto; min-height: 844px; }    /* show a long page in full */
.frame.tall .scr::after { height: 360px; }            /* keep the wash a top accent */

/* ════════════════════════════════════════════════════════════════════════
   EXPLORE — long, content-rich discovery page
   ════════════════════════════════════════════════════════════════════════ */
.search { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 15px;
  background: color-mix(in oklab,var(--paper),#fff 30%); border: 1px solid var(--hairline); color: var(--ink-faint); }
:root.dark .search { background: color-mix(in oklab,var(--paper),#fff 6%); }
.search .ic { width: 21px; height: 21px; stroke: var(--ink-faint); }
.search span { font: 500 .96rem/1 var(--font-ui); }

.cat-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 0 22px; }
.cat-row::-webkit-scrollbar { display: none; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em; margin: 0; }
.sec-head .all { font: 600 .8rem/1 var(--font-ui); color: var(--pigment); cursor: pointer; }

/* horizontal scroller of path cards */
.hrow { display: flex; gap: 13px; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 2px 22px 4px; }
.hrow::-webkit-scrollbar { display: none; }
.hrow .pcard { width: 168px; flex: none; }
.hrow .pcard.wide { width: 230px; }
.hrow .pcard .art { height: 122px; }

/* 2-col grid of path cards */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

/* collection / editorial banner — big imagery */
.collection { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); }
.collection .art { height: 168px; position: relative; }
.collection .scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(110deg, rgba(20,14,8,.5) 0%, rgba(20,14,8,.12) 70%); }
.collection .label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 4; color: #fff; }

/* browse-by-topic list */
.topic-list { display: flex; flex-direction: column; }
.topic-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; cursor: pointer; }
.topic-row + .topic-row { border-top: 1px solid var(--hairline); }
.topic-row .tic { width: 46px; height: 46px; border-radius: 14px; position: relative; overflow: hidden; flex: none; display: grid; place-items: center; }
.topic-row .tic .paint { position: absolute; inset: 0; z-index: 0; }
.topic-row .tic .ic { position: relative; z-index: 1; width: 23px; height: 23px; color: #fff; }
:root.dark .topic-row .tic .ic { color: #15181d; }
.topic-row .tn { flex: 1; }
.topic-row .tn .t { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.topic-row .tn .c { font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.topic-row .chevr { color: var(--ink-faint); }
.topic-row .chevr .ic { width: 20px; height: 20px; transform: rotate(-90deg); }

/* a soft painted divider between major explore sections */
.soft-div { height: 1px; background: var(--hairline); border: 0; margin: 2px 0; }

/* teacher row on featured */
.byline { display: inline-flex; align-items: center; gap: 8px; }
.byline .pf { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; position: relative; }