/* One type scale and one anchor for the copy of every chapter (integration).
   The chapters were built in parallel and each picked its own position and size (title 36-66 px, copy
   bottom 60-135 px or vertically centred). On desktop they now share: bottom-left anchor, the same
   title / body / kicker. The #scenes-ui prefix outranks each chapter's own scoped classes.
   Phones keep each chapter's own layout (the copy sits where that scene leaves room), but share sizes. */
@media (min-width: 641px) and (min-height: 501px) {
  #scenes-ui .hello-copy,
  #scenes-ui .dn-copy,
  #scenes-ui .fl-copy,
  #scenes-ui .chx:not(.portrait):not(.short) .chx-copy,
  #scenes-ui .shd-copy {
    left: calc(var(--sal) + max(56px, 6vw));
    right: auto;
    top: auto;
    bottom: calc(var(--sab) + clamp(112px, 14vh, 140px));
  }
  #scenes-ui .shd-copy { transform: none; width: min(520px, 40vw); }
  #scenes-ui .shd-contact { margin-top: 30px; }

  #scenes-ui .hello-title,
  #scenes-ui .dn-title,
  #scenes-ui .fl-t,
  #scenes-ui .chx-title,
  #scenes-ui .shd-title {
    font-weight: 200;
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .fl-t { margin-bottom: 14px; }

  #scenes-ui .hello-body,
  #scenes-ui .dn-body,
  #scenes-ui .fl-p,
  #scenes-ui .chx-body,
  #scenes-ui .shd-body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, .52);
  }
  #scenes-ui .hello-body,
  #scenes-ui .dn-body,
  #scenes-ui .chx-body,
  #scenes-ui .shd-body { margin-top: 14px; }

  /* (20 Oct) 11 px, as on phones (it was 10.5: five reviews flagged the desktop small caps); .2em keeps its width */
  #scenes-ui .fl-k,
  #scenes-ui .chx-kick,
  #scenes-ui .shd-kick {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 14px;
  }
}
/* phones (portrait): same title and body sizes everywhere, and every copy block ends at least 112 px
   above the bottom edge (the core's "0N / 05 · hint" counter occupies the bottom ~94 px) */
@media (max-width: 640px) {
  #scenes-ui .fl-copy { bottom: calc(var(--sab) + 112px); }
  #scenes-ui .shd-contact { bottom: calc(var(--sab) + 112px); }
  #scenes-ui .hello-title, #scenes-ui .dn-title, #scenes-ui .fl-t, #scenes-ui .chx-title, #scenes-ui .shd-title {
    font-weight: 200; font-size: min(30px, 7.8vw); line-height: 1.08; letter-spacing: -0.02em; color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .hello-body, #scenes-ui .dn-body, #scenes-ui .fl-p, #scenes-ui .chx-body, #scenes-ui .shd-body {
    font-size: 14.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .54);
  }
}
/* short landscape phones: same sizes everywhere */
@media (max-height: 500px) and (min-width: 641px) {
  #scenes-ui .hello-title, #scenes-ui .dn-title, #scenes-ui .fl-t, #scenes-ui .chx-title, #scenes-ui .shd-title {
    font-weight: 200; font-size: 24px; line-height: 1.08; letter-spacing: -0.015em; color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .hello-body, #scenes-ui .dn-body, #scenes-ui .fl-p, #scenes-ui .chx-body, #scenes-ui .shd-body {
    font-size: 13.5px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .54);
  }
}

/* polish: on 360-380 px phones hello's body stays at 2 lines (its second line is left out there) */
@media (max-width: 380px) {
  #scenes-ui .hello-ln.b2 { display: none; }
}
/* and on every portrait phone it ends >= 128 px above the bottom (clear of the counter) */
@media (max-width: 640px) {
  #scenes-ui .hello-copy { bottom: calc(var(--sab) + 128px); }
}

/* integration (v3): the four newer modules join the same scale, so neither track changes type between scenes.
   Before: griffin / prompt / orb (PROJECTS) and toolbox (THE STORY) had their own 36 px / weight 220 / .62 titles,
   15.5 px / 350 bodies and a desktop anchor of 56 px left / 60 px bottom, while ClipHub next to them used the
   48 px / 200 / .60 scale at max(56px, 6vw) / clamp(112px, 14vh, 140px): the copy jumped in every glass wipe
   between ClipHub and Griffin. Each module re-measures its copy on enter / resize / fonts.ready (the orb, griffin,
   prompt and toolbox place their scene around it), so only the sizes and the anchor change here.
   toolbox keeps its copy at the top (its blocks pile up on the floor), but on the same left edge. */
