/* ==================================================================
   NISHANTH MARNENI — the loud edition

   Marble and marker. Public-domain philosophers, cut out of their
   museum walls, dropped onto flat neon shapes and scrawled over —
   the Mona Lisa in a leather jacket, done with Socrates. Grain on
   everything, clouds drifting at four speeds, and one word per room
   set at the size of a wall.

     1  tokens
     2  base and shared furniture
     3  the collage kit — discs, tape, scrawl, badges, drips, grain
     4  topbar
     5  hero
     6  running rule
     7  acts
     8  interlude — the second poster
     9  apparatus
    10  talk, footer
    11  motion
   ================================================================== */

/* ------------------------------------------------------------------ *
 *  1  tokens
 * ------------------------------------------------------------------ */

:root {
  /* the two grounds */
  --ink:    #141110;
  --ink-2:  #1d1815;
  --paper:  #efe5d1;
  --paper-2:#e4d8bf;

  /* marble */
  --bone:   #f7efe2;
  --bone-dim: #c9bba6;

  /* the spray cans */
  --pink:   #ff2e88;
  --acid:   #ffd21e;
  --blue:   #2b4cff;
  --jade:   #00a86b;
  --orange: #ff6a13;
  --rust:   #c0392b;

  /* faces */
  --shout:  "Anton", "Arial Narrow", Impact, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --pen:    "Caveat", "Segoe Script", cursive;
  --serif:  "Bodoni Moda", Didot, Georgia, serif;
  --body:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap: 1360px;
  --gut: clamp(20px, 4.4vw, 64px);

  /* every act redefines these four; components only read them */
  --bg: var(--ink);
  --fg: var(--bone);
  --dim: #8d8071;
  --accent: var(--acid);
  --hair: color-mix(in srgb, var(--fg) 24%, transparent);
}

/* ------------------------------------------------------------------ *
 *  2  base
 * ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(15px, 0.55vw + 13px, 17.5px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
::selection { background: var(--pink); color: #fff; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }

.ser-i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
}

.micro, .act-note, .entry-no, .path-when, .talk-k,
.loop-head, .loop-key, .foot-col h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}

.mega, .act-title, .ghost-word, .wordmark {
  font-family: var(--shout);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.8;
  letter-spacing: -0.012em;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 *  3  the collage kit
 * ------------------------------------------------------------------ */

/* a flat disc of colour, sitting behind a piece of marble the way the
   sun sits behind the tower in a risograph poster */
.disc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* marker annotation — the thing someone wrote on the poster after it
   was printed. Always at an angle, always in a spray-can colour. */
.scrawl {
  position: absolute;
  z-index: 6;
  font-family: var(--marker);
  font-size: clamp(0.85rem, 1.35vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  pointer-events: none;
  text-wrap: balance;
}
.scrawl-pen {
  font-family: var(--pen);
  text-transform: none;
  font-size: clamp(1.1rem, 1.9vw, 1.9rem);
  letter-spacing: 0;
}

/* a rubber stamp, the kind that says PAID */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 2px solid currentColor;
  line-height: 1.15;
  rotate: -7deg;
}
.badge-round {
  width: clamp(74px, 8vw, 108px);
  height: clamp(74px, 8vw, 108px);
  border-radius: 50%;
  padding: 0;
}

/* grain, on everything — the single strongest signal that this was
   printed rather than rendered */
.act, .hero, .interlude, .foot { position: relative; isolation: isolate; }

.act::after, .hero::after, .interlude::after, .foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/></filter>\
<rect width='180' height='180' filter='url(%23n)' opacity='0.42'/></svg>");
}

/* the drifting clouds, cut out of a baroque ceiling */
.cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: translate;
}
.act .cloud { z-index: 0; }

/* a white cloud multiplied onto pale paper disappears; on light rooms
   it reads as the shadow the cloud casts instead */
