/* Internalized — two-plate registration on institutional paper.
   The machine track is set in mono and printed in process blue; the human track
   is set in a serif and printed in oxide. They converge on a single spine that
   runs the height of the page, and at the last stage the two typefaces become
   one. The type carries the argument, so do not "tidy" the faces into a single
   family. */

:root{
  --paper:#d7dce1;
  --paper-deep:#c5ccd4;
  --card:#eef1f3;
  --card-hi:#f8fafb;
  --ink:#10171f;
  --ink-70:rgba(16,23,31,.70);
  --ink-45:rgba(16,23,31,.45);
  --ink-18:rgba(16,23,31,.18);
  --ink-10:rgba(16,23,31,.10);

  --machine:#1442c4;
  --machine-deep:#0e2f8c;
  --human:#a85c06;
  --human-deep:#7a4204;

  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Martian Mono","JetBrains Mono",ui-monospace,monospace;

  --wrap:min(72rem,calc(100% - 2.5rem));
  --wrap-wide:min(82rem,calc(100% - 2.5rem));
  --stamp:5px 5px 0 var(--ink-10);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem,.96rem + .32vw,1.16rem);
  line-height:1.62;
  font-optical-sizing:auto;
  /* Faint plate grid — the paper is a form, not a canvas. */
  background-image:
    linear-gradient(to right,rgba(16,23,31,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(16,23,31,.035) 1px,transparent 1px);
  background-size:2.25rem 2.25rem;
}

p{margin:0 0 1.05em}
a{color:var(--machine-deep);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--machine);outline-offset:3px}

.wrap{width:var(--wrap);margin-inline:auto}
.wrap-wide{width:var(--wrap-wide);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--ink);color:var(--card);padding:.7rem 1.1rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
}
.skip:focus{left:.75rem;top:.75rem}

/* ---------- hero ---------------------------------------------------------
   The headline prints three times: process blue, oxide, then black on top.
   It lands out of register and pulls into register on load — one moment, the
   whole thesis, before a word of the argument. */

.hero{padding:clamp(3.2rem,9vw,7rem) 0 clamp(2.4rem,6vw,4rem);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;left:50%;bottom:0;width:2px;height:clamp(2rem,6vw,4rem);
  background:var(--ink-18);transform:translateX(-1px);
}

.eyebrow{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);
  display:flex;align-items:center;gap:.6rem;margin-bottom:clamp(1.4rem,4vw,2.4rem);
}
.eyebrow-dot{width:.5rem;height:.5rem;background:var(--machine);flex:none}

/* The meme panel — the reference point, drawn in the site's own ink rather
   than lifting the image. It sits above the headline because the headline is a
   reply, and a reply before its setup reads as a non-sequitur to anyone who
   arrived from search without having seen the cartoon. */
.meme{
  margin:0 0 clamp(1.8rem,4vw,2.6rem);padding:0;
  border-left:3px solid var(--ink-18);padding-left:clamp(.9rem,2.5vw,1.4rem);
  max-width:46rem;
}
.meme-label{
  font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin:0 0 .7rem;
}
.meme-strip{display:flex;align-items:stretch;gap:.55rem;flex-wrap:nowrap}
.meme-panel{
  flex:1 1 0;min-width:0;background:var(--card-hi);border:1.5px solid var(--ink-18);
  padding:.7rem .8rem;display:flex;flex-direction:column;gap:.3rem;
}
.meme-cap{
  margin:0;font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45);
}
.meme-line{margin:0;font-size:.92rem;line-height:1.3;color:var(--ink)}
.meme-before .meme-line{font-family:var(--mono);font-size:.74rem;line-height:1.45;color:var(--machine-deep)}
.meme-after .meme-line{font-family:var(--body);font-style:italic;color:var(--human-deep)}
.meme-op{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;color:var(--ink-45);padding:0 .1rem;
}
.meme-pick{width:2.4rem;height:1.4rem;display:block}
.meme-op-label{
  font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;line-height:1.2;max-width:5.2rem;
}
.meme-note{
  margin:.85rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-70);max-width:52ch;
}
.meme-turn{
  margin:.6rem 0 0;font-family:var(--display);font-weight:500;font-size:.95rem;
  line-height:1.35;letter-spacing:-.012em;color:var(--ink);max-width:52ch;
}

