/* Hyperion Entities: base + components. Depends on tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; }
p { margin: 0; }
a { color: var(--navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-hover); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--navy); color: var(--on-navy); padding: var(--s-2) var(--s-4);
}
.skip-link:focus { top: var(--s-4); }

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

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 4.5rem;
}
.brand { display: flex; flex: none; align-items: center; gap: var(--s-3); color: var(--navy); text-decoration: none; }
.brand svg { width: 2rem; height: 2rem; }
.brand-name {
  white-space: nowrap;
  font-family: var(--sans); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.header-actions .signin { color: var(--ink-2); text-decoration: none; font-size: var(--text-sm); }

.nav-toggle { display: none; }

/* Light and dark: a half-filled diamond, after the logo. site.js does the switching. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.25rem; height: 2.25rem; padding: 0; margin-left: calc(-1 * var(--s-3));
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* Between the phone menu and a full-width header, everything fits on one line with slightly closer spacing. */
@media (min-width: 68.01rem) and (max-width: 78rem) {
  .site-header .wrap { gap: var(--s-5); }
  .primary-nav ul { gap: var(--s-4); }
  .theme-toggle { margin-left: calc(-1 * var(--s-2)); }
}

@media (max-width: 68rem) {
  .site-header .wrap { flex-wrap: wrap; gap: var(--s-3); padding-block: var(--s-3); }
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; gap: var(--s-2);
    background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
    font: inherit; font-size: var(--text-sm); color: var(--ink); padding: var(--s-2) var(--s-3);
  }
  .primary-nav, .header-actions { display: none; width: 100%; order: 1; }
  .theme-toggle { margin-left: 0; height: auto; align-self: stretch; }
  .site-header[data-open="true"] .primary-nav,
  .site-header[data-open="true"] .header-actions { display: block; }
  .primary-nav { margin-left: 0; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav li { border-top: 1px solid var(--rule); }
  .primary-nav a { display: block; padding: var(--s-3) 0; font-size: var(--text-base); }
  .header-actions { padding-block: var(--s-3) var(--s-2); }
  .header-actions .signin { display: inline-block; margin-right: var(--s-4); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 var(--s-5);
  border: 1px solid var(--navy); border-radius: var(--radius);
  background: var(--navy); color: var(--on-navy);
  font: 500 var(--text-sm)/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color 120ms linear;
}
.btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--on-navy); }
.btn--quiet { background: transparent; color: var(--navy); }
.btn--quiet:hover { background: var(--navy-wash); border-color: var(--navy); color: var(--navy); }
.btn--sm { min-height: 2.25rem; padding: 0 var(--s-4); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block; padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
}
.tag--free { border-color: var(--navy); color: var(--navy); background: var(--navy-wash); }
.tag--optional { border-style: dashed; }
.tag--placeholder { border-color: var(--data-2); color: var(--flag); background: var(--flag-wash); }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-9); border-top: 1px solid var(--rule); }
.section--sunk { background: var(--paper-sunk); }
.section-head { max-width: 44rem; margin-bottom: var(--s-7); }
.section-head h2 { font-family: var(--serif); font-size: var(--text-2xl); letter-spacing: -0.01em; }
.section-head p { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--text-lg); line-height: 1.5; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-9); }
.hero .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: center; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.02;
}
.hero-lede { margin-top: var(--s-5); max-width: 34rem; font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); }
.hero-actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.hero-note { margin-top: var(--s-5); font-size: var(--text-sm); color: var(--ink-3); }

@media (max-width: 64rem) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ---------- Lesson demo ---------- */
.demo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: start; }
@media (max-width: 60rem) { .demo { grid-template-columns: 1fr; } }

.lesson-excerpt { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; }
.lesson-excerpt .crumbs { font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-3); letter-spacing: 0.02em; }
.lesson-excerpt h2 { font-size: var(--text-xl); margin-top: var(--s-2); }
.lesson-excerpt h3 { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; margin-top: var(--s-6); color: var(--ink); }
.lesson-excerpt p { margin-top: var(--s-3); color: var(--ink); }
.lesson-excerpt .method { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); }
.method ol { margin: var(--s-2) 0 0; padding-left: 1.25rem; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: var(--text-base); font-weight: 600; }
.panel-body { padding: var(--s-5); }

