/* ============================================================
   THE ATLAS — View-specific styles
   ============================================================ */

/* ===================== HOME — cinematic hero (A2) ===================== */
.home-hero{
  position:relative; min-height:calc(100vh - var(--header-h));
  display:flex; flex-direction:column; justify-content:center;
  padding: 6vh clamp(20px,4vw,56px) 8vh; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0;
  background:#000 url('../assets/hero-portal.webp') center 38% / cover no-repeat; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.12) 30%,
    rgba(8,8,10,.28) 60%, var(--void) 100%); }
.hero-bg::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 42%, transparent 38%, rgba(8,8,10,.72) 100%); }
.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--content-max); margin:0 auto; }
.home-hero .eyebrow{ margin-bottom:var(--space-5); }
.hero-title{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size: clamp(2.8rem, 13vw, 12rem); line-height:.9; letter-spacing:.01em;
  color:var(--parchment); }
.hero-title .l2{ display:block; font-weight:300; color:var(--parchment); }
.hero-title em{ font-family:var(--font-serif); font-style:italic; text-transform:none;
  font-weight:400; color:var(--gold); text-shadow:0 0 60px var(--gold-glow); }
.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:clamp(24px,4vw,60px); margin-top:clamp(28px,5vh,64px); flex-wrap:wrap; }
.hero-thesis{ font-family:var(--font-body); font-weight:300; font-size:clamp(.98rem,1.4vw,1.2rem);
  color:var(--parchment-2); max-width:46ch; line-height:1.6; }
.hero-quote{ max-width:34ch; position:relative; padding-left:var(--space-5);
  border-left:1px solid var(--ink-700); }
.hero-quote .q{ font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.38; color:var(--parchment);
  transition: opacity 1.2s var(--ease-drift), transform 1.2s var(--ease-drift); }
.hero-quote .q.fade{ opacity:0; transform:translateY(8px); }
.hero-quote .attr{ display:block; margin-top:12px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); transition:opacity 1.2s; }
.hero-quote .attr.fade{ opacity:0; }
.hero-cta{ margin-top:var(--space-6); display:flex; gap:14px; flex-wrap:wrap; }
.hero-scroll{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--parchment-3); }
@media (max-width:680px){ .hero-quote{ border-left:none; padding-left:0; } }

.portals{ margin-top:var(--space-9); }
.portal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-4); }
.portal{
  position:relative; text-decoration:none; color:inherit; overflow:hidden;
  padding:var(--space-6) var(--space-5) var(--space-5); border-radius:var(--r-lg);
  border:1px solid var(--ink-700); background:var(--ink-900); min-height:220px;
  transition: transform .6s var(--ease-magnet), border-color .6s, box-shadow .6s, background .6s;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.portal:hover{ transform:translateY(-7px); background:var(--ink-800); border-color:var(--gold-600);
  box-shadow:var(--shadow-2), 0 0 36px var(--gold-glow); }
/* oversized numeral as a graphic element, bleeding off the corner */
.portal .p-num{ position:absolute; top:-.18em; right:.04em; font-family:var(--font-display);
  font-weight:300; font-size:clamp(4.5rem, 9vw, 7.5rem); line-height:1; letter-spacing:-.04em;
  color:var(--ink-700); opacity:.85; pointer-events:none;
  transition: color .6s var(--ease-rise), transform .6s var(--ease-magnet); }
.portal:hover .p-num{ color:var(--gold-600); opacity:.5; transform:translateY(4px); }
.portal .p-name{ font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2rem); font-weight:400;
  color:var(--parchment); letter-spacing:-.015em; position:relative; z-index:1; }
.portal .p-desc{ color:var(--parchment-2); font-size:.9rem; margin-top:8px; line-height:1.5; position:relative; z-index:1; }
.portal .p-arrow{ position:absolute; top:var(--space-5); right:var(--space-5); color:var(--gold);
  opacity:0; transform:translate(-6px,6px); transition:all .5s var(--ease-magnet); }
.portal:hover .p-arrow{ opacity:1; transform:none; }

.stats{ margin-top:var(--space-8); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4);
  border-top:1px solid var(--ink-700); padding-top:var(--space-7); }
.stat .num{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,6vw,4.6rem);
  color:var(--gold); line-height:.95; letter-spacing:-.03em; text-shadow:0 0 50px var(--gold-glow); }
.stat .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment-3); margin-top:10px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-6) var(--space-4); } }

.home-section{ padding: var(--space-9) 0 var(--space-8); }
/* heavier, more deliberate reveal for home sections (weight + inertia) */
.home-section .reveal{ transition-duration: 1.1s; transition-timing-function: var(--ease-drift); }
.home-section .section-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--space-5); margin-bottom:var(--space-7); flex-wrap:wrap; }
.home-section .section-head .h2{ font-size:clamp(2rem,4vw,3.2rem); }
/* asymmetric section heads: title pulled left, link drifts right with whitespace */
.home-section .section-head > div{ max-width:28ch; }
.home-section .section-head .seeall{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); text-decoration:none; white-space:nowrap; }
.home-section .section-head .seeall:hover{ color:var(--gold-100); }

/* ===================== REVELATIONS GALLERY ===================== */
.rev-card{ text-align:center; padding-top:var(--space-6); }
.rev-card .sigil-frame{ margin-bottom:var(--space-5); }
.rev-card .card-eyebrow{ color:var(--gold); }
.rev-card .card-title{ font-size:1.4rem; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.rev-card .card-body{ color:var(--parchment-2); }

/* ===================== REVELATION DETAIL ===================== */
.rev-detail .rev-hero{ display:grid; grid-template-columns: 1fr auto; gap:var(--space-7);
  align-items:start; padding-top:var(--space-6); }
.rev-detail .rev-claim{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em;
  text-transform:uppercase; font-size: clamp(2rem, 5vw, 3.8rem); line-height:.98; color:var(--parchment); max-width:18ch; }
.rev-detail .rev-essence{ margin-top:var(--space-5); font-size:var(--t-lead); color:var(--parchment-2);
  font-weight:300; max-width:54ch; }
.rev-detail .rev-sigil{ flex-shrink:0; }
@media (max-width:840px){ .rev-detail .rev-hero{ grid-template-columns:1fr; }
  .rev-detail .rev-sigil{ order:-1; } }

/* Embodying practices, grouped by category (A3) */
.prac-cat-groups{ display:flex; flex-direction:column; gap:var(--space-6); }
.prac-cat-head{ display:flex; align-items:center; gap:14px; margin-bottom:var(--space-4); }
.prac-cat-head .pcg-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--teal); border:1px solid var(--teal-600);
  padding:5px 12px; border-radius:var(--r-pill); }