.reg{
  position:relative;margin:0 0 clamp(1.4rem,3.5vw,2.2rem);
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.45rem,10.5vw,6.6rem);
  line-height:.93;letter-spacing:-.035em;
}
.reg-ghost,.reg-main{display:block}
.reg-ghost{
  position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;
  opacity:.42;will-change:transform;
}
.reg-a{color:var(--machine)}
.reg-b{color:var(--human)}
.reg-main{position:relative;color:var(--ink)}

.js .reg-a{animation:reg-a 1250ms cubic-bezier(.16,.84,.3,1) both}
.js .reg-b{animation:reg-b 1250ms cubic-bezier(.16,.84,.3,1) both}
@keyframes reg-a{
  0%{transform:translate3d(-.34em,-.1em,0);opacity:.85}
  62%{transform:translate3d(.012em,.004em,0)}
  100%{transform:translate3d(-.075em,-.028em,0);opacity:.46}
}
@keyframes reg-b{
  0%{transform:translate3d(.34em,.1em,0);opacity:.85}
  62%{transform:translate3d(-.012em,-.004em,0)}
  100%{transform:translate3d(.075em,.028em,0);opacity:.46}
}

.deck{
  max-width:44ch;font-size:clamp(1.12rem,1rem + .55vw,1.4rem);
  line-height:1.5;color:var(--ink-70);font-weight:300;
}

.jump{display:flex;flex-wrap:wrap;gap:.45rem;margin:clamp(1.6rem,4vw,2.4rem) 0 1.6rem}
.jump a{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--ink-18);background:var(--card-hi);
  padding:.58rem .8rem;line-height:1;
}
.jump a:hover{border-color:var(--ink);background:var(--ink);color:var(--card-hi)}

.legend{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.legend-item{font-size:.82rem;letter-spacing:.02em}
.legend-machine{
  font-family:var(--mono);font-weight:600;text-transform:uppercase;font-size:.66rem;
  color:var(--machine-deep);border-bottom:3px solid var(--machine);padding-bottom:.25rem;
}
.legend-human{
  font-family:var(--body);font-style:italic;font-size:.95rem;
  color:var(--human-deep);border-bottom:3px solid var(--human);padding-bottom:.25rem;
}
.legend-arrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---------- section furniture -------------------------------------------- */

.section{padding:clamp(3rem,8vw,6rem) 0}
.section-thesis{background:var(--ink);color:var(--card)}
.section-limits{background:var(--paper-deep)}

.kicker{
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-70);margin-bottom:.9rem;
}
.section-thesis .kicker{color:rgba(238,241,243,.62)}

.h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(1.85rem,1.2rem + 2.9vw,3.3rem);margin:0 0 1rem;max-width:20ch;
}
.h2-thesis{max-width:22ch;color:var(--card-hi)}

.lede{max-width:56ch;color:var(--ink-70);font-size:1.06em;margin-bottom:clamp(2rem,5vw,3rem)}

.prose{max-width:54ch;font-size:clamp(1.08rem,1rem + .45vw,1.3rem);line-height:1.58}
.prose p{color:rgba(238,241,243,.86)}
.prose p:last-child{
  color:var(--card-hi);font-family:var(--display);font-weight:500;
  font-size:1.05em;line-height:1.3;letter-spacing:-.015em;
  border-left:3px solid var(--human);padding-left:1.1rem;margin-top:2rem;
}

/* ---------- the spine ----------------------------------------------------
   One continuous line down the middle. Each stage reaches for it from both
   sides with a gutter (--sep) that shrinks to nothing by stage eight. */

.spine{position:relative;padding-top:1rem}
.spine::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--ink-18);transform:translateX(-1px);
}

.stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr var(--sep) 1fr;
  grid-template-areas:"machine tie human" "body body body";
  margin-bottom:clamp(2rem,4.5vw,3.4rem);
}

