/* ==========================================================================
   JOURNAL — components for features/study-material.html

   The page has to show a product that lives in a completely different visual
   world: warm paper, Baloo 2, teal and olive, sized for a nine-year-old. So
   the .jrn block deliberately does NOT inherit the site's dark tokens — it
   carries its own local palette and hands it back at the block boundary.
   Everything else on the page uses the ordinary tokens.

    1. Hero banner (.jbn)
    2. The spine (.spn)
    3. The journal miniature (.jrn)
    4. The cast (.cst)
    5. Question sets and the key (.chk)
    6. Vedic methods (.vd)
    7. Targeting (.tgt)
    8. Reduced motion
   ========================================================================== */


/* ---------- 1. Hero banner ----------
   An open journal spread: the story on the left page, the question set and
   its answer key on the right, a page turning back toward the spine, and the
   next chapter waiting behind. Anchored exactly like .sbn__bars on the other
   feature pages — same 31% cap, same parallax off --px/--py, same left-edge
   mask fading it into the headline. */

.jbn {
  position: absolute;
  top: 50%;
  right: 1.5%;
  width: min(31%, 460px);
  translate: calc(var(--px) * 22px) calc(-50% + var(--py) * 20px);
  transition: translate 1.3s var(--ease);
  overflow: visible;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}

/* the book itself */
.jbn__page {
  fill: rgba(var(--sheen), 0.028);
  stroke: var(--line-soft);
  stroke-width: 1.1;
}
.jbn__spine { stroke: var(--line); stroke-width: 1; }
.jbn__ring  { fill: none; stroke: var(--line); stroke-width: 1.2; }

/* the chapter queued behind this one, easing forward on the loop */
.jbn__next {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 1;
  opacity: 0.45;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: jbn-next 7s var(--ease-io) infinite;
}
@keyframes jbn-next {
  0%, 10%   { opacity: 0; transform: translateX(14px) scale(0.97); }
  26%, 74%  { opacity: 0.45; transform: none; }
  92%, 100% { opacity: 0; transform: translateX(14px) scale(0.97); }
}

/* LEFT PAGE — story */
.jbn__face {
  fill: rgba(var(--deco-rgb), 0.22);
  stroke: rgba(var(--deco-rgb), 0.5);
  stroke-width: 1;
}

.jbn__bub {
  fill: rgba(var(--deco-rgb), 0.09);
  stroke: rgba(var(--deco-rgb), 0.3);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: jbn-pop 7s var(--ease) infinite;
  animation-delay: calc(var(--d) * 0.22s);
}
/* the teacher's bubble reads warmer, as it does in the journals */
.jbn__bub--guru {
  fill: rgba(var(--p8-rgb), 0.1);
  stroke: rgba(var(--p8-rgb), 0.34);
}

@keyframes jbn-pop {
  0%, 5%    { opacity: 0; transform: translateY(4px) scale(0.94); }
  15%, 76%  { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(4px) scale(0.94); }
}

/* body copy and question lines writing themselves in, left to right */
.jbn__ln,
.jbn__q {
  fill: var(--line);
  transform-box: fill-box;
  transform-origin: left center;
  animation: jbn-write 7s var(--ease-io) infinite;
  animation-delay: calc(var(--d) * 0.14s + 0.7s);
}
.jbn__q { fill: var(--line); }

@keyframes jbn-write {
  0%, 8%    { transform: scaleX(0); }
  24%, 78%  { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}

/* RIGHT PAGE — the numbered tab every section carries */
.jbn__tab {
  fill: rgba(var(--deco-rgb), 0.9);
  animation: jbn-tab 7s var(--ease) infinite;
}
@keyframes jbn-tab {
  0%, 6%    { opacity: 0; }
  16%, 80%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.jbn__head { fill: rgba(var(--deco-rgb), 0.62); }

/* the answer key, checked off */
.jbn__key {
  fill: rgba(var(--deco-rgb), 0.06);
  stroke: rgba(var(--deco-rgb), 0.34);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.jbn__keyln { fill: rgba(var(--deco-rgb), 0.4); }

.jbn__tick {
  stroke: var(--deco);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  animation: jbn-tick 7s var(--ease) infinite;
}
@keyframes jbn-tick {
  0%, 44%   { stroke-dashoffset: 20; }
  56%, 82%  { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: 20; }
}

/* the page turning back toward the binding */
.jbn__turn {
  fill: rgba(var(--deco-rgb), 0.05);
  stroke: rgba(var(--deco-rgb), 0.22);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: left center;
  animation: jbn-turn 7s var(--ease-io) infinite;
}
@keyframes jbn-turn {
  0%        { opacity: 0; transform: scaleX(1); }
  4%        { opacity: 0.85; transform: scaleX(1); }
  16%       { opacity: 0; transform: scaleX(0); }
  100%      { opacity: 0; transform: scaleX(0); }
}


/* ---------- 2. The spine ---------- */

.spn {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  /* stretch, not start: the rail is eleven rows tall and the stage was
     collapsing to its own content, leaving the void beside it */
  align-items: stretch;
}

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

.spn__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

/* the through-line every step sits on */
.spn__rail::before {
  content: "";
  position: absolute;
  left: 1.95rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(var(--line-soft), var(--line), var(--line-soft));
}

.spn__step {
  width: 100%;
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  text-align: left;
  color: var(--muted);
  font-size: 1.02rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.spn__step i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
              transform 0.35s var(--ease);
}

.spn__step:hover { background: rgba(var(--accent-rgb), 0.05); color: var(--text-2); }
.spn__step:hover i { border-color: rgba(var(--accent-rgb), 0.5); transform: scale(1.06); }

.spn__step[aria-selected="true"] {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.28);
  color: var(--paper);
}
.spn__step[aria-selected="true"] i {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.spn__step:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* the two steps that behave differently from the other nine */
.spn__step--var  span::after,
.spn__step--opt  span::after {
  content: "varies";
  margin-left: 0.5rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--muted-2);
  vertical-align: 1px;
}
.spn__step--opt span::after { content: "optional"; }

.spn__stage {
  position: relative;
  min-height: 22rem;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
}

.spn__pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.4vw, 2.3rem);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}

.spn__pane.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* the example sits at the foot of the panel whatever the copy length,
   so the eleven panes share one baseline instead of ragging */
.spn__ex { margin-top: auto !important; }

.spn__kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.7rem;
}

.spn__pane h3 { margin: 0 0 0.8rem; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); }
.spn__pane p { color: var(--text-2); font-size: 1.04rem; line-height: 1.72; margin: 0 0 1.1rem; max-width: 46ch; }

.spn__ex {
  padding: 0.95rem 1.1rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--muted) !important;
  font-size: 0.97rem !important;
  line-height: 1.6;
}
.spn__ex em { color: var(--accent-ink); font-style: normal; }

.spn__note {
  margin: 1.6rem 0 0;
  max-width: 74ch;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--muted-2);
}
.spn__note b { color: var(--text-2); }


/* ---------- 3. The journal miniature ----------
   A self-contained visual world. Every colour below is local to .jrn so the
   site's dark tokens cannot leak in and flatten it. */

