/* ==========================================================================
 * GHZYLAB — FRONT PAGE
 * Depends on lab.css for tokens and primitives. Everything here is the
 * logbook cover and its five entries.
 * ====================================================================== */

/* The oscilloscope trace that runs behind the page in PHOSPHOR. Sits above
   the vignette and below the scanlines, so scanlines cut across it. */
#trace-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
[data-world="phosphor"] #trace-canvas { opacity: .5; }

.skip {
  position: absolute;
  top: -60px; left: 12px;
  z-index: 400;
  padding: 10px 16px;
  background: var(--pen);
  color: var(--paper-raised);
  font-family: var(--f-mono);
  font-size: .78rem;
  text-decoration: none;
  transition: top .18s var(--ease-out);
}
.skip:focus { top: 12px; color: var(--paper-raised); }

/* ================================================================ the rig */

.rig {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding-top: var(--sat);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--rule);
  transition: background .5s var(--ease-out), border-color .5s var(--ease-out);
}
/* Fallback for browsers without color-mix. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .rig { background: var(--paper); }
}

.rig-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 9px clamp(14px, 3.4vw, 26px);
}

.rig-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  color: var(--ink);
}
.rig-id-mark {
  font-size: .62rem;
  color: var(--red);
  animation: rigBlink 4.2s steps(1) infinite;
}
@keyframes rigBlink { 0%, 74% { opacity: 1 } 78%, 100% { opacity: .18 } }
.rig-id-text {
  font-family: var(--f-mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.rig-id-tld { color: var(--ink-soft); font-weight: 400; }

.rig-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.rig-nav a {
  padding: 6px 11px;
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s, background .16s;
}
.rig-nav a:hover { color: var(--ink); background: var(--highlight-a); }
/* Scroll-spy: JS marks the entry currently in view. */
.rig-nav a[aria-current="true"] {
  color: var(--pen);
  box-shadow: inset 0 -2px 0 var(--pen);
}

.rig-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.rig-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  transition: background .16s, border-color .16s, transform .12s;
}
.rig-btn:hover { background: var(--highlight-a); border-color: var(--ink); }
.rig-btn:active { transform: translateY(1px); }
.rig-btn-glyph { font-size: .8rem; line-height: 1; }
.rig-tally { font-size: .68rem; font-weight: 700; color: var(--ink-soft); }

/* When a new finding lands, the tally pulses so the discovery is noticed. */
.rig-btn--findings.pop { animation: tallyPop .62s var(--ease-back); }
@keyframes tallyPop {
  0%   { transform: none; }
  28%  { transform: scale(1.16) rotate(-3deg); }
  100% { transform: none; }
}
.rig-btn--findings.pop .rig-btn-glyph { color: var(--red); }

/* --- the world switch: a real two-position toggle ---------------------- */

.world-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 31px;
  padding: 0 10px 0 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
  transition: border-color .16s, background .16s;
}
.world-switch:hover { border-color: var(--ink); background: var(--highlight-a); }

.world-switch-track {
  position: relative;
  width: 30px; height: 15px;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  background: var(--paper-deep);
  flex: none;
}
.world-switch-knob {
  position: absolute;
  top: 1px; left: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .3s var(--ease-back), background .3s;
}
[data-world="phosphor"] .world-switch-knob {
  transform: translateX(15px);
  background: var(--pen);
  box-shadow: var(--bloom);
}
.world-switch-label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-soft);
  min-width: 58px;
  text-align: left;
}

.rig-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 34px; height: 31px;
  padding: 8px 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
}
.rig-menu span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .24s var(--ease-out), opacity .18s;
}
.rig-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.rig-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rig-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- calibration strip / scroll progress ------------------------------- */

.calib {
  position: relative;
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--rule) 0, var(--rule) 1px,
      transparent 1px, transparent 22px);
}
.calib-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width .1s linear;
}

/* --- folio (running page number) --------------------------------------- */

.folio {
  position: fixed;
  right: clamp(10px, 2.2vw, 22px);
  bottom: calc(16px + var(--sab));
  z-index: 200;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .4s var(--ease-out);
  pointer-events: none;
}
.folio.on { opacity: 1; transform: none; }
/* De-emphasis by WEIGHT, not opacity. This was `.folio.on {opacity:.8}` x
   `.folio-of {opacity:.5}` — and opacity COMPOUNDS, so the "/05" painted at .4
   effective: the reader saw "p.01" and not what it was out of. Neither number
   looks alarming on its own, which is why it survived review.
   Opacity cannot fix it either: --ink-soft is 4.94:1 here, so any value below 1
   drops the denominator under AA. Dropping to regular weight against the
   parent's 700 gives the same hierarchy for free. */
