/* Jumping Intelligence — field notebook.
   Everything renders in its final, annotated state by default. The hidden
   starting states for animation only apply when JavaScript is running and the
   visitor has not asked for reduced motion (see the block at the end). */

:root {
  --paper: #FCFBF7;
  --white: #FFFFFF;
  --ink: #1D2733;
  --ink-2: #3A4552;
  --pencil: #5B6672;
  --pencil-light: #7A848F;
  --rule: #9AA3AD;
  --rule-light: #CBD2D9;
  --red: #C03A2B;
  --red-soft: rgba(192, 58, 43, 0.55);
  --tape: rgba(232, 219, 166, 0.78);
  --highlight: rgba(255, 222, 90, 0.78);
  --grid: rgba(70, 120, 160, 0.11);
  --font-body: Karla, "Helvetica Neue", Arial, sans-serif;
  --font-hand: Caveat, "Segoe Print", "Bradley Hand", cursive;
  --font-mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --shadow-card: 0 1px 2px rgba(29, 39, 51, 0.14), 0 10px 28px rgba(29, 39, 51, 0.08);
  --gutter: clamp(16px, 4vw, 48px);
  --margin-pad: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { color: var(--red); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
html:not(.js) [data-needs-js] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 10;
  min-height: 44px; padding: 12px 16px; background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header and page frame */

.site-header {
  max-width: 1240px; margin: 0 auto; padding: 14px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between;
  border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 22px; font: 400 14px var(--font-mono); }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
/* On phones the nav is one scrolling row; the right edge fades so the next link visibly peeks in. */
@media (max-width: 600px) {
  .site-header { row-gap: 0; }
  .site-nav { flex-wrap: nowrap; width: 100%; gap: 0 20px; padding-right: 40px; overflow-x: auto; scrollbar-width: none; }
  .site-nav.has-more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; white-space: nowrap; }
}

/* Tilted cards and stamps landing at 2.6× scale must never widen the page on a phone. */
.page { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); overflow-x: clip; }
.margin { border-left: 3px double var(--red-soft); padding-left: var(--margin-pad); }

.entry { padding: clamp(56px, 7vw, 96px) 0; border-top: 2px solid var(--ink); }
.entry--hero { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); border-top: 0; }

