/* ================================================================
   CHALKLESS — Academic ivory, chalk-on-paper, serif accents
   Overrides the global ORIA theme for this page only.
   ================================================================ */

:root {
  --ink: #1A1714;
  --ink-2: #3A332B;
  --ink-3: #6B6358;
  --ink-4: #9A9185;
  --paper: #F5EFE2;
  --paper-2: #EFE7D6;
  --paper-3: #E6DCC6;
  --paper-warm: #FAF4E6;
  --accent: #9A3A1F;     /* oxblood / red pencil */
  --accent-2: #C2712A;   /* warm ochre */
  --rule: rgba(26, 23, 20, 0.12);
  --rule-2: rgba(26, 23, 20, 0.06);
}

html, body {
  background: var(--paper);
  color: var(--ink-2);
  /* `overflow-x: clip` (instead of hidden) lets descendant position:sticky
     work, and also keeps JS-fixed pinning from being clipped by ancestors. */
  overflow-x: clip;
}
html { overflow-x: clip !important; }
body { overflow-x: clip !important; }

/* Paper texture — subtle horizontal rule-lines like lined paper */
body {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(194, 113, 42, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(154, 58, 31, 0.05), transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(26,23,20,0.04) 31px 32px);
  background-attachment: fixed;
  color: var(--ink-2);
}

/* Hide the global node-network canvas */
#bgCanvas { display: none !important; }

/* Override main/nav/footer wrappers */
main, nav, footer { position: relative; z-index: 2; background: transparent; }

/* ---------- Nav ---------- */
.nav { background: transparent; }
.nav.scrolled {
  background: rgba(245, 239, 226, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
}
.nav-logo img { filter: none; border-radius: 4px; }
.nav-logo .wordmark { color: var(--ink); }
.nav-links a { color: var(--ink-3); }
.nav-links a:hover { color: var(--ink); }
.nav-links a.cta {
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
}
.nav-links a.cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(154,58,31,0.25);
}

/* ---------- Type ---------- */
.ck-serif {
  font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.ck-display {
  font-family: 'Instrument Serif', 'EB Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
}
.ck-display em {
  font-style: italic;
  color: var(--accent);
}
.ck-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.ck-mono.accent { color: var(--accent); }

/* Back link */
.ck-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  transition: color 220ms ease;
}
.ck-back:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.ck-hero {
  position: relative;
  padding: 150px 0 80px;
  min-height: 90vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.ck-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}
.ck-hero h1 {
  font-size: clamp(56px, 8vw, 120px);
  margin: 22px 0 28px;
}
.ck-hero .lede {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 560px;
  margin-bottom: 32px;
}
.ck-hero .tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
}
.ck-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,0.3);
}
.ck-tag.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Hero chalkboard preview */
.ck-hero-board {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #1F2520;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.03), transparent 60%);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(26,23,20,0.35),
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 0 0 10px #3A332B,
    0 0 0 12px #8A6B3F;
  padding: 32px;
  overflow: hidden;
  transform: rotate(-0.8deg);
}
.ck-hero-board svg {
  width: 100%; height: 100%;
  display: block;
}
.ck-chalk-stroke {
  stroke: #F5EFE2;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  filter: url(#ck-rough);
}
.ck-chalk-stroke.thin { stroke-width: 0.8; opacity: 0.5; }
.ck-chalk-stroke.thick { stroke-width: 2.2; opacity: 0.92; }
.ck-chalk-stroke.accent { stroke: #E8C27A; }
.ck-chalk-text { fill: #F5EFE2; font-family: 'Caveat', 'Kalam', cursive; opacity: 0.9; }

/* ---------- Wrap / section scaffolds ---------- */
.ck-section { padding: 120px 0; position: relative; }
.ck-section-head { margin-bottom: 60px; max-width: 760px; }
.ck-section-head .ck-mono { display: block; margin-bottom: 16px; }
.ck-section-head h2 {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 20px;
}
.ck-section-head .lede {
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
  max-width: 640px;
}

/* ---------- Meta strip ---------- */
.ck-meta-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 40px 0 0;
}
.ck-meta-cell {
  padding: 20px 24px 20px 0;
  border-right: 1px solid var(--rule);
}
.ck-meta-cell:last-child { border-right: none; }
.ck-meta-cell .k {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ck-meta-cell .v {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
}

/* ---------- The board (signature moment) ---------- */
/* Stage is tall so JS can pin the board for the duration of the scroll
   reconstruction. Pin starts at top of stage, becomes fixed while in the
   scroll window, and parks at the bottom of the stage when the window ends.
   520vh gives each of the 5 phases ~85vh of clear scroll room. */
.ck-board-stage { position: relative; height: 520vh; }
.ck-board-pin {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100vh - 90px);
  display: flex; align-items: center; justify-content: center;
}
.ck-board-pin.is-pinned {
  position: fixed;
  top: 70px;
  left: 0; right: 0;
}
.ck-board-pin.is-bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0; right: 0;
}

