/* ============================================================
   Seminar Schools — shared visual vocabulary
   Imported by every project page. Each project overrides
   --accent (and optionally --bg) for its own signal.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --display: 'Fraunces', Georgia, serif;
  --body: 'Newsreader', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --bg: #F5EBE4;
  --bg-rgb: 245, 235, 228;
  --fg: #2A1A14;
  --fg-soft: #5A4A40;
  --fg-fade: #8A7A70;
  --accent: #B85638;
  --accent-rgb: 184, 86, 56;
  --rule: rgba(42,26,20,0.10);
  --rule-soft: rgba(42,26,20,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "tnum";
  min-height: 100vh;
}

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

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -10000px; top: auto;
  background: var(--fg); color: var(--bg);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================================================
   TOPBAR — masthead with brand seal that rotates on scroll
   ============================================================ */
.topbar {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0 0.85rem;
  margin-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 50;
  transition: padding 0.3s ease;
}
.topbar.scrolled { padding: 0.7rem 0; }
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg);
  letter-spacing: 0.14em;
  font-weight: 500;
  transition: color 0.2s;
}
.topbar .brand:hover { color: var(--accent); }
.topbar .brand .seal {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  position: relative;
  transition: transform 0.4s ease;
}
.topbar .brand .seal::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.topbar.scrolled .brand .seal { transform: rotate(45deg); }
.topbar .right { color: var(--accent); letter-spacing: 0.14em; }

/* ============================================================
   WRAP — page container
   ============================================================ */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 1.5rem 5rem; position: relative; }

/* ============================================================
   VERTICAL DESCENT MARKER — Roman numeral + label running vertically
   pinned to the side of each section
   ============================================================ */
.tier-label-vertical {
  position: absolute;
  top: 1.5rem; left: -3.5rem;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.tier-label-vertical .num {
  font-family: var(--display); font-style: italic;
  font-size: 1.2rem; color: var(--accent);
  font-weight: 500;
}
.tier-label-vertical .label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-fade);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .tier-label-vertical { display: none; }
}

/* ============================================================
   EYEBROW + HEADLINE + LEDE — opening cadence
   ============================================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
}
h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
  color: var(--fg);
}
h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.lede {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  color: var(--fg-soft);
  margin-bottom: 4rem;
  max-width: 32em;
}

/* ============================================================
   TIER SECTIONS — each has its own descent marker
   ============================================================ */
section.tier {
  position: relative;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid var(--rule-soft);
}
section.tier:first-of-type {
  border-top: 1px solid var(--fg);
  margin-top: 1rem;
  padding-top: 3rem;
}
section.tier .section-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-fade);
  margin-bottom: 0.85rem;
}
section.tier h2 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 1.25rem;
  color: var(--fg);
}
section.tier p {
  margin-bottom: 1.1rem;
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
}
section.tier p a {
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  transition: background 0.15s, border-color 0.15s;
}
section.tier p a:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-bottom-color: var(--accent);
}

/* ============================================================
   DROPCAP — first letter of first body paragraph in display face
   ============================================================ */
section.tier p.dropcap::first-letter,
.body.dropcap::first-letter {
  font-family: var(--display);
  font-weight: 500;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.12em -0.05em 0;
  color: var(--accent);
}

/* ============================================================
   REVEAL — entries fade up as they enter viewport
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.reveal-in,
.reveal-in .reveal { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   STATUS BADGES — for project listings (Live, Forthcoming, etc.)
   ============================================================ */
.status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

/* ============================================================
   CTA — bordered button with mono uppercase
   ============================================================ */
.cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.55rem 1rem;
  transition: all 0.2s;
}
.cta:hover { background: var(--accent); color: var(--bg); }

/* ============================================================
   ARTICLES SECTION — 2-way blog linking
   ============================================================ */
