:root {
  color-scheme: light;
  /* Roman palette: textured marble white as ground, imperial purple as the
     dominant identity colour (replacing forest green), shining gold
     elevated for accents and emphasis, laurel-leaf green kept only as a
     minor, functional accent (mastery/heat indicators). */
  --ink: #3b2e57;
  --ink-soft: #5c4e5a;
  --ink-faint: #8b7d89;
  --forest: #683499;
  --forest-2: #7440a8;
  --forest-3: #9a6cbd;
  --cream: #f6f3ec;
  --paper: #fbf9f4;
  --paper-deep: #ede7d9;
  --line: rgba(104, 52, 153, 0.18);
  --line-strong: rgba(104, 52, 153, 0.3);
  --gold: #c9a227;
  --gold-light: #f0dfa0;
  /* Culture-room accent: the "reading room" green used as the primary
     interactive colour (links, active filters, tags) inside the Culture
     section, distinct from the app's signature purple used elsewhere. */
  --culture-green: #3c6b3a;
  --culture-green-deep: #2c5029;
  --culture-green-light: #6b9a5f;
  --culture-green-bg: #e7efe3;
  --red: #9f4b45;
  --red-light: #efd3cf;
  --amber: #b2762f;
  --amber-light: #f3dfb9;
  --green: #5b7a4f;
  --green-light: #d7e2cd;
  --blue: #4f7084;
  --blue-light: #d4e2e9;
  --grey: #89918d;
  --grey-light: #e6e7e4;
  --shadow: 0 12px 28px rgba(38, 29, 58, 0.16), 0 2px 6px rgba(38, 29, 58, 0.1);
  --shadow-small: 0 5px 12px rgba(38, 29, 58, 0.13), 0 1px 3px rgba(38, 29, 58, 0.09);
  --radius: 0px;
  --radius-small: 0px;
  --chart-unseen: #c7cbc7;
  --chart-fragile: #b95f57;
  --chart-developing: #c58a3c;
  --chart-secure: #5b7a4f;
  --chart-strong: #486f8a;
  --chart-again: #b95f57;
  --chart-hard: #c58a3c;
  --chart-good: #5b7a4f;
  --chart-easy: #486f8a;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--cream);
  scroll-behavior: smooth;
}

html.reduced-motion {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  /* Textured marble: soft gold/purple glows, a handful of faint diagonal
     veins at varying angles (like natural stone), and a fine grain layer
     for texture, all over the cream ground. */
  background:
    radial-gradient(circle at 8% 4%, rgba(183, 139, 70, 0.13), transparent 28rem),
    radial-gradient(circle at 92% 28%, rgba(90, 60, 145, 0.11), transparent 30rem),
    linear-gradient(115deg, transparent 34%, rgba(98, 48, 143, 0.075) 35%, rgba(98, 48, 143, 0.06) 35.6%, transparent 37%),
    linear-gradient(68deg, transparent 57%, rgba(98, 48, 143, 0.06) 58%, transparent 59.4%),
    linear-gradient(150deg, transparent 21%, rgba(137, 118, 84, 0.065) 22%, transparent 23.6%),
    linear-gradient(160deg, transparent 78%, rgba(98, 48, 143, 0.05) 79%, transparent 80.8%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--cream);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  line-height: 1.55;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: var(--forest-2);
  text-underline-offset: 0.18em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.05;
}

h1 {
  letter-spacing: -0.035em;
}

h2 {
  letter-spacing: -0.018em;
}

img {
  display: block;
  max-width: 100%;
}

.ambient {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 0px;
  filter: blur(2px);
  opacity: 0.52;
}

.ambient-one {
  width: 22rem;
  height: 22rem;
  left: -10rem;
  top: 28rem;
  background: rgba(183, 139, 70, 0.12);
}

.ambient-two {
  width: 30rem;
  height: 30rem;
  right: -16rem;
  top: 8rem;
  background: rgba(93, 60, 151, 0.09);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(520px, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 64px);
  background: rgba(249, 246, 238, 0.89);
  border-bottom: 1px solid rgba(76, 44, 114, 0.1);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-self: start;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.brand .brand-seal {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--gold);
  background: var(--forest);
  color: var(--gold);
  box-shadow: none;
  font-size: 1.1rem;
}

.brand-motto {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.68rem;
  color: var(--forest);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-seal,
.subject-monogram {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #f8f3e7;
  background: var(--forest);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
}

.brand-seal {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  font-size: 1.5rem;
  object-fit: cover;
}


.desktop-nav {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 3px;
}

.desktop-nav > button {
  min-height: 41px;
  padding: 0 12px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;

}

.desktop-nav > button:hover,
.desktop-nav > button.active {
  background: rgba(76, 44, 114, 0.075);
  color: var(--forest);
}

.desktop-nav > .nav-item {
  position: relative;
  display: flex;
}

.desktop-nav > .nav-item > button {
  min-height: 41px;
  padding: 0 12px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;

}

.desktop-nav > .nav-item > button:hover,
.desktop-nav > .nav-item > button.active {
  background: rgba(76, 44, 114, 0.075);
  color: var(--forest);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 230px;
  margin-top: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: flex;
}

.nav-dropdown button {
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}

.nav-dropdown button:hover {
  background: rgba(76, 44, 114, 0.08);
  color: var(--forest);
}

.desktop-nav .nav-study {
  margin-left: 7px;
  padding-inline: 20px;
  color: #241703;
  background: linear-gradient(100deg, #c9a227, #e0bd54, #c9a227);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.35);
  transition: filter 0.15s;
}

.desktop-nav .nav-study:hover {
  background: linear-gradient(100deg, #c9a227, #e0bd54, #c9a227);
  color: #241703;
  filter: brightness(1.07);
}

.desktop-nav .account-chip {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  margin-left: 4px;
  padding: 0;
  color: #fff;
  background: var(--forest-2);
}


.app {
  width: min(1320px, calc(100% - 40px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 46px 0 110px;
  outline: none;
}

.app.app-flush-top {
  width: 100% !important;
  padding-top: 0 !important;
}

.app.app-entry-gate {
  width: 100% !important;
  padding: 0 !important;
  min-height: 100vh;
}

.entry-gate {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(130% 110% at 50% -10%, #7440a8 0%, #683499 48%, #2e2049 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.entry-gate-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--gold);
}
.entry-gate-corner-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.entry-gate-corner-tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.entry-gate-corner-bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.entry-gate-corner-br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

.entry-gate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px;
  max-width: 460px;
}

@media (max-width: 420px) {
  .entry-gate-content {
    padding: 32px 20px;
  }
}

.entry-gate-seal {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.2), 0 8px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 28px;
}
.entry-gate-seal img { width: 100%; height: 100%; object-fit: cover; }

.entry-gate-eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  color: #f0dfa0;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.entry-gate-h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #fff;
  font-size: 2.15rem;
  line-height: 1.22;
  margin: 0 0 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.entry-gate-rule {
  width: 40px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 0 20px;
  opacity: 0.7;
}

.entry-gate-quote {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  margin: 0 0 34px;
}
.entry-gate-quote cite {
  display: block;
  font-style: normal;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 223, 160, 0.6);
  margin-top: 6px;
}

.entry-gate-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(300px, 100%);
}

.entry-gate-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 12px 16px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  margin-bottom: 12px;
  text-align: center;
  box-sizing: border-box;
}
.entry-gate-field::placeholder { color: rgba(255, 255, 255, 0.5); }

.entry-gate-btn {
  width: 100%;
  background: linear-gradient(180deg, #dab949, #c9a227);
  color: #2e2049;
  border: none;
  padding: 12px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.4);
  margin-bottom: 14px;
  cursor: pointer;
}

.entry-gate-sub {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.entry-gate-guest {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 0 3px;
  margin-top: 18px;
  cursor: pointer;
}
.entry-gate-guest:hover { color: #fff; border-color: #fff; }
.entry-gate-confirm {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.entry-gate-confirm strong { color: #fff; }

/* .topbar and .mobile-nav both set their own unconditional `display` (the
   latter with !important on narrow viewports), which otherwise beats the
   browser's default `[hidden] { display: none }` UA rule — so
   topbar.hidden/mobileNav.hidden alone would not actually hide either while
   the entry gate is showing. */
.topbar[hidden],
.mobile-nav[hidden] {
  display: none !important;
}

.mobile-nav {
  display: none;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--forest-3);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.lede {
  max-width: 780px;
  color: var(--ink-soft);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  line-height: 1.45;
}

.page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(30px, 5vw, 66px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0px;
  color: #f7f1e5;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--forest);
  box-shadow: var(--shadow);
}

.page-hero.compact {
  align-items: center;
  padding-block: 40px;
}

.page-hero h1 {
  max-width: 820px;
  margin-bottom: 16px;
  font-size: clamp(2.6rem, 6vw, 5.8rem);
}

.page-hero.compact h1 {
  font-size: clamp(2.4rem, 5vw, 4.7rem);
}

/* .back-link's own rule sets a purple too close to .page-hero's own purple
   background to read clearly; every darker image-backed hero already
   overrides this further down with gold, so this fallback only ever
   applies to the flat-purple .page-hero variants that don't. */
.page-hero .back-link {
  color: rgba(247, 241, 229, 0.85);
}

/* The six Culture rooms (plus the Atlas) still used the original,
   much larger page-hero title scale — every other redesigned page in
   the app has since settled on this smaller, consistent size. Bringing
   these into line also removes the height variance that came from
   pairing that oversized type with the now-removed decorative marks. */
.gallery-hero h1,
.museum-hero h1,
.literature-hero h1,
.science-history-hero h1,
.listening-hero h1,
.intellectual-hero h1,
.atlas-hero h1 {
  max-width: 640px;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
}

.page-hero .eyebrow {
  color: var(--gold-light);
}

.page-hero .lede,
.page-hero p {
  color: rgba(247, 241, 229, 0.78);
}


.library-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(196, 161, 103, 0.22), transparent 20rem),
    linear-gradient(130deg, #533e6d, #4e3568);
}

.listening-hero {
  background:
    radial-gradient(circle at 82% 30%, rgba(91, 106, 140, 0.26), transparent 22rem),
    linear-gradient(130deg, #352842, #2e3f42);
}

.gallery-hero {
  background:
    radial-gradient(circle at 82% 30%, rgba(172, 121, 88, 0.23), transparent 22rem),
    linear-gradient(130deg, #302d28, #443c33);
}


.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 0px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 400;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.icon {
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: -2px;
}

.button:hover {
  transform: translateY(-1px);
}

.reduced-motion .button:hover {
  transform: none;
}

.button.primary {
  color: #fff;
  background: var(--forest);
}

.page-hero .button.primary {
  color: var(--forest);
  background: #f3ead8;
}

.button.secondary {
  border-color: var(--line-strong);
  color: var(--forest);
  background: rgba(255, 255, 255, 0.52);
}

.page-hero .button.secondary {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}

.button.danger {
  color: #fff;
  background: var(--red);
}

.button.small {
  min-height: 37px;
  padding-inline: 14px;
  font-size: 0.78rem;
}

.button.wide {
  width: 100%;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.button-row.wrap {
  flex-wrap: wrap;
}

.button-row.end {
  justify-content: flex-end;
}

.text-link,
.back-link,
.icon-text,
.save-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.text-link,
.back-link {
  color: var(--forest-2);
}

.back-link {
  display: inline-flex;
  margin-bottom: 16px;
}

.danger-text {
  color: var(--red);
}

.panel {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 249, 243, 0.84);
  box-shadow: var(--shadow-small);
}

/* Card-like components that were bordered but flat — sharp corners read
   as boxes floating on the page, not just outlined, so they need the
   same clean shadow every other card carries. */
.question-row,
.your-answer,
.model-answer,
.catalogue-card,
.subject-progress-row,
.priority-row,
.home-subject-toggle,
.knowledge-cell,
.disclaimer-card,
.source-box,
.demo-marking-panel,
.empty-state,
.knowledge-network-panel,
.knowledge-heat-panel,
.library-count-card,
.saved-mini-card,
.source-card,
.guide-index-item,
.culture-count-card,
.filter-panel,
.modal {
  box-shadow: var(--shadow-small);
}

.section-block {
  margin-top: 58px;
}

.section-heading,
.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.section-heading h2,
.panel-heading h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}


/* A small laurel-leaf watermark on the streak card only — growth and
   consistency are the one metric here that leaf imagery actually suits,
   rather than scattering leaves across every card. */


.subject-card,
.catalogue-card,
.topic-card {
  border: 1px solid var(--line);
  background: rgba(251, 249, 243, 0.9);
  box-shadow: var(--shadow-small);
}

.subject-card {
  padding: 24px;
  border-top: 5px solid var(--grey);
  border-radius: 0px;
}

.subject-card h3 {
  margin: 20px 0 8px;
  font-size: 1.65rem;
}

.subject-card p {
  min-height: 48px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.subject-card-top,
.catalogue-title-row,
.topic-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.subject-monogram {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
}

.aptitude-badge,
.paper-label,
.question-tags span,
.due-tag,
.personal-tag,
.article-kickers span,
.library-card-top span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 0px;
  font-size: 0.67rem;
  font-weight: 700;
}

.aptitude-badge {
  background: var(--grey-light);
  color: var(--ink-soft);
}

.aptitude-fragile {
  border-top-color: var(--red);
}

.aptitude-fragile .aptitude-badge {
  color: #783a35;
  background: var(--red-light);
}

.aptitude-developing {
  border-top-color: var(--amber);
}

.aptitude-developing .aptitude-badge {
  color: #75501f;
  background: var(--amber-light);
}

.aptitude-secure {
  border-top-color: var(--green);
}

.aptitude-secure .aptitude-badge {
  color: #513993;
  background: var(--green-light);
}

.aptitude-strong {
  border-top-color: var(--blue);
}

.aptitude-strong .aptitude-badge {
  color: #345064;
  background: var(--blue-light);
}

.progress-bar,
.topic-progress {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 0px;
  background: rgba(76, 44, 114, 0.1);
}

.progress-bar > span,
.progress-bar > i,
.topic-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--forest-3);
}


.feature-panel > p:not(.eyebrow) {
  color: var(--ink-soft);
}


.field-label,
.editor-form label > span,
.filter-panel label > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
}

.text-input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  outline: none;
}

.text-input,
select {
  min-height: 47px;
  padding: 0 13px;
}

textarea {
  min-height: 120px;
  padding: 13px;
  resize: vertical;
  line-height: 1.55;
}

.text-input:focus,
textarea:focus,
select:focus {
  border-color: var(--forest-3);
  box-shadow: 0 0 0 3px rgba(102, 81, 142, 0.13);
}


.subject-pick.selected,
.subject-pick:has(input:checked) {
  border-color: var(--forest-3);
  background: rgba(102, 81, 142, 0.11);
}


.lamp-card p:not(.eyebrow) {
  position: relative;
  max-width: 350px;
  color: rgba(245, 237, 221, 0.75);
}


.disclaimer-card {
  padding: 24px;
  border: 1px solid rgba(145, 91, 65, 0.22);
  border-radius: 0px;
  background: rgba(248, 238, 223, 0.77);
}

.disclaimer-card.full {
  padding: clamp(28px, 5vw, 48px);
}

.disclaimer-card h2 {
  font-size: 1.72rem;
}

.disclaimer-card p:not(.eyebrow) {
  color: #655f57;
  font-size: 0.82rem;
}

.disclaimer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.disclaimer-links a {
  padding: 6px 9px;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.57);
  font-size: 0.68rem;
  text-decoration: none;
}


.catalogue-card.aptitude-fragile {
  border-left-color: var(--red);
}

.catalogue-card.aptitude-developing {
  border-left-color: var(--amber);
}

.catalogue-card.aptitude-secure {
  border-left-color: var(--green);
}

.catalogue-card.aptitude-strong {
  border-left-color: var(--blue);
}


.course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding: clamp(30px, 5vw, 60px);
  border: 1px solid var(--line);
  border-left: 7px solid var(--grey);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.87);
  box-shadow: var(--shadow);
}

.course-hero.aptitude-fragile {
  border-left-color: var(--red);
}

.course-hero.aptitude-developing {
  border-left-color: var(--amber);
}

.course-hero.aptitude-secure {
  border-left-color: var(--green);
}

.course-hero.aptitude-strong {
  border-left-color: var(--blue);
}

.course-hero h1 {
  margin-bottom: 16px;
  font-size: clamp(3rem, 6vw, 5.8rem);
}

.course-hero > div > p:not(.eyebrow, .source-line) {
  max-width: 740px;
  color: var(--ink-soft);
}

.source-line {
  margin: 20px 0 0;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.course-score-card {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.54);
}

.score-ring {
  --score: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  place-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(var(--forest-3) var(--score), rgba(76, 44, 114, 0.1) 0);
}

.score-ring::before {
  position: absolute;
  inset: 15px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.score-ring strong,
.score-ring small {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.score-ring strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1;
}

.score-ring small {
  color: var(--ink-faint);
  font-size: 0.62rem;
}

.course-score-card > div {
  display: grid;
  gap: 4px;
}

.course-score-card > div span {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.course-actions-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.75);
}

.course-actions-strip > span {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.quick-type-study {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-type-study select {
  width: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 0px;
  font-size: 0.82rem;
}

.aptitude-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.aptitude-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-size: 0.67rem;
}

.aptitude-legend i,
.chart-legend i,
.status-dot,
.confidence-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.heat-unseen,
.legend-unseen {
  background: var(--chart-unseen) !important;
}

.heat-fragile,
.legend-fragile,
.legend-again {
  background: var(--chart-fragile) !important;
}

.heat-developing,
.legend-developing,
.legend-hard {
  background: var(--chart-developing) !important;
}

.heat-secure,
.legend-secure,
.legend-good {
  background: var(--chart-secure) !important;
}

.heat-strong,
.legend-strong,
.legend-easy {
  background: var(--chart-strong) !important;
}

.topic-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.topic-map-group + .topic-map-group {
  margin-top: 28px;
}
.topic-map-group-heading {
  margin: 0 0 14px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest-3);
}

.topic-card-coming-soon {
  opacity: 0.62;
}
.topic-card-coming-soon-note {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-style: italic;
}

.topic-card {
  display: flex;
  flex-direction: column;
  padding: 21px;
  border-top: 5px solid var(--grey);
  border-radius: 0px;
}

.topic-card.aptitude-fragile {
  border-top-color: var(--red);
}

.topic-card.aptitude-developing {
  border-top-color: var(--amber);
}

.topic-card.aptitude-secure {
  border-top-color: var(--green);
}

.topic-card.aptitude-strong {
  border-top-color: var(--blue);
}

.paper-label {
  color: var(--ink-faint);
  background: rgba(76, 44, 114, 0.07);
}

.topic-card h3 {
  margin: 10px 0 0;
  font-size: 1.65rem;
}

.topic-score {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
}

.topic-progress {
  margin-top: 18px;
}

.topic-meta {
  display: flex;
  gap: 10px;
  margin: 9px 0 15px;
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.subtopic-list {
  display: grid;
  gap: 5px;
  margin-bottom: 17px;
}

.subtopic-list button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 0px;
  background: rgba(76, 44, 114, 0.045);
  cursor: pointer;
  text-align: left;
  font-size: 0.71rem;
}

.subtopic-list button:hover {
  background: rgba(76, 44, 114, 0.085);
}

.subtopic-list small {
  color: var(--ink-faint);
}

/* One flex item, pushed to the bottom of the (grid-stretched) card, so a
   topic with fewer buttons than its row-mate never ends up with the gap
   distributed unevenly between them. */
.topic-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.question-database {
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.65);
}

.filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 0.85fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 22px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.46);
}

.filter-actions {
  display: flex;
  gap: 5px;
}

#subjectsFilterForm {
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
}

.question-list {
  display: grid;
  gap: 8px;
}

.question-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.54);
}

.question-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 0px;
  color: #fff;
  background: var(--grey);
  font-size: 0.72rem;
  font-weight: 700;
}

.question-row-main {
  min-width: 0;
}

.question-row-main h3 {
  margin: 8px 0 4px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.question-row-main > p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.question-tags span {
  min-height: 20px;
  padding: 2px 7px;
  color: var(--ink-soft);
  background: rgba(76, 44, 114, 0.06);
}

.question-tags .due-tag {
  color: #75413b;
  background: var(--red-light);
}

.question-tags .personal-tag {
  color: #4e4f73;
  background: #ddddf0;
}

.question-row-actions {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.study-shell {
  max-width: 1120px;
  margin: 0 auto;
  /* Clears the fixed floating AI tool buttons (Ask Demosthenes / Show Working)
     so they never sit on top of in-page controls, e.g. a flashcard's reveal button. */
  padding-bottom: 150px;
}

.study-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
}

.study-breadcrumbs,
.study-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.study-header-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.42);
}

.question-stage {
  padding: clamp(28px, 6vw, 68px);
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.91);
  box-shadow: var(--shadow);
}

.question-number {
  color: var(--forest-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.question-prompt {
  max-width: 930px;
  margin-bottom: 28px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.5;
  font-weight: 400;
}

.question-prompt .exam-line {
  margin: 0 0 10px;
}

.question-prompt .exam-line:last-child {
  margin-bottom: 0;
}

.question-prompt .exam-equation {
  margin: 16px 0;
  font-weight: 500;
}

.answer-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.answer-form textarea {
  min-height: 240px;
  padding: 20px;
  border-radius: 0px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.25rem;
}

.answer-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 14px;
}

.answer-form-footer p {
  max-width: 580px;
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.self-marking {
  display: grid;
  gap: 22px;
}

.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.answer-comparison {
  min-height: 140px;
  padding: 25px;
  border-radius: 0px;
}

.your-answer {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

.model-answer {
  color: #f8f1e3;
  background: var(--forest);
}

.model-answer .eyebrow {
  color: var(--gold-light);
}

.answer-comparison > p:last-child,
.answer-comparison .exam-line {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.17rem;
  line-height: 1.75;
  white-space: pre-wrap;
}

.answer-comparison > p:last-child {
  margin: 0;
}

.answer-comparison .exam-line {
  margin: 0 0 12px;
}

.answer-comparison .exam-line:last-of-type {
  margin-bottom: 0;
}

.answer-comparison .exam-equation {
  margin: 14px 0;
}

.mark-scheme {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(248, 241, 227, 0.25);
}

.mark-scheme-heading {
  margin: 0 0 10px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;

}

.mark-scheme-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mark-scheme-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.mark-scheme-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: 0px;
  background: rgba(248, 241, 227, 0.16);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
}

.mark-scheme-note {
  margin: 12px 0 0;
  color: rgba(248, 241, 227, 0.7);
  font-size: 0.72rem;
}

.explanation-panel {
  box-shadow: none;
}

.check-list,
.idea-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}


.insight-box {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  padding: 13px;
  border-radius: 0px;
  background: rgba(88, 63, 153, 0.1);
}

.insight-box.warning {
  background: rgba(178, 118, 47, 0.12);
}

.insight-box strong {
  font-size: 0.74rem;
}

.insight-box span {
  color: var(--ink-soft);
  font-size: 0.77rem;
}

.explanation-panel blockquote {
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
}

.source-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(76, 44, 114, 0.055);
}

.source-box > div {
  display: grid;
  gap: 3px;
}

.source-box strong,
.source-box a {
  font-size: 0.75rem;
}

.source-box span {
  color: var(--ink-faint);
  font-size: 0.68rem;
}

.confidence-panel {
  padding: 27px;
  border-radius: 0px;
  background: #4c3472;
  color: #f8f2e7;
}

.confidence-panel h2 {
  margin-bottom: 8px;
  font-size: 2.25rem;
}

.confidence-panel .eyebrow {
  color: var(--gold-light);
}

.confidence-panel > div:first-child > p:last-child {
  color: rgba(248, 242, 231, 0.7);
  font-size: 0.82rem;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 22px;
}

.rating-button {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px;
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
  cursor: pointer;
  text-align: left;
}

.rating-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.rating-button strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.rating-button span,
.rating-button small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
}

.rating-again {
  border-bottom: 4px solid var(--chart-again);
}

