/* ==========================================================================
   Elevora Systems LLC — Core Stylesheet
   Design system: "Mineral Editorial"
   Palette : ink #17201C · forest #24382E · olive #6E7A5A · stone #A9A395
             ivory #F6F3EC · bone #EDE8DC · brass #9A7B4F
   Type    : Display — Fraunces (serif, optical, editorial)
             Body    — Inter (sans, neutral, highly legible)
             Utility — IBM Plex Mono (labels, indices, metadata)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ink:        #17201C;
  --forest:     #24382E;
  --forest-mid: #35503F;
  --olive:      #6E7A5A;
  --stone:      #8C8778;
  --stone-lt:   #A9A395;
  --ivory:      #F6F3EC;
  --bone:       #EDE8DC;
  --bone-deep:  #E2DBCB;
  --brass:      #8A6B3F;
  --brass-lt:   #B08F5E;
  --white:      #FFFDF8;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-lg:   clamp(1.35rem, 0.8vw + 1.2rem, 1.6rem);
  --fs-xl:   clamp(1.7rem, 1.6vw + 1.35rem, 2.3rem);
  --fs-2xl:  clamp(2.1rem, 2.6vw + 1.5rem, 3.1rem);
  --fs-3xl:  clamp(2.6rem, 4.4vw + 1.5rem, 4.6rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  --maxw: 1240px;
  --maxw-text: 68ch;
  --radius: 2px;
  --radius-card: 3px;
  --rule: 1px solid var(--bone-deep);
  --rule-dark: 1px solid rgba(246, 243, 236, 0.16);
  --shadow-card: 0 1px 2px rgba(23, 32, 28, .04), 0 12px 28px -18px rgba(23, 32, 28, .30);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 0 var(--sp-4);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); max-width: var(--maxw-text); }
p:last-child { margin-bottom: 0; }

a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: var(--stone-lt);
    transition: color .18s var(--ease), text-decoration-color .18s var(--ease); }
a:hover { color: var(--brass); text-decoration-color: var(--brass); }

ul, ol { padding-left: 1.15rem; max-width: var(--maxw-text); }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: var(--rule); margin: var(--sp-7) 0; }

::selection { background: var(--forest); color: var(--ivory); }

/* ---------- 3. Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--forest); color: var(--ivory);
  padding: var(--sp-3) var(--sp-5); text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--ivory); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 4. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--dark { background: var(--forest); color: var(--bone); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ivory); }
.section--dark a { color: var(--ivory); text-decoration-color: rgba(246,243,236,.45); }
.section--dark a:hover { color: var(--brass-lt); text-decoration-color: var(--brass-lt); }
.section--bone { background: var(--bone); }
.section-rule { border-top: var(--rule); }

/* Eyebrow / index labels — the mono utility voice */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 var(--sp-4);
  display: block;
}
.section--dark .eyebrow { color: var(--brass-lt); }

.lede {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--forest-mid);
  max-width: 62ch;
}
.section--dark .lede { color: var(--bone); }

.section-head { margin-bottom: var(--sp-7); }
.section-head p { color: var(--forest-mid); }
.section--dark .section-head p { color: var(--bone); }

/* Grids */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  background: var(--forest); color: var(--ivory);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--forest); }
.btn--ghost:hover { background: var(--forest); color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.btn--light:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--ivory); border-color: rgba(246,243,236,.5); }
.btn--ghost-light:hover { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.textlink {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--forest);
  border-bottom: 1px solid var(--stone-lt); padding-bottom: 2px;
}
.textlink:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- 6. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 243, 236, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--rule);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 76px;
}
.brand { display: flex; align-items: baseline; gap: var(--sp-3); text-decoration: none; }
.brand__mark {
  font-family: var(--font-display);
  font-size: 1.4rem; letter-spacing: .01em; color: var(--forest);
  font-variation-settings: "WONK" 1, "opsz" 20;
}
.brand__sub {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--stone);
}
@media (max-width: 460px) { .brand__sub { display: none; } }

.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  /* Allow the nav to shrink rather than overrun the Contact button. */
  min-width: 0; flex: 0 1 auto;
}
.nav__list {
  display: flex; align-items: center; gap: var(--sp-4);
  list-style: none; margin: 0; padding: 0;
  min-width: 0; flex: 0 1 auto;
}
.nav__list li { margin: 0; }
/* The header Contact button is a navigation element, not a page CTA.
   The default .btn padding is sized for hero buttons and is far too wide
   here — it was overrunning the last two links. Give it its own scale. */