.jrn {
  --j-paper: #fcfaf5;
  --j-ink: #20292c;
  --j-ink2: #4a5a5e;
  --j-teal: #12564e;
  --j-teal2: #1f7a6f;
  --j-teal3: #2b9488;
  --j-pale: #e6f2f0;
  --j-rule: #d9e5e2;
  --j-disp: "Baloo 2", var(--font-display), sans-serif;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  align-items: start;
}

.jrn__sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--j-rule);
  border-radius: 14px;
  padding: 1.5rem 1.35rem 1.25rem;
  color: var(--j-ink);
  font-size: 0.86rem;
  line-height: 1.62;
  opacity: 0;
  transform: translateY(18px) rotate(-0.4deg);
  transition: opacity 0.6s ease var(--d), transform 0.7s var(--ease) var(--d),
              box-shadow 0.4s ease;
  box-shadow: 0 10px 26px rgba(18, 86, 78, 0.1);
}

.jrn.is-on .jrn__sheet { opacity: 1; transform: none; }

.jrn__sheet:hover {
  box-shadow: 0 18px 40px rgba(18, 86, 78, 0.2);
  z-index: 2;
}

.jrn__tab {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--j-teal);
  color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}

.jrn__h {
  font-family: var(--j-disp);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--j-teal);
  margin: 0.35rem 0 0.8rem;
}

/* -- the cover sheet -- */
.jrn__sheet--cover {
  background: linear-gradient(160deg, #2c5e2e, #5f9a3e 52%, #b3cc5e);
  border: none;
  color: #fff;
}

.jrn__eyebrow {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #eaf5dc;
  margin-bottom: 0.5rem;
}

.jrn__title {
  font-family: var(--j-disp);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0 0 0.3rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.jrn__sub { margin: 0 0 0.9rem; font-size: 0.78rem; color: #f2f8e8; }

.jrn__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }

.jrn__badge {
  flex: 1 1 auto;
  min-width: 3.4rem;
  text-align: center;
  padding: 0.35rem 0.4rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.34);
  transition: background 0.3s ease, transform 0.35s var(--ease);
}
.jrn__badge:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.jrn__badge b { display: block; font-family: var(--j-disp); font-size: 0.82rem; color: #fff; }
.jrn__badge i {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.5rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #eaf5dc;
}

.jrn__obj {
  background: rgba(255, 255, 255, 0.15);
  border: 1px dashed rgba(255, 255, 255, 0.48);
  border-radius: 11px;
  padding: 0.8rem 0.9rem;
}
.jrn__obj h4 { margin: 0 0 0.4rem; font-family: var(--j-disp); font-size: 0.86rem; color: #fff; }
.jrn__obj ul { margin: 0; padding-left: 1.1rem; }
.jrn__obj li { margin-bottom: 0.2rem; font-size: 0.78rem; color: #f6fbef; }
.jrn__obj em {
  font-style: normal;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  padding: 0 3px;
}

/* -- comic panels -- */
.jrn__panel { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; align-items: flex-start; }

.jrn__who {
  flex: 0 0 3rem;
  text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  color: var(--j-ink2);
}
.jrn__who i {
  display: block;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--j-pale);
  border: 2px solid var(--j-teal3);
  border-radius: 10px;
  padding: 0.3rem 0;
  margin-bottom: 0.2rem;
  transition: transform 0.35s var(--ease);
}
.jrn__panel:hover .jrn__who i { transform: translateY(-2px) rotate(-4deg); }

.jrn__bub {
  flex: 1;
  margin: 0;
  background: #fff;
  border: 2px solid var(--j-teal3);
  border-radius: 3px 12px 12px 12px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
}
.jrn__bub--guru { border-color: #6fa844; background: #fffaf2; }
.jrn__bub--think { border-style: dashed; }
.jrn__bub b { color: #16413c; font-weight: 800; }
.jrn__bub em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 56%, #ffe08a 56%);
  padding: 0 2px;
}

/* -- the discovery sheet -- */
.jrn__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.7rem; }
@media (max-width: 420px) { .jrn__cols { grid-template-columns: 1fr; } }

.jrn__col {
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.74rem;
  transition: transform 0.35s var(--ease);
}
.jrn__col:hover { transform: translateY(-2px); }
.jrn__col h4 { margin: 0 0 0.3rem; font-family: var(--j-disp); font-size: 0.8rem; }
.jrn__col p { margin: 0; }
.jrn__col--yes { background: #eefaf0; border: 1px solid #8fca9a; }
.jrn__col--no  { background: #fdeef1; border: 1px solid #f0aeba; }

.jrn__rule {
  background: #fff6e0;
  border: 1px solid #e9c476;
  border-radius: 11px;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
}
.jrn__rule p { margin: 0 0 0.3rem; }
.jrn__rule b { color: #16413c; font-weight: 800; }
.jrn__mark {
  margin: 0.5rem 0 0 !important;
  background: linear-gradient(180deg, transparent 56%, #ffe08a 56%);
  display: inline;
  padding: 0 2px;
}

/* -- brain check sheet -- */
.jrn__q { margin: 0 0 0.25rem; font-weight: 800; color: #16413c; font-size: 0.8rem; }
.jrn__opts { margin: 0 0 0.5rem; font-size: 0.76rem; color: var(--j-ink2); }

.jrn__ans {
  background: #f4faf9;
  border: 1px solid #cfe6e2;
  border-radius: 9px;
  padding: 0.42rem 0.7rem;
  margin-bottom: 0.7rem;
  font-size: 0.76rem;
}
.jrn__ans summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--j-teal);
}
.jrn__ans summary::-webkit-details-marker { display: none; }
.jrn__ans summary::before { content: "\1F511  "; }
.jrn__ans[open] { background: #eef7f5; }
.jrn__ans p { margin: 0.4rem 0 0; }


/* ---------- 4. The cast ---------- */

.cst { display: grid; gap: 1.1rem; }

.cst__who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.9rem;
}

.cst__card {
  position: relative;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.35s ease;
}

/* the character's own colour arrives as a wash from the top */
.cst__card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 55%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cst__card:hover { transform: translateY(-5px); border-color: var(--cc); }
.cst__card:hover::before { opacity: 1; }

.cst__face {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  margin-bottom: 0.8rem;
  transition: transform 0.45s var(--ease), border-color 0.35s ease;
}
.cst__card:hover .cst__face { transform: rotate(-6deg) scale(1.06); border-color: var(--cc); }

.cst__card h3 { margin: 0 0 0.4rem; font-size: 1.06rem; }
.cst__card p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }

.cst__role {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted-2);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cst__card:hover .cst__role { color: var(--cc); border-color: var(--cc); }

.cst__arc {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}
.cst__arc h4 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.cst__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: beat; }

.cst__beats li {
  position: relative;
  padding: 0.6rem 0.8rem 0.6rem 2.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: rgba(var(--ink-rgb), 0.4);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.55;
  counter-increment: beat;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s ease var(--d), transform 0.55s var(--ease) var(--d),
              border-color 0.3s ease, background 0.3s ease;
}
.cst.is-on .cst__beats li { opacity: 1; transform: none; }

.cst__beats li::before {
  content: counter(beat);
  position: absolute;
  left: 0.75rem;
  top: 0.62rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}

.cst__beats li:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
}
.cst__beats li:hover::before { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cst__beats b { color: var(--paper); }

.cst__pay {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  color: var(--accent-ink);
  font-size: 0.92rem;
}


/* ---------- 5. Question sets and the key ---------- */

.chk {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 1.8rem);
  align-items: start;
}
@media (max-width: 900px) { .chk { grid-template-columns: 1fr; } }

.chk__sets { display: grid; gap: 0.4rem; }

.chk__set {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--text-2);
  text-align: left;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease);
}
.chk__set i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.chk__set em { font-style: normal; font-size: 0.74rem; color: var(--muted-3); }

.chk__set:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateX(3px); }
.chk__set.is-on { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.07); }
.chk__set.is-on i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chk__set:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.chk__paper {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.chk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.chk__where { font-size: 0.78rem; color: var(--muted-2); }
.chk__where b { color: var(--accent-ink); font-family: var(--font-display); }

.chk__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem 0.32rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--muted-2);
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.chk__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.chk__toggle:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-2); }
.chk__toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.chk__toggle[aria-pressed="true"] .chk__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.chk__toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.chk__body { position: relative; min-height: 11rem; }