.prac-cat-head .pcg-count{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--parchment-3); }
.prac-cat-head::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--ink-700), transparent); }

.voices-thread{ display:flex; flex-direction:column; gap:0; }
.voice-echo{ position:relative; padding:var(--space-5) 0 var(--space-5) var(--space-6);
  border-left:1px solid var(--ink-700); margin-left:6px; }
.voice-echo::before{ content:""; position:absolute; left:-5px; top:var(--space-6); width:10px; height:10px;
  border-radius:50%; background:var(--ink-900); border:1px solid var(--gold-600); box-shadow:0 0 0 0 var(--gold-glow);
  transition:box-shadow .6s, background .6s; }
.voice-echo.in::before{ background:var(--gold); box-shadow:0 0 16px var(--gold-glow); }
.voice-echo .ve-name{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:8px; }
.voice-echo .ve-text{ font-family:var(--font-serif); font-weight:300; font-style:italic;
  font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.45; color:var(--parchment); }

/* ===================== PRACTICES ===================== */
.cat-block{ margin-bottom:var(--space-8); }
.practice-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.detail-grid{ display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:var(--space-7); align-items:start; }
@media (max-width:960px){ .detail-grid{ grid-template-columns:1fr; } }
.aside{ position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:var(--space-5); }
.aside-card{ background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-lg); padding:var(--space-5); }
.aside-card h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--space-4); }
.aside-card .aside-list{ display:flex; flex-direction:column; gap:10px; }
/* "Explore further" — external resources as a clean clickable list (no cards).
   Stacked: a small source eyebrow over a full-width title, so titles never squish. */
.res-list{ display:flex; flex-direction:column; }
.res-row{ display:flex; align-items:center; gap:12px; padding:13px 10px; margin:0 -10px;
  border-radius:var(--r-md); border-bottom:1px solid var(--ink-700); text-decoration:none; transition:.16s; }
.res-row:last-child{ border-bottom:none; }
.res-row:hover{ background:var(--ink-800); }
.res-row .rr-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.res-row .rr-k{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.res-row.primary .rr-k{ color:var(--gold); }
.res-row .rr-star{ color:var(--gold); font-size:8.5px; letter-spacing:.08em; }
.res-row .rr-t{ color:var(--parchment); font-size:15px; line-height:1.35; }
.res-row:hover .rr-t{ color:var(--gold-100); }
.res-row .rr-go{ flex:none; color:var(--parchment-4); transition:color .2s; }
.res-row:hover .rr-go{ color:var(--teal); }
.res-row.primary:hover .rr-go{ color:var(--gold); }
/* pills inside the narrow aside must wrap long titles, never clip (bugfix) */
.aside-card .chip-row{ gap:8px; }
.aside-card .chip-row .pill{ white-space:normal; max-width:100%; height:auto; line-height:1.35;
  align-items:flex-start; text-align:left; word-break:break-word; }
.aside-card .chip-row .pill .dot{ margin-top:.4em; flex-shrink:0; }
.aside-card .kv{ display:flex; justify-content:space-between; gap:14px; padding:8px 0;
  border-bottom:1px solid var(--ink-700); }
.aside-card .kv:last-child{ border-bottom:none; }
.aside-card .kv .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--parchment-3); }
.aside-card .kv .v{ font-size:.9rem; color:var(--parchment); text-align:right; }
.safety-note{ background:rgba(199,91,57,.07); border:1px solid rgba(199,91,57,.3); border-radius:var(--r-md);
  padding:14px 16px; font-size:.9rem; color:var(--parchment-2); line-height:1.55; }
.safety-note .s-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ember); display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.safety-note .s-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px rgba(199,91,57,.6); }

/* ===================== VOICES ===================== */
/* sticky filter bar so navigation stays reachable through the long list */
.voice-filter-bar{ position:sticky; top:var(--header-h); z-index:20; margin-bottom:var(--space-7);
  padding:var(--space-4) 0; background:linear-gradient(180deg, var(--void) 70%, transparent);
  display:flex; flex-direction:column; gap:var(--space-4); }
.voice-filter-bar .chip-row{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:wrap; }
@media(max-width:680px){
  .voice-filter-bar{ padding:12px 0; gap:10px; }
  .voice-filter-bar .chip-row{ flex-wrap:nowrap; padding-bottom:4px; }
  .voice-filter-bar .chip{ flex:0 0 auto; }
}
/* back-to-top floating control */
.back-to-top{ position:fixed; bottom:24px; right:20px; z-index:40; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--gold-600); background:rgba(8,8,10,.9); color:var(--gold);
  font-size:20px; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none;
  transition:all .4s var(--ease-rise); box-shadow:var(--shadow-2); backdrop-filter:blur(8px); }
.back-to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ background:var(--gold); color:var(--void); }

/* ---------- The Listening Room ---------- */
.listen-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-5); margin-top:var(--space-6); }
.listen-teacher{ border:1px solid var(--ink-700); border-radius:var(--r-lg); background:var(--ink-900); padding:var(--space-5); }
.listen-teacher .lt-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:var(--space-4); padding-bottom:12px; border-bottom:1px solid var(--ink-700); }
.listen-teacher .lt-name{ font-family:var(--font-display); font-size:1.15rem; color:var(--parchment); font-weight:400; flex:1; }
a.lt-name:hover{ color:var(--teal); }
.listen-teacher .lt-count{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--parchment-3); }
.lt-links{ display:flex; flex-direction:column; gap:8px; }
.media-link{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-md); border:1px solid transparent;
  transition:background var(--dur-quick) var(--ease-drift), border-color var(--dur-quick) var(--ease-drift); }
