/* ==========================================================================
   DAGLINGS — the home page (index.html)
   Linked by index.html ONLY, straight after css/site.css and before anything else.
   Every rule here was cut out of site.css, which every page loads, because no
   other page can ever match it.

   IT IS STILL site.css, IN site.css's ORDER. These rules keep the relative
   order they had there, and each section's share of the late MOBILE PASS came
   with it, still last. What changed is that everything here now comes after
   EVERYTHING left in site.css — which is only the same cascade because no rule
   left there ties with a rule here, on specificity, for the same element and
   property. That was checked rule by rule when the file was cut; see
   docs/private/ops/REPORT_SITE_CSS_SPLIT.md. So, when editing:
     - a rule that another page can match belongs in site.css, not here;
     - a rule in site.css may be overridden from here at EQUAL specificity only
       on purpose: this file wins every tie now, where the old order might not;
     - an override of a rule here goes below it, here.
   ========================================================================== */

/* ==========================================================================
   1. Hero — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* The hero has no block layer of its own any more — the page-wide field in
   .pagevoid runs behind it and every other section, as one continuous field. */

.hero__inner {
  flex: 1;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: clamp(32px, 6vh, 80px) 0 clamp(48px, 8vh, 96px);
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
}

.lede {
  max-width: 47ch;
  margin: 30px 0 0;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
}

/* The one hard product fact in the hero. Set apart from the lede and keyed
   teal, because it is the sentence that has to survive someone reading only
   the top of the page. */
.hero__mint {
  max-width: 47ch;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  font-size: clamp(14px, 1.25vw, 16px);
  color: rgba(238, 243, 251, 0.82);
}

/* The CTA row. No flex: the buttons are inline-flex, so they sit side by side on
   their own and wrap when there is no room. The row was flex once, to hold two
   buttons, and lost it when the hero was down to one — worth knowing because the
   hero has two again (the catalogue and the free duel) and needed nothing back. */
.cta { margin-top: 40px; }

/* The orientation line, under the hero's buttons. One sentence per system.
   Quieter than .hero__mint and with no teal rule down its side: that one is the
   hard product fact and should stay the louder of the two. */
.hero__onboard {
  max-width: 47ch;
  margin: 18px 0 0;
  font-size: clamp(13.5px, 1.15vw, 15px);
  color: var(--muted);
}

/* Barely-there teal glow behind the hero card, so it sits in light rather
   than on flat black. Static paint on a pseudo-element; nothing animates. */
.hero__card {
  position: relative;
  justify-self: center;
  width: min(380px, 100%);
}
.hero__card::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    50% 42% at 50% 44%,
    rgba(73, 224, 192, 0.1),
    rgba(63, 217, 255, 0.045) 46%,
    transparent 72%
  );
}
@media (max-width: 900px) {
  .hero__card { margin-top: 8px; }
}
/* --- hero flip control ---------------------------------------------------
   Under the card and hard against its right edge. The card sits inside
   .hero__card, so aligning to that box aligns to the card. */
.hero__cardbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.hero__flip {
  --c: 7px;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.hero__flip:hover { background: rgba(255, 255, 255, 0.11); color: var(--ink); }
.hero__flip[aria-pressed="true"] { color: var(--teal); }

/* ==========================================================================
   Sections — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* The Tangling sits on the same micro-texture language as the card frame:
   a fine diagonal weave, a couple of percent lighter than its ground, plus a
   barely-there teal glow behind the headline. Both are static paint — no
   animation, nothing to recompute on scroll. */
#tangling::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(
      44% 34% at 22% 24%,
      rgba(73, 224, 192, 0.055),
      transparent 72%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.017) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 9px
    );
}

/* --- the width line ------------------------------------------------------
   The 1-16 block-width scale as environmental graphic, echoing the footer's.
   Pure CSS: a rule plus 16 ticks from a repeating gradient. */
