/* QEVR / qevr.party
   VENOM only. Square corners, hard offset shadows, uppercase SpaceMono.
   Four brand colors, locked. The one licensed glow is ON FIRE.

   ALIGNMENT STANDARD (applies to every page, every width):
   - Reading decks stay LEFT-ALIGNED inside one shared container.
   - The mascot-first arrival (the full first screen) and the studio center
     plate are the sanctioned centered compositions; labels that name art
     center with that art.
   - Lime fill = where you are. White fill = hover. Never the same treatment
     for both. */

/* Space Mono lives on OUR domain. SEM REVENDA DE DADOS includes the fonts. */
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/spacemono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/spacemono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/spacemono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/spacemono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --qevr-ink: #09090B;
  --qevr-body: #CCFF00;
  --qevr-pink: #FF007F;
  --qevr-light: #FFFFFF;
  --qevr-muted: #9A9AA5;
  --qevr-surface: #141416;
  --qevr-hair: #27272A;
  --qevr-fire: #FF2A6D;

  --ground: var(--qevr-ink);
  --brand: var(--qevr-body);
  --accent: var(--qevr-body);

  --gut: clamp(16px, 4vw, 64px);
  --rule: 1px;
  --wrap: 1560px;
  --bar: calc(52px + env(safe-area-inset-top, 0px));
  --utility: 24px;
  /* the controls float as two compact clusters under the bar — they are NOT a
     second header row, so the page offset is the bar alone */
  --chrome: var(--bar);
  --rail: 14px;
  --thermo-cell: 60px;

  /* Shared layer names preserve the live stack. The companion's only LIVE
     change is the ruled repair above the doors. */
  --z-rail: 55;
  --z-content: 1;
  --z-header: 60;
  --z-doors: 56;
  --z-poster: 90;
  --z-companion: 57;
}

/* The proposed page uses the complete ruled ladder. Keep this as tokens so
   no component invents a private stacking number. */
html.is-next {
  --z-rail: 10;
  --z-content: 20;
  --z-header: 30;
  --z-doors: 40;
  --z-poster: 50;
  --z-companion: 60;
}

html[data-mode="party"] { --brand: var(--qevr-pink); --accent: var(--qevr-pink); }
html[data-mode="dawn"]  { --ground: #0C0C0E; --brand: var(--qevr-body); --accent: var(--qevr-pink); }

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

/* the motion law is stepped and hard: anchor moves are cuts, never glides */
html {
  background: var(--ground); scroll-behavior: auto; scroll-padding-top: var(--bar);
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  margin-left: var(--rail);
  background: var(--ground);
  color: var(--qevr-light);
  font-family: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--brand); color: var(--qevr-ink); }

/* ---------- bar ---------- */

.bar {
  position: fixed; left: 0; right: 0; top: 0; height: var(--bar); z-index: var(--z-header);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 max(12px, env(safe-area-inset-left, 0px));
  background: var(--ground);
  border-bottom: var(--rule) solid var(--qevr-hair);
}
/* QIQI at the extreme left, the doors at the extreme right — always */
.bar__in {
  height: 100%; max-width: none;
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
}
.bar__mark { display: grid; place-items: center; }
.bar__mark canvas { display: block; image-rendering: pixelated; }
.bar__nav { display: flex; align-items: stretch; height: 100%; gap: 0; }
.bar__nav a {
  color: var(--qevr-muted); text-decoration: none;
  font-size: clamp(10px, 1.05vw, 12px); letter-spacing: .16em;
  padding: 0 14px; border: 0; border-left: var(--rule) solid var(--qevr-hair);
  display: grid; place-items: center; height: 100%; white-space: nowrap;
}
/* lime marks where you are; hover is white, never lime */
.bar__nav a[aria-current="page"] { color: var(--qevr-ink); background: var(--brand); font-weight: 700; }
.bar__nav a:not([aria-current="page"]):hover,
.bar__nav a:not([aria-current="page"]):focus-visible { color: var(--qevr-ink); background: var(--qevr-light); outline: none; }

/* the switches: each block names what it TURNS INTO. site in PT shows EN;
   site green shows a pink block. the old stacked boxes at the right edge
   (GP, 2026-08-27). */