.chk__pane {
  position: absolute;
  inset: 0;
  padding: 1.1rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s var(--ease);
}
.chk__pane.is-on { opacity: 1; transform: none; pointer-events: auto; }

.chk__q { margin: 0 0 0.4rem; color: var(--paper); font-weight: 600; font-size: 0.94rem; }
.chk__o { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.88rem; }

.chk__ans {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(var(--ink-rgb), 0.5);
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  color: var(--text-2);
}
.chk__ans summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}
.chk__ans summary::-webkit-details-marker { display: none; }
.chk__ans summary::before { content: "\1F511  "; }
.chk__ans p { margin: 0.5rem 0 0; }

.chk__foot {
  margin: 0;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--muted-3);
}
.chk__foot--print { display: none; }

/* -- print view: the paper turns into paper -- */
.chk__paper[data-mode="print"] {
  --line-soft: #d9e5e2;
  background: #fcfaf5;
  border-color: #d9e5e2;
}
.chk__paper[data-mode="print"] .chk__head { border-bottom-color: #d9e5e2; }
.chk__paper[data-mode="print"] .chk__where { color: #4a5a5e; }
.chk__paper[data-mode="print"] .chk__where b { color: #12564e; }
.chk__paper[data-mode="print"] .chk__q { color: #16413c; }
.chk__paper[data-mode="print"] .chk__o { color: #4a5a5e; }
.chk__paper[data-mode="print"] .chk__ans {
  background: #f4faf9;
  border-color: #cfe6e2;
  border-style: dashed;
  color: #20292c;
}
.chk__paper[data-mode="print"] .chk__ans summary { color: #12564e; }
.chk__paper[data-mode="print"] .chk__ans summary::before { content: "\2713  "; }
.chk__paper[data-mode="print"] .chk__foot { border-top-color: #d9e5e2; color: #4a5a5e; }
.chk__paper[data-mode="print"] .chk__foot--screen { display: none; }
.chk__paper[data-mode="print"] .chk__foot--print { display: block; }
.chk__paper[data-mode="print"] .chk__toggle {
  background: #e6f2f0;
  border-color: #2b9488;
  color: #12564e;
}
.chk__paper[data-mode="print"] .chk__dot { background: #12564e; border-color: #12564e; }

.chk__why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.chk__wcard {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  transition: transform 0.45s var(--ease), border-color 0.35s ease;
}
.chk__wcard:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.4); }
.chk__wcard h4 { margin: 0 0 0.5rem; font-size: 0.98rem; color: var(--paper); }
.chk__wcard p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }


/* ---------- 6. Vedic methods ---------- */

.vd {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
}

.vd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.vd__sum {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.vd__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-ink);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.vd__go:hover { background: var(--accent); color: var(--on-accent); }
.vd__go:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.vd__race {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  align-items: start;
  padding: clamp(1rem, 3vw, 1.5rem);
}
@media (max-width: 820px) {
  .vd__race { grid-template-columns: 1fr; }
  /* the two lanes have to be told apart at a glance — the Vedic one is the
   claim being made, so it gets the accent and the standard one stays neutral */
.vd__lane--long .vd__steps li { border-left: 2px solid var(--line); }
.vd__lane--vedic .vd__steps li { border-left: 2px solid rgba(var(--accent-rgb), 0.45); }
.vd__lane--vedic h4 { color: var(--accent-ink); }
.vd.is-running .vd__lane--vedic .vd__done {
  box-shadow: 0 0 30px -16px rgba(var(--accent-rgb), 0.9);
}

.vd__vs { justify-self: center; }
}

.vd__lane h4 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.vd__vs {
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}

.vd__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.vd__steps li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: rgba(var(--ink-rgb), 0.45);
  font-size: 0.9rem;
  color: var(--text-2);
  opacity: 0.28;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.45s var(--ease),
              border-color 0.4s ease, background 0.4s ease;
}
.vd__steps li b { color: var(--paper); font-weight: 600; }
.vd__steps li span { font-variant-numeric: tabular-nums; color: var(--muted); }
.vd__steps li em { font-style: normal; color: var(--accent-ink); font-weight: 700; }

/* .is-running replays: each step lights on its own --d */
.vd.is-running .vd__steps li {
  opacity: 1;
  transform: none;
  transition-delay: var(--d);
}
.vd.is-running .vd__done {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
}
.vd.is-running .vd__done span { color: var(--accent-ink); font-weight: 700; }

.vd__count {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--muted-3);
}
.vd__count b { color: var(--text-2); }

.vd__why {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
  background: rgba(var(--accent-rgb), 0.04);
}
.vd__why h4 { margin: 0 0 0.5rem; font-size: 0.96rem; color: var(--paper); }
.vd__why p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.7; }

.vd__note { margin: 1.3rem 0 0; font-size: 0.88rem; color: var(--muted-2); }


/* ---------- 7. Targeting ---------- */

.tgt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.85fr);
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  align-items: center;
}
@media (max-width: 880px) {
  .tgt { grid-template-columns: 1fr; }
  .tgt__arrow { transform: rotate(90deg); justify-self: center; }
}

.tgt__from,
.tgt__to {
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}

.tgt__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.9rem;
}

.tgt__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.tgt__bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.6rem;
  align-items: center;
  font-size: 0.86rem;
  color: var(--text-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease var(--d), transform 0.55s var(--ease) var(--d);
}
.tgt.is-on .tgt__bars li { opacity: 1; transform: none; }

.tgt__bars li b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--p7);
}
.tgt__ok b { color: var(--muted-3); }

.tgt__bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--p7-rgb), 0.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: var(--w);
  transition: transform 0.85s var(--ease) calc(var(--d) + 0.15s), filter 0.3s ease;
}
.tgt.is-on .tgt__bar { transform: scaleX(1); }
.tgt__ok .tgt__bar { background: rgba(var(--accent-rgb), 0.35); }
.tgt__bars li:hover .tgt__bar { filter: brightness(1.3); }

.tgt__cap { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--muted-3); }

.tgt__arrow { color: var(--muted-3); }
.tgt__arrow svg { width: 74px; height: 22px; }
.tgt__path { stroke-dasharray: 4 5; }
.tgt.is-on .tgt__path { animation: tgt-flow 1.1s linear infinite; }
@keyframes tgt-flow { to { stroke-dashoffset: -18; } }