.widthline {
  position: relative;
  height: 30px;
  margin: clamp(34px, 4.5vw, 56px) 0 0;
}
.widthline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(73, 224, 192, 0.26) 6%,
    rgba(73, 224, 192, 0.26) 94%,
    transparent
  );
}
.widthline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 5px);
  height: 11px;
  /* 100/16 = 6.25% per tick. */
  background: repeating-linear-gradient(
    90deg,
    rgba(73, 224, 192, 0.3) 0 1px,
    transparent 1px 6.25%
  );
}
.widthline__n {
  position: absolute;
  top: calc(50% + 10px);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(73, 224, 192, 0.32);
}
.widthline__n--lo { left: 0; }
.widthline__n--hi { right: 0; }

/* The marker. --w is the live width, 1-16, written by js/home.js; the ticks
   are one per 6.25%, so the centre of width n sits at (n - 0.5) x 6.25%.
   The transition on `left` is the whole point — it slides between widths
   instead of teleporting, which is what ties it to the chain above. */
.widthline__mark {
  position: absolute;
  top: calc(50% - 9px);
  left: calc((var(--w, 1) - 0.5) * 6.25%);
  width: 2px;
  height: 19px;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(73, 224, 192, 0.55);
  transform: translateX(-1px);
  transition: left 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.widthline__mark b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--teal);
}
@media (prefers-reduced-motion: reduce) {
  .widthline__mark { transition: none; }
}

/* ==========================================================================
   THE FIELD JOURNAL — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* On the home page it is a section of its own, so it takes the column's full
   width like every other section there. Battle keeps the reading measure. */
#journal-band .journal { max-width: none; }
#journal-band[hidden] { display: none; }

/* ==========================================================================
   Daglabs — the catalogue — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* The red hint: the blocks the chain nearly threw away. This is the ONLY red
   on the page — the chain's warning colour, and it drifts rather than
   flickers so it reads as part of the same void, just the wrong colour. */
.glitch { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glitch i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: rgba(255, 90, 90, 0.09);
  border: 1px solid rgba(255, 90, 90, 0.42);
  opacity: 0;
  will-change: transform, opacity;
  animation: reddrift var(--dur) linear var(--delay) infinite;
}
@keyframes reddrift {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0); }
  22%  { opacity: 0.5; }
  78%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(var(--dx), -70px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch i { animation: none; opacity: 0.45; }
}

/* ==========================================================================
   THE STORY — the scrolling lore below the hero. — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* Card one side, story the other. The CARD IS FIRST IN THE DOM on purpose:
   mobile stacks card-above-copy, and source order is what gives that for
   free. Desktop alternation is done by placing the grid items instead of by
   reordering, so the reading order never depends on the viewport. */
.story__split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.story__card { grid-column: 1; grid-row: 1; margin: 0; justify-self: center; width: min(360px, 100%); }
.story__copy { grid-column: 2; grid-row: 1; max-width: 58ch; }
.story--flip .story__card { grid-column: 2; }
.story--flip .story__copy { grid-column: 1; }

.story__copy h2 { margin: 0 0 22px; }
.story__copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 17.5px);
  line-height: 1.65;
}
.story__copy p:last-child { margin-bottom: 0; }

.story__close {
  color: var(--ink);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: clamp(17px, 1.7vw, 21px) !important;
  line-height: 1.4 !important;
}

/* --- the tints ---------------------------------------------------------- */

/* Red: the void running the wrong colour. Sits under the content, over the
   field, and is pure paint -- nothing here animates. */