.act-bone .cloud, .act-sky .cloud, .act-ochre .cloud {
  mix-blend-mode: multiply;
  opacity: 0.16;
  filter: grayscale(1) brightness(0.45) blur(1px);
}
.act-ink .cloud, .act-dark .cloud, .act-rust .cloud, .hero .cloud {
  mix-blend-mode: screen;
  opacity: 0.32;
  filter: blur(1px);
}

/* marble that stands in a section rather than in the hero */
.marble {
  position: absolute;
  bottom: 0;
  z-index: 2;
  margin: 0;
  width: clamp(180px, 18vw, 310px);
  pointer-events: none;
  will-change: translate;   /* the figure moves, disc and all */
}

.marble img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}

/* museum photographs are lit cold; on a warm paper ground the stone
   has to be warmed back up or it reads as a blue ghost */
.act-bone .marble img,
.act-ochre .marble img {
  filter: sepia(0.24) saturate(1.06) contrast(1.1)
          drop-shadow(0 16px 24px rgba(70,52,28,0.3));
}

/* pale marble on pale paper has nothing to stand against, so each bust
   gets its own flat disc the way the tower gets its sun */
.marble::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 6%;
  translate: -50% 0;
  width: 116%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--disc, var(--blue));
}
#about .marble { --disc: #2b4cff; }

/* Aurelius is a full bust, not a head: his disc sits lower and wider so
   the shoulders land on ink instead of fading into the paper */
#path .marble { --disc: #17130f; }
#path .marble::before { top: 20%; width: 146%; }

.marble figcaption {
  font-family: var(--pen);
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.15;
  color: var(--accent);
  rotate: -3deg;
  margin-top: 6px;
  text-align: center;
  max-width: 100%;
}
.marble-right { right: 0; }
.marble-left  { left: 0; }

/* the marble stands beside the text, never on it: below this width
   there is no room for both, so the stone goes */
@media (max-width: 1279px) { .marble { display: none; } }
@media (min-width: 1280px) {
  #about .who, #about .act-head { padding-right: clamp(210px, 20vw, 340px); }
  #path .path { padding-left: clamp(210px, 20vw, 340px); }
}

/* ------------------------------------------------------------------ *
 *  4  topbar
 * ------------------------------------------------------------------ */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px var(--gut);
  mix-blend-mode: difference;
  color: #fff;
}

.topbar-mark { font-family: var(--shout); font-size: 1.05rem; letter-spacing: 0.06em; text-decoration: none; }

.topbar-nav { margin-left: auto; display: flex; gap: clamp(14px, 1.9vw, 30px); }
.topbar-nav a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s;
}
.topbar-nav a:hover { opacity: 1; }

.menu-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid currentColor;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .topbar-nav {
    position: fixed;
    inset: 52px var(--gut) auto auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding: 18px 22px;
    background: var(--ink);
    border: 2px solid var(--acid);
    display: none;
  }
  .topbar-nav.open { display: flex; }
  .topbar { mix-blend-mode: normal; color: var(--bone); }
}

/* ------------------------------------------------------------------ *
 *  5  hero
 *
 *  Planes, back to front: clouds, disc, name, marble, foreground
 *  cloud and scrawl, then the reading matter.
 * ------------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 74% 34%, #2a221c 0%, #17130f 46%, #100d0b 100%);
}

.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero .cloud-a { top: 4%;  left: -6%;  width: clamp(320px, 42vw, 720px); }
.hero .cloud-b { top: 34%; left: 30%;  width: clamp(280px, 34vw, 580px); opacity: 0.34; }
.hero .cloud-fore {
  bottom: -8%;
  left: -10%;
  width: clamp(300px, 40vw, 660px);
  z-index: 5;
  opacity: 0.42;
  mix-blend-mode: screen;
}

/* the flat sun the marble stands against */
.hero-disc {
  top: 19%;
  right: 4%;
  width: clamp(230px, 34vw, 540px);
  aspect-ratio: 1;
  background: var(--acid);
}

