/* =========================================================================
   IDEAS -- /ideas/. The pi-* chapters. Rides on home.css: tokens, titles,
   reveal grammar, buttons, pp-cream, and the pcv atoms (pcv-line, pcv-spark,
   pcv-spark--pulse, pcv-node, pcv-dash, pcv-blip) appended there.
   Ground rhythm: dark - cream - dark - cream - dark - cream - ember.
   ========================================================================= */

/* =========================================================================
   01 . HERO . the habit starts earlier
   ========================================================================= */
.pi-hero {
  position: relative; overflow: clip;
  background: var(--bg);
  padding-block: calc(var(--s-xxl) + 40px) var(--s-xxl);
  min-height: 86svh;
  display: grid; align-items: center;
}
.pi-hero::before {
  content: ''; position: absolute; inset: auto -20% -35%; height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(193, 154, 75, 0.13) 0%, transparent 70%);
  animation: pp-halo-breathe 8s ease-in-out infinite;
}
/* the film: full-bleed loop behind the type, graded toward our golds and
   held down by three scrims -- left band for the copy, bottom fade into
   the page ground, a light lid at the top for the header */
.pi-hero__film {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; overflow: clip;
}
.pi-hero__film canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
.pi-hero__film::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(14, 11, 9, 0.34), rgba(14, 11, 9, 0.34)),
    radial-gradient(ellipse 66% 58% at 50% 46%, rgba(14, 11, 9, 0.72) 0%, rgba(14, 11, 9, 0.46) 55%, rgba(14, 11, 9, 0) 100%),
    linear-gradient(to top, #0E0B09 0%, rgba(14, 11, 9, 0) 26%),
    linear-gradient(to bottom, rgba(14, 11, 9, 0.6) 0%, transparent 20%);
}

.pi-hero__inner {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center;
}
.pi-hero__title {
  max-width: 18ch;
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75);
}
.pi-hero__title em,
.pi-hero__title .w:last-child i {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
}
@media (max-width: 640px) {
  .pi-hero__title em,
  .pi-hero__title .w:last-child i { -webkit-text-stroke-width: 1.3px; }
}
.pi-hero__prose {
  margin-top: var(--s-lg); max-width: 58ch;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.8);
}
.pi-hero__lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.65;
  color: var(--ink-muted); text-wrap: pretty;
}
.pi-hero__line {
  margin-top: 1em;
  font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.45;
  font-weight: 300; font-style: italic; color: var(--gold);
  text-wrap: pretty;
}
.pi-hero__prose p:last-child {
  margin-top: 1em;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: var(--ink-muted); text-wrap: pretty;
}
.pi-hero .btn-row { margin-top: var(--s-lg); justify-content: center; }

/* =========================================================================
   02 . THE DATA . the lens, and the eight operating principles
   ========================================================================= */