.nav > .btn {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  font-size: 0.6875rem;
  letter-spacing: .1em;
}
.nav__link {
  font-size: var(--fs-sm); letter-spacing: .02em;
  text-decoration: none; color: var(--forest-mid); white-space: nowrap;
  padding-block: var(--sp-2); border-bottom: 1px solid transparent;
}
.nav__link:hover { color: var(--ink); border-color: var(--brass); }
.nav__link[aria-current="page"] { color: var(--ink); border-color: var(--forest); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--bone-deep);
  border-radius: var(--radius); padding: .6rem .8rem; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--forest);
}
/* Between 1080 and 1240 the nine links plus Contact get tight.
   Reduce spacing and type size rather than let anything overlap. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav__list { gap: var(--sp-3); }
  .nav__link { font-size: 0.8125rem; }
  .header-inner { gap: var(--sp-4); }
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    background: var(--ivory); border-bottom: var(--rule);
    flex-direction: column; align-items: stretch;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
    gap: var(--sp-2);
    max-height: calc(100dvh - 76px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: var(--sp-3) 0; border-bottom: var(--rule); font-size: var(--fs-md); }
  .nav .btn { justify-content: center; margin-top: var(--sp-4); }
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem) var(--sp-9); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--sp-8); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: var(--sp-5); }

/* Signature element: the Signal Column — a vertical strand of nested
   biological "levels" that the whole brand argument rests on. */
.signal {
  border-left: 1px solid var(--bone-deep);
  padding-left: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.signal__item { position: relative; }
.signal__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-5) - 4.5px);
  top: .55rem; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--olive);
}
.signal__item--live::before { background: var(--brass); border-color: var(--brass); }
.signal__k {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive);
  display: block; margin-bottom: var(--sp-1);
}
.signal__v { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--forest); display: block; line-height: 1.2; }
.signal__n { font-size: var(--fs-sm); color: var(--stone); margin: var(--sp-1) 0 0; }

/* Ambient diagram */
.diagram-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: -1; }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--white);
  border: var(--rule);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--olive); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { font-size: 0.9375rem; color: var(--forest-mid); margin-bottom: var(--sp-4); }
.card .textlink { margin-top: auto; align-self: flex-start; }

/* Publication card */
.pub-card { padding: 0; overflow: hidden; }
.pub-card__cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-mid) 55%, var(--olive) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-5); color: var(--ivory); position: relative;
}
.pub-card__cover--alt { background: linear-gradient(160deg, var(--ink) 0%, #2C3A33 60%, var(--stone) 130%); }
.pub-card__cover--brass { background: linear-gradient(160deg, #3A2E1E 0%, var(--brass) 90%); }
.pub-card__cover--stone { background: linear-gradient(160deg, #4A4A42 0%, var(--stone) 100%); }
.pub-card__cover-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; opacity: .82;
}
.pub-card__cover-title {
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--ivory);
  font-variation-settings: "opsz" 30;
}
.pub-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.pub-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.pub-card h3 { font-size: var(--fs-md); }
.pub-card p { font-size: 0.9375rem; }

.tag {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .55rem; border: 1px solid var(--bone-deep);
  border-radius: var(--radius); color: var(--olive); background: var(--bone);
  white-space: nowrap;
}
.tag--level { border-color: var(--olive); color: var(--forest); background: transparent; }
.tag--soon { border-color: var(--brass-lt); color: var(--brass); background: transparent; }

/* Numbered pathway card — order is real information here */
.path-card { position: relative; padding-top: var(--sp-6); }
.path-card__index {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--brass); display: block; margin-bottom: var(--sp-3);
}
.path-card__levels {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4);
}
.path-card__level {
  height: 3px; flex: 1; background: var(--bone-deep); border-radius: 2px;
}
.path-card__level[data-on="true"] { background: var(--olive); }

/* Topic card */
.topic-card { border: 0; border-top: 2px solid var(--forest); background: transparent; padding: var(--sp-4) 0 var(--sp-5); }
.topic-card:hover { transform: none; box-shadow: none; border-color: var(--brass); }
.topic-card h3 { font-size: var(--fs-md); }

/* Article card */
.article-card { border: 0; border-bottom: var(--rule); border-radius: 0; background: transparent; padding: var(--sp-5) 0; }
.article-card:hover { transform: none; box-shadow: none; }
.article-card__meta { font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-2); }

/* Feature / method step */
.step { border-top: 1px solid var(--bone-deep); padding-top: var(--sp-4); }
.section--dark .step { border-color: rgba(246,243,236,.2); }
.step__n {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--brass); display: block; margin-bottom: var(--sp-3);
}
.section--dark .step__n { color: var(--brass-lt); }
.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { font-size: 0.9375rem; color: var(--forest-mid); }
.section--dark .step p { color: var(--bone); }

