/* =================================================================
   ONTO — "The Manuscript"
   A business ontology derived through editorial oversight.
   Typeface: Etna (Adobe Typekit)
   ================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

:root {
  /* Paper & ink */
  --paper:      #f2ede1;
  --paper-2:    #ece5d5;
  --paper-deep: #e6ddc9;
  --ink:        #1b1712;
  --ink-soft:   #554d40;
  --ink-faint:  #8a8072;
  --rule:       rgba(27,23,18,0.16);

  /* The editor's red */
  --red:        #cc3a24;
  --red-deep:   #a82c18;

  /* Ontology tag categories (dark editor hero) */
  --c-object:   #d8a53a;
  --c-actor:    #57bd8b;
  --c-action:   #b6a591;
  --c-flag:     #db5442;

  /* Highlighter set (translucent, multiply) */
  --hl-yellow:  rgba(255, 222, 74, 0.55);
  --hl-green:   rgba(150, 224, 120, 0.52);
  --hl-pink:    rgba(255, 122, 158, 0.48);
  --hl-purple:  rgba(190, 148, 240, 0.48);

  /* Type */
  --serif: "etna", "Iowan Old Style", "Palatino", Georgia, serif;
  --cond:  "etna-condensed", "etna", Georgia, serif;
  --xcond: "etna-xx-condensed", "etna-condensed", Georgia, serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif; /* accent + small copy */
  --hand:  "adobe-handwriting-ernie", "Bradley Hand", cursive; /* sticky notes */
  --plantin: "plantin", "Plantin", "Times New Roman", Georgia, serif; /* the blind-spot section */
  --loretta: "loretta", "Iowan Old Style", Georgia, serif; /* hero + thesis */
  --essonnes: "essonnes-text", "Didot", "Playfair Display", Georgia, serif; /* hero alt */

  --measure: 66ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
body {
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.5), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  line-height: 1.5;
  overflow-x: hidden;
}

/* Faint paper grain vignette fixed over everything */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: inset 0 0 220px rgba(70,55,35,0.10);
  mix-blend-mode: multiply;
}

::selection { background: var(--hl-yellow); color: var(--ink); }

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

/* ---------- Layout scaffolding ---------- */
.wrap { width: min(1180px, 92vw); margin-inline: auto; }
section { position: relative; }

/* Section label — condensed, given real weight (no whisper-small eyebrows) */
.slug {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(0.92rem, 1.15vw, 1.06rem);
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.7em;
}
.slug::before {
  content: ""; width: 32px; height: 2px; background: var(--red);
  display: inline-block; transform-origin: left; flex-shrink: 0;
}
.slug .no { color: var(--red); font-variant-numeric: tabular-nums; }

/* ---------- Fixed chrome ---------- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(18px, 5vw, 48px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }
.brand {
  display: inline-flex; align-items: center; color: var(--ink);
  transition: color .45s var(--ease);
}
.brand .logo { height: 40px; width: auto; display: block; }
.brand .logo path { fill: currentColor; }
.brand .o-mark {
  position: relative; display: inline-block;
}
/* the circled/underscored 'o' from the logo */
.brand .o-mark::after {
  content: ""; position: absolute; left: 50%; bottom: 0.12em;
  width: 0.62em; height: 0.62em; transform: translateX(-50%);
  border: 1.4px solid var(--ink); border-radius: 50%;
  clip-path: inset(45% 0 0 0);   /* only the lower arc shows */
}
.masthead nav {
  font-family: var(--sans); font-weight: 700;
  letter-spacing: 0.01em; font-size: 0.96rem; color: var(--ink-soft);
  display: flex; gap: clamp(16px, 2.2vw, 34px);
}
.masthead nav a { position: relative; }
.masthead nav .nav-x { display: inline-flex; align-items: center; }
.masthead nav .nav-x svg { width: 0.95em; height: 0.95em; fill: currentColor; display: block; }
.masthead nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.masthead nav a:hover::after { transform: scaleX(1); }

/* Scroll progress — a red margin rule that fills as you read */
.progress {
  position: fixed; top: 0; left: 0; bottom: 0; width: 2px; z-index: 115;
  background: transparent;
}
.progress span {
  position: absolute; top: 0; left: 0; width: 100%; height: var(--p, 0%);
  background: linear-gradient(var(--red), var(--red-deep));
}

/* =================================================================
   PROOF MARKS — hand-drawn SVG strokes, drawn on reveal
   ================================================================= */