.articles-section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.articles-section h2.articles-head {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.articles-section .articles-intro {
  font-family: var(--display);
  color: var(--fg-soft);
  font-style: italic;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.article-list { list-style: none; padding: 0; margin: 0; }
.article-entry {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.article-entry:last-child { border-bottom: none; }
.article-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-fade);
  margin-bottom: 0.4rem;
}
.article-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.article-title a { color: var(--fg); transition: color 0.15s; }
.article-title a:hover { color: var(--accent); }
.article-excerpt {
  font-size: 0.95rem;
  color: var(--fg-soft);
  line-height: 1.55;
  margin: 0;
}
.articles-empty {
  font-family: var(--display);
  font-style: italic;
  color: var(--fg-fade);
  padding: 0.5rem 0;
}
.blog-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.blog-link:hover { opacity: 0.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  margin-top: 5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fg);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.foot a { color: var(--fg-soft); transition: color 0.2s; }
.foot a:hover { color: var(--accent); }

/* ============================================================
   DARK INVERSION — for projects whose theme is dark
   Apply via body class="theme-dark"
   ============================================================ */
body.theme-dark {
  --bg: #1A1A20;
  --fg: #E8E0CF;
  --fg-soft: #B5AC9A;
  --fg-fade: #7A7568;
  --rule: rgba(232,224,207,0.14);
  --rule-soft: rgba(232,224,207,0.07);
}



/* ============================================================
   RICH MIRROR — ported from home page substrate
   Classes: .titanic, .compound, .threshold-meta, .threshold-coords,
   .descent-marker (top-fixed nav), .body, .micro
   These let project pages mirror the home page's actual register
   ============================================================ */

/* Titanic banner headline — used for the project name as h1 */
.titanic {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.8rem, 8.5vw, 7rem);
  line-height: 0.95; letter-spacing: -0.025em;
  margin-bottom: 2rem;
  position: relative; z-index: 5;
  word-break: keep-all;
  text-wrap: balance;
  color: var(--fg);
}
.titanic em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Compound — large secondary headline used for section h2s */
.compound {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.8vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.02em;
  position: relative; z-index: 5;
  word-break: keep-all;
  margin-bottom: 1.25rem;
  color: var(--fg);
}
.compound em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Threshold-meta — italic display lede paragraph */
.threshold-meta {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--fg);
  opacity: 0.88;
  max-width: 38em;
  margin-bottom: 3rem;
}

/* Threshold-coords — label/value rows */
.threshold-coords {
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}
.threshold-coords .row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.threshold-coords .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.threshold-coords .val {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg);
}
@media (max-width: 600px) {
  .threshold-coords .row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* Body — primary prose register with subtle weight */
.body {
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--fg);
  max-width: 38em;
}
.body p { margin-bottom: 1.1rem; }
.body p a {
  color: var(--accent);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
  transition: background 0.15s;
}
.body p a:hover { background: rgba(var(--accent-rgb), 0.08); }

/* Micro — small caption text */
.micro {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Descent marker — top-right fixed indicator showing current section */
.descent-marker {
  position: fixed;
  top: 50%; right: 1.6vw;
  transform: translateY(-50%);
  z-index: 100;
  pointer-events: none;
}
.descent-marker .roman {
  font-family: var(--display); font-style: italic;
  font-size: 1.4rem; color: var(--accent);
  display: block; text-align: center;
  margin-bottom: 0.6rem;
  transition: color 0.3s;
}
.descent-marker .name {
  font-family: var(--sans); font-size: 0.62rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg); opacity: 0.7;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-block;
}
.descent-marker .ticks {
  margin-top: 1rem;
  display: flex; flex-direction: column;
  gap: 7px; align-items: center;
}
.descent-marker .tick {
  width: 1px; height: 12px;
  background: var(--fg); opacity: 0.2;
  transition: opacity 0.3s, height 0.3s, background 0.3s;
}
.descent-marker .tick.active {
  background: var(--accent);
  opacity: 1;
  height: 18px;
}
@media (max-width: 900px) {
  .descent-marker { display: none; }
}

/* The wrap needs left padding to clear the tier-label-vertical on the side */
.wrap.has-descent { padding-right: 4rem; }
@media (max-width: 900px) {
  .wrap.has-descent { padding-right: 1.5rem; }
}

/* ============================================================
   PORTED FROM HOME PAGE — open-transmission, status badges,
   word/char reveal, project nav strip
   ============================================================ */

/* Open-transmission affordance — terminal-prompt-styled link sitting in body prose */
.open-transmission {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #00ff41;
  background: #0a0908;
  border: 1px solid #00ff41;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  vertical-align: baseline;
  white-space: nowrap;
}
.open-transmission:hover {
  background: #00ff41;
  color: #0a0908;
  box-shadow: 0 0 16px rgba(0,255,65,0.55);
}
.open-transmission .prompt { opacity: 0.65; margin-right: 0.25em; }
.open-transmission .cursor {
  display: inline-block;
  animation: ot-blink 1.05s steps(2) infinite;
  margin-left: 0.05em;
}
@keyframes ot-blink { 50% { opacity: 0; } }