.hero-rail {
  position: absolute;
  z-index: 5;
  inset: clamp(64px, 9vh, 104px) var(--gut) auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 20px;
  padding-inline: clamp(38px, 4.4vw, 66px);   /* clears the corner sparks */
  color: var(--bone);
}
.micro { opacity: 0.88; }
.micro-l { justify-self: start; }
.micro-r { justify-self: end; text-align: right; }

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.spark {
  position: absolute;
  z-index: 5;
  width: clamp(24px, 3vw, 44px);
  height: clamp(24px, 3vw, 44px);
  color: var(--acid);
}
.spark-tl { top: clamp(56px, 8vh, 92px); left: var(--gut); }
.spark-tr { top: clamp(56px, 8vh, 92px); right: var(--gut); }

.mega {
  position: absolute;
  z-index: 2;
  top: clamp(104px, 16.5vh, 196px);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--bone);
  font-size: clamp(3.4rem, 23.5vw, 22rem);   /* JS refines this to fit */
}

/* the marble itself — pinned to the name, so the letters meet the
   stone the same way at every scroll position */
.bust {
  position: absolute;
  z-index: 3;
  right: clamp(-40px, 2vw, 90px);
  bottom: 0;
  width: auto;
  height: clamp(360px, 78vh, 900px);
  filter: drop-shadow(-18px 18px 34px rgba(0,0,0,0.55)) contrast(1.06);
}

/* what somebody wrote on the poster afterwards */
.hero .scrawl-1 { top: 44%; left: 5%;  color: var(--pink);  rotate: -6deg; max-width: 12ch; }
.hero .scrawl-2 { top: 60%; left: 27%; color: var(--acid);  rotate: 4deg;  max-width: 14ch; }
.hero .scrawl-3 { top: 25%; right: 6%; color: var(--jade);  rotate: -8deg; max-width: 10ch; }

.crown {
  position: absolute;
  z-index: 6;
  top: 15.5%;
  right: 17.5%;
  width: clamp(56px, 6.5vw, 108px);
  color: var(--pink);
  rotate: -13deg;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(20,17,16,0.55));
}

.hero-badge {
  position: absolute;
  z-index: 6;
  bottom: 22%;
  right: 3%;
  color: var(--pink);
  background: var(--ink);
  flex-direction: column;
  gap: 2px;
}

.hero-floor {
  position: absolute;
  z-index: 7;
  inset: auto var(--gut) clamp(34px, 5.5vh, 66px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  color: var(--bone);
}

.console {
  margin: 0;
  display: grid;
  gap: 5px;
  border-top: 3px solid var(--acid);
  padding-top: 12px;
  max-width: min(32ch, 100%);
  background: linear-gradient(180deg, rgba(20,17,16,0.72), rgba(20,17,16,0) 78%);
}
.console > div { display: flex; gap: 12px; align-items: baseline; }
.console dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  min-width: 6.5em;
}
.console dd { margin: 0; font-size: 0.86rem; font-weight: 500; }
.console .ok { color: var(--jade); }

/* the lede runs across the beard, so it gets the same soft backing the
   console has rather than asking a text-shadow to do all the work */
.hero-side {
  justify-self: end;
  max-width: min(46ch, 100%);
  text-align: right;
  padding: 14px 16px 0 24px;
  background: radial-gradient(120% 130% at 80% 40%, rgba(16,13,11,0.9), rgba(16,13,11,0) 76%);
}

.hero-lede {
  margin: 0 0 20px;
  font-size: clamp(0.98rem, 1.05vw, 1.18rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--bone) 90%, transparent);
  text-shadow: 0 2px 18px rgba(16,13,11,0.85);
}

.hero-cta { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 11px 22px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--acid);
  color: var(--ink);
  border: 2px solid var(--acid);
  box-shadow: 5px 5px 0 var(--pink);
  transition: transform 0.16s, box-shadow 0.16s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--pink); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--bone); box-shadow: 5px 5px 0 var(--blue); }
