/* ============================================================
   LAIT — The Wish Tree of Readers
   Bookish cream palette · HT = gold · MT = royal blue
   ============================================================ */

:root {
  /* paper + ink */
  --paper: #f4efe2;
  --paper-alt: #ece3cf;
  --card: #fbf4e4;
  --ink: #2a2722;
  --ink-soft: #4a4439;
  --muted: #6b6354;
  --line: #ddd2ba;
  --line-strong: #c3b694;
  --shadow: 0 18px 44px rgba(58, 46, 24, 0.12);
  --shadow-sm: 0 8px 20px rgba(58, 46, 24, 0.08);

  /* HT = gold */
  --ht: #c39a2e;
  --ht-ink: #7a5400;
  --ht-soft: #f2e5c4;
  --ht-leaf-1: #e6bc3e;
  --ht-leaf-2: #c2901a;

  /* MT = royal blue */
  --mt: #2f4fcb;
  --mt-ink: #2742b0;
  --mt-soft: #e3e7fa;
  --mt-leaf-1: #4a66e0;
  --mt-leaf-2: #2840bc;

  /* botanical accents */
  --sage: #5f7355;
  --twine: #8a6a3b;
  /* good = green, poor = red (highlight polarity) */
  --good: #2f8f57;
  --poor: #c23b2b;
  --good-ink: #2a6b41;
  --poor-ink: #a8311f;
  --good-soft: #d8ecdd;
  --poor-soft: #f6dcd6;

  /* language flag-dots */
  --fr: #6f568c;
  --pl: #b23a48;
  --jp: #2e7d6b;

  --focus: #2a2722;
  --radius: 12px;
  --maxw: 1200px;
}

/* colorblind-safe ramp: orange / blue (CVD-friendly) */
body.cb-mode {
  --ht: #e07b00;
  --ht-ink: #8a4a00;
  --ht-leaf-1: #f59324;
  --ht-leaf-2: #d96f00;
  --mt: #1f6fb2;
  --mt-ink: #155a92;
  --mt-leaf-1: #3a8fd0;
  --mt-leaf-2: #1a5e98;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(138, 106, 59, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  font-family: "Source Serif 4", Newsreader, Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: Fraunces, "Source Serif 4", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.4em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--mt-ink);
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(47, 79, 203, 0.4);
}