.rating-hard {
  border-bottom: 4px solid var(--chart-hard);
}

.rating-good {
  border-bottom: 4px solid var(--chart-good);
}

.rating-easy {
  border-bottom: 4px solid var(--chart-easy);
}

.rating-button.demo-suggested {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(183, 139, 70, 0.45) inset;
}

.demo-suggested-badge {
  display: inline-block;
  margin-bottom: 2px;
  padding: 2px 8px;
  border-radius: 0px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;

  justify-self: start;
}

.demo-marking-panel {
  padding: 22px 25px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0px;
  background: var(--paper);
}

.demo-marking-panel .eyebrow {
  color: var(--gold);
}

.demo-marking-panel p {
  margin: 6px 0 0;
  line-height: 1.65;
  white-space: pre-wrap;
}

.demo-marking-panel.loading p {
  color: var(--ink-faint);
  font-style: italic;
}

.demo-suggestion {
  color: var(--forest);
  font-size: 0.85rem;
}

.demo-marking-panel .button {
  margin-top: 14px;
}

.demo-mark-breakdown {
  display: grid;
  gap: 2px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}

.demo-mark-breakdown li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.demo-mark-breakdown li:last-child {
  border-bottom: none;
}

.demo-mark-breakdown .mark-icon {
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 700;
}

.demo-mark-breakdown li strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

.demo-mark-breakdown li p {
  margin: 3px 0 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.55;
}

.demo-mark-breakdown li.mark-achieved .mark-icon { color: var(--chart-easy); }
.demo-mark-breakdown li.mark-partial .mark-icon { color: var(--chart-hard); }
.demo-mark-breakdown li.mark-not-achieved .mark-icon { color: var(--chart-again); }

.demo-overall {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}


.chart-panel {
  min-width: 0;
}


.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 0.69rem;
}

.chart-legend strong {
  color: var(--ink);
}


/* Dots are plain HTML circles laid over the chart, not SVG content — the
   SVG itself uses preserveAspectRatio="none" so its polyline always fills
   the container's actual width, but that same non-uniform stretch turns
   perfect circles into ellipses. Positioning these by percentage keeps
   them lined up with the chart while staying genuinely round. */


.chart-x-labels {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  margin-top: -9px;
  color: var(--ink-faint);
  font-size: 0.62rem;
  text-align: center;
}


.subject-progress-list,
.priority-list,
.review-history {
  display: grid;
  gap: 8px;
}

.subject-progress-row,
.priority-row {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(251, 249, 243, 0.7);
  cursor: pointer;
  text-align: left;
}

.subject-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-left: 5px solid var(--grey);
  border-radius: 0px;
}

.subject-progress-row.aptitude-fragile {
  border-left-color: var(--red);
}

.subject-progress-row.aptitude-developing {
  border-left-color: var(--amber);
}

.subject-progress-row.aptitude-secure {
  border-left-color: var(--green);
}

.subject-progress-row.aptitude-strong {
  border-left-color: var(--blue);
}

.subject-progress-copy {
  display: grid;
  gap: 4px;
}

.subject-progress-copy small,
.subject-progress-score small {
  color: var(--ink-faint);
  font-size: 0.69rem;
}

.subject-progress-copy .progress-bar {
  margin-top: 4px;
}

.subject-progress-score {
  display: grid;
  justify-items: end;
}

.subject-progress-score strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
}


.review-history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.review-history-item span:nth-child(2) {
  display: grid;
}

.review-history-item small {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.review-history-item b {
  font-size: 0.7rem;
}


.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 28px;
}

.library-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.82);
  box-shadow: var(--shadow-small);
}


.library-card h2 {
  margin: 25px 0 10px;
  font-size: 1.8rem;
}


.library-card > p:last-of-type {
  color: var(--ink-soft);
  font-size: 0.79rem;
}


.save-button {
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.save-button.saved {
  color: var(--forest);
}

.save-button.prominent {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.49);
}

.saved-shelf-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.saved-mini-card {
  display: grid;
  gap: 4px;
  flex: 0 0 240px;
  min-height: 110px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.54);
  cursor: pointer;
  text-align: left;
}

.saved-mini-card span {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.learning-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.learning-note h3 {
  font-size: 1.5rem;
}

.learning-note p {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.learning-note > strong {
  font-size: 0.72rem;
}

.citation-links {
  display: grid;
  gap: 8px;
}

.citation-links a {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.52);
  text-decoration: none;
}

.citation-links a:hover {
  border-color: var(--forest-3);
}

.citation-links span,
.citation-links small {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.citation-links strong {
  font-size: 0.75rem;
}

.citation-links.compact a {
  padding: 9px;
}

.library-article {
  max-width: 1120px;
  margin: 0 auto;
}

.article-header {
  padding: clamp(30px, 7vw, 78px);
  border-radius: 0px;
  color: #f7f1e5;
  background: var(--forest);
  box-shadow: var(--shadow);
}

.article-header .back-link {
  color: var(--gold-light);
}

.article-kickers {
  display: flex;
  gap: 7px;
  margin-bottom: 22px;
}

.article-kickers span {
  border: 1px solid rgba(255, 255, 255, 0.17);
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.06);
}

.article-header h1 {
  max-width: 900px;
  margin-bottom: 18px;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  overflow-wrap: break-word;
}

.article-standfirst {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.article-header .save-button {
  margin-top: 18px;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 45px;
  padding: clamp(35px, 6vw, 70px) clamp(10px, 3vw, 32px);
}

.article-body {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  line-height: 1.68;
}

.article-body h2 {
  margin-top: 58px;
  margin-bottom: 22px;
  font-size: 2.2rem;
}

.dropcap::first-letter {
  float: left;
  margin: 0.07em 0.09em 0 0;
  color: var(--forest);
  font-size: 4.3rem;
  line-height: 0.8;
}

.idea-list li {
  position: relative;
  padding: 13px 0 13px 25px;
  border-bottom: 1px solid var(--line);
}

.idea-list li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  content: "◆";
  font-size: 0.62rem;
}

.article-questions {
  display: grid;
  gap: 11px;
  padding-left: 24px;
}

.article-questions li {
  padding-left: 8px;
}

.article-sources {
  align-self: start;
  position: sticky;
  top: 105px;
}

.source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  margin-bottom: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.84);
  text-decoration: none;
}

.source-card > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff;
  background: var(--forest);
  font-size: 0.69rem;
}

.source-card div {
  min-width: 0;
}

.source-card small,
.source-card p {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.source-card strong,
.source-card p {
  display: block;
}

.source-card p {
  margin: 3px 0 0;
}

.source-card > b {
  color: var(--forest-3);
}

.source-caution {
  margin-top: 17px;
  color: var(--ink-faint);
  font-size: 0.7rem;
}

.listening-guide-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  margin-top: 60px;
}

/* Matches the Lives & Ideas .intellectual-index pattern: a sticky,
   height-capped aside with its own header, and a separately scrolling list
   inside it — 35 recordings is too many to render unconstrained the way a
   handful of guides once could, the way .intellectual-index-scroll already
   solved for its own list. */
.guide-index {
  align-self: start;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.guide-index > header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.guide-index > header h2 {
  margin: 2px 0;
  font-size: 1.3rem;
}

.guide-index > header small {
  color: var(--ink-faint);
}

.guide-index-scroll {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.guide-index-item {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.guide-index-item:hover,
.guide-index-item.active {
  border-color: var(--line);
  background: rgba(251, 249, 243, 0.74);
}

.guide-index-item span,
.guide-index-item small {
  color: var(--ink-faint);
  font-size: 0.65rem;
}

.guide-detail {
  padding: clamp(28px, 5vw, 55px);
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.82);
  box-shadow: var(--shadow-small);
}

.guide-detail h3,
.guide-sources h3 {
  margin-bottom: 14px;
  color: var(--culture-green-deep);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.guide-detail h1 {
  margin-bottom: 6px;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
}

.guide-detail > h2 {
  color: var(--ink-soft);
  font-size: 1.65rem;
}

.guide-detail > h3 {
  margin-top: 34px;
  font-size: 1.65rem;
}

.guide-detail > p {
  color: var(--ink-soft);
}

.listen-pass-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0;
}

.listen-pass-grid section {
  padding: 20px;
  border-radius: 0px;
  color: #f6efe1;
  background: var(--forest);
}

.listen-pass-grid span {
  color: var(--gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;

}

.listen-pass-grid p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.guide-sources {
  margin-top: 34px;
  padding-top: 27px;
  border-top: 1px solid var(--line);
}

.guide-sources > p {
  color: var(--ink-faint);
  font-size: 0.69rem;
}

.theory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.theory-card {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.84);
  box-shadow: var(--shadow-small);
}

.theory-card h3 {
  margin: 4px 0 12px;
  font-size: 1.3rem;
}

.theory-card p.theory-card-summary {
  margin: 0 0 2px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--green);
}

.theory-card p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.theory-card p:last-child {
  margin-bottom: 0;
}

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

.gallery-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 850px;
  margin: 20px auto 0;
}

.example-searches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 28px;
}

.example-searches button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.47);
  cursor: pointer;
  font-size: 0.7rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gallery-intro-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: 35px;
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.76);
}

.frame-placeholder,
.art-placeholder {
  display: grid;
  place-items: center;
  color: #e7d5b5;
  background: var(--forest);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
}

.frame-placeholder {
  height: 280px;
  border: 18px solid #8b6b3e;
  box-shadow: inset 0 0 0 5px #c9a66a;
  font-size: 5rem;
}

.gallery-intro-card h2 {
  font-size: 2.8rem;
}

.gallery-intro-card p:not(.eyebrow) {
  color: var(--ink-soft);
}

.art-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.83);
  box-shadow: var(--shadow-small);
}

.art-card > img,
.art-placeholder {
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.art-placeholder {
  font-size: 4rem;
}

.art-card-copy {
  padding: 20px;
}

.art-card-copy > span {
  color: var(--ink-faint);
  font-size: 0.66rem;
}

.art-card-copy h2 {
  margin: 8px 0 6px;
  font-size: 1.55rem;
}

.artist-line {
  color: var(--forest-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.art-card-copy > p:last-of-type {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.gallery-source {
  margin-top: 22px;
}

.loading-card,
.empty-state {
  grid-column: 1 / -1;
  padding: 42px;
  border: 1px dashed var(--line-strong);
  border-radius: 0px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.32);
  text-align: center;
}

.empty-state h2,
.empty-state h3 {
  color: var(--ink);
}

.editor-form {
  display: grid;
  gap: 19px;
  max-width: 1000px;
  margin: 24px auto 0;
}

.form-grid {
  display: grid;
  gap: 13px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-form label > span small {
  color: var(--ink-faint);
  font-weight: 400;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  margin-top: 24px;
}

/* The three cards hold visibly different amounts of content (a short
   preferences form, a stats list, a longer plan/usage panel) — stretching
   them to equal height and pinning each card's closing action to the
   bottom keeps their edges aligned instead of the ragged look three
   intrinsically-sized cards produce side by side. */
.account-grid > .panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.account-grid .editor-form {
  max-width: none;
  margin: 0;
}
.account-grid .editor-form .button.primary {
  margin-top: auto;
}
.account-grid .data-panel .button-stack {
  margin-top: auto;
}
.account-grid .plan-panel .plan-usage {
  margin-top: auto;
}
.cloud-sync-panel .cloud-sync-status { font-size: 0.82rem; color: var(--ink-faint); margin: 4px 0 14px; }
.account-grid .cloud-sync-panel .button-stack { margin-top: auto; }

@media (max-width: 980px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-grid > .panel {
    height: auto;
  }
}

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

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.toggle-row span {
  margin: 0 !important;
}

.toggle-row strong,
.toggle-row small {
  display: block;
}

.toggle-row small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-weight: 400;
}

.toggle-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--forest);
}

.data-panel dl {
  display: grid;
  gap: 0;
  margin: 20px 0;
}

.data-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.data-panel dt {
  color: var(--ink-soft);
}

.data-panel dd {
  margin: 0;
  font-weight: 700;
}

.button-stack {
  display: grid;
  gap: 9px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 78px;
  padding: 25px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
}

.app-footer > div:first-child {
  display: grid;
  gap: 3px;
}

.app-footer strong {
  color: var(--ink);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
}

.app-footer span {
  font-size: 0.7rem;
}

.app-footer > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.app-footer button {
  padding: 0;
  border: 0;
  color: var(--ink-faint);
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
}

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

.modal {
  width: min(520px, calc(100% - 30px));
  padding: 0;
  border: 0;
  border-radius: 0px;
  background: transparent;
}

.modal::backdrop {
  background: rgba(59, 39, 84, 0.54);
  backdrop-filter: blur(4px);
}

.modal-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.modal-card h2 {
  font-size: 2rem;
}

.modal-card > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.toast-region {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 380px;
  padding: 13px 16px;
  border-radius: 0px;
  color: #fff;
  background: var(--forest);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: 0.78rem;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto 1fr;
  }

  .desktop-nav {
    grid-column: 2;
  }

  .desktop-nav > button {
    padding-inline: 9px;
  }

  .subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-map,
  .library-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-panel label:first-child {
    grid-column: span 2;
  }

  .library-filters {
    grid-template-columns: 2fr 1fr 1fr auto;
  }
}

@media (max-width: 900px) {
  .topbar {
    min-height: 68px;
    padding: 10px 18px;
  }

  .desktop-nav {
    display: none;
  }

  .app {
    width: min(100% - 24px, 760px);
    padding-top: 24px;
    padding-bottom: 110px;
  }

  .mobile-nav {
    position: fixed;
    z-index: 60;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0px;
    background: rgba(75, 44, 110, 0.96);
    box-shadow: 0 15px 45px rgba(56, 33, 84, 0.25);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 53px;
    padding: 5px;
    border: 0;
    border-radius: 0px;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    font-size: 0.6rem;
    font-weight: 600;
  }

  .mobile-nav button span {
    font-size: 1.05rem;
  }

  .mobile-nav button .icon {
    margin-right: 0;
  }

  .mobile-nav button.active,
  .mobile-nav .mobile-study {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  .welcome-shell,
  .course-hero,
  .article-layout,
  .listening-guide-layout,
  .account-grid {
    grid-template-columns: 1fr;
  }

  .welcome-aside,
  .article-sources,
  .guide-index {
    position: static;
  }

  .welcome-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-hero {
    display: grid;
    align-items: start;
    padding: 33px;
  }

  .hero-actions {
    justify-content: start;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-grid,
  .topic-map,
  .library-grid,
  .gallery-grid,
  .learning-note-grid,
  .course-catalogue {
    grid-template-columns: 1fr;
  }

  .two-column,
  .listen-pass-grid {
    grid-template-columns: 1fr;
  }

  .course-score-card {
    justify-self: start;
  }

  .course-actions-strip {
    flex-wrap: wrap;
  }

  .course-actions-strip > span {
    width: 100%;
    margin: 0;
  }

  .filter-panel,
  .library-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-panel label:first-child {
    grid-column: span 2;
  }

  .rating-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .wide-chart {
    grid-column: auto;
  }

  .listening-guide-layout {
    gap: 12px;
  }

  .guide-index {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .guide-index > .eyebrow {
    display: none;
  }

  .guide-index-item {
    flex: 0 0 220px;
  }
}

@media (max-width: 620px) {
  .brand-copy small {
    display: none;
  }

  .brand-seal {
    width: 39px;
    height: 39px;
  }

  .app {
    width: min(100% - 16px, 600px);
  }

  .page-hero,
  .course-hero,
  .question-stage,
  .article-header,
  .guide-detail {
    border-radius: 0px;
  }

  .page-hero {
    padding: 27px 23px;
  }

  .page-hero h1 {
    font-size: clamp(2.5rem, 14vw, 4.4rem);
  }

  .welcome-copy > h1 {
    font-size: clamp(3.7rem, 20vw, 6.2rem);
  }

  .method-strip,
  .subject-picks,
  .welcome-aside,
  .metric-grid,
  .subject-grid,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .method-strip {
    gap: 6px;
  }

  .lamp-card {
    min-height: 250px;
  }

  .section-heading,
  .panel-heading,
  .study-header,
  .answer-form-footer,
  .source-box,
  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading,
  .panel-heading {
    display: grid;
  }

  .aptitude-legend {
    justify-content: flex-start;
  }

  .course-hero {
    padding: 25px;
  }

  .course-hero h1 {
    font-size: 3.5rem;
  }

  .course-score-card {
    width: 100%;
  }

  .course-actions-strip .button {
    flex: 1 1 150px;
  }

  .quick-type-study {
    flex: 1 1 100%;
  }

  .quick-type-study select {
    flex: 1;
  }

  .filter-panel,
  .library-filters {
    grid-template-columns: 1fr;
  }

  .filter-panel label:first-child {
    grid-column: auto;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .question-row {
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: start;
  }

  .question-index {
    width: 35px;
    height: 35px;
  }

  .question-row-actions {
    grid-column: 2;
    display: flex;
    justify-content: flex-start;
  }

  .question-stage {
    padding: 25px 18px;
  }

  .question-prompt {
    margin-bottom: 20px;
    font-size: 1.45rem;
  }

  .answer-form textarea {
    min-height: 210px;
    font-size: 1.1rem;
  }

  .answer-form-footer .button {
    width: 100%;
  }

  .rating-grid {
    grid-template-columns: 1fr;
  }

  .rating-button {
    min-height: 95px;
  }

  .chart-x-labels span:nth-child(even) {
    visibility: hidden;
  }

  .subject-progress-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .subject-progress-score {
    grid-column: 2;
    justify-items: start;
  }

  .library-card {
    min-height: 0;
  }

  .article-layout {
    padding-inline: 4px;
  }

  .article-body {
    font-size: 1.06rem;
  }

  .gallery-search {
    grid-template-columns: 1fr;
  }

  .gallery-intro-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .frame-placeholder {
    height: 230px;
  }

  .art-card > img,
  .art-placeholder {
    height: 260px;
  }

  .app-footer > div:last-child {
    gap: 10px;
  }

  .toast-region {
    left: 12px;
    right: 12px;
    bottom: 88px;
  }

  .toast {
    max-width: none;
  }
}

/* Cultural rooms ---------------------------------------------------------
   Each room's hero carries a curated photograph behind a dark gradient
   scrim, matching the rest of the app's hero language (dark ground, cream
   type) instead of the pale "manuscript page" treatment these previously
   had on their own — one consistent hero style throughout. culture-hero,
   science-history-hero, intellectual-hero and listening-hero already have
   real local photography wired further down (the "Refined public-domain
   visual atmosphere" rules) — this block only supplies the four rooms
   that had none: gallery, museum, atlas and literature. Local assets are
   used wherever a genuinely fitting one already exists in /assets; the
   Parthenon is the one exception, since no local image suits the
   Civilisations Atlas. The gradient is listed ahead of the photo and the
   room colour sits behind both, so a slow network or a dead link still
   leaves a deliberate-looking panel rather than a blank or broken one. */
.culture-hero,
.gallery-hero,
.museum-hero,
.atlas-hero,
.literature-hero,
.science-history-hero,
.intellectual-hero,
.listening-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #f7f1e5;
}

.gallery-hero { background-image: linear-gradient(125deg, rgba(26, 20, 15, .93), rgba(26, 20, 15, .48) 55%, rgba(26, 20, 15, .82)), url("./assets/bg-gallery-hall.jpg"); }
.museum-hero { background-image: linear-gradient(125deg, rgba(20, 18, 14, .93), rgba(20, 18, 14, .48) 55%, rgba(20, 18, 14, .82)), url("./assets/bg-museum-study.jpg"); }
.literature-hero { background-image: linear-gradient(125deg, rgba(21, 18, 12, .93), rgba(21, 18, 12, .48) 55%, rgba(21, 18, 12, .82)), url("./assets/bg-study-desk.jpg"); }
.atlas-hero { background-image: linear-gradient(125deg, rgba(18, 22, 27, .93), rgba(18, 22, 27, .48) 55%, rgba(18, 22, 27, .82)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Acropolis_Parthenon_Athens_Greece.jpg?width=1600"), linear-gradient(130deg, #23303d, #33465a); }

.culture-hero::after,
.gallery-hero::after,
.museum-hero::after,
.atlas-hero::after,
.literature-hero::after,
.science-history-hero::after,
.intellectual-hero::after,
.listening-hero::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(247, 241, 229, 0.16);
  border-radius: 0px;
}


.culture-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 26px 0 36px;
}

.culture-room {
  position: relative;
  min-height: 340px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(79, 55, 29, 0.2);
  border-radius: 0px 7px 5px 5px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.culture-room::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(127, 89, 43, 0.13);
  border-radius: 0px 5px 3px 3px;
  pointer-events: none;
}

.culture-room h2 {
  max-width: 12ch;
  margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.culture-room p:not(.eyebrow) {
  max-width: 36ch;
  color: var(--ink-soft);
}

.culture-room .button {
  position: absolute;
  left: 34px;
  bottom: 34px;
}


.atlas-room p:not(.eyebrow) {
  color: rgba(255,255,255,.72);
}


.method-triptych,
.object-question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.method-triptych article,
.object-question-grid > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255,255,255,.52);
}

.method-triptych strong,
.object-question-grid strong {
  display: block;
  margin-bottom: 7px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.method-triptych p,
.object-question-grid p {
  margin: 0;
  color: var(--ink-soft);
}


.curated-gallery-grid,
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 24px 0 42px;
}

.curated-art-card,
.artifact-card {
  overflow: hidden;
  border: 1px solid rgba(92, 65, 34, 0.18);
  border-radius: 0px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.curated-art-card:nth-child(3n+2) {
  transform: translateY(18px);
}

.culture-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(87, 62, 128, 0.08), rgba(179, 139, 70, 0.18)),
    var(--paper-deep);
}

.culture-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: contain;
  background: #e7decc;
}

.culture-media.gallery img,
.culture-media.gallery-detail img {
  object-fit: cover;
}

.culture-media-placeholder {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--forest);
}

.culture-media-placeholder span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 96px;
  border: 4px double currentColor;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
}

.culture-media-placeholder small {
  font-size: .7rem;
  letter-spacing: .08em;

}

.culture-media-credit {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 0px;
  color: #fff;
  background: rgba(55, 35, 76, 0.76);
  font-size: .68rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.curated-art-copy,
.artifact-card-copy {
  padding: 22px;
}

.culture-meta-row,
.artifact-card-copy > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;

}

.curated-art-copy h2,
.artifact-card-copy h2 {
  margin: 12px 0 7px;
  font-size: 1.65rem;
}

.curated-art-copy > p:not(.artist-line),
.artifact-card-copy > p:not(.artist-line) {
  color: var(--ink-soft);
}

.culture-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.3fr);
  gap: 0;
  margin: 24px 0 34px;
  overflow: hidden;
  border: 1px solid rgba(92, 65, 34, 0.24);
  border-radius: 0px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.culture-detail-media .culture-media {
  height: 100%;
  min-height: 520px;
}

.culture-detail-media .culture-media img {
  min-height: 520px;
}

.culture-detail-copy {
  padding: clamp(28px, 5vw, 58px);
}

.culture-detail-copy h1 {
  max-width: 15ch;
  margin-bottom: 8px;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
}

.detail-byline {
  color: var(--gold);
  font-weight: 600;
}

.detail-close {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  cursor: pointer;
  font-size: 1.35rem;
}


.linked-civilizations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 22px 0;
}

.linked-civilizations strong {
  width: 100%;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
}

.linked-civilizations button {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: var(--paper-deep);
  cursor: pointer;
}

.detail-sources {
  margin-top: 24px;
}

.provenance-panel {
  border-top: 4px double rgba(108, 77, 40, 0.25);
}

.atlas-shell {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, .9fr);
  gap: 22px;
  margin: 25px 0;
}

.antique-globe-panel,
.atlas-controls-panel {
  border: 1px solid rgba(94, 66, 33, 0.23);
  border-radius: 0px;
  background: #eee3ca;
  box-shadow: var(--shadow-small);
}