.media-link:hover{ background:var(--ink-800); border-color:var(--ink-700); }
.media-link .ml-thumb{ flex:none; width:68px; height:44px; border-radius:6px; overflow:hidden; background:var(--ink-800); }
.media-link .ml-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-link .ml-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.media-link .ml-type{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.media-link .ml-title{ font-family:var(--font-body); font-size:.92rem; color:var(--parchment-2); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.media-link:hover .ml-title{ color:var(--parchment); }
.media-link .ml-arrow{ flex:none; color:var(--parchment-3); font-size:13px; }
.listen-texts{ margin-top:var(--space-8); }
#type-chips{ margin-top:var(--space-4); }

/* ---------- Start Here (guided on-ramp) ---------- */
.start-view .start-step{ margin-top:var(--space-8); }
.start-view .start-note{ font-family:var(--font-body); color:var(--parchment-2); font-size:var(--t-body); line-height:1.6; max-width:60ch; margin-bottom:var(--space-5); }
.start-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); }
.start-card{ position:relative; display:block; padding:var(--space-6) var(--space-5) var(--space-5); border:1px solid var(--ink-700);
  border-radius:var(--r-lg); background:var(--ink-900); transition:border-color var(--dur-base) var(--ease-drift), transform var(--dur-base) var(--ease-magnet); }
.start-card:hover{ border-color:var(--gold-600); transform:translateY(-3px); }
.start-num{ position:absolute; top:-14px; left:18px; width:30px; height:30px; border-radius:50%; background:var(--abyss);
  border:1px solid var(--gold-600); color:var(--gold); font-family:var(--font-mono); font-size:13px;
  display:flex; align-items:center; justify-content:center; }
.start-card .card-title{ font-family:var(--font-display); font-size:1.25rem; color:var(--parchment); margin:6px 0; font-weight:400; }
.start-desc{ font-family:var(--font-body); color:var(--parchment-2); font-size:.96rem; line-height:1.55; }
.start-go{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.start-path{ display:block; padding:var(--space-6); border:1px solid var(--ink-700); border-radius:var(--r-lg); background:var(--ink-900);
  transition:border-color var(--dur-base) var(--ease-drift), transform var(--dur-base) var(--ease-magnet); }
.start-path:hover{ border-color:var(--teal-600); transform:translateY(-3px); }
.start-path .card-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--parchment); margin:8px 0; font-weight:400; }
.start-links{ font-family:var(--font-body); font-size:var(--t-lead); line-height:2; color:var(--parchment-2); }

/* ---------- Today (daily practice) ---------- */
.today-view .today-date{ font-family:var(--font-serif); font-style:italic; font-size:1.3rem; color:var(--parchment-2); margin-top:6px; }
.today-view .today-streak{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3); margin-top:14px; }
.today-view .today-streak b{ color:var(--gold); }
.today-stack{ display:flex; flex-direction:column; gap:var(--space-7); margin-top:var(--space-7); }
.today-practice, .today-truth{ display:block; padding:var(--space-6); border:1px solid var(--ink-700); border-radius:var(--r-lg);
  background:var(--ink-900); transition:border-color var(--dur-base) var(--ease-drift), transform var(--dur-base) var(--ease-magnet); }
.today-practice:hover, .today-truth:hover{ border-color:var(--gold-600); transform:translateY(-3px); }
.today-practice .card-title, .today-truth .card-title{ font-family:var(--font-display); font-size:1.6rem; color:var(--parchment); margin:8px 0; font-weight:400; }
.today-goal{ font-family:var(--font-body); color:var(--parchment-2); font-size:var(--t-body); line-height:1.6; max-width:58ch; }
.today-go{ display:inline-block; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); }
.today-word{ border-left:2px solid var(--gold-600); padding:6px 0 6px var(--space-5); margin:0; }
.today-word blockquote{ font-family:var(--font-serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.4; color:var(--parchment); margin:0; }
.today-word figcaption{ margin-top:14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--parchment-3); }
.today-foot{ font-family:var(--font-serif); font-style:italic; color:var(--parchment-3); text-align:center;
  margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--ink-700); }

.tradition-block{ margin-bottom:var(--space-6); }
/* trad-head is now a full-width toggle button (collapsible groups) */
.tradition-block .trad-head{ display:flex; align-items:center; gap:14px; width:100%; margin:0 0 var(--space-4);
  background:none; border:0; border-bottom:1px solid var(--ink-700); padding:0 0 12px; cursor:pointer; text-align:left;
  font:inherit; color:inherit; transition:border-color var(--dur-quick) var(--ease-drift); }
.tradition-block .trad-head:hover{ border-color:var(--gold-600); }
.tradition-block .trad-head .t-name{ font-family:var(--font-display); font-size:1.4rem; color:var(--parchment); font-weight:400; flex:1; }
.tradition-block .trad-head .t-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--parchment-3);
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:3px 10px; }
.tradition-block .trad-head .t-chev{ color:var(--parchment-3); font-size:13px; transition:transform var(--dur-base) var(--ease-rise); }
.tradition-block.open .trad-head .t-chev{ transform:rotate(180deg); color:var(--gold); }
.tradition-block:not(.open) .trad-cards{ display:none; }
.tradition-block.open .trad-head{ margin-bottom:var(--space-5); }
.essential-note{ margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--ink-700);
  font-family:var(--font-body); color:var(--parchment-2); font-size:var(--t-body); line-height:1.6; max-width:60ch; }
.essential-note b{ color:var(--parchment); }
/* domain filter row */
.chip-row-dom{ align-items:center; }
.chip-row-dom .chip-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--parchment-3); margin-right:4px; }
.voice-card .card-eyebrow{ color:var(--teal); }
.voice-card .v-era{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--parchment-3); margin-top:8px; }

