/* ===================================================================
   Bring Your Own Genome — editorial engineering datasheet.
   Bone paper · ink · vermillion · hairline rules · mono labels.
   Same design language as "The Sandbox Shift" / "The Living Layer".
   =================================================================== */

:root {
  --paper:   #efe7d6;
  --paper-2: #e7dec9;
  --ink:     #1b1813;
  --ink-2:   #574f3e;
  --hot:     #e5421f;
  --hot-2:   #a62c0b;
  --rule:    rgba(27,24,19,.18);
  --rule-2:  rgba(27,24,19,.34);

  /* sequence palette for the karyotype (low → high) */
  --seq-0: #f3ecdc;
  --seq-1: #e8c9a6;
  --seq-2: #e39a5c;
  --seq-3: #e5421f;
  --seq-4: #8c1d06;
  --gap:   rgba(27,24,19,.12);

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

  --cw: 66rem;
  --pad: clamp(1.25rem, calc((100% - var(--cw)) / 2), 50%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.62; overflow-x: hidden; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(229,66,31,.05), transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(27,24,19,.04), transparent 42%);
}
a { color: var(--hot-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
code { font-family: var(--mono); font-size: .82em; background: rgba(27,24,19,.07);
       padding: .08em .35em; border-radius: 2px; }
em { font-style: italic; } strong, b { font-weight: 600; }

.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; background:var(--ink); color:var(--paper); padding:.5rem 1rem; z-index:9; }

.mk { display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hot-2); margin-right:.6rem; }
.mk.hot { color: var(--hot-2); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; border-radius: 1px; }
.d-out :focus-visible, .foot :focus-visible { outline-color: #ff7a5c; }

/* ---------- layout primitives ---------- */
.mast, .sec, .foot { padding-inline: var(--pad); }
.sec  { padding-block: clamp(3rem, 6vw, 5rem); }
.sec.alt { background: var(--paper-2); border-block: 1px solid var(--rule); }
.lead { max-width: 62ch; color: var(--ink-2); font-size: 1.05em; }

/* ============ MASTHEAD ============ */
.mast { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.rule-top { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--rule-2); padding-bottom:.7rem;
  margin-bottom:clamp(2rem,6vw,4rem); }
.rule-top span:first-child { color: var(--hot); }
h1 { font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 9vw, 7rem);
  line-height:.9; letter-spacing:-.035em; margin:0 0 1.4rem; overflow-wrap:anywhere; }
h1 .dot { color: var(--hot); }
.thesis { font-size:clamp(1.25rem,3vw,1.9rem); line-height:1.32; max-width:24ch; margin:0 0 1.2rem; font-weight:400; }
@media (min-width: 700px){ .thesis { max-width: 42ch; } }
.thesis em { color: var(--hot-2); font-style: italic; }
.claim { font-family:var(--mono); font-size:clamp(.85rem,1.6vw,1rem); letter-spacing:.01em;
  border-left:3px solid var(--hot); padding-left:.9rem; max-width:48ch; margin:0 0 2.2rem; color:var(--ink-2); }
.claim strong { color: var(--ink); }
.def { max-width:60ch; margin:0 0 2.2rem; font-size:1.04em; color:var(--ink); }
.def .mk { display:block; margin-bottom:.35rem; }
.jump { display:flex; flex-wrap:wrap; gap:0; font-family:var(--mono); font-size:.78rem; }
.jump a { text-decoration:none; color:var(--ink); padding:.65rem 1.05rem;
  border:1px solid var(--rule-2); border-right-width:0; transition:background .15s,color .15s; }
.jump a:first-child { border-radius:2px 0 0 2px; }
.jump a:last-child { border-right-width:1px; border-radius:0 2px 2px 0; }
.jump a:hover { background: var(--ink); color: var(--paper); }