.folio-of { font-weight: 400; }

/* ============================================================ reveal-in */
/* Hidden only when JS is running, so a script failure still shows content. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .68s var(--ease-out), transform .68s var(--ease-out);
}

/* ================================================================= cover */

.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(96px + var(--sat)) 0 108px;
}
.cover-wrap { position: relative; }

/* --- specimen label --------------------------------------------------- */

.specimen {
  position: relative;
  display: inline-block;
  max-width: 460px;
  margin-bottom: clamp(26px, 5vw, 40px);
  padding: 18px 22px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-lift);
  transform: rotate(-.7deg);
}
.specimen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.specimen-sig {
  font-size: .66rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .08em;
}
.specimen-rows { display: grid; gap: 7px; }
.specimen-rows > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .9rem;
  line-height: 1.35;
}
.specimen-rows .label { flex: none; min-width: 104px; }
/* The value cell. `min-width: 0` lets it shrink below its content width so long
   values wrap inside the cell instead of forcing the row to wrap — which is
   what orphaned the parenthetical at the left edge on narrow screens. */
.specimen-val { flex: 1 1 auto; min-width: 0; }
.specimen-rows b { font-weight: 600; }
.specimen-why {
  font-family: var(--f-hand);
  font-style: normal;
  font-size: 1.02rem;
  color: var(--red);
}
.specimen-utc { font-size: .7rem; color: var(--ink-soft); }

/* Fake barcode. Widths are set per-child so it looks printed, not random —
   and so it does not reshuffle on every paint. */
.specimen-code {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  margin-top: 14px;
  opacity: .55;
}
.specimen-code span { display: block; height: 100%; background: var(--ink); }
.specimen-code span:nth-child(3n+1) { width: 2px; }
.specimen-code span:nth-child(3n+2) { width: 1px; }
.specimen-code span:nth-child(3n)   { width: 4px; }
.specimen-code span:nth-child(4n)   { height: 68%; }
.specimen-code span:nth-child(7n)   { width: 6px; }

/* --- cover title ------------------------------------------------------- */

.cover-title {
  font-size: clamp(2.5rem, 8.4vw, 5.1rem);
  line-height: .96;
  letter-spacing: -0.032em;
  margin-bottom: clamp(18px, 3vw, 26px);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
}
.cover-title span { display: block; }
.cover-title-l2 { padding-left: clamp(0px, 4vw, 62px); }
.cover-title-l3 { padding-left: clamp(0px, 2vw, 26px); }
.cover-title em {
  font-style: italic;
  color: var(--pen);
  /* The one hand-drawn underline on the page. Kept to exactly one word so it
     reads as emphasis rather than decoration. */
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 2px;
  transition: background-size 1.1s .5s var(--ease-out);
}
.cover-title.in em { background-size: 100% 2px; }

.cover-lede {
  max-width: 54ch;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.cover-hand {
  margin-bottom: clamp(24px, 4vw, 34px);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

.cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.kbd-inline {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-bottom-width: 2px;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.3;
  opacity: .8;
}

.cover-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--ink-faint);
}
.cover-links a { color: var(--ink-soft); text-decoration: none; }
.cover-links a:hover { color: var(--pen); text-decoration: underline; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(26px + var(--sab));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-cue-line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--ink-faint), transparent);
  animation: cueDrop 2.6s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(.4); opacity: .4 }
  50%      { transform: scaleY(1);  opacity: 1 }
}

/* ================================================================ entries */

.entry {
  padding: clamp(46px, 8vw, 86px) 0;
  scroll-margin-top: 74px;
}
.entry-head--bare { margin-bottom: 4px; }
.lead {
  font-size: clamp(1.06rem, 2.3vw, 1.24rem);
  line-height: 1.6;
}
.entry-outro {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: .95rem;
  color: var(--ink-soft);
}

/* ============================================= entry 02 — the bench (chips) */

.apparatus-hint {
  max-width: 48ch;
  font-size: .95rem;
  color: var(--ink-soft);
}
.apparatus-hint b { color: var(--ink); }