/* Status badge — in the threshold area, signals where the project is in its lifecycle */
.threshold-status {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 999px;
}

/* Project nav strip — small horizontal nav listing other projects */
.project-nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}
.project-nav a {
  color: var(--fg-soft);
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.project-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.project-nav a.current { color: var(--accent); }

/* Word-by-word and char-by-char reveal — for titanic and compound headings with .words class */
.titanic.words .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.compound.words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-in .titanic.words .char,
.titanic.words.reveal-in .char,
.reveal-in.titanic.words .char { opacity: 1; transform: translateY(0); }
.reveal-in .compound.words .word,
.compound.words.reveal-in .word,
.reveal-in.compound.words .word { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .titanic.words .char, .compound.words .word { transition: none; opacity: 1; transform: none; }
}

/* Geometry layer — each project page can drop its themed SVG into #geo */
#geo, #geo2 {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  color: var(--accent);
}
#geo {
  opacity: var(--geo-density, 0.08);
  transition: opacity 0.4s ease;
}
#geo2 {
  opacity: var(--geo2-density, 0.04);
  transition: opacity 0.4s ease;
}
#geo svg, #geo2 svg {
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
}
#geo svg {
  transform: scale(var(--geo-scale, 1.4)) translate(var(--geo-tx, 0px), var(--geo-ty, 0px));
  transform-origin: center center;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
#geo2 svg {
  transform: scale(var(--geo2-scale, 1.1)) translate(var(--geo2-tx, 60px), var(--geo2-ty, -40px));
  transform-origin: center center;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.geo-stroke { stroke: currentColor; fill: none; vector-effect: non-scaling-stroke; }
.wrap { position: relative; z-index: 5; }


/* Titanic word-keep — wrap chars in word-containers so words don't break mid-letter */
.titanic.words .word-keep {
  display: inline-block;
  white-space: nowrap;
}
.titanic.words .word-keep + .word-keep {
  margin-left: 0.25em;
}

/* ============================================================
   FIX: tier-label-vertical positions relative to its containing section,
   not relative to wrap. Without this, sections at the bottom of the page
   project their labels to the top-left.
   ============================================================ */
section, section.section, section.tier, section.articles-section {
  position: relative;
}


/* ============================================================
   UI POLISH — designer pass after audit
   - Rich footer with three columns
   - Status integrated with eyebrow rather than orphaned
   - Lighter threshold-coords dividers  
   - More prominent blog-link CTA
   - Mobile project-nav horizontal-scroll
   - Cleaner writing section header
   ============================================================ */

