/* OWN Charts — Learning Library: orbit landing hero + topic section pages.
   Layers on tokens.css + app.css (the dashboard shell). Light, ivory-led,
   ocean-accented. Prefixed `lo-` (landing orbit) and `lt-` (learn topic)
   so nothing collides with the existing education.css. */

/* =================================================================
   ORBIT LANDING HERO
   ================================================================= */

/* =================================================================
   THE PATH — landing hero (replaces the orbit). A trail climbing to a
   summit flag; the ten territories are waypoint stations linking to
   their topic pages. Sits above the four "ways in".
   ================================================================= */
.lph{
  position: relative; display: flex; flex-direction: column;
  margin: 4px 0 6px;
}
.lph-head{ position: relative; z-index: 2; max-width: none; }
.lph-eye{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ocean); margin: 0 0 16px;
}
.lph-eye .rl{ width: 26px; height: 1.5px; background: var(--ocean); opacity: 0.6; display: inline-block; }
.lph-h1{
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.0; letter-spacing: -0.035em;
  color: var(--ink); margin: 0 0 18px; white-space: nowrap;
}
.lph-h1 em{ font-style: italic; color: var(--ocean); }
.lph-lead{ max-width: none; }
.lph-lead{
  font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 24px; text-wrap: pretty;
}
.lph-ctas{ display: flex; gap: 14px; flex-wrap: wrap; }
.lph-btn{
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.lph-btn .arr{ transition: transform .2s ease; }
.lph-btn:hover .arr{ transform: translateX(4px); }
.lph-btn-pri{ background: var(--ocean); color: var(--ivory); }
.lph-btn-pri:hover{ background: #0a2c2f; }
.lph-btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.lph-btn-ghost:hover{ border-color: var(--ink); }

.lph-scene{ position: relative; width: 100%; aspect-ratio: 1180 / 600; margin-top: clamp(14px,2vh,28px); z-index: 1; pointer-events: none; overflow: visible; }
.lph-scene a{ pointer-events: auto; cursor: pointer; text-decoration: none; }
.lph-station text{ text-decoration: none; }
.lph-trail{ fill: none; stroke: var(--ocean); stroke-width: 2.5; stroke-linecap: round; opacity: 0.42; stroke-dasharray: 1 11; }
.lph-trail-solid{ fill: none; stroke: var(--sea); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.lph-pole{ stroke: var(--ink); stroke-width: 2; }
.lph-station circle.dot{ transition: r .2s var(--ease-out); }
.lph-station .hit{ cursor: pointer; }
.lph-station:hover circle.dot{ r: 20; }
.lph-st-label{ font-family: var(--font-sans); font-size: 18px; fill: var(--ink-soft); font-weight: 500; transition: fill .15s, font-weight .15s; }
.lph-station:hover .lph-st-label{ fill: var(--ink); font-weight: 600; }
.lph-hint{ opacity: 0; transition: opacity .18s var(--ease-out); }
.lph-station:hover .lph-hint{ opacity: 1; }
.lph-hint-one{ font-family: var(--font-sans); font-size: 15px; fill: var(--ink); font-weight: 600; }
.lph-hint-go{ font-family: var(--font-sans); font-size: 13px; fill: var(--ocean); font-weight: 600; letter-spacing: 0.08em; }
.lph-goal{ cursor: pointer; }
.lph-goal circle{ transition: r .2s var(--ease-out); }
.lph-goal:hover circle{ r: 16; }
.lph-goal-label{ font-family: var(--font-serif); font-size: 20px; fill: var(--ink); font-weight: 400; }
.lph-goal-sub{ font-family: var(--font-sans); font-size: 11px; fill: var(--ocean); font-weight: 700; letter-spacing: 0.2em; }
.lph-start{ pointer-events: none; }
.lph-start .lph-goal-sub{ fill: var(--ink-mute); }

.lph-foot{
  position: relative; z-index: 2; margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap;
}
.lph-foot .lph-ctas{ flex: 0 1 auto; }
.lph-ms{ font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; }
.lph-ms-r{ text-align: right; }
.lph-ms b{ display: block; font-family: var(--font-serif); font-weight: 400; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; margin-top: 3px; }
.lph-free{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft);
  padding: 8px 15px 8px 11px; border-radius: 999px;
  background: rgba(14,58,62,0.06); border: 1px solid var(--ocean-faint);
}
.lph-free b{ color: var(--ocean); font-weight: 700; }
.lph-free-tag{
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory); background: var(--ocean); padding: 4px 8px; border-radius: 999px;
}
@media (max-width: 760px){
  .lph-h1{ white-space: normal; }
}

.lo {
  position: relative;
  margin: 6px 0 2px;
}
.lo-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 8px 48px; margin-bottom: 8px;
}
.lo-head .eye { margin-bottom: 14px; }
.lo-head h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 0.98; letter-spacing: -0.035em;
  color: var(--ink); max-width: none; text-wrap: balance; margin: 0;
}
.lo-head-sub {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); max-width: none; text-wrap: pretty;
}
@media (max-width: 900px) {
  .lo-head { grid-template-columns: 1fr; }
  .lo-head-sub { max-width: none; }
}