.story--red::before,
.story--gold::before,
.story--rumor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.story--red::before {
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 64, 64, 0.11), transparent 62%),
    linear-gradient(180deg, rgba(60, 6, 10, 0.34), rgba(28, 4, 8, 0.5));
}
.story--gold::before {
  background:
    radial-gradient(110% 85% at 50% 38%, rgba(242, 201, 76, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(48, 36, 6, 0.3), rgba(24, 18, 4, 0.46));
}
/* Violet at the EDGES only, so the middle stays genuinely dark and the
   section reads as mostly nothing -- which is the point of it. */
.story--rumor::before {
  background:
    radial-gradient(70% 60% at 50% 50%, transparent 38%, rgba(140, 72, 220, 0.14) 100%),
    linear-gradient(180deg, rgba(10, 4, 20, 0.62), rgba(6, 3, 14, 0.78));
}
.story--red .glitch { z-index: 0; }

/* --- burned ---------------------------------------------------------------
   The one section on this page whose figure is a NUMBER rather than a card,
   so `.story__card` is carrying a counter instead of a 5:7 box. It keeps the
   class because it keeps the slot: same grid cell, same alternation, same
   stacking order on a phone.

   Deliberately NOT tinted. Every other tinted section here is tinted for the
   colour of a card — red blocks, gold, the violet rumor — and this one is
   about a transaction, not a finish. A teal wash would also put the burn in
   the same visual family as the chain itself, which is the wrong reading:
   this is the one thing the chain lets go of. */
.burn-figure {
  display: grid;
  justify-items: start;
  width: 100%;
}
.burn-figure .burn { padding-left: clamp(0px, 2vw, 24px); }

@media (max-width: 900px) {
  /* Under the copy rather than beside it, and the counter is the beat the
     section lands on, so it keeps the left edge the paragraphs have. */
  .story--burn .story__split { grid-template-columns: minmax(0, 1fr); }
  .story--burn .story__card,
  .story--burn .story__copy { grid-column: 1; justify-self: stretch; width: 100%; }
  .story--burn .story__card { grid-row: 2; margin-top: 8px; }
  .story--burn .story__copy { grid-row: 1; }
  .burn-figure .burn { padding-left: 0; }
}

/* --- the rumor ----------------------------------------------------------- */

.story--rumor { padding: clamp(150px, 26vh, 300px) 0; }
/* --- the names -----------------------------------------------------------
   A short block directly under the hero, answering the two words the hero
   just used. Set quieter and narrower than a section head on purpose: it is
   a footnote to the hero, not the page's second argument. */
.names-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.names__line {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}

/* ==========================================================================
   The chain record — a card and its on-chain record, wired together — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

.mined-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* The head's own bottom margin is the gap between a section head and its
   content; inside this grid the gap does that job. */
.mined-grid .section__head { margin-bottom: 0; }
/* Slightly off-square, so it reads as a specimen laid on a bench rather than
   a product shot. The pointer tilt still runs inside it — separate element,
   separate transform. */
.record__card { transform: rotate(-4deg); }

/* The wires sit over everything and catch nothing. overflow:visible so a line
   that leaves the box on its way round is not clipped. */
.record__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.record__wire {
  fill: none;
  stroke: rgba(73, 224, 192, 0.26);
  stroke-width: 1;
}
.record__dot { fill: var(--teal); }

/* One pulse, once, after the rows have finished typing. The dash is a short
   segment chased along the whole path by its offset; --len is the path's own
   length, measured in js/home.js. */
.record__pulse {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 16 9999;
  opacity: 0;
}
.record.is-live .record__pulse {
  animation: record-pulse 1100ms ease-out 980ms both;
}
@keyframes record-pulse {
  0% { opacity: 0; stroke-dashoffset: 16px; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: calc(var(--len, 400px) * -1); }
}

/* --- the panel ----------------------------------------------------------- */

.record__side { min-width: 0; }
.record__panel .framed__in { --pad-y: clamp(14px, 1.7vw, 20px); --pad-x: clamp(15px, 1.9vw, 22px); }
.record__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.record__rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px clamp(14px, 1.6vw, 22px);
  margin: 0;
  /* Monospace is not decoration here: the type-in below is a width animation
     in `ch`, which is only exact in a fixed-pitch font. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(10.5px, 1vw, 12.5px);
  line-height: 1.5;
}
.record__rows dt {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.record__rows dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
}
/* Not wired to a chain yet — dimmed and italic so it cannot be mistaken for
   a live reading. See the TODO in js/home.js. */
.record__rows dd.is-todo { color: var(--faint); font-style: italic; }

.record__val {
  display: inline-block;
  width: var(--ch);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Typed in on arrival, once. The width is already --ch without the
   animation, so switching it off leaves the rows simply present. */
.record.is-live .record__val {
  animation: record-type 360ms steps(20, end) both;
  animation-delay: calc(140ms + var(--i, 0) * 95ms);
}
@keyframes record-type {
  from { width: 0; }
  to { width: var(--ch); }
}

.record__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
}
@media (max-width: 1040px) {
  .mined-grid { grid-template-columns: 1fr; }
  .mined-grid .section__head { margin-bottom: 0; }
}
/* --- the record, compact -------------------------------------------------
   Card at 33% of the row — about 118px at 390. The panel takes the rest, and
   the wires are measured, so they land wherever those two end up. */
@media (max-width: 600px) {
  /* The -4deg jaunt is charm the row can no longer afford: it costs width the
     card needs and skews the box every wire is measured from. Flat here. */
  .record__card { transform: none; }
  /* Room back for the value column. At 12px monospace the longest row is
     SPECIES + a 14-character value, which needs ~195px of the ~228px the
     panel gets at 390 — the padding is where the slack comes from. */
  .record__panel .framed__in { --pad-y: 12px; --pad-x: 11px; }
  .record__rows { gap: 6px 9px; }
  .record__title { gap: 7px; }
  .record__note { margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .record.is-live .record__val { animation: none; }
  .record__pulse { display: none; }
}

/* --- the name fan --------------------------------------------------------
   Three real cards, overlapped and splayed. The species and finishes are
   fixed in index.html; this only places them.

   THREE TRANSFORM LAYERS, and they have to stay separate or the last one
   declared wins: the SLOT carries the fan (rotate + offset), the FLOAT
   carries the idle drift, and .tilt inside carries the pointer tilt. Putting
   any two on one element means the tilt cancels the fan, or the float does.
   The rotation is a custom property so the stacked layout can flatten it
   without !important. */
.namefan {
  --fan-w: clamp(116px, 13vw, 184px);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Rotated boxes still occupy their unrotated footprint, so the corners
     need somewhere to go. */
  padding: clamp(16px, 2.6vw, 34px) 0;
}
.namefan__slot {
  flex: 0 0 auto;
  width: var(--fan-w);
  transform: rotate(var(--fan-rot, 0deg)) translateY(var(--fan-y, 0px));
}
.namefan__slot + .namefan__slot { margin-left: calc(var(--fan-w) * -0.4); }

/* Source order is blue, holo, red — so the holo sits in the middle and on
   top, and the colour split reads outward from it. */
.namefan__slot:nth-child(1) { --fan-rot: -8deg; --fan-y: 12px; z-index: 1; }
.namefan__slot:nth-child(2) { --fan-rot: 0deg;  --fan-y: -10px; z-index: 3; }
.namefan__slot:nth-child(3) { --fan-rot: 8deg;  --fan-y: 12px; z-index: 2; }

/* A few pixels over six seconds. The negative delays start the three at
   different points in the same cycle, so the fan breathes instead of the
   whole thing moving as one slab. */
.namefan__float { animation: namefan-float 6s ease-in-out infinite; }
.namefan__slot:nth-child(1) .namefan__float { animation-delay: -0.4s; }
.namefan__slot:nth-child(2) .namefan__float { animation-delay: -2.6s; }
.namefan__slot:nth-child(3) .namefan__float { animation-delay: -4.4s; }
@keyframes namefan-float {
  50% { transform: translateY(-7px); }
}

/* Stacked: the fan becomes a row under the text, smaller and flat. The
   overlap drops to a hair so it reads as three cards side by side rather
   than a splayed hand. */
@media (max-width: 900px) {
  .names-grid { grid-template-columns: 1fr; }
  .namefan {
    /* AS LARGE AS THREE WILL FIT, which is what decides this number: the
       cards in the section about what the cards are called have to be big
       enough for their names to be read.
       The row is 2.76 card-widths wide (three cards less two 12% overlaps),
       so 32vw lands at 115px on a 360 and 138px on a 430 and still clears the
       wrap's gutters. Three cards cannot reach 150px here — that needs 414px
       of row inside a 358px one — so the choice is three readable cards or two
       larger ones, and the fan is a fan. */
    --fan-w: clamp(96px, 32vw, 150px);
    justify-content: flex-start;
    padding-bottom: 0;
  }
  /* THE FAN STAYS FANNED HERE, AND THERE IS DELIBERATELY NO RULE FLATTENING
     IT. The rotations and the vertical offsets above — -8/0/+8deg and
     +12/-10/+12px, outer cards riding low the way a held fan does — apply at
     every width. Only the SIZE and the OVERLAP change on a phone.

     This block used to carry `.namefan__slot { --fan-rot: 0deg; --fan-y: 0px }`
     and that rule never once took effect: a media query adds no specificity,
     so at (0,1,0) it lost to the `.namefan__slot:nth-child(1..3)` at (0,2,0)
     that set the fan. Every phone had always seen the fanned version. When
     that was finally noticed and the rule was made to win, the flattened row
     it produced turned out to be the wrong look — so the rule was deleted
     rather than repaired, and what shipped by accident for months is now what
     ships on purpose.

     **Do not "fix" this by adding a flattening rule.** If you do, it needs
     `:nth-child(n)` or heavier to have any effect at all — which is the tell
     that you are fighting an intentional design rather than a bug. */
  .namefan__slot + .namefan__slot { margin-left: calc(var(--fan-w) * -0.12); }
}

/* The float goes, and js/tilt.js already declines to attach the pointer tilt
   under the same query — so both halves of the movement stop together. */
@media (prefers-reduced-motion: reduce) {
  .namefan__float { animation: none; }
}

.rumor { max-width: 60ch; margin-inline: auto; text-align: center; }
.rumor .kicker { color: #b08cf0; }
.rumor__line {
  margin: 0;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: clamp(21px, 2.8vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: rgba(238, 243, 251, 0.9);
}
.rumor__sig {
  margin: clamp(34px, 5vw, 60px) 0 0;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(176, 140, 240, 0.62);
}
.enter__lede { margin: 0 0 30px; color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); }
.enter .cta { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 880px) {
  .story__split { grid-template-columns: 1fr; }
  .story__card,
  .story__copy,
  .story--flip .story__card,
  .story--flip .story__copy { grid-column: 1; }
  .story__card { grid-row: 1; margin-bottom: clamp(24px, 5vw, 40px); }
  .story__copy { grid-row: 2; }
}
.band.is-lit .band__chip {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 18px color-mix(in srgb, var(--band-accent) 45%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.45);
}

.band__chip {
  position: relative;
  width: clamp(64px, 7vw, 92px);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #05070c;
  border: 1px solid var(--band-accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.45);
}
.band__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The real card, parked at the chip's exact box so the showcase's fly-in
   measures the chip and the card appears to grow out of it. Invisible while
   parked -- the showcase MOVES it into the overlay, out of this opacity, so
   it is only ever unseen here. pointer-events off: the button is the target
   and the click is forwarded in code. (opacity < 1 flattens preserve-3d, but
   only while parked, where nothing is drawn.) */
.band__host {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.band__name {
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.25vw, 16px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-accent);
}
.band__w {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Mobile: chart above, chips stacked below in band order. The grid template
   is overridden here rather than in JS so the source order still carries it. */
@media (max-width: 720px) {
  .band__chip { grid-row: span 2; }
  .band__name { align-self: end; }
  .band__w { align-self: start; }
}

/* ==========================================================================
   MOBILE PASS — this page's share of it. The section opens in css/site.css.
   ========================================================================== */

/* --- tap targets ---------------------------------------------------------
   `min-height` plus inline-flex rather than padding: padding on a chamfered
   (.cut) element pushes the clip-path, and several of these are chamfered. */
@media (max-width: 768px), (pointer: coarse) {
  .hero__flip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* --- type floor ---------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prose: 14px floor. */
  .lede,
  .names__line,
  .story__copy p,
  .enter__lede,
  .hero__mint,
  .hero__onboard,
  .record__note { font-size: max(14px, 1em); }
  /* Labels: 12px floor, and they keep their tracking. */
  .eyebrow { font-size: max(12px, 1em); }
  /* Same treatment for the flip control: a tracked uppercase label, lifted to
     the floor rather than to `1em`, which would inherit the body's 16px and
     make a small secondary control shout. */
  .hero__flip { font-size: 12px; }

  /* The ledger panel is monospace and its width animation is in `ch`, so the
     size change carries through to the type-in without any other change. */
  .record__rows { font-size: 12px; }
}