.btn-ghost:hover { box-shadow: 8px 8px 0 var(--blue); }

.hero-down {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 12px;
  width: 12px;
  height: 30px;
  translate: -50% 0;
  color: var(--acid);
  opacity: 0.6;
  animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(7px); opacity: 0.9; }
}

@media (max-width: 1000px) {
  .hero-floor { grid-template-columns: 1fr; gap: 20px; }
  .hero-side { justify-self: start; text-align: left; }
  .hero-cta { justify-content: flex-start; }
  .hero-rail { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .micro-l, .micro-r { display: none; }
  .bust { height: clamp(300px, 52vh, 560px); right: -8%; opacity: 0.9; }
  /* the sun follows the head down, or it floats in the gap */
  .hero-disc { top: 19%; right: -6%; width: clamp(200px, 52vw, 380px); }
  .hero .scrawl-2, .hero-badge { display: none; }
}

/* ------------------------------------------------------------------ *
 *  6  the running rule
 * ------------------------------------------------------------------ */

.rule-ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--acid);
  color: var(--ink);
  border-block: 3px solid var(--ink);
  padding: 11px 0;
}
.ticker-track { display: flex; width: max-content; animation: run 46s linear infinite; }
.ticker-set { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.ticker-set span {
  font-family: var(--shout);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-set svg { width: 11px; height: 11px; color: var(--pink); flex: none; }
@keyframes run { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ *
 *  7  the acts
 * ------------------------------------------------------------------ */

.act {
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(84px, 10vw, 152px);
}

.act-bone  { --bg: var(--paper);   --fg: #171310; --dim: #6f6353; --accent: var(--pink); }
.act-ink   { --bg: #171310;        --fg: #f2e7d6; --dim: #8d8071; --accent: var(--acid); }
.act-sky   { --bg: #cfd8d6;        --fg: #12191a; --dim: #5b6a6b; --accent: var(--blue); }
.act-ochre { --bg: var(--paper-2); --fg: #1a1509; --dim: #756747; --accent: var(--orange); }
.act-dark  { --bg: #100d0b;        --fg: #ecdfcb; --dim: #7d6f61; --accent: var(--jade); }
.act-rust  { --bg: var(--rust);    --fg: #fdf3e4; --dim: #f0c3b6; --accent: var(--acid); }

.ghost-word {
  position: absolute;
  z-index: 0;
  right: -0.06em;
  bottom: -0.24em;
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 0.72;
  color: var(--fg);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.act > .wrap { position: relative; z-index: 3; }

/* the head of an act: numeral, word, caption, one thick rule */
.act-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: clamp(16px, 2.4vw, 34px);
  padding-bottom: 14px;
  margin-bottom: clamp(38px, 5vw, 66px);
  border-bottom: 4px solid var(--fg);
}

.act-num {
  font-family: var(--marker);
  font-size: clamp(1.3rem, 2vw, 2rem);
  color: var(--accent);
  line-height: 1;
  padding-bottom: 0.2em;
  rotate: -6deg;
}

.act-title { font-size: clamp(2.6rem, 9.2vw, 8.4rem); color: var(--fg); }

.act-note { color: var(--dim); text-align: right; padding-bottom: 0.7em; max-width: 22ch; line-height: 1.7; }

.act-lead {
  max-width: 62ch;
  margin: 0 0 clamp(30px, 4vw, 52px);
  font-size: clamp(1.02rem, 1.15vw, 1.24rem);
  color: color-mix(in srgb, var(--fg) 90%, transparent);
}

@media (max-width: 760px) {
  .act-head { grid-template-columns: auto 1fr; }
  .act-note { grid-column: 1 / -1; text-align: left; padding: 8px 0 0; max-width: none; }
}

/* --- who ---------------------------------------------------------- */

.act-bone .cloud-c { top: 6%; left: 4%; width: clamp(240px, 30vw, 480px); }

.who {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: start;
}
.who-copy p { margin: 0 0 1.15em; max-width: 62ch; }

.lead { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.42; }
.lead b { font-weight: 700; background: var(--acid); padding: 0 6px; }

.facts { margin: 0; border-top: 3px solid var(--fg); }
.facts > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.facts dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.28em;
}
.facts dd { margin: 0; font-size: 0.95rem; }

@media (max-width: 860px) { .who { grid-template-columns: 1fr; } }

/* --- work --------------------------------------------------------- */

.act-ink .cloud-d { top: 14%; right: 2%; width: clamp(240px, 30vw, 500px); }

.plates { list-style: none; margin: 0; padding: 0; }

.entry {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(30px, 3.6vw, 50px) 0;
  border-top: 1px solid var(--hair);
}
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry-no { color: var(--accent); padding-top: 0.75em; }
.entry-body { max-width: 68ch; }

.entry-body h3 {
  font-family: var(--shout);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 0.94;
  margin: 0 0 6px;
}

.award {
  font-family: var(--marker);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  vertical-align: middle;
  padding: 3px 10px;
  margin-left: 12px;
  background: var(--pink);
  color: #fff;
  text-transform: uppercase;
  rotate: -4deg;
  display: inline-block;
}

.entry-sub { margin: 0 0 14px; color: var(--dim); font-size: 1.02rem; }
.entry-body p { margin: 0 0 16px; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tags li {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 2px solid var(--hair);
  color: var(--dim);
}

@media (max-width: 700px) {
  .entry { grid-template-columns: 1fr; gap: 12px; }
  .entry-no { padding-top: 0; }
}

/* --- kit ---------------------------------------------------------- */

.act-sky .cloud-e { bottom: 4%; left: 2%; width: clamp(240px, 30vw, 460px); }

.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(24px, 3vw, 44px); }

.kit-group h3 {
  font-family: var(--marker);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--fg);
  rotate: -1.2deg;
}

.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.tools li {
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 12px;
  background: var(--fg);
  color: var(--bg);
  transition: transform 0.16s, box-shadow 0.16s;
}
.tools li:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--accent); }
.tools li.ghost { background: transparent; color: var(--fg); border: 2px dashed var(--hair); }

.kit-note {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(34px, 4vw, 54px) 0 0;
  max-width: 66ch;
  color: var(--dim);
  font-size: 0.95rem;
}
.note-arrow { width: 34px; height: 14px; flex: none; color: var(--accent); }

/* --- path --------------------------------------------------------- */

.path { list-style: none; margin: 0; padding: 0; }
.path li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(24px, 2.8vw, 38px) 0;
  border-top: 1px solid var(--hair);
}
.path li:last-child { border-bottom: 1px solid var(--hair); }
.path-when { color: var(--accent); padding-top: 0.6em; }
.path h3 {
  font-family: var(--shout);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1;
  margin: 0 0 4px;
}
.path-org { margin: 0 0 6px; color: var(--dim); }
.path p { margin: 0; }

@media (max-width: 700px) {
  .path li { grid-template-columns: 1fr; gap: 10px; }
  .path-when { padding-top: 0; }
}

/* ------------------------------------------------------------------ *
 *  8  interlude — the second poster
 * ------------------------------------------------------------------ */

.interlude {
  min-height: 92svh;
  overflow: hidden;
  background: #0e0b09;
}

.interlude .plate { position: absolute; inset: 0; pointer-events: none; }
.interlude .plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* biased to the top of the painting, which drops the figures lower in
     the frame and leaves the word its own air */
  object-position: 50% 8%;
}

.plate-back { z-index: 0; }
.plate-back img { filter: saturate(0.85) brightness(1.05) contrast(1.04); }

/* the painting stands alone now — text sits above it at full opacity,
   never occluded. A scrim keeps the read: the image is close to full
   strength up where the wall is bare stone, and dims through the
   crowded lower half so the word and the caption both stay legible
   without needing a text-shadow to do all the work. */
.interlude::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(14, 11, 9, 0)    0%,
    rgba(14, 11, 9, 0.05) 30%,
    rgba(14, 11, 9, 0.38) 65%,
    rgba(14, 11, 9, 0.75) 100%);
}

.interlude-rail { inset: clamp(52px, 7vh, 88px) var(--gut) auto; }

/* the word itself carries the fade now: solid cream at the top of each
   letter, dissolving into the painting by the foot of the strokes,
   instead of the old occlusion trick. */
.interlude-word {
  top: clamp(74px, 11vh, 150px);
  color: var(--bone);
  text-shadow: 0 0 30px rgba(12, 9, 7, 0.5);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 92%);
}