/* Ambient doodles fade the moment any phase begins revealing — keeps the
   board from stacking "resting" chalk under "live" chalk. */
.ck-ambient { opacity: 0.55; transition: opacity 700ms ease; }
.ck-board-frame.playing .ck-ambient,
.ck-board-frame.done .ck-ambient,
.ck-board-frame.finale .ck-ambient,
.ck-board-frame:has([data-phase].on) .ck-ambient { opacity: 0; }

/* Dust particles float subtly even at rest */
@keyframes ckDust { 0%,100% { transform: translateY(0); opacity:0.35; } 50% { transform: translateY(-6px); opacity:0.65; } }
.ck-dust circle { animation: ckDust 5s ease-in-out infinite; }
.ck-dust circle:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
.ck-dust circle:nth-child(3n) { animation-duration: 9s; animation-delay: -4s; }

/* Cursor hint — a chalk tip that pulses when idle */
@keyframes ckTipPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.ck-tip { animation: ckTipPulse 2.2s ease-in-out infinite; }

.ck-board-frame {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: #1F2520;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.03), transparent 60%);
  border-radius: 10px;
  box-shadow:
    0 40px 100px rgba(26,23,20,0.4),
    0 2px 0 rgba(255,255,255,0.04) inset,
    0 0 0 14px #3A332B,
    0 0 0 16px #8A6B3F,
    0 0 0 20px rgba(26,23,20,0.15);
  padding: 48px 60px;
  overflow: hidden;
}
.ck-board-frame svg {
  width: 100%; height: 100%;
  display: block;
}
.ck-phase-label {
  position: absolute;
  left: 28px; top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  padding: 12px 16px;
  background: rgba(31, 37, 32, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(245, 239, 226, 0.1);
  border-radius: 6px;
}
.ck-phase-label .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(245,239,226,0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ck-phase-label .v {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  color: #F5EFE2;
  font-style: italic;
  transition: color 400ms ease;
}
.ck-phase-label .v.active { color: #E8C27A; }
.ck-phase-legend {
  position: absolute;
  right: 28px; top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  padding: 12px 14px;
  background: rgba(31, 37, 32, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(245, 239, 226, 0.1);
  border-radius: 6px;
}
.ck-phase-legend .row {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(245,239,226,0.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 400ms ease, opacity 400ms ease;
  opacity: 0.55;
}
.ck-phase-legend .row.on {
  color: rgba(245,239,226,0.92);
  opacity: 1;
}
.ck-phase-legend .row .sw {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(245,239,226,0.25);
  border: 1px solid rgba(245,239,226,0.35);
}
.ck-phase-legend .row.on .sw {
  background: #E8C27A;
  border-color: #E8C27A;
  box-shadow: 0 0 10px rgba(232,194,122,0.55);
}

.ck-board-progress {
  position: absolute;
  left: 40px; right: 40px; bottom: 28px;
  height: 2px;
  background: rgba(245,239,226,0.12);
  border-radius: 2px;
  overflow: hidden;
  z-index: 10;
}
.ck-board-progress .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #E8C27A;
  box-shadow: 0 0 12px rgba(232,194,122,0.5);
  transition: width 180ms linear;
}
.ck-board-caption {
  text-align: center;
  margin-top: 32px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--ink-3);
  font-size: 17px;
}

/* Board drawn group visibility.
   Phases accumulate: once revealed they stay at full opacity so the whole
   reconstruction gets brighter as you scroll. The currently-unlocking phase
   gets an `.active` emphasis — a gold drop-shadow glow + a brief pop
   animation — so the sequence reads as one-phase-at-a-time instead of
   everything arriving simultaneously. */
.ck-board-frame [data-phase] {
  opacity: 0;
  transition: opacity 650ms ease, filter 650ms ease;
  transform-origin: center;
}
.ck-board-frame [data-phase].on { opacity: 1; }
.ck-board-frame [data-phase].active {
  opacity: 1;
  animation: ckPhasePop 1100ms ease-out;
}
.ck-board-frame.finale [data-phase].on,
.ck-board-frame.finale [data-phase].active {
  opacity: 1;
  filter: none;
  animation: none;
}
@keyframes ckPhasePop {
  0%   { filter: drop-shadow(0 0 0 rgba(232, 194, 122, 0)) brightness(1); }
  25%  { filter: drop-shadow(0 0 18px rgba(232, 194, 122, 0.7)) brightness(1.25); }
  100% { filter: drop-shadow(0 0 0 rgba(232, 194, 122, 0)) brightness(1); }
}

/* ---------- Two-col editorial body ---------- */
.ck-editorial {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
}
.ck-editorial .main p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 22px;
  max-width: 640px;
}
.ck-editorial .main p:first-of-type::first-line {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.ck-editorial .main p:first-of-type::first-letter {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 5.4em;
  float: left;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  color: var(--accent);
  font-style: normal;
}
.ck-editorial .main h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  margin: 48px 0 14px;
  letter-spacing: -0.015em;
}
.ck-editorial .main h3 .step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}
.ck-editorial .main ul,
.ck-editorial .main ol {
  list-style: none;
  padding: 0;
  margin: 14px 0 28px;
}
.ck-editorial .main ul li,
.ck-editorial .main ol li {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  padding: 8px 0 8px 28px;
  position: relative;
}
.ck-editorial .main ul li::before {
  content: '';
  position: absolute; left: 0; top: 18px;
  width: 14px; height: 1px;
  background: var(--accent);
}
.ck-editorial .main ol { counter-reset: ord; }
.ck-editorial .main ol li {
  counter-increment: ord;
}
.ck-editorial .main ol li::before {
  content: counter(ord, decimal-leading-zero);
  position: absolute; left: 0; top: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* Margin notes */
.ck-side-note {
  position: sticky;
  top: 120px;
}
.ck-side-note .label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.ck-side-note p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 12px;
  font-style: italic;
}
.ck-side-note ol,
.ck-side-note ul {
  list-style: none;
  padding: 0; margin: 0;
}
.ck-side-note li {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-2);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ck-side-note li:last-child { border-bottom: none; }
.ck-side-note li .step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-width: 64px;
  padding-top: 3px;
  flex-shrink: 0;
}
.ck-side-note li.todo { color: var(--ink-4); }
.ck-side-note li.todo .step { color: var(--ink-4); }