.switches {
  position: fixed; top: var(--bar); right: 0; z-index: calc(var(--z-header) - 1);
  display: flex; flex-direction: column;
  background: var(--ground); padding: 8px 0 8px 8px;
}
.switches button {
  font: inherit; text-transform: uppercase; cursor: pointer;
  background: var(--ground); color: var(--qevr-muted);
  font-size: 11px; letter-spacing: .14em; padding: 10px 12px;
  border: var(--rule) solid var(--qevr-hair); border-right: 0;
}
.switches button + button { margin-top: -1px; }
.switches button:hover, .switches button:focus-visible { background: var(--qevr-light); color: var(--qevr-ink); outline: none; }
.switches .switch--color { min-height: 36px; }
.switches .switch--color.to-pink { background: var(--qevr-pink); }
.switches .switch--color.to-green { background: var(--qevr-body); }
.switches .switch--color:hover, .switches .switch--color:focus-visible { background: var(--qevr-light); }

/* ---------- thermometer ---------- */

.thermo { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); z-index: var(--z-rail); background: transparent; }
.thermo__fill {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  background-color: var(--brand);
  /* twelve countable cells, L16's own number — never a barcode */
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--thermo-cell) - 2px), var(--ground) calc(var(--thermo-cell) - 2px) var(--thermo-cell));
}
.thermo.is-fire .thermo__fill { background-color: var(--qevr-fire); box-shadow: 0 0 18px 2px var(--qevr-fire); }

main { padding-top: var(--chrome); }

/* ---------- arrival: him and the colour question own the whole first screen ---------- */

.arrival {
  min-height: calc(100svh - var(--chrome));
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(18px, 3.4vh, 38px) var(--gut) clamp(22px, 4vh, 44px);
  border-bottom: var(--rule) solid var(--qevr-hair);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vh, 28px);
}
/* him and his one instruction are a lockup: the label centers under the art */
.arrival__mascot { display: grid; justify-items: center; gap: clamp(8px, 1.3vh, 14px); }
.arrival__hint { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .24em; color: var(--brand); text-align: center; }
.arrival__cursor { display: inline-block; width: 8px; height: 1em; margin-left: 5px; vertical-align: -0.14em; background: var(--brand); }
.arrival__color { display: grid; justify-items: center; gap: clamp(10px, 1.6vh, 16px); width: min(100%, 400px); }
.arrival__question { color: var(--qevr-light); font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .2em; text-align: center; }
.arrival__color-controls { display: flex; justify-content: center; width: min(100%, 300px); }

/* ---------- the one door left: the studio exit at the end of the read ---------- */

.door {
  display: flex; flex-direction: column; gap: 7px;
  padding: clamp(16px, 2vw, 24px) clamp(20px, 2.6vw, 34px);
  text-decoration: none; border: var(--rule) solid var(--qevr-hair);
  color: var(--qevr-light); min-width: 0;
}
.door strong { font-size: clamp(14px, 1.5vw, 19px); font-weight: 700; letter-spacing: .1em; }
.door span { font-size: clamp(9.5px, 1vw, 11px); color: var(--qevr-muted); letter-spacing: .12em; }
.door--exit { margin-top: clamp(24px, 4vh, 44px); }
/* same grammar as the bar: hover is white */
.door:hover, .door:focus-visible { background: var(--qevr-light); border-color: var(--qevr-light); color: var(--qevr-ink); outline: none; }
.door:hover span, .door:focus-visible span { color: var(--qevr-ink); opacity: .7; }

/* ---------- segmented controls: shared by arrival and studio ---------- */