@media (min-width: 641px) and (min-height: 501px) {
  #scenes-ui .gg:not(.portrait):not(.short) .gg-copy,
  #scenes-ui .pgx:not(.portrait):not(.short) .pgx-copy,
  #scenes-ui .orbx:not(.portrait):not(.short) .orbx-copy {
    left: calc(var(--sal) + max(56px, 6vw));
    right: auto;
    top: auto;
    bottom: calc(var(--sab) + clamp(112px, 14vh, 140px));
  }
  #scenes-ui .tbx:not(.portrait):not(.short) .tbx-copy { left: calc(var(--sal) + max(56px, 6vw)); }
  #scenes-ui .gg-title, #scenes-ui .pgx-title, #scenes-ui .tbx-title, #scenes-ui .orbx-title {
    font-weight: 200;
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .gg-body, #scenes-ui .pgx-body, #scenes-ui .tbx-body, #scenes-ui .orbx-body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, .52);
    margin-top: 14px;
  }
  #scenes-ui .gg-kick, #scenes-ui .pgx-kick, #scenes-ui .tbx-kick, #scenes-ui .orbx-kick {
    font-size: 11px; /* (20 Oct: was 10.5) */
    font-weight: 600;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 14px;
  }
}
@media (max-width: 640px) {
  #scenes-ui .gg-title, #scenes-ui .pgx-title, #scenes-ui .tbx-title, #scenes-ui .orbx-title {
    font-weight: 200; font-size: min(30px, 7.8vw); line-height: 1.08; letter-spacing: -0.02em; color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .gg-body, #scenes-ui .pgx-body, #scenes-ui .tbx-body, #scenes-ui .orbx-body {
    font-size: 14.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .54);
  }
}
@media (max-height: 500px) and (min-width: 641px) {
  #scenes-ui .gg-title, #scenes-ui .pgx-title, #scenes-ui .tbx-title, #scenes-ui .orbx-title {
    font-weight: 200; font-size: 24px; line-height: 1.08; letter-spacing: -0.015em; color: rgba(255, 255, 255, .6);
  }
  #scenes-ui .gg-body, #scenes-ui .pgx-body, #scenes-ui .tbx-body, #scenes-ui .orbx-body {
    font-size: 13.5px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .54);
  }
}
/* integration: a title that needs two lines breaks evenly ("200+ players, / one winner", not "... one / winner") */
#scenes-ui .hello-title, #scenes-ui .dn-title, #scenes-ui .fl-t, #scenes-ui .chx-title, #scenes-ui .shd-title,
#scenes-ui .gg-title, #scenes-ui .pgx-title, #scenes-ui .tbx-title, #scenes-ui .orbx-title { text-wrap: balance; }
/* and bodies avoid a one-word last line ("Say / hi." on a 360 px phone) */
#scenes-ui .hello-body, #scenes-ui .dn-body, #scenes-ui .fl-p, #scenes-ui .chx-body, #scenes-ui .shd-body,
#scenes-ui .gg-body, #scenes-ui .pgx-body, #scenes-ui .tbx-body, #scenes-ui .orbx-body { text-wrap: pretty; }

/* ONE type scale and copy anchor for the seven story chapters. The story scenes put
   these shared classes on their copy elements: .ch-copy (the block), .ch-kick, .ch-title, .ch-body. Until a scene adds
   them they do nothing. The #scenes-ui prefix outranks each scene's own rules. The values are the ones the four
   project scenes already use (gg / pgx / orbx above), so both tracks read as one site. The older rules stay. */
@media (min-width: 641px) and (min-height: 501px) {
  #scenes-ui .ch-copy {
    left: calc(var(--sal) + max(56px, 6vw));
    right: auto;
    top: auto;
    bottom: calc(var(--sab) + clamp(112px, 14vh, 140px));
    transform: none;
    max-width: min(560px, 44vw);
  }
  #scenes-ui .ch-kick {
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; /* (20 Oct: was 10.5 / .22em) */
    color: rgba(255, 255, 255, .55); /* (round 15: .45 -> .55, 4.5:1 on 05's day) */
    margin: 0 0 14px;
  }
  #scenes-ui .ch-title {
    font-weight: 200;
    font-size: clamp(34px, 3.3vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .6);
    text-wrap: balance;
  }
  #scenes-ui .ch-body {
    font-size: 16px; font-weight: 300; line-height: 1.55;
    color: rgba(255, 255, 255, .52);
    margin-top: 14px;
    text-wrap: pretty;
  }
}
/* portrait phones: the projects' top anchor (kicker at about y 80, title about y 106 at 390 x 844) */
@media (max-width: 640px) {
  #scenes-ui .ch-copy {
    top: calc(var(--sat) + 72px);
    bottom: auto;
    left: calc(var(--sal) + 24px);
    right: calc(var(--sar) + 24px);
    max-width: none;
  }
  #scenes-ui .ch-kick {
    font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; /* no small caps under 11 px on a phone */
    color: rgba(255, 255, 255, .55); /* (round 15: .46 -> .55) */
    margin: 0 0 12px;
  }
  #scenes-ui .ch-title {
    font-weight: 200; font-size: min(30px, 7.8vw); line-height: 1.08; letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .6); text-wrap: balance;
  }
  #scenes-ui .ch-body {
    font-size: 14.5px; font-weight: 300; line-height: 1.5;
    color: rgba(255, 255, 255, .54);
    margin-top: 12px; text-wrap: pretty;
  }
}
/* short landscape phones: sizes only (each scene keeps its own anchor there) */
@media (max-height: 500px) and (min-width: 641px) {
  #scenes-ui .ch-title { font-weight: 200; font-size: 24px; line-height: 1.08; letter-spacing: -0.015em; color: rgba(255, 255, 255, .6); }
  #scenes-ui .ch-body { font-size: 13.5px; font-weight: 300; line-height: 1.45; color: rgba(255, 255, 255, .54); }
  #scenes-ui .ch-kick { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
}
/* (round 32) 06's solved cards take the chrome's two-tone focus ring (their 1 px ring at 72 % white, on a card the payoff keeps at
   50-70 %, was close to the cards' own rims), and the focused card steps up to full strength while it has the focus */
#scenes-ui .sx-card.on:focus-visible { outline: 1px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(17, 17, 19, .55), 0 0 0 3px rgba(255, 255, 255, .88), inset 0 1px 0 rgba(255, 255, 255, .05); }
#scenes-ui .sx-cw:has(> .sx-card.on:focus-visible) { opacity: 1 !important; }