.antique-globe-panel {
  position: relative;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, #efe3c7 0 36%, transparent 37%),
    linear-gradient(145deg, #4f3275, #3e275e);
}


.continent-shape:hover,
.continent-shape.selected {
  fill: #b48b4d;
  transform: scale(1.018);
}


.zone-marker:hover circle,
.zone-marker.selected circle {
  fill: #4b1680;
  r: 3.2;
}


.globe-note {
  margin: 8px 0 0;
  color: rgba(255,255,255,.62);
  text-align: center;
  font-size: .75rem;
}

.atlas-controls-panel {
  padding: 26px;
  background:
    repeating-linear-gradient(0deg, rgba(90,63,33,.035) 0 1px, transparent 1px 29px),
    #f6efdf;
}

.atlas-filter-form {
  display: grid;
  gap: 14px;
}

.atlas-filter-form label {
  display: grid;
  gap: 5px;
}

.atlas-filter-form label span {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;

}

.atlas-filter-form select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0px;
  background: rgba(255,255,255,.6);
}

.atlas-selection-summary {
  display: grid;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 4px double rgba(104, 73, 35, .2);
}

.atlas-selection-summary strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 1;
}

.atlas-selection-summary small {
  margin-top: 5px;
  color: var(--gold);
  font-weight: 700;
}

.atlas-era-key {
  display: grid;
  grid-template-columns: auto minmax(90px, 190px) auto;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: .75rem;
}

.atlas-era-key i {
  height: 2px;
  background: linear-gradient(90deg, #a97d3c, #552f8e);
}

.timeline-chamber {
  margin: 36px 0;
}

.zone-timeline {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(91, 64, 33, 0.2);
  border-radius: 0px;
  background:
    linear-gradient(90deg, transparent 0 19.9%, rgba(84,60,34,.08) 20% 20.2%, transparent 20.3% 39.9%, rgba(84,60,34,.08) 40% 40.2%, transparent 40.3% 59.9%, rgba(84,60,34,.08) 60% 60.2%, transparent 60.3% 79.9%, rgba(84,60,34,.08) 80% 80.2%, transparent 80.3%),
    var(--paper);
}

.zone-timeline > header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.zone-timeline > header strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.zone-timeline > header span {
  color: var(--ink-soft);
  font-size: .75rem;
}

.timeline-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: min(28vw, 235px);
  color: var(--ink-faint);
  font-size: .62rem;
}

.timeline-axis span:last-child { text-align: right; }

.timeline-rows {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: min(28vw, 235px) 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.timeline-name {
  padding-right: 12px;
  font-size: .8rem;
  font-weight: 600;
}

.timeline-row > i {
  position: absolute;
  top: 8px;
  bottom: 8px;
  margin-left: min(28vw, 235px);
  min-width: 12px;
  border: 1px solid rgba(81, 48, 138, .35);
  border-radius: 0px;
  background: linear-gradient(90deg, #b68b4a, #54368b);
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.timeline-row > i b {
  position: absolute;
  left: 8px;
  top: 50%;
  overflow: hidden;
  max-width: calc(100% - 16px);
  transform: translateY(-50%);
  color: #fff;
  font-size: .6rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-row:hover > i,
.timeline-row.selected > i {
  outline: 3px solid rgba(183,139,70,.22);
  background: linear-gradient(90deg, #8e4a3e, #4e2680);
}

.civilization-essay {
  margin: 42px 0;
  padding: clamp(26px, 5vw, 62px);
  border: 1px solid rgba(90, 61, 31, 0.23);
  border-radius: 0px;
  background:
    linear-gradient(90deg, transparent 0 70px, rgba(151, 68, 55, .08) 70px 72px, transparent 72px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(76, 55, 32, .035) 31px 32px),
    #faf5e9;
  box-shadow: var(--shadow);
}

.civilization-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 4px double rgba(100, 69, 34, .22);
}

.civilization-heading h1 {
  margin-bottom: 5px;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
}

.civilization-dates {
  color: var(--gold);
  font-weight: 700;
}

.era-seal {
  display: grid;
  place-items: center;
  align-self: start;
  width: 100px;
  height: 100px;
  border: 4px double var(--gold);
  border-radius: 50%;
  color: var(--forest);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  text-align: center;
  transform: rotate(4deg);
}

.civilization-essay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(28px, 6vw, 70px);
  margin-top: 32px;
}

.civilization-prose h2 {
  margin-top: 30px;
}

.civilization-events {
  padding-left: 24px;
  border-left: 1px solid rgba(100,69,34,.2);
}

.civilization-events ol {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.civilization-events ol::before {
  content: "";
  position: absolute;
  left: 53px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(104,73,35,.28);
}

.civilization-events li {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 22px;
  padding: 0 0 22px;
}

.civilization-events li::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 7px;
  width: 10px;
  height: 10px;
  border: 2px solid #f8efd9;
  border-radius: 50%;
  background: var(--gold);
}

.civilization-events time {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  text-align: right;
}

.civilization-events span {
  font-size: .86rem;
}

.collapse-caution {
  margin-top: 30px;
  padding: 20px;
  border-left: 4px solid var(--red);
  background: rgba(159,75,69,.08);
}

.collapse-caution p {
  margin: 5px 0 0;
}

.linked-collection-strip {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 4px double rgba(100,69,34,.2);
}

.linked-object-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.linked-object-grid button {
  display: grid;
  gap: 5px;
  min-height: 130px;
  padding: 18px;
  border: 1px solid rgba(91,64,33,.19);
  border-radius: 0px;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  text-align: left;
}

.linked-object-grid button span,
.linked-object-grid button small {
  color: var(--gold);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;

}

.linked-object-grid button strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.civilization-further {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  margin-top: 35px;
  padding-top: 28px;
  border-top: 1px solid rgba(100,69,34,.18);
}

.live-collection-section {
  margin-top: 55px;
  padding-top: 38px;
  border-top: 4px double rgba(100,69,34,.2);
}

.source-pill {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 0px;
  color: var(--ink-soft);
  font-size: .68rem;
}

@media (max-width: 1180px) {
  .curated-gallery-grid,
  .artifact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-room-grid {
    grid-template-columns: 1fr 1fr;
  }

  .culture-room:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .culture-room-grid,
  .atlas-shell,
  .culture-detail,
  .civilization-essay-layout,
  .civilization-further {
    grid-template-columns: 1fr;
  }

  .culture-detail-media .culture-media,
  .culture-detail-media .culture-media img {
    min-height: 360px;
    max-height: 560px;
  }

  .culture-filter-panel {
    grid-template-columns: 1fr 1fr;
  }

  .culture-filter-panel label:first-child {
    grid-column: 1 / -1;
  }

  .civilization-events {
    padding-left: 0;
    border-left: 0;
  }

  .linked-object-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .culture-room-grid,
  .curated-gallery-grid,
  .artifact-grid,
  .method-triptych,
  .object-question-grid,
  .linked-object-grid,
  .culture-filter-panel {
    grid-template-columns: 1fr;
  }

  .culture-room:last-child,
  .culture-filter-panel label:first-child {
    grid-column: auto;
  }

  .culture-room {
    min-height: 315px;
  }

  .curated-art-card:nth-child(3n+2) {
    transform: none;
  }

  .culture-detail-copy,
  .civilization-essay {
    padding: 24px;
  }

  .timeline-row {
    grid-template-columns: 120px 1fr;
  }

  .timeline-name {
    font-size: .68rem;
  }

  .timeline-row > i {
    margin-left: 120px;
  }

  .timeline-axis {
    margin-left: 120px;
    font-size: .5rem;
  }

  .era-seal {
    width: 74px;
    height: 74px;
    font-size: .76rem;
  }

  .civilization-heading h1 {
    font-size: 2.6rem;
  }

  .zone-marker text {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Culture clarity pass: readable labels, compact globe, scrollable timelines
   and the World Literature room.
   -------------------------------------------------------------------------- */

.culture-hero > *,
.culture-room,
.culture-room h2,
.culture-room p,
.atlas-shell > *,
.timeline-chamber,
.zone-timeline,
.civilization-essay,
.literature-browser-shell > *,
.literature-detail,
.literature-index-item {
  min-width: 0;
}

.culture-room h2,
.atlas-panel-title h2,
.timeline-title-panel h2,
.zone-timeline strong,
.literature-detail h1,
.literature-index-item strong {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.culture-room-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.culture-room {
  min-height: 360px;
}

.culture-room:last-child {
  grid-column: auto;
}


.atlas-shell.clean-atlas-shell {
  grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr);
  align-items: stretch;
  gap: 24px;
}

.atlas-panel-title {
  position: relative;
  z-index: 4;
  margin-bottom: 16px;
}

.atlas-panel-title h2 {
  margin: 3px 0 0;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.05;
}

.antique-globe-panel {
  overflow: visible;
  padding: 26px;
  background: var(--cream);
  border: 1px solid var(--line);
}

.antique-globe-panel .atlas-panel-title .eyebrow {
  color: var(--gold-deep, #8a6729);
}
.antique-globe-panel .atlas-panel-title h2 {
  color: var(--ink);
}


.zone-marker:hover circle,
.zone-marker.selected circle {
  fill: #4b1680;
  stroke-width: 1.2;
}


.continent-button-row,
.zone-button-grid {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.continent-button-row {
  justify-content: center;
}

.continent-button-row button,
.zone-button-grid button,
.timeline-era-buttons button {
  border: 1px solid var(--line);
  border-radius: 0px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: .73rem;
  font-weight: 400;
  line-height: 1.2;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.continent-button-row button {
  padding: 8px 12px;
}

.continent-button-row button:hover,
.continent-button-row button.selected,
.zone-button-grid button:hover,
.zone-button-grid button.selected {
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
  transform: translateY(-1px);
}


.globe-note {
  position: relative;
  z-index: 4;
  margin-top: 13px;
  color: rgba(255,255,255,.72);
}

.atlas-controls-panel {
  display: flex;
  flex-direction: column;
}

.atlas-filter-form .button-row {
  margin-top: 2px;
}

.timeline-chamber {
  margin: 42px 0;
}

.timeline-title-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(91,64,33,.2);
  border-radius: 0px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(244,235,216,.92));
  box-shadow: var(--shadow-small);
}

.timeline-title-panel h2 {
  margin: 3px 0 5px;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.timeline-title-panel p:last-child {
  margin: 0;
  color: var(--ink-soft);
}

.timeline-era-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 520px;
}

.timeline-era-buttons button {
  padding: 8px 11px;
  border-color: var(--line);
  background: rgba(255,255,255,.65);
  color: var(--ink-soft);
}

.timeline-era-buttons button:hover,
.timeline-era-buttons button.selected {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.zone-timeline {
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}

.zone-timeline > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(91,64,33,.16);
  background: rgba(244,235,216,.78);
}

.zone-timeline > header > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.zone-timeline > header strong {
  font-size: 1.35rem;
}

.zone-timeline > header small {
  color: var(--ink-faint);
  font-size: .7rem;
  white-space: nowrap;
}

.timeline-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: auto;
  scrollbar-color: #9a7441 rgba(91,64,33,.09);
}

.timeline-scroll::-webkit-scrollbar {
  height: 12px;
}

.timeline-scroll::-webkit-scrollbar-track {
  background: rgba(91,64,33,.08);
}

.timeline-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 0px;
  background: #9a7441;
  background-clip: padding-box;
}

.timeline-canvas {
  --name-column: 220px;
  --track-width: 920px;
  width: calc(var(--name-column) + var(--track-width));
  min-width: calc(var(--name-column) + var(--track-width));
  padding: 10px 18px 18px 0;
  background:
    linear-gradient(90deg,
      transparent 0 calc(var(--name-column) + 16.64%),
      rgba(84,60,34,.075) calc(var(--name-column) + 16.64%) calc(var(--name-column) + 16.8%),
      transparent calc(var(--name-column) + 16.8%) calc(var(--name-column) + 33.2%),
      rgba(84,60,34,.075) calc(var(--name-column) + 33.2%) calc(var(--name-column) + 33.36%),
      transparent calc(var(--name-column) + 33.36%));
}

.timeline-axis-row,
.timeline-row {
  display: grid;
  grid-template-columns: var(--name-column) var(--track-width);
}

.timeline-axis-row {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 36px;
  background: var(--paper);
}

.timeline-axis-spacer {
  position: sticky;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  padding: 0 16px 0 20px;
  border-right: 1px solid rgba(91,64,33,.16);
  background: var(--paper);
  color: var(--ink-faint);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;

}

.timeline-axis-track,
.timeline-track {
  position: relative;
  min-width: 0;
}

.timeline-axis-track {
  border-bottom: 1px solid rgba(91,64,33,.16);
}

.timeline-axis-track span {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  color: var(--ink-faint);
  font-size: .62rem;
  white-space: nowrap;
}

.timeline-axis-track span:first-child {
  transform: none;
}

.timeline-axis-track span:last-child {
  transform: translateX(-100%);
}

.timeline-rows {
  gap: 0;
  margin: 0;
}

.timeline-row {
  position: relative;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(91,64,33,.09);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-name {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 9px 16px 9px 20px;
  border-right: 1px solid rgba(91,64,33,.16);
  background: var(--paper);
  line-height: 1.15;
}

.timeline-name strong {
  font-size: .82rem;
}

.timeline-name small {
  color: var(--ink-faint);
  font-size: .63rem;
}

.timeline-track {
  align-self: stretch;
  background:
    repeating-linear-gradient(90deg, transparent 0 153px, rgba(84,60,34,.065) 153px 154px);
}

.timeline-row > .timeline-track > i {
  position: absolute;
  top: 13px;
  height: 30px;
  min-width: 20px;
  margin: 0;
  border: 1px solid rgba(81, 48, 138,.35);
  border-radius: 0px;
  background: linear-gradient(90deg, #b68b4a, #54368b);
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.timeline-row > .timeline-track > i b {
  position: absolute;
  left: 8px;
  top: 50%;
  max-width: calc(100% - 16px);
  overflow: hidden;
  transform: translateY(-50%);
  color: white;
  font-size: .61rem;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-row:hover .timeline-name,
.timeline-row.selected .timeline-name {
  background: #eee3ca;
}

.timeline-row:hover > .timeline-track > i,
.timeline-row.selected > .timeline-track > i {
  outline: 3px solid rgba(183,139,70,.22);
  background: linear-gradient(90deg, #8e4a3e, #4e2680);
}

/* World Literature */


.literature-browser-shell {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.8fr);
  align-items: start;
  gap: 22px;
  margin-bottom: 48px;
}

.literature-index,
.literature-detail {
  border: 1px solid rgba(91,64,33,.2);
  border-radius: 0px;
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.literature-index {
  position: sticky;
  top: 88px;
  overflow: hidden;
}

.literature-index > header {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background: #eee3ca;
}

.literature-index > header h2 {
  margin: 3px 0 2px;
  font-size: 1.65rem;
}

.literature-index > header small {
  color: var(--ink-faint);
}

.literature-index-scroll {
  max-height: min(68vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.literature-index-item {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 15px 18px;
  border: 0;
  border-bottom: 1px solid rgba(91,64,33,.1);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.literature-index-item:hover,
.literature-index-item.selected {
  background: rgba(183,139,70,.15);
  box-shadow: inset 4px 0 var(--gold);
}

.literature-index-item time,
.literature-index-item small {
  color: var(--ink-faint);
  font-size: .66rem;
  font-weight: 700;
}

.literature-index-item strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  line-height: 1.12;
}

.literature-index-item span {
  color: var(--ink-soft);
  font-size: .78rem;
}

.literature-detail {
  padding: clamp(24px, 4vw, 48px);
}

.literature-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 23px;
  border-bottom: 4px double rgba(91,64,33,.22);
}

.literature-detail-heading h1 {
  margin: 5px 0 7px;
  font-size: clamp(2.3rem, 5vw, 4.5rem);
  line-height: .98;
}

.literature-byline {
  margin: 0;
  color: var(--gold);
  font-weight: 700;
}

.literature-form-seal {
  flex: 0 0 auto;
  max-width: 120px;
  padding: 12px 14px;
  border: 3px double var(--gold);
  border-radius: 50%;
  color: var(--forest);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: .8rem;
  text-align: center;
  transform: rotate(3deg);
}

.literature-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr);
  gap: clamp(28px, 5vw, 60px);
  margin-top: 30px;
}

.literature-prose section + section {
  margin-top: 30px;
}

.literature-prose h2 {
  margin-bottom: 8px;
}

.literature-question {
  padding: 22px;
  border-left: 4px solid var(--gold);
  background: rgba(183,139,70,.1);
}

.literature-question blockquote {
  margin: 7px 0 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.3;
}

.literature-side-notes {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.theme-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.theme-chip-row span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255,255,255,.56);
  color: var(--ink-soft);
  font-size: .7rem;
}

.button.full {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.literature-sources {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 4px double rgba(91,64,33,.2);
}

.literature-method {
  margin-top: 48px;
}

@media (max-width: 1220px) {
  .culture-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-room:last-child {
    grid-column: auto;
  }

  .literature-filter-panel {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .literature-filter-panel label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 940px) {
  .atlas-shell.clean-atlas-shell,
  .literature-browser-shell,
  .literature-detail-grid {
    grid-template-columns: 1fr;
  }

  .literature-index {
    position: static;
  }

  .literature-index-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 42vw);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .literature-index-item {
    border-right: 1px solid rgba(91,64,33,.1);
    border-bottom: 0;
  }

  .literature-side-notes {
    padding: 22px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .timeline-title-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .timeline-era-buttons {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 700px) {
  .culture-room-grid,
  .literature-filter-panel {
    grid-template-columns: 1fr;
  }

  .literature-filter-panel label:first-child {
    grid-column: auto;
  }

  .culture-room {
    min-height: 300px;
  }

  .zone-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-title-panel {
    padding: 19px;
  }

  .zone-timeline > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .zone-timeline > header small {
    white-space: normal;
  }

  .timeline-canvas {
    --name-column: 154px;
    --track-width: 780px;
  }

  .timeline-name {
    padding-left: 13px;
  }

  .timeline-axis-spacer {
    padding-left: 13px;
  }

  .literature-summary-strip,
  .literature-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .literature-summary-strip p {
    text-align: left;
  }

  .literature-index-scroll {
    grid-auto-columns: minmax(220px, 82vw);
  }

  .literature-form-seal {
    max-width: none;
    border-radius: 0px;
    transform: none;
  }
}

@media (max-width: 430px) {
  .zone-button-grid {
    grid-template-columns: 1fr;
  }

  .continent-button-row {
    justify-content: flex-start;
  }

  .timeline-canvas {
    --name-column: 132px;
    --track-width: 720px;
  }

  .timeline-name strong {
    font-size: .72rem;
  }

  .timeline-name small {
    font-size: .57rem;
  }
}

/* ========================================================================== 
   Cultural clarity and philosophy expansion — final contrast/layout overrides
   ========================================================================== */

/* Header: reserve real space for brand, player and navigation. */
.topbar {
  grid-template-columns: auto minmax(150px, 0.8fr) auto;
  gap: 16px;
}

.desktop-nav {
  min-width: 0;
  flex-wrap: nowrap;
}

.desktop-nav > button {
  padding-inline: 10px;
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .topbar {
    gap: 9px;
    padding-inline: 22px;
  }

  .desktop-nav > button {
    padding-inline: 8px;
    font-size: 0.81rem;
  }
}

@media (max-width: 900px) {
  .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mobile-nav button {
    min-width: 0;
    padding-inline: 2px;
    font-size: 0.62rem;
  }
}

/* Photographed cultural-room heroes read light-on-dark, like every other
   hero in the app, now that each carries a real image behind a dark
   scrim — not the dark-ink-on-parchment treatment this block used to
   force. culture-hero's own type colours are set with !important further
   down (see "Refined public-domain visual atmosphere"), so it's excluded
   here to avoid two rules fighting over the same property. */
.gallery-hero,
.museum-hero,
.atlas-hero,
.literature-hero {
  color: #f7f1e5;
}

.gallery-hero h1,
.museum-hero h1,
.atlas-hero h1,
.literature-hero h1 {
  color: #f7f1e5;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.gallery-hero .eyebrow,
.museum-hero .eyebrow,
.atlas-hero .eyebrow,
.literature-hero .eyebrow {
  color: var(--gold-light);
}

.gallery-hero p,
.gallery-hero .lede,
.museum-hero p,
.museum-hero .lede,
.atlas-hero p,
.atlas-hero .lede,
.literature-hero p,
.literature-hero .lede {
  color: rgba(247, 241, 229, 0.82);
}

.gallery-hero .back-link,
.museum-hero .back-link,
.atlas-hero .back-link,
.literature-hero .back-link,
.literature-hero .text-link {
  color: var(--gold-light);
}

/* A persistent, highly legible connection between all five rooms. */


.culture-subnav-links button:hover,
.culture-subnav-links button.active {
  border-color: #d7b879;
  color: #3f2b63;
  background: #f1dfb9;
  box-shadow: inset 0 0 0 1px rgba(70, 45, 19, 0.12);
}

.culture-subnav-links button:hover small,
.culture-subnav-links button.active small {
  color: #6b5735;
}

/* Room cards: no absolute button or opaque pseudo-element can obscure text. */
.culture-room-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.culture-room {
  z-index: 0;
  display: flex;
  grid-column: span 2;
  min-height: 380px;
  flex-direction: column;
  padding: 32px;
  color: #3f2e5b;
  isolation: isolate;
}

.culture-room:nth-last-child(-n + 2) {
  grid-column: span 3;
  min-height: 330px;
}

.culture-room::before {
  z-index: -1;
  background: transparent;
}

.culture-room > * {
  position: relative;
  z-index: 2;
}

.culture-room .eyebrow {
  color: #684d28;
  opacity: 1;
}

.culture-room h2 {
  max-width: 14ch;
  color: inherit;
  font-size: clamp(2rem, 3.3vw, 3.15rem);
}

.culture-room p:not(.eyebrow) {
  color: #4e3f4e;
  line-height: 1.62;
}

.culture-room .button {
  position: static;
  align-self: flex-start;
  margin-top: auto;
}


.literature-room .eyebrow,
.literature-room .room-symbol {
  color: #6e2790;
}

.literature-room p:not(.eyebrow) {
  color: #51414d;
}


.atlas-room .eyebrow,
.music-room .eyebrow {
  color: #f1d89f;
}

.atlas-room p:not(.eyebrow),
.music-room p:not(.eyebrow) {
  color: rgba(255, 248, 233, 0.77);
}

/* .culture-room forces every room card onto the same light cream background
   (see the !important block further down), so these two icon circles need
   the same solid light-on-dark-ink treatment every other room uses — the
   faint white-on-dark values below were left over from when these two cards
   still had their own dark backdrop, and read as almost invisible now. */


.atlas-room .button.primary,
.music-room .button.primary {
  color: #471f70;
  background: #f2dfb9;
}

/* Literature category control and high-contrast preview/detail. */


.literature-mode-tabs button:hover,
.literature-mode-tabs button.active {
  border-color: #7b399e;
  color: #fff;
  background: #7b399e;
}


.index-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.index-meta em {
  padding: 3px 6px;
  border-radius: 0px;
  color: #6b3782;
  background: #b270cc;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;

}

.philosophy-detail .literature-form-seal {
  border-color: #83439f;
  color: #7b399e;
}

/* Structured editorial detail for every cultural room. */
.culture-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 22px 0 30px;
}

.culture-fact-grid > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.55);
}

.culture-fact-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;

}

.culture-fact-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.2;
}

.culture-reading-section + .culture-reading-section {
  margin-top: 28px;
}

.culture-reading-section h2 {
  margin-bottom: 14px;
  color: var(--culture-green-deep);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Sections that flag disputes, cautions or contested readings get a warm
   accent instead of the reading-room green, echoing the caution colour
   used elsewhere in the app (--red). */
.culture-reading-section.civilization-disputes h2,
.culture-reading-section.culture-caution-section h2 {
  color: var(--red);
}

.editorial-bullets,
.numbered-editorial-bullets {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial-bullets li,
.numbered-editorial-bullets li {
  position: relative;
  padding: 12px 14px 12px 38px;
  border: 1px solid rgba(79, 56, 118, 0.13);
  border-radius: 0px;
  color: #4a334c;
  background: rgba(255, 255, 255, 0.48);
  line-height: 1.58;
}

.editorial-bullets li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(183, 139, 70, 0.13);
}

.numbered-editorial-bullets {
  counter-reset: editorial-step;
}

.numbered-editorial-bullets li {
  counter-increment: editorial-step;
}

.numbered-editorial-bullets li::before {
  content: counter(editorial-step);
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--forest-2);
  font-size: 0.62rem;
  font-weight: 700;
}

.reading-checklist {
  padding: 15px;
  border: 1px solid rgba(123, 57, 158, 0.18);
  border-radius: 0px;
  background: rgba(178, 112, 204, 0.38);
}

.reading-checklist .editorial-bullets li {
  padding: 0 0 0 20px;
  border: 0;
  background: transparent;
  font-size: 0.76rem;
}

.reading-checklist .editorial-bullets li::before {
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.civilization-facts {
  margin-inline: clamp(22px, 4vw, 48px);
}

.culture-trail {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2fr);
  align-items: center;
  gap: 20px;
  margin: 36px 0 0;
  padding: 22px;
  border: 1px solid rgba(82, 47, 132, 0.2);
  border-radius: 0px;
  background: linear-gradient(135deg, rgba(231, 212, 173, 0.43), rgba(255, 255, 255, 0.72));
}

.culture-trail h2 {
  margin: 0;
  font-size: 1.5rem;
}

.culture-trail-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.culture-trail-links button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 0px;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font-weight: 700;
  text-align: left;
}

.culture-trail-links button:hover {
  border-color: var(--forest-2);
  background: #fff;
}

.culture-trail-links span {
  color: var(--gold);
  font-size: 1.1rem;
}

@media (max-width: 1220px) {
  .culture-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-room,
  .culture-room:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .culture-room:last-child {
    grid-column: 1 / -1;
  }

  .literature-filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .literature-filter-panel label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 940px) {
  .culture-subnav {
    position: static;
    grid-template-columns: 1fr;
  }

  .culture-subnav-title {
    padding: 2px 4px 5px;
  }

  .culture-subnav-links {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    padding-bottom: 3px;
  }

  .culture-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .culture-trail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .culture-room-grid,
  .literature-mode-tabs,
  .literature-filter-panel,
  .culture-fact-grid,
  .culture-trail-links {
    grid-template-columns: 1fr;
  }

  .culture-room,
  .culture-room:last-child {
    grid-column: auto;
    min-height: 330px;
  }

  .culture-room h2 {
    max-width: none;
  }

  .culture-subnav-links {
    grid-template-columns: repeat(5, minmax(135px, 1fr));
  }

  .literature-summary-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .civilization-facts {
    margin-inline: 18px;
  }
}

/* ========================================================================== 
   Knowledge Atlas, History of Science and final clarity pass
   ========================================================================== */

:root {
  --motto-ink: #5b3078;
  --motto-gold: #c9a227;
  --heat-0: #ebe7dd;
  --heat-1: #dce3d0;
  --heat-2: #b9cba0;
  --heat-3: #8aad6e;
  --heat-4: #5b7a4f;
  --heat-5: #3a5233;
}


.topbar {
  grid-template-columns: minmax(250px, auto) minmax(170px, 1fr) auto;
  gap: clamp(.65rem, 1.4vw, 1.25rem);
  min-height: 78px;
}


.motto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .7rem;
  margin: 0 0 .8rem;
  color: var(--motto-ink);
}

.motto::before {
  content: "";
  width: 13px;
  height: 13px;
  align-self: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4C10 4 4 10 4 20c10 0 16-6 16-16z' fill='%235b7a4f'/%3E%3Cpath d='M7 17C11 13 15 9 19 5' stroke='%23f6f3ec' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.motto span {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
}

.motto em {
  color: var(--ink-soft);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: .9rem;
}

.motto-compact {
  margin-bottom: .45rem;
}

.motto-compact span {
  font-size: 1rem;
}

.app-footer > div:first-child {
  display: grid;
  gap: .18rem;
}

.app-footer em {
  color: var(--forest);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
}

.app-footer small {
  color: var(--ink-muted);
}

.app-footer-copyright {
  display: block;
  margin-top: 0.35rem;
}

/* Six connected cultural rooms */
.culture-room-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.culture-room,
.culture-room:nth-last-child(-n + 2),
.culture-room:last-child {
  grid-column: auto;
  min-height: 320px;
}


.science-history-room .room-symbol,
.science-history-room .eyebrow {
  color: #6534a4;
}


/* Real world map navigator */
.world-map-navigator {
  display: grid;
  gap: 1rem;
}

.world-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 1039;
  overflow: hidden;
  border: 1px solid rgba(79, 57, 32, .28);
  border-radius: 0px;
  background: #a184b8;
  box-shadow: inset 0 0 0 7px rgba(255, 252, 239, .55), 0 18px 38px rgba(43, 39, 27, .12);
}

.world-map-frame::before,
.world-map-frame::after {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  content: "";
  inset: 0;
  border-radius: inherit;
}

.world-map-frame::before {
  border: 10px double rgba(104, 75, 36, .24);
}

.world-map-frame::after {
  background: linear-gradient(115deg, rgba(255,255,255,.28), transparent 27%, transparent 73%, rgba(63,43,22,.08));
}

.world-map-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: sepia(.22) saturate(.72) contrast(.93);
  opacity: .94;
}


.map-zone-pin:hover i,
.map-zone-pin:focus-visible i,
.map-zone-pin.selected i {
  background: #6a0fb1;
  transform: scale(1.35);
}


.map-zone-pin:hover span,
.map-zone-pin:focus-visible span,
.map-zone-pin.selected span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.map-attribution {
  margin: 0;
  color: var(--ink-muted);
  font-size: .72rem;
  line-height: 1.45;
}

/* Timeline: guaranteed horizontal interaction */
.timeline-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  -webkit-overflow-scrolling: touch;
}

.timeline-scroll::-webkit-scrollbar {
  height: 13px;
}

.timeline-scroll::-webkit-scrollbar-track {
  background: #e9e1ce;
  border-radius: 0px;
}

.timeline-scroll::-webkit-scrollbar-thumb {
  border: 3px solid #e9e1ce;
  border-radius: 0px;
  background: #6a5f93;
}

.timeline-canvas {
  min-width: 1180px !important;
  width: 1180px;
}

.timeline-chamber,
.zone-timeline,
.timeline-title-panel {
  min-width: 0;
  max-width: 100%;
}

/* History of science */
.science-history-hero {
  background:
    linear-gradient(118deg, rgba(249, 244, 222, .97), rgba(141, 118, 198, .96)),
    radial-gradient(circle at 82% 18%, rgba(177, 137, 58, .25), transparent 32%);
}


.science-history-browser {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin: 1.3rem 0 2rem;
}

.science-history-index,
.science-history-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(255, 253, 246, .92);
  box-shadow: var(--shadow-soft);
}