.ctl {
  font: inherit; text-transform: uppercase; letter-spacing: .12em;
  font-size: 11px; padding: 10px 13px; cursor: pointer;
  background: transparent; color: var(--qevr-light);
  border: var(--rule) solid var(--qevr-hair); margin: 0 -1px 0 0;
  flex: 1; text-align: center;
}
.ctl:hover, .ctl:focus-visible { background: var(--qevr-light); color: var(--qevr-ink); border-color: var(--qevr-light); outline: none; }
.ctl[aria-pressed="true"] { background: var(--brand); color: var(--qevr-ink); border-color: var(--brand); font-weight: 700; }
.ctl--swatch { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ctl--swatch i { width: 10px; height: 10px; display: block; flex: none; }
.ctl--green i { background: var(--qevr-body); }
.ctl--pink i { background: var(--qevr-pink); }
/* a pressed swatch sits on its own colour: flip the square to ink so it never vanishes */
.ctl--swatch[aria-pressed="true"] i { background: var(--qevr-ink); }

/* ---------- the panel: five headings, one bay, zero tower (M-A, ruled) ---------- */

.blocks {
  max-width: var(--wrap); margin-inline: auto;
  /* phone top padding clears the floating controls; desktop joins the top
     grid rule in its breakpoint below. no bottom padding: the doors are the
     page's floor and sit flush (GP, 2026-08-28) */
  padding: clamp(30px, 4vh, 44px) var(--gut) 0;
}
#panel { display: grid; grid-template-columns: clamp(210px, 22vw, 320px) minmax(0, 1fr); align-items: stretch; }
.panel__rail { display: flex; flex-direction: column; border-right: var(--rule) solid var(--qevr-hair); }
.panel__head {
  background: transparent; border: 0; border-bottom: var(--rule) solid var(--qevr-hair);
  padding: clamp(14px, 2vh, 22px) clamp(12px, 1.4vw, 20px);
  font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden;
}
.panel__head:last-child { border-bottom: 0; }
.panel__head:hover { background: var(--qevr-surface); }
.panel__head:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.panel__head canvas { display: block; image-rendering: pixelated; max-width: 100%; }
.panel__bay { position: relative; padding: clamp(16px, 2.2vw, 28px); min-width: 0; display: flex; flex-direction: column; }
.panel__bay[hidden] { display: none; }
.panel__bay > * { flex: none; }
/* These wrappers are layout-neutral everywhere except the fitted PROPOSED
   phone frame. LIVE and desktop therefore keep their original geometry. */
.panel__bay-slot { display: contents; }
.panel__bay-fit { display: contents; }
.panel__bay-fit > * { flex: none; }
@media (min-width: 721px) {
  /* The desktop grid starts on the read's top rule. Heading surfaces use
     the whole left cell while their canvases stay on the shared text line. */
  .blocks { padding-top: 0; }
  .panel__head {
    margin-left: calc(0px - var(--gut));
    padding-left: calc(var(--gut) + clamp(12px, 1.4vw, 20px));
  }
}
/* desktop: the stamp is pinned to the BAY's floor — inside the section
   column, right above the doors (GP sketch, 2026-08-28) */
@media (min-width: 721px) { .panel__bay .stampband { margin-top: auto; } }
.panel__bay-sub { color: var(--qevr-muted); font-size: clamp(10px, .95vw, 11.5px); letter-spacing: .18em; margin-bottom: 14px; }
.panel__bay-sub:empty { display: none; }
.panel__bay-copy { min-width: 0; }
/* N01: the cursor is a small brand bar that never stops blinking */
.bay__cursor { display: inline-block; width: 9px; height: 16px; background: var(--brand); margin-top: 10px; }

/* the people speak as stanzas in the bay: no table, no numbers, no borders */
.bay__stanza { font-size: clamp(13.5px, 1.2vw, 17px); line-height: 1.7; letter-spacing: .045em; max-width: 64ch; }
.bay__stanza + .bay__stanza { margin-top: 1em; }
.bay__stanza b { font-weight: 700; }
.bay__close { margin-top: clamp(14px, 2.2vh, 22px); }

/* ---------- a cena ---------- */

.copy p { font-size: clamp(13.5px, 1.2vw, 17px); line-height: 1.7; letter-spacing: .045em; max-width: 64ch; }
.copy p + p { margin-top: 1.2em; }
.copy p.dim { color: var(--qevr-muted); }
.copy p.mark { color: var(--brand); }

/* the close paragraphs sit under the stanzas, same voice, no chrome */
.bay__close p { font-size: clamp(12px, 1vw, 14px); line-height: 1.65; color: var(--qevr-light); max-width: 64ch; }
.bay__close p + p { margin-top: .85em; }
.bay__close p.dim { color: var(--qevr-muted); }
.bay__close p.mark { color: var(--brand); }

/* ---------- tiles: every deck on this page is this one component ---------- */

.stances__grid { display: block; }
.stance {
  border: 0; background: transparent; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: left;
  padding: 7px 0; cursor: pointer; display: block; width: 100%;
}
.stance:hover .stance__head, .stance:focus-visible .stance__head { color: var(--qevr-light); }
.stance:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.stance__head { font-size: clamp(13.5px, 1.2vw, 17px); line-height: 1.6; font-weight: 700; color: var(--qevr-muted); }
.stance[aria-expanded="true"] .stance__head { color: var(--brand); }
.stance__body { display: none; }

/* still tiles: same skin, nothing to press, body always out */
.stance--still { cursor: default; min-height: 0; }
.stance--still:hover { background: transparent; }
.stance--still .stance__body { display: block; }
.stance--still::after { content: none; }

/* ---------- gift ---------- */

.gift p { font-size: clamp(14px, 1.3vw, 19px); line-height: 1.7; max-width: 52ch; }
.stamp {
  margin-top: clamp(18px, 3vh, 34px); padding-top: clamp(14px, 2.2vh, 24px);
  border-top: 3px solid var(--brand);
  font-size: clamp(15px, 1.9vw, 28px); line-height: 1.4; font-weight: 700;
  color: var(--qevr-light); letter-spacing: .04em; max-width: 30ch;
}
.stamp b { color: var(--brand); font-weight: 700; }

/* ---------- companion ---------- */

/* a true corner: small zone, so he never sits on the reading (soul: never covers content) */
.companion { position: fixed; right: clamp(8px, 1.6vw, 22px); bottom: clamp(8px, 1.6vh, 22px); z-index: var(--z-companion); width: 96px; height: 96px; display: grid; place-items: center; pointer-events: none; }
.companion .mascot { pointer-events: auto; }
.mascot { background: transparent; border: 0; padding: 0; cursor: pointer; display: block; will-change: transform; }
.mascot canvas { display: block; image-rendering: pixelated; }
.mascot:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
/* phones: a tap is a tap — no double-tap zoom anywhere, no blue tap-highlight,
   and a long hold on him charges the room instead of selecting/callout-ing him.
   manipulation on the roots kills double-tap-zoom in every mobile browser
   (iOS Chrome ignored the per-element rule) while pinch zoom stays free. */
html, body { touch-action: manipulation; }
button, a, .mascot canvas { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mascot, .mascot canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

/* H3 (GP-ruled 2026-08-28): touch is the hover twin. finger-down floods the
   control the way pointer-over does; every existing glitch/flinch stays. */
.ctl:active { background: var(--qevr-light); color: var(--qevr-ink); border-color: var(--qevr-light); }
.ctl--swatch:active i { background: var(--qevr-ink); }
.switches button:active { background: var(--qevr-light); color: var(--qevr-ink); }
.switches .switch--color:active { background: var(--qevr-light); }
.poster__close:active { background: var(--qevr-light); color: var(--qevr-ink); border-color: var(--qevr-light); }
.bar__nav a:not([aria-current="page"]):active { color: var(--qevr-ink); background: var(--qevr-light); }
.panel__head:active { background: var(--qevr-surface); }

@media (max-width: 1100px) {
  .stances__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stances__grid > .stance:nth-child(2n+1):last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* GP 2026-08-28: the landing and the read are TWO PAGES — you see him or
     the read, never a half of each. CSS snap is gone (mandatory fought the
     finger mid-read, proximity allowed split views); a JS pager resolves any
     stop inside the boundary zone to a full page with a hard cut, and inside
     the read the finger rules completely. Closed, the five heads STRETCH to
     fill the page (no void, doors at the floor); open, they fall back to
     natural height because the accordion's content fills the room. */
  .blocks { display: flex; flex-direction: column; min-height: calc(100svh - var(--bar)); }
  .blocks #panel {
    display: flex; flex-direction: column; flex: 1 1 auto;
    /* The row itself is the active surface. Let it reach both phone edges;
       the extra head/bay padding below keeps every canvas and copy block on
       the existing reading gutter. */
    width: calc(100% + var(--gut) + var(--gut));
    margin-inline: calc(0px - var(--gut));
  }
  .blocks .panel__rail { flex: 1 1 auto; }
  .blocks .panel__head { flex: 1 1 auto; display: flex; align-items: center; }
  .blocks.is-open .panel__head { flex: none; }
  /* .blocks beats the base .doors rule that sits later in the file: the
     doors sit flush under the last row — no band of ground between */
  .blocks .doors { margin-top: 0; }

  .stances__grid, #neversList { grid-template-columns: minmax(0, 1fr); }
  /* GP's ruling: on the read he takes the bottom-right corner, same as the
     app. small zone, small cell, and only he himself takes the tap */
  /* GP 2026-08-28: bottom-right, 15% bigger */
  .companion { width: 74px; height: 74px; right: 10px; bottom: 12px; }
  .bar { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  .switches { background: transparent; }
  .bar__in { gap: 0; max-width: none; }
  .bar__mark { flex: 0 0 64px; width: 64px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .bar__nav { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar__nav a {
    min-width: 0; margin-left: 0; padding: 0 2px;
    font-size: 8px; letter-spacing: .055em; text-align: center; white-space: nowrap;
  }
  .arrival { padding-inline: 16px; gap: 14px; }
  .door { padding: 13px 16px; }
  .arrival__color-controls { width: min(100%, 260px); }
  .copy p { font-size: 13px; line-height: 1.62; }
  .world__close p { font-size: 12px; }
  .stance { min-height: 0; padding: 12px 14px; }
  .stance__head { font-size: 12.5px; line-height: 1.45; }
  .stance::after { margin-top: 9px; }
  .heading__sub { letter-spacing: .14em; }
  .stamp { font-size: 15px; max-width: none; }
  #panel { grid-template-columns: minmax(0, 1fr); }
  .panel__rail { border-right: 0; border-bottom: var(--rule) solid var(--qevr-hair); }
  .panel__head { padding: 10px calc(var(--gut) + 14px); }
  .panel__bay { padding: 14px calc(var(--gut) + 14px); min-height: 0 !important; }
  /* GP's accordion (2026-08-28): the bay opens right under the tapped head
     and the heads below get pushed down. The stamp rides INSIDE the open
     section. (Page sizing lives with the two-page rules above.) */
  .panel__rail > .panel__bay { border-bottom: var(--rule) solid var(--qevr-hair); flex: none; }
  /* open on a phone: rows go compact and the BAY absorbs the leftover, so
     the content area runs down to the doors — never a floating void */
  .blocks.is-open .panel__head { flex: 0 0 auto; }
  .blocks.is-open .panel__rail > .panel__bay { flex: 1 1 auto; }
  /* A GIFT already has enough copy to make its own page. Do not stretch its
     bay (or either flex ancestor) to the viewport floor: that creates a
     blank tail after the stamp and strands the doors hundreds of pixels
     below it. Other sections retain their head-pinning tail. */
  .blocks.is-gift-open #panel,
  .blocks.is-gift-open .panel__rail,
  .blocks.is-gift-open .panel__rail > .panel__bay { flex: 0 0 auto; }
  /* Gift copy can finish just shy of the phone floor. Keep the doors joined
     to the stamp and let their white band absorb that remainder. */
  .blocks.is-gift-open .doors { flex: 1 0 auto; }
  /* on phones the bay cursor's row is stray space — the stamp is the
     section's terminal beat; the cursor stays a desktop creature */
  #bayCursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .thermo.is-fire .thermo__fill { box-shadow: none; }
}

/* ================= seventh voice: the ruled build ================= */

/* ---------- arrival floor: provenance + the scroll cue ---------- */
.arrival { position: relative; }
.arrival__floor {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 2px;
}
.arrival__city { font-size: 10px; letter-spacing: .26em; color: var(--qevr-muted); }
.arrival__scroll { display: flex; align-items: center; gap: 8px; color: var(--qevr-muted); }
.arrival__scroll span { font-size: 9px; letter-spacing: .26em; }
.arrival__scroll canvas { display: block; image-rendering: pixelated; }
/* the gift tag: one muted dedication line, read from the link, never stored */
.arrival__from { font-size: 10px; letter-spacing: .2em; color: var(--qevr-muted); text-align: center; }
.arrival__from:empty { display: none; }
/* the quick loading bar of the entrance ritual */
.arrival__loading { width: 100%; height: 8px; border: var(--rule) solid var(--qevr-hair); }
.arrival__loading i { display: block; height: 100%; width: 0; background: var(--brand); }
.arrival__signal { width: min(80vw, 260px); height: 20px; display: grid; place-items: center; }
.arrival__signal > * { grid-area: 1 / 1; }
.arrival__signal .arrival__hint { white-space: nowrap; }
.arrival__signal .arrival__hint { visibility: hidden; }
.arrival__signal.is-ready .arrival__hint { visibility: visible; }
.arrival__signal.is-ready .arrival__loading { display: none; }
.arrival__signal.is-loading .arrival__hint { visibility: hidden; }
.arrival__signal.is-loading .arrival__loading { display: block; }
.arrival__signal.is-charging .arrival__hint { visibility: hidden; }
body.is-booting .bar,
body.is-booting > .switches,
body.is-booting .arrival__mascot > :not(.arrival__signal),
body.is-booting .arrival__from,
body.is-booting .arrival__color,
body.is-booting .arrival__floor { visibility: hidden; }
body.is-booting .arrival__question:empty::before { content: "\00a0"; }
body.is-booting .arrival__color-controls span:empty::before { content: "\00a0"; }
body.is-booting [data-qevr-cascade] { display: none !important; }
/* the boot bar loads IN THE SLOT above where he builds — one bar, one home,
   never a second centered copy (GP, 2026-08-27) */

/* ---------- the error tag and loader above his head (poke ladder) ---------- */
.arrival__mascot { position: relative; }
.mascot__tag {
  position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%);
  font-size: 10px; letter-spacing: .3em; font-weight: 700; color: var(--qevr-pink);
  padding: 4px 8px; border: 0; background: transparent;
  display: none; white-space: nowrap;
}
.mascot__tag.on { display: block; }

/* ---------- the read: expansion bay + full volume ---------- */
/* tiles stay short; the opened body lives in a full-width band under its row */
.stance__body { display: none !important; }
.stances__bay {
  background: transparent; border: 0;
  padding: 4px 0 12px;
  display: flex; gap: 12px; align-items: flex-start;
}
.stances__bay-idx { display: none; }
.stances__bay-copy { min-width: 0; flex: 1; }
/* the doctrine answers at full volume: copy size, white */
.stances__bay-copy p { font-size: clamp(13.5px, 1.2vw, 17px); line-height: 1.7; color: var(--qevr-light); max-width: 64ch; }
.stances__bay-copy p + p { margin-top: 1em; }
.stances__bay-copy .cursor { display: inline-block; width: 9px; height: 1em; vertical-align: -0.15em; background: var(--brand); margin-left: 3px; }


/* ---------- the companion enters the open bay (desktop) ---------- */
.block__field { position: absolute; right: clamp(14px, 3vw, 60px); bottom: clamp(14px, 3vh, 40px); display: none; }
@media (min-width: 1101px) { .panel__bay.has-field .block__field { display: block; } }

/* ---------- the doors out: two bands at heading scale ---------- */
.doors {
  width: 100vw; margin-top: 0;
  margin-left: calc(50% - 50vw - 7px);
  position: relative; z-index: var(--z-doors);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ground);
  border-top: var(--rule) solid var(--qevr-hair);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doorband {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.6vh, 30px) clamp(16px, 2vw, 26px);
  border: var(--rule) solid var(--qevr-hair); border-top: 0; min-width: 0;
  text-decoration: none; color: var(--qevr-ink); background: var(--qevr-light);
}
.doorband canvas { display: block; image-rendering: pixelated; max-width: 72%; height: auto !important; }
.doorband span { min-width: 0; font-size: clamp(9.5px, 1vw, 11px); color: var(--qevr-ink); letter-spacing: .18em; text-align: right; }
.doorband:hover, .doorband:focus-visible { background: var(--brand); outline: none; }
.doorband:hover span, .doorband:focus-visible span { color: var(--qevr-ink); }

/* ---------- the stamp drawn in his cells: a standing band below the panel ---------- */
.stampband { padding: clamp(18px, 3vh, 34px) 0 0; }
/* inside the bay (every width now) the stamp hugs the section's last line */
.panel__bay .stampband { padding: 6px 0 4px; }
.stamp { border-top: 0; padding-top: 0; max-width: none; }
.stamp__band { border-top: 3px solid var(--brand); padding-top: clamp(14px, 2.2vh, 24px); }
.stamp canvas { display: block; image-rendering: pixelated; max-width: 100%; }
.stamp__city { display: block; margin-top: 10px; color: var(--qevr-muted); font-size: 9px; letter-spacing: .24em; }

/* ---------- AS REGRAS: the poster pop ---------- */
.poster {
  position: fixed; inset: 0; z-index: var(--z-poster); background: rgb(9 9 11 / 88%); display: none;
  overflow: auto; padding: clamp(12px, 3vh, 28px); place-items: center;
}

html.is-next .arrival,
html.is-next #panel,
html.is-next .stampband {
  position: relative;
  z-index: var(--z-content);
}
.poster.on { display: grid; }
.poster__in { width: min(100%, 760px); display: grid; gap: 8px; }
.poster__sheet {
  --poster-edge: clamp(3px, .55vw, 6px);
  --poster-pad: clamp(12px, 2.5vmin, 28px);
  aspect-ratio: 210 / 297; width: min(100%, calc((100svh - 112px) * 210 / 297));
  min-width: 0; max-height: calc(100svh - 112px); margin-inline: auto; overflow: visible; position: relative;
  border: var(--poster-edge) solid var(--brand); background: var(--qevr-ink);
  padding: var(--poster-pad); display: flex; flex-direction: column; gap: clamp(8px, 1.6vmin, 18px);
}
.poster__controls { display: flex; justify-content: center; }
.poster__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.poster__title canvas { display: block; image-rendering: pixelated; }
.poster__close {
  font: inherit; text-transform: uppercase; cursor: pointer; letter-spacing: .14em;
  background: transparent; color: var(--qevr-light); font-size: 11px;
  border: var(--rule) solid var(--qevr-hair); padding: 10px 13px;
}
.poster__close:hover, .poster__close:focus-visible { background: var(--qevr-light); color: var(--qevr-ink); border-color: var(--qevr-light); outline: none; }
.poster__body { position: relative; min-height: 0; }
.poster__art { position: absolute; right: calc(0px - var(--poster-pad) - var(--poster-edge)); top: clamp(6px, 1vmin, 12px); transform: translateX(33.333%); }
.poster__art canvas { display: block; image-rendering: pixelated; }
.poster__rules { min-width: 0; display: flex; flex-direction: column; padding-right: clamp(82px, 15vmin, 112px); }
.poster__rule { border-bottom: var(--rule) solid var(--qevr-hair); padding: clamp(4px, .85vmin, 10px) 0; }
.poster__rule b { display: block; font-size: clamp(7px, 1.18vmin, 13px); letter-spacing: .03em; }
.poster__rule i { display: block; font-style: normal; margin-top: 2px; font-size: clamp(6px, .92vmin, 10px); color: var(--qevr-muted); line-height: 1.35; }
.poster__foot { font-size: 10px; letter-spacing: .24em; color: var(--qevr-muted); display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 720px) {
  .poster { padding: 8px; }
  .poster__in { width: 100%; }
  .poster__sheet { --poster-pad: 11px; max-height: calc(100svh - 70px); width: min(calc(100% - 32px), calc((100svh - 70px) * 210 / 297)); }
  .poster__top { gap: 8px; }
  .poster__rules { padding-right: 50px; }
  .poster__art { top: 0; }
  .poster__foot { font-size: 6.5px; }
}

/* ---------- the hold: charging into the secret room ----------
   the charge is the same bar in the same slot, pink. one bar, one home. */
.mascot__charge {
  display: none;
  width: min(46vw, 220px); height: 8px; border: var(--rule) solid var(--qevr-hair);
}
.mascot__charge i { display: block; height: 100%; width: 0; background: var(--qevr-pink); }
.arrival__signal .mascot__charge.on { display: block; }

/* ---------- phone: the companion changes corners instead of changing copy width ---------- */
@media (max-width: 720px) {
  .arrival__floor { left: 16px; right: 16px; }
  .doorband { padding: 14px 10px; justify-content: center; }
  .doorband span { display: none; }
  .doorband canvas { max-width: 100%; }
  .stances__bay { padding: 14px; }
}

.companion[data-corner="bottom-left"] { right: auto; left: calc(var(--rail) + 10px); }
.companion[data-corner="top-right"] { bottom: auto; top: calc(var(--chrome) + 12px); }
.companion[data-corner="top-left"] { right: auto; bottom: auto; left: calc(var(--rail) + 10px); top: calc(var(--chrome) + 12px); }

@media (min-width: 2200px) {
  :root { --wrap: min(86vw, 3000px); --gut: clamp(48px, 4vw, 150px); }
  body { font-size: 20px; }
  .copy p, .stances__bay-copy p, .bay__stanza { font-size: clamp(18px, .82vw, 26px); max-width: 76ch; }
  .heading__sub { font-size: clamp(13px, .55vw, 18px); }
  .block__field { right: clamp(50px, 4vw, 150px); }
  .poster__in { width: min(100%, 960px); }
}

/* screen-reader-only heading: the document has a name even before the paint */
.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; }