/* =========================================================================
   MONTY'S BONE PILE: institutional stylesheet
   See DESIGN.md. No gradients, no shadows, no radius beyond 2px.
   ========================================================================= */

:root{
  --ink:        #10100F;
  --ink-2:      #5C5C5C;
  --ink-3:      #8A8A88;
  --paper:      #FFFFFF;
  --paper-2:    #F5F2F8;   /* faint purple-tinted paper, was #F5F5F3 */
  --dark:       #1A0B2E;   /* aubergine, derived from the crest. was #0B0B0A */
  --accent:     #330164;
  --accent-dark:#B69ADB;
  --rule:       #E2E2E0;
  --rule-dark:  rgba(255,255,255,.15);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(24px, 6vw, 120px);
  --shell: 1320px;
  --section: clamp(72px, 10vw, 140px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:var(--accent); color:#fff; }

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:450;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

/* ---------- primitives ------------------------------------------------- */

.shell{
  max-width:var(--shell);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.section{ padding-block:var(--section); }
.section--alt{ background:var(--paper-2); }
.section--dark{ background:var(--dark); color:#fff; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }
.section--dark .rule{ background:var(--rule-dark); }

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.5rem;
  display:block;
}
.eyebrow--accent{ color:var(--accent); }
.section--dark .eyebrow{ color:var(--accent-dark); }
.section--dark .eyebrow--accent{ color:var(--accent-dark); }

.display{ font-size:clamp(3.25rem, 7vw, 6rem); line-height:1.02; }
.h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
.h3{ font-size:1.35rem; line-height:1.2; }

.lede{
  font-size:clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
}
.section--dark .lede{ color:rgba(255,255,255,.68); }

.measure{ max-width:68ch; }

.link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:var(--rule);
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.link:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.section--dark .link:hover{ color:var(--accent-dark); text-decoration-color:var(--accent-dark); }

/* ---------- buttons ---------------------------------------------------- */

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.0625rem 1.75rem;
  border-radius:2px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:transparent; color:var(--ink); }

.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

.section--dark .btn,
.hero .btn{ background:#fff; border-color:#fff; color:var(--ink); }
.section--dark .btn:hover,
.hero .btn:hover{ background:transparent; color:#fff; }

.section--dark .btn--ghost,
.hero .btn--ghost{ background:transparent; color:#fff; border-color:var(--rule-dark); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- header ----------------------------------------------------- */

.masthead{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.masthead--dark{
  background:var(--dark);
  border-bottom-color:var(--rule-dark);
  color:#fff;
}
.masthead__inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
  height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color:inherit;
  flex-shrink:0;
}
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand__name{
  font-family:var(--serif);
  font-size:1.0625rem;
  letter-spacing:-.01em;
  line-height:1.1;
  white-space:nowrap;
}
.brand__sub{
  display:block;
  font-family:var(--sans);
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:2px;
}
.masthead--dark .brand__sub{ color:rgba(255,255,255,.45); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.02em;
  text-decoration:none;
  color:inherit;
  padding:.5rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
  background:none; border-left:0; border-right:0; border-top:0;
  font-family:var(--sans); cursor:pointer;
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ border-bottom-color:currentColor; }
.nav__link--current{ border-bottom-color:var(--accent); color:var(--accent); }
.masthead--dark .nav__link--current{ border-bottom-color:var(--accent-dark); color:var(--accent-dark); }

.nav__cta{
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:.75rem 1.25rem; border:1px solid var(--rule);
  border-radius:2px; color:inherit;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav__cta:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.masthead--dark .nav__cta{ border-color:var(--rule-dark); }
.masthead--dark .nav__cta:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* mega panel */
.nav__item{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  border-top:1px solid var(--rule);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.mega[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
.mega__inner{
  max-width:var(--shell); margin:0 auto; padding:3rem var(--gutter) 3.5rem;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(24px,3vw,48px);
}
.mega__col h4{
  font-family:var(--sans); font-size:.6875rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.25rem; padding-bottom:.875rem; border-bottom:1px solid var(--rule);
}
.mega__list{ list-style:none; margin:0; padding:0; }
.mega__list li{ margin-bottom:.75rem; }
.mega__list a{
  font-size:.875rem; text-decoration:none; color:var(--ink-2);
  transition:color .18s var(--ease);
}
.mega__list a:hover{ color:var(--accent); }
.masthead--dark .mega{
  background:var(--dark); color:#fff;
  border-top-color:var(--rule-dark); border-bottom-color:var(--rule-dark);
}
.masthead--dark .mega__col h4{ color:var(--accent-dark); border-bottom-color:var(--rule-dark); }
.masthead--dark .mega__list a{ color:rgba(255,255,255,.72); }
.masthead--dark .mega__list a:hover{ color:var(--accent-dark); }
.masthead--dark .mega__feature{ border-left-color:var(--rule-dark); }
.masthead--dark .mega__feature p{ color:rgba(255,255,255,.6); }
.masthead--dark .mega__feature .eyebrow{ color:var(--accent-dark); }

.mega__feature{ border-left:1px solid var(--rule); padding-left:clamp(24px,3vw,48px); }
.mega__feature .h3{ font-size:1.25rem; margin:.5rem 0 .75rem; }
.mega__feature p{ font-size:.875rem; color:var(--ink-2); }

.nav-toggle{ display:none; }

/* ---------- hero ------------------------------------------------------- */

.hero{
  background:var(--dark);
  color:#fff;
  padding-block:clamp(72px,11vw,132px);
  border-bottom:1px solid var(--rule-dark);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,6vw,96px);
  align-items:center;
}
.hero .eyebrow{ color:var(--accent-dark); }
.hero__title{ font-size:clamp(3rem, 6.6vw, 5.75rem); line-height:1.02; }
.hero__rule{ width:120px; height:1px; background:var(--rule-dark); margin:2.25rem 0; border:0; }
.hero__lede{ color:rgba(255,255,255,.7); max-width:46ch; font-size:clamp(1.0625rem,1.3vw,1.1875rem); }
.hero__actions{ margin-top:2.5rem; }

.seal{ text-align:center; }
.seal img{ width:clamp(180px, 20vw, 268px); }
.seal__rule{ height:1px; background:var(--rule-dark); margin:1.5rem auto 0; width:100%; }
.seal__legend{
  font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-top:1rem;
}

.hero__foot{
  border-top:1px solid var(--rule-dark);
  margin-top:clamp(48px,7vw,88px);
  padding-top:1.75rem;
  font-size:.75rem;
  color:rgba(255,255,255,.42);
  max-width:74ch;
  line-height:1.7;
}

/* ---------- stats ------------------------------------------------------ */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
}
.stat{
  padding:clamp(36px,4.5vw,56px) clamp(20px,2.5vw,40px);
  border-right:1px solid var(--rule);
  text-align:center;
}
.stat:last-child{ border-right:0; }
.stat__num{
  font-family:var(--serif);
  font-size:clamp(2.75rem,5.4vw,4.5rem);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;
  display:block;
}
.stat__label{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1rem; display:block;
}
.stat__note{
  font-size:.8125rem; color:var(--ink-2); margin-top:.75rem;
  max-width:26ch; margin-left:auto; margin-right:auto;
}
.section--dark .stat{ border-right-color:var(--rule-dark); }
.section--dark .stats{ border-top-color:var(--rule-dark); }
.section--dark .stat__label{ color:rgba(255,255,255,.45); }
.section--dark .stat__note{ color:rgba(255,255,255,.6); }

/* ---------- section header -------------------------------------------- */

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:end;
  padding-bottom:clamp(32px,4vw,56px);
  margin-bottom:clamp(32px,4vw,56px);
  border-bottom:1px solid var(--rule);
}
.section--dark .sec-head{ border-bottom-color:var(--rule-dark); }
.sec-head--solo{ grid-template-columns:1fr; }

/* ---------- course rows ------------------------------------------------ */

.course-row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 190px;
  gap:clamp(24px,4vw,64px);
  padding:clamp(32px,4vw,52px) 0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  color:inherit;
  align-items:start;
  transition:opacity .2s var(--ease);
}
.course-row:first-of-type{ border-top:1px solid var(--rule); }
.course-row:hover{ opacity:.62; }
.course-row:hover .course-row__title{ color:var(--accent); }
.course-row__code{
  font-family:var(--serif);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:lining-nums;
}
.course-row__code span{
  display:block; font-family:var(--sans); font-size:.625rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:.75rem;
}
.course-row__title{ font-family:var(--serif); font-size:1.625rem; line-height:1.15; letter-spacing:-.02em; transition:color .2s var(--ease); }
.course-row__desc{ color:var(--ink-2); font-size:.9375rem; margin-top:.875rem; max-width:58ch; }
.course-row__meta{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-align:right; padding-top:.5rem;
}
.course-row__meta em{ display:block; font-style:normal; color:var(--accent); margin-top:.5rem; }

/* ---------- lesson index (inside a course) ----------------------------- */

.lesson-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.lesson-list li{ border-bottom:1px solid var(--rule); }
.lesson-list a{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px);
  align-items:baseline; padding:1.5rem 0; text-decoration:none; color:inherit;
  transition:opacity .2s var(--ease);
}
.lesson-list a:hover{ opacity:.6; }
.lesson-list a:hover .lesson-list__t{ color:var(--accent); }
.lesson-list__n{
  font-family:var(--serif); font-size:1.0625rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums lining-nums;
}
.lesson-list__t{ font-family:var(--serif); font-size:1.25rem; letter-spacing:-.015em; transition:color .2s var(--ease); }
.lesson-list__d{ font-size:.875rem; color:var(--ink-2); margin-top:.375rem; max-width:62ch; }
.lesson-list__m{ font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.lesson-list .soon{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px);
  align-items:baseline; padding:1.5rem 0;
}
.lesson-list .soon .lesson-list__t,
.lesson-list .soon .lesson-list__n{ color:var(--ink-3); }
.lesson-list .soon .lesson-list__d{ color:var(--ink-3); }

.course-head{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  padding-bottom:clamp(28px,3.5vw,44px);
  align-items:start;
}
.course-head__code{
  font-family:var(--serif); font-size:clamp(2rem,3.2vw,2.75rem); line-height:1;
  letter-spacing:-.02em;
}
.course-head__code span{
  display:block; font-family:var(--sans); font-size:.625rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:.75rem;
}
.course-block{ padding-block:clamp(48px,6vw,80px); border-top:1px solid var(--rule); }
.course-block:first-of-type{ border-top:0; padding-top:clamp(40px,5vw,64px); }
@media (max-width:900px){
  .course-head{ grid-template-columns:1fr; gap:1.25rem; }
  .lesson-list .soon{ grid-template-columns:40px 1fr; }
}

/* ---------- brief numbered rules --------------------------------------- */

.rules-brief{
  list-style:none; counter-reset:none;
  margin:0; padding:0;
  border-top:1px solid var(--rule);
}
.rules-brief li{
  display:grid; grid-template-columns:2.25rem 1fr; gap:.75rem;
  padding:.9375rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.9375rem; line-height:1.5;
}
.rules-brief li::before{
  content:counter(list-item,decimal-leading-zero);
  font-family:var(--serif); color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ---------- cards ------------------------------------------------------ */

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,56px); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(32px,4vw,56px); }

.card{ border-top:1px solid var(--rule); padding-top:1.75rem; text-decoration:none; color:inherit; display:block; }
.section--dark .card{ border-top-color:var(--rule-dark); }
.card .eyebrow{ margin-bottom:1rem; }
.card__title{ font-family:var(--serif); font-size:1.375rem; line-height:1.2; letter-spacing:-.02em; transition:color .2s var(--ease); }
a.card:hover .card__title{ color:var(--accent); }
.section--dark a.card:hover .card__title{ color:var(--accent-dark); }
.card p{ font-size:.9375rem; color:var(--ink-2); margin-top:.875rem; }
.section--dark .card p{ color:rgba(255,255,255,.62); }

/* ---------- article / lesson ------------------------------------------ */

.lesson{
  display:grid;
  grid-template-columns:264px minmax(0,1fr);
  gap:clamp(40px,6vw,96px);
  padding-block:clamp(48px,6vw,88px) var(--section);
  align-items:start;
}
.lesson__aside{ position:sticky; top:104px; }
.lesson__aside h4{
  font-family:var(--sans); font-size:.6875rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1.25rem;
  padding-bottom:.875rem; border-bottom:1px solid var(--rule);
}
.lesson__aside ol{ list-style:none; margin:0; padding:0; counter-reset:m; }
.lesson__aside li{ counter-increment:m; margin-bottom:.875rem; }
.lesson__aside a{
  display:grid; grid-template-columns:24px 1fr; gap:.5rem;
  font-size:.8125rem; line-height:1.45; text-decoration:none; color:var(--ink-2);
  transition:color .18s var(--ease);
}
.lesson__aside a::before{
  content:counter(m,decimal-leading-zero);
  font-family:var(--serif); color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.lesson__aside a:hover{ color:var(--accent); }
.lesson__aside li[aria-current="true"] a{ color:var(--ink); font-weight:500; }
.lesson__aside li[aria-current="true"] a::before{ color:var(--accent); }

.article{ max-width:68ch; }
.article__head{ padding-bottom:2.5rem; margin-bottom:2.5rem; border-bottom:1px solid var(--rule); }
.article__title{ font-size:clamp(2.125rem,4vw,3.25rem); line-height:1.05; }
.article__meta{
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1.75rem;
}
.article__meta span+span::before{ content:"·"; margin:0 .625rem; color:var(--rule); }
.article__standfirst{ font-size:1.1875rem; line-height:1.6; color:var(--ink-2); margin-top:1.75rem; }

.article h2{ font-size:1.75rem; margin:3.25rem 0 1.125rem; }
.article h3{ font-size:1.25rem; margin:2.5rem 0 .875rem; }
.article h2:first-child{ margin-top:0; }
.article ul,.article ol{ margin:0 0 1.5em; padding-left:1.25rem; }
.article li{ margin-bottom:.625rem; }
.article li::marker{ color:var(--ink-3); }
.article strong{ font-weight:600; }
.article em{ font-style:italic; }

.callout{
  border-left:2px solid var(--accent);
  padding:.375rem 0 .375rem 1.75rem;
  margin:2.25rem 0;
}
.callout .eyebrow{ margin-bottom:.75rem; color:var(--accent); }
.callout p{ font-size:.9375rem; }

.keybox{
  border:1px solid var(--rule);
  padding:clamp(20px,3vw,32px);
  margin:2.5rem 0;
  background:var(--paper-2);
}
.keybox .eyebrow{ margin-bottom:1.25rem; }
.keybox dl{ margin:0; }
.keybox dt{ font-weight:600; font-size:.9375rem; margin-top:1.125rem; }
.keybox dt:first-of-type{ margin-top:0; }
.keybox dd{ margin:.25rem 0 0; font-size:.9375rem; color:var(--ink-2); }

.pullquote{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.22;
  letter-spacing:-.02em;
  margin:3rem 0;
  padding-top:2rem;
  border-top:1px solid var(--rule);
}
.pullquote cite{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:1.5rem;
}

.datatable{ width:100%; border-collapse:collapse; margin:2.25rem 0; font-size:.9375rem; }
.datatable th,.datatable td{ text-align:left; padding:.875rem 1rem .875rem 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.datatable th{
  font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); border-bottom-color:var(--ink);
}
.datatable td{ color:var(--ink-2); }
.datatable td:first-child{ color:var(--ink); font-weight:500; }
.datatable--num td{ font-variant-numeric:tabular-nums lining-nums; }
.table-scroll{ overflow-x:auto; }

.footnotes{ margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--rule); font-size:.8125rem; color:var(--ink-3); line-height:1.7; }
.footnotes ol{ padding-left:1.125rem; }

.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px);
  border-top:1px solid var(--rule); margin-top:clamp(48px,6vw,80px); padding-top:2rem;
}
.pager a{ text-decoration:none; color:inherit; }
.pager__dir{ font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pager__t{ font-family:var(--serif); font-size:1.25rem; letter-spacing:-.02em; margin-top:.625rem; display:block; transition:color .2s var(--ease); }
.pager a:hover .pager__t{ color:var(--accent); }
.pager__next{ text-align:right; }
.pager__empty{ opacity:.35; }

/* ---------- page head (interior pages) --------------------------------- */

.pagehead{ padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px); border-bottom:1px solid var(--rule); }
.pagehead__title{ font-size:clamp(2.5rem,5.4vw,4.5rem); line-height:1.02; }
.pagehead .lede{ margin-top:2rem; }