.science-history-index {
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.science-history-index > header {
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: #f0ead8;
}

.science-history-index h2 {
  margin: .15rem 0;
}

.science-history-index-scroll {
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.science-history-index-item {
  display: grid;
  width: 100%;
  gap: .25rem;
  padding: .9rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(87, 72, 50, .12);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.science-history-index-item:hover,
.science-history-index-item.selected {
  background: #8778c4;
}

.science-history-index-item time,
.science-history-index-item small {
  color: var(--ink-muted);
  font-size: .72rem;
}

.science-history-index-item span {
  color: #543182;
  font-size: .76rem;
  font-weight: 700;
}

.science-history-detail {
  padding: clamp(1.1rem, 2.4vw, 2rem);
}

.science-history-detail > header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.science-history-detail h1 {
  max-width: 22ch;
  margin: .25rem 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.science-era-seal {
  align-self: flex-start;
  padding: .5rem .7rem;
  border: 1px solid rgba(93, 53, 153, .25);
  border-radius: 0px;
  background: #8575c7;
  color: #6534a4;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.science-history-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.significance-section {
  background: #f7f1dc;
}

.science-revision-links,
.science-history-sources,
.key-figures-section,
.deep-culture-notes {
  margin-top: 1.25rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(250, 248, 240, .72);
}

.science-revision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.science-revision-grid button {
  display: grid;
  gap: .2rem;
  padding: .85rem;
  border: 1px solid rgba(101, 52, 164, .2);
  border-radius: 0px;
  background: #7d78c4;
  color: var(--ink);
  text-align: left;
}

.science-revision-grid button:hover {
  border-color: #582893;
  transform: translateY(-1px);
}

.science-revision-grid span,
.science-revision-grid small {
  color: #624a8d;
  font-size: .72rem;
}


/* Study-to-history bridge */
.question-context-bridge {
  margin: 1.15rem 0;
  padding: 1.1rem;
  border: 1px solid rgba(82, 43, 140, .22);
  border-radius: 0px;
  background: linear-gradient(135deg, #7b70cc, #f7f0dc);
}

.context-bridge-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: .8rem;
}

.context-bridge-heading h2 {
  margin: .15rem 0 0;
}

.context-bridge-heading > span {
  color: var(--ink-muted);
  font-size: .76rem;
}

.context-bridge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.context-bridge-grid button {
  display: grid;
  min-width: 0;
  gap: .25rem;
  padding: .85rem;
  border: 1px solid rgba(82, 43, 140, .18);
  border-radius: 0px;
  background: rgba(255,255,255,.75);
  color: var(--ink);
  text-align: left;
}

.context-bridge-grid button:hover {
  border-color: #5c2b9b;
  box-shadow: 0 8px 18px rgba(81, 56, 131, .1);
}

.context-bridge-grid time,
.context-bridge-grid small,
.context-bridge-grid span {
  color: var(--ink-muted);
  font-size: .72rem;
}

.context-bridge-grid span {
  margin-top: .3rem;
  color: #4f248e;
  font-weight: 700;
}

/* Knowledge Atlas */


.knowledge-atlas-heading p:not(.eyebrow) {
  max-width: 72ch;
  color: var(--ink-soft);
  line-height: 1.6;
}


.constellation-line.active {
  stroke: rgba(92, 41, 183, .52);
  stroke-width: .9;
}


.heat-level-0,
.constellation-node.heat-level-0 circle { background: var(--heat-0); fill: var(--heat-0); }
.heat-level-1,
.constellation-node.heat-level-1 circle { background: var(--heat-1); fill: var(--heat-1); }
.heat-level-2,
.constellation-node.heat-level-2 circle { background: var(--heat-2); fill: var(--heat-2); }
.heat-level-3,
.constellation-node.heat-level-3 circle { background: var(--heat-3); fill: var(--heat-3); }
.heat-level-4,
.constellation-node.heat-level-4 circle { background: var(--heat-4); fill: var(--heat-4); }
.heat-level-5,
.constellation-node.heat-level-5 circle { background: var(--heat-5); fill: var(--heat-5); }


.knowledge-cell.heat-level-4,
.knowledge-cell.heat-level-5 {
  color: white;
}


.heat-legend {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: .28rem;
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: .66rem;
}

.heat-legend i {
  width: 20px;
  height: 10px;
  border: 1px solid rgba(71, 61, 106, .1);
  border-radius: 0px;
}

/* Expanded cultural reading */
.deep-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.deep-note-grid article {
  min-width: 0;
  padding: .9rem;
  border: 1px solid rgba(87, 70, 42, .12);
  border-radius: 0px;
  background: rgba(255,255,255,.64);
}

.deep-note-grid article > strong {
  display: block;
  margin-bottom: .55rem;
  color: #4d3d2a;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.deep-note-grid .editorial-bullets {
  margin: 0;
}

.deep-note-grid .editorial-bullets li {
  font-size: .83rem;
  line-height: 1.5;
}

/* Responsive safety */
@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(235px, auto) 1fr auto;
  }

  .culture-subnav-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .culture-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: minmax(215px, auto) auto;
  }

  .science-history-browser,
  .knowledge-atlas-layout {
    grid-template-columns: 1fr;
  }

  .science-history-index {
    position: static;
  }

  .science-history-index-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 68vw);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .history-science-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deep-note-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .brand-copy small,
  .brand-copy em {
    white-space: normal;
  }

  .brand-copy em {
    display: none;
  }

  .culture-room-grid,
  .culture-subnav-links,
  .science-history-columns,
  .science-revision-grid,
  .context-bridge-grid {
    grid-template-columns: 1fr;
  }

  .culture-room,
  .culture-room:nth-last-child(-n + 2),
  .culture-room:last-child {
    min-height: 260px;
  }

  .world-map-frame {
    border-radius: 0px;
  }

  .map-zone-pin span {
    display: none;
  }

  .timeline-canvas {
    min-width: 920px !important;
    width: 920px;
  }

  .knowledge-atlas-heading,
  .science-history-detail > header,
  .context-bridge-heading {
    display: grid;
  }

  .discourse-score {
    width: 100%;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    text-align: left;
  }

  .discourse-score strong {
    font-size: 2.5rem;
  }

  .knowledge-heat-row {
    grid-template-columns: 1fr;
  }

  .knowledge-cell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-science-filter {
    grid-template-columns: 1fr;
  }

  .key-figure-timeline li {
    grid-template-columns: 1fr;
    gap: .3rem;
  }
}

@media (max-width: 470px) {
  .knowledge-cell-grid {
    grid-template-columns: 1fr;
  }

  .continent-button-row,
  .zone-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Demosthenes clarity pass — streamlined Study, separate Knowledge Map,
   biographical identity, figure portraits and a more precise world atlas.
   ========================================================================== */

/* Header: reserve space rather than allowing the music control to collide. */
.topbar {
  display: grid !important;
  grid-template-columns: minmax(290px, 1fr) minmax(150px, 260px) auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
  min-height: 84px;
  padding-block: .65rem !important;
}

.brand {
  min-width: 0;
  max-width: 470px;
  text-align: left;
}


.desktop-nav { min-width: 0; justify-content: flex-end; }
.desktop-nav button { white-space: nowrap; }

/* Home: one obvious study action and a reversible subject roster. */


.home-subject-toggle.selected {
  border-color: rgba(90, 29, 162, .72);
  background: #888bb4;
  box-shadow: inset 0 0 0 1px rgba(90, 29, 162,.12);
}

.home-subject-toggle.selected .subject-toggle-mark { background: var(--forest); color: white; }


.home-subject-toggle.selected i { color: var(--forest); }

/* Keep revision analysis and the knowledge map conceptually separate. */
.progress-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  /* Fixed 40px side margins (matching the hero sections' own 40px side
     padding above) rather than a max-width + auto-margin, so this switch
     lines up with the hero content on both pages that render it bare,
     directly in the page flow — Progress and Knowledge Map. */
  margin: 1rem 40px 1.6rem;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(235, 228, 211, .7);
}
.progress-mode-switch button {
  display: grid;
  gap: .18rem;
  padding: .85rem 1rem;
  border: 0;
  border-radius: 0px;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}
.progress-mode-switch button span {
  font: 400 .78rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;

}
.progress-mode-switch button small { font-size: .72rem; font-style: italic; }
.progress-mode-switch button.active {
  color: var(--forest);
  background: var(--paper);
  box-shadow: 0 5px 18px rgba(76, 57, 104, .09);
}
.progress-mode-switch button.active span { color: var(--forest); }


/* Cultural room navigation: the roman numerals and room names cannot wash out. */
.culture-room .eyebrow,
.page-hero[class*="culture"] .eyebrow {
  color: #4f3275 !important;
  opacity: 1 !important;
}

/* .culture-subnav itself is a dark purple bar (see rgba(68, 35, 110, .97)
   above), so its title needs light text — the dark rule above was written
   for a pale background and made this heading nearly invisible against
   its own dark bar. */


/* These four hero eyebrows sit on a dark photograph now, not the pale
   parchment the rule above was written for — they need the same light
   gold every other photographed hero uses, not dark forest text. */
.gallery-hero .eyebrow,
.museum-hero .eyebrow,
.literature-hero .eyebrow,
.atlas-hero .eyebrow {
  color: var(--gold-light) !important;
  opacity: 1 !important;
}