.tgt__queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: none; }

.tgt__queue li {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: rgba(var(--ink-rgb), 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease var(--d), transform 0.55s var(--ease) var(--d),
              border-color 0.3s ease, background 0.3s ease;
}
.tgt.is-on .tgt__queue li { opacity: 1; transform: none; }
.tgt__queue li:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
}

.tgt__queue i {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
}
.tgt__queue span { display: grid; font-size: 0.78rem; color: var(--muted-2); }
.tgt__queue b { color: var(--paper); font-size: 0.9rem; font-weight: 600; }

.tgt__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.tgt__link p { margin: 0; color: var(--muted-2); font-size: 0.9rem; }


/* ---------- 8. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .jbn__next, .jbn__bub, .jbn__ln, .jbn__q,
  .jbn__tab, .jbn__tick { animation: none; opacity: 1; transform: none; }
  .jbn__tick { stroke-dashoffset: 0; }
  .jbn__turn { display: none; }
  .jrn__sheet { opacity: 1; transform: none; transition: none; }
  .jrn__sheet:hover { box-shadow: 0 10px 26px rgba(18, 86, 78, 0.1); }
  .jrn__panel:hover .jrn__who i,
  .jrn__col:hover,
  .jrn__badge:hover { transform: none; }
  .spn__pane { transition: opacity 0.2s linear; transform: none; }
  .spn__step:hover i { transform: none; }
  .cst__card:hover, .cst__card:hover .cst__face { transform: none; }
  .cst__beats li { opacity: 1; transform: none; transition: none; }
  .chk__set:hover, .chk__wcard:hover { transform: none; }
  .chk__pane { transition: opacity 0.2s linear; transform: none; }
  .vd__steps li { opacity: 1; transform: none; transition: none; }
  .tgt__bars li, .tgt__queue li { opacity: 1; transform: none; transition: none; }
  .tgt__bar { transform: scaleX(1); transition: none; }
  .tgt.is-on .tgt__path { animation: none; }
}


/* -- placement --
   .spn__viz takes the slack in the pane, so .spn__ex keeps its footing at
   the bottom and the eleven panes still share one baseline. */
.spn__viz {
  margin: 0.5rem 0 1.15rem;
  margin-top: auto;
}
.spn__viz .pv { max-width: 30rem; }