.bench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(18px, 3vw, 28px);
  margin: 24px 0 22px;
}
.bench-tray-name {
  display: block;
  padding-bottom: 7px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--rule-strong);
  color: var(--red);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Each chip is a pinned specimen: a label with a pin through it. When the
   pins are cut, Matter.js takes over and moves them with a transform. */
.chip {
  position: relative;
  display: inline-block;
  padding: 5px 11px 5px 15px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--rule-strong);
  cursor: grab;
  will-change: transform;
  transition: box-shadow .16s, border-color .16s, color .16s;
}
.chip::before {
  content: '';
  position: absolute;
  top: 50%; left: 6px;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--red);
}
.chip[data-w="3"] { font-weight: 700; font-size: .8rem; }
.chip[data-w="1"] { color: var(--ink-soft); font-size: .7rem; }
.chip:hover {
  border-color: var(--pen);
  color: var(--pen);
  box-shadow: 2px 2px 0 var(--pen);
}
/* Pins cut: no border shadow, and the cursor says "grab me". */
.bench.loose .chip { box-shadow: none; cursor: grab; }
.bench.loose .chip:active { cursor: grabbing; }
.bench.loose .chip::before { background: var(--ink-faint); }

.bench-foot {
  /* position + z-index are load-bearing, not cosmetic. A chip with a non-none
     `transform` paints as though it were positioned at z-index 0, which puts it
     ABOVE ordinary in-flow content like this row — so a loose chip could sit on
     top of the button that puts them back. */
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.bench-foot-note { font-size: 1.16rem; }
.bench-foot-note code {
  font-family: var(--f-mono);
  font-size: .78rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--highlight-a);
  color: var(--ink);
}

/* ========================================== entry 03 — the experiment rack */

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(16px, 2.6vw, 22px);
  margin-top: 26px;
}

.rig-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 22px 20px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
              border-color .2s;
}
.rig-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.rig-card--btn { cursor: pointer; }

.rig-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rig-card h3 {
  font-size: 1.4rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 32;
}
.rig-card p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.56;
  color: var(--ink-soft);
}
.rig-card p b, .rig-card p em { color: var(--ink); }
.rig-card p em { font-style: italic; }
.rig-card code, .rig-card-facts code {
  font-family: var(--f-mono);
  font-size: .82em;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--highlight-a);
  color: var(--ink);
}

.rig-card-facts {
  list-style: none;
  margin: 2px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--rule);
  display: grid;
  gap: 6px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.rig-card-facts .label { margin-right: 6px; }

.rig-card-go {
  margin-top: auto;
  padding-top: 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pen);
}
.rig-card:hover .rig-card-go { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================ entry 04 — the field record */

.record { list-style: none; margin: 22px 0 0; padding: 0; }

.record-item {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(16px, 3vw, 30px);
  padding: 0 0 30px 0;
}
.record-item:not(:last-child) { border-left: 0; }

/* The spine: a hairline down the date column with a node per entry. */
.record-item::before {
  content: '';
  position: absolute;
  left: 150px;
  top: 8px; bottom: -8px;
  width: 1px;
  background: var(--rule-strong);
  transform: translateX(-15px);
}
.record-item:last-child::before { bottom: auto; height: 10px; }
.record-item::after {
  content: '';
  position: absolute;
  left: 150px;
  top: 7px;
  width: 7px; height: 7px;
  margin-left: -18px;
  border-radius: 50%;
  background: var(--paper-raised);
  border: 1.5px solid var(--red);
}

.record-when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 2px;
}
.record-date {
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.record-now { transform: rotate(-2deg); font-size: .58rem; }

.record-what h3 {
  font-size: 1.2rem;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 24;
}
.record-what h4 {
  margin: 2px 0 10px;
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pen);
}
/* The city and the "internship" qualifier are information, not decoration,
   so they use --ink-soft (AA-safe) rather than --ink-faint. */
.record-place, .record-kind { color: var(--ink-soft); font-weight: 400; }
.record-kind { font-family: var(--f-mono); font-size: .74rem; }
.record-what ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; }
.record-what li {
  position: relative;
  padding-left: 17px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.record-what li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -.1em;
  font-size: 1.3em;
  color: var(--red);
}
.record-what li b { color: var(--ink); }

/* ============================================== entry 05 — credentials */

.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 3vw, 26px);
  margin-top: 22px;
}
.cred { display: flex; gap: 16px; align-items: flex-start; }
.cred-seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 2px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 700;
  transform: rotate(-6deg);
  opacity: .85;
}
.cred h3 { font-size: 1.06rem; }
.cred h4 {
  margin: 1px 0 5px;
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 400;
  color: var(--pen);
}
.cred-meta { display: block; font-size: .7rem; color: var(--ink-soft); margin-bottom: 8px; }
.cred p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--ink-soft); }

