/* ==========================================================================
   beehave — the deck
   Tokens, colours and type come from design/brand/tokens.css (linked first).
   Nothing here re-declares a colour, a font or a size that the brand owns.

   Shapes used in diagrams (hexagon, node, link) are geometry from
   design/assets/logo/parts: hex side 100, stroke 23.78, node r = stroke.
   They are drawn in CSS because a slide diagram must be positioned by the
   layout engine, not by an SVG viewBox. No illustration is redrawn here.
   ========================================================================== */

/* ------------------------------------------------------------------ scale */
html {
  /* one scale for phone (390×844), 4:3 projector and 16:9 laptop */
  font-size: clamp(15px, 0.62vw + 0.92vh, 25px);
  overflow: hidden;
}

body {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

::selection { background: var(--honey-300); color: var(--propolis-900); }

/* ------------------------------------------------------------------ stage */
.stage {
  position: fixed;
  inset: 0;
  isolation: isolate;
  /* let the deck own horizontal gestures; vertical panning stays native */
  touch-action: manipulation;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.5rem, 1.6vh, 1.5rem);
  padding: clamp(1.1rem, 2.6vw, 3.4rem) clamp(1.1rem, 3.4vw, 4.5rem)
           clamp(2.9rem, 6.2vh, 4.2rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              visibility 0s;
}

.slide--ink {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.slide--ink .slide__head,
.slide--ink .eyebrow { color: var(--comb-400); }
.slide--ink h1,
.slide--ink h2,
.slide--ink .statement,
.slide--ink .display-md { color: var(--color-text-inverse); }
.slide--ink .quiet { color: var(--comb-300); }
.slide--ink .card {
  background: var(--comb-900);
  border-color: var(--comb-800);
}
.slide--ink ul.ticks li { color: var(--comb-100); }
.slide--ink .lead { color: var(--honey-300); }
.slide--ink .mono { color: var(--comb-400); }
.slide--ink .mark-line { background: var(--honey-500); }

/* the honey plate: exactly one loud block, never more than one per slide */
.slide--honey { background: var(--honey-400); color: var(--color-text-on-brand); }
.slide--honey .slide__head { color: var(--honey-900); }
.slide--honey h1, .slide--honey h2, .slide--honey .statement { color: var(--propolis-900); }
.slide--honey .quiet, .slide--honey .meta { color: var(--honey-900); }
.slide--honey .mono, .slide--honey .slide__foot, .slide--honey .slide__head { color: var(--propolis-900); }
.slide--honey .body { color: var(--propolis-900); }

/* chrome follows the plate it sits on */
.theme-ink .nav button { border-color: var(--comb-800); color: var(--comb-300); }
.theme-ink .nav button:hover { color: var(--comb-50); border-color: var(--honey-500); }
.theme-ink .combs i { background: var(--comb-800); }
.theme-ink .combs i.done { background: var(--honey-500); }
.theme-ink .jump { color: var(--comb-500); }
.theme-honey .nav button { border-color: var(--propolis-600); color: var(--propolis-900); }
.theme-honey .combs i { background: color-mix(in oklab, var(--propolis-900) 22%, transparent); }
.theme-honey .combs i.done { background: var(--propolis-900); }
.theme-honey .combs i.now { background: var(--propolis-700); }
.theme-honey .jump { color: var(--propolis-600); }

/* comb texture: only the real utility from tokens.css, only where it is empty */
.texture::before { opacity: 0.028; }

/* ------------------------------------------------------------------ chrome */
.slide__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.slide__head .n { font-variant-numeric: tabular-nums; }

.slide__body {
  min-height: 0;
  display: grid;
  align-content: center;
  gap: clamp(0.35rem, 1.4vh, 1.1rem);
  overflow: auto;
  scrollbar-width: none;
}
.slide__body::-webkit-scrollbar { display: none; }

.slide__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

/* ------------------------------------------------------- global bottom bar */
.chrome {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 clamp(1.1rem, 3.4vw, 4.5rem) clamp(0.7rem, 1.6vh, 1.1rem);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

/* progress: one comb cell per core slide — the brand's own evidence-bar idea */
.combs { display: flex; gap: 3px; align-items: center; }
.combs i {
  width: 0.6rem;
  height: 0.69rem;
  background: var(--comb-300);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.combs i.done { background: var(--honey-500); }
.combs i.now { background: var(--honey-600); transform: scale(1.35); }
.slide--ink ~ .chrome .combs i { background: var(--comb-800); }

.nav { display: flex; gap: var(--space-2); }
.nav button {
  appearance: none;
  border: 1px solid var(--color-line-strong);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  width: 2.1rem;
  height: 2.1rem;
  font: 600 0.95rem/1 var(--font-sans);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.nav button:hover { color: var(--color-text); border-color: var(--honey-500); }
.nav button:active { transform: scale(0.94); }
.nav button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.jump {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- copy */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin-bottom: var(--space-2);
}

.statement {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-size: clamp(1.5rem, 2.5vw + 1.5vh, 3.1rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
  max-width: 26ch;
}

.say {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw + 2vh, 4rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.lead {
  font-family: var(--font-serif);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(1rem, 0.9vw + 0.8vh, 1.4rem);
  line-height: 1.4;
  color: var(--color-security);
  max-width: 40ch;
  margin: 0;
}

p, .body {
  font-size: clamp(0.9rem, 0.45vw + 0.72vh, 1.05rem);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 46ch;
  margin: 0;
}
.quiet { color: var(--color-text-muted); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}
.mono--ink { color: var(--color-text); }
.honey { color: var(--color-brand-text); }
.mark-line { width: 2.6rem; height: 3px; background: var(--honey-500); border: 0; margin: clamp(0.4rem,1vh,0.9rem) 0; }

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.4rem, 1vh, 0.7rem); }
ul.ticks li {
  position: relative;
  padding-left: 1.3rem;
  font-size: clamp(0.85rem, 0.42vw + 0.7vh, 1rem);
  line-height: 1.45;
  max-width: 48ch;
  color: var(--color-text);
}
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--honey-500);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
ul.ticks li b { font-weight: 700; }

/* --------------------------------------------------------------- layout */
.cols {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(1.2rem, 3.6vw, 4rem);
  align-items: center;
  min-height: 0;
}
.cols--wide { grid-template-columns: 1.25fr 0.75fr; }
.cols--narrow { grid-template-columns: 0.72fr 1.28fr; }
.stack { display: grid; gap: clamp(0.55rem, 1.5vh, 1.1rem); align-content: center; }
.center { text-align: center; justify-items: center; }
.center .statement, .center .say, .center p { margin-inline: auto; }
.side { display: grid; place-items: center; }

@media (max-width: 34rem), (max-aspect-ratio: 3/4) {
  .cols, .cols--wide, .cols--narrow { grid-template-columns: 1fr; gap: clamp(0.8rem, 2vh, 1.4rem); }
  .slide__body { align-content: safe center; }
  .cols > .side { order: -1; }
  .statement, .say { max-width: 30ch; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: clamp(0.7rem, 1.6vw, 1.3rem);
  display: grid;
  gap: 0.35rem;
}
.card--royal { background: var(--color-surface-royal); border-color: var(--honey-200); }
.card__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* evidence card rows */
.rows { display: grid; gap: 0; }
.rows > div {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  gap: var(--space-3);
  padding: 0.42em 0;
  border-bottom: 1px dotted var(--color-line-strong);
  align-items: baseline;
}
.rows > div:last-child { border-bottom: 0; }
.rows dt, .rows .k {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rows dd, .rows .v { margin: 0; font-size: clamp(0.8rem, 0.4vw + 0.66vh, 0.95rem); }
.rows .v--mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* chips */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.5;
  padding: 0.1em 0.5em;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.chip--unknown { border-style: dashed; }
.chip--honey { border-color: var(--honey-500); background: var(--honey-50); color: var(--honey-800); }
.chip--dispute { border-color: var(--color-conflict); color: var(--color-conflict); }
.chip--ok { border-color: var(--color-success); color: var(--color-success); }
.chip--field { border-color: var(--color-field); color: var(--color-field); }
.chip--none { border-color: var(--color-line); color: var(--color-text-subtle); border-style: dashed; }

/* ------------------------------------------------------------------- comb
   A honeycomb wall. Cells are 1fr wide, so the wall fills its panel at any
   size; every even column drops by half a cell, which is how pointy-top
   hexagons tile. The outline is a second hexagon laid inside the first,
   because clip-path cuts a box-shadow away. */
.hexes {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: clamp(2px, 0.35vw, 5px);
  align-items: start;
  --hexhole: var(--color-surface);
}
.hexcol {
  display: grid;
  gap: clamp(2px, 0.35vw, 5px);
}
.hexcol:nth-child(even) { margin-top: 56%; }
.hexes i {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.155;
  background: var(--honey-500);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background var(--dur-slow) var(--ease-out);
}
.hexes i.hollow { background: var(--comb-300); }
.hexes i.hollow::after {
  content: "";
  position: absolute;
  inset: 6%;
  background: var(--hexhole);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.panel--empty, .panel--bare { --hexhole: var(--color-bg); }

/* the timeline: periods from evidence */
.timeline { display: grid; gap: 0.2rem; }
.timeline__track {
  position: relative;
  height: 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--comb-100);
}
.timeline__track i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--honey-400);
  border-radius: var(--radius-sm);
}
.timeline__labels { position: relative; height: 0.95rem; }
.timeline__labels span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.timeline__labels span:first-child { transform: none; }
.timeline__labels span:last-child { transform: translateX(-100%); }

/* fill ramp (re-runs, status) */
.fillbar { height: 0.5rem; background: var(--evidence-track); border-radius: var(--radius-pill); overflow: hidden; }
.fillbar i { display: block; height: 100%; background: var(--honey-500); border-radius: inherit; }

/* ------------------------------------------------------------------ rail */
.rail { display: grid; grid-template-columns: 1fr 1fr 0.6fr 1fr 1fr 0.6fr 1fr; gap: clamp(0.3rem, 0.9vw, 0.9rem); }
.rail__step {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding-top: 0.6rem;
  border-top: 2px solid var(--comb-300);
}
.rail__step--gate { border-top-color: var(--honey-500); }
.rail__step--gate .rail__t { color: var(--color-brand-text); font-family: var(--font-mono); font-weight: 500; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.15rem; }
.rail__n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-subtle); }
.rail__t { font-weight: 700; font-size: clamp(0.78rem, 0.35vw + 0.62vh, 0.95rem); line-height: 1.2; }
.rail__d { font-size: clamp(0.73rem, 0.32vw + 0.58vh, 0.88rem); line-height: 1.35; color: var(--color-text-muted); }

@media (max-width: 34rem), (max-aspect-ratio: 3/4) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail__step--gate { grid-column: 1 / -1; }
  .slide__foot { display: none; }
}

.gates { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gate {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-text);
}
.gate::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  background: var(--honey-500);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-size: clamp(0.72rem, 0.3vw + 0.58vh, 0.9rem); }
.tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 0.3em 0.6em 0.3em 0;
  border-bottom: 1px solid var(--color-line-strong);
  white-space: nowrap;
}
.tbl td { padding: 0.34em 0.6em 0.34em 0; border-bottom: 1px dotted var(--color-line); vertical-align: top; }
.tbl td:first-child { font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- art */
.asset { display: block; width: 100%; height: auto; max-width: 100%; }
.art-hive   { width: clamp(3.4rem, 7vw, 6rem); color: var(--color-text); }
.art-mark   { width: clamp(5.5rem, 14vw, 13rem); color: var(--honey-500); }
.art-mark--ink { color: var(--color-text-inverse); }
.art-lockup { width: clamp(9rem, 27vw, 24rem); }
.art-figure { width: clamp(6rem, 17vw, 15rem); }
.art-wide   { width: clamp(8rem, 26vw, 20rem); }
.art-beat   { width: clamp(7rem, 15vw, 12rem); }
.art-ghost  { opacity: 0.22; }

/* an illustration "draws" itself in the direction of travel */
.sweep {
  --sweep: 130%;
  -webkit-mask-image: linear-gradient(100deg, #000 0 var(--sweep), transparent calc(var(--sweep) + 18%));
          mask-image: linear-gradient(100deg, #000 0 var(--sweep), transparent calc(var(--sweep) + 18%));
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: mask-position 1.6s var(--ease-out), -webkit-mask-position 1.6s var(--ease-out);
}
.is-active .sweep { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* bee drifting across the empty third of a slide */
.drift {
  position: absolute;
  left: 0;
  bottom: 6%;
  width: clamp(2.4rem, 5vw, 4rem);
  animation: drift 26s linear infinite;
  pointer-events: none;
  opacity: 0.9;
}
.drift .asset { animation: bob 3.4s var(--ease-in-out) infinite alternate; }
@keyframes drift {
  from { transform: translateX(-14vw); }
  to   { transform: translateX(112vw); }
}
@keyframes bob {
  from { transform: translateY(-0.7vh) rotate(-5deg); }
  to   { transform: translateY(0.7vh) rotate(5deg); }
}

/* ------------------------------------------------------------------ enter */
.anim {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.is-active .anim {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.is-active .anim--now { transition-delay: 0ms; }

/* a soft honey hairline that draws itself under the title */
.rule-draw { transform-origin: left center; }
.is-active .rule-draw { animation: draw-rule 700ms var(--ease-out) 120ms both; }
@keyframes draw-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- overlay */
.overview {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  padding: clamp(1rem, 3vw, 3rem);
  background: color-mix(in oklab, var(--color-surface-inverse) 92%, transparent);
  overflow: auto;
}
.overview.is-open { display: block; }
.overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
}
.overview__grid a {
  display: block;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--comb-800);
  border-radius: var(--radius-sm);
  color: var(--comb-100);
  text-decoration: none;
  font-size: 0.85rem;
}
.overview__grid a span { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--comb-500); }
.overview__grid a:hover, .overview__grid a:focus-visible { border-color: var(--honey-500); color: var(--honey-300); }
.overview__hint {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--comb-400);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ print */
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { height: auto; overflow: visible; font-size: 13px; }
  .chrome, .overview, .drift { display: none !important; }
  .stage { position: static; }
  .slide {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    break-after: page;
    page-break-after: always;
    height: 100vh;
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
  }
  .slide--ink { background: var(--color-surface-inverse) !important; color: var(--color-text-inverse) !important; }
  .slide--ink h1, .slide--ink h2, .slide--ink .statement { color: var(--color-text-inverse) !important; }
  .slide--honey { background: var(--honey-400) !important; }
  .anim, .sweep { opacity: 1 !important; transform: none !important; mask-image: none !important; -webkit-mask-image: none !important; }
  .sweep { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Slide components — panels, bridge, steps, levels, statement, facts
   ========================================================================== */

/* --------------------------------------------------------------- hex panel */
.hexes { --cell: 20px; }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: clamp(0.55rem, 1.2vw, 0.9rem);
  display: grid;
  gap: 0.55rem;
}
.panel--empty { background: transparent; border-style: dashed; border-color: var(--color-line-strong); }
.panel__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.panel .mono { font-size: clamp(0.62rem, 0.26vw + 0.5vh, 0.75rem); line-height: 1.45; max-width: 34ch; }

/* -------------------------------------------------------------- glossary */
.gloss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  align-content: center;
}
.gloss > div {
  display: grid;
  grid-template-columns: 6.4em 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.26rem 0;
  border-bottom: 1px dotted var(--color-line);
}
.gloss span {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(0.74rem, 0.32vw + 0.6vh, 0.92rem);
  color: var(--honey-700);
  line-height: 1.2;
}
.gloss p {
  margin: 0;
  max-width: none;
  font-size: clamp(0.68rem, 0.28vw + 0.54vh, 0.85rem);
  line-height: 1.3;
  color: var(--color-text-muted);
}
@media (max-width: 44rem) { .gloss { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- ribbon */
.ribbon { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ribbon__step { display: inline-flex; align-items: center; gap: 0.35rem; }
.ribbon__step b {
  font-size: clamp(0.7rem, 0.3vw + 0.55vh, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ribbon__arrow { color: var(--color-text-subtle); font-size: 0.8rem; }
.art-ribbon { width: clamp(1.35rem, 2.1vw, 1.9rem); color: var(--color-text); }

/* ---------------------------------------------------------------- bridge */
.bridge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 1.8vw, 1.6rem);
}
.bridge__end { display: grid; justify-items: center; gap: 0.2rem; text-align: center; }
.bridge__end b { font-family: var(--font-serif); font-size: clamp(0.82rem, 0.4vw + 0.7vh, 1.05rem); }
.bridge__end .mono { font-size: var(--text-2xs); max-width: 22ch; line-height: 1.35; }
.bridge__end .asset { height: clamp(3.4rem, 9vh, 6rem); width: auto; }
.bridge__link { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.bridge__wire { flex: 1; height: 2px; min-width: 0.8rem; background: var(--honey-500); }
@media (max-width: 34rem), (max-aspect-ratio: 3/4) {
  .bridge { grid-template-columns: 1fr; justify-items: center; gap: 0.5rem; }
  .bridge__link { flex-direction: column; }
  .bridge__wire { width: 2px; height: 1rem; flex: none; }
}

/* ----------------------------------------------------------------- steps */
.steps { display: grid; gap: clamp(0.3rem, 0.9vh, 0.55rem); }
.step { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; }
.step__n {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--honey-500);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--honey-700);
}
.step p { margin: 0; max-width: none; font-size: clamp(0.78rem, 0.34vw + 0.62vh, 0.95rem); line-height: 1.4; }

/* ---------------------------------------------------------------- levels */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 2vw, 2rem); }
.level { display: grid; gap: 0.3rem; padding-top: 0.7rem; border-top: 2px solid var(--comb-300); align-content: start; }
.level__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--honey-700);
  margin-right: 0.45em;
  font-weight: 400;
}
.level h3 { margin: 0; font-size: clamp(0.86rem, 0.4vw + 0.68vh, 1.05rem); font-weight: 600; }
.level p { margin: 0; max-width: 34ch; font-size: clamp(0.72rem, 0.3vw + 0.58vh, 0.88rem); line-height: 1.4; }
.level p.mono { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.art-level { width: clamp(1.7rem, 3vw, 2.5rem); color: var(--color-text); }
@media (max-width: 34rem), (max-aspect-ratio: 3/4) { .levels { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- statement */
.stmt { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: 0.4rem; }
.stmt__node {
  display: grid; gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.34vw + 0.62vh, 0.95rem);
  line-height: 1.15;
}
.stmt__node em {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}
.stmt__link {
  display: grid; place-items: center;
  justify-self: center;
  align-self: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--honey-500);
  border-radius: var(--radius-pill);
  background: var(--honey-50);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--honey-800);
  white-space: nowrap;
}
@media (max-width: 34rem), (max-aspect-ratio: 3/4) {
  .stmt { grid-template-columns: 1fr; }
  .stmt__link { justify-self: center; }
}