b,
strong {
  font-weight: 600;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

.muted {
  color: var(--muted);
}

.ht-word {
  color: var(--ht-ink);
  font-weight: 600;
}
.mt-word {
  color: var(--mt-ink);
  font-weight: 600;
}
.good-word {
  color: var(--good-ink);
  font-weight: 600;
}
.poor-word {
  color: var(--poor-ink);
  font-weight: 600;
}
.fig-ht {
  color: var(--ht-ink);
}

/* ---------------- header / nav ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 239, 226, 0.85);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(var(--maxw), calc(100% - 40px));
  margin: 0 auto;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-family: Fraunces, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.brand-mark {
  width: 30px;
  height: 30px;
}
.brand-mark path {
  stroke: var(--twine);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.brand-ht {
  fill: var(--ht);
}
.brand-mt {
  fill: var(--mt);
}

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}

.nav-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 0.95rem;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--ink);
}

.cb-toggle {
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--muted);
}
.cb-toggle[aria-pressed="true"] {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-alt);
}

/* ---------------- layout bands ---------------- */
.band {
  padding: 72px max(20px, calc((100% - var(--maxw)) / 2));
}
.alt-band {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 760px;
  margin-bottom: 30px;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--twine);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h2 {
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.4rem);
}
.section-sub {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

/* ---------------- hero ---------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 40px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 32px;
}

.hero-title {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0.1em 0 0.35em;
  text-wrap: balance;
}

.authors {
  font-weight: 600;
  margin-bottom: 2px;
}
.authors a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.18em;
}
.authors a:hover {
  text-decoration-color: var(--ht);
  color: var(--ht-ink);
}
.affiliations {
  color: var(--muted);
  margin-bottom: 22px;
  font-size: 0.98rem;
}
.lede {
  max-width: 56ch;
  font-size: 1.08rem;
}
.hero-caption {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.hero-caption .count-up {
  color: var(--ink);
  font-weight: 600;
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hero-link:hover {
  background: var(--paper-alt);
  transform: translateY(-1px);
}
.hero-link.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.hero-link.primary:hover {
  background: #1f1c17;
}
.hero-link svg {
  flex: 0 0 auto;
}
.hero-link-soon {
  font-family: system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(244, 239, 226, 0.25);
  border: 1px solid rgba(244, 239, 226, 0.4);
}

/* ---------------- the tree ---------------- */
.tree-figure {
  margin: 0;
}
.tree-stage {
  position: relative;
}

#wishtree {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#trunk {
  filter: url(#grain);
}

.root {
  stroke: var(--twine);
  stroke-width: 9;
  opacity: 0.85;
  cursor: pointer;
}
.root:hover,
.root.is-active {
  stroke-width: 12;
  opacity: 1;
}

.branch {
  transition: opacity 0.3s ease;
}

/* leaves: the canopy of reader voices */
.leafdot {
  transition: opacity 0.3s ease;
}

/* hanging comment tags */
.tag {
  cursor: pointer;
}
.tag .string {
  stroke: var(--twine);
  stroke-width: 1.2;
  opacity: 0.5;
  fill: none;
}
.tag .knot {
  fill: var(--twine);
}
.tag .sway {
  transform-box: view-box;
  animation-name: sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}
@keyframes sway {
  from {
    transform: rotate(-2.1deg);
  }
  to {
    transform: rotate(2.1deg);
  }
}

.tag.dim {
  opacity: 0.16;
}
.tag.dim .string {
  opacity: 0.12;
}
.tag.falling {
  opacity: 0;
  transform: translateY(150px) rotate(20deg);
  transition:
    transform 0.85s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    opacity 0.7s ease 0.12s;
  pointer-events: none;
}
.tag.sprout {
  animation: sprout 0.5s ease both;
}
@keyframes sprout {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tag.is-hover .sway,
.tag:focus-visible .sway,
.tag.is-pinned .sway {
  animation-play-state: paused;
}
#tags.paused .sway {
  animation-play-state: paused;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.leaf {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  padding: 6px 9px 6px 11px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ht);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(58, 46, 24, 0.18);
  font-family: "Source Serif 4", Georgia, serif;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.leaf.mt {
  border-left-color: var(--mt);
}
.leaf .leaf-teaser {
  font-size: 11px;
  line-height: 1.28;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* fallback clip for engines that ignore -webkit-box line-clamp */
  max-height: calc(2 * 1.28em);
}
.leaf .leaf-meta {
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.leaf .leaf-badge {
  font-weight: 700;
}
.leaf.ht .leaf-badge {
  color: var(--ht-ink);
}
.leaf.mt .leaf-badge {
  color: var(--mt-ink);
}
.tag.is-hover .leaf,
.tag:focus-visible .leaf {
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(58, 46, 24, 0.28);
}

/* colorblind-safe: encode HT/MT by shape (solid vs notched) too */
body.cb-mode .leaf.mt {
  border-style: dashed;
  border-left-style: solid;
}
body.cb-mode .leaf.mt .leaf-badge::after {
  content: " ◆";
}

/* reading card (the unfold) */
.reading-card {
  position: absolute;
  top: 10px;
  right: 8px;
  pointer-events: none; /* never steal hover from the leaf underneath (prevents cursor flicker) */
  width: min(310px, 78%);
  max-height: calc(100% - 20px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  z-index: 5;
  font-size: 0.95rem;
}
.reading-card[hidden] {
  display: none;
}
.reading-card .rc-about {
  font-family: Fraunces, serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 8px;
}
.rc-about.ht {
  color: var(--ht-ink);
}
.rc-about.mt {
  color: var(--mt-ink);
}
.reading-card .rc-text {
  margin: 8px 0 12px;
  color: var(--ink);
}
.reading-card .rc-sign {
  font-family: Caveat, cursive;
  font-size: 1.3rem;
  color: var(--twine);
}

/* tree controls */
.tree-controls {
  margin-top: 14px;
}
.filter-sentence {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 2;
}
.select-wrap {
  position: relative;
  display: inline-block;
}
.filter-sentence select {
  appearance: none;
  background: var(--card);
  border: none;
  border-bottom: 2px dashed var(--twine);
  border-radius: 0;
  padding: 1px 22px 1px 6px;
  color: var(--ht-ink);
  font-weight: 600;
  cursor: pointer;
}
.select-wrap::after {
  content: "▾";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--twine);
  font-size: 0.7em;
}
.tree-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tree-count {
  color: var(--muted);
  font-size: 0.9rem;
}
.ghost-btn {
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.15s ease;
}
.ghost-btn:hover {
  background: var(--paper-alt);
}
.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-note {
  font-style: italic;
}
.dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}
.dot.ht {
  background: var(--ht);
}
.dot.mt {
  background: var(--mt);
}

/* ---------------- toggles / segmented ---------------- */
.toggle-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 26px;
}
.seg-btn {
  border: none;
  background: none;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92rem;
}
.seg-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* ---------------- verdict scales ---------------- */
.verdict-scale {
  display: grid;
  gap: 26px;
  max-width: 720px;
}
.scale {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-sm);
}
.scale-beam-wrap {
  position: relative;
  height: 210px;
  margin: 6px 0 4px;
}
.beam {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 78%;
  height: 8px;
  background: var(--twine);
  border-radius: 6px;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.beam-post {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 6px;
  height: 96px;
  background: var(--twine);
  transform: translateX(-50%);
  border-radius: 4px;
}
.pan {
  position: absolute;
  top: 0;
  width: 132px;
  text-align: center;
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.pan .pan-string {
  width: 1px;
  height: 0;
  margin: 0 auto;
  border-left: 1px dashed var(--twine);
  transition: height 1s ease;
}
.pan .pan-dish {
  border-radius: 12px;
  padding: 12px 8px;
  border: 1px solid var(--line-strong);
}
.pan.ht .pan-dish {
  background: var(--ht-soft);
  border-color: var(--ht);
}
.pan.mt .pan-dish {
  background: var(--mt-soft);
  border-color: var(--mt);
}
.pan-count {
  font-family: Fraunces, serif;
  font-size: 1.9rem;
  font-weight: 600;
  display: block;
  line-height: 1;
}
.pan.ht .pan-count {
  color: var(--ht-ink);
}
.pan.mt .pan-count {
  color: var(--mt-ink);
}
.pan-label {
  font-size: 0.82rem;
  color: var(--muted);
}
.scale-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 10px 0 0;
}
.takeaway {
  margin-top: 26px;
  font-family: Fraunces, serif;
  font-size: 1.3rem;
  color: var(--ink);
  max-width: 640px;
}

#jointTakeaway {
  max-width: none;
}