.voice-detail .v-hero{ padding-top:var(--space-6); }
/* voice portrait — hero (gold engraving) */
.voice-detail .v-hero.has-portrait{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-6); align-items:center; }
.v-portrait{ width:clamp(120px,16vw,180px); aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--ink-700); box-shadow:var(--shadow-2), 0 0 40px var(--gold-glow); flex-shrink:0; }
.v-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:560px){ .voice-detail .v-hero.has-portrait{ grid-template-columns:1fr; justify-items:start; } }
/* voice portrait — card thumbnail */
.voice-card.has-portrait{ padding-top:var(--space-5); }
.vc-portrait{ width:56px; height:56px; border-radius:50%; overflow:hidden; margin-bottom:14px;
  border:1px solid var(--ink-700); box-shadow:0 0 18px var(--gold-glow); }
.vc-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.voice-detail .v-name{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em;
  text-transform:uppercase; font-size:clamp(2.1rem,5.5vw,4rem); line-height:.98; color:var(--parchment); }
.voice-detail .v-sub{ margin-top:var(--space-4); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--parchment-3); }
.voice-detail .v-sub .v-trad{ color:var(--teal); }
.voice-detail .v-core{ margin-top:var(--space-5); font-family:var(--font-serif); font-style:italic;
  font-weight:300; font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--gold); max-width:30ch; line-height:1.25;
  text-shadow:0 0 40px var(--gold-glow); }

/* At-a-glance one-pager strip (voice page) */
.glance{ margin-top:var(--space-6); }
.glance-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background:var(--ink-700); border:1px solid var(--ink-700); border-radius:var(--r-lg); overflow:hidden; }
.glance-cell{ background:var(--ink-900); padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.glance-cell .g-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3); }
.glance-cell .g-v{ font-family:var(--font-display); font-size:1.05rem; color:var(--parchment); letter-spacing:.01em; }
.glance-cell .g-v .ilink{ font-family:var(--font-display); }
.glance-concepts{ margin-top:var(--space-4); display:flex; flex-direction:column; gap:12px; }
.glance-concepts .g-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-3); }

/* Collapsible list (details/summary) in aside cards */
.collapse summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.collapse summary::-webkit-details-marker{ display:none; }
.collapse summary h4{ margin-bottom:0; display:flex; align-items:center; gap:8px; }
.collapse summary h4 .cnt{ font-family:var(--font-mono); color:var(--parchment-3); font-size:10px; }
.collapse .chev{ width:8px; height:8px; border-right:1.5px solid var(--parchment-3); border-bottom:1.5px solid var(--parchment-3);
  transform:rotate(45deg); transition:transform .3s var(--ease-rise); flex-shrink:0; }
.collapse[open] .chev{ transform:rotate(-135deg); }
.collapse-list{ list-style:none; margin-top:var(--space-4); display:flex; flex-direction:column; gap:0; }
.collapse-list li{ border-bottom:1px solid var(--ink-700); }
.collapse-list li:last-child{ border-bottom:none; }
.cl-link{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 0;
  text-decoration:none; color:var(--parchment-2); font-size:.92rem; transition:color .3s; }
.cl-link:hover{ color:var(--gold); }
.cl-link .cl-cat{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--parchment-3); flex-shrink:0; }

.lineage-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media (max-width:640px){ .lineage-cols{ grid-template-columns:1fr; } }
.lineage-cols h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--parchment-3); margin-bottom:var(--space-4); }

/* Essential Works list (bibliographies, #10) — seminal works bolded */
.works-list{ list-style:none; display:flex; flex-direction:column; gap:0; }
.works-list .work{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--ink-700); }
.works-list .work:last-child{ border-bottom:none; }
.works-list .w-title{ font-size:.92rem; line-height:1.35; color:var(--parchment-2); }
.works-list .w-year{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--parchment-3); flex-shrink:0; }
.works-list .work.seminal .w-title{ color:var(--parchment); font-weight:600; }
.works-list .work.seminal{ position:relative; }
.works-list .work.seminal .w-title::before{ content:"●"; color:var(--gold); font-size:.6em;
  vertical-align:.18em; margin-right:7px; }

.mini-graph{ width:100%; height:280px; border:1px solid var(--ink-700); border-radius:var(--r-lg);
  background:var(--void); overflow:hidden; position:relative; }
.mini-graph svg{ width:100%; height:100%; display:block; }

/* ===================== CONSTELLATION ===================== */
.constellation-view{ position:relative; }
.const-stage{ position:relative; width:100%; height:calc(100vh - var(--header-h));
  border-bottom:1px solid var(--ink-700); overflow:hidden; background:transparent; }
.const-stage svg{ width:100%; height:100%; display:block; cursor:grab; }
.const-stage svg:active{ cursor:grabbing; }
.const-overlay{ position:absolute; top:var(--space-5); left:var(--space-5); right:var(--space-5);
  display:flex; justify-content:space-between; gap:var(--space-4); pointer-events:none; flex-wrap:wrap; z-index:5; }
.const-overlay .ov-title{ pointer-events:none; }
.const-overlay .ov-title .eyebrow{ margin-bottom:8px; }
.const-overlay .ov-title h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.6rem,3.5vw,2.6rem);
  color:var(--parchment); letter-spacing:-.01em; line-height:1; }
.const-controls{ pointer-events:none; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.const-modes{ pointer-events:auto; display:inline-flex; background:var(--ink-900);
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:3px; }
.const-modes .mode-btn{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--parchment-3); background:none; border:none; cursor:pointer;
  padding:8px 16px; border-radius:var(--r-pill); transition:all .35s var(--ease-rise); white-space:nowrap; }
.const-modes .mode-btn:hover{ color:var(--parchment); }
.const-modes .mode-btn.active{ color:var(--void); background:var(--grad-gold); box-shadow:0 0 16px var(--gold-glow); }
.const-search{ pointer-events:auto; width:min(320px, 70vw); }
/* timeline lane + axis labels (inside the svg) */
.tl-lane-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  fill:var(--parchment-3); opacity:.75; }
.tl-axis-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; fill:var(--parchment-4); }
.const-legend{ position:absolute; bottom:var(--space-5); left:var(--space-5); z-index:5;
  display:flex; flex-wrap:wrap; gap:8px 14px; max-width:60vw; pointer-events:none; }