/* ============ THEN / NOW ============ */
.strip { display:grid; gap:0; max-width:var(--cw); margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 3rem); border-block:1px solid var(--rule-2); }
@media (min-width: 760px){ .strip { grid-template-columns: 1fr 1fr; } }
.tn { padding: 1.6rem 0; }
.tn.now { border-top: 1px solid var(--rule); }
@media (min-width: 760px){
  .tn { padding: 1.8rem 2rem 1.8rem 0; }
  .tn.now { padding: 1.8rem 0 1.8rem 2rem; border-top:0; border-left:1px solid var(--rule-2); }
}
.tn-h { font-family:var(--display); font-weight:700; font-size:1.25rem; margin:0 0 .5rem; line-height:1.1; }
.tn-h .mk { display:block; margin:0 0 .5rem; }
.tn.now .tn-h .mk::before { content:""; display:inline-block; width:.5em; height:.5em; background:var(--hot); margin-right:.5em; }
.tn p:last-child { margin:0; color:var(--ink-2); font-size:.96em; }

/* ============ SECTION HEADER ============ */
.sec-h { display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 1.8rem; }
.sec-h .idx { font-family:var(--mono); font-weight:600; font-size:1.1rem; color:var(--hot); letter-spacing:.05em; }
.sec-h h2 { font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.6rem,4.6vw,2.8rem); margin:0; line-height:1.04; }
.sec-h .sec-line { flex:1; min-width:2rem; height:1px; background:var(--rule-2); align-self:center; }

/* ============ WHY list ============ */
.why { list-style:none; counter-reset:w; margin:1.4rem 0 0; padding:0; max-width:64ch; }
.why li { counter-increment:w; position:relative; padding:1.1rem 0 1.1rem 3.2rem; border-top:1px solid var(--rule); }
.why li:last-child { border-bottom:1px solid var(--rule); }
.why li::before { content:"0" counter(w); position:absolute; left:0; top:1.1rem;
  font-family:var(--mono); font-size:.85rem; color:var(--hot); font-weight:600; }
.why b { font-family:var(--display); font-weight:600; }
.bear { margin-top:1.6rem; max-width:64ch; font-size:1.02em; }
.bear .mk { display:block; margin-bottom:.3rem; }

/* ============ LADDER (the pattern) ============ */
.ladder { list-style:none; counter-reset:r; margin:1.4rem 0 2rem; padding:0; }
.ladder li { counter-increment:r; display:grid; grid-template-columns:1.8rem 1fr; gap:.2rem 1rem;
  padding:.85rem 1rem .85rem .6rem; border-top:1px solid var(--rule); align-items:baseline; }
.ladder li:last-child { border-bottom:1px solid var(--rule); }
.ladder li::before { content:counter(r); grid-row:1 / span 2; font-family:var(--mono); font-weight:600; color:var(--ink-2); font-size:.9rem; }
.ladder .rung { font-family:var(--display); font-weight:600; font-size:1.08rem; }
.ladder .d { grid-column:2; color:var(--ink-2); font-size:.94em; }
.ladder li.sweet { background: rgba(229,66,31,.07); }
.ladder li.sweet::before { color: var(--hot); }
.ladder li.sweet .rung::after { content:"· the broadcast"; color:var(--hot-2); font-family:var(--mono);
  font-size:.66rem; letter-spacing:.06em; margin-left:.5rem; text-transform:uppercase; }