/* Stage: a square that holds the rings; scaled down on narrower columns. */
.lo-stagewrap {
  position: relative; width: 100%;
  height: var(--lo-h, 940px);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.lo-stage {
  position: relative; width: var(--lo-d, 940px); height: var(--lo-d, 940px);
  transform: scale(var(--lo-scale, 1)); transform-origin: center center;
}
@media (max-width: 1400px) { .lo-stagewrap { --lo-scale: 0.92; --lo-h: 880px; } }
@media (max-width: 1280px) { .lo-stagewrap { --lo-scale: 0.82; --lo-h: 800px; } }
@media (max-width: 1120px) { .lo-stagewrap { --lo-scale: 0.72; --lo-h: 720px; } }
@media (max-width: 960px)  { .lo-stagewrap { --lo-scale: 0.60; --lo-h: 600px; } }

.lo-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); border: 1px solid var(--ocean-faint);
  pointer-events: none;
}
.lo-ring.faint { border-color: var(--ocean-mute); border-style: dashed; }

.lo-track {
  position: absolute; inset: 0; animation: lo-spin linear infinite;
  will-change: transform; pointer-events: none;
}
.lo-planet {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--r)));
  pointer-events: none;
}
.lo-spin { animation: lo-spin linear infinite reverse; }
@keyframes lo-spin { to { transform: rotate(360deg); } }

/* pause the whole system on hover so a member can aim at a planet */
.lo-stage:hover .lo-track,
.lo-stage:hover .lo-spin { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lo-track, .lo-spin { animation: none !important; }
}

/* Disc planet — label inside the orb, so nothing overlaps as it spins. */
.lo-disc {
  position: relative; width: var(--orb); height: var(--orb);
  pointer-events: auto; text-decoration: none; display: block;
}
.lo-disc-face {
  width: 100%; height: 100%; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 34px -16px rgba(14,58,62,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0 16px; text-align: center;
  transition: transform 220ms var(--ease-out), box-shadow 220ms, border-color 220ms;
}
.lo-disc:hover .lo-disc-face,
.lo-disc:focus-visible .lo-disc-face {
  transform: scale(1.07); border-color: var(--ocean);
  box-shadow: 0 20px 46px -16px rgba(14,58,62,0.5);
}
.lo-disc-top { display: flex; align-items: center; gap: 6px; }
.lo-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lo-num {
  font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.lo-lab {
  font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: -0.01em;
  color: var(--ink); line-height: 1.04;
}
.lo-tip {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-sans); font-size: 11px; color: var(--ink-mute);
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 5px 11px;
  opacity: 0; transition: opacity 180ms; pointer-events: none;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.3); z-index: 3;
}
.lo-disc:hover .lo-tip, .lo-disc:focus-visible .lo-tip { opacity: 1; }

/* Maya-centred sun */
.lo-sun {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--sun, 216px); height: var(--sun, 216px); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 2; overflow: hidden;
  background: radial-gradient(circle at 38% 30%, #C6E7E1 0%, #86C7C0 38%, #2C6E6C 100%);
  box-shadow: 0 0 0 14px rgba(134,199,192,0.13), 0 0 0 34px rgba(134,199,192,0.06),
              0 28px 66px -24px rgba(14,58,62,0.6);
  color: #fff;
}
.lo-sun-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lo-sun-eye {
  font-family: var(--font-sans); font-weight: 500; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.85); white-space: nowrap;
}
.lo-sun-name {
  font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: -0.025em;
  line-height: 1; color: #fff; margin: 7px 0 5px; white-space: nowrap;
}
.lo-sun-sub {
  font-family: var(--font-sans); font-size: 10.5px; color: rgba(255,255,255,0.9); white-space: nowrap;
}

/* The four "ways in" — section cards (v2 numbered style) */
.lo-sections {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4px;
  align-items: stretch;
}
@media (max-width: 1080px) { .lo-sections { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lo-sections { grid-template-columns: 1fr; } }
.lo-card {
  text-align: left; cursor: pointer; appearance: none; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 17px 19px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms, background 160ms;
}
.lo-card:hover { border-color: var(--ocean); transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(14,58,62,0.4); }
.lo-card.active {
  border-color: var(--ocean);
  background: linear-gradient(180deg, rgba(14,58,62,0.06), rgba(14,58,62,0.015));
  box-shadow: 0 14px 34px -20px rgba(14,58,62,0.5);
}
.lo-card .n { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; color: var(--ocean); }
.lo-card b { font-family: var(--font-serif); font-weight: 400; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); }
.lo-card span { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--ink-mute); }
.lo-card .lo-card-arr {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ocean); opacity: 0.72;
}
.lo-card.active .lo-card-arr svg { transform: rotate(180deg); }
.lo-card .lo-card-arr svg { transition: transform 200ms ease; }

.lo-jump-lead {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  margin: 24px 0 12px; text-wrap: pretty;
}
.lo-break{ height: 3px; background: var(--ocean); border-radius: 999px; margin: 40px 0 6px; }

/* The four "ways in" sit on a faint ocean-washed band — a whisper of the brand
   accent, in step with the library's re-toned cool neutrals (replaced the old
   warm cream #F0ECE0) — the section reads as its own chapter. */