.const-legend{ pointer-events:auto; }
.const-legend .lg{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.08em; color:var(--parchment-2); background:rgba(8,8,10,.5);
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:5px 11px; cursor:pointer;
  transition:all .3s var(--ease-rise); }
.const-legend .lg:hover{ border-color:var(--gold-600); color:var(--parchment); background:rgba(8,8,10,.8); }
.const-legend .lg.on{ border-color:var(--gold); color:var(--gold); }
.const-legend .lg .sw{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.const-legend .lg .lg-n{ color:var(--parchment-3); }
.const-hint{ position:absolute; bottom:var(--space-5); right:var(--space-5); z-index:5;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-4); pointer-events:none; }
.const-node-label{ font-family:var(--font-body); font-size:12px; fill:var(--parchment); pointer-events:none; }
/* cluster-view family island labels */
.cl-fam-name{ font-family:var(--font-display); font-weight:600; letter-spacing:.03em; font-size:14px;
  fill:var(--parchment); opacity:.92; transition:fill .3s; }
.cl-fam-count{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; fill:var(--parchment-3); }
.cl-fam-label:hover .cl-fam-name{ fill:var(--gold); }
/* intro guide overlay */
.const-guide{ position:absolute; z-index:8; right:var(--space-5); bottom:var(--space-7);
  width:min(360px,84vw); background:rgba(14,14,18,.94); backdrop-filter:blur(10px);
  border:1px solid var(--ink-700); border-radius:var(--r-lg); padding:22px 22px 20px;
  box-shadow:var(--shadow-3); transition:opacity .5s var(--ease-rise), transform .5s var(--ease-rise); }
.const-guide.hidden{ opacity:0; transform:translateY(12px); pointer-events:none; }
.const-guide .cg-close{ position:absolute; top:10px; right:12px; background:none; border:none;
  color:var(--parchment-3); font-size:22px; line-height:1; cursor:pointer; transition:color .3s; }
.const-guide .cg-close:hover{ color:var(--parchment); }
.const-guide .cg-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.const-guide .cg-line{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem;
  line-height:1.45; color:var(--parchment-2); margin-bottom:11px; }
.const-guide .cg-line b{ color:var(--parchment); font-weight:600; }
.const-guide .cg-dot{ width:11px; height:11px; border-radius:50%; background:var(--gold); margin-top:3px; flex-shrink:0; box-shadow:0 0 10px var(--gold-glow); }
.const-guide .cg-line-mark{ width:14px; height:2px; background:var(--teal); margin-top:8px; flex-shrink:0; }
.const-guide .cg-swatch{ width:11px; height:11px; border-radius:2px; flex-shrink:0; margin-top:3px;
  background:linear-gradient(135deg,#E3B341,#3FA789,#C99BD6); }
.const-guide .cg-icn{ color:var(--gold); flex-shrink:0; width:14px; text-align:center; }
.const-guide .cg-modes{ font-size:.82rem; line-height:1.5; color:var(--parchment-2);
  border-top:1px solid var(--ink-700); margin-top:14px; padding-top:13px; }
.const-guide .cg-modes b{ color:var(--gold); font-weight:600; }
.const-guide .cg-go{ margin-top:16px; width:100%; justify-content:center; }
@media(max-width:680px){ .const-guide{ right:var(--space-4); left:var(--space-4); bottom:var(--space-5); width:auto; } }
/* ----- Constellation on mobile: stack controls, shrink, make tappable ----- */
@media(max-width:680px){
  .const-stage{ height:auto; min-height:78vh; }
  /* allow one-finger vertical page scroll over the canvas; d3 keeps two-finger zoom */
  .const-stage svg{ min-height:70vh; touch-action:pan-y; }
  .const-overlay{ position:absolute; top:10px; left:10px; right:10px; flex-direction:column; gap:10px; }
  .const-overlay .ov-title h1{ font-size:1.5rem; }
  .const-controls{ flex-direction:column; align-items:stretch; gap:8px; }
  .const-modes{ width:100%; justify-content:space-between; }
  .const-modes .mode-btn{ flex:1; text-align:center; padding:9px 6px; }
  .const-search{ width:100%; }
  /* legend becomes a horizontal scroll strip of tappable chips */
  .const-legend{ left:8px; right:8px; bottom:8px; max-width:none; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; gap:8px; }
  .const-legend .lg{ flex:0 0 auto; }
  .const-hint{ display:none; }
  .const-node-label{ font-size:13px; }
}
.const-tooltip{ position:absolute; z-index:10; pointer-events:none; background:var(--ink-900);
  border:1px solid var(--gold-600); border-radius:var(--r-md); padding:10px 14px; max-width:240px;
  opacity:0; transition:opacity .2s; box-shadow:var(--shadow-2); transform:translate(-50%,-120%); }
.const-tooltip .ct-name{ font-family:var(--font-display); font-size:1.05rem; color:var(--parchment); line-height:1.1; }
.const-tooltip .ct-meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-top:5px; }

/* ===================== DEEPER TRUTHS ===================== */
.deeper-truths-link{ display:block; max-width:none; }
.deeper-truths-link .card-title{ font-size:1.6rem; }
.deeper-truths-link .card-body{ max-width:60ch; }
.truth28-card .card-eyebrow{ color:var(--gold); }

/* ===================== HOW TO ===================== */
.howto-card .card-title{ font-size:1.3rem; line-height:1.15; }
.ht-rev{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-5);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-600); border-radius:var(--r-pill); padding:8px 15px; text-decoration:none;
  transition:all .35s var(--ease-rise); }
.ht-rev:hover{ background:var(--gold-glow); box-shadow:var(--glow-gold); }
.ht-paths{ display:flex; flex-direction:column; gap:var(--space-5); }
.ht-path{ background:var(--ink-900); border:1px solid var(--ink-700); border-left:2px solid var(--gold);
  border-radius:var(--r-lg); padding:var(--space-6); }