.mark path, .mark line, .mark polyline, .mark ellipse, .mark circle {
  fill: none; stroke: var(--red); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800);
}
.mark.ink path, .mark.ink line, .mark.ink polyline,
.mark.ink ellipse, .mark.ink circle { stroke: var(--ink); }
.mark.drawn path, .mark.drawn line, .mark.drawn polyline,
.mark.drawn ellipse, .mark.drawn circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease);
}

/* =================================================================
   §0  HERO
   ================================================================= */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; }
.hero .wrap { display: grid; gap: clamp(28px, 4vh, 54px); }
.hero-left { display: grid; gap: clamp(24px, 3.4vh, 46px); align-content: center; }
.hero-right { align-self: center; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(44px, 6vw, 104px); }
  .hero-right { border-left: 1px solid var(--rule); padding-left: clamp(30px, 4vw, 70px); }
}
.hero-alt-label {
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.01em;
  color: var(--ink-faint); margin-bottom: clamp(18px, 3vh, 34px);
}
.hero-alt {
  font-family: var(--essonnes); font-weight: 400; letter-spacing: -0.005em;
  font-size: clamp(2rem, 5.2vw, 4.6rem); line-height: 1.02; max-width: 13ch;
}
.hero-alt em { font-style: italic; }

/* =================================================================
   §0·b  DARK EDITOR HERO — the app's tagging experience + proof marks
   ================================================================= */
.hero.hero-edit {
  display: grid; place-items: center; text-align: center;
  background: #141210; color: #ece4d3; overflow: hidden;
}
.hero-edit .edit-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(0,0,0,0.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)' opacity='0.04'/%3E%3C/svg%3E");
}
.edit-stage { position: relative; z-index: 1; display: grid; justify-items: center; width: min(1280px, 96vw); }
.edit-status {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.72rem; color: var(--c-flag); font-weight: bold; display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(40px, 4vh, 88px); transition: color .6s var(--ease);
}
.edit-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-flag);
  box-shadow: 0 0 10px rgba(219,84,66,0.6); transition: all .6s var(--ease); }
