/* v2.css - the fan page's second design (the front page, index.html). Loaded after
 * site.css, and every rule is scoped to body.v2, so pages without it never
 * see it. artists.html is body.v2 too (1 October 2026), for the top only:
 * the welcome words on the page beside a picture.
 *   - a compact top: the welcome words straight on the page, Frank's HOME
 *     beside them at the room's own proportions, today's paper tilted on
 *     the table by it
 *   - A Garden and From the artists, two to a row, further down
 *   - pop-ups as boxes (body[data-pops="panel"], site.js openPop): about
 *     three quarters of the window in the house frame, full screen on a phone
 * Style: hyphens, never em dashes.
 */

/* ── the top ─────────────────────────────────────────────────────────── */
.v2 .v2-hero { padding: 32px 0 40px; }
.v2 .v2-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px; align-items: center;
}
.v2 .v2-welcome { color: var(--desk-ink); }
.v2 .v2-welcome .kicker { background: var(--plate-face); color: var(--plate-band); box-shadow: inset 0 0 0 2px var(--plate-band); }
.v2 .v2-welcome h1 {
  margin: 0; color: var(--desk-ink);
  font-size: 32px; line-height: 1.5;
  text-shadow: 0 4px 0 var(--hp-green-shade);
}
.v2 .v2-welcome h1 em { color: var(--plate-band-hi); }
.v2 .v2-welcome .lede { margin: 18px 0 0; max-width: 22em; font-size: 28px; line-height: 1.35; color: #DCE2CF; }
.v2 .v2-welcome .facts { color: #C3CAB2; }
.v2 .v2-welcome .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Frank's HOME: the whole room, corners and all, at its own shape. The
   window is as tall as the picture makes it, no taller. */
.v2 .v2-stage { position: relative; }
.v2 .v2-stage .home-window { display: block; }
.v2 .v2-stage .home-window .px-paper { padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); }
.v2 .v2-stage .win-bar { margin: 0 0 calc(3 * var(--u)); }
.v2 .v2-stage .screen img { width: 100%; height: auto; aspect-ratio: 788 / 784; }

/* today's paper, left on the table by the HOME */
.v2 .v2-paper {
  position: absolute; z-index: 3;
  left: -64px; bottom: -22px;
  width: 150px; padding: 8px 8px 10px; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--hp-bright);
  box-shadow: 0 0 0 2px var(--hp-rule), 6px 8px 0 rgba(8, 10, 7, .38);
  transform: rotate(-8deg);
  transition: transform 120ms steps(3);
}
.v2 .v2-paper img { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #1D2119; }
.v2 .v2-paper span { font-weight: 700; font-size: 15px; line-height: 1; color: var(--hp-ink); }
.v2 .v2-paper:hover { transform: rotate(-3deg) translateY(-6px); }
.v2 .v2-paper:focus-visible { outline: 4px solid var(--plate-band); outline-offset: 4px; }

@media (max-width: 980px) {
  .v2 .v2-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; }
  .v2 .v2-welcome h1 { font-size: 24px; }
  .v2 .v2-welcome .lede { font-size: 24px; }
}
@media (max-width: 760px) {
  .v2 .v2-hero { padding-top: 20px; }
  .v2 .v2-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .v2 .v2-welcome h1 { font-size: 16px; line-height: 1.7; }
  .v2 .v2-welcome .lede { font-size: 22px; }
  .v2 .v2-welcome .actions { gap: 12px; }
  .v2 .v2-hero { padding-bottom: 16px; }
  /* a phone has no table beside the window: the paper tucks under it,
     over the frame's edge only, clear of the room */
  .v2 .v2-paper { position: relative; left: auto; bottom: auto; width: 112px; margin: -22px 0 0 14px; padding: 6px 6px 8px; }
  .v2 .v2-paper span { font-size: 13px; }
}

/* ── the front page's three cards: on a tablet, two to a row with the third
   centred under them at the same width (9 October 2026) ───────────────── */
@media (min-width: 621px) and (max-width: 980px) {
  .v2 .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}
/* Play here's four (9 October 2026): one row of four on a computer; tablet
   and phone keep site.css's two to a row, so two rows of two */