.pi-data { padding-block: var(--s-xxl); }
.pi-data__inner {
  display: grid; align-items: start;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
}
.pi-data__rail { position: sticky; top: 110px; display: grid; justify-items: start; }
.pi-data__prose { margin-top: var(--s-md); }
.pi-data__coda {
  margin-top: var(--s-md); padding-top: var(--s-sm);
  position: relative;
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5;
  font-weight: 300; font-style: italic; color: var(--gold-deep);
  text-wrap: pretty;
}
.pi-data__coda::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: clamp(70px, 9vw, 120px); height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}
/* the lens instrument: perception swings, data holds its line */
.pi-lens {
  margin-top: var(--s-md);
  width: min(100%, 380px);
  background: #FFFCF6;
  border: 1px solid #DCCBB4; border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(27, 20, 16, 0.06);
}
.pi-lens svg { display: block; width: 100%; height: auto; padding: 10px 10px 0; }
.pil-base { stroke: rgba(122, 94, 32, 0.22); stroke-width: 1; }
.pil-perc { stroke: rgba(122, 94, 32, 0.4); stroke-width: 1.3; stroke-linecap: round; }
.pil-data { stroke: var(--gold, #C19A4B); stroke-width: 1.7; stroke-linecap: round; }
.pil-data--pulse {
  stroke: #F3D88E; stroke-width: 1.7;
  stroke-dasharray: 14 86;
  animation: pcv-dash 3.2s linear infinite;
}
.pil-t {
  fill: #A08D72;
  font-family: inherit; font-size: 7.5px; font-weight: 700; letter-spacing: 0.14em;
}
.pil-t--gold { fill: var(--gold-deep, #7A5E20); }
.pi-lens__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0; padding: 9px 14px;
  border-top: 1px solid rgba(220, 203, 180, 0.65);
  font-size: 0.625rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #8A7C6B;
}
.pi-lens__foot span { display: inline-flex; align-items: center; gap: 7px; }
.pi-lens__foot b { color: var(--gold-deep, #7A5E20); font-weight: 700; }
.pi-lens__foot i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: pcv-blip 2.4s ease-in-out infinite;
}

.pi-data__intro {
  margin: 0 0 18px;
  font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 600;
  color: var(--ink);
}
.pi-spine { position: relative; padding-block: 8px; }
/* the spine itself, drawn top to bottom on arrival */
.pi-spine::before {
  content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px;
  width: 2px; translate: -50% 0; border-radius: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(122, 94, 32, 0.35));
  transform-origin: top center;
}
.js .pi-spine.reveal::before { scale: 1 0; }
.js .pi-spine.reveal.is-in::before { scale: 1 1; transition: scale 1800ms var(--ease) 150ms; }
.pi-spine__item {
  position: relative;
  width: calc(50% - 36px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
}
.pi-spine__item:last-child { margin-bottom: 0; }
.pi-spine__item:nth-child(odd) { margin-right: auto; text-align: right; }
.pi-spine__item:nth-child(even) { margin-left: calc(50% + 36px); text-align: left; }
.pi-spine__dot {
  position: absolute; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(193, 154, 75, 0.16);
  animation: pcv-blip 3s ease-in-out infinite;
}
.pi-spine__item:nth-child(odd) .pi-spine__dot { right: -40.5px; }
.pi-spine__item:nth-child(even) .pi-spine__dot { left: -40.5px; }
.pi-spine__item:nth-child(2) .pi-spine__dot { animation-delay: -0.4s; }
.pi-spine__item:nth-child(3) .pi-spine__dot { animation-delay: -0.8s; }
.pi-spine__item:nth-child(4) .pi-spine__dot { animation-delay: -1.2s; }
.pi-spine__item:nth-child(5) .pi-spine__dot { animation-delay: -1.6s; }
.pi-spine__item:nth-child(6) .pi-spine__dot { animation-delay: -2.0s; }
.pi-spine__item:nth-child(7) .pi-spine__dot { animation-delay: -2.4s; }
.pi-spine__item:nth-child(8) .pi-spine__dot { animation-delay: -2.8s; }
/* while the section rides the scroll (initRides writes --rp), the spine
   becomes a track that fills with gold as the reader descends, and each
   principle lights the moment the fill reaches its node */
.pi-data.is-ride .pi-spine::before {
  background: rgba(122, 94, 32, 0.22);
}
.js .pi-data.is-ride .pi-spine.reveal::before { scale: 1 1; transition: none; }
.pi-data.is-ride .pi-spine::after {
  content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px;
  width: 2px; translate: -50% 0; border-radius: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-deep, #7A5E20));
  transform-origin: top center;
  scale: 1 min(1, calc(var(--rp, 0) * 1.2));
  will-change: transform;
}
.pi-data.is-ride .pi-spine__item { --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 9), 1); }
.pi-data.is-ride .pi-spine__item:nth-child(1) { --t: 0.02; }
.pi-data.is-ride .pi-spine__item:nth-child(2) { --t: 0.115; }
.pi-data.is-ride .pi-spine__item:nth-child(3) { --t: 0.21; }
.pi-data.is-ride .pi-spine__item:nth-child(4) { --t: 0.305; }
.pi-data.is-ride .pi-spine__item:nth-child(5) { --t: 0.40; }
.pi-data.is-ride .pi-spine__item:nth-child(6) { --t: 0.495; }
.pi-data.is-ride .pi-spine__item:nth-child(7) { --t: 0.59; }
.pi-data.is-ride .pi-spine__item:nth-child(8) { --t: 0.685; }
.pi-data.is-ride .pi-spine__dot {
  animation: none;
  opacity: calc(0.25 + var(--p, 1) * 0.75);
  scale: calc(0.72 + var(--p, 1) * 0.4);
  filter: drop-shadow(0 0 calc(var(--p, 1) * 6px) rgba(193, 154, 75, 0.8));
}
.pi-data.is-ride .pi-spine__meta { opacity: calc(0.35 + var(--p, 1) * 0.65); }
.pi-data.is-ride .pi-spine__txt { opacity: calc(0.3 + var(--p, 1) * 0.7); }

.pi-spine__meta {
  margin: 0 0 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em;
  color: var(--gold-deep, #7A5E20);
}
.pi-spine__txt {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.6;
  color: #5C5044; text-wrap: pretty;
}
/* each principle swings in from its own side of the spine */
.js .pi-spine.reveal .pi-spine__item {
  opacity: 0;
  transition: opacity 650ms var(--ease), translate 650ms var(--ease);
}
.js .pi-spine.reveal .pi-spine__item:nth-child(odd) { translate: -22px 0; }
.js .pi-spine.reveal .pi-spine__item:nth-child(even) { translate: 22px 0; }
.js .pi-spine.reveal.is-in .pi-spine__item { opacity: 1; translate: 0 0; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(2) { transition-delay: 120ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(3) { transition-delay: 240ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(4) { transition-delay: 360ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(5) { transition-delay: 480ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(6) { transition-delay: 600ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(7) { transition-delay: 720ms; }
.js .pi-spine.reveal.is-in .pi-spine__item:nth-child(8) { transition-delay: 840ms; }
@media (max-width: 620px) {
  .pi-spine::before { left: 4px; translate: 0 0; }
  .pi-spine__item,
  .pi-spine__item:nth-child(odd),
  .pi-spine__item:nth-child(even) { width: calc(100% - 34px); margin-left: 34px; margin-right: 0; text-align: left; }
  .pi-spine__item:nth-child(odd) .pi-spine__dot,
  .pi-spine__item:nth-child(even) .pi-spine__dot { left: -33.5px; right: auto; }
}
@media (max-width: 900px) {
  .pi-data__inner { grid-template-columns: 1fr; gap: var(--s-lg); }
  .pi-data__rail { position: static; }
}

/* =========================================================================
   03 . THE RECORD . published in Forbes
   ========================================================================= */
.pi-forbes { background: var(--surface); padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pi-forbes__inner {
  display: grid; align-items: start;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
}
.pi-forbes__rail { position: sticky; top: 110px; display: grid; justify-items: start; }
.pi-forbes__lead {
  margin-top: var(--s-md); max-width: 30ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6;
  color: var(--ink-muted); text-wrap: pretty;
}
.pi-forbes__rail .btn { margin-top: var(--s-md); }

/* bylines per year: the bars grow on arrival */
.pi-chart {
  margin-top: var(--s-md);
  display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 24px);
  height: 150px;
}
.pi-bar {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px;
  height: 100%;
}
.pi-bar b {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem; font-weight: 700; color: var(--gold);
}
.pi-bar i {
  width: clamp(30px, 3vw, 44px);
  height: calc(var(--h, 1) * 84px);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, rgba(122, 94, 32, 0.55), var(--gold));
  transform-origin: bottom center;
}
.js .pi-chart.reveal .pi-bar i { scale: 1 0; transition: scale 900ms var(--ease); }
.js .pi-chart.reveal.is-in .pi-bar i { scale: 1 1; }
.js .pi-chart.reveal.is-in .pi-bar:nth-child(2) i { transition-delay: 140ms; }
.js .pi-chart.reveal.is-in .pi-bar:nth-child(3) i { transition-delay: 280ms; }
.js .pi-chart.reveal.is-in .pi-bar:nth-child(4) i { transition-delay: 420ms; }
.pi-bar span {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em;
  color: rgba(244, 232, 218, 0.45);
}

/* the ledger: eight bylines on a hairline rail */
.pi-ledger { border-top: 1px solid rgba(244, 232, 218, 0.14); }
.pi-row {
  position: relative;
  display: flex; align-items: baseline; gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid rgba(244, 232, 218, 0.14);
  text-decoration: none;
  transition: background 300ms var(--ease), padding-left 300ms var(--ease);
}
.pi-row::before {
  content: ''; position: absolute; left: -18px; top: 18px; bottom: 18px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-deep));
  transform-origin: top center; scale: 1 0;
  transition: scale 400ms var(--ease);
}
.pi-row:hover::before { scale: 1 1; }
.pi-row:hover { padding-left: 10px; }
.pi-row__num {
  flex: none; font-style: normal;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  color: rgba(244, 232, 218, 0.4);
  transition: color 300ms var(--ease);
}
.pi-row:hover .pi-row__num { color: var(--gold); }
.pi-row__body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pi-row__head {
  display: flex; align-items: baseline; gap: 16px; justify-content: space-between;
  flex-wrap: wrap;
}
.pi-row__title {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35;
  color: var(--ink); text-wrap: pretty;
  transition: color 300ms var(--ease);
}
.pi-row:hover .pi-row__title { color: var(--gold); }
.pi-row__date {
  flex: none;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  color: rgba(244, 232, 218, 0.45);
}
.pi-row__sum {
  max-width: 68ch;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.6;
  color: var(--ink-muted); text-wrap: pretty;
}
.pi-row__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.pi-row__cta i {
  font-style: normal;
  translate: 0 0;
  transition: translate 300ms var(--ease);
}
.pi-row:hover .pi-row__cta i { translate: 3px -3px; }
/* the bylines slide in from the right, one after another */
.js .pi-ledger.reveal .pi-row {
  opacity: 0; translate: 26px 0;
  transition: opacity 650ms var(--ease), translate 650ms var(--ease), background 300ms var(--ease), padding-left 300ms var(--ease);
}
.js .pi-ledger.reveal.is-in .pi-row { opacity: 1; translate: 0 0; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(2) { transition-delay: 80ms, 80ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(3) { transition-delay: 160ms, 160ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(4) { transition-delay: 240ms, 240ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(5) { transition-delay: 320ms, 320ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(6) { transition-delay: 400ms, 400ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(7) { transition-delay: 480ms, 480ms, 0ms, 0ms; }
.js .pi-ledger.reveal.is-in .pi-row:nth-child(8) { transition-delay: 560ms, 560ms, 0ms, 0ms; }
@media (max-width: 900px) {
  .pi-forbes__inner { grid-template-columns: 1fr; gap: var(--s-lg); }
  .pi-forbes__rail { position: static; }
  .pi-row::before { left: -10px; }
}

/* =========================================================================
   04 . THE PANEL NOTE . the plaque on cream
   ========================================================================= */
.pi-panelnote { padding-block: var(--s-xxl); position: relative; overflow: clip; }
/* the lamp: the pointer reveals the drafting grid around itself and
   carries a soft gold glow -- initGlow writes --gx/--gy/--gs */
.pi-panelnote::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, rgba(122, 94, 32, 0.42) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(122, 94, 32, 0.42) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to right, rgba(122, 94, 32, 0.55) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, rgba(122, 94, 32, 0.55) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(circle 340px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 80%);
  mask-image: radial-gradient(circle 340px at var(--gx, 50%) var(--gy, 50%), #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 80%);
  opacity: var(--gs, 0);
}
.pi-panelnote::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 90px at var(--gx, 50%) var(--gy, 50%), rgba(243, 216, 142, 0.3), transparent 75%),
    radial-gradient(circle 340px at var(--gx, 50%) var(--gy, 50%), rgba(193, 154, 75, 0.22), transparent 72%);
  opacity: var(--gs, 0);
}
.pi-panelnote__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.pi-plaque {
  position: relative; overflow: clip;
  width: min(100%, 860px);
  padding: clamp(30px, 4vw, 54px) clamp(24px, 3.4vw, 50px);
  background: #FFFCF6;
  border: 1px solid #DCCBB4; border-radius: 16px;
  box-shadow: 0 24px 60px -40px rgba(27, 20, 16, 0.4);
}
/* the gold hairline draws across the plaque's lintel on arrival */
.pi-plaque::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(to right, var(--gold), rgba(193, 154, 75, 0));
  transform-origin: left center; scale: 0 1;
}
.js .pi-plaque.reveal.is-in::before { scale: 1 1; transition: scale 1000ms var(--ease) 250ms; }
.pi-plaque__plus {
  position: absolute; top: 12px; right: 16px;
  font-style: normal; font-weight: 400;
  font-size: 1.05rem; line-height: 1;
  color: rgba(122, 94, 32, 0.5);
}
.pi-plaque__plus--low { top: auto; right: auto; bottom: 12px; left: 16px; }
.pi-plaque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 260px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.pi-plaque__plus { z-index: 1; }

/* the panel ring: fourteen seats, one lit */
.pi-plaque__ring { justify-self: center; width: 100%; }
.pi-plaque__ring svg { display: block; width: 100%; height: auto; }
@keyframes pir-spin { to { transform: rotate(360deg); } }
.pir-ring {
  stroke: rgba(122, 94, 32, 0.3); stroke-width: 1; stroke-dasharray: 2 6;
  transform-box: fill-box; transform-origin: center;
  animation: pir-spin 30s linear infinite;
}
.pir-inner { stroke: rgba(220, 203, 180, 0.9); stroke-width: 1; }
.pir-pulse {
  stroke: var(--gold, #C19A4B); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 10 90;
  animation: pcv-dash 4.2s linear infinite;
}
.pir-node { fill: rgba(122, 94, 32, 0.42); animation: pcv-blip 3s ease-in-out infinite; }
.pir-node--jj {
  fill: var(--gold, #C19A4B);
  animation: none;
  filter: drop-shadow(0 0 5px rgba(193, 154, 75, 0.75));
}
.pir-label {
  fill: var(--gold-deep, #7A5E20);
  font-family: inherit; font-size: 7px; font-weight: 700; letter-spacing: 0.16em;
}
.pir-num {
  fill: none; stroke: rgba(122, 94, 32, 0.35); stroke-width: 1.1;
  font-family: inherit; font-size: 46px; font-weight: 800; letter-spacing: -0.02em;
}
.pi-plaque__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px solid rgba(220, 203, 180, 0.65);
  font-size: 0.625rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #8A7C6B;
}
.pi-plaque__foot span { display: inline-flex; align-items: center; gap: 7px; }
.pi-plaque__foot b { color: var(--gold-deep, #7A5E20); font-weight: 700; white-space: nowrap; }
.pi-plaque__foot i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: pcv-blip 2.4s ease-in-out infinite;
}
@media (max-width: 760px) {
  .pi-plaque { grid-template-columns: 1fr; }
  .pi-plaque__ring { max-width: 230px; }
}

.pi-plaque__title {
  margin-top: var(--s-sm);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 800; line-height: 1.35;
  color: var(--ink); text-wrap: pretty;
}
.pi-plaque__title span { font-weight: 500; color: #8A7C6B; white-space: nowrap; }
.pi-plaque__body {
  margin-top: var(--s-sm); max-width: 66ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65;
  color: #5C5044; text-wrap: pretty;
}

/* =========================================================================
   05 . THE PATHS . four topic doors
   ========================================================================= */
.pi-topics { background: var(--bg); padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pi-topics__inner { display: grid; justify-items: start; }
/* the trail map: four paths out of one trailhead, links as plain type */
.pi-trails {
  margin-top: var(--s-lg); width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
.pi-trails__map { width: 100%; height: auto; }
.tpl { stroke: rgba(193, 154, 75, 0.3); stroke-width: 1.2; }
.tpp {
  stroke: var(--gold, #C19A4B); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 9 91;
  animation: pcv-dash 3.6s linear infinite;
  transition: stroke 300ms var(--ease);
}
.tpo { fill: var(--gold, #C19A4B); filter: drop-shadow(0 0 5px rgba(193, 154, 75, 0.8)); }
.tpe { fill: rgba(243, 216, 142, 0.55); animation: pcv-blip 2.8s ease-in-out infinite; }
/* the trails draw themselves out of the trailhead on arrival */
.js .pi-trails.reveal .tpl { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1300ms var(--ease), stroke 300ms var(--ease); }
.js .pi-trails.reveal.is-in .tpl { stroke-dashoffset: 0; }
.js .pi-trails.reveal.is-in .tp2 { transition-delay: 150ms, 0ms; }
.js .pi-trails.reveal.is-in .tp3 { transition-delay: 300ms, 0ms; }
.js .pi-trails.reveal.is-in .tp4 { transition-delay: 450ms, 0ms; }
.js .pi-trails.reveal .tpp, .js .pi-trails.reveal .tpe { opacity: 0; transition: opacity 500ms var(--ease) 1300ms; }
.js .pi-trails.reveal.is-in .tpp, .js .pi-trails.reveal.is-in .tpe { opacity: 1; }

.pi-trails__list { display: grid; }
.pi-trail {
  height: clamp(56px, 7vh, 68px);
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 232, 218, 0.08);
}
.pi-trail:last-child { border-bottom: 0; }
.pi-trail i {
  flex: none; font-style: normal;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  color: rgba(244, 232, 218, 0.4);
  transition: color 300ms var(--ease);
}
.pi-trail b {
  font-size: clamp(1.1rem, 1.7vw, 1.55rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.2;
  color: var(--ink); text-wrap: pretty;
  transition: color 300ms var(--ease), translate 300ms var(--ease);
}
.pi-trail span {
  font-style: normal; color: var(--gold);
  opacity: 0; translate: -8px 6px;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}
.pi-trail:hover i { color: var(--gold); }
.pi-trail:hover b { color: var(--gold); translate: 6px 0; }
.pi-trail:hover span { opacity: 1; translate: 0 0; }
/* hovering a destination lights its own trail */
.pi-trails:has(.pi-trail:nth-child(1):hover) .tp1 { stroke: rgba(193, 154, 75, 0.75); }
.pi-trails:has(.pi-trail:nth-child(1):hover) .tpp1 { stroke: #F3D88E; }
.pi-trails:has(.pi-trail:nth-child(2):hover) .tp2 { stroke: rgba(193, 154, 75, 0.75); }
.pi-trails:has(.pi-trail:nth-child(2):hover) .tpp2 { stroke: #F3D88E; }
.pi-trails:has(.pi-trail:nth-child(3):hover) .tp3 { stroke: rgba(193, 154, 75, 0.75); }
.pi-trails:has(.pi-trail:nth-child(3):hover) .tpp3 { stroke: #F3D88E; }
.pi-trails:has(.pi-trail:nth-child(4):hover) .tp4 { stroke: rgba(193, 154, 75, 0.75); }
.pi-trails:has(.pi-trail:nth-child(4):hover) .tpp4 { stroke: #F3D88E; }
@media (max-width: 760px) {
  .pi-trails { grid-template-columns: 1fr; }
  .pi-trails__map { display: none; }
}

/* =========================================================================
   06 . THE NEXT SHELF . new ideas, plus the attribution standard
   ========================================================================= */
.pi-new { padding-block: var(--s-xxl); overflow: clip; }
.pi-new__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 640px) 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
}
.pi-new__core { display: grid; justify-items: center; text-align: center; }

/* the drafts: manuscript lines writing themselves, over and over */
.pi-new__draft { display: grid; gap: 15px; }
.pi-new__draft--l { justify-items: end; }
.pi-new__draft--r { justify-items: start; }
.pi-new__draft i {
  display: block;
  height: 9px; border-radius: 5px;
  width: calc(var(--w, 1) * 100%); max-width: 250px;
  background: linear-gradient(to right, rgba(122, 94, 32, 0.24), rgba(122, 94, 32, 0.12));
  animation: pi-write 12s var(--ease) infinite;
}
.pi-new__draft--l i { transform-origin: right center; }
.pi-new__draft--r i { transform-origin: left center; }
.pi-new__draft i:nth-child(2) { animation-delay: 1s; }
.pi-new__draft i:nth-child(3) {
  animation-delay: 2s;
  background: linear-gradient(to right, rgba(193, 154, 75, 0.55), rgba(193, 154, 75, 0.3));
}
.pi-new__draft i:nth-child(4) { animation-delay: 3s; }
.pi-new__draft i:nth-child(5) { animation-delay: 4s; }
.pi-new__draft i:nth-child(6) { animation-delay: 5s; }
.pi-new__draft--r i { animation-delay: 0.5s; }
.pi-new__draft--r i:nth-child(2) { animation-delay: 1.5s; }
.pi-new__draft--r i:nth-child(3) { animation-delay: 2.5s; }
.pi-new__draft--r i:nth-child(4) { animation-delay: 3.5s; }
.pi-new__draft--r i:nth-child(5) { animation-delay: 4.5s; }
.pi-new__draft--r i:nth-child(6) { animation-delay: 5.5s; }
@keyframes pi-write {
  0% { scale: 0 1; opacity: 0; }
  5% { opacity: 1; }
  16% { scale: 1 1; }
  78% { scale: 1 1; opacity: 1; }
  88% { opacity: 0; }
  100% { scale: 0 1; opacity: 0; }
}
@media (max-width: 900px) {
  .pi-new__inner { grid-template-columns: 1fr; }
  .pi-new__draft { display: none; }
}
.pi-new__badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: var(--s-sm);
  padding: 7px 14px;
  border: 1px solid #DCCBB4; border-radius: 999px;
  background: #FFFCF6;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #8A7C6B;
}
.pi-new__badge i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: pcv-blip 2.4s ease-in-out infinite;
}
.pi-new__copy {
  margin-top: var(--s-sm); max-width: 56ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: var(--ink-muted); text-wrap: pretty;
}
.pi-new .btn { margin-top: var(--s-md); }
.pi-new__attr {
  margin-top: var(--s-lg); padding-top: var(--s-md);
  position: relative;
  max-width: 62ch;
  font-size: var(--t-caption); line-height: 1.7;
  color: #8A7C6B; text-wrap: pretty;
}
.pi-new__attr::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: clamp(70px, 9vw, 120px); height: 1px;
  translate: -50% 0;
  background: linear-gradient(to right, transparent, #C9AE7C, transparent);
}

/* =========================================================================
   07 . THE CLOSING . ember
   ========================================================================= */
.pi-close { background: #5F241C; padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pi-close::before {
  content: ''; position: absolute; inset: auto -20% -35%; height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(243, 216, 142, 0.14) 0%, transparent 70%);
  animation: pp-halo-breathe 8s ease-in-out infinite;
}
.pi-close__inner { position: relative; display: grid; justify-items: center; text-align: center; }
.pi-close .pp-eyebrow { color: #F3D88E; }
.pi-close .pp-h2 { color: #F4E8DA; }
.pi-close__line {
  margin-top: var(--s-md); max-width: 56ch;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.6;
  color: rgba(244, 232, 218, 0.88); text-wrap: pretty;
}
.pi-close__line em { font-style: normal; font-weight: 600; color: #F3D88E; }
.pi-close__walk { width: min(560px, 84%); height: auto; margin-top: var(--s-md); }
.pcw-t {
  fill: rgba(244, 232, 218, 0.55);
  font-family: inherit; font-size: 7px; font-weight: 700; letter-spacing: 0.16em;
}
/* the walk draws itself, then the station names step in one by one */
.js .pi-close__walk.reveal .pca-line {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  transition: stroke-dashoffset 1400ms var(--ease) 250ms;
}
.js .pi-close__walk.reveal.is-in .pca-line { stroke-dashoffset: 0; }
.js .pi-close__walk.reveal .pcw-t { opacity: 0; transition: opacity 500ms var(--ease); }
.js .pi-close__walk.reveal.is-in .pcw-t { opacity: 1; }
.js .pi-close__walk.reveal.is-in .pcw-t:nth-of-type(1) { transition-delay: 500ms; }
.js .pi-close__walk.reveal.is-in .pcw-t:nth-of-type(2) { transition-delay: 750ms; }
.js .pi-close__walk.reveal.is-in .pcw-t:nth-of-type(3) { transition-delay: 1000ms; }
.js .pi-close__walk.reveal.is-in .pcw-t:nth-of-type(4) { transition-delay: 1250ms; }
.js .pi-close__walk.reveal.is-in .pcw-t:nth-of-type(5) { transition-delay: 1500ms; }
.js .pi-close__walk.reveal .pca-pulse { opacity: 0; transition: opacity 500ms var(--ease) 1700ms; }
.js .pi-close__walk.reveal.is-in .pca-pulse { opacity: 1; }
.pi-close .pca-line { stroke: rgba(243, 216, 142, 0.3); stroke-width: 1; }
.pi-close .pca-pulse {
  stroke: #F3D88E; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 12 88;
  animation: pcv-dash 3.4s linear infinite;
}
.pi-close .pca-node { fill: #F3D88E; animation: pcv-blip 2.8s ease-in-out infinite; }
.pi-close__actions { margin-top: var(--s-lg); justify-content: center; }
.pi-close .btn--ghost { border-color: rgba(243, 216, 142, 0.4); color: #F4E8DA; }
.pi-close .btn--ghost:hover { border-color: #F3D88E; color: #F3D88E; }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pi-hero::before, .pi-close::before, .pi-spine__dot, .pi-lens__foot i,
  .pil-data--pulse, .pi-new__badge i, .pi-close .pca-pulse, .pi-close .pca-node,
  .pir-ring, .pir-pulse, .pir-node, .pi-plaque__foot i { animation: none; }
  .pi-new__draft i { animation: none; }
  .js .pi-close__walk.reveal .pca-line { stroke-dashoffset: 0; transition: none; }
  .js .pi-close__walk.reveal .pcw-t, .js .pi-close__walk.reveal .pca-pulse { opacity: 1; transition: none; }
  .js .pi-chart.reveal .pi-bar i { scale: 1 1; transition: none; }
  .pi-data.is-ride .pi-spine::after { scale: 1 1; }
  .js .pi-trails.reveal .tpl { stroke-dashoffset: 0; transition: none; }
  .js .pi-trails.reveal .tpp, .js .pi-trails.reveal .tpe { opacity: 1; transition: none; }
  .tpp, .tpe { animation: none; }
  .pi-data.is-ride .pi-spine__item { --p: 1; }
  .js .pi-spine.reveal .pi-spine__item,
  .js .pi-ledger.reveal .pi-row,
  .js .pi-spine.reveal::before { scale: 1 1; transition: none; }
  .js .pi-plaque.reveal.is-in::before, .pi-plaque::before { scale: 1 1; transition: none; }
  .pi-row:hover { translate: none; }
  .pi-trail:hover b { translate: none; }
}