@media (min-width: 980px) {
  #jointTakeaway {
    white-space: nowrap;
  }
}

/* ---------------- verdict: upright bars (winner rises) ---------------- */
/* vertical preference columns: Human (gold) vs Machine (blue),
   each stacked by how decisive the choice was; a % chip sits in each band. */
.pref-cols-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 24px 20px;
}
.pref-cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 52px;
  min-height: 274px;
}
.pcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 118px;
}
.pcol-bar {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  transition: height 1s cubic-bezier(0.34, 1.1, 0.5, 1);
}
.pseg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.pseg-pct {
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink);
  background: rgba(251, 244, 228, 0.82);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.pcol-foot {
  margin-top: 11px;
  text-align: center;
  line-height: 1.12;
}
.pcol-foot b {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.5rem;
  font-weight: 600;
}
.pcol.ht .pcol-foot b {
  color: var(--ht-ink);
}
.pcol.mt .pcol-foot b {
  color: var(--mt-ink);
}
.pcol-foot span {
  font-size: 0.84rem;
  color: var(--muted);
}
.pd-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 15px;
  font-size: 0.86rem;
  color: var(--muted);
}
.pd-legend-title {
  font-weight: 600;
  color: var(--ink-soft);
}
.pd-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pd-swatch {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  /* matches the bar colours: gold (human) | blue (machine) at this decisiveness shade */
  background: linear-gradient(90deg, var(--ht) 0 50%, var(--mt) 50% 100%);
}
.vbar-caption {
  max-width: 640px;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 16px 0 0;
}