@media (min-width: 981px) {
  .v2 .consoles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── the Garden and the artists, two to a row ────────────────────────── */
.v2 .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .v2 .cards.two { grid-template-columns: 1fr; } }

/* ── pop-ups as boxes (desktop and tablet) ───────────────────────────── */
/* A phone keeps site.css's full-screen pop-ups: nothing here below 621px. */
@media (min-width: 621px) {
  body[data-pops="panel"] .pop { background: rgba(12, 15, 11, .72); }
  body[data-pops="panel"] .pop[data-kind="panel"] .pop-box { max-width: 80vw; }
  body[data-pops="panel"] .pop[data-kind="panel"] .px,
  body[data-pops="panel"] .pop[data-kind="panel"] .px-in { max-height: 80dvh; }

  /* an app, the room, the paper or the Garden inside the house frame */
  body[data-pops="panel"] .pop.framed .pop-box { width: 76vw; height: 80dvh; }
  body[data-pops="panel"] .pop.framed .px,
  body[data-pops="panel"] .pop.framed .px-in { height: 100%; display: flex; flex-direction: column; }
  body[data-pops="panel"] .pop.framed .px-paper {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  }
  body[data-pops="panel"] .pop.framed .pop-head { align-items: center; margin: 0 0 calc(3 * var(--u)); }
  body[data-pops="panel"] .pop.framed .pop-head h2 { flex: none; margin: 0; font-size: 16px; }
  body[data-pops="panel"] .pop.framed .v2-hint { flex: 1; font-weight: 700; font-size: 16px; color: var(--hp-muted); line-height: 1.3; }
  body[data-pops="panel"] .pop.framed .v2-stage-box {
    position: relative; flex: 1; min-height: 0;
    background: #141811;
    box-shadow: inset 0 0 0 var(--u) var(--hp-border);
    clip-path: var(--chamfer-sm);
  }
  body[data-pops="panel"] .pop.framed .v2-stage-box .pop-frame { position: absolute; inset: var(--u); width: calc(100% - 2 * var(--u)); height: calc(100% - 2 * var(--u)); }

  /* hugging the app: site.js fitFramed sizes the stage to the app's shape
     and the frame closes round it */
  body[data-pops="panel"] .pop.framed.shaped .pop-box { width: auto; height: auto; max-width: none; }
  body[data-pops="panel"] .pop.framed.shaped .px,
  body[data-pops="panel"] .pop.framed.shaped .px-in { height: auto; }
  body[data-pops="panel"] .pop.framed.shaped .px-paper { flex: none; }
  body[data-pops="panel"] .pop.framed.shaped .v2-stage-box { flex: none; }
  body[data-pops="panel"] .pop.framed.narrow .v2-hint { display: none; }
  body[data-pops="panel"] .pop.framed .pop-head h2 { white-space: normal; }
  body[data-pops="panel"] .pop.framed .v2-stage-box .desk-scene { position: absolute; inset: var(--u); width: auto; height: auto; }
}
@media (min-width: 621px) and (max-width: 980px) {
  body[data-pops="panel"] .pop.framed .pop-box { width: 82vw; height: 78dvh; }
  body[data-pops="panel"] .pop.framed .v2-hint { display: none; }
}