/* =============================================================== colophon */

.colophon { padding: clamp(40px, 6vw, 64px) 0 calc(56px + var(--sab)); }
.colophon-rule {
  height: 6px;
  margin-bottom: 26px;
  background:
    repeating-linear-gradient(90deg,
      var(--rule-strong) 0, var(--rule-strong) 1px,
      transparent 1px, transparent 9px);
}
.colophon-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 5vw, 60px);
  align-items: start;
  margin-bottom: 30px;
}
.colophon-note {
  max-width: 46ch;
  margin: 8px 0 0;
  font-size: .93rem;
  color: var(--ink-soft);
}
.colophon-meta { text-align: right; }
.colophon-tally {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--red);
  margin: 6px 0 10px;
}
.colophon-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.colophon-sign .hand { font-size: 1.8rem; transform: rotate(-2deg); }
.colophon-copy { font-size: .68rem; color: var(--ink-soft); letter-spacing: .06em; }

/* ================================================================= toasts */

.toast-rail {
  position: fixed;
  left: 50%;
  bottom: calc(22px + var(--sab));
  z-index: 1200;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 24px));
}

/* A found-something card. Reads like a specimen tag, not a notification. */
.toast {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  background: var(--paper-raised);
  border: 1px solid var(--ink);
  border-left: 3px solid var(--red);
  box-shadow: var(--shadow-deep);
  animation: toastIn .42s var(--ease-back);
}
.toast.out { animation: toastOut .3s var(--ease-out) forwards; }

/* The seal-broken toast. Green edge, not red: every other toast is a finding
   logged (a margin note), this one is a section of the notebook opening. */
.toast--seal {
  border-left-color: var(--stamp);
  border-color: var(--stamp);
}
.toast--seal .toast-mark { color: var(--stamp); }
.toast--seal .toast-kind { color: var(--stamp); }

/* .toast-rail is pointer-events:none so toasts can never swallow a click meant
   for the page underneath. This link is the one exception — it is the only
   toast content worth clicking — so it re-enables events on ITSELF, not on the
   rail, and keeps a real 44px-ish touch target via padding. */
.toast-go {
  pointer-events: auto;
  display: inline-block;
  margin-top: 9px;
  padding: 7px 12px;
  border: 1px solid var(--stamp);
  border-radius: 2px;
  color: var(--stamp);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.toast-go:hover,
.toast-go:focus-visible {
  background: var(--stamp);
  color: var(--paper-raised);   /* 5.03:1 on the green — same pair as a filled stamp */
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) rotate(-1deg) }
  to   { opacity: 1; transform: none }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-8px) }
}
.toast-mark {
  flex: none;
  font-size: .9rem;
  color: var(--red);
  line-height: 1.4;
}
.toast-body { min-width: 0; }
.toast-kind {
  display: block;
  font-family: var(--f-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1px;
}
.toast-title { font-size: .93rem; font-weight: 600; line-height: 1.35; }
.toast-note { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }

/* ============================================================== responsive */

@media (max-width: 1080px) {
  .rig-nav a { padding: 6px 8px; font-size: .68rem; }
  .world-switch-label { display: none; }
  .world-switch { padding: 0 8px; }
}

@media (max-width: 860px) {
  .rig-menu { display: flex; }
  .rig-nav {
    position: fixed;
    top: calc(45px + var(--sat));
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px clamp(14px, 3.4vw, 26px) 14px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-deep);
    /* Collapsed by default on small screens; `.open` drops it down. */
    display: none;
  }
  .rig-nav.open { display: flex; }
  .rig-nav a { padding: 11px 4px; font-size: .82rem; border-bottom: 1px solid var(--rule); }
  .rig-nav a:last-child { border-bottom: 0; }
  .rig-controls { margin-left: auto; }
}

@media (max-width: 720px) {
  .record-item { grid-template-columns: 1fr; gap: 10px; padding-left: 20px; }
  .record-item::before { left: 0; top: 6px; transform: none; }
  .record-item::after { left: 0; margin-left: -3px; top: 6px; }
  .record-when { flex-direction: row; align-items: center; gap: 10px; }
  .colophon-grid { grid-template-columns: 1fr; }
  .colophon-meta { text-align: left; }
  .specimen { transform: none; max-width: none; }
  .specimen-rows .label { min-width: 88px; }
  .cover-title-l2, .cover-title-l3 { padding-left: 0; }
  .scroll-cue { display: none; }
  .folio { display: none; }
}

