/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — ROOMS (trail, tricks, cartoons, funny, claudine, privacy)
   Shared art-direction vocabulary for the six rooms below. Builds on
   tokens.css / system.css / media.css / contact.css — never forks them.
   Load LAST, after contact.css, on all six pages only.
   ─────────────────────────────────────────────────────────────────── */

/* ── CHAPTER COMPOSITION — vary the beat without a second pin ────── */
.gb-chapter--center{margin-inline:auto;text-align:center;max-width:min(52rem,100%)}
.gb-chapter--center .gb-kicker{justify-content:center}
.gb-chapter--right{margin-left:auto;text-align:right;max-width:var(--measure)}
.gb-chapter--right .gb-kicker{flex-direction:row-reverse}

/* ── EDITORIAL RUN — replaces a boxed list with a numbered run:
   a big quiet index, a hairline, air. No border, no background box. ── */
.gb-run{
  display:grid;gap:0;
  border-top:1px solid var(--gb-line);
  counter-reset:gb-run;
}
.gb-run-item{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:var(--s-5);
  padding:var(--s-7) 0;
  border-bottom:1px solid var(--gb-line-soft);
  counter-increment:gb-run;
  align-items:start;
}
.gb-run-item::before{
  content:counter(gb-run,decimal-leading-zero);
  font-family:var(--f-mono);font-size:var(--t-sm);
  letter-spacing:var(--tr-label);color:var(--gb-ember);
  padding-top:.2rem;
}
.gb-run-item:nth-of-type(even){grid-template-columns:3.2rem minmax(0,1fr)}
.gb-run-h{
  margin:0 0 var(--s-3);font-family:var(--f-display);font-weight:520;
  font-size:var(--t-lg);line-height:var(--lh-head);letter-spacing:var(--tr-head);
  color:var(--gb-bone);text-wrap:balance;
}
.gb-run-item p{margin:0 0 var(--s-3);color:var(--gb-bone-soft);line-height:var(--lh-body);font-size:var(--t-body)}
.gb-run-item p:last-child{margin-bottom:0}
.gb-run-item ul,.gb-run-item ol{margin:0 0 var(--s-3);padding-left:1.2rem;color:var(--gb-bone-soft);line-height:var(--lh-body)}
.gb-run-item ul:last-child,.gb-run-item ol:last-child{margin-bottom:0}
.gb-run-item li{margin:0 0 var(--s-2)}
.gb-run-item li:last-child{margin-bottom:0}
.gb-run-item code{font-family:var(--f-mono);font-size:.88em;color:var(--gb-bone)}
@media (min-width:760px){
  .gb-run-item{grid-template-columns:4.6rem minmax(0,1fr)}
  .gb-run-item::before{font-size:var(--t-md)}
}

/* ── PAIR — a DO / SEE (or two-up) beat with a hairline divider,
   never two bordered boxes side by side. ────────────────────────── */
.gb-pair{
  display:grid;gap:var(--s-5);
  padding:var(--s-5) 0;border-top:1px solid var(--gb-line-soft);
}
.gb-pair > div{min-width:0}
.gb-pair-tag{
  display:block;margin:0 0 var(--s-2);
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gb-ember);
}
.gb-pair-tag.see{color:var(--gb-mute)}
.gb-pair p{margin:0;color:var(--gb-bone-soft);line-height:var(--lh-body);font-size:var(--t-body)}
@media (min-width:640px){
  .gb-pair{grid-template-columns:1fr 1fr;gap:0 var(--s-7);position:relative}
  .gb-pair > div + div{padding-left:var(--s-7);border-left:1px solid var(--gb-line-soft)}
}

/* ── QUIET SURFACE — a single callout that earns real depth (not a
   list, one item): use in place of a gradient-bordered box. ─────── */
.gb-quiet-surface{
  margin:var(--s-6) 0;padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--gb-ink);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--gb-line);
}
.gb-quiet-surface h3{
  margin:0 0 var(--s-3);font-family:var(--f-display);font-weight:520;
  font-size:var(--t-md);letter-spacing:var(--tr-head);color:var(--gb-bone);
}
.gb-quiet-surface p{margin:0 0 var(--s-3);color:var(--gb-bone-soft);line-height:var(--lh-body)}
.gb-quiet-surface p:last-child{margin-bottom:0}
.gb-quiet-badge{
  display:inline-flex;align-items:center;min-height:26px;padding:.2rem .7rem;
  border-radius:var(--r-pill);background:var(--gb-ember-veil);color:var(--gb-ember-lift);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:var(--tr-label);text-transform:uppercase;
}