/* Definition rows */
.rows { border-top: var(--rule); }
.row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: var(--rule);
}
@media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: var(--sp-2); } }
.row__k { font-family: var(--font-display); font-size: var(--fs-md); color: var(--forest); }
.row__v { font-size: 0.9375rem; color: var(--forest-mid); }
.row__v p { font-size: inherit; }

/* Pull quote / philosophy stack */
.tenets { list-style: none; padding: 0; margin: 0; max-width: none; }
.tenets li {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--forest); padding: var(--sp-4) 0; border-bottom: 1px solid var(--bone-deep);
  display: flex; align-items: baseline; gap: var(--sp-4); margin: 0;
}
.section--dark .tenets li { color: var(--ivory); border-color: rgba(246,243,236,.18); }
.tenets li span {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .16em;
  color: var(--brass); flex: 0 0 auto;
}
.section--dark .tenets li span { color: var(--brass-lt); }

/* ---------- 9. Filters ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-top: var(--rule); border-bottom: var(--rule);
  margin-bottom: var(--sp-6);
}
.filter-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-group__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
  margin-right: var(--sp-2);
}
.chip {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .7rem; border: 1px solid var(--bone-deep);
  border-radius: 999px; background: transparent; color: var(--forest-mid);
  cursor: pointer; transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--olive); color: var(--forest); }
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.filter-count {
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--stone);
  margin-bottom: var(--sp-5);
}
.is-hidden { display: none !important; }
.empty-state {
  padding: var(--sp-8) 0; text-align: center; color: var(--stone);
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .08em;
}

/* ---------- 10. Newsletter ---------- */
.newsletter { background: var(--forest); color: var(--bone); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 540px; }
.newsletter__form label { flex: 1 1 260px; }
.field-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt);
  display: block; margin-bottom: var(--sp-2);
}
input[type="email"], input[type="text"], select, textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-base);
  padding: .85rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--bone-deep); background: var(--white); color: var(--ink);
}
.newsletter input[type="email"] { border-color: rgba(246,243,236,.3); background: rgba(246,243,236,.06); color: var(--ivory); }
.newsletter input::placeholder { color: rgba(246,243,236,.5); }
.form-note { font-size: var(--fs-sm); color: var(--stone-lt); margin-top: var(--sp-4); }
.newsletter .form-note { color: rgba(246,243,236,.65); }
.form-status { font-family: var(--font-mono); font-size: var(--fs-sm); margin-top: var(--sp-3); }

/* Contact form */
.form-grid { display: grid; gap: var(--sp-4); max-width: 640px; }
.form-grid label { display: block; }
textarea { min-height: 170px; resize: vertical; }

/* ---------- 11. Footer ---------- */
.site-footer { background: var(--ink); color: var(--bone); padding-block: var(--sp-8) var(--sp-6); }
.site-footer h4 {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lt);
  margin-bottom: var(--sp-4); font-weight: 400;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-6); padding-bottom: var(--sp-7);
  border-bottom: var(--rule-dark);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--sp-2); }
.footer-grid a { color: var(--bone); text-decoration: none; font-size: 0.9375rem; }
.footer-grid a:hover { color: var(--brass-lt); text-decoration: underline; }
.footer-brand .brand__mark { color: var(--ivory); }
.footer-brand p { font-size: 0.9375rem; color: var(--stone-lt); margin-top: var(--sp-4); max-width: 40ch; }
.footer-bottom { padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: space-between; }
.disclaimer { font-size: var(--fs-sm); color: var(--stone-lt); max-width: 78ch; line-height: 1.6; }
.footer-legal { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--stone); }
.footer-legal a { color: var(--stone-lt); }