/* ── the computer: the room's desk close-up (site.js buildDesk) ──────── */
.v2 .desk-scene { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.v2 .desk-wall {
  position: absolute; inset: 0;
  background-size: auto 150%;          /* the room's --wall-zoom, 1.5 (shell.css .section-wall) */
  background-position: center; background-repeat: no-repeat;
  image-rendering: auto;
}
.v2 .desk-piece { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none; }
.v2 .desk-os { position: absolute; overflow: hidden; }
.v2 .desk-os-frame { position: absolute; top: 0; left: 0; transform-origin: top left; }
.v2 .desk-os-iframe { width: 100%; height: 100%; border: 0; display: block; }
/* On a phone, the room's phone close-up (the room's sections.js
   applyMobileFraming and shell.css html.phone-room): the scene fills the
   screen top to bottom, centred, its sides cropped, on black, with the close
   button over it as the room's corners are; desktopOS takes its phone layout
   (site.js buildDesk, the 450px gate). */
.v2 .desk-wrap { position: absolute; inset: 0; overflow: hidden; display: flex; justify-content: center; background: #000; }
.v2 .desk-wrap .desk-scene { flex: none; width: auto; height: 100%; aspect-ratio: 10 / 9; }
.v2 .pop[data-kind="app"]:has(.desk-wrap) .pop-box { padding-top: 0; }
.v2 .pop[data-kind="app"]:has(.desk-wrap) .pop-bar .pop-label { display: none; }

/* The computer's app windows (site.js placeOsWindow). Desktop: on the
   monitor's glass, a slim frame, nothing dimmed. Phone: 94% wide between the
   corner buttons, on the room's 0.72 scrim. */
.v2 .pop[data-kind="window"].on-screen { background: transparent; padding: 0; display: block; }
.v2 .pop[data-kind="window"].on-screen .pop-box { position: fixed; max-width: none; max-height: none; animation: none; }
.v2 .pop.on-screen .px, .v2 .pop.on-screen .px-in { padding: var(--u); }
.v2 .pop.on-screen .px-paper { padding: calc(2 * var(--u)); }
.v2 .pop.on-screen .pop-head { margin: 0 0 calc(2 * var(--u)); }
.v2 .pop.on-screen .pop-head h2 { font-size: 8px; margin-left: 4px; }
.v2 .pop.on-screen .pop-x { width: 28px; height: 28px; }
.v2 .pop.on-screen .pop-x svg { width: 12px; height: 12px; }
.v2 .pop[data-kind="window"].phone-os { background: rgba(0, 0, 0, .72); }
@media (max-width: 620px) {
  .v2 .pop[data-kind="window"].phone-os .pop-box { width: 94vw; height: calc(94dvh - 112px); }
}

/* an app that keeps its shape on a phone (site.js fitPhone) */
.v2 .shape-fit { position: absolute; left: 50%; transform: translateX(-50%); }
.v2 .shape-fit .pop-frame { width: 100%; height: 100%; }
/* On a phone, the desk and a kept-shape app sit on solid dark, not over the
   dimmed page. */
.v2 .pop[data-kind="app"]:has(.desk-wrap),
.v2 .pop[data-kind="app"]:has(.shape-fit) { background: #0C0F0B; }

/* ── the HOME BOY (site.js buildConsole) ─────────────────────────────────
   The full console's look (the room's gamesmenu/style.css: colours, bevels,
   buttons, the mark), laid out at 700 wide with every length in K, one
   700th of the console's width, so it keeps its shape at any size. The
   sides are 19 where the full console's are 38, the D-pad 34-unit keys
   where it has 40, and the screen is the room's square one. */
.v2 .hb-console {
  --k: 0.6px;                          /* until site.js measures it */
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: calc(26 * var(--k)) calc(19 * var(--k)) calc(20 * var(--k));
  border: calc(2 * var(--k)) solid #77766F;
  border-radius: calc(26 * var(--k)) calc(26 * var(--k)) calc(64 * var(--k)) calc(26 * var(--k));
  background: #BBB9AD;
  box-shadow: inset calc(5 * var(--k)) calc(5 * var(--k)) 0 #D9D7CD, inset calc(-7 * var(--k)) calc(-7 * var(--k)) 0 #85837B;
  font-family: monospace; color: #181A19;
  user-select: none; touch-action: none;
}
body[data-pops="panel"] .pop.framed .v2-stage-box .hb-console { inset: var(--u); }
.v2 .hb-bezel {
  position: relative; flex: none;
  padding: calc(24 * var(--k)) calc(12 * var(--k)) calc(26 * var(--k));
  border-radius: calc(18 * var(--k)) calc(18 * var(--k)) calc(48 * var(--k)) calc(18 * var(--k));
  background: #3D4242;
  box-shadow: inset calc(6 * var(--k)) calc(7 * var(--k)) 0 #272B2B, inset calc(-3 * var(--k)) calc(-4 * var(--k)) 0 #6C7270;
}
.v2 .hb-bezel-top {
  position: absolute; top: calc(6 * var(--k)); left: calc(16 * var(--k)); height: calc(14 * var(--k));
  display: flex; align-items: center; gap: calc(6 * var(--k));
  color: #A9AEA8; font: 700 calc(9 * var(--k))/1 monospace; letter-spacing: .14em;
}
.v2 .hb-dot { display: block; width: calc(7 * var(--k)); height: calc(7 * var(--k)); border-radius: 50%; background: #A73B42; box-shadow: 0 0 calc(5 * var(--k)) #BD4A51; }
.v2 .hb-screen { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(4 * var(--k)); background: #171D1A; }
.v2 .hb-screen-inner { position: absolute; top: 0; left: 0; width: 640px; height: 640px; transform-origin: top left; }
.v2 .hb-frame { display: block; width: 100%; height: 100%; border: 0; }
.v2 .hb-lower { position: relative; flex: 1; min-height: 0; }
.v2 .hb-brand { position: absolute; top: calc(12 * var(--k)); left: calc(3 * var(--k)); display: flex; align-items: baseline; gap: calc(9 * var(--k)); color: #343746; transform: skew(-8deg); }
.v2 .hb-brand strong { font: 900 calc(20 * var(--k))/1 monospace; letter-spacing: -.09em; }
.v2 .hb-brand span { font: 700 calc(7 * var(--k)) monospace; letter-spacing: .16em; }
.v2 .hb-dpad {
  position: absolute; left: calc(10 * var(--k)); top: calc(44 * var(--k));
  display: grid; grid-template-columns: repeat(3, calc(34 * var(--k))); grid-template-rows: repeat(3, calc(34 * var(--k)));
  filter: drop-shadow(calc(5 * var(--k)) calc(6 * var(--k)) calc(2 * var(--k)) #777);
}
.v2 .hb-dpad button, .v2 .hb-dpad i {
  border: 0; border-radius: calc(2 * var(--k)); padding: 0;
  background: #292C2D; color: #676A69; font-size: calc(11 * var(--k)); display: grid; place-items: center;
}
.v2 .hb-dpad button { cursor: pointer; }
.v2 .hb-dpad button:nth-child(1) { grid-column: 2; }
.v2 .hb-dpad button:nth-child(2) { grid-row: 2; grid-column: 1; }
.v2 .hb-dpad i { grid-row: 2; grid-column: 2; }
.v2 .hb-dpad button:nth-child(4) { grid-row: 2; grid-column: 3; }
.v2 .hb-dpad button:nth-child(5) { grid-row: 3; grid-column: 2; }
.v2 .hb-dpad button.pressed { background: #151717; transform: translate(calc(2 * var(--k)), calc(2 * var(--k))); }
.v2 .hb-actions {
  position: absolute; right: calc(9 * var(--k)); top: calc(48 * var(--k)); width: calc(140 * var(--k)); height: calc(76 * var(--k));
  display: flex; align-items: center; gap: calc(16 * var(--k));
  padding: calc(8 * var(--k)) calc(12 * var(--k)); box-sizing: border-box; border-radius: calc(44 * var(--k));
  background: #AAA89F; box-shadow: inset calc(3 * var(--k)) calc(4 * var(--k)) 0 #8B8982;
  transform: rotate(-18deg);
}
.v2 .hb-actions button {
  width: calc(48 * var(--k)); height: calc(48 * var(--k)); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #8C2648; color: #D79AAE; font: 900 calc(16 * var(--k)) monospace;
  box-shadow: inset calc(4 * var(--k)) calc(4 * var(--k)) 0 #B04A69, inset calc(-4 * var(--k)) calc(-4 * var(--k)) 0 #631831, calc(3 * var(--k)) calc(5 * var(--k)) calc(2 * var(--k)) #777;
}
.v2 .hb-actions button span { display: block; transform: rotate(18deg); }
.v2 .hb-actions button.pressed { transform: translate(calc(2 * var(--k)), calc(3 * var(--k))); box-shadow: inset calc(2 * var(--k)) calc(2 * var(--k)) 0 #631831; }
.v2 .hb-system { position: absolute; left: 50%; bottom: calc(4 * var(--k)); display: flex; gap: calc(13 * var(--k)); transform: translateX(-50%) rotate(-10deg); }
.v2 .hb-system button {
  width: calc(60 * var(--k)); height: calc(16 * var(--k)); padding: 0; border: 0; border-radius: calc(9 * var(--k)); cursor: pointer;
  background: #6C6A67; color: #343432; font: 900 calc(7 * var(--k)) monospace;
  box-shadow: inset calc(2 * var(--k)) calc(2 * var(--k)) 0 #8E8C88, calc(2 * var(--k)) calc(3 * var(--k)) calc(2 * var(--k)) #777;
}
.v2 .hb-system button.pressed { transform: translate(calc(1 * var(--k)), calc(2 * var(--k))); }
.v2 .hb-speaker { position: absolute; right: calc(1 * var(--k)); bottom: 0; display: flex; gap: calc(7 * var(--k)); transform: rotate(-25deg); }
.v2 .hb-speaker i { display: block; width: calc(5 * var(--k)); height: calc(45 * var(--k)); border-radius: calc(4 * var(--k)); background: #77766F; box-shadow: inset calc(2 * var(--k)) 0 calc(1 * var(--k)) #57564F; }

/* ── the v2 cards (js/v2-cards.js) ─────────────────────────────────────── */
/* HOMES to visit: three real HOMES, fanned */
.v2 .v2-stack { position: relative; }
.v2 .v2-stack img {
  position: absolute; top: 50%; width: 46%; max-width: none; max-height: none;
  image-rendering: pixelated; filter: drop-shadow(3px 5px 0 rgba(40, 32, 22, .35));
  transition: transform 120ms steps(2);
}
.v2 .v2-stack img:nth-child(1) { left: 6%;  transform: translateY(-50%) rotate(-9deg); z-index: 1; }
.v2 .v2-stack img:nth-child(2) { left: 48%; transform: translateY(-50%) rotate(8deg);  z-index: 1; }
.v2 .v2-stack img:nth-child(3) { left: 27%; transform: translateY(-52%) scale(1.06);  z-index: 2; }
.v2 .card:hover .v2-stack img { transform: translateY(-50%); }
.v2 .card:hover .v2-stack img:nth-child(1) { transform: translateY(-50%) rotate(-13deg) translateX(-6px); }
.v2 .card:hover .v2-stack img:nth-child(2) { transform: translateY(-50%) rotate(12deg) translateX(6px); }
.v2 .card:hover .v2-stack img:nth-child(3) { transform: translateY(-56%) scale(1.08); }

/* ── the status strip (js/v2-cards.js paintStrip) ────────────────────────
   Slim, under the top bar: the CLOSED TESTING tag with its orange light, then
   fixed lines sliding by; a tap opens the steps from idea to launch. Stops
   while a pointer is on it; still for anyone who asks for less motion. */
.v2 .ticker {
  display: flex; align-items: stretch; width: 100%; height: 40px; padding: 0; border: 0; cursor: pointer;
  background: var(--hp-green-dip); color: var(--desk-ink);
  box-shadow: inset 0 -3px 0 var(--hp-green-shade);
  font: 600 16px/1 var(--font); text-align: left; overflow: hidden;
}
.v2 .ticker-tag {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 max(16px, calc((100vw - 1180px) / 2 + 24px));
  background: var(--plate-face); color: var(--plate-band); font: 400 8px/1 var(--font-title);
  box-shadow: inset -3px 0 0 var(--plate-band);
}
.v2 .ticker-tag i { width: 8px; height: 8px; background: var(--lamp-orange); animation: blink 1s steps(1) infinite; }
.v2 .ticker-window { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.v2 .ticker-track { display: flex; white-space: nowrap; padding-left: 16px; }
.v2 .ticker-track.moving { padding-left: 0; animation: ticker var(--ticker-s, 30s) linear infinite; }
.v2 .ticker:hover .ticker-track, .v2 .ticker:focus-visible .ticker-track { animation-play-state: paused; }
.v2 .ticker-set { display: flex; }
.v2 .ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 40px 0 16px; }
.v2 .ticker-item img { width: 24px; height: 24px; object-fit: cover; object-position: top; image-rendering: pixelated; background: #D9CDB0; clip-path: var(--chamfer-sm); }
.v2 .ticker-item b { color: var(--plate-band-hi); font-weight: 700; }
.v2 .ticker-item small { color: #C3CAB2; font-weight: 700; font-size: 14px; }
.v2 .ticker:focus-visible { outline: 3px solid var(--plate-band); outline-offset: -3px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 620px) { .v2 .ticker { height: 36px; font-size: 15px; } .v2 .ticker-tag { padding-left: 16px; } }

/* ── the strip's drop-down: from idea to launch (js/v2-cards.js) ────────
   A small dark panel out from under the CLOSED TESTING tag, in the tag's own
   colours, not a pop-up. Six steps along one pixel bar: done in gold, the
   current one half lit in the strip's orange, the rest empty. On a phone the
   bar runs down the side and the panel stays narrow. */
.v2 .strip-wrap { position: relative; z-index: 40; }
.v2 .stage-drop {
  position: absolute; top: 100%; left: max(8px, calc((100vw - 1180px) / 2 + 12px));
  width: min(600px, calc(100vw - 16px)); padding: 14px 16px 16px;
  background: var(--plate-face); color: var(--desk-ink);
  box-shadow: inset 0 0 0 2px var(--plate-band), 0 6px 0 rgba(8, 10, 7, .38);
  clip-path: var(--chamfer-sm);
  transform-origin: 0 0; animation: drop-open 120ms steps(3);
}
.v2 .stage-drop[hidden] { display: none; }
.v2 .stage-drop-title { display: block; margin: 0 0 12px; font: 400 8px/1.4 var(--font-title); color: var(--plate-band); }
@keyframes drop-open { from { transform: scaleY(.25); opacity: 0; } to { transform: none; opacity: 1; } }
.v2 .stage-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v2 .stage-bar li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2 .stage-bar i { display: block; height: 16px; margin-right: 4px; background: #2E2820; box-shadow: inset 0 0 0 2px var(--hp-rule); }
.v2 .stage-bar li:last-child i { margin-right: 0; }
.v2 .stage-bar li.is-done i { background: var(--plate-band); box-shadow: none; }
.v2 .stage-bar li.is-now i { background: linear-gradient(90deg, var(--lamp-orange) 0 50%, #2E2820 50%); }
.v2 .stage-bar span { font-weight: 700; font-size: 15px; line-height: 1.15; color: #C3CAB2; }
.v2 .stage-bar li.is-now span { color: var(--desk-ink); }
.v2 .stage-bar li.is-next span { opacity: .5; }
@media (max-width: 620px) {
  .v2 .stage-drop { left: 8px; width: 220px; padding: 12px 14px 14px; }
  .v2 .stage-bar { grid-template-columns: 1fr; gap: 4px; }
  .v2 .stage-bar li { flex-direction: row; align-items: center; gap: 12px; }
  .v2 .stage-bar i { flex: none; width: 16px; height: 22px; margin: 0; }
  .v2 .stage-bar li.is-now i { background: linear-gradient(180deg, var(--lamp-orange) 0 50%, #2E2820 50%); }
}

/* ── card pictures ───────────────────────────────────────────────────── */
/* a solid fill behind see-through art, so the check doesn't show through */
.v2 .card-pic.solid { background: #D9CDB0; }
/* the photo cards keep the brown edge the others have: the photo sits inside it */
.v2 .card-pic.dark { padding: var(--u); }
.v2 .card-pic.dark img.fill { display: block; clip-path: none; }
/* Built by an award-winning team: the team stands on the frame's bottom
   edge, drawn at 512 wide and shown at about half, so it scales smoothly;
   on hover it grows from its feet, so they are never cut off */
.v2 .card-pic.team-pic { align-items: flex-end; }
.v2 .card-pic.team-pic img { width: auto; height: auto; max-height: calc(100% - 2 * var(--u) - 8px); margin-bottom: var(--u); image-rendering: auto; transform-origin: 50% 100%; }
/* Mini-apps card: six apps, each shown at its own 88px, never scaled */
.v2 .ma-card-grid { display: grid; grid-template-columns: repeat(3, 88px); grid-auto-rows: 88px; gap: 4px; align-content: center; justify-content: center; }
.v2 .ma-card-grid img { width: 88px; height: 88px; max-width: none; max-height: none; image-rendering: pixelated; }
.v2 .card:hover .ma-card-grid img { transform: none; }

/* ── Mini-apps pop-up: sixteen, four to a row, the first five playable here ── */
.v2 .ma-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v2 .ma-tile {
  display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; cursor: pointer; text-align: left;
  background: var(--hp-bright); box-shadow: inset 0 0 0 2px var(--hp-rule), inset 0 -4px 0 var(--hp-ivory-low);
  clip-path: var(--chamfer-sm); transition: transform 90ms steps(2);
}
.v2 .ma-tile:hover { transform: translateY(-3px); }
.v2 .ma-tile:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 2px; }
.v2 .ma-pic { flex: none; width: 88px; height: 88px; background: #D9CDB0; clip-path: var(--chamfer-sm); }
.v2 .ma-pic img, .v2 .ma-big img { display: block; image-rendering: pixelated; max-width: none; max-height: none; }
.v2 .ma-words { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.v2 .ma-tile b { font-family: var(--font-title); font-weight: 400; font-size: 8px; line-height: 1.6; }
.v2 .ma-line { font-size: 15px; line-height: 1.25; color: var(--hp-ink-soft); font-weight: 600; }
.v2 .ma-play { align-self: flex-start; padding: 4px 6px 3px; background: var(--plate-face); color: var(--plate-band); font: 400 7px/1.4 var(--font-title); clip-path: var(--chamfer-sm); }
.v2 .pop.mini-apps .pop-body > p { margin-bottom: 10px; }
.v2 .ma-detail { display: flex; gap: 20px; align-items: center; margin-top: 14px; }
.v2 .ma-big { flex: none; width: 264px; height: 264px; background: #D9CDB0; clip-path: var(--chamfer-sm); }
@media (max-width: 980px) { .v2 .ma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .v2 .ma-grid { grid-template-columns: repeat(3, 88px); justify-content: center; gap: 10px 12px; }
  .v2 .ma-tile { flex-direction: column; align-items: center; padding: 0; background: none; box-shadow: none; clip-path: none; text-align: center; }
  .v2 .ma-line { display: none; }
  .v2 .ma-play { align-self: center; }
  .v2 .ma-detail { flex-direction: column; align-items: flex-start; }
}

/* ── Built by an award-winning team: the backers bigger, the title smaller on a phone ── */
.v2 .meme-about { padding: 14px 16px; margin: 0 0 6px; background: var(--hp-bright); box-shadow: inset 0 0 0 2px var(--hp-rule); clip-path: var(--chamfer-sm); }
.v2 .meme-about p:last-child { margin-bottom: 0; }
.v2 .pop.built-by .people-four { gap: 14px; }
.v2 .pop.built-by .person { padding: 16px 10px; gap: 6px; }
.v2 .pop.built-by .person img { width: 160px; height: 160px; }
.v2 .pop.built-by .person b { font-size: 20px; }
.v2 .pop.built-by .person .person-title { font-size: 18px; }
.v2 .pop.built-by .person span { font-size: 16px; line-height: 1.3; }
/* the title scrolls away with the story, and the close button stays in the
   corner on a row of no height stuck to the body's top (js/home.js openTeam;
   Frank, 28 October 2026) */
.v2 .pop.built-by .pop-x-stick { position: sticky; top: 0; z-index: 2; height: 0; margin-right: -4px; display: flex; justify-content: flex-end; }
.v2 .pop.built-by .pop-body > .pop-head { padding-right: 60px; }
@media (max-width: 620px) {
  .v2 .pop.built-by .pop-head h2 { font-size: 12px; line-height: 1.5; }
  .v2 .pop.built-by .person img { width: 120px; height: 120px; }
  .v2 .pop.built-by .person b { font-size: 18px; }
  .v2 .pop.built-by .person .person-title { font-size: 16px; }
  .v2 .pop.built-by .person span { font-size: 15px; }
}

/* ── HOMES to visit pop-up: the whole HOME and Go in, without scrolling ── */
.v2 .pop-body:has([data-look]) .big-pic img { max-height: calc(80dvh - 370px); }
@media (max-width: 620px) { .v2 .pop-body:has([data-look]) .big-pic img { max-height: calc(100dvh - 340px); } }