/* ── CODE BLOCK — quiet, no light card ────────────────────────────── */
.gb-code{
  margin:var(--s-4) 0 var(--s-5);padding:var(--s-4) var(--s-5);
  background:var(--gb-black);border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--gb-line);
  overflow-x:auto;max-width:100%;
}
.gb-code code{
  font-family:var(--f-mono);font-size:.82rem;line-height:1.6;
  white-space:pre;color:var(--gb-bone-soft);
}

/* ── STATION NAV (trail) — pills stay pills; a nav rail is not a
   content list. Retuned off neon. ────────────────────────────────── */
.gb-stations{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 var(--s-7);padding:0;
}
.gb-stations a{
  display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .95rem .5rem .55rem;
  border-radius:var(--r-pill);background:var(--gb-glass-hi);
  box-shadow:inset 0 0 0 1px var(--gb-line);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:var(--tr-label);color:var(--gb-dim);
  text-decoration:none;
  transition:box-shadow var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out);
}
.gb-stations a:hover,.gb-stations a:focus-visible{box-shadow:inset 0 0 0 1px var(--gb-ember);color:var(--gb-bone)}
.gb-stations a.on{box-shadow:inset 0 0 0 1px var(--gb-ember);color:var(--gb-bone);background:var(--gb-ember-veil)}
.gb-stations i{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--gb-ember);color:var(--gb-black);font-style:normal;font-weight:800;font-size:.68rem;flex:none;
}

/* ── TRAIL — de-boxed stations. Same markup, editorial dress: a
   hairline between stations, a quiet numeral, no rounded rectangle. ── */
.gb-station{
  padding:var(--s-8) 0;border-top:1px solid var(--gb-line);
  scroll-margin-top:6.6rem;
}
.gb-station:first-of-type{border-top:0;padding-top:0}
.gb-station-head{display:flex;align-items:flex-start;gap:var(--s-5);margin-bottom:var(--s-5)}
.gb-station-num{
  flex:none;font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;letter-spacing:var(--tr-mega);
  color:var(--gb-ember);
}
.gb-station h2{margin:.2rem 0 .3rem;font-family:var(--f-display);font-weight:520;font-size:var(--t-lg);letter-spacing:var(--tr-head);color:var(--gb-bone)}
.gb-station:nth-of-type(even) .gb-station-head{flex-direction:row-reverse;text-align:right}
.gb-station:nth-of-type(even) .gb-kicker{justify-content:flex-end}
.gb-station p{color:var(--gb-bone-soft);line-height:var(--lh-body)}
.gb-station-next{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s-6)}

/* accent call-outs: a border-left flag, not a box — legitimate as ONE
   line of emphasis, retuned to the ember/bone palette (no raw hex). */
.gb-flag{
  margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);
  border-left:2px solid var(--gb-ember);background:var(--gb-ember-veil);
  font-size:.94rem;line-height:1.6;color:var(--gb-bone-soft);
}
.gb-flag.mute{border-left-color:var(--gb-line-strong);background:var(--gb-glass-hi)}
.gb-flag b{color:var(--gb-bone)}

/* ── LESSON CARDS (tricks) — the film treatment, not a bordered box:
   media fills the frame, the caption sits under it on the page ground. ── */
.room-tricks .lesson-grid{gap:.5rem 8px}
.room-tricks .lesson-card{
  border:0;border-radius:0;background:none;
  min-height:0;padding:0;
}
.room-tricks .lesson-card:hover,.room-tricks .lesson-card:focus-visible{border:0}
.room-tricks .lesson-card .kind-canvas-wrap,
.room-tricks .lesson-card video.lesson-still{border-radius:0;box-shadow:inset 0 0 0 1px var(--gb-line-soft)}
.room-tricks .lesson-card video.lesson-still{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.room-tricks .lesson-card .kicker{
  padding:var(--s-3) 0 0;margin:0;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);color:var(--gb-mute);
}
.room-tricks .lesson-card h2{margin:.2rem 0 .3rem;font-size:var(--t-md);letter-spacing:var(--tr-head)}
.room-tricks .lesson-card p{margin:0}