.interlude-cap {
  position: absolute;
  z-index: 5;
  left: var(--gut);
  bottom: clamp(34px, 6vh, 76px);
  max-width: 46ch;
  margin: 0;
  color: var(--bone);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.4;
  text-shadow: 0 2px 20px rgba(14,11,9,0.9);
}

.interlude .scrawl-4 { bottom: 30%; right: 6%; color: var(--acid); rotate: -7deg; max-width: 13ch; }

/* ------------------------------------------------------------------ *
 *  9  apparatus — the loop in its vitrine
 * ------------------------------------------------------------------ */

.act-dark .cloud-f { top: 8%; right: 6%; width: clamp(240px, 28vw, 460px); }

.vitrine {
  border: 3px solid var(--fg);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  padding: clamp(16px, 2vw, 26px);
  box-shadow: 10px 10px 0 var(--accent);
}

.loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 860px) { .loop { grid-template-columns: 1fr; } }

.loop-manifest, .loop-cluster {
  border: 1px solid var(--hair);
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--bg) 82%, #000);
}

.loop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.loop-file { color: var(--accent); letter-spacing: 0.1em; }

.loop-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hair);
}
.loop-key { color: var(--dim); letter-spacing: 0.14em; }

.loop-stepper { display: flex; align-items: center; gap: 4px; }
.loop-stepper button {
  width: 28px; height: 28px;
  background: none;
  border: 2px solid var(--hair);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.loop-stepper button:hover:not(:disabled) { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.loop-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.loop-stepper output { font-family: var(--mono); font-size: 0.95rem; min-width: 2.2em; text-align: center; }

.loop-image {
  background: none;
  border: 2px solid var(--hair);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.loop-image:hover { background: var(--accent); color: var(--bg); }

.loop-switch { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.loop-track { width: 44px; height: 22px; border: 2px solid var(--hair); position: relative; display: block; }
.loop-track i { position: absolute; inset: 2px auto 2px 2px; width: 14px; background: var(--jade); transition: translate 0.2s, background 0.2s; }
.loop-switch[aria-checked="false"] .loop-track i { translate: 20px 0; background: var(--pink); }
.loop-state { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

.loop-hint { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--dim); min-height: 2.6em; }
.loop-hint[data-alarm="true"] { color: var(--pink); }

.loop-sync {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid currentColor;
}
.loop-sync[data-state="synced"]      { color: var(--jade); }
.loop-sync[data-state="progressing"] { color: var(--acid); }
.loop-sync[data-state="drift"]       { color: var(--pink); }

.loop-pods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}

.pod {
  width: 100%;
  text-align: left;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: 1px solid var(--hair);
  color: var(--fg);
  padding: 9px 11px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  transition: background 0.18s, border-color 0.18s, opacity 0.25s, transform 0.18s;
}
.pod:hover:not(:disabled) { transform: translate(-2px,-2px); border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }
.pod:disabled { cursor: default; }

.pod-top { display: flex; align-items: center; gap: 7px; }
.pod-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); flex: none; }
.pod-name { font-family: var(--mono); font-size: 0.68rem; }
.pod-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--dim); }