.lo-waysin{
  margin: 46px calc(50% - 50vw) 0;
  padding: 54px max(40px, calc(50vw - 680px)) 62px;
  background: #ECF0EF;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lo-waysin .lo-break{ margin: 0 0 18px; background: var(--ocean); }
.lo-waysin .lo-jump-lead{ color: var(--ink-soft); margin: 0 0 18px; }

/* ---- "Learn now" rich card (Take A — live preview) ---- */
.lo-now {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 20px 20px 18px; cursor: pointer; appearance: none; font: inherit; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  border: 1px solid var(--ocean-faint); border-radius: 20px;
  box-shadow: 0 16px 38px -22px rgba(14,58,62,0.45);
  transition: transform 160ms var(--ease-out), box-shadow 160ms, border-color 160ms;
}
.lo-now::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sea), var(--ocean)); }
.lo-now:hover { transform: translateY(-2px); border-color: var(--ocean); box-shadow: 0 22px 46px -22px rgba(14,58,62,0.55); }
.lo-now.active { border-color: var(--ocean); box-shadow: 0 22px 46px -22px rgba(14,58,62,0.6); }
.lo-now-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.lo-now-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocean); }
.lo-now-ring { width: 46px; height: 46px; flex: none; }
.lo-now-ring text { font-family: var(--font-sans); font-weight: 600; font-size: 11px; fill: var(--ocean); }
.lo-now-title { font-family: var(--font-serif); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; margin-bottom: 14px; }
.lo-now-next { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.lo-now-lesson { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--ink); line-height: 1.35; }
.lo-now-meta { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }
.lo-now-cta { margin-top: auto; padding-top: 16px; }
.lo-now-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--ocean); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; }
.lo-now-btn svg { transition: transform 160ms ease; }
.lo-now:hover .lo-now-btn svg { transform: translateX(3px); }

/* =================================================================
   TOPIC SECTION PAGE
   ================================================================= */
.lt-hero {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0;
  border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-card); margin: 18px 0 0;
}
@media (max-width: 1000px) { .lt-hero { grid-template-columns: 1fr; } }
.lt-hero-l { padding: 38px 40px; position: relative; }
.lt-hero-eye { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.lt-hero-dot { width: 11px; height: 11px; border-radius: 50%; }
.lt-hero-eye span {
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.lt-hero-l h1 {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 14px; max-width: none;
}
.lt-hero-l p {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  margin: 0; max-width: none;
}
.lt-hero-r {
  padding: 34px 34px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--bone);
}
@media (max-width: 1000px) { .lt-hero-r { border-left: 0; border-top: 1px solid var(--line); } }
.lt-signal-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocean); margin-bottom: 8px; }
.lt-signal-v { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 5vw, 4.25rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--ink); }
.lt-signal-l { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin-top: 12px; max-width: none; }

.lt-back {
  display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 16px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-mute); text-decoration: none;
}
.lt-back:hover { color: var(--ocean); }
.lt-back svg { transition: transform 160ms ease; }
.lt-back:hover svg { transform: translateX(-3px); }

/* Section header inside a topic page */
.lt-sec { margin: 44px 0 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.lt-sec h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.lt-sec-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 7px; }
.lt-sec-r { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-mute); white-space: nowrap; }

/* Lessons — clean numbered list */
.lt-lessons { display: flex; flex-direction: column; gap: 10px; }
.lt-lesson {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 16px;
  padding: 17px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  cursor: pointer; transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.lt-lesson:hover { border-color: var(--ocean); box-shadow: 0 10px 26px -16px rgba(14,58,62,0.4); transform: translateY(-1px); }
.lt-lesson-n { font-family: var(--font-serif); font-size: 22px; color: var(--ocean); line-height: 1; }
.lt-lesson-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lt-lesson-t { font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.3; }
.lt-lesson-m { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); display: flex; gap: 14px; }
.lt-lesson-go { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ocean); display: inline-flex; align-items: center; gap: 6px; }
.lt-lesson:hover .lt-lesson-go svg { transform: translateX(3px); }
.lt-lesson-go svg { transition: transform 150ms ease; }

/* Reads + charts grid */
.lt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .lt-grid3 { grid-template-columns: 1fr; } }
.lt-read {
  display: flex; flex-direction: column; gap: 9px; padding: 20px 21px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  text-decoration: none; transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.lt-read:hover { border-color: var(--ocean); box-shadow: 0 10px 26px -16px rgba(14,58,62,0.4); transform: translateY(-2px); }
.lt-read-tag { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.lt-read-t { font-family: var(--font-serif); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); line-height: 1.1; }
.lt-read-m { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); margin-top: auto; }

.lt-chart {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 21px; min-height: 116px;
  background: var(--obsidian); border-radius: 18px; color: var(--paper-light);
  text-decoration: none; transition: transform 150ms, box-shadow 150ms;
}
.lt-chart:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(0,0,0,0.5); }
.lt-chart-tag { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sea); }
.lt-chart-t { font-family: var(--font-serif); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; color: var(--ivory); line-height: 1.1; }
.lt-chart-m { font-family: var(--font-sans); font-size: 11.5px; color: var(--paper-mute); margin-top: auto; }

/* "See it in your plan" — link to the live data page */
.lt-applink {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 18px; padding: 22px 26px; border-radius: 20px;
  background: linear-gradient(110deg, var(--ocean) 0%, #0c3033 100%); color: var(--ivory);
  text-decoration: none;
}
.lt-applink-l { display: flex; flex-direction: column; gap: 4px; }
.lt-applink-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sea); }
.lt-applink-t { font-family: var(--font-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; }
.lt-applink-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--ivory); color: var(--ocean); font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.lt-applink:hover .lt-applink-cta svg { transform: translateX(3px); }
.lt-applink-cta svg { transition: transform 160ms ease; }

/* Related topics */
.lt-related { display: flex; flex-wrap: wrap; gap: 10px; }
.lt-rel {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); text-decoration: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.lt-rel:hover { border-color: var(--ocean); box-shadow: 0 8px 20px -14px rgba(14,58,62,0.5); }
.lt-rel-dot { width: 8px; height: 8px; border-radius: 50%; }

/* =================================================================
   "LEARN NOW" PANEL — the journey trail (Idea A)
   Arc of three levels + a connected module timeline for the current one.
   ================================================================= */
.ln { margin-top: 2px; }