.ht-p-name{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--parchment); letter-spacing:.005em; }
.ht-p-teacher{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin-top:7px; }
.ht-p-principle{ font-family:var(--font-serif); font-style:italic; font-size:1.12rem; line-height:1.45;
  color:var(--parchment); margin-top:16px; }
.ht-p-exlabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:22px 0 12px; }
.ht-p-steps{ counter-reset:htstep; }
.ht-step{ position:relative; padding:9px 0 9px 40px; color:var(--parchment-2); line-height:1.55; }
.ht-step::before{ counter-increment:htstep; content:counter(htstep); position:absolute; left:0; top:8px;
  width:25px; height:25px; border-radius:50%; background:var(--ink-800); border:1px solid var(--gold-600);
  color:var(--gold); display:grid; place-items:center; font-family:var(--font-mono); font-size:11px; }
.ht-p-practice{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); text-decoration:none;
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:9px 15px; transition:all .35s var(--ease-rise); }
.ht-p-practice:hover{ border-color:var(--gold-600); background:var(--ink-800); }
.ht-closing{ font-family:var(--font-serif); font-style:italic; font-weight:300; font-size:1.35rem; line-height:1.4;
  color:var(--parchment); max-width:42ch; margin:var(--space-7) auto var(--space-4); text-align:center;
  text-shadow:0 0 40px var(--gold-glow); }
.ht-more .pill{ white-space:normal; }

/* ===================== THE RECURRENCE ===================== */
.rec-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--space-7); }
.rec-tab{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--r-pill); cursor:pointer; background:var(--ink-900);
  color:var(--parchment-3); border:1px solid var(--ink-700); transition:all .35s var(--ease-rise); }
.rec-tab:hover{ color:var(--parchment); border-color:var(--ink-600); }
.rec-tab.on{ color:var(--void); background:var(--grad-gold); border-color:transparent; box-shadow:0 0 20px var(--gold-glow); }
.rec-thesis{ font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.25; color:var(--parchment); max-width:24ch;
  margin-bottom:var(--space-7); text-shadow:0 0 40px var(--gold-glow); }
.rec-thread{ position:relative; padding-left:36px; }
.rec-thread::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold-100), var(--teal), transparent); opacity:.45; }
.rec-era{ position:relative; padding:0 0 var(--space-8) 0; }
.rec-era::before{ content:""; position:absolute; left:-31px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--ink-900); border:1px solid var(--gold-600); box-shadow:0 0 0 0 var(--gold-glow);
  transition:background .6s, box-shadow .6s; }
.rec-era.lit::before{ background:var(--gold); box-shadow:0 0 18px var(--gold-glow); }
.rec-era-yr{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px; }
.rec-metaphor{ font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.05; letter-spacing:.01em; color:var(--parchment); }
.rec-metaphor .rec-key{ color:var(--gold); }
.rec-who{ font-family:var(--font-body); font-size:.95rem; color:var(--parchment-2); margin-top:10px; }
.rec-quote{ font-family:var(--font-serif); font-style:italic; font-size:1.2rem; line-height:1.45;
  color:var(--parchment); margin-top:16px; max-width:54ch; border-left:2px solid var(--gold-600);
  padding-left:18px; }
.rec-quote .rec-para{ display:inline-block; margin-left:10px; font-family:var(--font-mono); font-style:normal;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-3);
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:2px 8px; vertical-align:middle; }
.rec-foot{ padding-top:var(--space-5); border-top:1px solid var(--ink-700); margin-top:var(--space-4);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--parchment-3); }

/* ===================== WORDS ===================== */
.words-grid{ columns: 3 300px; column-gap:var(--space-5); }
.word-card{ break-inside:avoid; margin-bottom:var(--space-5); display:block; text-decoration:none; color:inherit;
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-lg); padding:var(--space-6) var(--space-5);
  transition: all .5s var(--ease-rise); position:relative; }
.word-card:hover{ border-color:var(--gold-600); background:var(--ink-800); box-shadow:var(--shadow-2); transform:translateY(-4px); }
.word-card .q-mark{ font-family:var(--font-serif); font-size:3rem; color:var(--gold-600); line-height:.4; opacity:.5; }
.word-card .w-text{ font-family:var(--font-serif); font-weight:300; font-style:italic; font-size:1.25rem;
  line-height:1.4; color:var(--parchment); margin-top:14px; }
.word-card .w-attr{ margin-top:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--teal); }
.word-card .w-theme{ margin-top:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--parchment-3); }

/* ===================== PATHS ===================== */
.path-card{ min-height:200px; }
.path-card .card-title{ font-size:1.55rem; }
.path-card .p-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

.path-detail .step{ position:relative; padding:var(--space-5) 0 var(--space-5) var(--space-7); border-left:1px solid var(--ink-700); }
.path-detail .step::before{ counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:-18px; top:var(--space-5); width:36px; height:36px; border-radius:50%;
  background:var(--ink-900); border:1px solid var(--gold-600); color:var(--gold); display:grid; place-items:center;
  font-family:var(--font-mono); font-size:12px; box-shadow:0 0 16px var(--gold-glow); }
.path-detail .steps{ counter-reset:step; }
.path-detail .step h4{ font-family:var(--font-display); font-size:1.3rem; color:var(--parchment); font-weight:400; }

/* ===================== SEARCH ===================== */
.search-view .search-shell{ padding-top:var(--space-8); max-width:760px; margin:0 auto; }
/* trim dead dark band below short content on mobile (P2) */
@media(max-width:680px){
  #main{ min-height:auto; }
  .search-view .search-shell{ padding-top:var(--space-6); padding-bottom:var(--space-7); }
  .footer-nav{ gap:14px 20px; }
}
.search-results{ margin-top:var(--space-7); display:flex; flex-direction:column; gap:var(--space-3); }
.search-group-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:var(--space-5) 0 var(--space-3); }
.s-result{ display:flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid var(--ink-700);
  border-radius:var(--r-md); background:var(--ink-900); text-decoration:none; color:inherit; transition:all .4s var(--ease-rise); }