/* Rich footer */
.foot-rich {
  margin-top: 6rem;
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--fg-fade);
}
.foot-rich .foot-row-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.foot-rich .foot-label {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.foot-rich .foot-text {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-soft);
  text-transform: none;
  letter-spacing: 0;
  max-width: 30em;
}
.foot-rich .foot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.foot-rich .foot-list li {
  margin-bottom: 0.6rem;
}
.foot-rich .foot-list a {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.foot-rich .foot-list a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.foot-rich .foot-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
}
.foot-rich .foot-row-bottom a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}
@media (max-width: 720px) {
  .foot-rich .foot-row-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Status badge integrated with eyebrow instead of orphaned */
.threshold-status + .eyebrow,
.eyebrow + .threshold-status,
.threshold-status {
  margin-bottom: 1rem;
}
.threshold-status {
  display: inline-block;
  margin-right: 1rem;
}

/* Lighter threshold-coords — dividers softer, more whitespace */
.threshold-coords .row {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.85rem 0;
}
.threshold-coords .row:last-child {
  border-bottom: none;
}

/* More prominent "All articles in the blog" link */
.blog-link {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.blog-link:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Mobile project-nav: horizontal scroll instead of wrap */
@media (max-width: 720px) {
  .project-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.85rem 0;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .project-nav::-webkit-scrollbar { display: none; }
  .project-nav a {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Articles section — cleaner header with project register */
.articles-section .articles-head {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.articles-section .articles-intro {
  font-style: italic;
  color: var(--fg-soft);
  margin-bottom: 2rem;
  max-width: 38em;
}

/* Empty article state — slightly more visual */
.articles-empty {
  padding: 1.5rem 0;
  font-style: italic;
  color: var(--fg-fade);
}

/* Remove redundant top border on first section when project-nav precedes */
.project-nav + section.tier:first-of-type,
.project-nav + main > section.tier:first-of-type,
.project-nav ~ * section.tier:first-of-type {
  border-top: none;
  padding-top: 1rem;
  margin-top: 0;
}
/* Also: when section comes right after project-nav inside <main> */
.project-nav + main section.tier:first-of-type {
  border-top: none;
}


/* CRITICAL FIX: override .foot display:flex when .foot-rich is also applied */
.foot.foot-rich {
  display: block;
}
.foot.foot-rich .foot-row-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.foot.foot-rich .foot-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
  .foot.foot-rich .foot-row-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .foot.foot-rich .foot-row-bottom {
    flex-direction: column;
    gap: 1rem;
  }
}


/* Status badge + eyebrow integration */
.threshold-status {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.6rem;
  margin-right: 0;
}
/* When eyebrow follows, tighten the spacing */
.threshold-status + .eyebrow {
  margin-top: 0;
}


/* ============================================================
   DESIGNER PASS — content density vs visual ambition
   Sections with sparse content shouldn't take 800px of vertical
   space. Tighten the rhythm.
   ============================================================ */
section.tier {
  padding: 2.5rem 0 2rem;
  min-height: auto;
}
section.tier:first-of-type {
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}
section.tier:last-of-type {
  padding-bottom: 1.5rem;
}
section.tier .body p {
  margin-bottom: 1.1rem;
}
section.tier .body p:last-child {
  margin-bottom: 0;
}
/* reduce gap between rule and next tier */
section.tier {
  border-top: 1px solid var(--rule-soft);
}
section.tier:first-of-type {
  border-top: none;
}

/* threshold-coords lighter — less utilitarian feel */
.threshold-coords {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.threshold-coords .row {
  padding: 0.65rem 0;
}

/* compound h2 — less giant on short-content pages */
h2.compound {
  margin-bottom: 1rem;
}

/* ============================================================
   PER-PROJECT GEOMETRY TREATMENTS
   These layer on top of the base mandala generator. Each project
   gets a distinguishing visual signature beyond the parameters
   already varied in the generator presets.
   ============================================================ */

/* OHM DOME — breathing pulse at calm respiration rate (12 breaths/min) */
@keyframes ohm-breathe {
  0%   { --geo-breathe: 1.000; }
  50%  { --geo-breathe: 1.025; }
  100% { --geo-breathe: 1.000; }
}
.project-ohm-dome #geo,
.project-ohm-dome #geo2 {
  animation: ohm-breathe 5s ease-in-out infinite;
  transform-origin: center center;
}
.project-ohm-dome #geo > svg {
  transform: scale(var(--geo-breathe, 1));
  transform-origin: center center;
  transition: none;
}
@property --geo-breathe {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* MARGINALIA — geometry only in left/right gutters, content column clean */
.project-marginalia #geo,
.project-marginalia #geo2 {
  -webkit-mask-image: linear-gradient(to right,
    black 0%, black 22%,
    transparent 32%, transparent 68%,
    black 78%, black 100%);
  mask-image: linear-gradient(to right,
    black 0%, black 22%,
    transparent 32%, transparent 68%,
    black 78%, black 100%);
}

/* TEACHER RESOURCES — faint rectangular grid behind the gasket */
.project-teacherresources body,
body.project-teacherresources {
  background-image:
    linear-gradient(to right, rgba(60, 40, 24, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60, 40, 24, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  background-attachment: fixed;
}

/* BLOG — depth of field, secondary gasket blurred (background layer) */
.project-florilegium #geo2 {
  filter: blur(2.5px);
}
.project-florilegium #geo {
  filter: none;
}

/* ============================================================
   THE TITANIC PASS — push the design language past generic editorial
   1. Make titanic h1 actually titanic — bleed out of wrap
   2. Drop caps on first body paragraph of each section
   3. Per-project section dividers (project-specific glyph)
   4. Marginalia: two-column with marginal annotations
   ============================================================ */

/* TITANIC HEADINGS — break out of the wrap, much larger */
h1.titanic {
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-left: -0.05em;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
h1.titanic em {
  font-style: italic;
  display: inline;
}

/* On wide viewports, allow the titanic h1 to extend past the wrap */
@media (min-width: 1100px) {
  .wrap > .threshold > h1.titanic,
  main > .threshold > h1.titanic {
    margin-right: -8vw;
  }
}

/* DROP CAPS on first paragraph after compound h2 */
section.tier .body > p:first-child::first-letter,
section.tier .body p.dropcap::first-letter {
  font-family: var(--display);
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.05em 0.12em 0 0;
  margin-top: 0.05em;
  font-weight: 500;
  color: var(--accent);
  font-style: normal;
}
/* Drop cap spacing fix on dark themes */
.theme-dark section.tier .body > p:first-child::first-letter {
  color: var(--accent);
}

/* PER-PROJECT SECTION DIVIDER MARKS */
/* Replace the section.tier border-top with a centered project-specific mark */
section.tier {
  border-top: none;
  position: relative;
  padding-top: 4rem;
}
section.tier:first-of-type {
  padding-top: 1.5rem;
}
section.tier::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: var(--rule-soft);
}
section.tier:first-of-type::before {
  display: none;
}
/* Centered glyph mark on top of the divider line */
section.tier::after {
  content: "◊";
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  background: var(--bg);
  padding: 0 0.8rem;
  line-height: 1;
  opacity: 0.7;
}
section.tier:first-of-type::after {
  display: none;
}

/* PER-PROJECT GLYPHS for the section divider mark */
.project-agora section.tier::after { content: "◉"; }     /* circle within circle — gathering */
.project-sabachtan-seminar section.tier::after { content: "✕"; }  /* the cross — sabachtan */
.project-ohm-dome section.tier::after { content: "⬡"; }   /* hexagon — geodesic */
.project-nutrition section.tier::after { content: "❦"; }  /* fleuron — botanical */
.project-marginalia section.tier::after { content: "§"; } /* section mark — annotation */
.project-teacherresources section.tier::after { content: "▦"; }  /* grid — catalog */
.project-florilegium section.tier::after { content: "❀"; } /* flower — assemblage */

/* MARGINALIA TWO-COLUMN — main text in center column, marginal annotations in gutter */
.project-marginalia main.wrap {
  position: relative;
}
@media (min-width: 1100px) {
  .project-marginalia .threshold,
  .project-marginalia section.tier {
    position: relative;
  }
  .project-marginalia .marginalia-note {
    position: absolute;
    right: -240px;
    top: 0;
    width: 200px;
    font-family: var(--display);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--accent);
    opacity: 0.85;
    padding-left: 1.2rem;
    border-left: 1px solid var(--rule);
    transform: rotate(-1deg);
    transform-origin: left top;
  }
  .project-marginalia .marginalia-note.left {
    right: auto;
    left: -240px;
    text-align: right;
    padding-left: 0;
    padding-right: 1.2rem;
    border-left: none;
    border-right: 1px solid var(--rule);
    transform: rotate(1deg);
    transform-origin: right top;
  }
  .project-marginalia .marginalia-note .scribble {
    display: block;
    font-family: var(--display);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
    color: var(--accent);
    transform: rotate(-3deg);
    transform-origin: left bottom;
    line-height: 0.9;
  }
}
@media (max-width: 1099px) {
  .project-marginalia .marginalia-note {
    display: block;
    margin-top: 1rem;
    font-style: italic;
    color: var(--accent);
    font-size: 0.9rem;
    border-left: 2px solid var(--accent);
    padding-left: 0.8rem;
    opacity: 0.85;
  }
  .project-marginalia .marginalia-note .scribble { display: none; }
}

/* SABACHTAN — right-align the threshold lede (the cry) */
.project-sabachtan-seminar .threshold .lede {
  text-align: right;
  margin-left: auto;
  max-width: 28em;
}

/* NUTRITION — first compound h2 of each section uses an inline botanical mark */
.project-nutrition section.tier > .section-meta::before {
  content: "❦ ";
  color: var(--accent);
  font-size: 1.1em;
  margin-right: 0.5rem;
  opacity: 0.8;
}

/* OHM DOME — section meta as monospace tech-readout */
.project-ohm-dome section.tier > .section-meta {
  font-family: var(--mono);
  letter-spacing: 0.22em;
  color: var(--accent);
  font-size: 0.65rem;
}
.project-ohm-dome section.tier > .section-meta::before {
  content: "⬡ ";
  margin-right: 0.4rem;
}

/* TEACHER RESOURCES — material headers as catalog tabs */
.project-teacherresources section.tier > .section-meta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 0.3rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  border-radius: 2px 2px 0 0;
}

/* FLORILEGIUM — newspaper-style multi-column for the curatorial blockquote */
.project-florilegium .curatorial {
  font-family: var(--body);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.65;
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--rule-soft);
  border-left: none;
  padding: 1.5rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .project-florilegium .curatorial {
    column-count: 1;
  }
}