.panel{position:relative;z-index:1;background:var(--card);padding:1.15rem 1.25rem 1.05rem}
.panel-machine{grid-area:machine;border-right:3px solid var(--machine);text-align:right}
.panel-human{grid-area:human;border-left:3px solid var(--human)}

.term{margin:0 0 .45rem;line-height:1.1}
.term-machine{
  font-family:var(--mono);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(.74rem,.62rem + .5vw,1rem);color:var(--machine-deep);
}
.term-human{
  font-family:var(--body);font-weight:500;font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);
  letter-spacing:-.01em;color:var(--human-deep);
}
.gloss{margin:0;font-size:.86rem;line-height:1.4;color:var(--ink-70)}
.panel-machine .gloss{font-family:var(--mono);font-size:.7rem;line-height:1.55;letter-spacing:-.01em}

.tie{grid-area:tie;position:relative}
.tie-line{position:absolute;top:2.3rem;left:0;right:0;height:2px;background:var(--ink-18)}
.node{
  position:absolute;top:2.3rem;left:50%;transform:translate(-50%,-50%);
  width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ink);color:var(--card-hi);
  display:grid;place-items:center;z-index:3;
}
.node-n{font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:-.04em}

.body{
  grid-area:body;position:relative;z-index:1;
  background:var(--card-hi);border:1.5px solid var(--ink-10);border-top:none;
  padding:1.3rem 1.4rem 1.15rem;box-shadow:var(--stamp);
}
.mech{margin:0 auto 1rem;max-width:68ch}
.spec{
  margin:0 auto;max-width:68ch;display:flex;gap:.7rem;align-items:baseline;
  font-family:var(--display);font-weight:500;font-size:1.02em;line-height:1.35;
  letter-spacing:-.015em;color:var(--ink);
}
.spec-mark{flex:none;width:.7rem;height:.7rem;background:var(--human);transform:translateY(-.05em)}

/* stage eight: the split is gone, and so is the typographic distinction. */
.stage-merged{grid-template-columns:1fr;grid-template-areas:"body"}
.stage-merged .node{
  position:relative;top:0;left:0;transform:none;margin:0 auto -1.25rem;
  width:2.9rem;height:2.9rem;border:3px solid var(--card-hi);
}
.panel-merged{
  background:var(--card-hi);border:2.5px solid var(--ink);box-shadow:8px 8px 0 var(--ink-18);
  padding:clamp(1.8rem,4vw,2.8rem);text-align:center;
}
.terms{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap;margin-bottom:.7rem}
.term-merged{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.9rem);line-height:1;color:var(--ink);
}
.rule{margin:0;width:2.5rem;height:3px;background:var(--ink)}
.gloss-merged{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:1.5rem;
}
.panel-merged .mech{max-width:62ch;margin-inline:auto;text-align:left}
.panel-merged .spec{max-width:62ch;margin-inline:auto;text-align:left}

/* reveal — threshold 0 with a root margin, so a section taller than the
   viewport still fires. A percentage threshold on a tall block never does. */