.crumbs{ font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.75rem; }
.crumbs a{ text-decoration:none; color:var(--ink-3); transition:color .18s var(--ease); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ margin:0 .5rem; color:var(--rule); }

/* ---------- calculator ------------------------------------------------- */

.calc{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start; }
.field{ margin-bottom:2rem; }
.field label{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.75rem;
}
.field input, .field select{
  width:100%; font-family:var(--sans); font-size:1.25rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:.5rem 0; border-radius:0;
  transition:border-color .2s var(--ease);
  font-variant-numeric:tabular-nums lining-nums;
}
.field input:focus, .field select:focus{ outline:0; border-bottom-color:var(--accent); }
.field__hint{ font-size:.8125rem; color:var(--ink-3); margin-top:.625rem; }

.readout{ border-top:1px solid var(--ink); padding-top:2rem; }
.readout__row{ padding:1.75rem 0; border-bottom:1px solid var(--rule); }
.readout__label{ font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.readout__val{
  font-family:var(--serif); font-size:clamp(2.25rem,4.4vw,3.5rem); line-height:1;
  letter-spacing:-.03em; margin-top:.875rem; display:block;
  font-variant-numeric:tabular-nums lining-nums;
}
.readout__val small{ font-family:var(--sans); font-size:.9375rem; font-weight:500; letter-spacing:0; color:var(--ink-2); margin-left:.625rem; }
.readout__note{ font-size:.875rem; color:var(--ink-2); margin-top:1rem; max-width:46ch; }
.readout__val.is-error{ font-size:1.25rem; color:var(--ink-3); letter-spacing:-.01em; }

/* ---------- footer ----------------------------------------------------- */

.colophon{ background:var(--dark); color:#fff; padding-block:clamp(64px,8vw,104px) 0; }
.colophon__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(48px,6vw,80px);
}
.colophon__brand img{ width:76px; margin-bottom:1.5rem; }
.colophon__brand p{ font-size:.875rem; color:rgba(255,255,255,.55); max-width:34ch; }
.colophon h4{
  font-family:var(--sans); font-size:.6875rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin:0 0 1.5rem;
}
.colophon ul{ list-style:none; margin:0; padding:0; }
.colophon li{ margin-bottom:.875rem; }
.colophon a{ font-size:.875rem; text-decoration:none; color:rgba(255,255,255,.78); transition:color .18s var(--ease); }
.colophon a:hover{ color:var(--accent-dark); }
.colophon__legal{
  border-top:1px solid var(--rule-dark);
  padding-block:2.25rem 3rem;
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between;
  font-size:.75rem; color:rgba(255,255,255,.4); line-height:1.7;
}
.colophon__legal p{ max-width:74ch; margin:0; }

/* ---------- motion ----------------------------------------------------- */

/* Hidden only when JS is present to bring it back; no-JS gets full content. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease) var(--d,0ms), transform .5s var(--ease) var(--d,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation:none !important; }
}

/* =========================================================================
   MORE PURPLE: STAGE TWO (currently off)
   -------------------------------------------------------------------------
   The site currently runs the subtle level: aubergine dark surfaces, purple
   eyebrow labels, faintly purple alternating paper.

   To escalate, uncomment the block below. That turns the oversized stat
   numerals and course numbers crest-purple, and enables .section--accent,
   a solid #330164 statement band. Then add the class in the markup:

       <section class="section section--dark">   ->   section--accent
       (index.html and curriculum.html, the Discord sections)

   Nothing else changes. Body copy stays #10100F, rules stay neutral grey,
   and there are still no gradients anywhere. To go back, comment it out.
   ========================================================================= */

/* ---8<--- DELETE THIS LINE TO TURN STAGE TWO ON ---8<---

.stat__num       { color:var(--accent); }
.course-row__code,
.course-head__code { color:var(--accent); }

.section--accent{ background:var(--accent); color:#fff; }
.section--accent h1,
.section--accent h2,
.section--accent h3     { color:#fff; }
.section--accent .lede  { color:rgba(255,255,255,.78); }
.section--accent .eyebrow{ color:rgba(255,255,255,.6); }
.section--accent .rule,
.section--accent .sec-head { border-bottom-color:rgba(255,255,255,.22); }
.section--accent .hero__foot{ color:rgba(255,255,255,.55); border-top-color:rgba(255,255,255,.22); }
.section--accent .btn   { background:#fff; border-color:#fff; color:var(--accent); }
.section--accent .btn:hover      { background:transparent; color:#fff; }
.section--accent .btn--ghost     { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.section--accent .btn--ghost:hover{ background:#fff; color:var(--accent); border-color:#fff; }
.section--accent .link:hover     { color:#fff; text-decoration-color:#fff; }

---8<--- AND DELETE THIS LINE TOO ---8<--- */

/* ---------- responsive ------------------------------------------------- */

@media (max-width:1080px){
  .lesson{ grid-template-columns:1fr; }
  .lesson__aside{ position:static; padding-bottom:2.5rem; border-bottom:1px solid var(--rule); }
  .mega__inner{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .mega__feature{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:2rem; grid-column:1/-1; }
  .calc{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav{ display:none; }
  .nav-toggle{
    display:block; background:none; border:0; cursor:pointer; color:inherit;
    font-family:var(--sans); font-size:.6875rem; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; padding:.75rem 0;
  }
  .nav[data-open="true"]{
    display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem;
    position:absolute; top:76px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:2rem var(--gutter) 2.5rem;
  }
  .masthead--dark .nav[data-open="true"]{ background:var(--dark); border-bottom-color:var(--rule-dark); }
  .masthead{ position:sticky; }
  .masthead__inner{ position:relative; }
  .mega{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--rule); }
  .section--dark .stat:nth-child(-n+2){ border-bottom-color:var(--rule-dark); }
  .grid-3{ grid-template-columns:1fr; }
  .hero__grid{ grid-template-columns:1fr; }
  .seal{ order:-1; text-align:left; }
  .seal img{ width:150px; }
  .seal__rule{ margin-left:0; width:150px; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .course-row{ grid-template-columns:1fr; gap:1.25rem; }
  .course-row__meta{ text-align:left; padding-top:0; }
  .course-row__code{ font-size:1.5rem; }
  .colophon__grid{ grid-template-columns:1fr 1fr; }
  .colophon__brand{ grid-column:1/-1; }
}

@media (max-width:640px){
  .grid-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--rule); }
  .stat:last-child{ border-bottom:0; }
  .lesson-list a{ grid-template-columns:40px 1fr; }
  .lesson-list__m{ display:none; }
  .pager{ grid-template-columns:1fr; }
  .pager__next{ text-align:left; }
  .colophon__grid{ grid-template-columns:1fr; }
}