/* ---------- 12. Page header ---------- */
.page-head { padding-block: var(--sp-8) var(--sp-7); border-bottom: var(--rule); background: var(--bone); }
.page-head h1 { max-width: 20ch; }
.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--olive); text-decoration: none; }
.breadcrumb a:hover { color: var(--brass); text-decoration: underline; }

/* ---------- 13. Prose blocks ---------- */
.prose h2 { margin-top: var(--sp-8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); }
.prose blockquote {
  margin: var(--sp-6) 0; padding-left: var(--sp-5);
  border-left: 2px solid var(--brass);
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--forest); line-height: 1.35;
}
.callout {
  background: var(--bone); border-left: 2px solid var(--olive);
  padding: var(--sp-5); margin: var(--sp-6) 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { font-size: 0.9375rem; color: var(--forest-mid); }
.callout .eyebrow { margin-bottom: var(--sp-2); }

/* ---------- 14. Placeholder marker ---------- */
.ph {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .08em;
  background: rgba(154, 123, 79, .12); color: var(--brass);
  border: 1px dashed var(--brass-lt); border-radius: var(--radius);
  padding: .1rem .4rem;
}

/* ---------- 15. Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 16. Founder note ----------
   An aside in the margin, not a callout box. The brass rule is short and
   sits above the label rather than caging the text — closer to a note
   pencilled beside a paragraph than a UI component. Display serif at a
   softer optical size so it reads as a second voice, not a highlight. */
.founder-note {
  margin: var(--sp-7) 0;
  padding-top: var(--sp-4);
  max-width: 60ch;
  position: relative;
}
.founder-note::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 2px;
  background: var(--brass);
}
.founder-note__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: var(--sp-3);
}
.founder-note__body p {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--forest-mid);
  font-variation-settings: "opsz" 16, "SOFT" 60, "WONK" 1;
  font-weight: 300;
  margin-bottom: 0;
  text-wrap: pretty;
}
.founder-note__body p + p { margin-top: var(--sp-3); }
.founder-note .textlink { font-size: var(--fs-xs); }

.founder-note--dark::before { background: var(--brass-lt); }
.founder-note--dark .founder-note__label { color: var(--brass-lt); }
.founder-note--dark .founder-note__body p { color: var(--bone); }
.founder-note--dark .textlink { color: var(--brass-lt); border-color: var(--brass-lt); }

.prose .founder-note { margin: var(--sp-7) 0; }

/* ---------- 17. Editorial refinements ----------
   Hero headline gets the display face's optical size pushed up and a
   touch of WONK, so the largest type on the site has some character
   rather than reading as neutral serif at scale. */
.hero h1 {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  letter-spacing: -0.03em;
}
h1, h2 { text-wrap: balance; }
.lede, .card p, .row__v, .step p { text-wrap: pretty; }

/* Lede gets slightly more air beneath a headline it is answering */
.hero .lede { max-width: 56ch; }

/* Pull quotes: hanging brass mark rather than a left border */
.prose blockquote {
  border-left: 0;
  padding-left: 0;
  position: relative;
  padding-top: var(--sp-4);
  color: var(--forest);
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1;
  font-weight: 300;
}
.prose blockquote::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 2px;
  background: var(--brass);
}

/* ---------- 18. Curriculum architecture ----------
   Stages, prerequisites, and canonical markers. These encode real
   structure — a stage number is a position in a sequence, and the
   "assumes" line is a dependency, not decoration. */

.stages { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stages { grid-template-columns: 1fr; } }

.stage {
  border-top: 2px solid var(--forest);
  padding-top: var(--sp-4);
}
.stage__n {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
  display: block; margin-bottom: var(--sp-2);
}
.stage h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.stage > p { font-size: 0.9375rem; color: var(--forest-mid); margin-bottom: var(--sp-4); }
.stage__list { list-style: none; padding: 0; margin: 0; }
.stage__list li {
  font-size: 0.875rem; color: var(--forest-mid);
  padding: var(--sp-2) 0; border-top: 1px solid var(--bone-deep);
  display: flex; gap: var(--sp-3); align-items: baseline; margin: 0;
}
.stage__lvl {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--olive); flex: 0 0 1.6rem; letter-spacing: .06em;
}