/* Tags row */
.ck-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Pull quote */
.ck-pull {
  margin: 48px -40px 48px;
  padding: 40px 60px;
  position: relative;
  background: var(--paper-2);
  border-radius: 4px;
  border-left: 2px solid var(--accent);
}
.ck-pull::before {
  content: '"';
  position: absolute;
  left: 20px; top: -10px;
  font-family: 'Instrument Serif', serif;
  font-size: 80px;
  color: var(--accent);
  line-height: 1;
}
.ck-pull blockquote {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
  max-width: 700px;
}

/* ---------- Pipeline strip (horizontal) ---------- */
.ck-pipeline {
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ck-pipe-cell {
  padding: 32px 24px;
  border-right: 1px solid var(--rule);
  background: var(--paper-warm);
  position: relative;
}
.ck-pipe-cell:last-child { border-right: none; }
.ck-pipe-cell::after {
  content: '→';
  position: absolute;
  right: -9px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Instrument Serif', serif;
  color: var(--accent);
  font-size: 18px;
  background: var(--paper-warm);
  padding: 0 4px;
  z-index: 2;
}
.ck-pipe-cell:last-child::after { display: none; }
.ck-pipe-cell .step {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ck-pipe-cell h4 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 8px;
}
.ck-pipe-cell p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------- Research card ---------- */
.ck-paper-card {
  margin-top: 28px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 48px 56px;
  position: relative;
  box-shadow: 0 22px 50px rgba(26,23,20,0.08);
}
.ck-paper-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  pointer-events: none;
}
.ck-paper-card .k {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ck-paper-card h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 8px 0 28px;
  max-width: 780px;
}
.ck-paper-meta {
  display: flex; gap: 48px; flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.ck-paper-meta .pair {
  display: flex; flex-direction: column; gap: 4px;
}
.ck-paper-meta .pair .k {
  margin-bottom: 0;
  color: var(--ink-3);
}
.ck-paper-meta .pair .v {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 17px;
  color: var(--ink);
}
.ck-paper-card .summary {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 720px;
  margin-bottom: 20px;
}

/* ---------- Footer override ---------- */
footer {
  background: var(--paper-2);
  border-top: 1px solid var(--ink);
  color: var(--ink-3);
  backdrop-filter: none;
}
.foot-brand img { filter: none; }
.foot-brand .wordmark { color: var(--ink); }
.foot-brand p { color: var(--ink-3); }
.foot-col h4 { color: var(--ink); }
.foot-col a { color: var(--ink-3); }
.foot-col a:hover { color: var(--accent); }
.foot-bottom { color: var(--ink-3); border-top-color: var(--rule); }

/* ---------- Reveal ---------- */
.ck-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.ck-reveal.in { opacity: 1; transform: translateY(0); }
.ck-reveal.d1 { transition-delay: 80ms; }
.ck-reveal.d2 { transition-delay: 160ms; }

@media (max-width: 900px) {
  .ck-hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .ck-editorial { grid-template-columns: 1fr; gap: 40px; }
  .ck-side-note { position: static; }
  .ck-meta-strip { grid-template-columns: 1fr 1fr; }
  .ck-pipeline { grid-template-columns: 1fr 1fr; }
  .ck-pipe-cell::after { display: none; }
  .ck-pull { margin: 32px 0; padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-reveal { opacity: 1; transform: none; transition: none; }
  .ck-board-stage { height: auto !important; padding: 40px 0; }
  .ck-board-pin,
  .ck-board-pin.is-pinned,
  .ck-board-pin.is-bottom {
    position: static !important;
    height: auto !important;
    padding: 0;
  }
  .ck-board-frame [data-phase] { opacity: 1 !important; }
  .ck-chalk-stroke { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}