/* ---------------- rating dumbbell ---------------- */
.rating-chart {
  display: grid;
  gap: 22px;
  max-width: 760px;
}
.rating-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: center;
}
.rating-name {
  font-weight: 600;
}
.rating-name small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.78rem;
}
.twig {
  position: relative;
  height: 38px;
}
.twig-axis {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line-strong);
  border-radius: 3px;
  transform: translateY(-50%);
}
.twig-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
}
.gap-line {
  position: absolute;
  top: 50%;
  height: 4px;
  background: linear-gradient(90deg, var(--mt), var(--ht));
  opacity: 0.55;
  border-radius: 3px;
  transform: translateY(-50%);
  transition: width 0.9s ease, left 0.9s ease;
}
.rdot {
  position: absolute;
  top: 50%;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2.5px solid var(--card);
  transform: translate(-50%, -50%);
  transition: left 0.9s cubic-bezier(0.34, 1.1, 0.5, 1);
  box-shadow: 0 2px 5px rgba(58, 46, 24, 0.2);
}
.rdot.ht {
  background: var(--ht);
  z-index: 2;
}
.rdot.mt {
  background: var(--mt);
}
/* colorblind-safe: distinguish HT/MT dots by shape, not only hue */
body.cb-mode .rdot.mt {
  border-radius: 2px;
}
/* good vs poor is the worst red/green case for CVD — add a shape cue */
body.cb-mode .wcell.poor {
  border-radius: 50%;
}
body.cb-mode .sl-swatch.poor {
  border-radius: 50%;
}
.rating-delta {
  position: absolute;
  top: -2px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ht-ink);
  transform: translateX(-50%);
}
.rating-vals {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------------- detection gauges ---------------- */
.detect-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
}
.gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.gauge {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.gauge svg {
  width: 100%;
  height: auto;
  max-width: 220px;
}
.gauge-pct {
  font-family: Fraunces, serif;
  font-size: 2rem;
  fill: var(--ink);
}
.gauge-arc-bg {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 14;
  stroke-linecap: round;
}
.gauge-arc {
  fill: none;
  stroke: var(--sage);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s ease;
}
.gauge-chance {
  stroke: var(--poor);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.gauge-label {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
.gauge-frac {
  font-weight: 600;
  color: var(--ink);
}

.believe-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.believe-card h3 {
  font-size: 1.15rem;
}
.sd-intro {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.sd-row {
  margin-bottom: 18px;
}
.sd-row:last-child {
  margin-bottom: 0;
}
.sd-label {
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.sd-bar {
  display: flex;
  height: 22px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
}
.sd-bar .ok {
  background: var(--good);
  transition: width 0.8s ease;
}
.sd-bar .no {
  background: var(--poor);
  transition: width 0.8s ease;
}
.sd-n {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
}
.believe-viz {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 150px;
  margin: 16px 0;
}
.believe-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.believe-bar .bar-fill {
  width: 100%;
  border-radius: 8px 8px 0 0;
  transition: height 1s ease;
}
.believe-bar.match .bar-fill {
  background: var(--ht);
}
.believe-bar.mismatch .bar-fill {
  background: var(--mt);
}
.believe-bar .bar-num {
  font-family: Fraunces, serif;
  font-size: 1.5rem;
  font-weight: 600;
}
.believe-bar .bar-cap {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
}
.believe-note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------------- highlights waffle + joint ---------------- */
.waffle-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.waffle-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.wgroup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  margin-bottom: 12px;
}
.wgroup-stat {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.waffle {
  display: grid;
  grid-template-columns: repeat(auto-fill, 14px);
  gap: 4px;
  justify-content: start;
}
.wcell {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--line-strong);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
}
.wcell.in {
  opacity: 1;
  transform: scale(1);
}
.wcell.good {
  background: var(--good);
}
.wcell.poor {
  background: var(--poor);
}
.wcell.ht {
  background: var(--ht);
}
.wcell.mt {
  background: var(--mt);
}
.stipple-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 18px;
}
.stipple-legend .sl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}
.stipple-legend .sl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--line-strong);
}
.sl-swatch.good {
  background: var(--good);
}
.sl-swatch.poor {
  background: var(--poor);
}
.sl-swatch.ht {
  background: var(--ht);
}
.sl-swatch.mt {
  background: var(--mt);
}
.stipple-legend .sl-count {
  font-weight: 600;
}

.highlights-insight {
  margin-top: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  max-width: 820px;
}
.highlights-insight h3 {
  font-size: 1.2rem;
}
.joint-bars {
  display: grid;
  gap: 16px;
  margin: 18px 0 6px;
}
.joint-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
}
.joint-counts {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--muted);
}
.joint-track {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
}
.jt-good,
.jt-poor {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.9s cubic-bezier(0.34, 1.05, 0.5, 1);
}
.jt-good {
  background: var(--good);
}
.jt-poor {
  background: var(--poor);
}

.windows-cta {
  margin-top: 20px;
}
.windows-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 8px 0 0;
}

/* research data request */
.data-request {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.primary-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-family: "Source Serif 4", serif;
}
.primary-btn:hover {
  background: #3a352c;
}
.data-request .muted {
  font-size: 0.88rem;
  margin: 10px 0 0;
}

/* café au lait dataset panel */
.cafe-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}
.cafe-cup {
  position: sticky;
  top: 90px;
  cursor: pointer;
}
.cafe-cup svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* hover the cup -> it tips and spills, steam stops, a note appears */
.cafe-cup .cup {
  transform-box: view-box;
  transform-origin: 110px 190px;
  transition: transform 0.6s cubic-bezier(0.34, 1.15, 0.5, 1);
}
.cafe-cup:hover .cup {
  transform: rotate(-13deg);
}
.cafe-cup .spill {
  opacity: 0;
  transition: opacity 0.35s ease 0.12s;
}
.cafe-cup:hover .spill {
  opacity: 1;
}
.cafe-cup .spill .stream {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.6s ease 0.18s;
}
.cafe-cup:hover .spill .stream {
  stroke-dashoffset: 0;
}
.cafe-cup .spill .puddle {
  transform-box: view-box;
  transform-origin: 52px 197px;
  transform: scaleX(0.06);
  transition: transform 0.55s cubic-bezier(0.34, 1.1, 0.6, 1) 0.25s;
}
.cafe-cup:hover .spill .puddle {
  transform: scaleX(1);
}
.cafe-note {
  position: absolute;
  left: -8px;
  top: calc(100% - 4px);
  width: min(300px, 82vw);
  text-align: left;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--twine);
  border-radius: 10px;
  padding: 12px 15px;
  box-shadow: var(--shadow);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(8px) rotate(-1deg);
  transition: opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s;
}
.cafe-note .cn-hint {
  display: block;
  font-family: Caveat, cursive;
  font-size: 1.15rem;
  color: var(--twine);
  margin-bottom: 4px;
}
.cafe-note em {
  display: block;
  font-family: Caveat, cursive;
  font-size: 1.1rem;
  font-style: normal;
  color: var(--muted);
  margin-top: 8px;
}
.cafe-note .cn-more {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--mt-ink);
}
.cafe-cup:hover .cafe-note,
.cafe-note:hover {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
  pointer-events: auto;
}