/* Prerequisite + canonical lines on publication cards */
.pub-card__req, .pub-card__canon {
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--stone); margin: 0 0 var(--sp-2);
  padding-top: var(--sp-2); border-top: 1px solid var(--bone-deep);
}
.pub-card__req span, .pub-card__canon span {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--olive); display: block; margin-bottom: 2px;
}
.pub-card__canon span { color: var(--brass); }
.pub-card--soon { opacity: .82; }
.pub-card--soon .pub-card__body { padding-top: var(--sp-5); }

/* Required-reading list: order carries protective meaning here */
ol.required { list-style: none; padding: 0; margin: var(--sp-5) 0; max-width: none; }
ol.required li {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--bone-deep); margin: 0;
}
ol.required li > span {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--brass); flex: 0 0 1.5rem; letter-spacing: .08em;
}
ol.required strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-md); color: var(--forest);
  display: block; margin-bottom: 2px;
}
ol.required em { font-style: normal; font-size: 0.875rem; color: var(--stone); }

.path-card__chain {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--olive); margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--bone-deep);
}

/* ---------- 19. The arc — seven movements ----------
   A horizontal sequence on wide screens, vertical on narrow. Numbered
   because the order is genuinely load-bearing: each movement supplies
   what the next assumes. */
.arc { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-4); }
@media (max-width: 1080px) { .arc { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px)  { .arc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .arc { grid-template-columns: 1fr; } }
.arc__step { border-top: 1px solid var(--stone-lt); padding-top: var(--sp-3); position: relative; }
.arc__step::before {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bone); border: 1px solid var(--olive);
}
.arc__step:last-child::before { background: var(--brass); border-color: var(--brass); }
.arc__step span {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; color: var(--brass); display: block; margin-bottom: var(--sp-2);
}
.arc__step h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); letter-spacing: -0.005em; }
.arc__step p { font-size: 0.8125rem; line-height: 1.5; color: var(--forest-mid); }

.topic-card__rel {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone); margin-bottom: var(--sp-3);
}
.section--dark .path-card { background: rgba(246,243,236,.05); border-color: rgba(246,243,236,.18); }
.section--dark .path-card h3 { color: var(--ivory); }
.section--dark .path-card p { color: var(--bone); }
.section--dark .path-card__index { color: var(--brass-lt); }
.section--dark .path-card:hover { border-color: var(--brass-lt); }

/* ---------- 20. Onward — the interconnection layer ----------
   Every page ends by handing the reader somewhere specific, with the
   reason stated. The "why" line is the component: a link without a
   reason is a dead end wearing a signpost. */
.onward { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .onward { grid-template-columns: 1fr; gap: var(--sp-5); } }
.onward__item { margin: 0; border-top: 1px solid var(--bone-deep); padding-top: var(--sp-4); }
.section--dark .onward__item { border-color: rgba(246,243,236,.2); }
.onward__kind {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
  display: block; margin-bottom: var(--sp-2);
}
.section--dark .onward__kind { color: var(--brass-lt); }
.onward__title {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--forest); text-decoration: none; display: block;
  line-height: 1.2; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 28, "WONK" 1;
  transition: color .18s var(--ease);
}
.onward__title:hover { color: var(--brass); }
.section--dark .onward__title { color: var(--ivory); }
.section--dark .onward__title:hover { color: var(--brass-lt); }
.onward__why { font-size: 0.9375rem; color: var(--forest-mid); margin: var(--sp-2) 0 0; }
.section--dark .onward__why { color: var(--bone); }
.onward-section .section-head { margin-bottom: var(--sp-6); }
.onward-section .section-head .lede { font-size: var(--fs-base); }

/* ---------- 21. Publication specification ---------- */
.spec { margin: var(--sp-5) 0 0; border-top: 1px solid var(--bone-deep); }
.spec > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--bone-deep);
  align-items: baseline;
}
.spec dt {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--olive);
}
.spec dd { margin: 0; font-size: 0.9375rem; color: var(--forest); text-align: right; }

.grid--5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
@media (max-width: 1080px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid--5 { grid-template-columns: 1fr; } }

ul.qlist { list-style: none; padding: 0; margin: var(--sp-5) 0; }
ul.qlist li {
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--forest); font-variation-settings: "opsz" 20, "SOFT" 40;
  font-weight: 300; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--bone-deep); position: relative; margin: 0;
}
ul.qlist li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 14px; height: 1px; background: var(--brass);
}