.edit-stage.resolved .edit-status { color: #7aa886; }
.edit-stage.resolved .edit-status .dot { background: var(--c-actor); box-shadow: 0 0 12px rgba(87,189,139,0.7); }

.hero-edit .edit-line {   /* scoped to out-specify the stale .hero h1 rule */
  font-family: var(--loretta); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 3.8vw, 3.4rem); max-width: 100%;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start;
  gap: 0.1em 0.26em; white-space: nowrap;
}
.m-break { display: none; }
@media (max-width: 760px) {
  /* stack the sentence on two deliberate lines at a size the words deserve */
  .hero-edit .edit-line {
    flex-wrap: wrap; white-space: normal;
    font-size: clamp(1.9rem, 8.6vw, 2.6rem);
  }
  .m-break { display: block; flex-basis: 100%; height: 0; }
  .tok[data-cat="action"] .tag { display: none; }  /* lose the RISK chip — line one stays clean */
  /* keep "define?" on-screen at the line end, tucked below the ENTITY chip
     (scoped to beat the base rule below) */
  .hero-edit .tok-flag .proof-note { left: auto; right: 0; top: calc(100% + 56px); }
}
.edit-line .w { color: #ece4d3; }
.edit-line .tok { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.edit-line .tok .wt { position: relative; transition: color .4s, text-shadow .4s; }
.tok[data-cat="object"] .wt { color: var(--c-object); }
.tok[data-cat="actor"]  .wt { color: var(--c-actor); }
.tok[data-cat="action"] .wt { color: var(--c-action); font-style: italic; }
.edit-line .tok .tag {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.6rem; line-height: 1; padding: 5px 9px; border-radius: 6px; margin-top: 0.9em;
  border: 1px solid; opacity: 0; transform: translateY(-7px); white-space: nowrap;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.tok[data-cat="object"] .tag { color: var(--c-object); border-color: rgba(216,165,58,0.5); background: rgba(216,165,58,0.08); }
.tok[data-cat="actor"]  .tag { color: var(--c-actor);  border-color: rgba(87,189,139,0.5); background: rgba(87,189,139,0.08); }
.tok[data-cat="action"] .tag { color: var(--c-action); border-color: rgba(182,165,145,0.45); background: rgba(182,165,145,0.06); }
.tok.show .tag { opacity: 1; transform: none; }
.tok:hover .wt { text-shadow: 0 0 26px currentColor; }

/* the flagged word: proof marks stand in for the app's "needs definition" tooltip */
.tok-flag { cursor: pointer; }
.tok-flag .proof { position: absolute; top: 0; left: 0; right: 0; height: 1.02em; pointer-events: none; z-index: 2; }
.tok-flag .proof-circle { position: absolute; left: -13%; top: -22%; width: 126%; height: 152%; overflow: visible; }
.hero-edit .proof-circle path { stroke: var(--c-flag); stroke-width: 1.6; }
.hero-edit .proof-circle.drawn path { animation: heroCircleDraw 1.1s var(--ease) forwards; }
@keyframes heroCircleDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.tok-flag .proof-note {
  position: absolute; top: 108%; left: 96%; right: auto; font-family: var(--hand);
  color: var(--c-flag); font-size: 1.6rem; transform: rotate(-6deg); white-space: nowrap;
  opacity: 1; animation: proofNoteIn .5s var(--ease) 1.35s backwards;   /* lands with the circle */
}
@keyframes proofNoteIn { from { opacity: 0; } to { opacity: 1; } }
.tok-flag .proof-note::after {   /* hand-drawn tick pointing up-left into the circled word */
  content: ""; position: absolute; top: -0.78rem; left: -0.5rem; width: 12px; height: 15px;
  border-left: 1.5px solid var(--c-flag); border-top: 1.5px solid var(--c-flag);
  border-radius: 3px 0 0 0; transform: rotate(-12deg);
}
.tok-flag .def-card { display: none; }   /* the definition surfaces in the hint line instead */
/* the green "defined" underline sweeps in on resolve */
.tok-flag .wt::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.05em; height: 2px;
  background: var(--c-actor); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.tok-flag.defined .wt::after { transform: scaleX(1); }
.tok-flag.defined .proof-circle, .tok-flag.defined .proof-note { opacity: 0; transition: opacity .5s var(--ease); }
.tok-flag.defined .def-card { opacity: 1; transform: translate(-50%, 0); }
.tok-flag.defined .tag { border-color: var(--c-actor); color: var(--c-actor); }
.tok-flag.defined .tag::after { content: " ✓"; }

/* editable headline — the real browser caret, tinted flag-red */
.edit-line[contenteditable] { caret-color: var(--c-flag); outline: none; cursor: text; }
.edit-line[contenteditable] .tag,
.edit-line[contenteditable] .proof,
.edit-line[contenteditable] .def-card { cursor: default; }
.edit-foot {
  position: relative; margin-top: clamp(38px, 7vh, 84px);
  width: min(62ch, 92vw); display: grid; place-items: center; text-align: center;
}
.edit-hint {
  grid-area: 1 / 1; font-family: var(--sans); font-size: 0.82rem;
  letter-spacing: 0.02em; color: #6f675a; transition: opacity .5s var(--ease);
}
.edit-hint b { color: var(--c-actor); font-weight: 700; }
.edit-stage.resolved .edit-hint { opacity: 0; pointer-events: none; }

/* on resolve, the macro statement of what Onto does fades up in its place */
.resolve-copy {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s;
}
.edit-stage.resolved .resolve-copy { opacity: 1; transform: none; }
.resolve-copy .rc-lead {
  font-family: var(--loretta); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.1; color: #f0e8d7;
  margin-bottom: 0.6em;
}
.resolve-copy .rc-body {
  position: relative; text-align: center;
  font-family: var(--sans); font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  line-height: 1.5; color: #b3aa9a; max-width: 56ch; margin-inline: auto; margin-bottom: 1rem;
}
.resolve-copy .rc-body em { font-style: normal; color: var(--c-actor); font-weight: 600; }
/* type into an overlay while a hidden ghost reserves the wrapped height */
.resolve-copy .rc-body .ghost { visibility: hidden; }
.resolve-copy .rc-body .typed { position: absolute; inset: 0; }
.resolve-copy .rc-body.typing .typed::after {
  content: ""; display: inline-block; width: 0.5ch; height: 1.05em; margin-left: 1px;
  background: var(--c-flag); vertical-align: -0.16em;
  animation: caret-blink 1s steps(1) infinite;
}

/* scroll-for-more cue — fades in at the hero's bottom once it resolves */
.hero-scroll {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 44px); transform: translateX(-50%);
  z-index: 4; display: grid; justify-items: center; gap: 11px;
  opacity: 0; transition: opacity .7s var(--ease) .35s; pointer-events: none;
}
.hero-scroll.show { opacity: 1; }
.hs-label {
  font-family: var(--sans); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.24em; color: #7a7264;
}
.hs-track { position: relative; width: 1px; height: 42px; overflow: hidden;
  background: linear-gradient(#524d42, transparent); }
.hs-dot {
  position: absolute; left: 50%; top: -9px; width: 3px; height: 9px; border-radius: 2px;
  background: var(--c-flag); transform: translateX(-50%);
  animation: hs-fall 1.7s var(--ease) infinite;
}
@keyframes hs-fall {
  0%   { top: -9px; opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { top: 42px; opacity: 0; }
}

@media (max-width: 640px) {
  .tok-flag .def-card { white-space: normal; width: 15rem; font-size: 0.74rem; }
}

.hero .eyebrow { max-width: none; }
.slug { flex-wrap: nowrap; }
.slug > span { white-space: nowrap; }

.hero h1 {
  font-family: var(--loretta);
  font-weight: 300; line-height: 1.0;   /* needs Loretta Light added to the kit; falls back to 400 until then */
  font-size: clamp(2.4rem, 6.6vw, 5.8rem);
  letter-spacing: -0.02em; max-width: 15ch;
  position: relative;
}
.hero .lede { font-family: var(--loretta); }
.hero h1 em {
  font-style: italic; position: relative; white-space: nowrap;
}
/* hand underline under "Human-first" */
.hero h1 em .underline {
  position: absolute; left: -2%; right: -2%; bottom: -0.06em; width: 104%;
  height: 0.4em; overflow: visible;
}

.hero .lede {
  font-size: clamp(1.15rem, 2vw, 1.6rem); max-width: 34ch;
  line-height: 1.38; color: var(--ink-soft);
}
.hero .lede .circle-word { position: relative; color: var(--ink); white-space: nowrap; }
.hero .lede .circle-word svg {
  position: absolute; left: -18%; top: -32%; width: 136%; height: 168%;
  overflow: visible; pointer-events: none;
}
.hero .lede .strike { position: relative; color: var(--ink-faint); }
.hero .lede .strike svg {
  position: absolute; left: -6%; top: 42%; width: 112%; height: 14px; overflow: visible;
}

.hero .scroll-cue {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em;
  font-size: 0.92rem; color: var(--ink-soft); display: flex; align-items: center; gap: 12px;
}
.hero .scroll-cue .caret { width: 16px; height: 22px; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }
.hero .scroll-cue .caret { animation: bob 1.8s var(--ease) infinite; }

/* insertion caret cursor trailing pointer, only in hero */
.pen-caret {
  position: fixed; z-index: 300; pointer-events: none; width: 14px; height: 20px;
  opacity: 0; transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}

/* =================================================================
   §1  HIDDEN WORDS — words that connect into a sentence
   ================================================================= */
.hidden-sec { padding: 0; }
.hidden-sec .stage {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; gap: 44px;
}
/* workspace montage — printed plates that assemble in the margins as you scroll */
.thesis-montage {
  position: absolute; top: 0; left: 50%; width: 100vw; height: 100%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
}
.thesis-montage .mplate {
  position: absolute; transform-origin: center; opacity: 0; will-change: transform, opacity;
}
.thesis-montage .mplate img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  border: 6px solid #f6f1e6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03),
    0 26px 42px -24px rgba(40,28,12,0.55), 0 5px 12px rgba(40,28,12,0.16);
  filter: saturate(0.9) contrast(0.97) brightness(1.02) sepia(0.06);
}
.thesis-montage .mplate::before {   /* a strip of tape, as if pasted into the document */
  content: ""; position: absolute; top: -9px; left: 50%; width: 44px; height: 16px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(224,214,190,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.thesis-montage .mplate:nth-child(even)::before { transform: translateX(-50%) rotate(5deg); }
@media (max-width: 960px) {
  /* fewer, larger plates on mobile (set in the JS PLATES list); lighter frames */
  .thesis-montage .mplate img { border-width: 4px; }
  .thesis-montage .mplate::before { width: 32px; height: 12px; top: -7px; }
}
.hidden-sec .head { display: flex; justify-content: center; }
.hidden-sec .para {
  position: relative; z-index: 1; text-align: center; margin-inline: auto;
  font-family: var(--loretta);
  font-size: clamp(1.4rem, 2.7vw, 2.25rem); line-height: 1.5;
  max-width: 48ch; letter-spacing: -0.01em; font-weight: 400;
}
.hidden-sec .para .hw {
  position: relative; color: var(--ink-faint);
  transition: color .5s var(--ease);
}
.hidden-sec .para .hw.lit { color: var(--red); }
/* the connective line overlay sits above the paragraph */
.hidden-sec .link-layer {
  position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2;
}
.hidden-sec .link-layer path {
  fill: none; stroke: var(--red); stroke-width: 1.9; opacity: 0.9;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}

/* =================================================================
   §2  HIGHLIGHT ON SCROLL
   ================================================================= */
.hl-sec { padding: 20vh 0 15vh; min-height: 100svh; place-content: center; }
/* text left, Onto app screenshot right — running off the viewport edge */
.hl-inner {
  display: grid; gap: clamp(30px, 6vh, 54px); align-items: center;
  padding-left: 5vw;
}
.hl-text { max-width: 42ch; }
.hl-shot { position: relative; max-width: 50vw; }
.hl-shot img {
  display: block; width: calc(100% + 14vw); max-width: none; height: auto;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
  box-shadow: -22px 34px 66px -36px rgba(20,14,4,0.5), 0 2px 6px rgba(20,14,4,0.12);
}
.hl-shot.reveal { opacity: 0; transform: translateX(52px);
  transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hl-shot.reveal.in { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .hl-inner { padding-right: 5vw; }   /* mirror the left inset on mobile */
  .hl-shot { max-width: none; width: 100%; }
  .hl-shot img { width: 100%; }
}
@media (min-width: 900px) {
  .hl-inner {
    grid-template-columns: 1fr 1fr;   /* even split down the middle */
    gap: clamp(28px, 3vw, 60px);
    padding-left: max((100vw - 1180px) / 2, 4vw);
  }
  .hl-text, .hl-sec .prose { max-width: none; }   /* let the text fill its half */
  .hl-shot img { width: calc(100% + 22vw); border-radius: 14px; }
}
.hl-sec .prose {
  font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.5; max-width: 34ch;
  font-weight: 400; letter-spacing: -0.02em;
}
.prose-last {
  margin-top: 2rem;
  display: block;
  font-weight: bold;
}
.hl-sec .prose .hl {
  position: relative; padding: 0.02em 0.06em; margin: 0 -0.02em;
  background-size: 0% 100%; background-repeat: no-repeat;
  background-position: 0 0;
  transition: background-size .7s var(--ease), color .5s var(--ease);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: 2px;
}
.hl-sec .prose .hl.on { background-size: 100% 100%; }
.hl-sec .prose .hl[data-c="y"] { background-image: linear-gradient(var(--hl-yellow), var(--hl-yellow)); }
.hl-sec .prose .hl[data-c="g"] { background-image: linear-gradient(var(--hl-green), var(--hl-green)); }
.hl-sec .prose .hl[data-c="p"] { background-image: linear-gradient(var(--hl-pink), var(--hl-pink)); }
.hl-sec .prose .hl[data-c="v"] { background-image: linear-gradient(var(--hl-purple), var(--hl-purple)); }
.hl-sec .marginot {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft);
  max-width: 30ch; line-height: 1.4; padding-left: 18px;
  border-left: 1px solid var(--rule);
}

/* absolute section label (reused by the blind-spot section) */
.arc-slug { position: absolute; top: 90px; left: clamp(18px,4vw,48px); z-index: 6; }

/* =================================================================
   §5·c  THE VOCABULARY PROBLEM — the same confusion across three tools
   ================================================================= */
.babel { position: relative; overflow-x: clip; }
.babel .pin {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr);  /* track = viewport, so the
    copy stays centered even when the card row overflows both edges */
  align-content: center; justify-items: center;
  gap: clamp(18px, 3vh, 38px); padding: 8vh 0 5vh;
}
.babel-copy {
  width: min(1180px, 94vw); display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(14px, 2vh, 22px);
}
.babel-lead {
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(1.45rem, 3.3vw, 2.55rem); max-width: 36ch;
}
.babel-lead em { font-style: italic; }
/* resolution reads as a paragraph under the header */
.babel-resolve {
  max-width: 64ch; font-size: clamp(1rem, 1.45vw, 1.24rem); line-height: 1.5;
  color: var(--ink-soft); letter-spacing: -0.005em;
}
.babel-resolve b { color: var(--ink); font-weight: 700; }
.babel-resolve em { font-style: italic; color: var(--ink); }

/* three surfaces echoing the same confusion — each dressed as a different app */
.surfaces {
  width: min(1180px, 94vw); align-self: center;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(14px, 1.5vw, 26px);
  align-items: start;
}
.surface {
  background: rgba(255,255,255,0.5); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 44px 80px -54px rgba(40,30,10,0.5);
  display: flex; flex-direction: column; overflow: hidden;
}

/* window chrome bar — traffic-lights + app name so each shell reads as a distinct tool */
.chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid var(--rule); background: rgba(0,0,0,0.03);
}
.chrome .tl { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); opacity: 0.4; }
.chrome-name { margin-left: 6px; font-family: var(--sans); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

.surface-head {
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem; color: var(--ink);
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 7px;
}
.surface-head .hash { color: var(--ink-faint); }
.surface-head .live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-size: 0.6rem; font-weight: 700; color: #4f9d57; letter-spacing: 0.03em; }
.surface-head .live i, .surface-head .rec-dot { width: 7px; height: 7px; border-radius: 50%;
  background: #4f9d57; animation: livepulse 1.7s ease-out infinite; }
.surface-head .rec-dot { background: var(--red); }
.surface-head .rec-time { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.72); }
.surface-head .unread { margin-left: auto; font-weight: 700; font-size: 0.6rem; }
.surface-head .mail-ico { font-size: 0.9rem; line-height: 1; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(79,157,87,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(79,157,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,157,87,0); }
}
.surface-body { padding: clamp(12px,1.3vw,18px); display: flex; flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px); }

/* per-app identity: coloured header + tint --------------------------------- */
/* Recorder — dark capture bar */
.surface.transcript { background: rgba(250,248,243,0.62); }
.surface.transcript .surface-head { background: #26221d; color: #ece4d4; border-bottom-color: rgba(0,0,0,0.3); }
.surface.transcript .surface-head .rec-dot { background: #e5533b; }
/* Slack — aubergine */
.surface.slack { background: rgba(255,255,255,0.6); }
.surface.slack .surface-head { background: #3f0e40; color: #fff; border-bottom-color: rgba(0,0,0,0.25); }
.surface.slack .surface-head .hash { color: rgba(255,255,255,0.55); }
.surface.slack .surface-head .live { color: #8fe6ab; }
.surface.slack .surface-head .live i { background: #8fe6ab; }
/* Mail — steel-blue */
.surface.inbox { background: rgba(247,250,253,0.62); }
.surface.inbox .surface-head { background: #1f4f82; color: #fff; border-bottom-color: rgba(0,0,0,0.2); }
.surface.inbox .surface-head .unread { color: #ffd27a; }

/* per-app footer affordance — completes each window's illusion ------------- */
.surface-foot { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint);
  border-top: 1px solid var(--rule); display: flex; align-items: center; }
.tr-foot { gap: 9px; padding: 10px 14px; }
.tr-foot .wave { width: 68px; height: 14px; flex-shrink: 0; }
.tr-foot .wave polyline { fill: none; stroke: #e5533b; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.slack-input { padding: 10px 12px 12px; }
.slack-input span { flex: 1; padding: 8px 11px; border: 1px solid var(--rule); border-radius: 8px;
  background: rgba(255,255,255,0.75); color: var(--ink-faint); }
.mail-actions { gap: 16px; padding: 10px 14px; }
.mail-actions span { font-weight: 600; color: var(--ink-soft); }

/* reveal each item on scroll */
.bit { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bit.in { opacity: 1; transform: none; }

/* Slack message */
.msg { display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: start; }
.ava {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700; color: #fff; font-size: 0.95rem;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12);
}
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
  font-family: var(--sans); flex-wrap: wrap; }
.msg-head b { font-size: 0.9rem; font-weight: 700; }
.msg-head .dept { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: 0.01em; }
.msg-body p { font-size: clamp(0.9rem, 1.05vw, 1.02rem); line-height: 1.4; color: var(--ink); }
.msg-body p em { font-style: italic; color: var(--ink-soft); }

/* transcript line */
.tr { display: flex; flex-direction: column; gap: 3px; }
.tr-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--sans); }
.tr-head time { font-size: 0.64rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tr-head b { font-size: 0.78rem; font-weight: 700; }
.tr p { font-size: clamp(0.9rem, 1.05vw, 1.02rem); line-height: 1.4; color: var(--ink); }
.tr p em { font-style: italic; color: var(--ink-soft); }

/* email row */
.mail { display: flex; flex-direction: column; gap: 3px; padding-bottom: clamp(12px, 1.6vh, 18px);
  border-bottom: 1px solid var(--rule); }
.surface.inbox .surface-body > .mail:last-child { border-bottom: 0; padding-bottom: 0; }
.mail-top { display: flex; align-items: center; gap: 7px; font-family: var(--sans); }
.mail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.mail-top b { font-size: 0.8rem; font-weight: 700; }
.mail-top time { margin-left: auto; font-size: 0.66rem; color: var(--ink-faint); }
.mail-subj { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.mail-snip { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); line-height: 1.35; }

/* highlight the vocabulary words everywhere */
mark.k  { background: var(--hl-yellow); color: inherit; padding: 0 0.1em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.k2 { background: var(--hl-pink);   color: inherit; padding: 0 0.1em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* department colours (avatar fill + tag) */
.msg[data-dept="sales"]   .ava { background: #c0872b; } .msg[data-dept="sales"]   .dept { color: #9a6a1c; background: rgba(192,135,43,0.15); }
.msg[data-dept="support"] .ava { background: #4f9d57; } .msg[data-dept="support"] .dept { color: #3d7d44; background: rgba(79,157,87,0.15); }
.msg[data-dept="finance"] .ava { background: #cc4a34; } .msg[data-dept="finance"] .dept { color: #b23c27; background: rgba(204,74,52,0.14); }
.msg[data-dept="product"] .ava { background: #8a6bcf; } .msg[data-dept="product"] .dept { color: #6f52b0; background: rgba(138,107,207,0.16); }

/* mobile: keep the three-across row — middle card centered, siblings bleeding offscreen */
@media (max-width: 820px) {
  .surfaces {
    width: max-content;
    grid-template-columns: repeat(3, min(80vw, 340px));
    gap: clamp(12px, 3vw, 20px);
  }
}
@media (max-width: 640px) {
  .babel-lead br { display: none; }   /* let the header wrap naturally when narrow */
  .babel .pin { padding-top: 120px; } /* clear the fixed masthead */
}

/* =================================================================
   §5·d  WHAT THE CURSOR DOESN'T KNOW — dark prompt, typed on scroll
   ================================================================= */
.cursor-sec { position: relative; background: #14100b; color: #efe7d6; }
.cursor-sec::before {   /* faint screen grain + vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.04'/%3E%3C/svg%3E");
}
.cursor-sec .pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(34px, 6vh, 72px); padding: 0 6vw; z-index: 1;
}
.cursor-sec .arc-slug { color: #a89a80; }
.cursor-sec .arc-slug .no { color: var(--red); }
/* the archetypal blank box — a real prompt input the blind spots type into */
.prompt-stage { width: min(92vw, 720px); display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 28px); }

/* the chat window: fixed height, fade at the top; inside, a full-size track
   of messages slides up as each one sends — like a real chat scrolling */
.miss-log {
  height: clamp(240px, 38vh, 400px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
.log-track {
  display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px);
  transition: transform .55s var(--ease); will-change: transform;
}
.log-msg {
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity .5s var(--ease);
}
.log-msg.sent { opacity: 1; }
.log-bubble {
  font-family: var(--plantin); font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.3;
  color: #efe7d6; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px 16px 4px 16px; padding: 9px 16px 10px; max-width: 46ch;
}
/* the assistant's confident answers — each one demonstrates a blind spot */
.log-reply-msg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.log-reply-msg.sent { opacity: 1; }
.reply-text {
  font-family: var(--plantin); font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.3;
  color: #efe7d6; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px 16px 16px 4px; padding: 9px 16px 10px; max-width: 46ch;
}
/* the margin note — the old line, now annotating the failure it names */
.reply-note {
  font-family: var(--sans); font-size: clamp(0.7rem, 0.95vw, 0.8rem);
  color: #a89a80; padding-left: 8px; letter-spacing: 0.01em; line-height: 1.4;
}
.reply-note b {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.92em; margin-right: 0.8em;
}
.log-reply-msg[data-tag="context"]     .reply-note b { color: #e6b34d; }
.log-reply-msg[data-tag="drift"]       .reply-note b { color: #86ce8b; }
.log-reply-msg[data-tag="determinism"] .reply-note b { color: #b89ae8; }
.log-reply-msg[data-tag="provenance"]  .reply-note b { color: #7fb3e0; }

/* the last question — the one worth keeping */
.log-msg.q .log-bubble { border-color: rgba(204,58,36,0.4); background: rgba(204,58,36,0.09); }
.log-msg.q .log-bubble em { font-style: italic; color: #fff; }

/* the reply that never comes — an assistant bubble stuck on "thinking" */
.log-reply {
  display: flex; justify-content: flex-start;
  opacity: 0; transition: opacity .5s var(--ease);
}
.log-reply.show { opacity: 1; }
.reply-bubble {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px 16px 16px 4px; padding: 13px 16px;
}
.reply-bubble i {
  width: 6px; height: 6px; border-radius: 50%; background: #cdc1a9;
  animation: think 1.25s ease-in-out infinite;
}
.reply-bubble i:nth-child(2) { animation-delay: 0.18s; }
.reply-bubble i:nth-child(3) { animation-delay: 0.36s; }
@keyframes think {
  0%, 60%, 100% { opacity: 0.25; transform: none; }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

.prompt-box {
  background: #1c1711; border: 1px solid rgba(239,231,214,0.16); border-radius: 20px;
  padding: clamp(14px, 1.8vh, 20px) clamp(16px, 1.8vw, 22px) clamp(12px, 1.5vh, 16px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px);
}
.prompt-line {
  font-family: var(--plantin); font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.3; color: #efe7d6; min-height: 1.35em;
}
.prompt-ph { display: none; color: rgba(239,231,214,0.32); }
.prompt-box.empty .prompt-ph { display: inline; }
.prompt-caret {
  display: inline-block; width: 0.5ch; height: 1.04em; vertical-align: -0.16em;
  margin-left: 3px; background: var(--red);
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.prompt-tools { display: flex; align-items: center; }
.pt-btn {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(239,231,214,0.18); color: rgba(239,231,214,0.55);
}
.pt-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-send { margin-left: auto; background: rgba(239,231,214,0.08);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.prompt-box.ready .pt-send { background: var(--red); border-color: var(--red); color: #fff; }
.cursor-foot {
  opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease);
  font-family: var(--plantin); font-style: italic; text-align: center; color: #cdc1a9;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem); max-width: 42ch; line-height: 1.35;
}
.cursor-foot.show { opacity: 1; transform: none; }

/* when the dark section owns the screen, invert the fixed chrome to read on it */
.masthead, .brand, .masthead nav a {
  transition: color .45s var(--ease);
}
body.dark .masthead { mix-blend-mode: normal; }
body.dark .brand, body.dark .masthead nav a { color: #e6dcc8; }
body.dark .brand .o-mark::after { border-color: #e6dcc8; }

@media (max-width: 640px) {
  .miss-log { height: clamp(200px, 32vh, 300px); }
  .log-bubble, .reply-text { font-size: 1rem; padding: 8px 13px; max-width: 88%; }
  .reply-note { font-size: 0.66rem; line-height: 1.4; }
  .prompt-line { font-size: 1.1rem; }
  .pt-btn { width: 30px; height: 30px; }
}

/* =================================================================
   §5  CLOSING — request-access CTA (used by the oval close below)
   ================================================================= */
.close-alt .cta {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); position: relative; padding: 8px 2px; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.close-alt .cta svg.mark { position: absolute; left: -4%; bottom: -10px; width: 108%; height: 13px; overflow: visible; }
.close-alt .cta .x-glyph { width: 0.92em; height: 0.92em; fill: currentColor; flex-shrink: 0; }

/* ---------- reveal utility ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mark path, .mark line, .mark polyline, .mark ellipse, .mark circle,
  .hidden-sec .link-layer path { stroke-dashoffset: 0 !important; }
}

@media (max-width: 720px) {
  /* keep the X link reachable on mobile; drop only the text links */
  .masthead nav a:not(.nav-x) { display: none; }
  .masthead nav .nav-x svg { width: 1.1em; height: 1.1em; }
  .hidden-sec .para { max-width: 100%; }
}

/* =================================================================
   §5·b  CLOSING — ALTERNATE (hand-drawn textured oval, drawn on scroll)
   ================================================================= */
.close-alt {
  min-height: 104svh; display: grid; place-items: center; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(230,220,200,0.1);
  background: #14100b; color: #efe7d6;
}
.close-alt::before {   /* same screen grain + vignette as the blind-spot section */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.04'/%3E%3C/svg%3E");
}
.close-alt .ca-inner { position: relative; z-index: 2; display: grid; gap: 34px; justify-items: center; padding: 0 6vw; }
.ca-oval-wrap { position: relative; display: inline-block; padding: 0.5em 0.9em; }
.ca-oval-wrap h2 {
  position: relative; z-index: 1; font-weight: 400;
  font-size: clamp(1.5rem, 6.2vw, 4.6rem); line-height: 0.98;
  letter-spacing: -0.025em; margin: 0; white-space: nowrap;
}
/* the last word gets the marker — the same highlighter that flagged the
   disputed vocabulary, sweeping across "human." when the close enters.
   On the dark ground the swipe is near-opaque and the word flips to ink. */
.ca-oval-wrap h2 em {
  font-style: italic;
  padding: 0.04em 0.1em; margin: 0 -0.04em;
  background-image: linear-gradient(rgba(244,208,82,0.95), rgba(244,208,82,0.95));
  background-repeat: no-repeat; background-position: 0 58%;
  background-size: 0% 82%; border-radius: 3px;
  transition: background-size .8s var(--ease) .15s, color .5s var(--ease) .3s;
}
.ca-oval-wrap.drawn h2 em { background-size: 100% 82%; color: #14100b; }