.chk__viz {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

/* the question-set column now matches its six-button rail */
.chk { align-items: stretch; }
.chk__stage { display: flex; }
.chk__paper { flex: 1; display: flex; flex-direction: column; }
.chk__body { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .viz { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   9. REAL MINIATURES

   9a. .pv — the eleven spine parts, each rendered as the actual thing with
       the actual "Ear to Ear" content in it. Set in the journals' own paper
       world, so what you see in the rail is what comes off the printer.
   9b. .aw — how each Brain Check set is answered.
   ========================================================================== */

/* ---- 9a. part previews ---- */

.pv {
  --p-ink: #20292c;
  --p-ink2: #4a5a5e;
  --p-teal: #12564e;
  --p-teal3: #2b9488;
  --p-pale: #e6f2f0;
  --p-rule: #d9e5e2;
  --p-disp: "Baloo 2", var(--font-display), sans-serif;

  position: relative;
  background: #fff;
  border: 1px solid var(--p-rule);
  border-radius: 11px;
  padding: 1.05rem 1rem 0.9rem;
  color: var(--p-ink);
  font-size: 0.8rem;
  line-height: 1.55;
  box-shadow: 0 8px 22px rgba(18, 86, 78, 0.13);
}

.pv__tab {
  position: absolute;
  top: -9px;
  left: 16px;
  background: var(--p-teal);
  color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.pv__h {
  display: block;
  font-family: var(--p-disp);
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.28;
  color: var(--p-teal);
  margin: 0.2rem 0 0.6rem;
}

.pv b, .pv strong { color: #16413c; font-weight: 800; }
.pv em { font-style: normal; background: linear-gradient(180deg, transparent 56%, #ffe08a 56%); padding: 0 2px; }

/* cover */
.pv--cover { background: linear-gradient(160deg, #2c5e2e, #5f9a3e 52%, #b3cc5e); border: none; color: #fff; }
.pv--cover b, .pv--cover strong { color: #fff; }
.pv__eye {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.56rem; letter-spacing: 0.19em; text-transform: uppercase; color: #eaf5dc;
}
.pv__ttl { display: block; font-family: var(--p-disp); font-weight: 800; font-size: 1.5rem; line-height: 1.1; margin: 0.25rem 0 0.1rem; }
.pv__sub { display: block; font-size: 0.72rem; color: #f2f8e8; margin-bottom: 0.65rem; }
.pv__bdg { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.65rem; }
.pv__bdg span {
  flex: 1 1 auto; min-width: 3.1rem; text-align: center;
  padding: 0.28rem 0.35rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.17); border: 1px solid rgba(255, 255, 255, 0.34);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.46rem; letter-spacing: 0.1em; text-transform: uppercase; color: #eaf5dc;
}
.pv__bdg b { display: block; font-family: var(--p-disp); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.pv__obj { background: rgba(255, 255, 255, 0.15); border: 1px dashed rgba(255, 255, 255, 0.48); border-radius: 9px; padding: 0.6rem 0.7rem; }
.pv__obj i { display: block; font-style: normal; font-family: var(--p-disp); font-weight: 700; font-size: 0.78rem; margin-bottom: 0.25rem; }
.pv__obj u { display: list-item; margin-left: 1rem; text-decoration: none; font-size: 0.72rem; color: #f6fbef; }
.pv--cover em { background: rgba(255, 255, 255, 0.28); border-radius: 3px; }

/* story */
.pv__pan { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.4rem; }
.pv__pan i { font-style: normal; font-size: 1rem; line-height: 1; background: var(--p-pale); border: 2px solid var(--p-teal3); border-radius: 9px; padding: 0.25rem 0.3rem; }
.pv__pan p { margin: 0; flex: 1; background: #fff; border: 2px solid var(--p-teal3); border-radius: 3px 10px 10px 10px; padding: 0.35rem 0.55rem; font-size: 0.74rem; line-height: 1.45; }
.pv__pan .pv__guru { border-color: #6fa844; background: #fffaf2; }
.pv__pan .pv__think { border-style: dashed; }

/* content section list */
.pv__secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.24rem; }
.pv__secs li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.45rem; align-items: center; font-size: 0.75rem; }
.pv__secs i {
  display: grid; place-items: center; font-style: normal;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--p-teal); color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.56rem;
}

/* tables */
.pv__tbl { width: 100%; border-collapse: collapse; font-size: 0.71rem; table-layout: fixed; }
.pv__tbl th { background: var(--p-teal); color: #fff; font-family: var(--p-disp); font-weight: 600; font-size: 0.7rem; }
.pv__tbl th, .pv__tbl td { border: 1px solid var(--p-rule); padding: 0.28rem 0.42rem; text-align: left; vertical-align: top; }
.pv__tbl tbody tr:nth-child(even) { background: #f6faf9; }
.pv__tbl--wo s { color: #b03a4a; text-decoration-thickness: 1px; }

/* wow / remember lists */
.pv__wow, .pv__rem { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.28rem; font-size: 0.74rem; }
.pv__more { display: block; margin-top: 0.5rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6rem; letter-spacing: 0.05em; color: var(--p-ink2); }

/* map */
.pv__map { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.pv__map > span {
  flex: 1 1 auto; min-width: 3.6rem; text-align: center;
  background: #fff; border: 2px solid var(--p-teal3); border-radius: 9px;
  padding: 0.28rem 0.3rem; font-size: 0.6rem; line-height: 1.25;
}
.pv__map b { display: block; font-family: var(--p-disp); color: var(--p-teal); font-size: 0.66rem; }
.pv__map em { font-style: normal; color: var(--p-teal3); background: none; padding: 0; }
.pv__map .pv__map--hi { background: #fff6e0; border-color: #e9c476; }

/* brain check */
.pv__q { margin: 0 0 0.2rem; font-weight: 800; color: #16413c; font-size: 0.76rem; }
.pv__opt { margin: 0 0 0.45rem; font-size: 0.72rem; color: var(--p-ink2); }
.pv__key {
  display: flex; gap: 0.45rem; align-items: flex-start;
  background: #f4faf9; border: 1px dashed #cfe6e2; border-radius: 8px;
  padding: 0.4rem 0.55rem; font-size: 0.72rem;
}
.pv__key i { font-style: normal; color: var(--p-teal); font-weight: 700; }

/* worksheet parts */
.pv__part { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; align-items: start; margin-bottom: 0.4rem; font-size: 0.73rem; }
.pv__part i {
  display: grid; place-items: center; font-style: normal;
  width: 1.4rem; height: 1.4rem; border-radius: 6px;
  background: var(--p-pale); border: 1px solid var(--p-teal3);
  color: var(--p-teal); font-family: var(--p-disp); font-weight: 700; font-size: 0.72rem;
}

/* revision card */
.pv__card { margin-top: 0.5rem; background: var(--p-pale); border: 1px solid #b8dbd5; border-radius: 9px; padding: 0.5rem 0.6rem; font-size: 0.7rem; }
.pv__card i { display: block; font-style: normal; font-family: var(--p-disp); font-weight: 700; color: var(--p-teal); margin-bottom: 0.2rem; }

/* xp */
.pv--xp { background: linear-gradient(150deg, #12564e, #2b9488); border: none; color: #fff; text-align: center; }
.pv--xp .pv__h { color: #fff; }
.pv--xp b, .pv--xp strong { color: #fff; }
.pv__done { margin: 0 0 0.6rem; font-size: 0.73rem; color: #dff2ef; }
.pv__med { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.pv__med span {
  flex: 1 1 auto; min-width: 4rem;
  background: rgba(255, 255, 255, 0.17); border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9px; padding: 0.4rem 0.3rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.48rem; letter-spacing: 0.09em; text-transform: uppercase; color: #d8f2ee;
}
.pv__med b { display: block; font-family: var(--p-disp); font-size: 1rem; letter-spacing: 0; text-transform: none; }

/* ---- 9b. answer widgets ---- */

.aw { display: grid; gap: 0.4rem; }
.aw__cap {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-3);
}

.aw__opt {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.6rem; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: rgba(var(--ink-rgb), 0.45);
  font-size: 0.88rem; color: var(--text-2);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.aw__opt i { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
.aw__opt:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.aw__opt--on { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.07); color: var(--paper); }
.aw__opt--on i { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2.5px var(--ink-2); }

.aw__fill { margin: 0; font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }
.aw__blank {
  display: inline-block; padding: 0 0.45rem;
  border-bottom: 1.5px dashed rgba(var(--accent-rgb), 0.6);
  color: var(--accent-ink) !important; font-weight: 600;
}

.aw__match { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.4rem; font-size: 0.85rem; }
.aw__match > div { display: grid; gap: 0.3rem; }
.aw__match span {
  padding: 0.3rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line-soft); background: rgba(var(--ink-rgb), 0.45);
  color: var(--text-2); white-space: nowrap;
}

.aw__tf { display: flex; gap: 0.5rem; }
.aw__pill {
  padding: 0.38rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.45);
  color: var(--muted); font-size: 0.86rem; cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.aw__pill:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-2); }
.aw__pill--on { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); color: var(--accent-ink); }

.aw__ruled { display: grid; gap: 0.75rem; padding: 0.6rem 0.2rem; }
.aw__ruled span { display: block; height: 1px; background: var(--line); }

.aw__ask { margin: 0; font-size: 0.9rem; color: var(--paper); }
.aw__reason {
  margin: 0; padding: 0.55rem 0.75rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.5); border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(var(--accent-rgb), 0.05);
  font-size: 0.88rem; color: var(--muted);
}
.aw__note { font-size: 0.82rem; color: var(--muted-3); }

/* both fade in with the pane they belong to */
.pv, .aw { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease 0.1s, transform 0.5s var(--ease) 0.1s; }
.spn__pane.is-on .pv, .chk__pane.is-on .aw { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pv, .aw { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   10. MOTION ON THE MINIATURES

   Each part animates the way it actually reads: the cover's badges land in
   sequence, the story's panels arrive as dialogue does, table rows cascade
   down, the map lights along its route, the medals drop in at the end.

   Everything keys off .spn__pane.is-on / .chk__pane.is-on, so switching a
   part REPLAYS its animation rather than revealing a finished panel.
   ========================================================================== */

/* the pane turns rather than slides — it is a notebook, after all */
.spn__stage { perspective: 1400px; }
.spn__pane { transform: translateY(10px) rotateX(-5deg); transform-origin: 50% 0; }

/* every staggered child starts down and dim */
.pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span) {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.42s ease, transform 0.5s var(--ease);
}
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span) { opacity: 1; transform: none; }

.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(1) { transition-delay: 0.195s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(2) { transition-delay: 0.250s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(3) { transition-delay: 0.305s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(4) { transition-delay: 0.360s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(5) { transition-delay: 0.415s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(6) { transition-delay: 0.470s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(7) { transition-delay: 0.525s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(8) { transition-delay: 0.580s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(9) { transition-delay: 0.635s; }
.spn__pane.is-on .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span):nth-child(10) { transition-delay: 0.690s; }

/* the answer key and the revision card land after the list they summarise */
.pv__key, .pv__card, .pv__more, .pv__done {
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.45s ease 0.55s, transform 0.5s var(--ease) 0.55s;
}
.spn__pane.is-on :is(.pv__key, .pv__card, .pv__more, .pv__done) { opacity: 1; transform: none; }

/* the tick pops once the key has settled */
.pv__key i { display: inline-block; transform: scale(0); }
.spn__pane.is-on .pv__key i { animation: pv-tick 0.5s var(--ease) 0.85s forwards; }
@keyframes pv-tick {
  0%   { transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.35) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* the discovery stop keeps pulsing after the route has drawn */
.spn__pane.is-on .pv__map--hi { animation: pv-pulse 2.4s ease-in-out 1s infinite; }
@keyframes pv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 161, 59, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(233, 161, 59, 0.28); }
}

/* medals bounce rather than fade — they are a reward */
.spn__pane.is-on .pv__med span { animation: pv-drop 0.6s var(--ease) both; }
.spn__pane.is-on .pv__med span:nth-child(1) { animation-delay: 0.20s; }
.spn__pane.is-on .pv__med span:nth-child(2) { animation-delay: 0.30s; }
.spn__pane.is-on .pv__med span:nth-child(3) { animation-delay: 0.40s; }
.spn__pane.is-on .pv__med span:nth-child(4) { animation-delay: 0.50s; }
@keyframes pv-drop {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.86); }
  62%  { opacity: 1; transform: translateY(3px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

/* the sheet lifts under the pointer */
.pv { transition: opacity 0.5s ease 0.1s, transform 0.5s var(--ease) 0.1s, box-shadow 0.45s ease; }
.spn__viz:hover .pv { box-shadow: 0 18px 44px rgba(18, 86, 78, 0.28); transform: translateY(-3px); }

/* a marker slides down the rail to whichever part is open. journal.js
   measures the selected button and writes --mark-y / --mark-h, because the
   rows are not a uniform height. */
.spn__rail::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  top: var(--mark-y, 0px);
  height: var(--mark-h, 0px);
  opacity: 0;
  transition: top 0.45s var(--ease), height 0.45s var(--ease), opacity 0.3s ease;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7);
}
.spn__rail.is-marked::after { opacity: 1; }

/* ---- answer widgets ---- */

.aw :is(.aw__opt, .aw__fill, .aw__match, .aw__tf, .aw__ruled, .aw__ask, .aw__reason, .aw__note) {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.42s ease, transform 0.48s var(--ease);
}
.chk__pane.is-on .aw :is(.aw__opt, .aw__fill, .aw__match, .aw__tf, .aw__ruled, .aw__ask, .aw__reason, .aw__note) {
  opacity: 1; transform: none;
}
.chk__pane.is-on .aw > :nth-child(2) { transition-delay: 0.16s; }
.chk__pane.is-on .aw > :nth-child(3) { transition-delay: 0.24s; }
.chk__pane.is-on .aw > :nth-child(4) { transition-delay: 0.32s; }
.chk__pane.is-on .aw > :nth-child(5) { transition-delay: 0.40s; }

/* the chosen option fills last, so you watch it being picked */
.chk__pane.is-on .aw__opt--on i { animation: aw-pick 0.5s var(--ease) 0.62s both; }
@keyframes aw-pick {
  0%   { transform: scale(0.7); }
  55%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.chk__pane.is-on .aw__pill--on { animation: aw-pick 0.5s var(--ease) 0.6s both; }

/* the blank underlines itself, left to right */
.aw__blank {
  background-image: linear-gradient(rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.16));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.6s var(--ease) 0.5s;
}
.chk__pane.is-on .aw__blank { background-size: 100% 100%; }

/* the ruled lines draw across */
.aw__ruled span { transform: scaleX(0); transform-origin: left center; transition: transform 0.55s var(--ease); }
.chk__pane.is-on .aw__ruled span:nth-child(1) { transform: scaleX(1); transition-delay: 0.30s; }
.chk__pane.is-on .aw__ruled span:nth-child(2) { transform: scaleX(1); transition-delay: 0.42s; }
.chk__pane.is-on .aw__ruled span:nth-child(3) { transform: scaleX(1); transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .spn__pane { transform: none; }
  .pv :is(.pv__bdg span, .pv__obj u, .pv__pan, .pv__secs li, .pv__tbl tbody tr, .pv__wow li, .pv__rem li, .pv__map > *, .pv__part, .pv__med span),
  .pv__key, .pv__card, .pv__more, .pv__done,
  .aw :is(.aw__opt, .aw__fill, .aw__match, .aw__tf, .aw__ruled, .aw__ask, .aw__reason, .aw__note) {
    opacity: 1; transform: none; transition: none;
  }
  .pv__key i { transform: none; animation: none; }
  .spn__pane.is-on .pv__map--hi,
  .spn__pane.is-on .pv__med span,
  .chk__pane.is-on .aw__opt--on i,
  .chk__pane.is-on .aw__pill--on { animation: none; }
  .spn__viz:hover .pv { transform: none; }
  .aw__blank { background-size: 100% 100%; transition: none; }
  .aw__ruled span { transform: scaleX(1); transition: none; }
  .spn__rail::after { transition: none; }
}


/* ==========================================================================
   11. JOURNAL SHEETS AS CARDS

   Six sheets now, so a three-column row fills twice over instead of leaving
   an orphan. Each behaves as a card you can pick up: it tilts toward the
   pointer, lifts off the page, and catches a gloss where the cursor is.

   The tilt composes through custom properties rather than by overwriting
   transform, because .jrn.is-on already owns that property for the entrance.
   journal.js writes --rx / --ry / --mx / --my on pointermove.
   ========================================================================== */

.jrn { perspective: 1100px; }

.jrn__sheet {
  --rx: 0deg;
  --ry: 0deg;
  --tz: 0px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* the entrance still owns the resting state; hover adds depth on top */
.jrn.is-on .jrn__sheet {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transition: opacity 0.6s ease var(--d), transform 0.45s var(--ease),
              box-shadow 0.45s ease;
}

.jrn__sheet:hover {
  --tz: 16px;
  z-index: 3;
  box-shadow: 0 30px 60px -28px rgba(18, 86, 78, 0.45),
              0 0 0 1px rgba(43, 148, 136, 0.28);
}

/* the gloss sits where the pointer is, as light on a real card would */
.jrn__sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.5),
    transparent 62%
  );
  transition: opacity 0.4s ease;
  mix-blend-mode: overlay;
}
.jrn__sheet:hover::after { opacity: 1; }

/* the cover is already bright, so its gloss is dialled back */
.jrn__sheet--cover:hover::after,
.jrn__sheet--xp:hover::after { opacity: 0.45; }

/* the numbered tab lifts with the sheet it belongs to */
.jrn__tab { transition: transform 0.4s var(--ease), box-shadow 0.4s ease; }
.jrn__sheet:hover .jrn__tab {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px -6px rgba(18, 86, 78, 0.6);
}

/* contents settle back a touch, so the sheet reads as having depth */
.jrn__h,
.jrn__tbl,
.jrn__rem,
.jrn__card,
.jrn__cols,
.jrn__rule { transition: transform 0.45s var(--ease); }
.jrn__sheet:hover .jrn__h { transform: translateZ(18px); }

/* the two new sheets */
.jrn__tbl { width: 100%; border-collapse: collapse; font-size: 0.76rem; table-layout: fixed; }
.jrn__tbl th {
  background: var(--j-teal);
  color: #fff;
  font-family: var(--j-disp);
  font-weight: 600;
  font-size: 0.76rem;
}
.jrn__tbl th,
.jrn__tbl td { border: 1px solid var(--j-rule); padding: 0.32rem 0.5rem; text-align: left; vertical-align: top; }
.jrn__tbl tbody tr { transition: background 0.25s ease; }
.jrn__tbl tbody tr:nth-child(even) { background: #f6faf9; }
.jrn__tbl tbody tr:hover { background: var(--j-pale); }

.jrn__rem { margin: 0 0 0.6rem; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.78rem; }

.jrn__card {
  background: var(--j-pale);
  border: 1px solid #b8dbd5;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.74rem;
}
.jrn__card i {
  display: block;
  font-style: normal;
  font-family: var(--j-disp);
  font-weight: 700;
  color: var(--j-teal);
  margin-bottom: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .jrn.is-on .jrn__sheet { transform: none; transition: none; }
  .jrn__sheet:hover { --tz: 0px; }
  .jrn__sheet::after { display: none; }
  .jrn__sheet:hover .jrn__tab,
  .jrn__sheet:hover .jrn__h { transform: none; }
}


/* ==========================================================================
   12. THE CAST — how the material actually teaches

   This is the section that explains the method, so it is set in the
   journals' own display face rather than the site's. Each character owns a
   colour (--cc), and that colour follows them everywhere: their card, their
   name in the beat list, the rule down the side of their beats.

   Hovering either side lights the other, so "which of them says this" is
   answerable by pointing. Done with :has() — the two columns are separate
   subtrees a sibling combinator cannot reach across.
   ========================================================================== */

.cst { --j-disp: "Baloo 2", var(--font-display), sans-serif; }

/* ---- the three cards ---- */

.cst__card { display: flex; flex-direction: column; }

.cst__face {
  font-size: 1.9rem;
  width: 3.4rem;
  height: 3.4rem;
  animation: cst-bob 5s ease-in-out infinite;
}
.cst__card:nth-child(2) .cst__face { animation-delay: 0.8s; }
.cst__card:nth-child(3) .cst__face { animation-delay: 1.6s; }
@keyframes cst-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

.cst__name {
  font-family: var(--j-disp);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--cc);
  margin: 0 0 0.3rem;
  transition: text-shadow 0.4s ease;
}

.cst__role {
  align-self: flex-start;
  margin-bottom: 0.7rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--cc-rgb), 0.45);
  background: rgba(var(--cc-rgb), 0.09);
  color: var(--cc);
  font-size: 0.74rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.cst__card p { margin: 0 0 0.9rem; }

/* what they actually say in the chapter */
.cst__says {
  margin-top: auto;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid rgba(var(--cc-rgb), 0.6);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(var(--cc-rgb), 0.06);
  font-family: var(--j-disp);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-2);
  transition: background 0.35s ease, color 0.3s ease;
}

.cst__card:hover .cst__name { text-shadow: 0 0 26px rgba(var(--cc-rgb), 0.6); }
.cst__card:hover .cst__says { background: rgba(var(--cc-rgb), 0.12); color: var(--paper); }
.cst__card:hover .cst__face { animation-play-state: paused; }

/* ---- the beat list ---- */

.cst__beats li {
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  counter-increment: none;
}
.cst__beats li::before { content: none; }

.cst__beats b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 0.2rem;
  transition: color 0.3s ease;
}

/* the speaker's name, in their own colour and the journals' own face */
.cst__by {
  font-style: normal;
  font-family: var(--j-disp);
  font-weight: 700;
  font-size: 1.02em;
  margin-right: 0.35rem;
  padding: 0.02em 0.3em;
  border-radius: 5px;
  background: rgba(var(--cc-rgb), 0.12);
  color: var(--cc);
  transition: background 0.3s ease, box-shadow 0.35s ease;
}
.cst__by[data-who="rahul"] { --cc: var(--p2); --cc-rgb: var(--p2-rgb); }
.cst__by[data-who="maya"]  { --cc: var(--p3); --cc-rgb: var(--p3-rgb); }
.cst__by[data-who="meera"] { --cc: var(--accent); --cc-rgb: var(--accent-rgb); }

.cst__beats li[data-who="rahul"] { --cc-rgb: var(--p2-rgb); }
.cst__beats li[data-who="maya"]  { --cc-rgb: var(--p3-rgb); }
.cst__beats li[data-who="meera"] { --cc-rgb: var(--accent-rgb); }

.cst__beats li:hover {
  border-left-color: rgba(var(--cc-rgb), 0.8);
  background: rgba(var(--cc-rgb), 0.07);
}
.cst__beats li:hover b { color: var(--text-2); }
.cst__beats li:hover .cst__by { box-shadow: 0 0 20px -6px rgba(var(--cc-rgb), 0.9); }

/* ---- the two columns answer each other ---- */

.cst:has(.cst__card[data-who="rahul"]:hover) .cst__beats li:not([data-who="rahul"]),
.cst:has(.cst__card[data-who="maya"]:hover)  .cst__beats li:not([data-who="maya"]),
.cst:has(.cst__card[data-who="meera"]:hover) .cst__beats li:not([data-who="meera"]) {
  opacity: 0.32;
  filter: saturate(0.5);
}

.cst:has(.cst__beats li[data-who="rahul"]:hover) .cst__card:not([data-who="rahul"]),
.cst:has(.cst__beats li[data-who="maya"]:hover)  .cst__card:not([data-who="maya"]),
.cst:has(.cst__beats li[data-who="meera"]:hover) .cst__card:not([data-who="meera"]) {
  opacity: 0.36;
  filter: saturate(0.5);
}

.cst__card { transition: transform 0.45s var(--ease), border-color 0.35s ease,
                         opacity 0.35s ease, filter 0.35s ease; }
.cst__beats li { transition: opacity 0.35s ease, filter 0.35s ease,
                             background 0.3s ease, border-color 0.3s ease,
                             transform 0.55s var(--ease) var(--d); }

.cst__pay {
  font-family: var(--j-disp);
  font-weight: 600;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .cst__face { animation: none; }
  .cst__card:hover .cst__name { text-shadow: none; }
}


/* ==========================================================================
   13. BRAIN CHECK — one fact, six formats

   The lede claims the same chapter is asked six different ways. It used to
   show six unrelated questions, so the claim could not be checked. Every set
   now asks about the same rule — ears you can see -> hair -> live young —
   and the whole set is listed rather than one question, which also fills the
   space that sat empty under the panel.

   Opening a question closes the one before it, EXCEPT in print view, where
   every key is meant to be on the paper at once.
   ========================================================================== */

/* ---- 4 · what each set tests, on the rail ---- */
.chk__set { grid-template-columns: 2rem 1fr auto; }
.chk__tests {
  grid-column: 2 / 3;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-3);
  transition: color .3s ease;
}
.chk__set.is-on .chk__tests { color: var(--accent-ink); }
.chk__set em { align-self: start; }

/* ---- 2 · the whole set, not one question ---- */
.qs { display: grid; gap: .45rem; }

.qs__i {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(var(--ink-rgb), .45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .45s ease var(--d), transform .5s var(--ease) var(--d),
              border-color .3s ease, background .3s ease;
}
.chk__pane.is-on .qs__i { opacity: 1; transform: none; }
.qs__i:hover { border-color: rgba(var(--accent-rgb), .4); }

.qs__q {
  width: 100%;
  display: grid;
  grid-template-columns: 1.6rem 1fr 1.1rem;
  gap: .6rem;
  align-items: start;
  padding: .65rem .8rem;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.qs__n {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 6px;
  background: var(--ink-3); border: 1px solid var(--line);
  color: var(--muted-2); font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
}
.qs__t { font-size: .95rem; line-height: 1.55; color: var(--text-2); }
.qs__t b { color: var(--paper); font-weight: 600; }
.qs__chev {
  width: 1.1rem; height: 1.1rem; margin-top: .25rem;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: rotate(45deg) scale(.5); transform-origin: 60% 60%;
  transition: transform .35s var(--ease), border-color .3s ease;
}
.qs__i[open] .qs__chev { transform: rotate(225deg) scale(.5); border-color: var(--accent-ink); }
.qs__i[open] { border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .05); }
.qs__i[open] .qs__n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.qs__a {
  padding: 0 .8rem .75rem 3rem;
  font-size: .92rem; line-height: 1.6; color: var(--muted);
}
.qs__a b { color: var(--accent-ink); }

/* the one fact, called out once above the set */
.fact {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 .9rem; padding: .7rem .9rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .05);
  font-size: .9rem; color: var(--text-2);
}
.fact i {
  font-style: normal; font-family: var(--font-display);
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.fact b { color: var(--paper); }

/* ---- 3 · print view as the hero ---- */
.chk__head { padding: .8rem 1rem; }
.chk__toggle { padding: .34rem .5rem .34rem .4rem; }
.chk__seg {
  display: inline-flex; padding: 2px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ink-3);
}
.chk__seg button {
  padding: .3rem .85rem; border: 0; border-radius: 999px;
  background: none; color: var(--muted-2);
  font-size: .8rem; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.chk__seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chk__seg button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* paper state */
.chk__paper[data-mode="print"] .qs__i {
  background: #f4faf9; border-color: #cfe6e2; opacity: 1; transform: none;
}
.chk__paper[data-mode="print"] .qs__t { color: #20292c; }
.chk__paper[data-mode="print"] .qs__t b { color: #16413c; }
.chk__paper[data-mode="print"] .qs__n { background: #e6f2f0; border-color: #2b9488; color: #12564e; }
.chk__paper[data-mode="print"] .qs__a { color: #4a5a5e; }
.chk__paper[data-mode="print"] .qs__a b { color: #12564e; }
.chk__paper[data-mode="print"] .qs__chev { display: none; }
.chk__paper[data-mode="print"] .fact {
  background: #fff6e0; border-color: #e9c476; border-style: solid; color: #4a3722;
}
.chk__paper[data-mode="print"] .fact i { color: #7a5a10; }
.chk__paper[data-mode="print"] .fact b { color: #16413c; }
.chk__paper[data-mode="print"] .chk__seg { background: #e6f2f0; border-color: #2b9488; }
.chk__paper[data-mode="print"] .chk__seg button { color: #12564e; }
.chk__paper[data-mode="print"] .chk__seg button[aria-pressed="true"] { background: #12564e; color: #fff; }


/* ==========================================================================
   14. THE READER — click a sheet to read it at full size

   The sheets sit at about 0.8rem, which is a glimpse rather than a read.
   Clicking one opens it at 1.35x with a page-turn, and the arrow keys leaf
   through all six without closing.
   ========================================================================== */

/* ---- 1 · the sheet says which page it is, and invites a click ---- */
.jrn__sheet { cursor: zoom-in; }

.jrn__pg {
  position: absolute;
  right: .8rem;
  bottom: .55rem;
  font-family: ui-monospace, monospace;
  font-size: .56rem;
  letter-spacing: .1em;
  color: #9fb4b0;
  transition: color .3s ease;
}
.jrn__sheet--cover .jrn__pg { color: #dcecc8; }
.jrn__sheet:hover .jrn__pg { color: var(--j-teal3, #2b9488); }

/* the "open me" affordance, only once you are on the card */
.jrn__open {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(18, 86, 78, .85);
  color: #fff;
  opacity: 0; transform: scale(.7);
  transition: opacity .3s ease, transform .35s var(--ease);
  pointer-events: none;
  z-index: 5;
}
.jrn__sheet:hover .jrn__open { opacity: 1; transform: none; }

/* ---- 2 · the scale line ---- */
.jrn__scale {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1.2rem 0 0;
  font-size: .9rem; color: var(--muted-2);
}
.jrn__scale i {
  flex: 1 1 6rem; height: 1px; min-width: 3rem;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .5), transparent);
}
.jrn__scale b { color: var(--text-2); }

/* ---- 3 · the reader ---- */
.rdr {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 5, 7, .82);
  backdrop-filter: blur(9px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.rdr.is-open { opacity: 1; pointer-events: auto; }

.rdr__stage {
  position: relative;
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: auto;
  perspective: 1600px;
}
.rdr__stage .jrn__sheet {
  cursor: default;
  zoom: 1.35;
  opacity: 1 !important;
  transform: none !important;
  animation: rdr-turn .5s var(--ease);
}
.rdr__stage .jrn__open { display: none; }
.rdr.is-back .rdr__stage .jrn__sheet { animation: rdr-turn-back .5s var(--ease); }

@keyframes rdr-turn {
  from { opacity: 0; transform: rotateY(-16deg) translateX(30px); transform-origin: left center; }
  to   { opacity: 1; transform: none; }
}
@keyframes rdr-turn-back {
  from { opacity: 0; transform: rotateY(16deg) translateX(-30px); transform-origin: right center; }
  to   { opacity: 1; transform: none; }
}

.rdr__bar {
  position: absolute; left: 50%; bottom: clamp(.8rem, 3vw, 1.6rem);
  translate: -50% 0;
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--ink-rgb), .92);
}
.rdr__btn {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink-3);
  color: var(--muted-2); cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.rdr__btn:hover { border-color: var(--accent); color: var(--accent-ink); background: rgba(var(--accent-rgb), .1); }
.rdr__btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.rdr__count { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 7.5rem; text-align: center; }
.rdr__count b { color: var(--paper); }

.rdr__close {
  position: absolute; top: clamp(.8rem, 3vw, 1.4rem); right: clamp(.8rem, 3vw, 1.4rem);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line); background: rgba(var(--ink-rgb), .9);
  color: var(--muted); cursor: pointer;
}
.rdr__close:hover { border-color: var(--coral); color: var(--coral); }

/* the dots show where in the chapter you are */
.rdr__dots { display: flex; gap: .3rem; }
.rdr__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: background .3s ease, transform .3s ease;
}
.rdr__dots i.is-on { background: var(--accent); transform: scale(1.4); }

@media (prefers-reduced-motion: reduce) {
  .rdr__stage .jrn__sheet { animation: none; }
  .rdr { transition: none; }
}

/* ---- equal height ----
   grid-auto-rows:1fr makes every row the same height, and stretch makes each
   sheet fill its row — so all six are identical rather than ragged. Content
   that runs short leaves its slack at the foot, where the page number sits. */
.jrn {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.jrn__sheet { display: flex; flex-direction: column; }
.jrn__obj,
.jrn__card,
.jrn__rule { margin-top: auto; }

/* ---- the same treatments used across the site today ----
   a spark field behind the grid, and the sheet you are reading brings the
   others down with it, exactly as the platform and pricing grids do. */
.jrn-wrap { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .jrn:hover .jrn__sheet { opacity: 0.55; filter: saturate(0.75); }
  .jrn .jrn__sheet:hover { opacity: 1; filter: none; }
}
.jrn.is-on .jrn__sheet {
  transition: opacity 0.4s ease, filter 0.4s ease,
              transform 0.45s var(--ease), box-shadow 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .jrn:hover .jrn__sheet { opacity: 1; filter: none; }
}