/* post-study reflections */
.post-study-cta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.post-study-cta .muted {
  font-size: 0.9rem;
  margin: 0 0 10px;
}
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.ps-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.ps-id {
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.ps-flags {
  font-family: system-ui, sans-serif;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0 0 12px;
}
.ps-yes {
  color: var(--good-ink);
  font-weight: 600;
}
.ps-no {
  color: var(--poor-ink);
  font-weight: 600;
}
.ps-qa {
  margin: 0 0 14px;
}
.ps-qa:last-child {
  margin-bottom: 0;
}
.ps-q {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--twine);
}
.ps-a {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.cafe-cup .steam path {
  opacity: 0.55;
  animation: steam 3.5s ease-in-out infinite;
}
.cafe-cup:hover .steam {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cafe-cup .steam path:nth-child(2) {
  animation-delay: 0.6s;
}
.cafe-cup .steam path:nth-child(3) {
  animation-delay: 1.2s;
}
@keyframes steam {
  0%,
  100% {
    opacity: 0.2;
    transform: translateY(2px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-3px);
  }
}
.cafe-body .stat-grid {
  margin-bottom: 24px;
}
.stat-card .stat-sub {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

/* ---------------- comment wall ---------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
}
.toolbar label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.toolbar select,
.toolbar input[type="search"] {
  min-height: 42px;
  min-width: 170px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--card);
  padding: 0 12px;
}
.search-label {
  flex: 1;
  min-width: 220px;
}
.search-label input {
  width: 100%;
}
.result-summary {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 14px;
}
.comment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.comment-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.comment-card.ht {
  border-left-color: var(--ht);
}
.comment-card.mt {
  border-left-color: var(--mt);
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 11px;
}
.pill {
  font-family: system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--muted);
}
.pill.ht {
  background: var(--ht-soft);
  border-color: var(--ht);
  color: var(--ht-ink);
}
.pill.mt {
  background: var(--mt-soft);
  border-color: var(--mt);
  color: var(--mt-ink);
}
.pill.pos {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good-ink);
}
.pill.neg {
  background: var(--poor-soft);
  border-color: var(--poor);
  color: var(--poor-ink);
}
.pill .flag {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.flag.french {
  background: var(--fr);
}
.flag.polish {
  background: var(--pl);
}
.flag.japanese {
  background: var(--jp);
}
.flag.spanish {
  background: #c8852b;
}
.comment-text {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

/* decode reader "T1"/"T2" labels into human/machine */
.tref {
  font-weight: 700;
}
.tref.ht {
  color: var(--ht-ink);
}
.tref.mt {
  color: var(--mt-ink);
}
.t-key {
  display: inline-block;
  margin: 0 0 9px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  font-family: system-ui, sans-serif;
  font-size: 0.76rem;
  color: var(--muted);
}
.t-key .ht {
  color: var(--ht-ink);
  font-weight: 700;
}
.t-key .mt {
  color: var(--mt-ink);
  font-weight: 700;
}
.comment-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-more {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--mt-ink);
  cursor: pointer;
  font-size: 0.86rem;
  padding: 0;
  text-decoration: underline;
}
.wall-more {
  margin-top: 24px;
  text-align: center;
}

/* ---------------- book explorer ---------------- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.book-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.book-card:hover,
.book-card.is-active {
  transform: translateY(-3px);
  border-color: var(--twine);
}
.book-card .bc-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.book-card h3 {
  font-size: 1.12rem;
  margin-bottom: 12px;
}
.bc-gauge {
  height: 9px;
  border-radius: 999px;
  background: var(--mt-soft);
  overflow: hidden;
  margin-bottom: 6px;
}
.bc-gauge span {
  display: block;
  height: 100%;
  background: var(--ht);
}
.bc-gauge-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.book-detail {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.book-detail[hidden] {
  display: none;
}
.bd-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  flex-wrap: wrap;
}
.bd-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.bd-metric {
  background: var(--paper-alt);
  border-radius: 9px;
  padding: 12px;
}
.bd-metric strong {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.4rem;
}
.bd-metric span {
  font-size: 0.78rem;
  color: var(--muted);
}
.bd-section-title {
  font-family: Fraunces, serif;
  font-size: 1.05rem;
  margin: 18px 0 10px;
}
.bd-expref {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}
.bd-windows {
  display: grid;
  gap: 10px;
}

/* ---------------- difficulty bar ---------------- */
.explanation-sample {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ---------------- case study ---------------- */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
/* each card is a closed "book" (details) — a colour-coded spine + cover; tap to open */
.case-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.case-card.ht {
  border-left-color: var(--ht);
}
.case-card.mt {
  border-left-color: var(--mt);
}
.cc-cover {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  outline-offset: -3px;
}
.cc-cover::-webkit-details-marker {
  display: none;
}
.cc-cover::marker {
  content: "";
}
.cc-cover:hover {
  background: rgba(236, 227, 207, 0.4);
}
.case-card[open] > .cc-cover {
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}
.cc-cover-body {
  flex: 1;
  min-width: 0;
}
.cc-cover-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.cc-cover .cc-book {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.12rem;
  font-weight: 600;
  margin: 5px 0 8px;
}
.cc-cover-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.cc-chunkmini {
  font-size: 0.82rem;
  color: var(--muted);
}
.cc-open-hint {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--twine);
  transition: transform 0.25s ease, background 0.2s ease;
}
.cc-open-hint::before {
  content: "›";
  font-size: 1.3rem;
  line-height: 0;
  transform: rotate(90deg);
}
.case-card[open] .cc-open-hint {
  transform: rotate(180deg);
  background: var(--paper-alt);
}
.cc-open {
  padding: 18px 22px 20px;
  animation: cc-open-in 0.3s ease;
}
@keyframes cc-open-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* English translation shown under a foreign-language comment */
.cc-tr-en {
  margin: 7px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cc-tr-tag {
  font-family: system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--twine);
  margin-right: 6px;
}
/* two-column card: stats on the left, comments on the side */
.cc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.25fr);
  gap: 28px;
}
.cc-left {
  min-width: 0;
}
.cc-right {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: 26px;
}
.cc-grp {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--twine);
  margin: 16px 0 9px;
}
.cc-grp:first-child {
  margin-top: 0;
}
.cc-cmt {
  border-left: 3px solid var(--line-strong);
  padding-left: 12px;
  margin-bottom: 13px;
}
.cc-cmt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cc-quote {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.cc-passage {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .cc-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cc-right {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 16px;
  }
}
.cc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-route {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9rem;
}
.cc-id {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cc-book {
  font-size: 1.05rem;
  margin: 8px 0 12px;
}
.cc-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cc-detect {
  font-size: 0.84rem;
  font-weight: 600;
}
.cc-detect.ok {
  color: var(--good-ink);
}
.cc-detect.no {
  color: var(--poor-ink);
}
.cc-passages {
  margin-bottom: 14px;
}
.cc-pass-label {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.cc-pass-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
}
.cc-pass-bar .ht {
  background: var(--ht);
}
.cc-pass-bar .mt {
  background: var(--mt);
}
.cc-rate-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 4px 0 8px;
}
.cc-hl {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.cc-hl-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
}
.cc-hl-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-alt);
}
.cc-hl-bar .g {
  background: var(--good);
}
.cc-hl-bar .p {
  background: var(--poor);
}
.cc-hl-n {
  grid-column: 2;
  font-size: 0.76rem;
  color: var(--muted);
}
.case-highlights {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.case-highlights h3 {
  font-size: 1.2rem;
}
.case-highlights .ch-sub {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0 0 14px;
}
.cc-ratings {
  gap: 10px;
  margin-bottom: 14px;
}
.cc-ratings .rating-row {
  grid-template-columns: 96px 1fr;
  gap: 12px;
}
.cc-pcomment {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.cc-pcomment:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.cc-pcomment .t-key {
  margin-bottom: 6px;
}
.cc-sample {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink);
  font-style: italic;
}
.cc-sample::before {
  content: "“";
}
.cc-sample::after {
  content: "”";
}
.cc-tr {
  font-style: normal;
  font-size: 0.76rem;
  color: var(--muted);
}
.cc-more {
  margin-top: 12px;
  font-size: 0.82rem;
}

/* all-comments panel for one annotator */
.cp-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.cp-item {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.cp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cp-passage {
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.cp-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.case-note {
  max-width: 760px;
  margin-top: 22px;
  font-size: 0.9rem;
}

/* ---------------- stat grid (methods) ---------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.stat-value {
  font-family: Fraunces, serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}
.stat-label {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 5px;
}
.copyright-note {
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
  border-radius: 10px;
  padding: 20px 24px;
}
.copyright-note p:last-child {
  margin-bottom: 0;
}

/* ---------------- footer ---------------- */
.footer {
  padding: 36px max(20px, calc((100% - var(--maxw)) / 2));
  border-top: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 0.92rem;
}
.footer-title {
  font-family: Fraunces, serif;
  color: var(--ink);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.footer p {
  margin: 0 0 6px;
}

/* ---------------- modal ---------------- */
.modal[hidden] {
  display: none;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 39, 34, 0.5);
  backdrop-filter: blur(2px);
}
.modal-note {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 30px 32px;
}
.modal-note.wide {
  width: min(820px, 100%);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}
.modal-about {
  font-family: Fraunces, serif;
  font-size: 1.35rem;
  margin: 0 6px 14px 0;
}
.modal-about.ht {
  color: var(--ht-ink);
}
.modal-about.mt {
  color: var(--mt-ink);
}
.modal-comment {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 10px 0 18px;
}
.modal-sign {
  font-family: Caveat, cursive;
  font-size: 1.5rem;
  color: var(--twine);
  margin-bottom: 16px;
}
.modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.modal-window {
  margin-top: 16px;
  background: var(--paper-alt);
  border-radius: 10px;
  padding: 14px 16px;
}
.modal-window .mw-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.window-quote {
  font-style: italic;
  color: var(--ink);
}
.window-quote mark {
  background: var(--good-soft);
  padding: 0 2px;
  border-radius: 3px;
}
.window-quote.poor mark {
  background: var(--poor-soft);
}
.windows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.windows-grid .wq-card {
  background: var(--paper-alt);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 0.92rem;
}
.windows-grid .wq-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.empty-state {
  padding: 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

/* ---------------- reveal animation ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------- responsive ---------------- */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .detect-layout {
    grid-template-columns: 1fr;
  }
  .cafe-layout {
    grid-template-columns: 1fr;
  }
  .cafe-cup {
    position: static;
    max-width: 180px;
  }
}

@media (max-width: 620px) {
  .waffle-groups {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .pref-cols {
    gap: 30px;
    min-height: 228px;
  }
  .pcol {
    width: 96px;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 17px;
  }
  .band {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .nav-toggle {
    display: inline-block;
  }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
  }
  .nav-links.open {
    display: flex;
  }
  .topbar {
    flex-wrap: wrap;
  }
  .gauges {
    grid-template-columns: 1fr;
  }
  .comment-list,
  .explanation-sample {
    grid-template-columns: 1fr;
  }
  .cafe-note {
    display: none; /* hover-only easter egg; no hover on touch + would overlap stacked layout */
  }
  /* the SVG (and its tag text) scales down on narrow screens — enlarge leaf text in user units */
  .leaf .leaf-teaser {
    font-size: 13px;
    max-height: calc(2 * 1.28em);
  }
  .leaf .leaf-meta {
    font-size: 10px;
  }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .tag .sway {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .beam,
  .pan,
  .pan-string,
  .rdot,
  .gap-line,
  .gauge-arc,
  .bar-fill,
  .sd-bar span,
  .bc-gauge span,
  .wcell,
  .jt-good,
  .jt-poor,
  .pcol-bar {
    transition: none !important;
  }
  .wcell {
    opacity: 1;
    transform: none;
  }
  .cafe-cup .steam path {
    animation: none !important;
  }
  .cafe-cup .cup,
  .cafe-cup .spill,
  .cafe-cup .spill .stream,
  .cafe-cup .spill .puddle,
  .cafe-note {
    transition: none !important;
  }
  .tag.falling {
    transition: none !important;
  }
  .tag.sprout {
    animation: none !important;
  }
  .cc-open {
    animation: none !important;
  }
  .cc-open-hint {
    transition: none !important;
  }
  .node-card {
    transition: none !important;
  }
}

/* ============================================================
   STUDY DESIGN — "The Reading Trail" (#design)
   Sits between #tree and #verdict. No new JS (reuses .reveal + .count-up).
   Strict colour convention: gold/blue ONLY on HT/MT; green/red ONLY on good/poor.
   ============================================================ */
#design {
  border-top: 1px solid var(--line);
}

/* pre-taught colour legend under the section sub */
.trail-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 16px 0 0;
  font-size: 0.96rem;
  color: var(--muted);
}
.trail-legend .pill {
  font-size: 0.82rem;
}
.tl-key {
  display: inline-flex;
  align-items: center;
}
.tl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 7px;
}
.tl-swatch.good {
  background: var(--good);
}
.tl-swatch.poor {
  background: var(--poor);
}

/* ---- setup strip: the cast + two facing book spines ---- */
.trail-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 36px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
  margin: 24px 0;
}
.spines {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.spine {
  width: 56px;
  height: 108px;
  border-radius: 4px 7px 7px 4px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Fraunces, serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}
.spine.ht {
  background: var(--ht-soft);
  border-color: var(--ht);
  color: var(--ht-ink);
}
.spine.mt {
  background: var(--mt-soft);
  border-color: var(--mt);
  color: var(--mt-ink);
}
.spine-vs {
  font-family: Caveat, cursive;
  font-size: 1.55rem;
  color: var(--twine);
}
.setup-facts {
  flex: 1 1 300px;
  min-width: 240px;
}
.setup-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
}
.setup-to {
  color: var(--muted);
  font-size: 1.02rem;
}
.setup-langs .pill {
  font-size: 0.84rem;
}
.setup-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0 0 12px;
}
.sf-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.sf-cell b {
  font-family: Fraunces, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
}
.sf-cell span {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 3px;
}
.setup-note {
  font-family: Caveat, cursive;
  font-size: 1.32rem;
  color: var(--twine);
  margin: 6px 0 0;
}