.s-result:hover{ border-color:var(--gold-600); background:var(--ink-800); transform:translateX(4px); }
.s-result .s-kind{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); border:1px solid var(--ink-600); color:var(--parchment-3); flex-shrink:0; min-width:84px; text-align:center; }
.s-result .s-kind.k-rev{ color:var(--gold); border-color:var(--gold-600); }
.s-result .s-kind.k-voice{ color:var(--teal); border-color:var(--teal-600); }
.s-result .s-kind.k-practice{ color:var(--parchment-2); }
.s-result .s-kind.k-word{ color:var(--parchment-2); }
.s-result .s-kind.k-path{ color:var(--gold); border-color:var(--gold-600); }
.s-result .s-title{ font-family:var(--font-display); font-size:1.1rem; color:var(--parchment); line-height:1.1; }
.s-result .s-sub{ font-size:.85rem; color:var(--parchment-3); margin-top:2px; }
.search-empty{ text-align:center; color:var(--parchment-3); padding:var(--space-8) 0; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em; }

/* lists / general */
.section-stack > * + *{ margin-top:var(--space-8); }
.toolbar{ display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; margin-bottom:var(--space-6); }
.toolbar .field-wrap{ flex:1; min-width:240px; }
.list-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-3); }

/* ============================================================
   ILLUMINATION  —  editorial-serif voice + reading + material
   Direction A (type) spine, with B (hairline edges) and C
   (reading contrast + closed voids) grafted in. Appended last
   so it wins the cascade without rewriting the rules above.
   The display family is flipped to Fraunces at the token; here
   we drop the all-caps geometric treatment, retune weight for a
   serif, and lift the reading layer. Chakra Petch survives only
   on the logotype (--font-chrome).            (2026-06-11)
   ============================================================ */

/* 1 ── Headings speak in mixed-case Fraunces (not wide UPPERCASE) ── */
.display,.h1,.h2,.h3,.hero-title,.hero-title .l2,
.rev-detail .rev-claim,.voice-detail .v-name,.rec-metaphor,
.prose h4,.body-rich h4{
  text-transform:none;
  font-optical-sizing:auto;
  letter-spacing:-.012em;
}
/* large display tiers read better light */
.display,.hero-title{ font-weight:360; }
.h1,.rev-detail .rev-claim,.voice-detail .v-name{ font-weight:430; }
.h2,.rec-metaphor{ font-weight:450; letter-spacing:-.01em; }
/* small serif subheads need a touch more body */
.h3,.prose h4,.body-rich h4,.card .card-title,
.tradition-block .trad-head .t-name,.ht-p-name,
.path-detail .step h4,.s-result .s-title,.prevnext .pn-title,
.howto-card .card-title{ font-weight:500; letter-spacing:-.005em; }
/* "Remembered" becomes the warm, human peak of the hero line */
.hero-title .l2{ font-style:italic; font-weight:320; color:var(--gold-100);
  text-shadow:0 0 60px var(--gold-glow); }

/* 2 ── Reading layer earns the primary cream + more air (Direction C) ── */
.body-rich,.prose{ color:var(--parchment); }
.body-rich{ font-size:1.15rem; line-height:1.8; }

/* 3 ── Close the dead void before the footer (Direction C) ── */
.site-footer{ margin-top:var(--space-7); }

/* 4 ── Material: a GPU-free gold→teal hairline edge + faint top-light on
        every surface (Direction B graft — no backdrop-filter, mobile-safe) ── */
.card,.word-card,.portal{ box-shadow:inset 0 1px 0 rgba(240,213,154,.045); }
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; opacity:.5; z-index:0;
  background:linear-gradient(180deg,
    rgba(240,213,154,.28) 0%, rgba(240,213,154,.06) 24%,
    rgba(255,255,255,0) 50%, rgba(167,224,206,.06) 78%, rgba(167,224,206,.22) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .5s var(--ease-rise);
}
.card:hover::before{ opacity:.9; }
/* card content already sits above ::after; keep it above the new ::before too */
.card > *{ position:relative; z-index:1; }

/* 5 ── Reveal: lighter travel + cheaper blur (per-container stagger lives
        in js/main.js). Calmer, less muddy than translateY(28px)+blur(6px). ── */
.reveal{ transform:translateY(16px); filter:blur(2px); }

/* ============================================================
   ILLUMINATION — second layer  (2026-06-12)
   B) liquid-glass chrome · words anthology rhythm ·
   C) paper reading mode · home spatial rhythm
   ============================================================ */

/* ---- (4 cont.) extend the gold→teal hairline ring to the other surfaces
        so portals and quote cards match the .card edge treatment ---- */
.portal::before,.word-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; opacity:.5; z-index:0;
  background:linear-gradient(180deg,
    rgba(240,213,154,.26) 0%, rgba(240,213,154,.05) 24%,
    rgba(255,255,255,0) 50%, rgba(167,224,206,.05) 78%, rgba(167,224,206,.20) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .5s var(--ease-rise);
}
.portal:hover::before,.word-card:hover::before{ opacity:.9; }
.portal > *{ position:relative; z-index:1; }

/* ============ B · LIQUID-GLASS CHROME ============
   Frosted glass + gradient hairline on the app's chrome surfaces.
   Desktop-gated; mobile and reduced-transparency users keep the solid
   panels they already have (the same lesson as the mobile-menu fix). */
@media (min-width:800px) and (prefers-reduced-transparency: no-preference){
  .const-modes,.const-tooltip{
    background:rgba(16,16,19,.55);
    backdrop-filter:blur(8px) saturate(118%);
    -webkit-backdrop-filter:blur(8px) saturate(118%);
  }
  .const-legend .lg{
    backdrop-filter:blur(7px) saturate(115%);
    -webkit-backdrop-filter:blur(7px) saturate(115%);
  }
  .const-guide{ background:rgba(14,14,18,.62); }
  .back-to-top{ background:rgba(8,8,10,.55); }
  .const-modes{ box-shadow:inset 0 1px 0 rgba(240,213,154,.10), var(--shadow-2); }
}
/* Gradient-hairline along the header's lower edge once it lifts off the top. */
.site-header.scrolled{
  border-bottom-color:transparent;
  background-image:linear-gradient(rgba(11,10,18,.96),rgba(11,10,18,.96)), var(--grad-hairline);
  background-position:0 0, 0 100%;
  background-size:100% 100%, 100% 1px;
  background-repeat:no-repeat;
}