/* ── CINEMA — "a screen in a dark room" for cartoons.html.
   The house ground, a floor pool of light, a matte-black bezel with
   one hairline. The iframe never overflows: aspect-ratio holds it. ── */
.gb-cinema{
  position:relative;padding:clamp(3rem,9vh,6rem) 0 clamp(4rem,10vh,7rem);
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(232,95,44,.07) 0%,transparent 62%),
    var(--gb-black);
}
.gb-cinema-room{width:var(--shell);margin-inline:auto;display:grid;justify-items:center;gap:var(--s-6)}
.gb-cinema-frame{
  position:relative;width:100%;max-width:1180px;
}
.gb-cinema-bezel{
  position:relative;padding:clamp(.55rem,1.6vw,1.3rem);
  background:linear-gradient(155deg,#141414,#050505);
  border-radius:clamp(14px,1.8vw,26px);
  box-shadow:
    0 70px 140px -50px rgba(0,0,0,.92),
    inset 0 0 0 1px rgba(239,235,227,.09),
    inset 0 1px 0 rgba(239,235,227,.05);
}
.gb-cinema-screen{
  position:relative;width:100%;aspect-ratio:16/10;
  border-radius:clamp(8px,1vw,14px);overflow:hidden;
  background:#fff9ef;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.gb-cinema-screen iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity var(--d-lg) var(--e-out);z-index:2;
}
.gb-cinema-screen iframe.is-ready{opacity:1}
.gb-cinema-fallback{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:var(--s-5);text-align:center;
  background:linear-gradient(180deg,rgba(23,25,45,.08),rgba(23,25,45,.8)),
             url("../../stills/body-buddies-hero.webp") center/cover no-repeat;
  color:#fff9ef;
}
.gb-cinema-fallback span{
  display:block;margin:0 0 var(--s-4);font-family:var(--f-display);
  font-size:clamp(1.8rem,7vw,4rem);font-weight:800;letter-spacing:-.03em;
  text-shadow:0 3px 24px rgba(23,25,45,.7);
}
.gb-cinema-fallback a{
  display:inline-block;min-height:48px;padding:.9rem 1.4rem;border-radius:999px;
  background:#17192d;color:#fff9ef;text-decoration:none;font-weight:700;
}
/* The original child site's phone hero controls end at 440px. */
@media (max-width:640px){.gb-cinema-screen{aspect-ratio:auto;min-height:480px}}
.gb-cinema-glow{
  position:absolute;left:6%;right:6%;bottom:-2.6rem;height:3rem;z-index:-1;
  background:radial-gradient(ellipse at 50% 0%,rgba(232,95,44,.22) 0%,transparent 72%);
  filter:blur(4px);pointer-events:none;
}
.gb-cinema-caption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem var(--s-4);
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gb-mute);
}
.gb-cinema-caption a{color:var(--gb-bone-soft);text-decoration:none;border-bottom:1px solid var(--gb-line-strong);padding-bottom:.1rem}
.gb-cinema-caption a:hover{color:var(--gb-ember);border-color:var(--gb-ember)}

/* ── LEGAL — quiet, confident type for privacy.html. Real measure,
   numbered clauses via .gb-run, no visual noise. ─────────────────── */