/* ------------------------------------------------------------- re-run layer */
.layer { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.25rem 0.6rem; align-items: center; }
.layer .mono:last-child { grid-column: 2; font-size: var(--text-2xs); color: var(--color-text-subtle); }

/* --------------------------------------------------------------- pour art */
.pour { display: grid; justify-items: center; align-items: end; gap: 0; }
.pour .asset { height: clamp(3.4rem, 10vh, 6.6rem); width: auto; }
.pour .asset:first-child { margin-bottom: -0.2rem; }
.pour__line { width: 2px; height: clamp(1.4rem, 3vh, 2.4rem); background: linear-gradient(var(--honey-500), transparent); }

/* ----------------------------------------------------------------- facts */
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 1.5vw, 1.3rem); }
.fact { display: grid; gap: 0.18rem; padding-top: 0.45rem; border-top: 2px solid var(--comb-300); align-content: start; }
.fact b { font-size: clamp(0.78rem, 0.34vw + 0.62vh, 0.95rem); line-height: 1.2; }
.fact p {
  margin: 0; max-width: none;
  font-size: clamp(0.68rem, 0.28vw + 0.54vh, 0.84rem);
  line-height: 1.38;
  color: var(--color-text-muted);
}
@media (max-width: 34rem), (max-aspect-ratio: 3/4) { .grid6 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- gate / art */
.gate-art { display: grid; justify-items: center; gap: 0.45rem; }
.gate-art__note {
  margin-top: 1.1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-line);
  max-width: 26ch;
  text-align: center;
  line-height: 1.45;
}
.gate-art__dots { display: flex; gap: 0.35rem; }
.gate-art__dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--honey-500); }
.gate-art__dots i:nth-child(2) { background: var(--comb-400); }
.gate-art__dots i:nth-child(3) { background: var(--comb-300); }

/* ---------------------------------------------------------------- score */
.score { display: grid; gap: 0.1rem; }
.score > div {
  display: grid;
  grid-template-columns: 8.4rem 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.28rem 0;
  border-bottom: 1px dotted var(--color-line);
}
.score .mono { font-size: clamp(0.68rem, 0.28vw + 0.55vh, 0.8rem); color: var(--color-text); }
.score p { margin: 0; max-width: none; font-size: clamp(0.72rem, 0.3vw + 0.58vh, 0.88rem); line-height: 1.3; }
.score .chip { justify-self: end; }
@media (max-width: 34rem), (max-aspect-ratio: 3/4) {
  .score > div { grid-template-columns: 1fr auto; }
  .score .mono { grid-column: 1 / -1; }
}

.ramp { display: grid; gap: 0.5rem; justify-items: start; --hexhole: var(--color-bg); }
.ramp .hexes { width: clamp(6.5rem, 12vw, 9rem); }

.missing-asset { font-family: var(--font-mono); color: var(--color-danger); }

/* a small folk bee standing next to a caption */
.art-beat-s { width: clamp(3.2rem, 8vw, 5.2rem); }
.side .mono { text-align: center; }