.kicker { max-width:64ch; margin:1.6rem 0 0; padding:1.1rem 1.3rem; background:var(--ink);
  color:#d6cdbb; border-radius:2px; font-size:1.02em; }
.kicker .mk { display:block; color:#e8a07f; margin-bottom:.4rem; }
.kicker strong { color:#fff; font-weight:600; }

/* ============ FORK FAN-OUT FIGURE ============ */
.forkfig { margin:2rem 0 0; }
.forkfig figcaption { display:block; margin-bottom:.8rem; }
.forkstage {
  --boxbg: var(--paper); position:relative; display:grid; gap:.7rem 1.1rem;
  grid-template-columns: 1fr; align-items:center;
  border:1px solid var(--rule-2); border-radius:3px; padding:1.2rem; background:rgba(255,255,255,.32);
}
@media (min-width:720px){
  .forkstage { grid-template-columns: 1fr 1fr 1.4fr 1fr; }
}
.forkstage > div { min-width:0; }
.fork-warm, .fork-snap, .fork-reduce, .shard {
  border:1px solid var(--rule-2); border-radius:2px; padding:.7rem .8rem; background:var(--boxbg);
  display:flex; flex-direction:column; gap:.15rem; transition:transform .4s, opacity .4s, border-color .4s, background .4s;
}
.box-tag { font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1.1; }
.box-sub { font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; color:var(--ink-2); text-transform:uppercase; }
.fork-snap { border-left:3px solid var(--hot); }
.fork-shards { display:grid; gap:.4rem; }
.shard { padding:.45rem .6rem; }
.shard .box-tag { font-size:.82rem; }
.shard.lit { background: var(--hot); border-color: var(--hot); }
.shard.lit .box-tag, .shard.lit .box-sub { color:#fff; }
.fork-reduce { border-left:3px solid var(--ink); }
/* animated states */
.forkstage[data-state="idle"] .fork-snap,
.forkstage[data-state="idle"] .fork-shards,
.forkstage[data-state="idle"] .fork-reduce { opacity:.32; }
.forkstage[data-state="snap"] .fork-snap { opacity:1; transform:scale(1.03); }
.forkstage[data-state="map"] .fork-snap,
.forkstage[data-state="map"] .fork-shards { opacity:1; }
.forkstage[data-state="reduce"] > div { opacity:1; }
.btn { margin-top:1rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  background:var(--ink); color:var(--paper); border:0; border-radius:2px; padding:.6rem 1.1rem; cursor:pointer; }
.btn:hover { background: var(--hot-2); }

/* ============ STATS ============ */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule-2);
  border:1px solid var(--rule-2); border-radius:2px; overflow:hidden; margin-top:1.6rem; max-width:60rem; }
@media (min-width:680px){ .stats { grid-template-columns:repeat(4,1fr); } }
.stat { background:var(--paper); padding:1.1rem 1.2rem; }
.sec.alt .stat { background:var(--paper-2); }
.stat .mk { display:block; margin-bottom:.5rem; }
.stat b { font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,3.4vw,2rem); line-height:1;
  letter-spacing:-.02em; display:block; }
.stat.hot b { color:var(--hot); }

/* ============ KARYOTYPE ============ */
.kary-wrap { margin:1.8rem 0 0; }
.kary-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; margin-bottom:.9rem; }
.seg { display:inline-flex; border:1px solid var(--rule-2); border-radius:3px; overflow:hidden; }
.seg button { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--ink-2); border:0; border-right:1px solid var(--rule-2);
  padding:.55rem 1rem; min-height:40px; cursor:pointer; transition:background .15s,color .15s; }