.gb-legal{width:min(64ch,100% - var(--gutter) * 2);margin-inline:auto}
.gb-legal .gb-kicker{margin-bottom:var(--s-3)}
.gb-legal h1{
  margin:0 0 var(--s-4);font-family:var(--f-display);font-weight:520;
  font-size:var(--t-xl);line-height:var(--lh-head);letter-spacing:var(--tr-mega);color:var(--gb-bone);
}
.gb-legal .gb-lede{font-size:var(--t-md);margin:0 0 var(--s-3)}
.gb-legal .gb-updated{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gb-mute);margin:0 0 var(--s-8);
}
.gb-legal h2{
  margin:0 0 var(--s-3);font-family:var(--f-display);font-weight:520;
  font-size:var(--t-md);letter-spacing:var(--tr-head);color:var(--gb-bone);
}
.gb-legal p{margin:0 0 var(--s-4);color:var(--gb-bone-soft);line-height:var(--lh-body);font-size:var(--t-body)}
.gb-legal ul{margin:0 0 var(--s-4);padding-left:1.2rem;color:var(--gb-bone-soft);line-height:var(--lh-body)}
.gb-legal li{margin:0 0 var(--s-2)}
.gb-legal a{color:var(--gb-bone-soft);border-bottom:1px solid var(--gb-line-strong);text-decoration:none}
.gb-legal a:hover{color:var(--gb-ember);border-color:var(--gb-ember)}
.gb-legal{counter-reset:gb-clause}
.gb-legal .gb-clause{padding:var(--s-7) 0;border-top:1px solid var(--gb-line-soft);counter-increment:gb-clause}
.gb-legal .gb-clause:first-of-type{border-top:1px solid var(--gb-line);margin-top:var(--s-7)}
.gb-legal .gb-clause::before{
  content:counter(gb-clause,decimal-leading-zero);
  display:block;margin:0 0 var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);color:var(--gb-ember);
}
.gb-legal .gb-clause h2{margin-top:0}
.gb-legal .gb-clause:last-of-type p:last-child{margin-bottom:0}

/* ── PRIVACY / CLAUDINE billboard, desaturated to read as quiet
   rather than a cheap band. ──────────────────────────────────────── */
.gb-billboard--quiet .film-el,
.gb-billboard--quiet video,
.gb-billboard--quiet img{filter:saturate(.22) brightness(.62)}
.gb-billboard--quiet .shade{
  background:
    linear-gradient(180deg,rgba(7,8,10,.35) 0%,rgba(7,8,10,.55) 55%,var(--gb-black) 96%)!important;
}

/* ── CLAUDINE PROFILE — the identity chapter under the billboard.
   Portrait + copy, no card, no border. Tags read as a mono credit
   line, not a row of pill boxes. ─────────────────────────────────── */
.claudine-profile{
  width:var(--shell);margin-inline:auto;
  padding-block:var(--section-y) 0;
  display:grid;gap:var(--s-7);
}
.claudine-profile img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md)}
.claudine-profile > div{display:grid;gap:var(--s-4);align-content:start}
.claudine-profile .ai{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gb-mute);margin:0;
  display:flex;align-items:center;gap:var(--s-3);
}
.claudine-profile .ai::before{content:"";width:2.2rem;height:1px;background:var(--gb-ember);flex:none}
.claudine-profile h2{
  margin:0;font-family:var(--f-display);font-weight:520;font-size:var(--t-xl);
  line-height:var(--lh-head);letter-spacing:var(--tr-mega);color:var(--gb-bone);text-wrap:balance;
}
.claudine-profile > div > p{margin:0;color:var(--gb-bone-soft);line-height:var(--lh-body);font-size:var(--t-body);max-width:52ch}
.claudine-tags{display:flex;flex-wrap:wrap;gap:var(--s-2) 0;margin:var(--s-2) 0 0}
.claudine-tags span{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gb-bone-soft);padding:0 var(--s-3);
}
.claudine-tags span:first-child{padding-left:0}
.claudine-tags span + span{border-left:1px solid var(--gb-line-strong)}
.claudine-profile .plays{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-3) 0 0}
@media (min-width:860px){
  .claudine-profile{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .gb-cinema-bezel,.gb-cinema-screen{transition:none!important}
}

/* FINISH PASS · 2026-09-07 — on a phone the trail's copy-me prompts scrolled
   sideways inside their own box, so every line stopped mid-sentence at the
   right edge. A prompt has to be readable in one look before it is copied. */
@media (max-width:640px){
  .gb-code{white-space:pre-wrap;overflow-x:visible}
  .gb-code code{white-space:pre-wrap;word-break:break-word}
}

/* FINISH PASS · 2026-09-07 — at 390 the funny hero eyebrow wrapped onto a
   second line and sat across the horizon of the photograph. A kicker is a
   one-line label: it is tightened just enough to hold one line on a phone. */
@media (max-width:420px){
  .room-funny .billboard .kicker{font-size:.62rem;letter-spacing:.17em}
}