@media (max-width: 420px) {
  .specimen { padding: 15px 16px 12px; }
  .specimen-rows > div {
    display: grid;            /* label above value: 88px + wrap fits neither */
    gap: 1px;
    font-size: .84rem;
  }
  .cover-actions .btn { width: 100%; }
}

/* ============================================================ konami payoff
 * The old code deserves more than a toast. The whole instrument glitches
 * once — like a CRT taking a knock — then settles. `lab.js` adds this class
 * for 1.4s and removes it; nothing here persists.
 * ====================================================================== */

.konami-flip { animation: konamiKnock 1.4s var(--ease-out); }
@keyframes konamiKnock {
  0%   { filter: none; transform: none; }
  6%   { filter: invert(1) hue-rotate(90deg); transform: translate(-3px, 1px) skewX(-1.4deg); }
  11%  { filter: none; transform: translate(2px, -1px); }
  17%  { filter: invert(1) hue-rotate(-40deg); transform: translate(-2px, 2px) skewX(1deg); }
  23%  { filter: none; transform: none; }
  31%  { filter: saturate(2.4) contrast(1.14); }
  46%  { filter: none; }
  100% { filter: none; transform: none; }
}

/* A hard glitch is exactly the thing to skip when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .konami-flip { animation: none; }
}

/* ============================================================ appendix (06) */
/* Entry 06 exists in two states and ships with both in the DOM: #appendix-sealed
   and #appendix-open. lab.js swaps them live when the seal breaks. Keeping both
   in the markup means the volume has a sixth entry either way — it scrolls, it
   numbers, it counts toward `read-all` — instead of a hole that appears later. */

.sealed {
  background: var(--paper-deep);
  border-style: dashed;
  border-color: var(--rule-strong);
  overflow: hidden;
}
/* A faint diagonal hatch: the look of a page you have not been given yet.
   Decorative only, and behind the text. */
.sealed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    var(--grid-major) 11px 12px
  );
  opacity: .5;
  pointer-events: none;
}
.sealed > * { position: relative; }

.sealed-note {
  max-width: 54ch;
  margin-top: 14px;
  font-size: clamp(.98rem, 2.1vw, 1.08rem);
  line-height: 1.62;
  color: var(--ink);
}

.sealed-gauge {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 22px 0 14px;
  flex-wrap: wrap;
}
.sealed-bar {
  position: relative;
  flex: 1 1 190px;
  height: 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
#seal-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--stamp);
  transition: width .5s var(--ease-out);
}
.sealed-count {
  flex: none;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);          /* a read-out, so full ink — not --ink-soft */
  font-variant-numeric: tabular-nums;
}

.sealed-hint {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sealed-hint b { color: var(--stamp); font-variant-numeric: tabular-nums; }
.sealed-hint > span[aria-hidden] { color: var(--stamp); flex: none; }

/* --- the ledger, once open --------------------------------------------- */

.defects {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  counter-reset: defect;
}
.defect {
  position: relative;
  padding: 20px 0 20px 0;
  border-top: 1px solid var(--rule);
  counter-increment: defect;
}
.defect:first-child { border-top: none; padding-top: 8px; }

.defect h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-size: clamp(1.04rem, 2.4vw, 1.22rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 28;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 9px;
}
/* The defect number, in the margin voice the rest of the notebook uses. */
.defect h3::before {
  content: 'D-' counter(defect, decimal-leading-zero);
  flex: none;
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--red);
  transform: translateY(-2px);
}

.defect p {
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.66;
  color: var(--ink);
}
.defect p + p { margin-top: 9px; }
.defect code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--highlight-a);
  font-family: var(--f-mono);
  font-size: .82em;
}
/* How it was caught: the lesson, set apart from the description. */
.defect-how {
  padding-left: 13px;
  border-left: 2px solid var(--stamp);
  color: var(--ink-soft) !important;
  font-size: .88rem !important;
}

.defect-coda {
  margin-top: 26px;
  font-size: clamp(1.12rem, 2.6vw, 1.36rem);
  line-height: 1.4;
}
.defect-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .defect h3 { flex-direction: column; gap: 3px; }
  .defect h3::before { transform: none; }
}