/* ---------- 22. Essay ----------
   Long-form reading. Slightly larger body size and looser leading than
   the rest of the site: this is the one context where someone reads for
   nine minutes rather than scanning. */
.essay .prose p { font-size: 1.09375rem; line-height: 1.72; }
.essay .prose h2 { margin-top: var(--sp-8); }
.essay .prose .callout p { font-size: 1rem; }
.essay .prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em; line-height: .82; float: left;
  padding: .06em .09em 0 0; color: var(--forest);
  font-variation-settings: "opsz" 144, "WONK" 1; font-weight: 300;
}
.essay .founder-note { margin-top: var(--sp-8); }
.essay ul.qlist li { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 400; }
.essay ul.qlist li strong { font-family: var(--font-display); font-weight: 400; }

/* ---------- 23. Journal index ---------- */
.essay-lead { border-top: 2px solid var(--forest); padding-top: var(--sp-5); margin-bottom: var(--sp-6); }
.essay-lead h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); max-width: 24ch; }
.essay-lead h2 a { color: var(--forest); text-decoration: none; }
.essay-lead h2 a:hover { color: var(--brass); }
.essay-lead .lede { margin-bottom: var(--sp-4); }
.article-card__now {
  font-size: 0.8125rem; color: var(--stone); margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3); border-top: 1px solid var(--bone-deep);
}
.article-card__now a { color: var(--olive); }

/* ---------- 24. Portrait ----------
   Squared corners, a hairline, and a mono caption — the treatment a
   publisher gives an author photo, not the one a brand gives a headshot.
   Slight desaturation on load so the portrait sits inside the palette
   rather than competing with it. */
.portrait { margin: var(--sp-5) 0 0; max-width: 330px; }
.portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--bone-deep);
  filter: saturate(.92) contrast(1.02);
}
.portrait figcaption {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); margin-top: var(--sp-3);
  padding-top: var(--sp-2); border-top: 1px solid var(--bone-deep);
}
.section--dark .portrait figcaption,
.section--bone .portrait figcaption { color: var(--olive); }
.prose .portrait, .split > div > .portrait { max-width: 340px; }

/* ==========================================================================
   25. PRODUCTION LAYER
   Utilities and cascade fixes that replace inline styles. Written last so
   they win on specificity without !important.
   ========================================================================== */

/* --- Dark-section inheritance -------------------------------------------
   Previously 48 inline overrides. The context should decide the colour,
   not each element. */
.section--dark .rows,
.section--dark .row { border-color: rgba(246, 243, 236, .2); }
.section--dark .row__k { color: var(--ivory); }
.section--dark .row__v { color: var(--bone); }
.section--dark .card:not(.path-card) { background: rgba(246,243,236,.05); border-color: rgba(246,243,236,.18); }
.section--dark .card h3 { color: var(--ivory); }
.section--dark .card p { color: var(--bone); }
.section--dark .textlink { color: var(--bone); border-color: rgba(246,243,236,.4); }
.section--dark .textlink:hover { color: var(--brass-lt); border-color: var(--brass-lt); }
.section--dark .form-note { color: rgba(246,243,236,.62); }
.section--dark .tag { background: rgba(246,243,236,.08); border-color: rgba(246,243,236,.22); color: var(--bone); }
.section--dark .callout { background: rgba(246,243,236,.06); border-left-color: var(--brass-lt); }
.section--dark .callout p { color: var(--bone); }

/* --- Spacing utilities --------------------------------------------------- */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-9 { margin-top: var(--sp-9); }
.mb-6 { margin-bottom: var(--sp-6); }
.filter-bar + .filter-bar { margin-top: calc(-1 * var(--sp-6)); }

/* --- Component modifiers ------------------------------------------------- */
.topic-card { border-top-width: 2px; }
.textlink--inline { margin-top: var(--sp-4); display: inline-block; }
.textlink--muted { color: var(--stone); border-color: var(--bone-deep); pointer-events: none; }
.signature { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--forest); margin-top: var(--sp-6); }
.cover--rounded { border-radius: var(--radius-card); }
.cover--narrow { max-width: 300px; margin-top: var(--sp-5); }
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover { color: var(--brass); }

/* --- Font loading: prevent invisible text during webfont swap ------------ */
@font-face { font-family: 'Fraunces'; font-display: swap; src: local('Fraunces'); }