/* ---- the flow: two phase lanes + a one-day break between ---- */
.trail-flow {
  display: grid;
  gap: 14px;
}
.trail-lane {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 9px 9px;
}
.lane-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 6px 9px;
}
.lane-head .trail-ic {
  width: 32px;
  height: 32px;
  color: var(--twine);
  flex: 0 0 auto;
}
.lane-eyebrow {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.lane-scope {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.lane-scope::before {
  content: "·";
  margin: 0 8px 0 0;
  color: var(--line-strong);
}

/* numbered node row with a dashed "clothesline" threaded behind the badges */
.lane-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  position: relative;
}
.lane-nodes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  height: 2px;
  background-image: linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  z-index: 0;
}
.trail-node {
  flex: 1 1 0;
  min-width: 140px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.node-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--twine);
  background: var(--card);
  color: var(--ink);
  font-family: Fraunces, serif;
  font-weight: 600;
  font-size: 1.18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  position: relative;
  z-index: 1;
}
/* flip card: front (icon + title) flips on click to reveal the stage description (back) */
.node-card {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 196px;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}
.node-card.flipped {
  transform: rotateY(180deg);
}
.node-face {
  grid-area: 1 / 1;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.node-climax .node-front {
  border-color: var(--line-strong);
}
.node-back {
  transform: rotateY(180deg);
  gap: 12px;
}
.node-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.node-flip-cue {
  position: absolute;
  top: 9px;
  right: 11px;
  color: var(--twine);
  opacity: 0.5;
  pointer-events: none;
}
.node-flip-hint {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--twine);
}
.node-card:hover .node-flip-cue {
  opacity: 0.9;
}
.node-ic {
  width: 76px;
  height: 76px;
  color: var(--twine);
  flex: 0 0 auto;
}
.node-title {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.2;
}
.node-cap {
  margin: 0;
  font-size: 1.22rem;
  color: var(--muted);
  line-height: 1.4;
}
.node-blind {
  font-family: system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 1px;
}
.node-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: 0;
}
.node-swatch.good {
  background: var(--good);
}
.node-swatch.poor {
  background: var(--poor);
}
/* the ONLY decorative gold/blue: HT/MT accents inside the comparison + side-by-side icons */
.pan-ht {
  fill: var(--ht);
}
.pan-mt {
  fill: var(--mt);
}