.pod[data-state="pending"] { opacity: 0.66; }
.pod[data-state="pending"] .pod-dot { background: var(--acid); animation: pulse 1s ease-in-out infinite; }
.pod[data-state="terminating"] { opacity: 0.3; }
.pod[data-state="terminating"] .pod-dot { background: var(--pink); }
@keyframes pulse { 50% { opacity: 0.25; } }

.pod-ghost {
  border: 2px dashed var(--pink);
  color: var(--pink);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 11px;
  min-height: 100%;
  display: flex;
  align-items: center;
}

.loop-log {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hair);
  max-height: 168px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.85;
}
.loop-log li { display: flex; gap: 12px; color: var(--dim); }
.loop-log time { color: color-mix(in srgb, var(--dim) 70%, transparent); flex: none; }
.loop-log li[data-kind="ok"]    span { color: var(--jade); }
.loop-log li[data-kind="warn"]  span { color: var(--pink); }
.loop-log li[data-kind="quiet"] span { color: var(--dim); }

/* ------------------------------------------------------------------ *
 *  10  talk and footer
 * ------------------------------------------------------------------ */

.act-rust .cloud-g { top: 10%; left: 4%; width: clamp(240px, 30vw, 480px); }

.talk-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--fg); }

.talk {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(16px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  transition: padding-inline 0.25s, background 0.25s;
}
.talk:hover { padding-inline: 14px; background: color-mix(in srgb, var(--fg) 10%, transparent); }

.talk-k { color: var(--accent); }
.talk-v {
  font-family: var(--shout);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 2.1rem);
  line-height: 1;
  word-break: break-word;
}
.talk-arrow { width: 34px; height: 14px; opacity: 0.6; transition: translate 0.25s, opacity 0.25s; }
.talk:hover .talk-arrow { translate: 8px 0; opacity: 1; }