.culture-subnav-links button.active {
  background: var(--forest) !important;
  color: white !important;
}
.culture-subnav-links button.active span,
.culture-subnav-links button.active small { color: white !important; }
.culture-subnav-links button.active b { color: #f0cd87; }

.culture-room {
  background: linear-gradient(145deg, #fffdf7, #eee4cf) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(84, 63, 119,.22) !important;
}
.culture-room h2 { color: #411d69 !important; text-shadow: none !important; }
.culture-room p:not(.eyebrow) { color: #4f4062 !important; opacity: 1 !important; }
.culture-room .room-roman {
  color: #76581f !important;
  background: #f4dfac;
  border: 1px solid rgba(118,88,31,.25);
}

/* Geographic atlas: precise projection, restrained labels, responsive map. */
.world-map-frame {
  position: relative;
  aspect-ratio: 2048 / 1039;
  overflow: hidden;
  background: #d4d4e4;
}
.world-map-frame > img { display: block; width: 100%; height: 100%; object-fit: fill; }


.map-zone-pin:hover span,
.map-zone-pin:focus-visible span,
.map-zone-pin.selected span { opacity: 1; transform: translateX(-50%) translateY(0); }
.map-zone-pin.selected { z-index: 5; }
.map-zone-pin.selected i { background: #f0bd55; border-color: #481a7a; transform: scale(1.18); }

.civilization-connections { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.civilization-connection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.civilization-connection-grid article { display: grid; align-content: start; gap: .45rem; padding: .9rem; border-radius: 0px; background: #f3eddf; }
.civilization-connection-grid article > strong { color: var(--forest); margin-bottom: .2rem; }
.civilization-connection-grid button { display: grid; gap: .12rem; padding: .6rem; border: 1px solid rgba(80, 47, 119,.14); border-radius: 0px; background: rgba(255,255,255,.7); text-align: left; }
.civilization-connection-grid button span { color: #7d6534; font-size: .62rem; letter-spacing: .05em; }
.civilization-connection-grid button b { color: var(--ink); font-size: .79rem; }
.civilization-connection-grid button small { color: var(--ink-soft); }

/* Key figures: visual, chronological and honest about missing portraits. */
.key-figure-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.key-figure-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: .9rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: linear-gradient(145deg, #fffdf8, #eee6d6);
}
.figure-portrait {
  position: relative;
  width: 118px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0px;
  background: radial-gradient(circle at 50% 34%, #d7c49a, #7e6a4d);
  color: #fff8e8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.figure-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.figure-portrait span { font: 400 2rem/1 Georgia, "Times New Roman", serif; }
.figure-card-copy { min-width: 0; }
.figure-card-copy h3 { margin: .35rem 0 .35rem; color: var(--ink); font-size: 1.16rem; }
.figure-card-copy > p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.figure-card-meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.figure-card-meta time,
.figure-card-meta span { padding: .22rem .4rem; border-radius: 0px; background: #dfdfea; color: #55487f; font: 600 .62rem/1.2 "Times New Roman", serif; }
.figure-significance-points { margin: .7rem 0 0; padding-left: 1.05rem; color: #5a465b; font-size: .74rem; line-height: 1.48; }
.figure-significance-points li + li { margin-top: .28rem; }
.figure-image-note { color: #66716a; font-size: .7rem; }

/* Library: make the primary external article impossible to miss. */
.article-primary-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .65rem; }
.primary-reading-link { display: grid !important; justify-items: start; gap: .05rem; text-decoration: none; }
.primary-reading-link small { opacity: .72; font-weight: 500; }
.library-card p { line-height: 1.58; }
.library-article .article-body > p { line-height: 1.75; }

/* Historical biography page. */
.demosthenes-biography-hero {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.35fr);
  gap: clamp(1.3rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.2rem, 4vw, 3rem);
  border-radius: 0px;
  background: linear-gradient(135deg, #4d207a, #44394e 58%, #a78244);
  color: white;
  overflow: hidden;
}
.demosthenes-bust-frame { max-width: 430px; margin-inline: auto; }
.demosthenes-bust-frame img { display: block; width: 100%; max-height: 550px; object-fit: cover; object-position: center 18%; border: 9px solid rgba(255,255,255,.18); border-radius: 0px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.demosthenes-bust-frame p { margin: .55rem 0 0; color: rgba(255,255,255,.72); font-size: .68rem; line-height: 1.4; }
.demosthenes-biography-intro h1 { margin: .2rem 0 .5rem; color: white; font-size: clamp(3rem, 8vw, 6.8rem); }
.demosthenes-biography-intro .lede { color: rgba(255,255,255,.87); }
.dictionary-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .7rem;
  width: fit-content;
  padding: .65rem .8rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0px;
  background: rgba(0,0,0,.14);
}
.dictionary-entry strong { font: 400 1.05rem/1 Georgia, "Times New Roman", serif; }
.dictionary-entry span { color: #e5d29d; font-size: .68rem; font-style: italic; }
.dictionary-entry b { font: 500 .82rem/1.3 "Times New Roman", serif; }
.dictionary-entry em { color: rgba(255,255,255,.78); font-size: .75rem; }
.demosthenes-biography-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) minmax(250px,.75fr); gap: 1rem; margin-top: 1.2rem; }
.demosthenes-biography-body > * { padding: clamp(1rem,2.5vw,1.6rem); border: 1px solid var(--line); border-radius: 0px; background: var(--paper); }
.demosthenes-biography-body h2 { color: var(--ink); }
.demosthenes-legacy-card { background: #ede2c8 !important; }
.demosthenes-legacy-card a { color: var(--forest); font-weight: 700; }
.demosthenes-source-strip { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.1rem 1.3rem; border-radius: 0px; background: #52297a; color: white; }
.demosthenes-source-strip h2 { margin: .12rem 0 0; color: white; }
.demosthenes-source-strip > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.demosthenes-source-strip a { padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.25); border-radius: 0px; color: white; text-decoration: none; }

.app-footer strong small { margin-left: .35rem; padding: .1rem .35rem; border-radius: 0px; background: rgba(255,255,255,.15); font: 600 .6rem/1 "Times New Roman", serif; letter-spacing: .06em; }

@media (max-width: 1320px) {
  .topbar { grid-template-columns: minmax(250px,1fr) 48px auto !important; }
  .desktop-nav { gap: .25rem; }
  .desktop-nav button { padding-inline: .55rem; font-size: .72rem; }
}

@media (max-width: 1020px) {
  .topbar { grid-template-columns: minmax(220px,1fr) 48px !important; }
  .desktop-nav { display: none !important; }
  .home-subject-toggle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .civilization-connection-grid { grid-template-columns: 1fr; }
  .key-figure-card-grid { grid-template-columns: 1fr; }
  .demosthenes-biography-body { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demosthenes-legacy-card { grid-column: 1 / -1; }
  .mobile-nav { display: flex !important; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; }
  .mobile-nav button { min-width: 76px; flex: 0 0 76px; }
}

@media (max-width: 760px) {
  .topbar { min-height: 73px; grid-template-columns: minmax(0,1fr) 44px !important; padding-inline: .65rem !important; }
  .brand-seal { width: 38px; height: 38px; }
  .brand-copy strong { font-size: .92rem; }
  .brand-pronunciation { font-size: .57rem; }
  .brand-copy small { font-size: .58rem; }
  .brand-copy em { display: none; }
  .brand-alias { font-size: .5rem; padding-inline: .28rem; }
  .study-roster-heading, .demosthenes-source-strip { display: grid; }
  .home-subject-toggle-grid { grid-template-columns: 1fr; }
  .progress-mode-switch { grid-template-columns: 1fr; }
  .recent-bridge-list > div { grid-template-columns: 1fr auto 1fr; }
  .recent-bridge-list small { grid-column: 1 / -1; }
  .key-figure-card { grid-template-columns: 88px minmax(0,1fr); }
  .figure-portrait { width: 88px; }
  .figure-significance-points { font-size: .7rem; }
  .demosthenes-biography-hero, .demosthenes-biography-body { grid-template-columns: 1fr; }
  .demosthenes-biography-intro h1 { font-size: 3.2rem; }
  .demosthenes-source-strip > div:last-child { justify-content: flex-start; }
  .map-zone-pin span { display: block !important; }
}

@media (max-width: 470px) {
  .brand-copy small { display: none; }
  .brand-pronunciation { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .key-figure-card { grid-template-columns: 1fr; }
  .figure-portrait { width: 100%; max-height: 260px; aspect-ratio: 16 / 10; }
  .culture-subnav-links { grid-template-columns: 1fr !important; }
}
.figure-image-source {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  padding: .22rem .35rem;
  border-radius: 0px;
  background: rgba(63, 22, 99,.82);
  color: white;
  font: 600 .55rem/1.1 "Times New Roman", serif;
  text-decoration: none;
}
.figure-image-source:hover,
.figure-image-source:focus-visible { background: #441473; }

/* ======================================================================
   2026 depth and clarity pass: advanced courses, subject progress,
   evidence-aware atlas and high-contrast identity elements.
   ====================================================================== */

/* Critical contrast corrections. */

.knowledge-page-hero .eyebrow {
  color: #6b4f1d !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.knowledge-page-hero .lede {
  color: #47385c !important;
  opacity: 1 !important;
}

.demosthenes-biography-intro .motto,
.demosthenes-biography-intro .motto * {
  opacity: 1 !important;
}
.demosthenes-biography-intro .motto span,
.demosthenes-biography-intro .motto strong {
  color: #ffffff !important;
}
.demosthenes-biography-intro .motto em,
.demosthenes-biography-intro .motto small {
  color: #f4d895 !important;
}
.demosthenes-biography-intro .dictionary-entry,
.demosthenes-biography-intro .dictionary-entry * {
  color: #49286f !important;
  opacity: 1 !important;
}

/* Course catalogue and reversible home roster. */


.course-level-tabs button.selected {
  border-color: #521f99;
  background: #521f99;
  color: white;
}


.course-resource-strip {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.8fr);
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(75, 42, 128,.18);
  border-radius: 0px;
  background: linear-gradient(135deg, #f7f2e5, #eae5f3);
}
.course-resource-strip h2 { margin: .15rem 0 .3rem; color: #491f74; }
.course-resource-strip p { margin: 0; color: #605060; }
.course-resource-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .55rem;
}
.course-resource-links a {
  display: grid;
  gap: .18rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(75, 42, 128,.16);
  border-radius: 0px;
  background: rgba(255,255,255,.82);
  color: #49197d;
  text-decoration: none;
}
.course-resource-links a span,
.course-resource-links a small { color: #5f5f74; font-size: .67rem; }
.course-resource-links a:hover { border-color: #5f34a4; transform: translateY(-1px); }
.filter-panel { grid-template-columns: minmax(190px, 1.5fr) repeat(5, minmax(120px, .75fr)) auto; }

/* Question type presentation. */
.question-stimulus,
.question-formula,
.answer-scaffold {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(83, 57, 124,.18);
  border-left: 4px solid #9e7430;
  border-radius: 0px;
  background: #f6f0e2;
  color: #4e3674;
}
.question-stimulus strong,
.question-formula strong { display: block; margin-bottom: .3rem; color: #654a1d; }
.question-stimulus p { margin: 0; }
.question-formula code { color: #49197d; font-size: 1rem; white-space: pre-wrap; }
.answer-scaffold { font-size: .82rem; border-left-color: #542d8e; }

/* Subject-by-subject revision progress. */


.progress-subject-tabs button.selected {
  background: #521f99;
  color: white;
  border-color: #521f99;
}
.progress-subject-tabs button.selected small { color: #857dbf; }

.horizontal-bar-list { display: grid; gap: .6rem; }
.horizontal-bar-list > div {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: .65rem;
}
.horizontal-bar-list span { color: #5b497b; font-size: .78rem; }
.horizontal-bar-list i { display: block; height: 10px; overflow: hidden; border-radius: 0px; background: #e8e2d4; }
.horizontal-bar-list i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #513087, #a8792c); }
.horizontal-bar-list strong { color: #49197d; font-size: .75rem; }
.topic-progress-table { display: grid; gap: .55rem; }
.topic-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid rgba(75, 42, 128,.16);
  border-radius: 0px;
  background: #fffdf8;
  color: #4f3275;
  text-align: left;
}
.topic-progress-row span > strong,
.topic-progress-row span > small { display: block; }
.topic-progress-row span > small { margin: .15rem 0 .4rem; color: #68736c; }
.topic-progress-row .progress-bar { display: block; height: 7px; overflow: hidden; border-radius: 0px; background: #e7e1d4; }
.topic-progress-row .progress-bar b { display: block; height: 100%; background: #5a3692; }
.topic-progress-row em { color: #542790; font-style: normal; font-weight: 700; }

/* Per-topic mastery split by difficulty (Foundational/Developing/Stretch) —
   only rendered when a topic actually has more than one band represented,
   so it adds signal rather than three redundant dots on every row. */
.topic-difficulty-breakdown { display: flex; gap: 10px; margin: -0.15rem 0 0.4rem; }
.topic-difficulty-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: #8a7fa0; cursor: default;
}

/* Clean map: the map holds only numbered points; labels live below it. */
.refined-world-map .world-map-frame {
  aspect-ratio: 360 / 182.592;
  border: 1px solid rgba(76, 46, 121,.24);
  border-radius: 0px;
  background: #e1d9e9;
  box-shadow: inset 0 0 0 5px rgba(255,252,239,.5);
}
.refined-world-map .world-map-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.world-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.map-zone-svg-pin { cursor: pointer; outline: none; }
.map-zone-svg-pin circle {
  fill: #813f2d;
  stroke: #fff8e5;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.map-zone-svg-pin text {
  fill: white;
  font: 700 4.1px/1 "Times New Roman", serif;
  pointer-events: none;
}
.map-zone-svg-pin:hover circle,
.map-zone-svg-pin:focus-visible circle,
.map-zone-svg-pin.selected circle { fill: #edbd58; stroke: #49197d; stroke-width: 1.8; }
.map-zone-svg-pin.selected text { fill: #49197d; }
.map-zone-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .45rem;
  margin-top: .75rem;
}
.map-zone-legend button {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: .55rem;
  align-items: center;
  padding: .55rem;
  border: 1px solid rgba(75, 42, 128,.15);
  border-radius: 0px;
  background: rgba(255,253,247,.82);
  color: #4e3477;
  text-align: left;
}
.map-zone-legend button > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #8a4934;
  color: white;
}
.map-zone-legend button strong,
.map-zone-legend button small { display: block; overflow-wrap: anywhere; }
.map-zone-legend button small { margin-top: .12rem; color: #6b756e; font-size: .63rem; }
.map-zone-legend button.selected { border-color: #6134a3; background: #ece5f3; }
.map-zone-legend button.selected > b { background: #e8b853; color: #49197d; }
.map-selection-panel {
  display: grid;
  gap: .15rem;
  margin-top: .7rem;
  padding: .75rem .85rem;
  border-left: 4px solid #9a6f28;
  border-radius: 0px;
  background: #f5eddb;
  color: #58447b;
}
.map-selection-panel span { color: #795a25; font-size: .65rem; font-weight: 700; letter-spacing: .07em; }
.map-selection-panel p { margin: .2rem 0 0; color: #645664; }

/* Evidence-aware civilisation dossiers. */
.expanded-civilization-layout { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); }
.civilization-leadership-chronology {
  margin: 1.4rem 0;
  padding: 1rem;
  border: 1px solid rgba(75, 42, 128,.18);
  border-radius: 0px;
  background: #f5efe2;
}
.civilization-leadership-chronology ol { display: grid; gap: .65rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.civilization-leadership-chronology li {
  display: grid;
  grid-template-columns: minmax(105px,.35fr) minmax(0,1fr);
  gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(75, 42, 128,.12);
}
.civilization-leadership-chronology time { color: #785b28; font-weight: 700; }
.civilization-leadership-chronology li div { display: grid; gap: .18rem; }
.civilization-leadership-chronology li div > span { color: #6b756d; font-size: .66rem; letter-spacing: .05em; }
.civilization-leadership-chronology p { margin: .1rem 0 0; }
.civilization-disputes,
.civilization-decline { padding: 1rem; border-radius: 0px; }
.civilization-disputes { background: #eee9dc; }
.civilization-decline { background: #f5e7df; border-left: 4px solid #934e3d; }
.section-intro { color: #69726d; }
.expanded-event-timeline {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  scrollbar-width: thin;
}
.expanded-event-timeline h2 { margin: .15rem 0 .8rem; color: #49197d; }
.expanded-event-timeline li span { display: grid; gap: .15rem; }
.expanded-event-timeline li b { color: #7f6028; font-size: .59rem; letter-spacing: .05em; }

/* Gallery scale without an unending page. */
.gallery-results-heading,
.gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: .85rem 0;
}
.gallery-results-heading { color: #634d66; }
.gallery-pagination { flex-wrap: wrap; }
.gallery-pagination > div { display: flex; flex-wrap: wrap; gap: .3rem; }
.gallery-pagination > div button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(75, 42, 128,.18);
  border-radius: 50%;
  background: #fffdf7;
  color: #4e3477;
}
.gallery-pagination > div button.selected { background: #521f99; color: white; }
.course-pagination-label { color: #634d66; font-weight: 600; }

/* Library source links remain visually obvious. */
.citation-links a,
.library-source-card,
.course-resource-links a { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .filter-panel { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .course-level-section .course-catalogue { grid-template-columns: 1fr; }
  .home-subject-toggle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .map-zone-legend { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .course-resource-strip,
  .expanded-civilization-layout { grid-template-columns: 1fr; }
  .course-resource-links { grid-template-columns: 1fr; }
  .expanded-event-timeline { position: static; max-height: none; }
  .filter-panel { grid-template-columns: 1fr 1fr; }
  .map-zone-legend { grid-template-columns: 1fr 1fr; }
  .horizontal-bar-list > div { grid-template-columns: minmax(95px,.8fr) minmax(90px,2fr) auto; }
}

@media (max-width: 560px) {
  .home-subject-toggle-grid,
  .map-zone-legend,
  .filter-panel { grid-template-columns: 1fr; }
  .progress-subject-tabs button { flex-basis: 78vw; }
  .civilization-leadership-chronology li { grid-template-columns: 1fr; gap: .2rem; }
  .map-zone-svg-pin circle { r: 5.2; }
  .map-zone-svg-pin text { font-size: 4.6px; }
}

/* ================================================================
   V8 — Intellectual portraits, stronger contrast and visual rooms
   ================================================================ */

/* Keep every Culture entry action as legible as the other rooms. */
.culture-room .button.primary,
.atlas-room .button.primary,
.music-room .button.primary,
.intellectual-room .button.primary {
  background: #49197d !important;
  color: #fffdf5 !important;
  border-color: #49197d !important;
  box-shadow: 0 9px 22px rgba(63, 15, 121, .14);
}
.culture-room .button.primary:hover,
.atlas-room .button.primary:hover,
.music-room .button.primary:hover,
.intellectual-room .button.primary:hover {
  background: #542695 !important;
  color: #ffffff !important;
}

/* Refined public-domain visual atmosphere. Text remains protected by overlays. */
.home-hero,
.library-hero,
.listening-hero,
.culture-hero,
.science-history-hero,
.knowledge-page-hero,
.intellectual-hero,
.demosthenes-biography-hero,
.subjects-hero,
.revision-progress-hero,
.debate-hero {
  position: relative;
  isolation: isolate;
  background-position: center !important;
  background-size: cover !important;
  overflow: hidden;
}
.home-hero,
.library-hero {
  background-image: linear-gradient(100deg, rgba(58, 5, 107, .95) 0%, rgba(64, 18, 115, .88) 48%, rgba(55, 32, 98, .55) 100%), url("./assets/bg-bodleian.jpg") !important;
}
.listening-hero {
  background-image: linear-gradient(100deg, rgba(19, 20, 24, .95) 0%, rgba(49, 39, 21, .87) 55%, rgba(54, 40, 20, .54) 100%), url("./assets/bg-bach-score.jpg") !important;
}
.culture-hero,
.intellectual-hero,
.demosthenes-biography-hero {
  background-image: linear-gradient(100deg, rgba(58, 30, 95, .94) 0%, rgba(33, 31, 50, .86) 55%, rgba(50, 40, 25, .48) 100%), url("./assets/bg-school-athens.jpg") !important;
}
.science-history-hero {
  background-image: linear-gradient(100deg, rgba(68, 15, 100, .96) 0%, rgba(57, 52, 93, .87) 56%, rgba(53, 42, 26, .48) 100%), url("./assets/bg-orrery.jpg") !important;
}

.subjects-hero {
  background-image: linear-gradient(100deg, rgba(62, 9, 105, .95) 0%, rgba(60, 49, 100, .86) 55%, rgba(53, 42, 26, .5) 100%), url("./assets/bg-course-atlas.jpg") !important;
}

.debate-hero {
  background-image: linear-gradient(100deg, rgba(58, 30, 95, .95) 0%, rgba(33, 31, 50, .87) 55%, rgba(50, 40, 25, .5) 100%), url("./assets/demosthenes-bust.jpg") !important;
  background-position: center 22% !important;
}
.home-hero::after,
.library-hero::after,
.listening-hero::after,
.culture-hero::after,
.science-history-hero::after,
.knowledge-page-hero::after,
.intellectual-hero::after,
.demosthenes-biography-hero::after,
.subjects-hero::after,
.revision-progress-hero::after,
.debate-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(46, 0, 98, .18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Explicit hero contrast: later inherited rules must not wash these headings out. */
.home-hero h1,
.home-hero h2,
.home-hero p,
.home-hero .eyebrow,
.library-hero h1,
.library-hero h2,
.library-hero p,
.library-hero .eyebrow,
.listening-hero h1,
.listening-hero h2,
.listening-hero p,
.listening-hero .eyebrow,
.culture-hero h1,
.culture-hero h2,
.culture-hero p,
.culture-hero .eyebrow,
.science-history-hero h1,
.science-history-hero h2,
.science-history-hero p,
.science-history-hero .eyebrow,
.knowledge-page-hero h1,
.knowledge-page-hero h2,
.knowledge-page-hero p,
.knowledge-page-hero .eyebrow,
.intellectual-hero h1,
.intellectual-hero h2,
.intellectual-hero p,
.intellectual-hero .eyebrow,
.demosthenes-biography-hero h1,
.demosthenes-biography-hero h2,
.demosthenes-biography-hero p,
.demosthenes-biography-hero .eyebrow,
.subjects-hero h1,
.subjects-hero h2,
.subjects-hero p,
.subjects-hero .eyebrow,
.revision-progress-hero h1,
.revision-progress-hero h2,
.revision-progress-hero p,
.revision-progress-hero .eyebrow,
.debate-hero h1,
.debate-hero h2,
.debate-hero p,
.debate-hero .eyebrow {
  color: #fffdf5 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.science-history-hero .text-link {
  color: var(--gold-light) !important;
}

.home-hero .lede,
.library-hero .lede,
.listening-hero .lede,
.culture-hero .lede,
.science-history-hero .lede,
.knowledge-page-hero .lede,
.intellectual-hero .lede,
.demosthenes-biography-hero .lede,
.subjects-hero .lede,
.revision-progress-hero .lede,
.debate-hero .lede {
  color: rgba(255, 253, 245, .9) !important;
}
.home-hero .eyebrow,
.library-hero .eyebrow,
.listening-hero .eyebrow,
.culture-hero .eyebrow,
.science-history-hero .eyebrow,
.knowledge-page-hero .eyebrow,
.intellectual-hero .eyebrow,
.demosthenes-biography-hero .eyebrow,
.subjects-hero .eyebrow,
.revision-progress-hero .eyebrow,
.debate-hero .eyebrow {
  color: #efd190 !important;
}


/* The dictionary entry and motto on the historical page must remain visible. */
.demosthenes-biography-intro .dictionary-entry {
  padding: .75rem .9rem !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 0px !important;
  background: rgba(61, 0, 106, .7) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.demosthenes-biography-intro .dictionary-entry strong,
.demosthenes-biography-intro .dictionary-entry b,
.demosthenes-biography-intro .dictionary-entry em {
  color: #fffdf5 !important;
  text-shadow: none !important;
}
.demosthenes-biography-intro .dictionary-entry span {
  color: #f0d38d !important;
  text-shadow: none !important;
}
.demosthenes-biography-intro .motto-block,
.demosthenes-biography-intro .motto-block strong,
.demosthenes-biography-intro .motto-block span,
.demosthenes-biography-intro .motto-block em {
  color: #fffdf5 !important;
}
.demosthenes-biography-intro .motto-block em { color: #efd190 !important; }

/* Give the knowledge constellation enough vertical air for its final labels. */


/* Lives & Ideas. */

.intellectual-browser {
  display: grid;
  grid-template-columns: minmax(230px, .54fr) minmax(0, 1.55fr);
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 2rem;
}
.intellectual-index {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: hidden;
  border: 1px solid rgba(75, 42, 128,.17);
  border-radius: 0px;
  background: #f7f1e4;
  box-shadow: 0 13px 35px rgba(69, 54, 100,.08);
}
.intellectual-index header { padding: 1rem; border-bottom: 1px solid rgba(75, 42, 128,.13); }
.intellectual-index header h2 { margin: .1rem 0; color: #49197d; }
.intellectual-index-scroll { max-height: calc(100vh - 235px); overflow-y: auto; scrollbar-width: thin; }
.intellectual-index-item {
  display: grid;
  width: 100%;
  gap: .17rem;
  padding: .78rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(75, 42, 128,.09);
  background: transparent;
  color: #4e3278;
  text-align: left;
}
.intellectual-index-item time { color: #8a6729; font-size: .66rem; font-weight: 700; }
.intellectual-index-item strong { font: 400 1.02rem/1.2 Georgia, "Times New Roman", serif; }
.intellectual-index-item span,
.intellectual-index-item small { color: #6b746e; font-size: .65rem; }
.intellectual-index-item:hover,
.intellectual-index-item.selected { background: #8a8db2; }
.intellectual-index-item.selected { box-shadow: inset 4px 0 #6528b2; }
.intellectual-detail {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.7rem);
  border: 1px solid rgba(75, 42, 128,.17);
  border-radius: 0px;
  background: rgba(255,253,247,.95);
  box-shadow: 0 18px 44px rgba(69, 54, 100,.09);
}
.intellectual-profile-header {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  gap: 1.35rem;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(75, 42, 128,.13);
}
.intellectual-profile-header h1 { margin: .08rem 0; color: #49197d; font-size: clamp(2.1rem, 5vw, 4.2rem); }
.intellectual-profile-header h2 { margin: .1rem 0 .6rem; color: #835f25; font-size: 1rem; }
.intellectual-thesis { max-width: 760px; margin: 0; color: #593d5b; font: 400 1.08rem/1.55 Georgia, "Times New Roman", serif; }
.intellectual-portrait {
  position: relative;
  width: 190px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid var(--gold);
  outline: 1px solid rgba(75, 42, 128,.2);
  outline-offset: 3px;
  border-radius: 50%;
  background: var(--forest);
  display: grid;
  place-items: center;
}
.intellectual-portrait > span { color: var(--gold-light); font: 400 2rem/1 "Cinzel", Georgia, "Times New Roman", serif; }
.intellectual-portrait img { width: 100%; height: 100%; object-fit: cover; }
.intellectual-portrait .figure-image-source { position: absolute; inset: auto 5px 5px; }
.intellectual-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.intellectual-detail .culture-reading-section { margin: 1rem 0; }
.intellectual-connections { margin: 1.2rem 0; padding: 1rem; border-radius: 0px; background: #e8e6f5; }
.connection-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.connection-card-grid button {
  display: grid;
  gap: .2rem;
  min-width: 0;
  padding: .8rem;
  border: 1px solid rgba(75, 42, 128,.15);
  border-radius: 0px;
  background: #fffdf7;
  color: #4e3477;
  text-align: left;
}
.connection-card-grid button span { color: #8a6729; font-size: .62rem; font-weight: 700; letter-spacing: .05em; }
.connection-card-grid button strong { overflow-wrap: anywhere; }
.connection-card-grid button small { color: #6b756e; }


/* A universal, unobtrusive research desk. */
.research-dock,
.visual-credits {
  margin: 1.2rem auto;
  max-width: min(1480px, calc(100% - 2rem));
  border: 1px solid rgba(75, 42, 128,.18);
  border-radius: 0px;
  background: rgba(247,242,229,.96);
  color: #4e3477;
  overflow: hidden;
}
.research-dock > summary,
.visual-credits > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  cursor: pointer;
  list-style: none;
}
.research-dock > summary::-webkit-details-marker,
.visual-credits > summary::-webkit-details-marker { display: none; }
.research-dock > summary span { display: grid; gap: .12rem; }
.research-dock > summary b { color: #49197d; }
.research-dock > summary small { color: #69736d; }
.research-dock > summary i { font-style: normal; color: #8a6729; font-size: 1.3rem; }
.research-dock[open] > summary i { transform: rotate(45deg); }
.research-dock-body { padding: 0 1rem 1rem; border-top: 1px solid rgba(75, 42, 128,.1); }
.research-route-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; padding: 1rem 0; }
.research-route-links button {
  display: grid;
  gap: .18rem;
  padding: .78rem;
  border: 1px solid rgba(75, 42, 128,.15);
  border-radius: 0px;
  background: #49197d;
  color: #fffdf5;
  text-align: left;
}
.research-route-links button span { color: #e9d49c; font-size: .68rem; }
.research-gateway-group { margin-top: 1rem; }
.research-gateway-group h3 { color: #49197d; font-size: .92rem; }
.research-gateway-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.research-gateway-grid a {
  display: grid;
  gap: .18rem;
  min-width: 0;
  padding: .72rem;
  border: 1px solid rgba(75, 42, 128,.13);
  border-radius: 0px;
  background: #fffdf7;
  color: #4e3477;
  text-decoration: none;
}
.research-gateway-grid a span { color: #8a6729; font-size: .58rem; font-weight: 700; letter-spacing: .05em; }
.research-gateway-grid a strong,
.research-gateway-grid a small { overflow-wrap: anywhere; }
.research-gateway-grid a small { color: #69736d; }
.visual-credits > div { padding: 0 1rem 1rem; }

@media (max-width: 1100px) {
  .intellectual-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .research-gateway-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .connection-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .intellectual-browser { grid-template-columns: 1fr; }
  .intellectual-index { position: static; max-height: none; }
  .intellectual-index-scroll { display: flex; max-height: none; overflow: auto; }
  .intellectual-index-item { flex: 0 0 min(240px,75vw); border-right: 1px solid rgba(75, 42, 128,.09); }
  .intellectual-profile-header { grid-template-columns: 130px minmax(0,1fr); }
  .intellectual-portrait { width: 130px; }
  .intellectual-columns { grid-template-columns: 1fr; }
  .research-route-links { grid-template-columns: 1fr; }
  .research-gateway-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .knowledge-constellation { min-height: 360px; }
}
@media (max-width: 560px) {
  .intellectual-filter,
  .connection-card-grid,
  .research-gateway-grid { grid-template-columns: 1fr; }
  .intellectual-profile-header { grid-template-columns: 1fr; }
  .intellectual-portrait { width: min(190px,70vw); }
  .knowledge-constellation { min-height: 330px; margin-bottom: 2rem; }
  .knowledge-constellation .constellation-node text { font-size: 3.7px; }
}

/* =========================================
   AI TOOLS, OVERLAYS & DEBATE ROOM
   ========================================= */

.action-tools-container {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 40;
}
.action-tools-container.hidden,
.action-tools-container .hidden { display: none !important; }
.action-tools-container .button { box-shadow: var(--shadow); }

#canvas-overlay, #demo-drawer {
  position: fixed;
  z-index: 300;
  background-color: #39275a;
  transition: transform 0.3s ease-in-out;
}
#canvas-overlay {
  bottom: 0; left: 0; right: 0; height: 85vh;
  border-top: 2px solid var(--gold);
  box-shadow: 0 -18px 50px rgba(44, 26, 77, 0.55);
  display: flex; flex-direction: column;
}
#canvas-overlay.hidden { transform: translateY(100%); }
.canvas-toolbar {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 22px;
  background: linear-gradient(180deg, #4f2d78, #3a2160);
  border-bottom: 1px solid rgba(240, 223, 160, 0.18);
  box-shadow: 0 4px 14px rgba(20, 10, 40, 0.3);
}
.canvas-tools { display: flex; gap: 10px; align-items: center; }
.canvas-tools label.button { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.canvas-tools .button.secondary,
#btn-submit-canvas.button.primary {
  box-shadow: var(--shadow-small);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.canvas-tools .button.secondary {
  border-color: rgba(240, 223, 160, 0.32);
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.06);
}
.canvas-tools .button.secondary:hover {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.18);
  color: #fff;
  transform: translateY(-1px);
}
#btn-submit-canvas.button.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
#stem-canvas {
  flex-grow: 1; touch-action: none; cursor: crosshair;
  box-shadow: inset 0 0 0 1px rgba(104, 52, 153, 0.1);
}
#canvas-photo-preview { flex-grow: 1; width: 100%; object-fit: contain; background-color: #39275a; }
#canvas-photo-preview[hidden] { display: none; }

#canvas-feedback-panel {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%);
  width: 90%; max-width: 600px; background-color: #39275a;
  border: 1px solid rgba(244, 240, 231, 0.16); border-radius: var(--radius-small);
  box-shadow: 0 20px 60px rgba(44, 26, 77, 0.7); z-index: 310;
  display: flex; flex-direction: column;
}
#canvas-feedback-panel.hidden { display: none; }
.feedback-header, .drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background-color: #47276d; border-bottom: 1px solid rgba(244, 240, 231, 0.14);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}
.feedback-header h3, .drawer-header h3 {
  margin: 0; color: var(--cream); font-family: "Cinzel", Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 400;
}
#btn-close-feedback, #btn-close-drawer { background: none; border: none; color: #c1b5c8; font-size: 1.5rem; cursor: pointer; line-height: 1; }
#btn-close-feedback:hover, #btn-close-drawer:hover { color: var(--cream); }
.feedback-content { padding: 20px; color: var(--cream); font-size: 0.95rem; line-height: 1.65; max-height: 50vh; overflow-y: auto; white-space: pre-wrap; }

#demo-drawer {
  top: 0; right: 0; width: 100%; max-width: 450px; height: 100vh;
  border-left: 1px solid rgba(244, 240, 231, 0.14); box-shadow: -18px 0 45px rgba(44, 26, 77, 0.55);
  display: flex; flex-direction: column;
}
#demo-drawer.hidden { transform: translateX(100%); }
.chat-history { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.chat-bubble { max-width: 85%; padding: 12px 16px; border-radius: var(--radius-small); font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; }
.ai-bubble { align-self: flex-start; background-color: #47276d; color: var(--cream); border: 1px solid rgba(244, 240, 231, 0.14); border-bottom-left-radius: 4px; }
.user-bubble { align-self: flex-end; background-color: var(--gold-light); color: var(--ink); font-weight: 500; border: 1px solid transparent; border-bottom-right-radius: 4px; }
.chat-input-area { padding: 16px; background-color: #47276d; border-top: 1px solid rgba(244, 240, 231, 0.14); display: flex; gap: 12px; align-items: flex-end; }
#chat-input, #debate-input { flex-grow: 1; background-color: #39275a; color: var(--cream); border: 1px solid rgba(244, 240, 231, 0.2); border-radius: 0px; padding: 10px; resize: none; min-height: 44px; font-family: inherit; }
#chat-input:focus, #debate-input:focus { outline: none; border-color: var(--gold); }

/* AI "is thinking" indicator */
.typing-bubble { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background-color: var(--gold-light);
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.debate-room .typing-dot { background-color: var(--gold); }

/* Debate Room Specifics */
.debate-room {
  margin-top: 20px; border: 1px solid var(--line); border-radius: 0px;
  background: rgba(251, 249, 243, 0.85); overflow: hidden; display: flex; flex-direction: column; height: 65vh;
}
.debate-room .chat-history { background: transparent; color: var(--ink); }
.debate-room .ai-bubble { background-color: white; color: var(--ink); border-color: var(--line); }
.debate-room .user-bubble { background-color: var(--forest); color: white; border-color: var(--forest); }
.debate-room .chat-input-area { background-color: rgba(255, 255, 255, 0.6); border-top-color: var(--line); }
.debate-room #debate-input { background-color: white; color: var(--ink); border-color: var(--line-strong); }
.debate-room #debate-input:focus { border-color: var(--gold); }
.debate-input-area .upload-btn {
  font-size: 1.5rem; background: transparent; border: none; cursor: pointer; padding-bottom: 5px;
}
.debate-input-area .upload-preview { max-width: 60px; max-height: 60px; border-radius: 0px; display: none; object-fit: cover; }

/* Tap-off-to-dismiss backdrop */
#ai-overlay-backdrop {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(54, 36, 73, 0.32);
  backdrop-filter: blur(1px);
}
#ai-overlay-backdrop.hidden { display: none; }

/* Stylus ink colour palette — the drawing surface itself is a warm paper
   tone, not pure white (see #stem-canvas) */
.canvas-colors {
  display: flex; align-items: center; gap: 8px; padding: 0 16px; margin: 0 6px;
  border-left: 1px solid rgba(240, 223, 160, 0.2);
  border-right: 1px solid rgba(240, 223, 160, 0.2);
}
.color-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(244, 240, 231, 0.35);
  background: var(--swatch, #3d3459); cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(15, 8, 28, 0.35);
  transition: transform 140ms ease, border-color 140ms ease;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(231, 212, 173, 0.4), 0 2px 6px rgba(15, 8, 28, 0.35); }
#stem-canvas { background: var(--paper); }
#canvas-photo-preview { background-color: #ffffff; }

/* Answer-capture modes: flashcard, written, gap-fill, essay */
.flashcard-panel, .written-mode-panel {
  padding: 32px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-align: center;
}
.flashcard-panel p { max-width: 560px; margin: 0 auto 18px; color: var(--ink-soft); font-size: 1.05rem; }
.written-mode-panel { text-align: left; }
.written-mode-panel p { max-width: 560px; margin: 0 0 18px; color: var(--ink-soft); font-size: 0.95rem; }
.written-mode-note { font-size: 0.82rem !important; color: var(--ink-faint) !important; }
.written-mode-panel label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; }
.written-mode-panel textarea { min-height: 90px; margin-bottom: 4px; font-size: 1.05rem; }
.flashcard-panel .answer-form-footer, .written-mode-panel .answer-form-footer { justify-content: center; flex-direction: column; gap: 14px; }

.gap-fill-sentence {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; line-height: 2.1;
  padding: 20px; border: 1px solid var(--line); border-radius: 0px; background: var(--paper);
}
.gap-input {
  display: inline-block; width: 140px; margin: 0 4px; padding: 4px 8px;
  border: none; border-bottom: 2px solid var(--gold); background: transparent;
  font: inherit; font-weight: 700; color: var(--forest); text-align: center;
}
.gap-input:focus { outline: none; border-bottom-color: var(--forest); }

.answer-form-actions { display: flex; align-items: center; gap: 12px; }
.formula-latex { display: block; color: #49197d; font-size: 1.05rem; }

/* Debate room: sidebar of saved chats + reset */
.debate-layout { margin-top: 20px; display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
.debate-sidebar {
  border: 1px solid var(--line); border-radius: 0px; background: rgba(251, 249, 243, 0.85);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; height: 65vh; overflow-y: auto;
}
.debate-chat-list { display: flex; flex-direction: column; gap: 6px; }
.debate-chat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 0px;
  background: transparent; color: var(--ink-soft); font-size: 0.85rem; text-align: left; cursor: pointer;
}
.debate-chat-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debate-chat-item:hover { background: rgba(183, 139, 70, 0.1); }
.debate-chat-item.active { background: var(--forest); color: white; border-color: var(--forest); font-weight: 600; }
.debate-chat-delete { opacity: 0.55; font-size: 0.75rem; padding: 2px 4px; border-radius: 0px; }
.debate-chat-delete:hover { opacity: 1; background: rgba(159, 75, 69, 0.25); }
.debate-empty-note { margin: 0; color: var(--ink-faint); font-size: 0.8rem; }
.debate-room-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.5);
}
.debate-room-header strong { font-family: "Cinzel", Georgia, "Times New Roman", serif; font-size: 1.05rem; color: var(--ink); }
.debate-room .button.small { min-height: 34px; padding: 0 14px; font-size: 0.75rem; }

@media (max-width: 900px) {
  .debate-layout { grid-template-columns: 1fr; }
  .debate-sidebar { height: auto; max-height: 220px; }
}

@media (max-width: 640px) {
  #demo-drawer { max-width: 100%; }
  #canvas-feedback-panel { width: 94%; top: 6%; }
}

/* =========================================
   TOPBAR — DEFINITIVE LAYOUT
   The stylesheet accumulated several earlier, mutually conflicting .topbar
   rules (fixed and responsive) from repeated prior edits. This block is
   intentionally last in the file (and !important where it matters) so it
   always wins.
   ========================================= */
.topbar {
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  column-gap: clamp(12px, 2vw, 24px) !important;
}
@media (max-width: 1449px) {
  .topbar {
    grid-template-columns: minmax(200px, 1fr) auto !important;
  }
}

/* =========================================
   MATHS TYPESETTING (KaTeX)
   KaTeX renders inline and scales with the font-size of whatever contains
   it. Pin math to a comfortable, near-constant reading size regardless of
   the surrounding heading, except in the question prompt, where it should
   read as exactly the same size as the prose around it.
   ========================================= */
.katex { font-size: 1.05em; }
.question-stage .question-prompt .katex { font-size: 1em; }
.article-body h2 .katex,
.context-bridge-heading h2 .katex { font-size: 1.3rem; }
.katex-display { margin: 0.7em 0; }
.chat-bubble .katex-display,
.feedback-content .katex-display { margin: 0.5em 0; }

/* Breathing room for dense reading: prompts, stimuli and formula blocks */
.question-stimulus p,
.question-formula .formula-latex,
.answer-scaffold {
  line-height: 1.7;
}
.insight-box span {
  line-height: 1.6;
}

/* ==========================================================================
   LANDING HOME — the "senate" marketing/orientation homepage, replacing
   both the old onboarding welcome screen and the old dashboard. Serves
   every visitor, onboarded or not; subject selection now happens on the
   Subjects page itself rather than a separate gate.
   ========================================================================== */

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 46px 40px 100px;
  /* background-attachment: fixed anchors this gradient to the viewport
     rather than the element's own box — combined with the transparent
     topbar using the identical gradient + fixed attachment below, the two
     separate elements read as one continuous surface instead of a seam. */
  background: radial-gradient(circle at 20% 15%, #7440a8, #2e2049 62%);
  background-attachment: fixed;
}
.landing-hero-columns {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 118px, rgba(201, 162, 39, 0.08) 118px 120px);
  pointer-events: none;
}
.landing-hero-grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}
.landing-eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}
.landing-eyebrow-gold { color: var(--gold-light); }
.landing-eyebrow-green { color: var(--green); }
.landing-h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.12;
  color: #fdf9ee;
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}
.landing-lede {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin: 0 0 34px;
}
.landing-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.landing-button {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 15px 32px;
  border: 0;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.landing-button-gold {
  background: linear-gradient(100deg, #c9a227, #e0bd54, #c9a227);
  color: #241703;
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.38);
}
.landing-button-gold:hover { filter: brightness(1.07); }
.landing-button-outline {
  background: transparent;
  color: #f0e6d8;
  border: 1px solid rgba(201, 162, 39, 0.55);
}
.landing-button-outline:hover { border-color: rgba(201, 162, 39, 0.9); background: rgba(201, 162, 39, 0.1); }

.landing-hero-tree {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-height: 460px;
}
.landing-hero-tree-inner {
  position: relative;
  width: 210%;
  margin-right: -42%;
  margin-bottom: -18px;
}
.landing-hero-tree-inner img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 55px rgba(8, 4, 18, 0.5));
}

/* Sits in the negative space the canopy's leftward lean opens up above the
   trunk and below the leaves — positioned as a percentage of the image's
   own box (landing-hero-tree-inner is sized to match the img exactly) so
   it holds its place in that pocket at any viewport width. */
.landing-tree-quote {
  position: absolute;
  left: 1%;
  top: 73%;
  width: 40%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: rgba(240, 231, 216, 0.88);
}
.landing-tree-quote-en {
  margin: 0 0 8px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.68rem, 1.1vw, 0.92rem);
  line-height: 1.45;
}
.landing-tree-quote cite {
  display: block;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(0.52rem, 0.75vw, 0.62rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 231, 216, 0.6);
}

@media (max-width: 900px) {
  .landing-tree-quote { display: none; }
}

.landing-stats { background: var(--cream); padding: 50px 40px; }
.landing-stats-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.landing-stat { padding: 0 16px; border-left: 1px solid rgba(201, 162, 39, 0.4); }
.landing-stat strong {
  display: block;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--forest);
}
.landing-stat span {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
}

.landing-pathways { background: var(--cream); padding: 20px 40px 100px; }
.landing-section-heading { max-width: 1280px; margin: 0 auto 48px; text-align: center; }
.landing-h2 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.landing-h2-light { color: #fdf9ee; }
.landing-section-sub {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 14px auto 0;
}
.landing-pathway-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.landing-pathway-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.landing-pathway-card {
  text-align: left;
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.landing-pathway-card:hover {
  box-shadow: 0 20px 45px rgba(59, 46, 87, 0.14);
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(-2px);
}
.landing-pill {
  display: inline-block;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  letter-spacing: 0.09em;

  color: var(--green);
  background: var(--green-light);
  padding: 5px 12px;
  margin-bottom: 18px;
}
.landing-pathway-card h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--ink);
}
.landing-pathway-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.landing-method { background: linear-gradient(160deg, #2e2049, #683499); padding: 90px 40px; }
.landing-method-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.landing-method-step { padding: 0 24px; border-left: 1px solid rgba(201, 162, 39, 0.3); }
.landing-numeral {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 16px;
}
.landing-method-step h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #f0e6d8;
  margin: 0 0 10px;
}
.landing-method-step p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.landing-rooms { position: relative; background: var(--cream); padding: 90px 40px; }
.landing-room-grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
}
.landing-room-cell {
  text-align: left;
  background: var(--paper);
  padding: 26px 22px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  border: 0;
  transition: background 0.15s;
}
.landing-room-cell:hover { background: var(--green-light); }
.landing-room-cell h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.landing-room-cell span {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--green);
}

.landing-tutor { background: var(--cream); padding: 50px 40px 70px; }
.landing-tutor-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.landing-tutor-copy { font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.landing-chat-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #2e2049;
  border: 1px solid rgba(201, 162, 39, 0.4);
  padding: 28px;
  cursor: pointer;
  box-shadow: 0 20px 48px rgba(20, 15, 45, 0.28);
}
.landing-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
.landing-chat-seal {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.8rem;
  color: var(--gold);
}
.landing-chat-header span:last-child {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: #f0e6d8;
}
.landing-chat-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 20px;
}
.landing-chat-input-row { display: flex; gap: 9px; }
.landing-chat-input {
  flex: 1;
  border: 1px solid rgba(201, 162, 39, 0.3);
  padding: 11px 14px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.landing-chat-send {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 11px 18px;
  background: var(--gold);
  color: #241703;
}

/* A closing, personal note on Home — set apart from the marketing sections
   above it: a single narrow letter rather than another wide grid, so it
   reads as a pause, not another pitch. */
.landing-founder-letter { background: var(--cream); padding: 0 40px 110px; }
.landing-founder-letter-card {
  max-width: 660px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px rgba(59, 46, 87, 0.1);
  padding: 60px 64px;
}
.landing-founder-letter-card p.landing-eyebrow {
  text-align: center;
  margin-bottom: 30px;
}
.founder-letter-salutation {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin: 0 0 22px;
}
.landing-founder-letter-card p {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.landing-founder-letter-card p.dropcap::first-letter {
  color: var(--forest);
  font-size: 3.4rem;
  line-height: 0.75;
  margin: 0.04em 0.07em 0 0;
}
.founder-letter-close {
  font-style: italic;
  color: var(--forest) !important;
  margin-bottom: 0 !important;
}
.founder-letter-signoff {
  margin: 30px 0 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--forest);
  text-align: right;
}
@media (max-width: 620px) {
  .landing-founder-letter-card { padding: 42px 28px; }
  .landing-founder-letter-card p.dropcap::first-letter { font-size: 2.6rem; }
}

@media (max-width: 900px) {
  .landing-hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .landing-hero-tree { order: -1; min-height: 320px; }
  .landing-hero-tree-inner { width: 100%; margin-right: 0; }
  .landing-stats-grid, .landing-pathway-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-method-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .landing-method-step { border-left: 0; padding: 0; }
  .landing-room-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-tutor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .landing-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-pathway-grid, .landing-room-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TOPBAR SCROLL STATE — on Home only, the bar reads as part of the dark
   hero (marble-white text) at the very top of the page, then becomes the
   site's normal solid marble bar once scrolled past the hero. The topbar is
   position: sticky (occupies normal flow, not overlapping the hero below
   it), so a literal transparent background would just reveal the plain
   marble page background above the hero rather than the hero itself —
   instead this matches the hero's own dark tone directly, so the two read
   as one continuous purple surface until the scroll boundary. Placed last
   so it wins over every earlier .topbar/.brand-copy/.desktop-nav rule.
   ========================================================================== */
.topbar {
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.topbar.topbar-transparent {
  /* Same gradient + gold ruled-column texture + fixed attachment as
     .landing-hero directly below it, so the two elements read as one
     continuous surface, not a seam. */
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(201, 162, 39, 0.08) 118px 120px),
    radial-gradient(circle at 20% 15%, #7440a8, #2e2049 62%) !important;
  background-attachment: fixed, fixed !important;
  backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.topbar-transparent .brand-motto { color: var(--gold-light) !important; }
.topbar-transparent .desktop-nav > button,
.topbar-transparent .desktop-nav > .nav-item > button {
  color: #fdf9ee !important;
}
.topbar-transparent .desktop-nav > button:hover,
.topbar-transparent .desktop-nav > button.active,
.topbar-transparent .desktop-nav > .nav-item > button:hover,
.topbar-transparent .desktop-nav > .nav-item > button.active {
  color: var(--gold-light) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   KNOWLEDGE MAP — redesigned to match the design handoff: a dark hero with
   a conic-gradient discourse-score gauge, a simple breadth-across-rooms bar
   grid, and two plain lists (bridges, recent visits) rather than the
   earlier network diagram and topic heat-map, which duplicated what the
   Progress page already shows in more useful, topic-level detail.
   ========================================================================== */
.knowledge-hero {
  background: linear-gradient(160deg, #2e2049, #683499);
  padding: 60px 40px 48px;
}
.knowledge-hero-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 50px;
  align-items: center;
}
.knowledge-hero-h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: #fdf9ee;
  margin: 0 0 16px;
}
.knowledge-hero-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0;
}
.knowledge-gauge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.knowledge-gauge {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.knowledge-gauge-inner {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #2e2049;
  border: 1px solid rgba(201, 162, 39, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.knowledge-gauge-inner strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: #fdf9ee;
}
.knowledge-gauge-inner span {
  margin-top: 3px;
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.knowledge-breadth-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px 40px 20px;
}
.knowledge-room-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
  margin-bottom: 50px;
}
.knowledge-room-cell {
  text-align: left;
  background: var(--paper);
  border: 0;
  padding: 22px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s;
}
.knowledge-room-cell:hover { background: var(--green-light); }
.knowledge-room-cell > span {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--ink);
}
.knowledge-room-bar {
  height: 5px;
  background: var(--paper-deep);
  margin: 14px 0 8px;
}
.knowledge-room-bar > i {
  display: block;
  height: 100%;
  background: var(--green);
}
.knowledge-room-cell small {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--green);
}

.knowledge-lists-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 20px;
}
.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--line);
}
.knowledge-list-row {
  background: var(--paper);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
}
.knowledge-list-row span:first-child,
.knowledge-list-row span:nth-child(3) {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  color: var(--ink);
}
.knowledge-list-row i { color: var(--gold); font-style: normal; }
.knowledge-list-row small { margin-left: auto; color: var(--ink-faint); font-style: italic; }
.knowledge-list-row-spread {
  justify-content: space-between;
}
.knowledge-list .muted {
  padding: 15px 18px;
  background: var(--paper);
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.knowledge-disclaimer-strip {
  background: var(--forest);
  padding: 20px 40px 60px;
}
.knowledge-disclaimer-strip p {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .knowledge-hero-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .knowledge-hero-lede { margin-inline: auto; }
  .knowledge-room-grid { grid-template-columns: repeat(2, 1fr); }
  .knowledge-lists-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DEBATE ROOM — redesigned as one continuous dark purple chamber (hero,
   chat and principles all share the same background, like the handoff),
   rather than a photographic hero over a light chat panel. The saved-chat
   sidebar is real functionality the handoff's single-thread mockup doesn't
   show, so it's kept and re-themed rather than dropped.
   ========================================================================== */
.debate-page {
  background: linear-gradient(160deg, #2e2049, #683499);
  margin: 0 calc(50% - 50vw);
  padding: 60px calc(50vw - 50% + 40px) 90px;
}
.debate-hero-v2 {
  max-width: 900px;
  margin: 0 auto 44px;
  text-align: center;
}
.debate-hero-v2 h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  color: #fdf9ee;
  margin: 0 0 16px;
}
.debate-hero-v2 p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin: 0 auto;
}

.debate-shell {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(18, 8, 38, 0.22);
}

/* The sidebar and the chat room share this one bordered shell — no gap
   between them — so collapsing the sidebar (width transition) reads as
   the chat room reclaiming that space, not two separate floating boxes. */
.debate-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--cream);
  border-right: 1px solid var(--line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: width 0.22s ease, padding 0.22s ease;
}
.debate-shell.sidebar-collapsed .debate-sidebar { width: 64px; padding: 16px 10px; }
.debate-shell.sidebar-collapsed .debate-chat-list { display: none; }
.debate-shell.sidebar-collapsed .debate-sidebar-label { display: none; }

.debate-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;

  cursor: pointer;
}
.debate-sidebar-toggle:hover { border-color: var(--forest); color: var(--forest); }
.debate-sidebar-toggle-icon { font-size: 0.85rem; line-height: 1; }

.debate-sidebar .button.primary.wide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, #c9a227, #e0bd54, #c9a227);
  color: #241703;
  border: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.debate-sidebar-icon { font-size: 0.95rem; line-height: 1; }
.debate-chat-list { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
.debate-chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
}
.debate-chat-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debate-chat-item:hover { background: var(--paper); }
.debate-chat-item.active {
  background: var(--paper);
  border-left-color: var(--forest);
  color: var(--forest);
}
.debate-chat-delete { opacity: 0.55; font-size: 0.72rem; padding: 2px 5px; color: inherit; }
.debate-chat-delete:hover { opacity: 1; background: rgba(185, 95, 87, 0.18); }
.debate-empty-note { margin: 0; color: var(--ink-faint); font-size: 0.8rem; }

.debate-room {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.debate-room-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.debate-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.debate-room-header strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-weight: 400;
}
.debate-room-tagline {
  margin-left: auto;
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-faint);
  white-space: nowrap;
}
.debate-reset-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.76rem;
  padding: 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.debate-reset-btn:hover { border-color: var(--forest); color: var(--forest); }

.debate-room .chat-history { background: transparent; color: var(--ink); max-height: 420px; }
.debate-room .chat-bubble { border: 1px solid transparent; }
.debate-room .ai-bubble {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: var(--line);
}
.debate-room .user-bubble {
  background: linear-gradient(100deg, #c9a227, #e0bd54, #c9a227);
  color: #241703;
  border-color: transparent;
  margin-left: auto;
}
.debate-room .chat-input-area {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 20px 24px;
}
.debate-room #debate-input {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
}
.debate-room #debate-input::placeholder { color: var(--ink-faint); }
.debate-room #debate-input:focus { border-color: var(--forest); }
.debate-room .upload-btn {
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
}
.debate-room .upload-btn:hover { border-color: var(--forest); color: var(--forest); }
.debate-send-btn {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 13px 24px;
  background: var(--gold);
  color: #241703;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.debate-send-btn:hover { filter: brightness(1.07); }
.debate-send-btn:disabled { opacity: 0.6; cursor: wait; }

.debate-principles {
  max-width: 1100px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.debate-principles > div {
  border-left: 1px solid rgba(201, 162, 39, 0.3);
  padding-left: 18px;
}
.debate-principles h4 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;

  color: var(--gold);
  margin: 0 0 10px;
}
.debate-principles p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

@media (max-width: 760px) {
  .debate-shell { flex-direction: column; }
  .debate-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); max-height: 260px; }
  .debate-shell.sidebar-collapsed .debate-sidebar { width: 100%; max-height: 60px; }
  .debate-principles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CULTURE LANDING — redesigned to match the handoff: a two-column room
   grid (numeral + description + count, hover lift) replacing the old
   4-column compact cards, and a Civilisations Atlas teaser panel. The
   per-room lateral subnav stays on the seven individual room pages, but is
   dropped here since this landing page already is the hub it would link to.
   ========================================================================== */
.culture-room-grid-v2 {
  max-width: 1280px;
  margin: 50px auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.culture-room-card-v2 {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.culture-room-card-v2:hover {
  box-shadow: 0 18px 40px rgba(59, 46, 87, 0.12);
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(-2px);
}
.culture-room-numeral {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: var(--gold);
  width: 36px;
  flex-shrink: 0;
}
.culture-room-card-v2 h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}
.culture-room-card-v2 p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}
.culture-room-card-v2 small {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--culture-green);
}

.culture-atlas-teaser {
  background: linear-gradient(160deg, #2e2049, #683499);
  padding: 70px 40px;
}
.culture-atlas-teaser-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.culture-atlas-teaser-grid h2 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: #fdf9ee;
  margin: 0 0 14px;
}
.culture-atlas-teaser-grid > div:first-child > p:last-child {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.culture-atlas-teaser-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 39, 0.35);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.culture-atlas-teaser-panel:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--gold);
}
.culture-atlas-teaser-panel span {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-align: center;
  padding: 0 20px;
}

@media (max-width: 900px) {
  .culture-room-grid-v2 { grid-template-columns: 1fr; }
  .culture-atlas-teaser-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SUBJECTS — redesigned to match the handoff: level route-tabs replace the
   board/level/subject filter form (every course already has a unique
   level+subject combination, so board filtering added no real
   disambiguation), and each course card gets a conic-gradient aptitude
   ring plus a per-topic heat strip instead of a plain stat row.
   ========================================================================== */
.subjects-hero-v2 {
  background: linear-gradient(160deg, #2e2049, #683499);
  padding: 56px 40px 48px;
}
.subjects-hero-v2 {
  display: block;
}
.subjects-hero-v2 > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.subjects-hero-v2 p.landing-eyebrow { margin-bottom: 16px; }
.subjects-hero-v2 h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  color: #fdf9ee;
  margin: 0 0 16px;
}
.subjects-hero-v2 > p:last-child {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0;
}

.subjects-route-tabs { padding: 40px 40px 0; }
.subjects-route-tabs-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.subjects-route-tabs-row > button {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  letter-spacing: 0.04em;

  padding: 11px 20px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
}
.subjects-route-tabs-row > button.active {
  background: var(--forest);
  color: #fdf9ee;
  border-color: var(--forest);
}
.subjects-aptitude-legend { margin-left: auto; }

.subjects-board-filter-row {
  max-width: 1280px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.subjects-board-filter-label {
  margin-right: 4px;
  color: var(--ink-faint);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.subjects-board-filter-row > button {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.subjects-board-filter-row > button.active {
  background: var(--forest);
  color: #fdf9ee;
  border-color: var(--forest);
}

.subjects-empty-state {
  max-width: 1280px;
  margin: 24px auto 0;
}

.subjects-category-block + .subjects-category-block {
  margin-top: 8px;
}
.subjects-category-heading {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 0 40px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-3);
}
.subjects-category-block:first-child .subjects-category-heading {
  margin-top: 24px;
}

.subjects-course-grid-v2 {
  max-width: 1280px;
  margin: 16px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.subjects-course-card-v2 {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.subjects-course-card-v2:hover {
  box-shadow: 0 18px 40px rgba(59, 46, 87, 0.12);
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(-2px);
}
.subjects-course-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.subjects-route-pill {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;

  color: var(--green);
  background: var(--green-light);
  padding: 5px 11px;
}
.subjects-course-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.subjects-course-ring span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  color: var(--ink-soft);
}
.subjects-course-card-link {
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.subjects-course-card-link h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}
.subjects-course-card-link:hover h3 { color: var(--forest); }
.subjects-course-card-link p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0;
}
.subjects-heat-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.subjects-heat-strip span { width: 13px; height: 13px; display: inline-block; }
.subjects-course-toggle {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.74rem;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.subjects-course-toggle.selected {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-light);
}
.subjects-course-toggle:hover { border-color: var(--forest); color: var(--forest); }

.subjects-method {
  margin-top: 60px;
  background: var(--forest);
  padding: 70px 40px;
}
.subjects-method-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.subjects-method-inner p.landing-eyebrow { justify-content: center; }
.subjects-method-inner h2 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  color: #fdf9ee;
  margin: 0 0 40px;
}
.subjects-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: left;
}
.subjects-method-grid > div {
  border-left: 1px solid rgba(201, 162, 39, 0.3);
  padding-left: 16px;
}
.subjects-method-grid p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

@media (max-width: 900px) {
  .subjects-course-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .subjects-method-grid { grid-template-columns: repeat(2, 1fr); }
  .subjects-aptitude-legend { margin-left: 0; width: 100%; }
}
@media (max-width: 620px) {
  .subjects-course-grid-v2 { grid-template-columns: 1fr; }
  .subjects-method-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LIBRARY — redesigned to match the handoff: a dark hero with an inline
   search bar, subject-family filter pills (replacing the old select
   dropdowns), and restyled essay cards with a computed reading time and
   source count. The learning-science-notes section stays, unstyled by the
   handoff but genuine content with nowhere else to live.
   ========================================================================== */
.library-hero-v2 {
  background: linear-gradient(160deg, #2e2049, #683499);
  padding: 56px 40px 46px;
}
.library-hero-v2 > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.library-hero-v2 p.landing-eyebrow { margin-bottom: 16px; }
.library-hero-v2 h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  color: #fdf9ee;
  margin: 0 0 16px;
}
.library-hero-v2 > p:nth-of-type(2) {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0 0 30px;
}
.library-search-row {
  display: flex;
  gap: 12px;
  max-width: 620px;
}
.library-search-input {
  flex: 1;
  background: #2e2049;
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: #fff;
  padding: 13px 18px;
  font-size: 0.92rem;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
}
.library-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.library-search-input:focus { border-color: var(--gold); outline: none; }
.library-search-btn {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  background: var(--gold);
  color: #241703;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.library-search-btn:hover { filter: brightness(1.07); }

.library-collections {
  max-width: 1280px;
  margin: 34px auto 0;
  padding: 0 40px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.library-collections > button {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;

  padding: 9px 16px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
}
.library-collections > button.active {
  background: var(--forest);
  color: #fdf9ee;
  border-color: var(--forest);
}

.library-grid-v2 {
  max-width: 1280px;
  margin: 26px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.library-card-v2 {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.library-card-v2:hover {
  box-shadow: 0 18px 40px rgba(59, 46, 87, 0.12);
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(-2px);
}
.library-card-v2-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.library-card-tag {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  letter-spacing: 0.07em;

  color: var(--green);
  background: var(--green-light);
  padding: 5px 11px;
}
.library-card-v2-link {
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 1;
}
.library-card-v2-link h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--ink);
}
.library-card-v2-link:hover h3 { color: var(--forest); }
.library-card-v2-link p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.library-card-v2-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--paper-deep);
}
.library-card-v2-footer small {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-faint);
}
.library-card-v2-footer span {
  font-size: 0.72rem;
  color: var(--green);
}

@media (max-width: 900px) {
  .library-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .library-search-row { flex-direction: column; max-width: none; }
}
@media (max-width: 620px) {
  .library-grid-v2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SUBJECT PROGRESS — redesigned to match the handoff: a dark hero, a
   sub-tab switch pulled up over its lower edge, a stats strip, twin
   conic-gradient donuts plus a streak card, a 14-day activity bar chart,
   a subject-coverage/weak-topics row, the existing topic-by-topic table,
   and a review-history/forecast row.
   ========================================================================== */
.progress-hero-v2 {
  background: linear-gradient(160deg, #2e2049, #683499);
  padding: 56px 40px 68px;
}
.progress-hero-v2 > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.progress-hero-v2 p.landing-eyebrow { margin-bottom: 16px; }
.progress-hero-v2 h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  color: #fdf9ee;
  margin: 0 0 16px;
}
.progress-hero-v2 > p:last-child {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 640px;
  margin: 0;
}

.progress-stats-strip {
  max-width: 1280px;
  margin: 34px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.progress-stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px rgba(59, 46, 87, 0.08);
  padding: 22px 24px;
  text-align: left;
  cursor: default;
}
.progress-stat-card strong {
  display: block;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--forest);
}
.progress-stat-card span {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 6px;
}
.progress-stat-cta {
  cursor: pointer;
  border-color: rgba(201, 162, 39, 0.4);
  transition: box-shadow 0.2s, transform 0.2s;
}
.progress-stat-cta:hover { box-shadow: 0 18px 36px rgba(201, 162, 39, 0.2); transform: translateY(-2px); }

.progress-analytics-row {
  max-width: 1280px;
  margin: 36px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.progress-donut-panel,
.progress-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
}
.progress-panel-eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: var(--green);
  margin: 0 0 20px;
}
.progress-panel-eyebrow-warn { color: var(--chart-fragile); }
.progress-panel-eyebrow-gold { color: var(--gold-light); }

.progress-donut-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.progress-donut {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.progress-donut > span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.progress-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-donut-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.progress-decay-note {
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.progress-streak-card {
  background: #2e2049;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.progress-streak-card strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 2.9rem;
  font-weight: 400;
  color: var(--gold-light);
  line-height: 1;
}
.progress-streak-label {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;

  color: #ebe2fa;
  margin: 10px 0 4px;
}
.progress-streak-longest {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(217, 207, 242, 0.75);
  margin: 0;
}

.progress-activity-panel {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 40px;
}
.progress-activity-panel > .progress-panel-eyebrow,
.progress-activity-panel > div { background: var(--paper); }
.progress-activity-panel {
  display: block;
}
.progress-activity-panel .progress-panel-eyebrow { padding: 28px 28px 0; margin-bottom: 20px; background: var(--paper); border: 1px solid var(--line); border-bottom: none; }
.progress-activity-bars {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  padding: 0 28px 28px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 130px;
}
.progress-activity-bars > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}
.progress-activity-bar {
  display: block;
  width: 100%;
  background: var(--green);
  min-height: 3px;
}
.progress-activity-bars small {
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.horizontal-bar-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  padding: 20px 28px 28px;
}

.progress-two-col-row {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}
.progress-history-forecast-row { grid-template-columns: 1.4fr 1fr; }

.progress-coverage-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.progress-coverage-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.progress-coverage-row-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  margin-bottom: 6px;
}
.progress-coverage-row-top b { font-family: "Cinzel", Georgia, "Times New Roman", serif; font-weight: 400; color: var(--ink); }
.progress-coverage-row-top em { font-style: normal; color: var(--ink-faint); }
.progress-coverage-track {
  display: block;
  height: 7px;
  background: var(--paper-deep);
}
.progress-coverage-track > b {
  display: block;
  height: 100%;
  background: var(--green);
}
.progress-coverage-row.active .progress-coverage-row-top b { color: var(--forest); }
.progress-coverage-row.active .progress-coverage-track { box-shadow: 0 0 0 1px var(--forest); }

.progress-weak-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress-weak-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--paper-deep);
  padding: 0 0 12px;
  text-align: left;
  cursor: pointer;
}
.progress-weak-row:last-child { border-bottom: none; }
.progress-weak-row span { display: block; }
.progress-weak-row b { font-weight: 400; font-size: 0.9rem; color: var(--ink); }
.progress-weak-row small { display: block; font-size: 0.74rem; font-style: italic; color: var(--ink-faint); margin-top: 2px; }
.progress-weak-row i { flex-shrink: 0; }

.progress-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper-deep);
}
.progress-history-row {
  background: var(--paper);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.88rem;
}
.progress-history-row i { flex-shrink: 0; }
.progress-history-row span { flex: 1; color: var(--ink); }
.progress-history-row b {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;

  color: var(--ink-soft);
  flex-shrink: 0;
}
.progress-history-row em {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.progress-forecast-panel {
  background: #2e2049;
  border: 1px solid rgba(240, 223, 160, 0.25);
  padding: 28px;
}
.progress-forecast-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.progress-forecast-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress-forecast-day {
  font-size: 0.8rem;
  color: rgba(217, 207, 242, 0.85);
  width: 44px;
  flex-shrink: 0;
}
.progress-forecast-track {
  display: block;
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.progress-forecast-track > b {
  display: block;
  height: 100%;
  background: var(--gold-light);
}
.progress-forecast-n {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: 0.78rem;
  color: #fdf9ee;
  width: 26px;
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .progress-analytics-row { grid-template-columns: 1fr; }
  .progress-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .progress-two-col-row,
  .progress-history-forecast-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .progress-stats-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OXBRIDGE ADMISSIONS ADVICE — the Subjects page's replacement for the old
   University pathways tab: a test switcher plus a single detail panel,
   matching the "select one, read its detail" pattern already used for
   Progress subjects and Civilisations Atlas zones.
   ========================================================================== */
.oxbridge-intro {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 40px;
}
.oxbridge-intro h2 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  color: var(--ink);
  margin: 6px 0 12px;
}
.oxbridge-intro p:last-child {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0;
}

.oxbridge-test-tabs {
  max-width: 1280px;
  margin: 28px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.oxbridge-test-tabs button {
  display: grid;
  gap: 3px;
  padding: 12px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
}
.oxbridge-test-tabs button span {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}
.oxbridge-test-tabs button small {
  font-size: 0.66rem;
  font-style: italic;
  color: var(--ink-faint);
}
.oxbridge-test-tabs button.active {
  background: var(--forest);
  border-color: var(--forest);
}
.oxbridge-test-tabs button.active span,
.oxbridge-test-tabs button.active small {
  color: #fff;
}

.oxbridge-test-detail {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 40px 60px;
}
.oxbridge-test-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.oxbridge-test-university {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--green);
  margin: 0 0 10px;
}
.oxbridge-test-header h2 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
}
.oxbridge-test-short {
  font-size: 0.9rem;
  color: var(--ink-faint);
  font-style: italic;
}
.oxbridge-tagline {
  font-size: 1rem;
  font-style: italic;
  color: var(--forest);
  margin: 0;
}
.oxbridge-test-meta span {
  display: inline-block;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

.oxbridge-course-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.oxbridge-course-pills span {
  font-size: 0.78rem;
  padding: 6px 12px;
  background: var(--green-light);
  color: var(--green);
}

.oxbridge-volatility-note {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  margin-bottom: 28px;
}
.oxbridge-volatility-note strong {
  font-weight: 400;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;

  color: var(--gold-deep, #8a6729);
  margin-right: 4px;
}

.oxbridge-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 32px;
}
.oxbridge-detail-grid .eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: var(--green);
  margin: 0 0 14px;
}
.oxbridge-detail-grid .editorial-bullets,
.oxbridge-detail-grid .numbered-editorial-bullets {
  font-size: 0.88rem;
  line-height: 1.55;
}

.oxbridge-sources {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.oxbridge-sources .eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: var(--green);
  margin: 0 0 14px;
}

.oxbridge-deeper-notes,
.oxbridge-practice-questions,
.oxbridge-further-resources {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 32px;
}
.oxbridge-deeper-notes .eyebrow,
.oxbridge-practice-questions .eyebrow,
.oxbridge-further-resources .eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: var(--green);
  margin: 0 0 18px;
}

.oxbridge-deeper-note + .oxbridge-deeper-note {
  margin-top: 22px;
}
.oxbridge-deeper-note h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
}
.oxbridge-deeper-note p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.oxbridge-deeper-note p:last-child { margin-bottom: 0; }

.oxbridge-practice-caveat {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
  margin: 0 0 20px;
}
.oxbridge-practice-question {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 20px 22px;
}
.oxbridge-practice-question + .oxbridge-practice-question {
  margin-top: 18px;
}
.oxbridge-practice-label {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;

  color: var(--forest);
  margin: 0 0 10px;
}
.oxbridge-practice-prompt {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}
.oxbridge-practice-solution {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}
.oxbridge-practice-solution summary {
  cursor: pointer;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--green);
}
.oxbridge-practice-solution-body {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.oxbridge-practice-note {
  margin-top: 12px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
}

.oxbridge-resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.oxbridge-resource-card {
  display: block;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.oxbridge-resource-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.oxbridge-resource-title {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--green);
  margin: 0 0 6px;
}
.oxbridge-resource-type {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--forest);
  margin: 0 0 8px;
}
.oxbridge-resource-note {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 980px) {
  .oxbridge-test-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oxbridge-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .oxbridge-test-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oxbridge-detail-grid { grid-template-columns: 1fr; }
  .oxbridge-resource-list { grid-template-columns: 1fr; }
}

.topic-notes {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(35px, 6vw, 70px) clamp(10px, 3vw, 32px);
}

.topic-notes-section {
  margin-bottom: 12px;
}

.topic-notes-section p {
  margin-bottom: 16px;
}

.topic-diagram {
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
  display: flex;
  justify-content: center;
}

/* Inline glossary term: {{term|explanation}} in prose (see renderGlossText).
   Positioned above the term by default; on terms very near the top of the
   viewport (e.g. inside the notes header) the tooltip can run off-screen —
   a known limit of a pure-CSS tooltip with no JS collision detection. */
.gloss-term {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.gloss-term:hover,
.gloss-term:focus-visible {
  color: var(--forest);
}

.gloss-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow-small);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.gloss-term:hover .gloss-tooltip,
.gloss-term:focus .gloss-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.topic-diagram svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.topic-notes-essays {
  margin-top: 44px;
}

.essay-annotation-legend {
  display: flex;
  gap: 20px;
  margin: 12px 0 20px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.essay-annotation-legend-item.is-strength { color: var(--green); }
.essay-annotation-legend-item.is-improve { color: var(--amber); }

.essay-example-card {
  margin-top: 20px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.essay-example-card header h3 {
  margin: 0 0 4px;
}

.essay-example-prompt {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.essay-example-text p {
  margin-bottom: 16px;
  color: var(--ink-soft);
}

/* Example-essay annotations: [[s|phrase|note]] / [[i|phrase|note]] in prose
   (see renderAnnotatedEssay). Reuses .gloss-tooltip's hover/tap mechanics
   with a colour-coded arrow marker instead of a dotted underline. */
.essay-annotation {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--green);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: help;
}

.essay-annotation.is-improve {
  border-bottom-color: var(--amber);
}

.essay-annotation:hover,
.essay-annotation:focus-visible {
  color: var(--forest);
}

.essay-annotation-mark {
  margin-right: 1px;
  font-weight: 600;
  color: var(--green);
}

.essay-annotation.is-improve .essay-annotation-mark {
  color: var(--amber);
}

.essay-annotation:hover .gloss-tooltip,
.essay-annotation:focus .gloss-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.notes-block {
  margin: 0 0 18px;
}
.notes-block:last-child {
  margin-bottom: 0;
}
.notes-block-label {
  display: block;
  margin: 0 0 9px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--green);
}
.notes-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notes-steps {
  margin: 0;
  padding-left: 22px;
}
.notes-bullets li,
.notes-steps li {
  margin-bottom: 12px;
  line-height: 1.65;
}
.notes-bullets li:last-child,
.notes-steps li:last-child {
  margin-bottom: 0;
}
.notes-block.is-definition {
  padding: 14px 18px;
  border-left: 3px solid var(--green);
  background: rgba(76, 44, 114, 0.035);
}
.notes-block.is-definition .notes-block-label {
  color: var(--green);
}
.notes-block.is-result {
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: rgba(201, 162, 39, 0.06);
}
.notes-block.is-result .notes-block-label {
  color: var(--gold);
}
.notes-block.is-method .notes-block-label,
.notes-block.is-remarks .notes-block-label {
  color: var(--ink-faint);
}

.topic-notes-applications {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.topic-notes-applications .eyebrow {
  margin-bottom: 18px;
}
.topic-applications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-applications-list li {
  margin-bottom: 12px;
  line-height: 1.65;
}
.topic-applications-list li:last-child {
  margin-bottom: 0;
}

.topic-notes-equations {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.topic-notes-equations .eyebrow {
  margin-bottom: 18px;
}

.topic-equations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.topic-equation-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 0px;
  background: rgba(251, 249, 243, 0.84);
}

.topic-equation-label {
  display: block;
  margin-bottom: 10px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;

  color: var(--green);
}

.topic-equation-card strong {
  display: block;
  font-weight: 400;
  overflow-x: auto;
}

.topic-quotation-text {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.5;
  white-space: normal;
}

.topic-quotation-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.landing-my-subjects { background: var(--cream); padding: 90px 40px 20px; }

.landing-my-subjects-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.landing-subject-card {
  position: relative;
  text-align: left;
  padding: 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--grey);
}

.landing-subject-card.aptitude-fragile { border-top-color: var(--red); }
.landing-subject-card.aptitude-developing { border-top-color: var(--amber); }
.landing-subject-card.aptitude-secure { border-top-color: var(--green); }
.landing-subject-card.aptitude-strong { border-top-color: var(--blue); }

.landing-subject-remove {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--line);
}

.landing-subject-remove:hover {
  color: var(--red);
  border-color: var(--red);
}

.landing-subject-card h3 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
  padding-right: 24px;
}

.landing-subject-card > p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.landing-subject-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-subject-add {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  background: transparent;
}

.landing-subject-add:hover {
  border-color: rgba(201, 162, 39, 0.55);
  color: var(--ink);
}

@media (max-width: 620px) {
  .landing-my-subjects { padding: 60px 20px 10px; }
  .landing-my-subjects-grid { grid-template-columns: 1fr; }
}

.briefing-modal {
  width: min(620px, calc(100% - 30px));
  max-height: min(720px, calc(100% - 60px));
}

.briefing-modal-card {
  position: relative;
  max-height: min(720px, calc(100vh - 60px));
  overflow-y: auto;
  border-left: 4px solid var(--forest);
  padding: 44px 48px 40px;
}

.briefing-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.briefing-modal-close:hover {
  border-color: var(--forest-3);
  color: var(--forest);
}

.briefing-reopen-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 40px 0;
  padding: 10px 18px;
  border: 1px solid rgba(240, 223, 160, 0.45);
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.18), rgba(255, 255, 255, 0.05));
  color: var(--gold-light);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.briefing-reopen-chip:hover {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.3), rgba(255, 255, 255, 0.08));
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.briefing-reopen-chip .icon {
  width: 15px;
  height: 15px;
}

.daily-briefing-text p {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 16px;
}

.daily-briefing-text p:first-child {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--forest);
}

.daily-briefing-text p:last-child {
  margin-bottom: 0;
}

.daily-briefing-recommended {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.daily-briefing-recommended .eyebrow {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;

  color: var(--green);
  margin: 0 0 14px;
}

.daily-briefing-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.daily-briefing-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: rgba(251, 249, 243, 0.84);
  text-align: left;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  color: var(--ink);
}

.daily-briefing-action:hover {
  border-color: rgba(201, 162, 39, 0.55);
  background: var(--paper);
}

.daily-briefing-minutes {
  flex-shrink: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--green);
  min-width: 48px;
}

.daily-briefing-explore {
  background: transparent;
  border: none;
  padding: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.daily-briefing-explore:hover {
  color: var(--forest);
}

@media (max-width: 620px) {
  .briefing-modal-card { padding: 38px 24px 28px; }
  .briefing-reopen-chip { margin: 4px 20px 0; }
}

.insight-notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.insight-note-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--grey);
  background: rgba(251, 249, 243, 0.9);
  box-shadow: var(--shadow-small);
}

.insight-note-card.evidence-weak { border-left-color: var(--red); }
.insight-note-card.evidence-partial { border-left-color: var(--amber); }
.insight-note-card.evidence-strong { border-left-color: var(--green); }

.insight-note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.insight-note-topic {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;

  color: var(--forest);
}

.insight-note-evidence {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.66rem;
  letter-spacing: 0.04em;

  color: var(--ink-faint);
}

.insight-note-concept {
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.45;
}

.insight-note-detail {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}

.insight-note-meta {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-faint);
  margin: 0;
}

.topic-notes-examples {
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.topic-notes-examples .eyebrow {
  margin-bottom: 18px;
}

.topic-examples-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.topic-example-card {
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  background: rgba(251, 249, 243, 0.84);
}

.topic-example-label {
  margin: 0 0 12px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;

  color: var(--gold);
}

.topic-example-problem {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}

.topic-example-problem .exam-line { margin: 0 0 8px; }
.topic-example-problem .exam-line:last-child { margin-bottom: 0; }

.topic-example-solution {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.topic-example-solution summary {
  cursor: pointer;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--green);
}

.topic-example-solution[open] summary {
  margin-bottom: 12px;
}

.topic-example-solution .exam-line { margin: 0 0 10px; }
.topic-example-solution .exam-line:last-child { margin-bottom: 0; }
.topic-example-solution .exam-equation { color: var(--ink); margin: 12px 0; }

/* =========================================
   Assessment / entitlement / teacher-submission architecture
   ========================================= */

/* Browse mode — deliberately quiet, unobtrusive styling: this is the
   "I just want to look" mode, so nothing should compete visually with the
   confidence panel's weight. */
.browse-mode-badge {
  padding: 4px 10px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  letter-spacing: 0.05em;

}

.browse-panel {
  text-align: center;
}

.browse-mode-note {
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-style: italic;
}

.browse-next-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--cream);
}

.browse-next-panel .browse-mode-note {
  margin: 0;
}

/* Skip */
.skip-button {
  display: block;
  margin: 14px auto 0;
  color: rgba(248, 242, 231, 0.75);
}

/* Deterministic result / AI-marking extras (confidence, method,
   misconceptions) and the quota-exhausted upsell — all modifiers on the
   existing .demo-marking-panel rather than a parallel component. */
.demo-marking-panel.deterministic-result {
  border-left-color: var(--green);
}

.demo-marking-panel.deterministic-result .eyebrow {
  color: var(--green);
}

.demo-marking-panel.ai-upsell {
  border-left-color: var(--ink-faint);
}

.demo-method {
  color: var(--ink-soft);
}

.demo-misconceptions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.demo-misconceptions ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.demo-misconceptions li {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.demo-low-confidence {
  color: var(--chart-hard);
  font-size: 0.82rem;
  font-style: italic;
}

/* Send to teacher — entry button on the question screen */
.teacher-send-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

.teacher-send-entry p {
  margin: 0;
  color: var(--ink-soft);
}

/* Debate upsell */
.debate-upsell {
  max-width: 720px;
  margin: 32px auto;
  text-align: center;
}

.debate-upsell .eyebrow {
  color: var(--gold);
}

.debate-upsell p {
  color: var(--ink-soft);
  line-height: 1.65;
}

.debate-upsell .button {
  margin-top: 14px;
}

/* Plan (preview) panel */
.plan-panel .plan-preview-note {
  margin: 6px 0 18px;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-style: italic;
}

.plan-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.plan-form select {
  flex: 1;
}

.plan-usage {
  display: grid;
  gap: 0;
  margin: 0;
}

.plan-usage div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.plan-usage dt {
  color: var(--ink-soft);
}

.plan-usage dd {
  margin: 0;
  font-weight: 700;
}

/* Teacher contacts */
.teacher-contacts-section p {
  color: var(--ink-soft);
  max-width: 720px;
}

.teacher-contact-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 26px;
}

.teacher-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--shadow-small);
}

.teacher-contact-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.teacher-contact-card strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
}

.teacher-contact-subject {
  padding: 2px 9px;
  background: var(--green-light, var(--cream));
  color: var(--green);
  font-size: 0.72rem;
}

.teacher-contact-email {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.teacher-empty-note {
  color: var(--ink-faint);
  font-style: italic;
}

.teacher-contact-form {
  max-width: 560px;
  margin: 0;
}

/* Submission history */
.teacher-history-list {
  display: grid;
  gap: 8px;
}

.teacher-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  background: rgba(255, 255, 255, 0.54);
}

.teacher-history-row.status-sent {
  border-left-color: var(--green);
}

.teacher-history-row.status-failed {
  border-left-color: var(--chart-again);
}

.teacher-history-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.teacher-history-row strong {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}

.teacher-history-row span {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.teacher-history-meta {
  color: var(--ink-faint) !important;
  font-size: 0.76rem !important;
}

.teacher-history-status {
  flex-shrink: 0;
  padding: 4px 10px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  letter-spacing: 0.04em;

  color: var(--ink-soft);
}

/* Send-to-teacher composer screen */
.teacher-send-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.teacher-send-form {
  max-width: 100%;
  margin: 24px 0 0;
}

.teacher-send-preview {
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--cream);
}

.teacher-send-preview dl {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
}

.teacher-send-preview dl div {
  display: flex;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.teacher-send-preview dt {
  flex-shrink: 0;
  width: 140px;
  color: var(--ink-soft);
}

.teacher-send-preview dd {
  margin: 0;
}

.teacher-send-consent-note {
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-style: italic;
}

.teacher-send-empty {
  max-width: 560px;
  margin: 24px 0;
  text-align: center;
}

.teacher-send-empty .button {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .teacher-contact-card,
  .teacher-history-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .teacher-send-preview dt {
    width: auto;
  }
}

/* ==========================================================================
   User guide — one comprehensive reference page, reachable from Home.
   ========================================================================== */
.landing-hero-guide-prompt {
  margin: 18px 0 0;
  color: var(--ink-soft);
}

.guide-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.guide-method-grid h3 {
  margin: 4px 0 8px;
  font-size: 1.15rem;
}

.guide-tier-section > p {
  max-width: 860px;
  margin-bottom: 26px;
}

.guide-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.guide-tier-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 249, 243, 0.84);
  box-shadow: var(--shadow-small);
}

.guide-tier-card h3 {
  margin: 4px 0 16px;
  font-size: 1.3rem;
}

.guide-tier-card-scholar {
  border-color: var(--gold);
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.08), rgba(251, 249, 243, 0.9));
}

.guide-tier-card-scholar .eyebrow {
  color: var(--gold);
}

.guide-tier-note {
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: 0.88rem;
}

.guide-closing-ctas {
  justify-content: center;
  margin: 64px 0 8px;
}

@media (max-width: 820px) {
  .guide-method-grid,
  .guide-tier-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Intellectual timeline, character/theme webs and critical theory —
   the shared apparatus behind the deeper English Literature texts and the
   Library's chronological view across Philosophy, Literature, History of
   Science and Intellectual Profiles.
   ========================================================================== */
/* A deliberately quiet, single-line entry point — the full-width gradient
   banner this used to be competed too hard with the subject tabs and essay
   grid it sat between; this reads as a small aside instead. */
.library-timeline-tab {
  margin: 0 0 18px;
}
.library-timeline-tab button {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 0.15s, color 0.15s;
}
.library-timeline-tab button:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.library-timeline-tab button span {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 700;
}
.library-timeline-tab button small {
  color: var(--ink-faint);
  font-size: 0.76rem;
}

.timeline-body {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 0 40px 60px;
}

.timeline-era {
  margin-bottom: 44px;
}

.timeline-era-label {
  position: sticky;
  top: 84px;
  z-index: 5;
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: var(--forest);
  color: #fff;
  font-size: 1.15rem;
}

.timeline-era-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.timeline-entry {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest-3);
  background: var(--paper);
  text-align: left;
  box-shadow: var(--shadow-small);
}

.timeline-entry:hover {
  border-left-color: var(--gold);
}

.timeline-entry time {
  color: var(--forest-2);
  font-size: 0.72rem;
  font-weight: 700;
}

.timeline-entry strong {
  font-size: 1.02rem;
}

.timeline-entry-kicker {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.timeline-entry p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.timeline-entry-question {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
}

@media (max-width: 620px) {
  .timeline-body { padding: 0 20px 40px; }
  .timeline-era-label { position: static; }
}

/* Music Room: the timeline and the theory primer both open collapsed (see
   musicRoomView in app.js) so the room reads compactly on arrival — the
   guide index and detail panel are the room's main content and shouldn't
   sit below a scroll-and-a-half of preamble. Both share this toggle-header
   + chevron pattern; .section-heading is a <button> here rather than a
   <div>, so button chrome needs resetting before its flex layout applies. */
.music-timeline-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.music-timeline-toggle-meta {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-size: 0.82rem;
  white-space: nowrap;
}
.music-timeline-chevron {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  color: var(--culture-green);
}

/* Compact timeline entries: a single dense line (year / composer / work)
   rather than the full card-with-summary style the standalone Intellectual
   Timeline page uses — with 35 recordings across ~28 eras, that card style
   made this section by far the tallest thing on the page. */
.music-timeline-body {
  margin-top: 18px;
}
.music-timeline-era {
  margin-bottom: 20px;
}
.music-timeline-era-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  background: var(--culture-green);
  color: #fff;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
}
.music-timeline-era-track {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.music-timeline-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--culture-green-light);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font-size: 0.82rem;
}
.music-timeline-entry:hover,
.music-timeline-entry.selected {
  border-left-color: var(--culture-green);
  background: var(--culture-green-bg);
}
.music-timeline-entry time {
  color: var(--culture-green-deep);
  font-size: 0.72rem;
  font-weight: 700;
}
.music-timeline-entry strong {
  font-weight: 700;
}
.music-timeline-entry span {
  color: var(--ink-faint);
  font-style: italic;
}

/* Character development, quotation and theme webs */
.topic-notes-characters,
.topic-notes-critical-theory {
  margin-top: 44px;
}

.character-web-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.character-web-card {
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-small);
}

.character-web-card header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.character-web-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.character-role {
  color: var(--forest-2);
  font-size: 0.78rem;
}

.character-arc {
  color: var(--ink-soft);
}

.character-quote-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.character-quote-row blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--ink);
}

.character-quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.character-quote-location {
  color: var(--ink-faint);
  font-size: 0.72rem;
}

.character-quote-theme {
  padding: 1px 8px;
  background: var(--green-light);
  color: var(--green);
  font-size: 0.7rem;
}

.character-quote-note {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.critical-theory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.critical-theory-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest-3);
  background: var(--paper);
}

.critical-theory-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--forest);
}

.critical-theory-card p {
  margin: 0;
  color: var(--ink-soft);
}

.topic-bigideas-bridge {
  margin-top: 44px;
}

@media (max-width: 720px) {
  .character-web-grid,
  .critical-theory-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CULTURE ROOMS REDESIGN — clean pass across all eight Culture pages, per a
   set of design mockups for Culture landing, Literature & Philosophy,
   Civilisations Atlas and History of Science. Three decisions this pass is
   built on:
   1. A breadcrumb ("Culture / III · Room name") replaces both the old
      "← Cultural rooms" back-link and the heavy sticky six-button subnav —
      renderCultureNavigation() and its markup were removed entirely.
   2. Every sub-room hero drops its dark photographic background for a flat,
      light hero (h1 + lede only, no repeated eyebrow — the breadcrumb
      already states the room). Only the Culture landing hero keeps its
      photographic treatment, as the section's one "grand entrance".
   3. Culture pages get their own accent colour — a reading-room green,
      var(--culture-green) — as the primary interactive/active colour,
      distinct from the app's signature purple used everywhere else. This
      is scoped through the "culture-page" class toggled onto #app by
      updateChrome() whenever the current route is a Culture room, so nothing
      outside Culture is affected.
   The app-wide swap to Cinzel (headings/labels) + EB Garamond (body) that
   this pass also introduced lives in the font-family replacements near the
   top of this file and in the :root/body rules, not here.
   ========================================================================== */

/* --- Breadcrumb ---------------------------------------------------------- */
.culture-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--ink-faint);
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.culture-breadcrumb button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.culture-breadcrumb button:hover {
  color: var(--culture-green);
}
.culture-breadcrumb .current {
  color: var(--culture-green-deep);
}

/* --- Flat sub-room hero ---------------------------------------------------
   Overrides every *-hero class's dark photographic treatment when the
   culture-room-hero modifier is present. Higher specificity than the
   photo-hero rules earlier in this file because two classes beat one, so no
   !important is needed despite the cascade distance. */
.page-hero.culture-room-hero {
  display: block;
  padding: 6px 0 22px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: none;
  box-shadow: none;
}
.page-hero.culture-room-hero::after,
.page-hero.culture-room-hero::before {
  display: none;
}
.page-hero.culture-room-hero h1 {
  max-width: 640px;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}
.page-hero.culture-room-hero .lede,
.page-hero.culture-room-hero p {
  max-width: 680px;
  color: var(--ink-soft);
}
.page-hero.culture-room-hero .eyebrow {
  color: var(--culture-green-deep);
}
.page-hero.culture-room-hero .text-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--culture-green);
}
.page-hero.culture-room-hero .text-link:hover {
  color: var(--culture-green-deep);
}
.page-hero.culture-room-hero .atlas-era-key {
  margin-top: 18px;
}

/* Three of the flattened hero classes — science-history-hero (History of
   Science + General History), listening-hero (Music Room) and
   intellectual-hero (Lives & Ideas) — carry !important photographic
   background/text-colour rules from an earlier "background imagery" pass
   (see the .home-hero, .library-hero ... selector groups above). Beating
   !important requires !important plus a selector this specific. Gallery,
   Museum, Literature and the Atlas hero were never part of that !important
   block, so they don't need this. */
.page-hero.culture-room-hero.science-history-hero,
.page-hero.culture-room-hero.listening-hero,
.page-hero.culture-room-hero.intellectual-hero {
  background-image: none !important;
  background-position: 50% !important;
  background-size: auto !important;
}
.page-hero.culture-room-hero.science-history-hero h1,
.page-hero.culture-room-hero.science-history-hero h2,
.page-hero.culture-room-hero.science-history-hero p,
.page-hero.culture-room-hero.science-history-hero .eyebrow,
.page-hero.culture-room-hero.science-history-hero .lede,
.page-hero.culture-room-hero.listening-hero h1,
.page-hero.culture-room-hero.listening-hero h2,
.page-hero.culture-room-hero.listening-hero p,
.page-hero.culture-room-hero.listening-hero .eyebrow,
.page-hero.culture-room-hero.listening-hero .lede,
.page-hero.culture-room-hero.intellectual-hero h1,
.page-hero.culture-room-hero.intellectual-hero h2,
.page-hero.culture-room-hero.intellectual-hero p,
.page-hero.culture-room-hero.intellectual-hero .eyebrow,
.page-hero.culture-room-hero.intellectual-hero .lede {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.page-hero.culture-room-hero.science-history-hero h1,
.page-hero.culture-room-hero.listening-hero h1,
.page-hero.culture-room-hero.intellectual-hero h1 {
  color: var(--ink) !important;
}
.page-hero.culture-room-hero.science-history-hero .lede,
.page-hero.culture-room-hero.listening-hero .lede,
.page-hero.culture-room-hero.intellectual-hero .lede {
  color: var(--ink-soft) !important;
}
.page-hero.culture-room-hero.science-history-hero .eyebrow,
.page-hero.culture-room-hero.listening-hero .eyebrow,
.page-hero.culture-room-hero.intellectual-hero .eyebrow {
  color: var(--culture-green-deep) !important;
}
.page-hero.culture-room-hero.science-history-hero .text-link {
  color: var(--culture-green) !important;
}
.page-hero.culture-room-hero.science-history-hero::after,
.page-hero.culture-room-hero.listening-hero::after,
.page-hero.culture-room-hero.intellectual-hero::after {
  content: none !important;
}

/* --- Search row + pill filter row, replacing the boxed multi-field forms - */
.culture-room-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}
.culture-room-search-row .text-input,
.culture-room-search-row input[type="text"],
.culture-room-search-row input:not([type]),
.culture-room-search-row select {
  flex: 1 1 200px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}
.culture-room-search-row input:first-of-type {
  flex: 2 1 260px;
}
.culture-room-search-row .text-input:focus,
.culture-room-search-row select:focus {
  outline: 2px solid var(--culture-green);
  outline-offset: -1px;
}
.culture-page .button.primary {
  background: var(--culture-green);
  border-color: var(--culture-green);
}
.culture-page .button.primary:hover {
  background: var(--culture-green-deep);
  border-color: var(--culture-green-deep);
}
.culture-page .index-meta em {
  color: var(--culture-green-deep);
  background: var(--culture-green-bg);
}
.culture-page .reading-checklist {
  border-color: rgba(60, 107, 58, 0.25);
  background: var(--culture-green-bg);
}

.culture-room-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.culture-room-filter-row button {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}
.culture-room-filter-row button:hover {
  border-color: var(--culture-green);
  color: var(--culture-green-deep);
}
.culture-room-filter-row button.active {
  border-color: var(--culture-green);
  background: var(--culture-green);
  color: #fff;
}

.culture-room-count {
  margin: 0 0 22px;
  color: var(--ink-faint);
  font-size: 0.82rem;
}

/* --- Green accent pass: tabs, active list items, tags, links -------------
   Scoped to .culture-page (toggled on #app by updateChrome for every
   Culture route) so nothing outside Culture picks up the green accent. */
.culture-page .literature-index-item:hover,
.culture-page .literature-index-item.selected,
.culture-page .science-history-index-item:hover,
.culture-page .science-history-index-item.selected,
.culture-page .intellectual-index-item:hover,
.culture-page .intellectual-index-item.selected,
.culture-page .guide-index-item:hover,
.culture-page .guide-index-item.active {
  background: var(--culture-green-bg);
  box-shadow: inset 4px 0 var(--culture-green);
  border-color: transparent;
}
.culture-page .listen-pass-grid section {
  background: var(--culture-green);
}
.culture-page .listen-pass-grid span {
  color: #dcefd8;
}
.culture-page .science-history-index-item span {
  color: var(--culture-green-deep);
}
.culture-page .literature-byline {
  color: var(--culture-green-deep);
}
.culture-page .literature-question {
  border-left-color: var(--culture-green);
  background: var(--culture-green-bg);
}
.culture-page .literature-question blockquote {
  color: var(--ink);
}
.culture-page .theme-chip-row span {
  border-color: rgba(60, 107, 58, 0.3);
  background: var(--culture-green-bg);
  color: var(--culture-green-deep);
}
.culture-page .culture-trail-links button:hover {
  border-color: var(--culture-green);
  color: var(--culture-green-deep);
}
.culture-page .progress-mode-switch button.active,
.culture-page .progress-mode-switch button.active span {
  color: var(--culture-green-deep);
}
.culture-page .continent-button-row button:hover,
.culture-page .continent-button-row button.selected,
.culture-page .zone-button-grid button:hover,
.culture-page .zone-button-grid button.selected,
.culture-page .timeline-era-buttons button:hover,
.culture-page .timeline-era-buttons button.selected {
  border-color: var(--culture-green);
  background: var(--culture-green);
  color: #fff;
}
.culture-page .zone-marker:hover circle,
.culture-page .zone-marker.selected circle {
  fill: var(--culture-green-deep);
}
.culture-page .civilization-dates,
.culture-page .civilization-events time,
.culture-page .civilization-events li::before {
  color: var(--culture-green-deep);
}
.culture-page .civilization-events li::before {
  background: var(--culture-green);
}
.culture-page .civilization-events ol::before {
  background: rgba(60, 107, 58, 0.28);
}
.culture-page .linked-object-grid button span,
.culture-page .linked-object-grid button small {
  color: var(--culture-green-deep);
}
.culture-page a {
  color: var(--culture-green-deep);
}
.culture-page a:hover {
  color: var(--culture-green);
}

/* --- De-ornamenting: thin single borders and plain tag chips replace the
   double-rule borders and rotated circular "seals" used elsewhere in the
   app — cleaner and closer to the reference designs. ------------------- */
.culture-page .literature-detail-heading,
.culture-page .civilization-heading,
.culture-page .linked-collection-strip {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--line);
}
.culture-page .literature-form-seal,
.culture-page .science-era-seal,
.culture-page .era-seal {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  height: auto;
  padding: 6px 12px;
  border: 1px solid rgba(60, 107, 58, 0.35);
  border-radius: 0;
  background: var(--culture-green-bg);
  color: var(--culture-green-deep);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: none;
}
.culture-page .civilization-essay {
  background: var(--paper);
}
/* Fixes a pre-existing dark-purple-text-on-medium-purple-background
   contrast problem in the "Connected AQA topics" cards. */
.culture-page .science-revision-grid button {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}
.culture-page .science-revision-grid button:hover {
  border-color: var(--culture-green);
}
.culture-page .science-revision-grid span,
.culture-page .science-revision-grid small {
  color: var(--culture-green-deep);
}

/* --- Gallery / Museum card & detail tidy-up ------------------------------- */
.culture-page .curated-art-card,
.culture-page .artifact-card {
  border-color: var(--line);
}
.culture-page .culture-detail {
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .culture-room-search-row input:first-of-type {
    flex-basis: 100%;
  }
}

/* --- Homework Sheets / Question Papers: standalone worksheet document type */

.topic-sheets-browse {
  max-width: 860px;
  margin: 0 auto;
}
.topic-sheets-browse .homework-sheet-grid {
  margin-top: 20px;
}

.homework-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.homework-sheet-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(251, 249, 243, 0.9);
  box-shadow: var(--shadow-small);
  text-align: left;
  cursor: pointer;
}
.homework-sheet-card:hover {
  border-color: var(--forest);
}

.homework-sheet-card-numeral {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  color: var(--forest);
  font-weight: 700;
}

.homework-sheet-card-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.homework-sheet-card-copy strong {
  font-size: 0.98rem;
}
.homework-sheet-card-copy small {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.homework-sheet-card-arrow {
  flex: 0 0 auto;
  color: var(--forest);
}

.homework-sheet-page {
  max-width: 860px;
  margin: 0 auto;
}

.homework-sheet-tiers {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 20px;
}

.homework-sheet-tier h2 {
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 1.2rem;
}

.homework-sheet-question {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(251, 249, 243, 0.75);
}

.homework-sheet-question-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.homework-sheet-question-head strong {
  color: var(--forest);
}
.homework-sheet-question-head small {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 0.78rem;
  white-space: nowrap;
}

.homework-sheet-question-prompt {
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.homework-sheet-question-prompt .exam-line {
  margin: 0 0 8px;
}
.homework-sheet-question-prompt .exam-line:last-child {
  margin-bottom: 0;
}
.homework-sheet-question-prompt .exam-equation {
  margin: 10px 0;
  font-weight: 500;
}

.homework-sheet-answer {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.homework-sheet-question-actions {
  margin-top: 10px;
}
.homework-sheet-question-actions .demo-marking-panel {
  margin: 0;
}

.homework-sheet-guidance {
  margin-top: 10px;
  font-size: 0.86rem;
}
.homework-sheet-guidance summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 400;
}
.homework-sheet-guidance-answer {
  margin: 8px 0;
  color: var(--ink-soft);
}
.homework-sheet-guidance-answer .exam-line {
  margin: 0 0 6px;
}
.homework-sheet-guidance-answer .exam-line:last-child {
  margin-bottom: 0;
}
.homework-sheet-guidance-answer .exam-equation {
  margin: 8px 0;
}
.homework-sheet-guidance ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.homework-sheet-photo,
.homework-sheet-send {
  margin-top: 26px;
}

.homework-sheet-photo-status {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}