/* ============ words · ANTHOLOGY RHYTHM ============
   Short, punchy lines render as larger pull-quotes (tagged in words.js),
   scattering scale through the wall so it reads curated, not uniform. */
.words-grid{ column-fill:balance; }
.word-card--feature{ border-color:rgba(201,162,75,.32); }
.word-card--feature .q-mark{ color:var(--gold); opacity:.7; font-size:3.6rem; }
.word-card--feature .w-text{ font-size:1.62rem; line-height:1.32; color:var(--parchment); }
@media (max-width:680px){ .word-card--feature .w-text{ font-size:1.4rem; } }

/* ============ home · SPATIAL RHYTHM ============
   One consistent top-rhythm for the home bands so the stats stop floating;
   frame the stats as an intentional band, not a stray row. */
.portals{ margin-top:var(--space-8); }
.stats{ margin-top:var(--space-8); margin-bottom:var(--space-4);
  border-bottom:1px solid var(--ink-700); padding-bottom:var(--space-7); }

/* ============ C · PAPER READING MODE ============ */
.read-mode{
  position:fixed; bottom:24px; left:20px; z-index:40; display:none;
  align-items:center; gap:9px; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-2); background:rgba(8,8,10,.78);
  border:1px solid var(--ink-700); border-radius:var(--r-pill); padding:10px 16px;
  box-shadow:var(--shadow-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .35s var(--ease-rise), border-color .35s var(--ease-rise);
}
body.has-reading .read-mode{ display:inline-flex; }
.read-mode:hover{ color:var(--gold); border-color:var(--gold-600); }
.read-mode .rm-icon{ width:11px; height:13px; border-radius:1px 2px 2px 1px;
  background:linear-gradient(180deg,var(--gold-100),var(--gold-600)); box-shadow:0 0 10px var(--gold-glow);
  flex-shrink:0; }
[data-read="paper"] .read-mode .rm-icon{ background:linear-gradient(180deg,#3a3a44,#16161b); box-shadow:none; }

/* The reading column becomes a warm printed sheet laid on the dark desk.
   Scoped to the prose blocks only — the rest of the page stays cinematic. */
[data-read="paper"] .body-rich,
[data-read="paper"] .prose{
  background:#F3EEE2; color:#23201A;
  padding:clamp(26px,4vw,56px); border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
[data-read="paper"] .body-rich{ max-width:68ch; }
[data-read="paper"] .body-rich .lead-para{ color:#23201A; }
[data-read="paper"] .body-rich strong,
[data-read="paper"] .body-rich strong.key,
[data-read="paper"] .body-rich em,
[data-read="paper"] .body-rich h4,
[data-read="paper"] .prose strong,
[data-read="paper"] .prose h4{ color:#1c1914; }
[data-read="paper"] .body-rich strong.key.gold{ color:#6b4f12; }
[data-read="paper"] .body-rich a,
[data-read="paper"] .prose a{ color:#2a5e50; border-bottom-color:rgba(42,94,80,.45); }
[data-read="paper"] .body-rich a.gold,
[data-read="paper"] .body-rich a.ilink.gold{ color:#6b4f12; border-bottom-color:rgba(107,79,18,.45); }
[data-read="paper"] .body-rich blockquote,
[data-read="paper"] .prose blockquote{ color:#3a342a; border-left-color:#8a6a1f; }
[data-read="paper"] .body-rich li::marker,
[data-read="paper"] .prose li::marker{ color:#8a6a1f; }
[data-read="paper"] .body-rich.lead-in .lead-para::first-letter{ color:#8a6a1f; text-shadow:none; }
[data-read="paper"] .body-rich .code-ref,
[data-read="paper"] .prose code,[data-read="paper"] .prose .code-ref{ background:#e7e0cd; color:#5a4a1a; }
@media (prefers-reduced-motion: no-preference){
  .body-rich,.prose{ transition:background .45s var(--ease-rise), color .45s var(--ease-rise); }
}

/* ============================================================
   LIVING MANUSCRIPT — ship-this-week  (2026-06-12)
   1) text-wrap  2) View Transitions crossfade  3) constellation spotlight
   ============================================================ */

/* 1 ── Reading-grade line breaking. Unsupported browsers simply ignore it. ── */
.display,.h1,.h2,.h3,.hero-title,.rec-metaphor,
.rev-detail .rev-claim,.voice-detail .v-name,
.page-head .lead,.home-section .section-head .h2{ text-wrap:balance; }
.body-rich,.prose,.lead,.card-body,.w-text,.hero-thesis,.portal .p-desc{ text-wrap:pretty; }

/* 2 ── View Transitions crossfade between routes (router calls startViewTransition
        where supported; the #page-veil wipe stays as the fallback). Header, footer
        and background are identical old↔new, so only #app content visibly fades. ── */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:.34s; animation-timing-function:var(--ease-veil);
  }
}

/* 3 ── Constellation cursor spotlight — the map wakes under the pointer.
        Glows over the stars (z-4), under the controls (z-5). This route only;
        off on touch and reduced-motion (the JS guards match). ── */
.const-stage{ --mx:50%; --my:42%; }
.const-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(240px 240px at var(--mx) var(--my),
    rgba(240,213,154,.10), rgba(240,213,154,.04) 45%, transparent 72%);
  opacity:0; transition:opacity .6s var(--ease-rise); mix-blend-mode:screen;
}
.const-stage.lit::after{ opacity:1; }
@media (hover:none),(prefers-reduced-motion: reduce){ .const-stage::after{ display:none; } }