:root {
  --course-ink: #243443;
  --course-muted: #64717d;
  --course-paper: #fffdf8;
  --course-ivory: #f4efe4;
  --course-line: #d9cfbd;
  --course-coral: #c95645;
  --course-coral-dark: #9f3e31;
  --course-green: #24634e;
  --course-blue: #315a72;
  --course-gold: #c68b35;
  --course-shadow: 0 18px 50px rgba(35, 52, 67, .09);
  --course-serif: Georgia, "Times New Roman", serif;
  --course-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.course-page { margin: 0; color: var(--course-ink); background: linear-gradient(180deg, #fbf8f0, var(--course-ivory)); font: 16px/1.65 var(--course-sans); }
.course-page a { color: var(--course-green); text-underline-offset: .18em; }
.course-skip { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; color: #fff; background: var(--course-ink); border-radius: 8px; }
.course-skip:focus { top: 1rem; }
.course-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; min-height: 76px; padding: .8rem clamp(1rem, 4vw, 4.5rem); background: rgba(255, 253, 248, .96); border-bottom: 1px solid var(--course-line); backdrop-filter: blur(12px); }
.course-brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--course-ink); text-decoration: none; }
.course-brand img { width: 52px; height: 42px; object-fit: contain; }
.course-brand strong, .course-brand small { display: block; }
.course-brand strong { font: 700 1.05rem/1.1 var(--course-serif); }
.course-brand small { margin-top: .2rem; color: var(--course-muted); font-size: .68rem; letter-spacing: .04em; }
.course-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.course-links a { padding: .5rem .7rem; color: var(--course-muted); border-radius: 7px; font-size: .78rem; font-weight: 750; text-decoration: none; }
.course-links a:hover, .course-links a[aria-current="page"] { color: #fff; background: var(--course-coral); }
.course-main { width: min(1440px, 100%); margin: auto; padding: 0 clamp(1rem, 4vw, 4.5rem) 5rem; }
.course-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); min-height: 620px; margin-inline: calc(clamp(1rem, 4vw, 4.5rem) * -1); padding: clamp(3rem, 7vw, 6.5rem) clamp(1rem, 5vw, 5.5rem) 2rem; overflow: hidden; border-bottom: 1px solid var(--course-line); background-color: #f6f0e4; background-position: center; background-size: cover; }
.course-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 7px; background: linear-gradient(90deg, var(--course-coral), var(--course-gold), var(--course-green), var(--course-blue)); }
.course-hero--hub { background-image: linear-gradient(90deg, rgba(248,244,235,.99) 0%, rgba(248,244,235,.93) 50%, rgba(248,244,235,.56) 100%), url("../assets/editorial/page-families/background-constitution.png"); }
.course-hero--rights { background-image: linear-gradient(90deg, rgba(248,244,235,.99) 0%, rgba(248,244,235,.94) 52%, rgba(248,244,235,.50) 100%), url("../assets/editorial/constitution-civic-reading.webp"); }
.course-hero-copy { position: relative; z-index: 2; align-self: center; max-width: 780px; }
.course-kicker { margin: 0; color: var(--course-coral-dark); font-size: .76rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.course-hero h1 { max-width: 850px; margin: .65rem 0 1rem; color: var(--course-ink); font: 700 clamp(3.1rem, 8vw, 7rem)/.94 var(--course-serif); letter-spacing: -.035em; }
.course-hero h1 span { color: var(--course-coral); }
.course-lede { max-width: 720px; color: #465561; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.course-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.course-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .72rem 1rem; border: 1px solid var(--course-coral); border-radius: 8px; color: #fff !important; background: var(--course-coral); font-weight: 800; text-decoration: none; }
.course-button--secondary { color: var(--course-coral-dark) !important; background: rgba(255,253,248,.78); }
.course-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.course-tags span { padding: .38rem .62rem; color: var(--course-ink); background: rgba(255,253,248,.78); border: 1px solid var(--course-line); border-radius: 999px; font-size: .75rem; font-weight: 750; }
.course-founder { position: relative; z-index: 2; align-self: end; justify-self: end; width: min(100%, 430px); margin: 0; text-align: center; }
.course-founder img { display: block; width: 100%; max-height: 500px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 25px rgba(35,52,67,.16)); }
.course-founder figcaption { margin: .25rem auto 0; max-width: 390px; padding: .75rem 1rem; background: rgba(255,253,248,.88); border-left: 4px solid var(--course-coral); border-radius: 8px; color: var(--course-ink); font: italic .9rem/1.45 var(--course-serif); }
.course-founder figcaption span { display: block; margin-top: .25rem; color: var(--course-green); font: 800 .72rem var(--course-sans); }
.course-trustbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 1.5rem 0 2rem; overflow: hidden; border: 1px solid var(--course-line); border-radius: 14px; background: var(--course-line); }
.course-trustbar div { padding: 1rem; background: var(--course-paper); }
.course-trustbar strong, .course-trustbar span { display: block; }
.course-trustbar strong { color: var(--course-coral-dark); font: 700 1.35rem var(--course-serif); }
.course-trustbar span { color: var(--course-muted); font-size: .75rem; }
.course-section { margin-top: 2rem; padding: clamp(1.2rem, 3vw, 2.25rem); background: var(--course-paper); border: 1px solid var(--course-line); border-radius: 18px; box-shadow: 0 8px 24px rgba(35,52,67,.05); }
.course-section > header { max-width: 950px; margin-bottom: 1.25rem; }
.course-section h2 { margin: 0 0 .55rem; color: var(--course-ink); font: 700 clamp(1.7rem, 4vw, 2.7rem)/1.08 var(--course-serif); }
.source-intro h1 { max-width: 920px; margin: .55rem 0 1rem; color: var(--course-ink); font: 700 clamp(2.8rem, 7vw, 6rem)/.96 var(--course-serif); letter-spacing: -.03em; }
.source-intro h1 span { color: var(--course-coral); }
.course-section h3 { color: var(--course-green); font-family: var(--course-serif); }
.course-section header p, .course-muted { color: var(--course-muted); }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.course-card { position: relative; padding: 1.25rem; border: 1px solid var(--course-line); border-radius: 14px; background: #fffefa; }
.course-card h3 { margin: 0 0 .45rem; }
.course-card p:last-child { margin-bottom: 0; }
.course-card--link { display: block; color: inherit !important; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.course-card--link:hover { transform: translateY(-4px); box-shadow: var(--course-shadow); }
.course-card--link::after { content: "→"; position: absolute; right: 1rem; top: 1rem; color: var(--course-coral); font-weight: 900; }
.course-card[data-hidden="true"] { display: none; }
.course-card .course-label { display: inline-block; margin-bottom: .65rem; color: var(--course-coral-dark); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.course-toolbar { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .75rem; margin: 1.2rem 0; padding: 1rem; background: #f8f3e9; border: 1px solid var(--course-line); border-radius: 12px; }
.course-toolbar label { color: var(--course-muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.course-toolbar input, .course-toolbar select { width: 100%; min-height: 46px; margin-top: .32rem; padding: .65rem .75rem; color: var(--course-ink); background: #fff; border: 1px solid #c8bca8; border-radius: 8px; font: inherit; }
.course-result-count { color: var(--course-muted); font-size: .85rem; }
.course-path { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: .65rem; overflow-x: auto; padding-bottom: .5rem; }
.course-path div { min-width: 150px; padding: 1rem; border-top: 4px solid var(--course-coral); border-radius: 0 0 10px 10px; background: #f8f3e9; }
.course-path b, .course-path span { display: block; }
.course-path b { font-family: var(--course-serif); }
.course-path span { margin-top: .3rem; color: var(--course-muted); font-size: .78rem; }
.course-table { overflow-x: auto; border: 1px solid var(--course-line); border-radius: 12px; }
.course-table table { width: 100%; border-collapse: collapse; min-width: 700px; }
.course-table th, .course-table td { padding: .78rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--course-line); }
.course-table th { color: var(--course-ink); background: #eaf0e8; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.course-callout { margin: 1rem 0; padding: 1rem 1.15rem; border-left: 4px solid var(--course-coral); border-radius: 0 10px 10px 0; background: #fff3e8; }
.course-callout--green { border-color: var(--course-green); background: #edf5ee; }
.course-chapter-layout { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 2rem; }
.course-toc { position: sticky; top: 92px; padding: 1rem; border: 1px solid var(--course-line); border-radius: 14px; background: var(--course-paper); }
.course-toc h2 { margin: 0 0 .75rem; font: 700 1.25rem var(--course-serif); }
.course-toc a { display: block; padding: .45rem .55rem; color: var(--course-muted); border-left: 2px solid transparent; font-size: .82rem; text-decoration: none; }
.course-toc a:hover { color: var(--course-coral-dark); border-color: var(--course-coral); }
.course-chapter { min-width: 0; }
.course-objectives { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; padding: 0; list-style: none; }
.course-objectives li { padding: .9rem 1rem .9rem 2.6rem; position: relative; background: #f8f3e9; border-radius: 10px; }
.course-objectives li::before { content: "✓"; position: absolute; left: 1rem; color: var(--course-green); font-weight: 900; }
.rights-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.rights-group { padding: 1rem; border: 1px solid var(--course-line); border-radius: 12px; background: #fffefa; }
.rights-group strong { display: block; color: var(--course-coral-dark); font: 700 1.05rem var(--course-serif); }
.rights-group span { display: block; margin-top: .3rem; color: var(--course-muted); font-size: .82rem; }
.course-tabs [role="tablist"] { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--course-line); padding-bottom: .7rem; }
.course-tabs [role="tab"] { min-height: 42px; padding: .55rem .8rem; color: var(--course-muted); background: transparent; border: 1px solid var(--course-line); border-radius: 8px; cursor: pointer; font: 750 .82rem var(--course-sans); }
.course-tabs [role="tab"][aria-selected="true"] { color: #fff; background: var(--course-coral); border-color: var(--course-coral); }
.course-tabs [role="tabpanel"] { padding-top: 1rem; }
.course-tabs [role="tabpanel"][hidden] { display: none; }
.exam-trap { padding: 1rem; border: 1px dashed var(--course-coral); border-radius: 10px; background: #fff9f0; }
.exam-trap strong { color: var(--course-coral-dark); }
.practice-set { display: grid; gap: 1rem; }
.practice-question { padding: 1.1rem; border: 1px solid var(--course-line); border-radius: 12px; background: #fffefa; }
.practice-question fieldset { padding: 0; border: 0; }
.practice-question legend { margin-bottom: .75rem; font-weight: 800; }
.practice-question label { display: block; padding: .45rem .6rem; border-radius: 7px; }
.practice-question label:hover { background: #f4efe4; }
.practice-question button { margin-top: .8rem; padding: .55rem .8rem; color: #fff; background: var(--course-green); border: 0; border-radius: 7px; cursor: pointer; font-weight: 800; }
.practice-feedback { min-height: 1.5rem; margin: .65rem 0 0; font-size: .86rem; font-weight: 700; }
.practice-feedback[data-state="correct"] { color: var(--course-green); }
.practice-feedback[data-state="incorrect"] { color: var(--course-coral-dark); }
.answer-framework { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.answer-framework div { padding: 1rem; border-top: 4px solid var(--course-blue); background: #eef3f4; border-radius: 0 0 10px 10px; }
.revision-list { columns: 2; column-gap: 2rem; }
.revision-list li { margin-bottom: .55rem; break-inside: avoid; }
.course-sources li { margin-bottom: .65rem; }
.source-register td:first-child { min-width: 150px; font-weight: 800; color: var(--course-ink); }
.source-status { display: inline-block; padding: .3rem .55rem; border-radius: 999px; color: #6c4f20; background: #f8e8c9; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.source-status--active { color: #1c5945; background: #dfeee4; }
.source-steps { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: .7rem; padding: 0; list-style: none; overflow-x: auto; }
.source-steps li { min-width: 150px; padding: 1rem; border-top: 4px solid var(--course-green); border-radius: 0 0 10px 10px; background: #f3f6ef; }
.source-steps strong, .source-steps span { display: block; }
.source-steps strong { font-family: var(--course-serif); }
.source-steps span { margin-top: .35rem; color: var(--course-muted); font-size: .78rem; }
.curriculum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.curriculum-track { padding: 1.15rem; border: 1px solid var(--course-line); border-radius: 14px; background: #fffefa; }
.curriculum-track h3 { margin-top: 0; }
.curriculum-track ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 1.5rem; }
.curriculum-track li { margin: 0 0 .5rem; padding-left: .15rem; break-inside: avoid; color: var(--course-muted); }
.curriculum-track li::marker { color: var(--course-coral); font-weight: 800; }
.curriculum-track li.is-ready { color: var(--course-green); font-weight: 800; }
.curriculum-track small { display: inline-block; margin-left: .4rem; padding: .1rem .35rem; border-radius: 999px; color: #fff; background: var(--course-green); font-size: .62rem; }
.worked-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.worked-examples article { padding: 1rem; border-left: 4px solid var(--course-blue); border-radius: 0 10px 10px 0; background: #eef3f4; }
.worked-examples h3 { margin-top: 0; }
.course-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; color: #fff; background: var(--course-ink); border-radius: 14px; }
.course-next a { color: #fff; font-weight: 850; }
.course-footer { padding: 2rem; text-align: center; color: var(--course-muted); border-top: 1px solid var(--course-line); font-size: .8rem; }
@media (max-width: 980px) {
  .course-hero { grid-template-columns: 1fr; padding-top: 3rem; }
  .course-founder { justify-self: center; max-width: 350px; }
  .course-trustbar, .course-grid { grid-template-columns: repeat(2, 1fr); }
  .course-chapter-layout { grid-template-columns: 1fr; }
  .course-toc { position: static; columns: 2; }
}
@media (max-width: 700px) {
  .course-nav { align-items: flex-start; flex-direction: column; }
  .course-links { margin-left: 0; }
  .course-hero { min-height: auto; }
  .course-hero h1 { font-size: clamp(2.8rem, 17vw, 4.5rem); }
  .course-toolbar, .course-trustbar, .course-grid, .rights-groups, .course-objectives, .answer-framework { grid-template-columns: 1fr; }
  .curriculum-grid, .worked-examples { grid-template-columns: 1fr; }
  .curriculum-track ol { columns: 1; }
  .course-toc { columns: 1; }
  .revision-list { columns: 1; }
  .course-next { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}