.meta {
  margin: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center;
  font: 400 13px var(--font-mono); color: var(--pencil);
  text-transform: uppercase; letter-spacing: 0.06em; --ls: 0.06em;
}
.meta .tag { color: var(--red); }
.replay {
  margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: none;
  font: 600 22px var(--font-hand); color: var(--pencil);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.replay:hover { color: var(--red); }

/* Type */

.display { margin: 0; font-size: clamp(54px, 7.4vw, 110px); line-height: 0.92; font-weight: 800; letter-spacing: -0.04em; }
.entry-title { margin: 16px 0 0; max-width: 15em; font-size: clamp(40px, 4.6vw, 62px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.appendix-heading { margin: 0; font-size: clamp(32px, 3.6vw, 46px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.lead { margin: 22px 0 0; max-width: 34em; font-size: 21px; line-height: 1.55; text-wrap: pretty; }
.copy { margin: 12px 0 0; max-width: 32em; font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.intro { margin: 16px 0 0; max-width: 42em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.muted { color: var(--pencil); }
.fine { margin: 10px 0 0; font-size: 14px; color: var(--pencil); }



/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper);
  font: 700 16px var(--font-body); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--paper); border-color: var(--red); color: var(--red); }
.btn--bare { background: transparent; border-color: transparent; color: var(--ink); padding: 0 14px; }
.btn--bare:hover { background: transparent; border-color: transparent; color: var(--red); }
.btn:disabled { opacity: 0.38; cursor: default; }
.btn:disabled:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ghost:disabled:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Paper, tape and stamps */

.paper { position: relative; background: var(--white); box-shadow: var(--shadow-card); transform: rotate(var(--r, 0deg)); }
.tape { position: absolute; top: -12px; width: 100px; height: 26px; background: var(--tape); transform: rotate(var(--r, 0deg)); transform-origin: left center; }
.stamp {
  display: inline-block; padding: 6px 14px;
  border: 4px solid currentColor; border-radius: 6px; color: var(--red);
  font: 500 22px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(var(--r, -10deg)); mix-blend-mode: multiply;
}

.circled { position: relative; display: inline-block; }
.circled > svg { position: absolute; left: -6%; top: -14%; width: 112%; height: 132%; overflow: visible; pointer-events: none; }

/* Diagrams have a wide composition and a vertical one for phones. */
.fig-wide, .fig-narrow { display: block; width: 100%; height: auto; }
.fig-narrow { display: none; max-width: 420px; }
@media (max-width: 600px) {
  .fig-wide { display: none; }
  .fig-narrow { display: block; }
}

.counter { margin: 28px 0 0; padding: 10px 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); font: 400 15px/1.9 var(--font-mono); }
.counter > div { display: flex; justify-content: space-between; gap: 16px; }
.counter dt { color: var(--pencil); }
.counter dd { margin: 0; }
.counter .is-red, .counter .is-red dt { color: var(--red); }
.status { margin: 14px 0 0; min-height: 48px; font: 400 14px/1.6 var(--font-mono); color: var(--pencil); }

/* Hero */

.hero-head { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; margin: 0; }
.hero-head .display { flex: 0 1 auto; }
.margin-note { flex: 1 1 200px; max-width: 260px; margin: 0 0 14px; font: 400 30px/1.05 var(--font-hand); color: var(--red); transform: rotate(-3deg); }
.hero-body { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: clamp(40px, 5vw, 64px); align-items: flex-start; }
.hero-copy { flex: 1 1 420px; min-width: 0; }
.hero-copy .lead + .lead { margin-top: 16px; }
.hero-figure { flex: 1.3 1 520px; min-width: 0; }
.fig-card { min-width: 0; margin: 0; padding: 22px 22px 16px; --r: 0.8deg; }
.fig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font: 400 12px var(--font-mono); color: var(--pencil); text-transform: uppercase; letter-spacing: 0.06em; }
.replay--figure { min-height: 44px; font-size: 20px; text-transform: none; letter-spacing: 0; }
.figure-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.fig-card > svg { margin-top: 8px; }
@media (max-width: 600px) {
  .hero-head { gap: 12px; }
  .hero-head .margin-note { margin-bottom: 0; font-size: 25px; }
  .hero-body { margin-top: 20px; }
  .hero-copy > .lead:first-child { margin-top: 0; font-size: 18px; line-height: 1.4; }
}

/* Experiment 01: the chessboard */

.split { display: flex; flex-wrap: wrap; gap: 48px 64px; margin-top: 20px; align-items: flex-start; }
.split > .col { flex: 1 1 420px; min-width: 0; }
.board-card { flex: 0 1 460px; min-width: 0; margin: 0; padding: 26px 26px 20px; --r: -1deg; }
.board-actions { margin-top: 16px; gap: 8px; }
.board-actions .btn { min-height: 44px; padding: 8px 12px; font-size: 15px; }
.board-card svg { display: block; width: 100%; height: auto; }
.board-stamp { position: absolute; right: 22px; top: 40%; background: rgba(255, 255, 255, 0.86); --r: -12deg; }
.board-reveal, .board-stamp { display: none; }
.is-revealed .board-reveal { display: inline; }
.is-revealed .board-stamp { display: inline-block; }
.gave-up { display: inline-block; margin: 14px 0 0; font: 400 27px var(--font-hand); color: var(--red); transform: rotate(-1.5deg); }
.board-noscript { margin: 0; font: 400 22px var(--font-hand); color: var(--pencil); }

/* Experiment 03: the engine */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 40px; margin-top: 40px; }
.step-num { position: relative; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.step-num svg { position: absolute; left: 0; top: 0; width: 52px; height: 52px; overflow: visible; }
.steps h3 { margin: 14px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.steps p { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--pencil); }
/* On phones each number sits beside its title instead of on a row of its own. */
@media (max-width: 600px) {
  .steps { gap: 24px; margin-top: 32px; }
  .steps > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 14px; }
  .step-num, .step-num svg { width: 44px; height: 44px; }
  .step-num { font-size: 24px; }
  .steps h3 { margin: 0; }
  .steps p { grid-column: 1 / -1; }
}
/* The engine's payoff: carry discoveries into the next research cycle. */

.loop-row { display: flex; flex-wrap: wrap; gap: 40px 64px; margin-top: clamp(40px, 5vw, 64px); align-items: flex-start; }
.loop-row > .col { flex: 1 1 440px; min-width: 0; }
.payoff-title { margin: 0; max-width: 18em; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; }
.loop-fig { flex: 1 1 420px; min-width: 0; max-width: 520px; margin: 0; }
.loop-fig svg { display: block; width: 100%; height: auto; }
.loop-fig figcaption { font: 400 24px var(--font-hand); color: var(--pencil); }

/* Appendices: an index whose rows fold open */

.appendices { margin-top: 22px; }
.appendix { border-top: 1px dashed var(--rule); }
.appendix:last-child { border-bottom: 1px dashed var(--rule); }
.appendix > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  min-height: 56px; padding: 16px 0; list-style: none; cursor: pointer;
}
.appendix > summary::-webkit-details-marker { display: none; }
.appendix-title { flex: 1 1 360px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.appendix > summary:hover .appendix-title { color: var(--red); }
.appendix-hint { display: inline-flex; align-items: center; gap: 10px; font: 400 22px var(--font-hand); color: var(--pencil); }
.appendix-hint svg { transition: transform 0.35s ease; }
.appendix[open] .appendix-hint svg { transform: rotate(90deg); }
.appendix-body { padding: 8px 0 56px; }

/* Histories and sources on recovered reports. */

.history-note { margin-top: 22px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.history-note > summary { min-height: 44px; padding: 10px 0; font-weight: 700; cursor: pointer; }
.history-note > p { margin: 8px 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.history-sources { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.history-sources a { display: inline-block; padding: 10px 0; text-underline-offset: 3px; }

/* The appendix: ideas as illustrated index cards */

.idx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.idx-card { display: flex; flex-direction: column; padding: 18px 20px 20px; }
.idx-card:nth-child(5n + 1) { --r: -0.8deg; }
.idx-card:nth-child(5n + 2) { --r: 0.4deg; }
.idx-card:nth-child(5n + 3) { --r: -0.4deg; }
.idx-card:nth-child(5n + 4) { --r: 0.8deg; }
.idx-head { padding-bottom: 10px; border-bottom: 2px solid rgba(192, 58, 43, 0.6); }
.idx-field { margin: 0; font: 400 12px var(--font-mono); color: var(--pencil); text-transform: uppercase; letter-spacing: 0.06em; }
.idx-card h4 { margin: 6px 0 0; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.idx-head a { color: inherit; text-decoration-style: dotted; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.idx-head a:hover { color: var(--red); text-decoration-color: currentColor; }
.idx-who { margin: 4px 0 0; font: 400 12.5px var(--font-mono); color: var(--pencil); }
/* Small sketches that show how an idea works. Each plays once when it is in view; ↻ replays it. */
.idx-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.idx-field .replay { flex: none; margin: -14px -6px -14px auto; white-space: nowrap; }
.idx-sketch { margin: 14px 0 0; }
.idx-sketch svg { display: block; width: 100%; height: auto; }
/* A sentence under a sketch stays HTML, so it keeps a readable size however small the drawing scales. */
.idx-sketch figcaption { margin: 6px 0 0; font: 400 20px/1.2 var(--font-hand); color: var(--pencil); text-align: center; text-wrap: balance; }
/* A relay lever pivots on its left contact; with motion it starts open and swings shut. */
@keyframes nb-switch { from { transform: rotate(-22deg); } to { transform: rotate(0deg); } }
.switch { transform-box: fill-box; transform-origin: 0 50%; }
@media screen and (prefers-reduced-motion: no-preference) {
  .js .switch { transform: rotate(-22deg); }
  .js .is-playing .switch { animation: nb-switch 280ms cubic-bezier(0.3, 1.5, 0.5, 1) var(--t, 0ms) both; }
  /* The appendices section is already playing; a sketch still waits for its own trigger. */
  .js .idx-sketch:not(.is-playing) :is(.ink, .hand, .shade, .switch) { animation: none; }
}
.idx-sources { margin: 10px 0 0; font: 400 12.5px/1.6 var(--font-mono); color: var(--pencil); }
.idx-sources a { text-underline-offset: 3px; }
.idx-body { margin: 8px 0 0; font-size: 16px; line-height: 26px; color: var(--ink-2); background-image: repeating-linear-gradient(transparent 0 25px, rgba(70, 120, 160, 0.2) 25px 26px); }

/* Footer */

.site-footer { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding: 14px 0 clamp(32px, 4vw, 48px); border-top: 1px dashed var(--rule); font: 400 13px var(--font-mono); color: var(--pencil); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Motion. Every move is something a hand does to a notebook: ink is drawn,
   notes are written, logs are typed, cards are taped, decisions are stamped.
   Sections get .is-playing once when they scroll into view; children set their
   own start (--t) and duration (--d).
   ------------------------------------------------------------------------- */

@keyframes nb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nb-write { from { clip-path: inset(-40% 100% -40% -10%); } to { clip-path: inset(-40% -15% -40% -10%); } }
@keyframes nb-type { from { width: 0; } to { width: calc(var(--n, 30) * (1ch + var(--ls, 0em)) + 2px); } }
@keyframes nb-tape { from { transform: rotate(var(--r, 0deg)) scaleX(0); } to { transform: rotate(var(--r, 0deg)) scaleX(1); } }
@keyframes nb-place {
  from { opacity: 0; transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 2.5deg)) scale(1.03); }
  to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}
@keyframes nb-stamp {
  0% { opacity: 0; transform: rotate(var(--r, -10deg)) scale(2.6); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--r, -10deg)) scale(1); }
}
/* nb-hl also draws the highlighter on recovered reports (discovery-bin.css). */
@keyframes nb-hl { from { background-size: 0% 80%; } to { background-size: 100% 80%; } }
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nb-pulse { from { stroke-opacity: 0.15; } to { stroke-opacity: 1; } }
@keyframes nb-travel { 0% { stroke-dashoffset: 0; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* Dots that ride a path exist in every mode; they only move when motion is allowed. */
.travel { stroke-dasharray: 0.001 0.999; stroke-dashoffset: 0; opacity: 0; }

@media screen and (prefers-reduced-motion: no-preference) {
  .js .ink { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .is-playing .ink { animation: nb-draw var(--d, 900ms) cubic-bezier(0.45, 0.05, 0.35, 1) var(--t, 0ms) both; }

  .js .hand { clip-path: inset(-40% 100% -40% -10%); }
  .js .is-playing .hand { animation: nb-write var(--d, 800ms) cubic-bezier(0.35, 0.1, 0.45, 1) var(--t, 0ms) both; }

  .js .type { display: inline-block; overflow: hidden; white-space: pre; vertical-align: bottom; width: 0; }
  .js .is-playing .type { animation: nb-type var(--d, 1000ms) steps(var(--n, 30), end) var(--t, 0ms) both; }
  /* On narrow screens a typed label may need to wrap, so it is written in instead of typed. */
  @media (max-width: 600px) {
    .js .type { width: auto; white-space: normal; overflow: visible; clip-path: inset(-40% 100% -40% -10%); }
    .js .is-playing .type { animation: nb-write var(--d, 1000ms) cubic-bezier(0.35, 0.1, 0.45, 1) var(--t, 0ms) both; }
  }

  .js .tape { transform: rotate(var(--r, 0deg)) scaleX(0); }
  .js .is-playing .tape { animation: nb-tape 360ms cubic-bezier(0.2, 0.8, 0.3, 1) var(--t, 0ms) both; }

  .js .placed { opacity: 0; }
  .js .is-playing .placed { animation: nb-place 560ms cubic-bezier(0.2, 0.9, 0.25, 1.12) var(--t, 0ms) both; }

  .js .stamp { opacity: 0; }
  .js .is-playing .stamp { animation: nb-stamp 440ms cubic-bezier(0.2, 1.5, 0.4, 1) var(--t, 0ms) both; }


  .js .shade, .js .rise { opacity: 0; }
  .js .is-playing .shade { animation: nb-fade 240ms ease-out var(--t, 0ms) both; }
  .js .is-playing .rise { animation: nb-rise 600ms cubic-bezier(0.2, 0.8, 0.3, 1) var(--t, 0ms) both; }

  .gap { animation: nb-pulse 900ms ease-in-out 3 alternate forwards; }

  .js .is-playing .travel { animation: nb-travel var(--d, 7000ms) linear var(--t, 0ms) 1 both; }
}