/* ---- the one-day break: a full-width neutral hinge ---- */
.trail-break {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px 0;
  color: var(--ink-soft);
}
.trail-break::before,
.trail-break::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
  border-top: 2px dashed var(--line-strong);
}
.trail-break::after {
  flex-grow: 3;
}
.break-chip {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--twine);
}
.break-chip svg {
  width: 26px;
  height: 26px;
}
.break-text {
  flex: 0 0 auto;
}
.break-title {
  display: block;
  font-family: Fraunces, serif;
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.1;
}
.break-sub {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---- harvest: what the path produced ---- */
.trail-harvest {
  margin-top: 26px;
}
.harvest-kicker {
  font-family: Caveat, cursive;
  font-size: 1.55rem;
  color: var(--twine);
  margin: 0 0 14px;
}
.harvest-grid .stat-value {
  font-size: 2.15rem;
}
.harvest-grid .stat-label {
  font-size: 0.96rem;
}
.harvest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.trail-harvest .section-sub {
  margin: 0;
}

/* ---- responsive: collapse to a vertical timeline on narrow screens ---- */
@media (max-width: 860px) {
  .lane-nodes {
    flex-direction: column;
    gap: 14px;
    padding-left: 6px;
  }
  .lane-nodes::before {
    left: 25px;
    top: 6px;
    bottom: 6px;
    right: auto;
    width: 2px;
    height: auto;
    background-image: linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px);
    background-size: 2px 12px;
  }
  .trail-node {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    min-width: 0;
  }
  .node-num {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .node-card {
    min-height: 0;
  }
  .node-face {
    align-items: flex-start;
    text-align: left;
    padding: 18px 16px;
  }
}
@media (max-width: 560px) {
  .trail-break::before,
  .trail-break::after {
    display: none;
  }
  .trail-break {
    justify-content: flex-start;
  }
}