/* three-level arc */
.ln-arc {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 0;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff;
}
.ln-stage {
  position: relative; text-align: left; appearance: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column;
  padding: 18px 22px 16px; padding-right: 96px; border-right: 1px solid var(--line); background: #fff;
  transition: background 160ms;
}
.ln-stage:last-child { border-right: 0; }
.ln-stage:hover { background: #fbfdfc; }
/* completed levels get a fresh mint wash, not warm bone */
.ln-stage.done { background: linear-gradient(180deg, rgba(134,199,192,0.16), rgba(134,199,192,0.05)); }
.ln-stage.now { background: linear-gradient(180deg, rgba(14,58,62,0.08), rgba(14,58,62,0.015)); }
.ln-stage.sel { box-shadow: inset 0 0 0 2px var(--ocean); }
.ln-stage-n { font-family: var(--font-sans); font-weight: 600; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; }
.ln-stage.now .ln-stage-n { color: var(--ocean); }
.ln-stage.done .ln-stage-n { color: #4F7E5F; }
.ln-stage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.ln-stage.done .ln-stage-dot { background: #5C9C84; }
.ln-stage.now .ln-stage-dot { background: var(--ocean); box-shadow: 0 0 0 4px rgba(14,58,62,0.14); }
.ln-stage-l { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin: 9px 0 4px; }
.ln-stage-d { display: block; font-family: var(--font-sans); font-size: 11.5px; line-height: 1.42; color: var(--ink-mute); }
.ln-stage-meta { display: flex; font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-faint); margin-top: 10px; align-items: center; gap: 6px; }
.ln-here { position: absolute; top: 16px; right: 18px; white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--ocean); border-radius: 999px; padding: 3px 9px; }
.ln-done-badge { position: absolute; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-weight: 600; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #4F7E5F; }

/* module header */
.ln-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 30px 0 16px; flex-wrap: wrap; }
.ln-mh-l { display: flex; align-items: baseline; gap: 13px; }
.ln-mh-t { font-family: var(--font-serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.ln-mh-s { font-family: var(--font-sans); font-size: 13px; color: var(--ink-mute); }
.ln-mh-prog { display: flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-mute); }
.ln-mh-bar { width: 130px; height: 6px; border-radius: 999px; background: rgba(10,10,10,0.08); overflow: hidden; }
.ln-mh-bar i { display: block; height: 100%; background: var(--ocean); border-radius: 999px; transition: width 400ms var(--ease-out); }

/* the vertical trail */
.ln-trail { position: relative; padding-left: 40px; }
.ln-trail::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 28px; width: 2px; background: var(--line); }
.ln-trail-fill { position: absolute; left: 15px; top: 14px; width: 2px; background: var(--ocean); border-radius: 2px; transition: height 400ms var(--ease-out); }
.ln-step { position: relative; margin-bottom: 12px; }
.ln-node {
  position: absolute; left: -40px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: #fff; border: 1px solid var(--line); font-family: var(--font-serif); font-size: 15px; color: var(--ink-mute);
}
.ln-step.cur .ln-node { border-color: var(--ocean); color: var(--ocean); box-shadow: 0 0 0 5px rgba(14,58,62,0.1); }
.ln-step.done .ln-node { background: #5C9C84; border-color: #5C9C84; color: #fff; }

.ln-row {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  width: 100%; text-align: left; appearance: none; font: inherit; cursor: pointer;
  padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.ln-row:hover { border-color: var(--ocean); box-shadow: 0 12px 28px -18px rgba(14,58,62,0.42); transform: translateY(-1px); }
.ln-step.cur .ln-row { border-color: var(--ocean); box-shadow: 0 16px 36px -20px rgba(14,58,62,0.45); }
.ln-step.done .ln-row { background: #fcfdfc; }
.ln-row-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ln-row-tx { min-width: 0; }
/* coloured glyph tile — the colour the module was missing */
.ln-tile {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
}
.ln-tile.big {
  width: 92px; height: 92px; border-radius: 18px;
  box-shadow: 0 16px 30px -16px rgba(14,58,62,0.5);
}
.ln-tag { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.ln-t { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); line-height: 1.12; }
.ln-step.cur .ln-t { font-size: 22px; }
.ln-hook { display: block; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 6px; max-width: none; }
.ln-m { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); display: flex; gap: 14px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.ln-diff { display: inline-flex; align-items: center; gap: 4px; }
.ln-diff i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.ln-uses { display: inline-flex; align-items: center; gap: 6px; }
.ln-uses-dot { width: 6px; height: 6px; border-radius: 50%; }
.ln-go { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; background: var(--ocean); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.ln-go svg { transition: transform 150ms ease; }
.ln-row:hover .ln-go svg { transform: translateX(3px); }
.ln-open { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ln-replay { color: #4F7E5F; }

.ln-end { position: relative; }
.ln-end .ln-node { background: var(--bone); border-style: dashed; color: var(--brass); }
.ln-end-card { padding: 15px 18px; border: 1px dashed var(--line-strong); border-radius: 16px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.ln-end-card b { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .ln-arc { grid-template-columns: 1fr; }
  .ln-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .ln-tile.big { width: 64px; height: 64px; }
}

/* =================================================================
   "BY STAGE" — THE ATLAS ARC (horizontal life-spine + editorial spread)
   A distinct "school": sunrise→sunset palette, set on per-element --c.
   ================================================================= */
.atlas { margin-top: 2px; }
.atlas-spine { position: relative; margin: 6px 0 4px; }
.atlas-line { position: relative; height: 3px; border-radius: 3px; margin: 0 26px;
  background: linear-gradient(90deg, #5C9C84, #2C8E86, #1E6E72, #2A5B7A, #3A4A7C, #6A4A7A, #A47A3C, #8A4A3C); }
.atlas-stations { display: flex; justify-content: space-between; margin-top: -10px; }
.atlas-stn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; appearance: none; background: none; border: 0; font: inherit; padding: 0 4px; }
.atlas-node { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--c); transition: transform 160ms, box-shadow 160ms; }
.atlas-stn:hover .atlas-node { transform: scale(1.18); }
.atlas-stn.sel .atlas-node { width: 22px; height: 22px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
.atlas-stn.here .atlas-node { background: var(--c); }
.atlas-stn-l { font-family: var(--font-serif); font-size: 13px; letter-spacing: -0.01em; color: var(--ink); margin-top: 11px; line-height: 1.05; max-width: 13ch; }
.atlas-stn.sel .atlas-stn-l { font-weight: 500; }
.atlas-stn-a { font-family: var(--font-sans); font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
.atlas-here-tag { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--c); border-radius: 999px; padding: 3px 8px; }

.atlas-spread { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; margin-top: 32px;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.atlas-l { position: relative; padding: 36px 36px 34px; color: #fff; overflow: hidden; }
.atlas-l::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,0.07); }
.atlas-num { font-family: var(--font-serif); font-weight: 400; font-size: 88px; line-height: 0.8; letter-spacing: -0.04em; color: rgba(255,255,255,0.94); }
.atlas-agepill { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 18px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,0.16); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; }
.atlas-job-eye { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 7px; }
.atlas-job { font-family: var(--font-serif); font-weight: 400; font-size: 31px; letter-spacing: -0.025em; line-height: 1.0; color: #fff; margin-bottom: 18px; max-width: none; }
.atlas-focus { position: relative; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.93); max-width: none; }
.atlas-r { padding: 32px 34px; }
.atlas-r-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.atlas-r-sub { font-family: var(--font-sans); font-size: 12px; color: var(--ink-faint); margin-bottom: 18px; }
.atlas-lesson { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 15px; width: 100%; text-align: left; appearance: none; background: none; font: inherit; padding: 16px 6px; border: 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding-left 140ms; }
.atlas-lesson:first-of-type { border-top: 0; }
.atlas-lesson:hover { padding-left: 12px; }
.atlas-lesson:hover .atlas-lt { color: var(--ocean); }
.atlas-lesson.done .atlas-lt { color: var(--ink-mute); }
.atlas-ln { font-family: var(--font-serif); font-size: 19px; line-height: 1; display: inline-flex; align-items: center; }
.atlas-lmain { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.atlas-lt { font-family: var(--font-sans); font-weight: 450; font-size: 14.5px; line-height: 1.4; color: var(--ink); transition: color 140ms; }
.atlas-lgo { color: var(--ink-faint); display: inline-flex; }
.atlas-lesson:hover .atlas-lgo { color: var(--ocean); }

@media (max-width: 1100px) {
  .atlas-stn-l { font-size: 11px; }
  .atlas-stn-a { display: none; }
}
@media (max-width: 820px) {
  .atlas-spread { grid-template-columns: 1fr; }
  .atlas-stations { overflow-x: auto; gap: 18px; }
  .atlas-stn { min-width: 92px; }
}

/* =================================================================
   "TRACKS" — THE STACKS (six library shelves, all visible)
   A third "school": browse the whole field, topic colours per shelf.
   ================================================================= */
.stk { margin-top: 2px; }
.stk-shelves { display: flex; flex-direction: column; gap: 14px; }
.stk-shelf { display: grid; grid-template-columns: 236px 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; transition: box-shadow 160ms; }
.stk-shelf:hover { box-shadow: 0 16px 42px -26px color-mix(in srgb, var(--c) 70%, transparent); }
.stk-spine { position: relative; padding: 20px 20px; color: #fff; overflow: hidden; display: flex; flex-direction: column; }
.stk-spine::after { content: ""; position: absolute; right: -30px; bottom: -34px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.stk-spine-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.stk-spine-top svg { flex: none; opacity: 0.96; }
.stk-spine-l { font-family: var(--font-serif); font-weight: 400; font-size: 23px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.stk-spine-tag { position: relative; font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.9); }
.stk-spine-meta { position: relative; margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.stk-spine-done { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.stk-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px; background: var(--line); border-left: 1px solid var(--line); }
.stk-book { min-width: 0; text-align: left; appearance: none; background: #fff; border: 0; font: inherit; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: background 140ms; }
.stk-book:hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.stk-book.done { background: color-mix(in srgb, var(--c) 5%, #fff); }
.stk-book-n { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.stk-book-t { font-family: var(--font-serif); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.stk-book-d { font-family: var(--font-sans); font-size: 11px; line-height: 1.4; color: var(--ink-mute); }
.stk-book-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 140ms; }
.stk-book:hover .stk-book-go { opacity: 0.85; }

@media (max-width: 1040px) {
  .stk-shelf { grid-template-columns: 1fr; }
}

/* =================================================================
   "GO DEEPER" — THE ARCHIVE / CARD CATALOGUE (V2)
   A creamy deep-teal reading room; four collections as tactile cream
   cards with a coloured file-tab and checkout stamp.
   ================================================================= */
.gd2-room { position: relative; overflow: hidden; border-radius: 24px; padding: 34px 36px 36px; color: #F3EEE2; margin-top: 4px;
  background: radial-gradient(120% 100% at 12% 0%, #16403A 0%, #102E2C 52%, #0C2422 100%); }
.gd2-eye { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.14em; color: #86C7C0; margin-bottom: 14px; }
.gd2-h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.0; color: #FBF7EE; margin: 0 0 10px; max-width: none; }
.gd2-lede { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; color: rgba(243,238,226,0.72); max-width: none; margin: 0 0 28px; }
.gd2-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 18px; }
/* The Plate — museum specimen cards: square-cut, hairline-bordered warm
   cream, one thin accent edge at top, quiet catalogue number, monochrome
   line mark. No tab, no stamp, no rotation. */
.gd2-card { position: relative; text-align: left; appearance: none; font: inherit; cursor: pointer;
  background: #FFFFFF; border: 1px solid #EAE7DE; border-top: 3px solid var(--c); border-radius: 3px;
  padding: 24px 24px 20px; color: #16302C; display: flex; flex-direction: column; text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18); transition: transform 150ms var(--ease-out), box-shadow 150ms; }
.gd2-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(0,0,0,0.55); }
.gd2-card.active { box-shadow: 0 0 0 2px var(--c), 0 12px 26px -16px rgba(0,0,0,0.55); }
.gd2-top { display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 13px; border-bottom: 1px solid rgba(22,48,44,0.14); margin-bottom: 16px; }
.gd2-cat { font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.2em; font-weight: 600; color: color-mix(in srgb, var(--c) 72%, #16302C); }
.gd2-no { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; font-weight: 600; color: color-mix(in srgb, var(--c) 78%, #16302C); }
.gd2-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: color-mix(in srgb, var(--c) 82%, #16302C); }
.gd2-ico svg { width: 24px; height: 24px; }
.gd2-t { font-family: var(--font-serif); font-weight: 400; font-size: 23px; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 7px; color: color-mix(in srgb, var(--c) 30%, #16302C); }
.gd2-d { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: rgba(22,48,44,0.72); margin-bottom: 16px; }
.gd2-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(22,48,44,0.12); }
.gd2-feat { font-family: var(--font-sans); font-size: 11px; color: rgba(22,48,44,0.66); display: inline-flex; align-items: center; gap: 7px; }
.gd2-feat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.gd2-go { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #16302C); }
.gd2-card.active .gd2-go::after { content: "· open below"; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.6; }

/* the opened collection sits just under the room, tied by a coloured edge */
.gd2-open { border: 1px solid var(--line); border-top: 4px solid var(--c, var(--ocean)); border-radius: 0 0 20px 20px; background: #fff; padding: 26px 28px 28px; margin-top: -6px; }
.gd2-open-eye { font-family: var(--font-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.gd2-open-eye .sw { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }

@media (max-width: 760px) { .gd2-grid { grid-template-columns: 1fr; } }

/* =================================================================
   GO DEEPER · CONCEPTS — "THE IDEA MAP" (tiers of connected chips)
   ================================================================= */
.im { margin-top: 2px; }
.im-intro { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: none; margin: 0 0 10px; text-wrap: pretty; }
.im-tiers { display: flex; flex-direction: column; }
.im-tier { position: relative; padding: 18px 0 18px 156px; min-height: 76px; }
.im-tier-l { position: absolute; left: 0; top: 20px; width: 132px; }
.im-tier-k { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.im-tier-s { font-family: var(--font-sans); font-size: 11px; color: var(--ink-mute); margin-top: 4px; line-height: 1.38; }
.im-rail { position: absolute; left: 144px; top: 6px; bottom: -6px; width: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); }
.im-tier:last-child .im-rail { bottom: 18px; }
.im-node { position: absolute; left: 138px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); border: 3px solid var(--c); z-index: 1; }
.im-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.im-chip { text-align: left; appearance: none; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; background: #fff; border: 1px solid var(--line); border-radius: 13px; transition: transform 140ms, box-shadow 140ms, border-color 140ms; max-width: 232px; }
.im-chip:hover { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--c) 70%, transparent); }
.im-chip b { font-family: var(--font-serif); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.im-chip span { font-family: var(--font-sans); font-size: 11px; color: var(--ink-mute); line-height: 1.38; }
.im-cap, .im-flag { display: flex; align-items: center; gap: 13px; }
.im-cap { margin: 4px 0 6px; }
.im-cap-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #15302C; }
.im-cap-t { font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.im-cap-s { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-mute); }
.im-flag { margin-top: 14px; padding: 16px 20px; border-radius: 16px; color: #F3EEE2; background: radial-gradient(120% 100% at 12% 0%, #16403A, #0C2422); }
.im-flag-ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.14); display: grid; place-items: center; flex: none; color: #86C7C0; }
.im-flag-t { font-family: var(--font-serif); font-size: 20px; color: #FBF7EE; }
.im-flag-s { font-family: var(--font-sans); font-size: 12px; color: rgba(243,238,226,0.78); margin-top: 2px; }
@media (max-width: 720px) {
  .im-tier { padding-left: 0; padding-top: 8px; }
  .im-tier-l { position: static; width: auto; margin-bottom: 10px; }
  .im-rail, .im-node { display: none; }
}

/* =================================================================
   GO DEEPER · GLOSSARY — "THE CARD CATALOGUE" (search + A–Z + cards)
   ================================================================= */
.glc { margin-top: 2px; --c: #3E8FB0; }
.glc-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.glc-search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color 140ms; }
.glc-search:focus-within { border-color: var(--c); }
.glc-search svg { color: var(--ink-faint); flex: none; }
.glc-search input { border: 0; outline: 0; font: inherit; font-size: 14px; color: var(--ink); background: none; width: 100%; }
.glc-clear { border: 0; background: rgba(10,10,10,0.06); color: var(--ink-mute); width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; flex: none; }
.glc-clear:hover { background: rgba(10,10,10,0.12); }
.glc-count { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.glc-az { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.glc-az a, .glc-az span { width: 24px; height: 24px; display: grid; place-items: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; border-radius: 7px; text-decoration: none; }
.glc-az a { color: #15302C; background: color-mix(in srgb, var(--c) 20%, #fff); font-weight: 600; transition: background 140ms, transform 140ms; }
.glc-az a:hover { background: var(--c); transform: translateY(-1px); }
.glc-az span.off { color: var(--ink-faint); opacity: 0.4; }
.glc-cards { columns: 3; column-gap: 12px; }
.glc-group { break-inside: avoid; margin-bottom: 12px; }
.glc-letter { font-family: var(--font-serif); font-weight: 400; font-size: 15px; color: var(--c); margin: 4px 0 8px; padding-bottom: 5px; border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); }
.glc-card { break-inside: avoid; margin-bottom: 10px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 12px; scroll-margin-top: 90px; transition: box-shadow 140ms, transform 140ms; }
.glc-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0,0,0,0.28); }
.glc-card.gl-target { animation: glc-flash 1.6s var(--ease-out); }
@keyframes glc-flash { 0%, 30% { background: color-mix(in srgb, var(--c) 16%, #fff); } 100% { background: #fff; } }
.glc-term { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.glc-t { font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.glc-aka { font-family: ui-monospace, monospace; font-size: 10px; color: var(--c); }
.glc-d { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.glc-d a.gl-xref { color: var(--c); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--c) 60%, transparent); cursor: pointer; }
.glc-empty { font-family: var(--font-sans); font-size: 13px; color: var(--ink-mute); padding: 18px 0; }
@media (max-width: 1000px) { .glc-cards { columns: 2; } }
@media (max-width: 640px) { .glc-cards { columns: 1; } }

/* =================================================================
   GO DEEPER · CHARTS — "THE GALLERY WALL" + search/filter engine
   ================================================================= */
.cg { margin-top: 2px; }
.cg-intro { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: none; margin: 0 0 16px; text-wrap: pretty; }
.cg-intro b { color: var(--ink); font-weight: 600; }

/* toolbar */
.cg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cg-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color 140ms; }
.cg-search:focus-within { border-color: var(--ocean); }
.cg-search svg { color: var(--ink-faint); flex: none; }
.cg-search input { border: 0; outline: 0; font: inherit; font-size: 14px; color: var(--ink); background: none; width: 100%; }
.cg-search .cg-clear { border: 0; background: rgba(10,10,10,0.06); color: var(--ink-mute); width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; flex: none; }
.cg-seg { display: inline-flex; background: var(--bone); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; }
.cg-seg button { appearance: none; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-mute); padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 140ms, color 140ms; white-space: nowrap; }
.cg-seg button:hover { color: var(--ink); }
.cg-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.cg-seg .cg-segn { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-faint); }
.cg-seg button.on .cg-segn { color: var(--ocean); }
.cg-seg .ld { width: 7px; height: 7px; border-radius: 50%; }
.cg-seg .ld.live { background: #4E9E6E; } .cg-seg .ld.standby { background: #3E8FB0; } .cg-seg .ld.explore { background: var(--ink-faint); }
.cg-select { position: relative; }
.cg-select select { appearance: none; font: inherit; font-size: 12.5px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 9px 32px 9px 14px; cursor: pointer; }
.cg-select::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; font-size: 11px; }
/* topic navigation — every subject area as a visible, tappable chip */
.cg-topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.cg-topic { appearance: none; cursor: pointer; font: inherit; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; display: inline-flex; align-items: center; gap: 7px; transition: border-color 140ms, color 140ms, background 140ms; }
.cg-topic:hover { border-color: var(--ocean); color: var(--ink); }
.cg-topic.on { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.cg-topicn { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-faint); }
.cg-topic:hover .cg-topicn { color: var(--ink-mute); }
.cg-topic.on .cg-topicn { color: rgba(255,255,255,0.72); }
.cg-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-soft); cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.cg-toggle.on { border-color: var(--ocean); color: var(--ocean); background: rgba(14,58,62,0.04); }
.cg-toggle .box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ink-faint); display: grid; place-items: center; }
.cg-toggle.on .box { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.cg-count { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.cg-count b { color: var(--ink); font-weight: 600; }

/* the gallery wall — a row-aligned grid so cards line up horizontally */
.cg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1040px) { .cg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cg-grid { grid-template-columns: 1fr; } }
.cg-frame { break-inside: avoid; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform 150ms, box-shadow 150ms; }
.cg-frame:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(0,0,0,0.28); }
.cg-frame.live { border-color: color-mix(in srgb, #4E9E6E 40%, var(--line)); }
.cg-art { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 20%, #fff), color-mix(in srgb, var(--c) 6%, #fff)); }
.cg-art-h { height: 56px; }
.cg-pat { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--c) 72%, #15302C); }
.cg-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.cg-tag.live { color: #2E6E48; background: rgba(78,158,110,0.16); }
.cg-tag.standby { color: #2C6B86; background: rgba(62,143,176,0.16); }
.cg-tag.notplan { color: var(--ink-mute); background: rgba(10,10,10,0.06); }
.cg-tag .ld { width: 6px; height: 6px; border-radius: 50%; }
.cg-tag.live .ld { background: #4E9E6E; }
.cg-cap { padding: 14px 16px 15px; }
.cg-cap-cat { font-family: var(--font-sans); font-weight: 600; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); margin-bottom: 7px; }
.cg-cap-t { font-family: var(--font-serif); font-weight: 400; font-size: 17px; letter-spacing: -0.015em; color: var(--ink); line-height: 1.12; }
.cg-cap-d { font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--ink-mute); margin-top: 6px; }
.cg-arch { font-family: var(--font-sans); font-size: 11px; line-height: 1.4; color: var(--ink-mute); margin-top: 9px; padding: 8px 10px; background: rgba(10,10,10,0.04); border-radius: 8px; }
.cg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.cg-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 12px; padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); appearance: none; transition: border-color 140ms, background 140ms; }
.cg-btn:hover { border-color: var(--ocean); }
.cg-btn.primary { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.cg-open { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--ocean); text-decoration: none; margin-left: auto; white-space: nowrap; }
.cg-empty { font-family: var(--font-sans); font-size: 13px; color: var(--ink-mute); padding: 30px 0; text-align: center; }
@media (max-width: 620px) { .cg-bar { flex-direction: column; align-items: stretch; } .cg-seg { overflow-x: auto; } }


/* ============================================================
   CIVIC HERO (logged-out landing) — replaces the orbit hero.
   Three switchable treatments: A Dawn · B Beacon · C Aperture.
   ============================================================ */
.eduHero { position: relative; margin: 2px 0 10px; }
.heroSwitch { position: absolute; top: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 10px;
  background: var(--paper, #FCFBF9); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 8px 6px 13px; box-shadow: var(--shadow-card); }
.heroSwitch .hl { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.heroSwitch .seg { display: inline-flex; background: var(--bone); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.heroSwitch .seg button { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-mute); border: none; background: none; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.heroSwitch .seg button.on { background: var(--ink); color: #fff; }
.heroSwitch .seg button:hover:not(.on) { color: var(--ink); }

.eduHero .heroEye { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; margin: 0; display: inline-flex; align-items: center; gap: 11px; }
.eduHero .heroEye::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: 0.6; display: inline-block; }
.eduHero .heroH { font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 82px); line-height: 0.94; letter-spacing: -0.04em; margin: 20px 0 0; text-wrap: balance; }
.eduHero .heroH em { font-style: normal; color: var(--ocean); }
.eduHero .heroLead { font-family: var(--font-sans); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.62; color: var(--ink-soft); max-width: none; margin: 22px 0 0; }
.eduHero .heroCtas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hbtn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; white-space: nowrap; line-height: 1;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, color .16s; }
.hbtn .harr { transition: transform .2s; }
.hbtn:hover .harr { transform: translateX(3px); }
.hbtn-pri { background: var(--ocean); color: #fff; }
.hbtn-pri:hover { background: #0a2a2d; }
.hbtn-sea { background: var(--sea); color: var(--obsidian); }
.hbtn-sea:hover { background: #a6d8d2; }
.hbtn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.hbtn-line:hover { border-color: var(--ink); }
.hbtn-ghost { background: transparent; color: var(--ivory); border-color: var(--line-dark-strong); }
.hbtn-ghost:hover { border-color: var(--ivory); background: rgba(255,255,255,0.05); }

/* A — Dawn (obsidian) */
.htA { position: relative; overflow: hidden; background: var(--obsidian); color: var(--ivory); border-radius: var(--r-card-lg); box-shadow: var(--shadow-hero); padding: clamp(40px, 5vw, 76px); }
.htA .heroEye { color: var(--sea); }
.htA .heroH { color: #fff; }
.htA .heroLead { color: var(--paper-soft); max-width: none; }
.htA .heroInner { position: relative; z-index: 2; max-width: none; }
.htA .heroCtas { position: relative; z-index: 2; }
.htA .dawn { position: absolute; left: 50%; bottom: -46%; transform: translateX(-50%); width: 150%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(134,199,192,0.22), rgba(164,135,88,0.12) 46%, transparent 72%); }
.htA .sun { position: absolute; right: 0; bottom: 0; width: min(46%, 460px); height: auto; pointer-events: none; opacity: 0.9; }

/* B — Beacon (ivory) */
.htB { position: relative; overflow: hidden; border-radius: var(--r-card-lg); padding: clamp(16px, 2vw, 36px) 0; }
.htB .heroEye { color: var(--ocean); }
.htB .heroInner { position: relative; z-index: 2; max-width: none; }
.htB .heroLead { position: relative; z-index: 2; max-width: none; }
.htB .heroCtas { position: relative; z-index: 2; }
.htB .beacon { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(50%, 520px); height: auto; pointer-events: none; }
.htB .beaconWash { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); width: min(44%, 480px); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14,58,62,0.10), rgba(134,199,192,0.10) 45%, transparent 70%); }

/* C — Aperture (split) */
.htC { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(28px, 4vw, 60px); align-items: stretch; }
.htC .cText { display: flex; flex-direction: column; justify-content: center; }
.htC .aperture { position: relative; border-radius: var(--r-card-lg); overflow: hidden; background: var(--obsidian); min-height: clamp(300px, 40vh, 480px); box-shadow: var(--shadow-hero); }
.htC .aperture .slot { position: absolute; inset: 0; background: radial-gradient(120% 78% at 72% 50%, rgba(244,238,225,0.95), rgba(164,135,88,0.55) 30%, rgba(20,28,28,0) 62%); clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%, 58% 50%); }
.htC .aperture .beam { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 46%, rgba(134,199,192,0.18) 54%, transparent 60%); }
.htC .aperture .figs { position: absolute; left: 8%; bottom: 12%; display: flex; gap: 10px; align-items: flex-end; opacity: 0.5; }
.htC .aperture .figs i { display: block; width: 10px; border-radius: 6px 6px 0 0; background: rgba(244,244,241,0.5); }

@media (max-width: 860px) { .htC { grid-template-columns: 1fr; } .htC .aperture { min-height: 220px; } }
@media (max-width: 640px) { .heroSwitch { position: static; margin: 0 0 16px; width: max-content; } }