@media (max-width: 620px) {
  .talk { grid-template-columns: 1fr auto; }
  .talk-k { grid-column: 1 / -1; }
}

.foot {
  --fg: var(--bone);
  --dim: #8d8071;
  --hair: rgba(247,239,226,0.16);
  background: var(--ink);
  color: var(--bone);
  padding: clamp(52px, 6vw, 84px) 0 22px;
}

.foot-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--hair);
}
.foot-col h4 { margin: 0 0 10px; color: var(--acid); font-weight: 500; }
.foot-col p { margin: 0; font-size: 0.86rem; line-height: 1.65; color: var(--dim); }
.foot-col a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--hair); }
.foot-col a:hover { border-color: var(--acid); }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.foot-base a { margin-left: auto; text-decoration: none; }
.foot-base a:hover { color: var(--acid); }

/* ------------------------------------------------------------------ *
 *  11  motion
 * ------------------------------------------------------------------ */

/* Reveals, written as one selector rather than a hide/show pair.

   A pair invites a specificity race, and loses it: `.js .path li` is
   (0,2,1) and any `.in` rule you write to beat it has to match that,
   for every selector in the list, forever. Get it wrong and the class
   lands on the element while the text stays at zero opacity — the page
   looks empty and the DOM looks fine.

   `:not(.in)` removes the contest: revealed elements stop matching. The
   transition lives on its own always-on rule, or it would be dropped at
   the same moment it is needed and the reveal would snap. */

.js :is(.act-head, .entry, .path li,
        .kit-group, .talk-list, .vitrine, .who) {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js :is(.act-head, .entry, .path li,
        .kit-group, .talk-list, .vitrine, .who):not(.in) {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .hero-down, .pod[data-state="pending"] .pod-dot { animation: none; }
  .js :is(.act-head, .entry, .path li,
          .kit-group, .talk-list, .vitrine, .who):not(.in) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cloud, .marble { translate: none !important; }
}