/* --- Print --------------------------------------------------------------
   Publications get printed and annotated. Make that work properly. */
@media print {
  *, *::before, *::after { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .site-header, .site-footer, .nav, .nav-toggle, .btn, .btn-row,
  .skip-link, .onward-section, .newsletter, .filter-bar, .filter-count,
  .breadcrumb, form { display: none !important; }
  body { font-size: 11.5pt; line-height: 1.5; }
  .wrap, .wrap--narrow { max-width: none; padding: 0; }
  .section { padding-block: 0 1.5rem; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  p, li, blockquote, .callout, .founder-note { page-break-inside: avoid; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .portrait, .pub-card__cover { display: none; }
  .prose { max-width: none; }
}

/* --- Forced colors / high contrast --------------------------------------- */
@media (forced-colors: active) {
  .btn, .chip, .card { border: 1px solid ButtonText; }
  .signal__item::before, .arc__step::before { forced-color-adjust: none; }
}

/* --- Selection & scrollbar polish ---------------------------------------- */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--stone-lt) var(--bone); }
}

/* --- Focus ring on dark grounds ------------------------------------------ */
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass-lt); }

/* --- Prevent layout shift from scrollbar --------------------------------- */
html { scrollbar-gutter: stable; }
.section--tall { padding-block: var(--sp-10); }

/* ---------- 26. Variable font guard ----------
   font-variation-settings applies to whatever font is rendering, including
   fallbacks. If Fraunces hasn't loaded, WONK and opsz distort Georgia into
   something that reads as broken. Scope the axes to the loaded font only. */
@supports not (font-variation-settings: "WONK" 1) {
  .brand__mark, h1, h2, h3, .signal__v, .row__k,
  .essay .prose > p:first-of-type::first-letter {
    font-variation-settings: normal !important;
  }
}
html:not(.fonts-ready) [style*="font-variation-settings"],
html:not(.fonts-ready) .brand__mark,
html:not(.fonts-ready) h1,
html:not(.fonts-ready) h2 {
  font-variation-settings: normal;
}
html.fonts-ready .brand__mark { font-variation-settings: "WONK" 1, "opsz" 20; }

/* ---------- 27. Publication card affordance ----------
   Only CPIR has a detail page today. Cards without one must not look
   clickable — a card that invites a click and does nothing is worse than
   a card that plainly says "not yet". */
.pub-card { cursor: default; }
.pub-card--linked { cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pub-card--linked:hover { border-color: var(--brass); transform: translateY(-2px); }
.pub-card--linked .pub-card__title a { color: var(--forest); text-decoration: none; }
.pub-card--linked:hover .pub-card__title a { color: var(--brass); }
.pub-card__status {
  display: block; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--bone-deep);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stone-lt);
}
.pub-card--linked .pub-card__status { color: var(--brass); }

/* ---------- 28. Footer creed ----------
   The line the company is actually organised around. Set in the display
   face at reading size so it registers as a statement rather than tagline. */
.footer-creed {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ivory);
  margin-bottom: var(--sp-3);
  max-width: 26ch;
}

/* Homepage creed — the single sentence the company is organised around.
   Given its own quiet section so it reads as a position, not a pull quote. */
.creed-section { padding-block: var(--sp-9); text-align: center; }
.creed {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.22; font-weight: 300;
  color: var(--forest); letter-spacing: -.01em;
  max-width: 20ch; margin: 0 auto var(--sp-4);
}
.creed__sub {
  max-width: 58ch; margin: 0 auto;
  color: var(--olive); font-size: var(--fs-base);
}

/* ---------- 29. Purchase paths ----------
   Four routes, presented as a sequence of commitment rather than a
   pricing table. No "most popular" badge, no crossed-out prices. */
.grid--4 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.buy-card { display: flex; flex-direction: column; }
.buy-card__price {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 300;
  color: var(--forest); display: block; margin-bottom: var(--sp-2);
  line-height: 1;
}
.buy-card h3 { margin-bottom: var(--sp-3); }
.buy-card p { font-size: 0.9375rem; }
.buy-card__note {
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--bone-deep);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: .06em; color: var(--stone); text-transform: none;
}
.buy-card--feature { border-color: var(--brass); }
.buy-card--feature .buy-card__price { color: var(--brass); }