.js .stage{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .stage.in{opacity:1;transform:none}

/* ---------- the meter ----------------------------------------------------- */

.meter{
  background:var(--card-hi);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink-18);
  padding:clamp(1.3rem,3.5vw,2rem);max-width:58rem;
}
.meter-label{
  display:block;font-family:var(--mono);font-size:.64rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-70);margin-bottom:.6rem;
}
.meter-input{
  width:100%;font-family:var(--body);font-size:1.12rem;line-height:1.55;color:var(--ink);
  background:var(--card);border:1.5px solid var(--ink-18);padding:.9rem 1rem;resize:vertical;
}
.meter-input:focus{border-color:var(--machine);outline:none;box-shadow:0 0 0 3px rgba(20,66,196,.18)}
.meter-note{
  margin:.65rem 0 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.02em;
  color:var(--ink-45);line-height:1.5;
}
.meter-out{margin-top:1.6rem;border-top:1.5px solid var(--ink-18);padding-top:1.4rem}
.meter-count{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .5rem}
.meter-n{
  font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,2rem + 3vw,4.4rem);
  line-height:.85;letter-spacing:-.04em;color:var(--human-deep);
}
.meter-unit{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-70)}
.meter-read{max-width:48ch;color:var(--ink-70);margin-bottom:1.2rem}
.meter-marked{
  font-size:1.1rem;line-height:1.7;background:var(--card);border-left:3px solid var(--ink-18);
  padding:.9rem 1.1rem;margin-bottom:1.3rem;
}
.meter-marked mark{
  background:rgba(168,92,6,.2);color:var(--human-deep);font-weight:500;
  box-shadow:inset 0 -2px 0 var(--human);padding:0 .1em;
}
.meter-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:.75rem 1.05rem;line-height:1;cursor:pointer;
  background:var(--ink);color:var(--card-hi);border:1.5px solid var(--ink);
}
.btn:hover{background:var(--machine);border-color:var(--machine)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--card-hi)}
.meter-stripped{
  margin:1.3rem 0 0;padding:1.1rem 1.2rem;background:var(--ink);color:var(--card-hi);
  font-family:var(--display);font-weight:500;font-size:1.1rem;line-height:1.4;
  letter-spacing:-.015em;
}
.meter-stripped b{
  display:block;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(238,241,243,.55);margin-bottom:.5rem;
}

/* ---------- limits -------------------------------------------------------- */

.limits{display:grid;gap:1px;background:var(--ink-18);border:1.5px solid var(--ink-18)}
.limit{background:var(--card);padding:clamp(1.2rem,3vw,1.8rem)}
.limit h3{
  margin:0 0 .6rem;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);line-height:1.2;
}
.limit p{margin:0;color:var(--ink-70);max-width:64ch}

/* ---------- foot ---------------------------------------------------------- */

.foot{padding:clamp(2.6rem,6vw,4rem) 0;border-top:2px solid var(--ink)}
.foot p{max-width:62ch;font-size:.92rem;color:var(--ink-70)}
.foot p:last-child{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;margin-bottom:0}
.foot-mark{width:2.2rem;height:2.2rem;background:var(--ink);margin-bottom:1.3rem}

/* ---------- narrow -------------------------------------------------------- */

@media (max-width:860px){
  .spine::before{left:1.1rem}
  .stage{
    grid-template-columns:1fr;
    grid-template-areas:"machine" "tie" "human" "body";
    padding-left:2.9rem;
  }
  .panel-machine{
    border-right:none;border-left:3px solid var(--machine);text-align:left;
  }
  .tie{height:var(--sep-m);min-height:0}
  .tie-line{top:0;bottom:0;left:-1.8rem;right:auto;width:2px;height:auto;background:transparent}
  .node{top:1.55rem;left:-1.8rem;transform:translate(-50%,-50%);width:2.1rem;height:2.1rem}
  .node-n{font-size:.6rem}
  .body{border-left:1.5px solid var(--ink-10);border-top:none}
  .stage-merged{padding-left:0;grid-template-areas:"body"}
  .stage-merged .node{position:relative;top:0;left:0;transform:none;margin:0 auto -1rem;width:2.5rem;height:2.5rem}
  .panel-merged .mech,.panel-merged .spec{margin-inline:0}
  .mech,.spec{margin-inline:0}
}

@media (max-width:560px){
  .meme-strip{flex-direction:column;gap:.45rem}
  .meme-op{flex-direction:row;gap:.5rem;padding:.1rem 0}
  .meme-pick{transform:rotate(90deg);width:1.9rem;height:1.1rem}
  .meme-op-label{max-width:none;font-size:.52rem}
}

@media (max-width:520px){
  :root{--wrap:calc(100% - 1.6rem);--wrap-wide:calc(100% - 1.6rem)}
  .terms{gap:.6rem}
  .rule{width:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .js .reg-a{animation:none;transform:translate3d(-.075em,-.028em,0);opacity:.46}
  .js .reg-b{animation:none;transform:translate3d(.075em,.028em,0);opacity:.46}
  .js .stage{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  body{background:#fff}
  .jump,.meter-actions{display:none}
}