/* The Last $20 — shared page skin. Loads AFTER hero.css (tokens, nav, buttons come from there).
   Vibe (Colton, 19 Sept): dystopian old-school arcade. Sodium lamp on a dead street, a CRT that has
   been on too long, hand-painted bar signage. Nothing here animates for its own sake. */

/* ── the room ────────────────────────────────────────────── */
body.page {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(242,169,59,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    var(--night);
  min-height: 100vh;
}
/* CRT: scanlines + a corner vignette. Static, so it never distracts. */
body.page::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
  mix-blend-mode: multiply;
}
body.page .top {
  position: sticky; background: rgba(12,21,18,.92);
  border-bottom: 1px solid rgba(233,222,195,.14);
  backdrop-filter: blur(6px);
}
.wrap { width: min(1180px, 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; }
/* the page's closing space now lives on .foot, so index.html (whose <main>
   carries no .page-main) closes identically to the four inner pages. */
main.page-main { padding: 0; }

/* ── the marquee (page title) ────────────────────────────── */
/* Round 6: padding-bottom was clamp(24,4vw,40). Stacked on section.block's
   own 64px top padding that put 110px of dead air between the dashed rule and
   the first heading on every inner page, against 30px inside a block — the
   rule ended up belonging to nothing. Now the rule closes the header and the
   first section starts exactly one block-rhythm later. */
.marquee { padding: clamp(40px, 7vw, 88px) 0 var(--s-1); }
.marquee .kicker {
  /* line-height was 1. On show.html this kicker wraps to two lines and they
     collided at 15px apart. A label that can wrap needs real leading. */
  margin: 0;
  font: 800 15px/1.4 var(--type); letter-spacing: .18em; text-transform: uppercase; color: #96c46c;
  max-width: 54ch;
}
.marquee h1 {
  margin: var(--s-2) 0 0; font: 900 clamp(38px, 8vw, 86px)/0.98 var(--display); color: var(--amber);
  letter-spacing: -0.03em; text-wrap: balance;
  text-shadow: var(--lift-display), 0 0 28px rgba(242,169,59,.38);
}
.marquee p { margin: var(--s-3) 0 0; max-width: 52ch; font-size: 19.5px; line-height: 1.64; color: #e6ddc6; }
.marquee .rule { margin: var(--s-4) 0 0; border: 0; border-top: 2px dashed rgba(233,222,195,.28); }

/* ── sections ────────────────────────────────────────────── */
section.block { padding: clamp(34px, 5vw, 62px) 0 0; scroll-margin-top: 92px; }
/* Round 6 — margin: 0 is the important part. Measured: this h2 was carrying the
   browser's own 29.88px top AND bottom margin, never reset. So the 64px section
   padding was really 94px, and the 14px the stylesheet asked for between a
   heading and its lede was really 30px of collapsed UA margin. The page's
   vertical rhythm was being written by the UA stylesheet. Every gap below is
   now a number somebody chose. */
.block h2 { margin: 0; font: 900 clamp(26px, 3.4vw, 36px)/1.18 var(--display); color: var(--cream);
  letter-spacing: -0.02em; text-wrap: balance;
  text-shadow: var(--lift-display); }
.block h2 .num { color: var(--bill); margin-right: 12px; }
/* 60ch of Archivo measured 76 characters per line at 1440 — ch is keyed to the
   zero, which is narrower than this face's average lowercase. 54ch measures ~68. */
/* --s-4 (30px), which is what was actually rendering before the reset above —
   the look is preserved, the number is now deliberate. */
.block .lede { margin-top: var(--s-4); max-width: 54ch; font-size: 19.5px; line-height: 1.64;
  color: #e6ddc6; text-wrap: pretty; }
/* .small was uncapped, so the "you can check all of it yourself" line ran the
   full 1180px container — 100 characters on one line, measured. */
/* 66ch still measured 78 characters per line — see the .lede note above on why
   ch under-reports for this face. 58ch lands at ~69. */
.small { font-size: 16px; line-height: 1.62; color: var(--smoke); max-width: 58ch; text-wrap: pretty; }

/* ── the wall: cameo cards pinned up like evidence ───────── */
.wall {
  margin-top: var(--s-4); display: grid; gap: clamp(var(--s-3), 3vw, var(--s-4));
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));   /* 290px alone overflows a 320px phone by 2px */
}
/* Round 6. Measured on archive.html: the cameo art ships at 0.67, 1.00 and
   1.49 aspect, so a grid row stretched to the tallest card left up to 199px
   of dead space under the shortest byline. Two fixes, neither of which crops
   a single pixel of the dev's art:
     1. every image sits in the SAME square mat, contained not cropped, so the
        picture boxes line up across the row;
     2. the card is a column and the credit is pushed to its floor, so the
        bylines line up too and there is no void under them. */
.pin { position: relative; background: #12100a; border: 1px solid rgba(233,222,195,.16);
  display: flex; flex-direction: column; }
.pin:nth-child(odd)  { transform: rotate(-.5deg); }
.pin:nth-child(3n)   { transform: rotate(.6deg); }
.pin img { width: 100%; height: auto; display: block; border-bottom: 1px solid rgba(233,222,195,.14);
  aspect-ratio: 1 / 1; object-fit: contain; background: #100f13; }
.pin .meta { padding: var(--s-2) 16px 18px; flex: 1; display: flex; flex-direction: column; }
.pin .no {
  position: absolute; top: -14px; left: -10px; z-index: 2;
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--amber); color: #17140c; font: 900 19px/1 var(--display);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.pin blockquote { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--cream); }
/* margin-top:auto drops the credit to the floor of the card (and takes .src
   with it), so every byline in a row sits on the same line. */
.pin .by { margin-top: auto; padding-top: var(--s-2); font-size: 16px; color: #96c46c; font-weight: 700; }
.pin .by a { text-decoration: none; }
.pin .by a:hover { text-decoration: underline; }
.pin .src { margin-top: 4px; font-size: 15px; color: var(--smoke); }
.pin.empty { display: grid; place-items: center; min-height: 260px; padding: 28px;
  border-style: dashed; text-align: center; color: var(--smoke); }

/* ── arcade instruction panel (how to buy / how to submit) ─ */
.cab {
  margin-top: var(--s-4); background: linear-gradient(180deg, #151d18, #101713);
  border: 2px solid rgba(233,222,195,.18); border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.45);
}
.cab .cab-head {
  margin: 0; padding: 14px 22px; background: repeating-linear-gradient(135deg, #1d271f 0 10px, #19221c 10px 20px);
  border-bottom: 2px solid rgba(233,222,195,.18);
  font: 700 14.5px/1 var(--type); letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
ol.steps { margin: 0; padding: 22px 22px 26px; list-style: none; counter-reset: s; }
ol.steps li { position: relative; padding: 0 0 22px 62px; counter-increment: s; }
ol.steps li:last-child { padding-bottom: 4px; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -4px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 2px solid var(--bill-text); color: var(--bill-text); font: 700 17px/1 var(--type);
}
ol.steps b { display: block; font: 800 19.5px/1.32 var(--type); color: #f6eed6; }
ol.steps p { margin: 8px 0 0; font-size: 18px; line-height: 1.62; color: #e2d9c1; max-width: 52ch; }
ol.steps a { color: var(--amber); }

/* ── contract address block ──────────────────────────────── */
.ca-box {
  margin-top: var(--s-4); padding: 18px 20px; background: var(--paper); color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.ca-box .lbl { font: 700 14px/1 var(--type); letter-spacing: .14em; text-transform: uppercase; }
.ca-box code { flex: 1 1 320px; font: 700 15px/1.4 var(--mono); word-break: break-all; }
.ca-box button {
  font: 700 14px/1 var(--type); letter-spacing: .04em; min-height: 44px; padding: 10px 18px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 0;
}
.ca-box button:hover { background: #33301f; }

/* ── the drive-in (the show) ─────────────────────────────── */
.screen {
  margin-top: var(--s-4); position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, #22321f, #0c130f 70%);
  border: 2px solid rgba(233,222,195,.18); display: grid; place-items: center; text-align: center;
}
.screen .on { margin: 0; font: 900 clamp(24px, 4vw, 46px)/1.2 var(--display); color: var(--amber);
  letter-spacing: -0.02em;
  text-shadow: var(--lift-display), 0 0 30px rgba(242,169,59,.5); padding: 0 24px; }
.screen .sub { margin-top: 12px; font-size: 17.5px; line-height: 1.55; color: #e2d9c1;
  max-width: 48ch; margin-inline: auto; padding: 0 24px; text-wrap: pretty; }
.screen::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px);
}

/* ── footer ──────────────────────────────────────────────── */
/* Round 6. index.html's <main> has no .page-main class, so the footer had no
   bottom padding at all and the risk line sat 18px off the bottom edge of the
   document — the page just stopped. The padding moves onto .foot so all five
   pages close the same way (main.page-main's own bottom padding is now 0). */
.foot { margin-top: var(--s-7); padding: var(--s-5) 0 var(--s-7);
  border-top: 2px dashed rgba(233,222,195,.24); }
.foot .cols { display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.foot h3 { margin: 0; font: 800 15px/1 var(--type); letter-spacing: .16em; text-transform: uppercase; color: #96c46c; }
.foot ul { margin: 12px 0 0; padding: 0; list-style: none; }
.foot li { margin: 0; font-size: 17px; }
.foot li a { display: inline-block; padding: 10px 0; font-size: 17px;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot li a:hover { color: var(--amber); text-decoration-thickness: 2px; }
.foot a { color: #e3daC1; }

/* the terminal bar: the mark on the left, the standing warning on the right.
   A footer that ends on a hairline rule reads as finished; one that ends on a
   floating sentence reads as cut off. */
.foot-end {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid rgba(233,222,195,.13);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-3) var(--s-4);
}
.foot-mark { display: inline-flex; align-items: center; gap: 11px;
  font: 800 17px/1 var(--display); letter-spacing: -0.005em; color: #cfd8c6; }
.foot-mark .cell { width: 38px; height: 21px; font-size: 14px; }
.risk-line { margin-top: var(--s-4); font-size: 16px; color: var(--smoke); }
.foot-end .risk-line { margin: 0; }

/* Round 6: the pages carried seven different inline `style="margin-top:NNpx"`
   attributes (14, 20, 22, 24, 28). Two utilities off the scale replace them,
   so trailing links and button rows sit at the same distance everywhere. */
.stack-3 { margin-top: var(--s-3) !important; }
.stack-4 { margin-top: var(--s-4) !important; }

/* 16:9 across a 1180px container is a 664px-tall box holding two lines of text
   — measured, and on both index and show it read as an unfilled placeholder.
   Widening the ratio letterboxes it into cinemascope, which is more drive-in,
   not less, and drops 200px of void. NB: max-height was the obvious fix and is
   the wrong one — with aspect-ratio and an auto width the browser preserves the
   ratio by SHRINKING the box to 818px, so the screen stopped reaching the right
   margin. Changing the ratio itself keeps it full-bleed to the column. */
@media (min-width: 760px) { .screen { aspect-ratio: 2.56 / 1; } }

@media (max-width: 720px) {
  .marquee p, .block .lede { font-size: 18px; }
  ol.steps li { padding-left: 54px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── the home nav: transparent over the hero, solid once you leave it ─────── */
body.home .top { position: fixed; background: none; border-bottom: 0; backdrop-filter: none; }
body.home .top::before,
body.home .top::after { content: ""; position: absolute; inset: 0; z-index: -1; }
body.home .top::before { background: linear-gradient(180deg, rgba(12,21,18,.9), rgba(12,21,18,0)); }
body.home .top::after {
  opacity: 0; transition: opacity .28s ease;
  background: rgba(12,21,18,.95);
  border-bottom: 1px solid rgba(233,222,195,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.home.solid-nav .top::after { opacity: 1; }
#nav-sentinel { display: block; height: 1px; margin-top: -1px; }

.hint {
  position: absolute; right: clamp(16px, 6.5vw, 112px); bottom: 26px; z-index: 3;
  margin: 0; font-size: 14px; letter-spacing: .04em; color: var(--smoke);
}
/* the fallback coin spins too, so the hint stays */
@media (max-width: 979px), (pointer: coarse) { .hint { display: none; } }

/* ── plain words ─────────────────────────────────────────────────────────── */
.plain-grid {
  margin-top: var(--s-4); display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.plain-card {
  padding: 22px 22px 24px; background: rgba(21,29,24,.72);
  border: 1px solid rgba(233,222,195,.16); border-left: 3px solid var(--bill);
}
.plain-card h3 { margin: 0; font: 800 19.5px/1.3 var(--type); letter-spacing: -0.005em; color: #ffc165; }
.plain-card p { margin: 10px 0 0; font-size: 17.5px; line-height: 1.62; color: #e2d9c1; }

/* ── the street: a 2.5D scene, six depths (street.js) ────────────────────
   Replaced the three.js canvas 2026-09-19. Every layer is position:absolute and
   inset slightly NEGATIVE, because a layer that parallaxes has to be bigger than
   its frame or you see its edge come into shot. Only transform is animated. */
.street {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: var(--s-1);
  min-height: min(88vh, 820px);
  display: grid; align-items: end;
  /* Round 6 — the seam. Measured 2026-09-19 at 1440px: the page above the
     section read rgb(17,18,18), the 2px rule rgb(39,40,36), and the lit plate
     rgb(128,121,69) — a 105/255 luminance jump across EIGHT pixels. A hard
     horizontal line where an image starts is the single loudest "this is a
     draft" signal a long page can send. The rule goes; the plate now arrives
     out of the room's own darkness instead of being pasted onto it. */
  border-block: 0;
  background: var(--room);
  --sx: 50%;
}
/* the two scrims that weld the section to the page above and below it.
   Colour is the page's own near-black, so the ramp lands on the room, not
   on a guess. Height is capped on narrow screens so it can never reach the
   copy, which starts 120px down there. */
.street::before, .street::after {
  content: ""; position: absolute; left: 0; right: 0;
  pointer-events: none;
}
.street::before {
  top: 0; height: clamp(80px, 13vw, 150px); z-index: 7;
  background: linear-gradient(180deg,
    #101214 0%, rgba(16,18,20,.88) 20%, rgba(16,18,20,.5) 52%, rgba(16,18,20,0) 100%);
}
/* The bottom needed the opposite correction. Measured after the first pass:
   the section's last row read rgb(5,9,8) against a page of rgb(14,16,18) —
   the scene's own vignette (sd5, z 6) drives the floor DARKER than the room,
   so a scrim underneath it could not reach. This one sits at z 7, above every
   decorative layer, and is kept shorter than .street-copy's bottom padding
   (66px desktop / 34px phone) so it lives entirely in empty space and can
   never touch a word. */
.street::after {
  bottom: 0; height: clamp(30px, 4.4vw, 62px); z-index: 7;
  background: linear-gradient(0deg,
    rgba(15,18,20,.92) 0%, rgba(15,18,20,.6) 42%, rgba(15,18,20,0) 100%);
}
.slayer { position: absolute; inset: -9% -6%; pointer-events: none; z-index: 1; }
/* <picture> is a wrapper for format negotiation, not a box — display:contents takes it
   out of layout so the <img> inside positions against .slayer exactly as before. */
.slayer picture { display: contents; }
.slayer > *, .slayer picture > img { position: absolute; display: block; }

/* depth 0 — the plate */
.sd0 img {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); opacity: 0; transition: opacity .9s ease;
}
[data-street-state="ready"] .sd0 img { opacity: 1; }

/* depth 1 — the sodium lamp. The plate already has a lamp; this sits on top of it
   so the light can breathe and follow the cursor a little. */
.sd1 { z-index: 2; }
.lamp-cone {
  inset: 0;
  background: radial-gradient(42% 58% at var(--sx) 14%, rgba(255,178,74,.30), transparent 62%);
  mix-blend-mode: screen;
}
.lamp-bloom {
  left: var(--sx); top: 13%; width: 26vw; height: 26vw; max-width: 300px; max-height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,201,110,.5), rgba(255,170,60,.16) 38%, transparent 68%);
  mix-blend-mode: screen; filter: blur(2px);
}

/* depth 2 — fog, drifting at two speeds */
.sd2 { z-index: 3; }
.fog {
  left: -30%; right: -30%; width: 160%; height: 46%;
  background: radial-gradient(70% 100% at 30% 100%, rgba(150,180,168,.13), transparent 70%),
              radial-gradient(60% 100% at 78% 100%, rgba(120,150,140,.1), transparent 72%);
  filter: blur(9px);
}
.fog-a { bottom: 4%;  animation: drift-a 34s linear infinite; }
.fog-b { bottom: 16%; opacity: .6; animation: drift-b 52s linear infinite; }
@keyframes drift-a { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes drift-b { from { transform: translateX(5%); }  to { transform: translateX(-5%); } }

/* depth 3 — the car, and the one headlight it still has */
.sd3 { z-index: 4; }
/* The car parks on the RIGHT, outside the arcade, because the copy owns the left.
   First pass had it behind the text scrim and it read as a ghost. */
/* NB: .slayer is inset -9% -6%, so these percentages are of the OVERSIZED layer, not
   of the section. right:7% ≈ 2% inside the section edge; bottom:13% ≈ 4% above it. */
.car {
  right: 7%; bottom: 13%; width: min(52%, 700px); height: auto;
  filter: drop-shadow(0 30px 38px rgba(0,0,0,.9)) brightness(1.1) saturate(1.04)
          contrast(1.04);
  opacity: 0; transition: opacity .9s ease .15s;
}
[data-street-state="ready"] .car { opacity: 1; }
.sd3::after {                                /* the puddle the car is standing in */
  content: ""; position: absolute; right: 9%; bottom: 12%;
  width: min(48%, 640px); height: 42px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.72), transparent 78%);
  filter: blur(9px);
}
/* the beam the live headlight throws across the wet road */
/* the beam the one live headlight throws left, across the wet road */
.beam {
  right: 36%; bottom: 13%; width: 44%; height: 26%;
  background: radial-gradient(64% 100% at 94% 46%, rgba(255,186,96,.34), transparent 66%);
  mix-blend-mode: screen; filter: blur(8px);
  animation: flicker 6.5s ease-in-out infinite;
}
@keyframes flicker {
  0%, 44%, 100% { opacity: 1; }
  46% { opacity: .72; }
  48% { opacity: 1; }
  71% { opacity: .84; }
  73% { opacity: 1; }
}

/* depth 5 — weather and glass, in front of everything */
.sd5 { z-index: 6; }
.rain {
  inset: 0; opacity: .3;
  background: repeating-linear-gradient(101deg,
    rgba(210,225,215,.16) 0 1px, transparent 1px 7px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 78%);
          mask: linear-gradient(180deg, #000 0%, transparent 78%);
  animation: rainfall 1.1s linear infinite;
}
@keyframes rainfall { from { background-position: 0 0; } to { background-position: -34px 120px; } }
.grain {
  inset: 0; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.vig {
  inset: 0;
  background: radial-gradient(128% 100% at 50% 46%, transparent 48%, rgba(0,0,0,.72));
}

/* depth 4 — the copy. The scrim under it is the strongest on the site, because this
   is the busiest background any text on this site has to sit on. */
.street-copy {
  position: relative; z-index: 5;
  padding: 170px 0 clamp(34px, 5vw, 66px);
  /* Two scrims, not one. The vertical one grounds the section; the second one
     darkens ONLY the corner the text actually sits in, so the car on the right
     is not washed out by a full-width wash.
     Round 6: the second layer used to be a 90deg linear gradient. A linear
     gradient running left-to-right is CONSTANT top-to-bottom, so it began at
     full strength on the first row of .street-copy — measured a 91-unit drop
     in red across a single pixel at x=400, a hard line cutting straight
     through the lamp glow for two thirds of the width. Anchoring the same
     wash to the bottom-left corner as an ellipse keeps the text on exactly
     the same density and removes the edge, because an ellipse falls off in
     both axes and has no first row to start on. */
  background:
    linear-gradient(0deg, rgba(6,10,9,.9) 0%, rgba(6,10,9,.72) 26%,
      rgba(6,10,9,.34) 58%, rgba(6,10,9,0) 100%),
    radial-gradient(115% 138% at 0% 100%, rgba(6,10,9,.9) 0%, rgba(6,10,9,.82) 24%,
      rgba(6,10,9,.5) 48%, rgba(6,10,9,.16) 68%, rgba(6,10,9,0) 84%);
}
.street-copy .kicker {
  margin: 0; font: 800 15px/1 var(--type); letter-spacing: .18em;
  text-transform: uppercase; color: #ffc165;
}
.street-copy h2 {
  margin: 14px 0 0; font: 900 clamp(32px, 5.2vw, 58px)/1.04 var(--display); color: var(--cream);
  letter-spacing: -0.025em;
  text-shadow: var(--lift-display);
}
.street-copy p { max-width: 52ch; margin: 16px 0 0; font-size: 19px; line-height: 1.64; color: #efe7d2; }
.street-copy .small { margin-top: 12px; }
@media (pointer: coarse), (max-width: 979px) { .street-copy .small { display: none; } }

@media (max-width: 720px) {
  .street { min-height: min(72vh, 560px); }
  /* the car sits ABOVE the headline on a phone — there is no room beside it */
  .car { width: 100%; right: -6%; bottom: 44%; }
  .beam { right: 26%; bottom: 44%; }
  .sd3::after { right: -2%; bottom: 43%; width: 86%; height: 22px; }
  .street-copy { padding-top: 120px; }
  /* On a phone the copy is full-width and the car's tail crosses behind the
     headline, so the corner-anchored scrim leaves the right end of "one
     headlight." sitting on bare chrome. Measured at 360px: the worst glyph
     pixel of that headline was 1.99:1 against a 3:1 requirement — a real AA
     failure, not a styling opinion. There is nothing to protect on the right
     at this width, so the scrim becomes a single full-width vertical wash,
     still fading to nothing at the top so no new seam appears. */
  .street-copy {
    background: linear-gradient(0deg,
      rgba(6,10,9,.97) 0%, rgba(6,10,9,.95) 54%, rgba(6,10,9,.88) 74%,
      rgba(6,10,9,.52) 88%, rgba(6,10,9,0) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fog-a, .fog-b, .beam, .rain { animation: none; }
}

/* the teaser wall never needs more than one row */
@media (min-width: 900px) { .wall-teaser { grid-template-columns: repeat(3, 1fr); } }

/* The square mat exists so the picture boxes line up ACROSS a row. Below
   620px the wall is a single column, there is no row to line up with, and
   the mat is pure added scroll — measured +696px on index at 360. So the
   art goes back to its natural shape on phones. */
@media (max-width: 620px) {
  .pin img { aspect-ratio: auto; background: none; }
}

/* ── the on-site swap shell (flag-gated) ─────────────────────────────────── */
.swap-shell {
  margin-top: var(--s-4); max-width: 520px;
  background: linear-gradient(180deg, #151d18, #101713);
  border: 2px solid rgba(233,222,195,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.45);
}
.swap-head {
  margin: 0; padding: 13px 18px;
  background: repeating-linear-gradient(135deg, #1d271f 0 10px, #19221c 10px 20px);
  border-bottom: 2px solid rgba(233,222,195,.18);
  font: 700 14px/1.35 var(--type); letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber);
}
#jupiter-plugin { min-height: 0; }
[data-swap-state="ready"] #jupiter-plugin { min-height: 520px; }
[data-swap-state="ready"] [data-swap-note] { display: none; }
.swap-shell [data-swap-note] { padding: 16px 18px; margin: 0; }
[data-swap-state="failed"] .swap-shell [data-swap-note] { color: var(--amber); }