.seg button:last-child { border-right:0; }
.seg button[aria-selected="true"] { background:var(--hot-2); color:#fff; }
.seg button:hover:not([aria-selected="true"]) { background:rgba(27,24,19,.06); color:var(--ink); }

.kary { display:grid; gap:.5rem; }
.kary-row { display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; align-items:center; gap:.7rem; }
.kary-name { font-family:var(--mono); font-weight:600; font-size:.8rem; color:var(--ink); }
.kary-track { display:flex; gap:1px; min-width:0; height:1.5rem; border-radius:2px; overflow:hidden;
  background:var(--gap); border:1px solid var(--rule); }
.kary-cell { flex:1 1 0; min-width:0; }
/* narrow screens: ~250 one-px gaps would be wider than the track, so drop them */
@media (max-width:760px){ .kary-track { gap:0; } }
.kary-isl { font-family:var(--mono); font-size:.68rem; color:var(--ink-2); white-space:nowrap; }
.kary-isl b { color:var(--hot-2); }
.kary-legend { display:flex; align-items:center; gap:.55rem; margin-top:.9rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:var(--ink-2); text-transform:uppercase; }
.legend-swatches { display:flex; gap:2px; }
.legend-swatches i { width:1.4rem; height:.8rem; display:block; }

/* ============ ECONOMICS CALCULATOR ============ */
.calc { display:grid; gap:1.4rem; margin-top:1.6rem; }
@media (min-width:860px){ .calc { grid-template-columns:1fr 1fr; align-items:start; } }
.calc-controls { border:1px solid var(--rule-2); border-radius:2px; padding:1.2rem 1.3rem; background:rgba(255,255,255,.32); }
.calc-row { display:grid; gap:.4rem; margin-bottom:1.2rem; }
.calc-row .mk { margin:0; }
.calc-row input[type=range] { width:100%; accent-color:var(--hot); }
.calc-row output { font-family:var(--display); font-weight:700; font-size:1.2rem; }
.calc-note { font-size:.86em; color:var(--ink-2); margin:.4rem 0 0; }
.calc-out { background:var(--ink); color:var(--paper); border-radius:2px; padding:1.4rem 1.5rem; }
.bars { display:grid; gap:.8rem; margin-bottom:1.3rem; }
.bar-row { display:grid; grid-template-columns:6.5rem 1fr auto; align-items:center; gap:.7rem; }
.bar-lab { font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:#cdc4b2; }
.bar { height:1.3rem; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.bar-fill { display:block; height:100%; width:0; transition:width .5s cubic-bezier(.2,.7,.2,1); border-radius:2px; }
.bar-fill.cold { background:#cdbfa0; }
.bar-fill.warm { background:var(--hot); }
.bar-val { font-family:var(--mono); font-size:.8rem; color:#fff; white-space:nowrap; }
.calc-head { display:flex; align-items:baseline; gap:.6rem; border-top:1px solid rgba(255,255,255,.16); padding-top:1rem; }
.calc-head .big { font-family:var(--display); font-weight:800; font-size:2.2rem; color:var(--hot); line-height:1; }
.calc-head .mk { color:#b3a98f; }
.calc-saved { color:#d6cdbb; font-size:.92em; margin:.9rem 0 0; }
.calc-saved b { color:#fff; }

/* ============ CODE BLOCK ============ */
.code-block { background:var(--ink); color:#e7dcc6; border-radius:3px; border-left:4px solid var(--hot);
  padding:1.2rem 1.3rem; overflow-x:auto; font-family:var(--mono); font-size:.8rem; line-height:1.7; margin:1.4rem 0 0; }
.code-block code { background:none; padding:0; font-size:inherit; color:inherit; }
.code-block .c { color:#9a8f76; }

/* ============ OBJECTIONS / FOOTER ============ */
.obs { max-width:66ch; }
.obs p { padding:1rem 0; border-top:1px solid var(--rule); margin:0; color:var(--ink-2); }
.obs p:last-child { border-bottom:1px solid var(--rule); }
.obs b { color:var(--ink); font-family:var(--display); font-weight:600; }

.foot { background:var(--ink); color:#cdc4b2; padding:2.6rem 0; border-top:3px solid var(--hot); }
.foot > * { max-width:var(--cw); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 3rem); }
.foot p { margin:.3rem auto; font-family:var(--mono); font-size:.8rem; letter-spacing:.02em; }
.foot b { color:#fff; } .foot a { color:var(--hot); }
.foot .disc { color:#9a917f; max-width:74ch; line-height:1.7; font-size:.78rem;
  border-top:1px solid rgba(255,255,255,.14); margin-top:1.1rem; padding-top:1.1rem; }
.foot .disc a { color:#e8dcc4; }

/* ============ LADDER TIMING CHIP ============ */
.ladder .rung { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.ladder .rt { font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hot-2); background:rgba(229,66,31,.08); border:1px solid rgba(229,66,31,.25);
  border-radius:2px; padding:.08em .45em; font-weight:400; }
.ladder li.sweet .rt { background:var(--hot); color:#fff; border-color:var(--hot); }

/* ============ PROCESS TIMELINE ============ */
.timeline { margin:1.8rem 0 0; }
.timeline figcaption { display:block; margin-bottom:.7rem; }
.tl-bar { display:flex; gap:2px; height:2.4rem; border-radius:2px; overflow:hidden; }
.tl-seg { display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; }
.tl-warm { background:#8c7a55; }
.tl-snap { background:var(--hot); }
.tl-map  { background:var(--ink); }
.tl-sec { font-family:var(--mono); font-size:.72rem; font-weight:600; white-space:nowrap; padding:0 .2rem; }
.tl-legend { display:flex; flex-wrap:wrap; gap:.45rem 1.2rem; margin-top:.8rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--ink-2); }
.tl-sw { display:inline-block; width:.8rem; height:.8rem; border-radius:1px; margin-right:.45rem; vertical-align:-1px; }
.tl-tot { color:var(--ink); font-weight:600; }

/* ============ TWO-READING BAR (the climax) ============ */
.tworead { margin:1.6rem 0 1.4rem; }
.tworead-axis { margin-bottom:.7rem; }
.tworead-axis .mk { transition:opacity .28s ease; }
.tworead-axis .mk.swap { color:var(--hot-2); }
.tworead-rows { display:grid; gap:.5rem; }
.tworead-row { display:grid; grid-template-columns:4.5rem 1fr 4rem; align-items:center; gap:.7rem; }
.tworead-name { font-family:var(--mono); font-size:.8rem; color:var(--ink-2); }
.tworead-bar { position:relative; height:1rem; width:var(--w); background:var(--seq-1);
  border-radius:1px; /* width MUST NOT transition — the immovability is the point */ }
.tworead-bar.hot { background:var(--hot); }
.tworead-val { font-family:var(--mono); font-size:.8rem; color:var(--ink); text-align:right; }
.tworead.revealed .tworead-bar::after { content:""; position:absolute; right:-2px; top:-3px; bottom:-3px;
  width:2px; background:var(--ink); opacity:.55; animation:ghostIn .45s ease both; }
@keyframes ghostIn { from{opacity:0; transform:scaleY(.2)} to{opacity:.55; transform:scaleY(1)} }
@media (max-width:560px){ .tworead-row{ grid-template-columns:3.6rem 1fr 3.2rem } }
.kary-foot { margin-top:.8rem; }
#aha-caveat { max-width:64ch; margin-top:.6rem; }

/* ============ FOOTER MIC-DROP ============ */
.foot .foot-drop { font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.6vw,1.6rem); color:#fff; line-height:1.25; max-width:30ch;
  margin:0 auto 1.4rem; padding-bottom:1.2rem; border-bottom:1px solid rgba(255,255,255,.16); }
.foot .foot-drop em { color:var(--hot); font-style:italic; }

/* ============ ABSTRACT / BYLINE / CITATIONS / REFERENCES ============ */
.byline { font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--ink-2); margin:.2rem 0 0; }
.byline a { color:var(--hot-2); }
.abstract { max-width:76ch; margin:1.5rem 0 2.2rem; font-size:1.02rem; line-height:1.6; color:var(--ink); }
.abstract .mk { display:inline; margin-right:.5rem; }
.abstract b { font-weight:600; }
a[href^="#ref-"] { text-decoration:none; color:var(--hot-2); font-family:var(--mono);
  font-size:.72em; vertical-align:super; line-height:0; padding:0 .04em; }
a[href^="#ref-"]:hover { color:var(--ink); }
.refs { max-width:78ch; margin:1.2rem 0 0; padding-left:1.7rem; }
.refs li { font-size:.9rem; line-height:1.5; color:var(--ink-2); padding:.4rem 0; border-top:1px solid var(--rule); }
.refs li:first-child { border-top:0; }
.refs li i { color:var(--ink); font-style:italic; }
.refs li a { color:var(--hot-2); }

/* ============ CTA (islo.dev / coupon) ============ */
.cta { margin:2.2rem 0 0; background:var(--ink); color:#d6cdbb; border-radius:3px;
  border-left:5px solid var(--hot); padding:1.5rem 1.6rem; max-width:66ch; }
.cta .cta-k { font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:.66rem; color:#b3a98f; margin:0 0 .5rem; }
.cta .cta-h { font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.6vw,1.5rem);
  color:#fff; margin:0 0 .6rem; line-height:1.15; }
.cta .cta-b { margin:0; font-size:.98rem; line-height:1.55; }
.cta a { color:var(--hot); }
.cta .cta-code { background:var(--hot); color:#fff; font-weight:600; padding:.12em .55em;
  border-radius:2px; font-size:.9em; letter-spacing:.04em; }

/* ============ MOTION ============ */
@keyframes fade { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;} }
@keyframes loadup { from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:none;} }
.load { opacity:0; animation:loadup .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s); }
.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .load,.reveal { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .bar-fill { transition:none; }
  .forkstage > div { opacity:1 !important; transform:none !important; }
  .tworead.revealed .tworead-bar::after { animation:none; }
  .tworead-axis .mk { transition:none; }
}