.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.seg button {
  font: inherit; font-size: var(--text-xs); padding: var(--s-2) var(--s-3);
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--rule-strong); }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }

.buys { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.buys th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: var(--text-xs); padding: 0 var(--s-2) var(--s-2) 0; }
.buys td { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-top: 1px solid var(--rule); }
.buys td:last-child, .buys th:last-child { text-align: right; padding-right: 0; }
.buys input {
  width: 6.5rem; font: inherit; padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); color: var(--ink);
}
.buys input:disabled { background: var(--paper-sunk); color: var(--ink-3); }
.buys .unfilled td { color: var(--ink-3); }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.figures div { padding: var(--s-4) var(--s-3) 0 0; }
.figures div + div { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.figures dt { font-size: var(--text-xs); color: var(--ink-3); }
.figures dd { margin: var(--s-1) 0 0; font-size: 1.625rem; font-weight: 500; }
@media (max-width: 30rem) {
  .figures { grid-template-columns: 1fr; }
  .figures div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .figures div { padding-bottom: var(--s-3); }
}

.chart { margin-top: var(--s-6); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--text-xs); color: var(--ink-2); margin-bottom: var(--s-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--data-1); }
.key-line { width: 16px; height: 2px; background: var(--data-2); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .tick { font: 11px var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .lbl { font: 500 12px var(--sans); fill: var(--ink); }
.chart .avg { fill: none; stroke: var(--data-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .buy { fill: var(--data-1); stroke: var(--surface); stroke-width: 2; }
.chart .buy--missed { fill: var(--surface); stroke: var(--data-1); stroke-width: 2; }
.chart .price { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: default; }
.chart-tip {
  position: absolute; pointer-events: none; background: var(--ink); color: var(--paper);
  font-size: var(--text-xs); padding: var(--s-2) var(--s-3); border-radius: var(--radius);
  white-space: nowrap; transform: translate(-50%, -100%); margin-top: -10px;
}
.takeaway { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.125rem; line-height: 1.55; }

/* ---------- Contents (curriculum overview on the homepage) ---------- */
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.contents li { display: grid; grid-template-columns: 4rem 1fr 14rem; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.contents .n { font-family: var(--serif); font-size: var(--text-2xl); color: var(--navy); line-height: 1; }
.contents h3 { font-family: var(--serif); font-size: var(--text-xl); }
.contents h3 a { color: var(--ink); text-decoration: none; }
.contents h3 a:hover { text-decoration: underline; }
.contents p { margin-top: var(--s-2); color: var(--ink-2); max-width: 40rem; }
.contents .meta { font-size: var(--text-sm); color: var(--ink-3); display: grid; gap: var(--s-1); justify-items: start; }
@media (max-width: 44rem) {
  .contents li { grid-template-columns: 2.75rem 1fr; }
  .contents .meta { grid-column: 2; }
}

.paths-note { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: baseline; justify-content: space-between; }
.paths-note p { color: var(--ink-2); max-width: 40rem; }

/* ---------- Access (free vs membership) ---------- */
.access { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.access > div { padding: var(--s-6); }
.access > div + div { border-left: 1px solid var(--rule-strong); }
.access h2, .access h3 { font-family: var(--serif); font-size: var(--text-xl); }
.access .price { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--text-sm); }
.access ul { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; }
.access li { padding: var(--s-2) 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
@media (max-width: 44rem) {
  .access { grid-template-columns: 1fr; }
  .access > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); }
}

/* ---------- Principles ---------- */
.principles { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); }
.principles h2 { font-family: var(--serif); font-size: var(--text-2xl); }
.principles .body { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; }
.principles .body p + p { margin-top: var(--s-4); }
@media (max-width: 52rem) { .principles { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Closing ---------- */
.closing { background: var(--band); color: #fff; padding-block: var(--s-8); }
.closing .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5); }
.closing h2 { font-family: var(--serif); font-weight: 400; font-size: var(--text-2xl); max-width: 36rem; }
.closing .btn { background: var(--band-btn); color: var(--band-btn-ink); border-color: var(--band-btn); }
.closing .btn:hover { background: #fff; border-color: #fff; color: var(--band-btn-ink); }
.closing :focus-visible { outline-color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #c9c6dd; padding-block: var(--s-8) var(--s-6); font-size: var(--text-sm); }
.site-footer a { color: #e9e7f3; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); }
.footer-grid h2 { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9c98b8; margin-bottom: var(--s-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer .brand { color: #fff; }
.site-footer .brand-name { color: #fff; }
.disclaimer { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid #2d2870; max-width: 52rem; line-height: 1.55; }
.footer-end { margin-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5); }
.copyright { color: #9c98b8; }
.footer-theme { font: inherit; color: #e9e7f3; background: none; border: 0; padding: 0; cursor: pointer; }
.footer-theme:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@media (max-width: 52rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Curriculum page ---------- */
.page-head { padding-block: var(--s-8) var(--s-7); }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: var(--text-3xl); letter-spacing: -0.02em; }
.page-head .lede { margin-top: var(--s-4); max-width: 42rem; font-size: var(--text-lg); color: var(--ink-2); line-height: 1.5; }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; padding-block: var(--s-4); border-block: 1px solid var(--rule); font-size: var(--text-sm); color: var(--ink-2); }
.toolbar label { display: inline-flex; gap: var(--s-2); align-items: center; }
.toolbar .route-desc { flex: 1 1 18rem; color: var(--ink-3); }

.meter { height: 6px; background: var(--navy-wash); border-radius: var(--radius); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--navy); width: 0; transition: width 200ms ease-out; }
.progress-line { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.progress-line .meter { flex: 1; }

.overall { margin-top: var(--s-6); padding: var(--s-5); }
.overall h2 { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--s-3); }

.part { padding-block: var(--s-7); border-bottom: 1px solid var(--rule); }
.part[hidden] { display: none; }
.part-head { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-5); }
.part-head .n { font-family: var(--serif); font-size: var(--text-2xl); color: var(--navy); line-height: 1; }
.part-head h2 { font-family: var(--serif); font-size: var(--text-2xl); }
.part-head .summary { margin-top: var(--s-3); color: var(--ink-2); max-width: 42rem; }
.part-head .meta { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--text-sm); color: var(--ink-3); }
.part-body { margin-left: calc(4rem + var(--s-5)); margin-top: var(--s-5); }
.milestone { margin-top: var(--s-5); font-size: var(--text-sm); color: var(--ink-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.milestone strong { color: var(--ink); font-weight: 600; }
@media (max-width: 44rem) {
  .part-head { grid-template-columns: 2.75rem 1fr; }
  .part-body { margin-left: 0; }
}

.module { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.module + .module { margin-top: var(--s-3); }
.module summary {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-5); align-items: center;
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
}
.module summary::-webkit-details-marker { display: none; }
.module summary h3 { font-size: var(--text-base); font-weight: 600; }
.module summary .count { font-size: var(--text-sm); color: var(--ink-3); }
.module summary .progress-line { grid-column: 1 / -1; }
.module summary .chev { font-size: var(--text-xs); color: var(--ink-3); }
.module[open] summary { border-bottom: 1px solid var(--rule); }
.module .mod-note { padding: var(--s-3) var(--s-5) 0; font-size: var(--text-sm); color: var(--ink-3); }

.lessons { list-style: none; margin: 0; padding: var(--s-2) var(--s-5) var(--s-4); counter-reset: lesson; }
.lessons li { display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--rule); align-items: baseline; counter-increment: lesson; }
.lessons li:first-child { border-top: 0; }
.lessons li::before { content: counter(lesson); font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lessons .title { color: var(--ink); }
.lessons .note { display: block; font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--s-1); }
.lessons .tags { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.lessons input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--navy); margin: 0 var(--s-2) 0 0; vertical-align: -0.15rem; }
.lessons .done .title { color: var(--ink-3); }
body:not([data-notes="on"]) .note, body:not([data-notes="on"]) .mod-note { display: none; }
body:not([data-progress="on"]) .progress-line, body:not([data-progress="on"]) .lessons input, body:not([data-progress="on"]) .overall { display: none; }
@media (max-width: 36rem) {
  .lessons li { grid-template-columns: 1.5rem 1fr; }
  .lessons .tags { grid-column: 2; justify-content: flex-start; }
}

.capstone { margin-top: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--navy); border-radius: var(--radius); font-size: var(--text-sm); color: var(--ink-2); }
.capstone strong { color: var(--navy); font-weight: 600; }

.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s-5) var(--s-6); }
.adv h3 { font-family: var(--serif); font-size: var(--text-lg); }
.adv .meta { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--s-1); }
.adv ol { margin: var(--s-3) 0 0; padding-left: 1.25rem; color: var(--ink-2); font-size: var(--text-sm); }
.adv li + li { margin-top: var(--s-1); }

/* ---------- Inner pages ---------- */
.page-section { padding-block: var(--s-8); border-top: 1px solid var(--rule); }
.page-section--flush { border-top: 0; padding-top: 0; }
.split { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-7); align-items: start; }
.split h2 { font-family: var(--serif); font-size: var(--text-2xl); letter-spacing: -0.01em; }
.split .contents { grid-column: 1 / -1; }
.page-section > .wrap + .wrap { margin-top: var(--s-7); }
.side-note { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--text-sm); max-width: 20rem; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; gap: var(--s-5); } }

.prose { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }
.prose strong { font-weight: 500; }

.fine { margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-3); }
.actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }

/* Numbered rows: the homepage "where to go" list, steps, first lessons */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.rows .n { font-family: var(--serif); font-size: var(--text-2xl); color: var(--navy); line-height: 1; }
.rows h3 { font-family: var(--serif); font-size: var(--text-xl); }
.rows h3 a { color: var(--ink); text-decoration: none; }
.rows h3 a:hover { text-decoration: underline; }
.rows p { margin-top: var(--s-2); color: var(--ink-2); max-width: 40rem; }
.rows--compact li { grid-template-columns: 2.5rem 1fr; padding: var(--s-4) 0; }
.rows--plain li { grid-template-columns: 1fr; }
.rows--compact .n { font-size: var(--text-xl); }
.rows--compact h3 { font-size: var(--text-lg); }
@media (max-width: 44rem) { .rows li { grid-template-columns: 2.75rem 1fr; } }

/* Label / description rows: lesson anatomy, principles, standards */
.anatomy { margin: 0; border-top: 1px solid var(--ink); }
.anatomy > div { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.anatomy dt { font-weight: 600; color: var(--ink); }
.anatomy dd { margin: 0; color: var(--ink-2); }
@media (max-width: 40rem) { .anatomy > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Inline definitions */
.term {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline dotted var(--navy); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.term[aria-expanded="true"] { color: var(--navy); }
.term-def {
  display: block; margin: var(--s-3) 0; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2);
}
.term-def[hidden] { display: none; }
.term-def strong { color: var(--ink); font-weight: 600; }

/* Knowledge check and FAQ */
.check { max-width: var(--measure); }
.check .q { font-family: var(--serif); font-size: var(--text-lg); line-height: 1.5; }
.check details, .faq details { border-top: 1px solid var(--rule); }
.check details { margin-top: var(--s-5); border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.check summary, .faq summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 500; color: var(--navy); }
.faq summary { color: var(--ink); }
.check details p, .faq details p { padding-bottom: var(--s-4); color: var(--ink-2); max-width: var(--measure); }
.faq { border-top: 1px solid var(--ink); }
.faq details:first-child { border-top: 0; }

/* Depth tracks on the curriculum page */
.tracks { padding-top: var(--s-8); }
.tracks-head { max-width: 44rem; }
.tracks-head h2 { font-family: var(--serif); font-size: var(--text-2xl); }
.tracks-head .summary { margin-top: var(--s-3); color: var(--ink-2); }
.track-group { margin-top: var(--s-7); }
.group-title { font-family: var(--sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink); }
.track { padding-block: var(--s-6); }
.track h4 { font-family: var(--serif); font-size: var(--text-xl); font-weight: 500; }
.track .track-mark { color: var(--navy); margin-top: 0.4rem; }
.track .module summary h5 { font-size: var(--text-base); font-weight: 600; margin: 0; }
.track .meta + .meta { margin-top: var(--s-1); }

/* Review-only elements (curriculum notes, draft labels) */
body:not([data-review="on"]) .review-only { display: none; }
.legend-free { display: inline-flex; gap: var(--s-2); align-items: center; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.compare th { text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: var(--s-3) var(--s-4) var(--s-3) 0; }
.compare th:last-child { color: var(--navy); }
.compare td { vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-top: 1px solid var(--rule); color: var(--ink-3); width: 42%; }
.compare td:last-child { color: var(--ink); width: auto; padding-right: 0; }
@media (max-width: 40rem) {
  .compare thead { display: none; }
  .compare tr { display: block; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
  .compare td { display: block; width: auto; border: 0; padding: 0; }
  .compare td::before { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-1); }
  .compare td:first-child::before { content: "Common elsewhere"; color: var(--ink-3); }
  .compare td:last-child::before { content: "At Hyperion Entities"; color: var(--navy); }
  .compare td:last-child { margin-top: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Inline definitions link to their glossary entry */
.term-more { margin-left: var(--s-1); font-family: var(--sans); font-size: var(--text-xs); white-space: nowrap; }

/* Footer items that don't exist yet */
.site-footer .pending { color: #9c98b8; }

/* Glossary */
.tool-list { list-style: none; margin: 0 0 var(--s-9); padding: 0; max-width: 46rem; border-top: 1px solid var(--ink); }
.tool-list li { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.tool-list h2 { font-family: var(--serif); font-size: var(--text-lg); }
.tool-list p { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--text-sm); }
.term-pages { margin: 0 0 var(--s-7); padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.term-pages h2 { font-size: var(--text-lg); margin-bottom: var(--s-3); }
.term-pages ul { list-style: none; margin: 0; padding: 0; columns: 3 12rem; column-gap: var(--s-6); font-size: var(--text-sm); }
.term-pages li { break-inside: avoid; padding: var(--s-1) 0; }
.letter-jump ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; margin: 0 0 var(--s-6); padding: 0; font-family: var(--sans); font-size: var(--text-sm); }
.glossary-letter { margin-bottom: var(--s-6); }
.glossary-letter h2 { font-size: var(--text-xl); border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2); margin-bottom: 0; }
.glossary-list { margin: 0; }
.glossary-list > div { display: grid; grid-template-columns: 16rem 1fr; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--s-6); }
.glossary-list > div:target { background: var(--navy-wash); }
.glossary-list dt { font-weight: 600; }
.glossary-list dd { margin: 0; max-width: var(--measure); }
.glossary-list dd p { margin: 0; }
.glossary-list .used-in { margin-top: var(--s-2); font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 40rem) { .glossary-list > div { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---------- Home page ---------- */
.btn--lg { min-height: 3.25rem; padding: 0 var(--s-6); font-size: var(--text-base); }
.hero-note { font-size: var(--text-base); color: var(--ink-2); }

/* The course outline beside the hero: shows at a glance that this is a course made of lessons. */
.course-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-5); }
.course-card-head { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); }
.first-lessons { list-style: none; margin: 0; padding: 0; counter-reset: fl; }
.first-lessons li { counter-increment: fl; border-bottom: 1px solid var(--rule); }
.first-lessons a { display: grid; grid-template-columns: 1.75rem 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; color: var(--ink); text-decoration: none; }
.first-lessons a::before { content: counter(fl); font-family: var(--serif); color: var(--navy); }
.first-lessons a:hover .fl-title { text-decoration: underline; }
.fl-title { font-family: var(--serif); font-size: var(--text-lg); line-height: 1.3; }
.fl-meta { font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }
.fl-more { margin-top: var(--s-3); font-size: var(--text-sm); }

/* "What a lesson looks like" */
.sample { max-width: var(--measure); }
.sample-meta { font-size: var(--text-sm); color: var(--ink-3); }
.sample-text { margin-top: var(--s-3); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.6; }
.sample-table { margin: var(--s-5) 0; max-width: 24rem; }
.part-meta { font-size: var(--text-sm); color: var(--ink-3); }
.plain-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-width: 44rem; }
.plain-list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.plain-list strong { color: var(--ink); font-weight: 600; }
.sample-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sample-table th, .sample-table td { text-align: left; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-top: 1px solid var(--rule); }
.sample-table thead th { border-top: 1px solid var(--ink); font-weight: 600; }
.sample-table td, .sample-table thead th:last-child { text-align: right; padding-right: 0; }
.sample-table tbody th { font-weight: 500; color: var(--ink-2); }
.fit-note { margin-top: var(--s-5); max-width: 44rem; color: var(--ink-2); }
.fit-note strong { color: var(--ink); }
.welcome h2 { font-family: var(--serif); font-size: var(--text-2xl); letter-spacing: -0.01em; margin-bottom: var(--s-5); }
.welcome-note { font-size: 1.25rem; }
.idea-link { font-size: var(--text-sm); }
.part-modules { font-size: var(--text-sm); color: var(--ink-2); }
.home-tool { margin: 0; }
.home-tool figcaption { margin-top: var(--s-3); font-size: var(--text-xs); color: var(--ink-3); }
.page-notes { padding-block: var(--s-7); border-top: 1px solid var(--rule); font-size: var(--text-sm); color: var(--ink-2); }
.page-notes h2 { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--s-3); }
.page-notes ol { padding-left: var(--s-5); max-width: 52rem; }
.page-notes li { margin-bottom: var(--s-2); }
.fit-list li { font-family: var(--serif); font-size: var(--text-lg); line-height: 1.45; color: var(--ink); }

/* ---------- Legal pages (privacy, disclaimer) ---------- */
.legal h2 { font-family: var(--serif); font-size: var(--text-xl); margin: var(--s-7) 0 var(--s-3); scroll-margin-top: var(--s-6); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-family: var(--sans); font-size: var(--text-base); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.legal ul { margin: var(--s-3) 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: var(--s-2); }
.legal p + ul, .legal ul + p { margin-top: var(--s-3); }
.legal strong { font-weight: 600; }
.legal .tag { vertical-align: 0.15em; }
.legal-contents { font-family: var(--sans); font-size: var(--text-sm); }
.legal-contents-title { font-weight: 600; color: var(--ink); padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink); }
.legal-contents ol { margin: var(--s-3) 0 0; padding-left: 1.4em; color: var(--ink-3); }
.legal-contents li { padding: var(--s-1) 0; }
@media (min-width: 52.01rem) { .legal-contents { position: sticky; top: var(--s-5); align-self: start; } }
.providers { margin-top: var(--s-4); border-top: 1px solid var(--ink); }
.providers > div { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.providers h3 { margin-top: 0; }

/* ---------- Trade journals ---------- */
.journal-entry { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-5); max-width: 44rem; }
.journal-meta { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--ink); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); }
.journal-trade { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; }
.journal-trade p + p { margin-top: var(--s-2); }
.journal-action { font-size: var(--text-lg); color: var(--ink); }
.journal-facts { font-family: var(--sans); font-size: var(--text-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.journal-trade strong { font-weight: 600; }
.journal-lessons { font-family: var(--sans); font-size: var(--text-sm); }
.journal-footer { margin-top: var(--s-3); font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-3); }
.numbered-list { counter-reset: nl; }
.numbered-list li { counter-increment: nl; position: relative; padding-left: 2rem; }
.numbered-list li::before { content: counter(nl); position: absolute; left: 0; font-family: var(--serif); color: var(--navy); }