/* ═══════════════════════════════════════════════════════════════
   pages.css — page-specific layouts (home, media, live, etc.)
   ═══════════════════════════════════════════════════════════════ */

@layer pages {

  /* ─────────────────────────────────────────────────────────
     HOME — type-led hero w/ reactive logo
     ─────────────────────────────────────────────────────── */
  .home-hero {
    position: relative;
    padding: var(--s-4) 0 var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .home-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .home-eyebrow-row .stamp {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .home-tagline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: 0 0 var(--s-3);
    text-wrap: balance;
  }
  .home-tagline .accent {
    color: var(--accent);
    text-shadow: 0 0 32px var(--accent-glow);
    font-style: italic;
    font-weight: 400;
  }
  .home-tagline .strike {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-weight: 400;
    text-shadow: none;
  }

  .home-intro {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 var(--s-4);
  }
  .home-intro strong {
    color: var(--text-primary);
    font-weight: 500;
  }

  .home-cta-row {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
  }

  /* signal panel: telemetry card grid */
  .signal-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-4);
  }
  .signal {
    grid-column: span 4;
    padding: var(--s-4);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color var(--t-fast), transform var(--t-fast);
    /* Promote cards to their own compositor layer up front. Without
       this, hover would force the browser to allocate a new layer + do
       a fresh paint of the card's contents on EVERY mouseenter (the
       lag spike you'd feel on hover). With it, the hover is just a
       cheap transform + border swap on an already-composited layer.
       contain: layout paint keeps re-paints scoped to the card. */
    transform: translateZ(0);
    contain: layout paint;
  }
  .signal.wide   { grid-column: span 8; }
  .signal.tall   { grid-row: span 2; }
  .signal:hover  { border-color: var(--accent); transform: translate3d(0, -2px, 0); }

  .signal-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .signal-eyebrow .badge {
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    border: 0.5px solid color-mix(in oklch, var(--accent) 40%, transparent);
  }
  .signal h3 {
    font-size: 19px;
    line-height: 1.15;
    margin: var(--s-3) 0 var(--s-2);
    letter-spacing: -0.02em;
    font-weight: 500;
    color: var(--text-primary);
  }
  .signal p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
  }
  .signal-foot {
    margin-top: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
  }
  .signal-foot .arrow {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 0.5px solid var(--line-edge);
    display: flex; align-items: center; justify-content: center;
    /* Explicit property list — `all` makes the browser watch every
       computed style for changes, which is more expensive than just
       the three properties this transition actually animates. */
    transition: border-color var(--t-fast),
                background    var(--t-fast),
                color         var(--t-fast);
  }
  .signal:hover .signal-foot .arrow {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* live signal — special treatment */
  .signal.live-signal {
    background:
      radial-gradient(circle at 80% 0%, var(--accent-soft), transparent 60%),
      var(--bg-pane);
    border-color: color-mix(in oklch, var(--accent) 30%, var(--line-edge));
  }
  .signal.live-signal .signal-eyebrow .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .home-readout {
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 0.5px solid var(--line-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6) var(--s-7);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .home-readout dt { color: var(--text-muted); margin-bottom: 4px; opacity: 0.7; }
  .home-readout dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
  }

  /* ─────────────────────────────────────────────────────────
     LIVE / NOW PLAYING PAGE
     ─────────────────────────────────────────────────────── */
  .live-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-3);
    flex-wrap: wrap;
  }
  /* Right side of the live page header — holds either the live viewer
     count (when broadcasting) or the compact schedule (when offline). */
  .live-page-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
  }
  .live-head-schedule {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .live-head-schedule-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .live-head-schedule-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  .live-head-schedule-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
  }
  .live-head-schedule-row .day {
    font-size: 9.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
    text-transform: uppercase;
    padding: 3px 7px;
    border: 0.5px solid var(--accent);
    border-radius: var(--r-1, 4px);
    line-height: 1;
  }
  .live-head-schedule-row .time {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-mono);
  }
  .live-title {
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 0.95;
    margin: var(--s-2) 0 0;
    letter-spacing: -0.03em;
  }
  .live-title .accent { color: var(--accent); text-shadow: 0 0 24px var(--accent-glow); }

  /* Flex layout (was grid) so both columns stretch to the same height
     and the stream frame can grow to match the side column's content
     instead of leaving negative space below itself. */
  .live-hero {
    display: flex;
    align-items: stretch;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
  }
  .live-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-width: 0;
  }
  .live-side {
    width: 320px;
    flex-shrink: 0;
  }
  /* On narrower viewports the side column collapses under the player. */
  @media (max-width: 1100px) {
    .live-hero { grid-template-columns: 1fr; }
  }
  .stream-frame {
    /* Drop the fixed 16:9 lock — flex:1 inside .live-main makes the
       frame stretch to match the side column's content height. The min
       keeps a sensible baseline; YouTube's player letterboxes inside if
       the frame ends up taller than 16:9. */
    flex: 1;
    min-height: 360px;
    border-radius: var(--r-4);
    background:
      radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%),
      linear-gradient(135deg, rgba(255,255,255,0.04), transparent),
      var(--bg-base);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .stream-frame .placeholder {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .stream-frame .play-orb {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--bg-pane-strong);
    border: 0.5px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--s-3);
    box-shadow: 0 0 40px var(--accent-glow);
    color: var(--accent);
  }

  .live-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
  }
  /* Lighter side panels — no glass background, just a hairline rule on top
     to separate the sections. The page reads less heavy than before, more
     like the media page. */
  .live-card {
    padding: var(--s-3) 0 var(--s-3);
    border-top: 0.5px solid var(--line-hairline, var(--line-edge));
  }
  .live-card:first-child { border-top: none; padding-top: 0; }

  /* Recent-broadcasts: YouTube-playlist-style scrollable column. Each row
     is a thumb + title + relative-time, click loads it in the main player. */
  .live-card-broadcasts h4 { margin-bottom: var(--s-2); }
  .broadcast-scroll {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  /* Slim themed scrollbar */
  .broadcast-scroll::-webkit-scrollbar { width: 6px; }
  .broadcast-scroll::-webkit-scrollbar-thumb {
    background: var(--line-edge);
    border-radius: 3px;
  }
  .broadcast-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  .broadcast-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--s-2);
    align-items: center;
    padding: 6px;
    background: transparent;
    border: 0.5px solid transparent;
    border-radius: var(--r-2);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: background var(--t-fast), border-color var(--t-fast);
  }
  .broadcast-row:hover {
    background: var(--bg-pane-strong, rgba(255,255,255,0.04));
    border-color: var(--line-hairline, var(--line-edge));
  }
  .broadcast-row.active {
    border-color: var(--accent);
    background: var(--bg-pane-strong, rgba(255,255,255,0.04));
  }
  .broadcast-thumb {
    width: 84px;
    height: 47px;
    border-radius: var(--r-1);
    background-color: var(--bg-base);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  .broadcast-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .broadcast-title {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .broadcast-time {
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
  }

  /* Live page head — actions cluster (live-meta + tip button) on the right */
  .live-page-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .live-tip-btn {
    text-decoration: none;
    white-space: nowrap;
  }
  .live-side h4 {
    font-size: 14px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0 0 var(--s-3);
    font-weight: 500;
  }

  /* Offline state in the now-playing panel — muted art swatch + plain text.
     No fake track names, no animated VU bars. */
  .now-playing-art-offline {
    background: linear-gradient(135deg, var(--bg-pane-strong, rgba(0,0,0,0.35)), rgba(0,0,0,0.15));
    opacity: 0.7;
  }
  .now-playing-offline .now-playing-text .track {
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 12px;
  }

  /* Live featured row — mirrors .media-featured-row so the SocialRail sits
     to the right of the stream window. */
  .live-featured-row {
    display: flex;
    align-items: stretch;
    gap: var(--s-5);
    margin-bottom: var(--s-4);
  }
  .live-featured-row .live-hero {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }
  @media (max-width: 720px) {
    .live-featured-row { flex-direction: column; }
  }

  .now-playing {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .now-playing-art {
    width: 56px; height: 56px;
    border-radius: var(--r-2);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .now-playing-art::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
  }
  .now-playing-text { min-width: 0; flex: 1; }
  .now-playing-text .track {
    font-size: 14px; font-weight: 500;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .now-playing-text .by {
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mono);
  }

  .vu-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: var(--s-3);
  }
  .vu-bars span {
    flex: 1;
    background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 35%, transparent));
    border-radius: 1px;
    animation: vu 1.2s ease-in-out infinite;
    transform-origin: bottom;
  }
  .vu-bars span:nth-child(1) { animation-delay: 0.0s; }
  .vu-bars span:nth-child(2) { animation-delay: 0.1s; }
  .vu-bars span:nth-child(3) { animation-delay: 0.25s; }
  .vu-bars span:nth-child(4) { animation-delay: 0.05s; }
  .vu-bars span:nth-child(5) { animation-delay: 0.18s; }
  .vu-bars span:nth-child(6) { animation-delay: 0.32s; }
  .vu-bars span:nth-child(7) { animation-delay: 0.12s; }
  .vu-bars span:nth-child(8) { animation-delay: 0.22s; }
  @keyframes vu {
    0%, 100% { transform: scaleY(0.25); }
    50%      { transform: scaleY(1.0); }
  }
  [data-motion="still"] .vu-bars span { animation: none; transform: scaleY(0.6); }

  /* Schedule rows: day chip on the left, title + time stacked on the right.
     Two-row grid with the day spanning both rows so long titles never crowd
     the time underneath. Reads cleanly even in the narrow side column. */
  .schedule-list { display: flex; flex-direction: column; gap: var(--s-2); }
  .schedule-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    row-gap: 2px;
    align-items: start;
    padding: var(--s-2) 0;
    border-bottom: 0.5px solid var(--line-hairline);
  }
  .schedule-row:last-child { border-bottom: 0; }
  .schedule-row .day {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
    text-transform: uppercase;
    padding: 4px 8px;
    border: 0.5px solid var(--accent);
    border-radius: var(--r-1, 4px);
    line-height: 1;
    min-width: 44px;
    text-align: center;
  }
  .schedule-row .title {
    grid-column: 2;
    grid-row: 1;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
  }
  .schedule-row .time {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-mono);
  }

  /* ─────────────────────────────────────────────────────────
     MEDIA PAGE
     ─────────────────────────────────────────────────────── */
  .featured-card {
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    background:
      radial-gradient(circle at 12% 0%, var(--accent-soft), transparent 50%),
      var(--bg-pane);
  }
  .featured-card .release-title {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 0.95;
    margin: var(--s-2) 0 var(--s-2);
    letter-spacing: -0.03em;
  }

  .platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }

  .release-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-5);
  }
  .release-row {
    display: grid;
    grid-template-columns: 80px 1fr 120px auto;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-3);
    border: 0.5px solid transparent;
    transition: border-color var(--t-fast), background var(--t-fast);
    align-items: center;
  }
  .release-row:hover {
    border-color: var(--line-edge);
    background: rgba(255,255,255,0.02);
  }
  .release-cover {
    aspect-ratio: 1;
    border-radius: var(--r-2);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    position: relative;
    overflow: hidden;
  }
  .release-cover::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 65%);
  }
  .release-row .title {
    font-size: 17px;
    color: var(--text-primary);
    font-weight: 500;
  }
  .release-row .descriptor {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .release-row .date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: var(--tracking-mono);
  }

  /* page header */
  .page-head {
    margin-bottom: var(--s-4);
  }
  .page-head h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 0.95;
    margin: var(--s-2) 0 var(--s-3);
    letter-spacing: -0.03em;
  }
  .page-head .lede {
    max-width: 640px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* glossary list */
  .glossary-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  .glossary-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    align-items: start;
    transition: border-color var(--t-fast);
  }
  .glossary-row:hover { border-color: var(--accent); }
  .glossary-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
    padding-top: 4px;
  }
  .glossary-term {
    font-size: 17px; font-weight: 500;
    margin: 0 0 4px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }
  .glossary-def {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
  }
  .uses-list {
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .uses-list li {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 0.5px solid var(--line-hairline);
    display: flex; align-items: center; gap: 10px;
  }
  .uses-list li::before {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    flex-shrink: 0;
  }
  .uses-list li:last-child { border-bottom: 0; }
  @media (max-width: 880px) {
    .glossary-list { grid-template-columns: 1fr; }
  }

  .foot {
    margin: var(--s-5) 0 var(--s-3);
    padding-top: var(--s-3);
    border-top: 0.5px solid var(--line-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .foot-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
  .foot-links a { transition: color var(--t-fast); }
  .foot-links a:hover { color: var(--accent); }

  /* ─────────────────────────────────────────────────────────
     RESPONSIVE
     ─────────────────────────────────────────────────────── */
  @media (max-width: 880px) {
    .app { grid-template-columns: 1fr; }
    .rail {
      position: static;
      flex-direction: row;
      align-items: center;
      width: auto;
      margin: var(--s-3);
      padding: var(--s-3);
      border-radius: var(--r-3);
      gap: var(--s-3);
    }
    .rail-logo { width: 36px; height: 36px; margin: 0; }
    .wordmark { padding: 0; font-size: 26px; }
    .nav { flex-direction: row; flex: 1; margin: 0; gap: 4px; overflow-x: auto; }
    .nav-item { padding: 8px 12px; }
    .live-pip { display: none; }
    .main { padding: 0 var(--s-4) var(--s-7); grid-column: 1; }
    .hud { margin: var(--s-3); }
    .signal-grid { grid-template-columns: 1fr; }
    .signal, .signal.wide { grid-column: span 1; }
    .live-hero { grid-template-columns: 1fr; }
    .release-row { grid-template-columns: 64px 1fr; }
    .release-row .date, .release-row .arrow { display: none; }
  }

  /* ─────────────────────────────────────────────────────────
     HOME (logo-led variant) — portal beside compact content+cards
     The portal is the centerpiece; the right column stacks
     headline → intro → CTAs → signal cards so empty space
     beside the portal's lower half gets used.
     ─────────────────────────────────────────────────────── */
  .home-hero-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-7);
    flex-wrap: wrap;
    margin: var(--s-4) 0 0;
  }

  .home-hero-side {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }

  /* Inside the narrower hero side column the 12-col signal grid is
     too tight, so drop to a 6-col layout: default cards span half,
     "wide" / live cards span full width. */
  .home-hero-side .signal-grid {
    margin-top: var(--s-2);
    grid-template-columns: repeat(6, 1fr);
  }
  .home-hero-side .signal             { grid-column: span 3; min-height: 120px; padding: var(--s-3); }
  .home-hero-side .signal.wide        { grid-column: span 6; }
  .home-hero-side .signal.live-signal { grid-column: span 6; }
  .home-hero-side .signal h3          { font-size: 18px; }
  .home-hero-side .signal p           { font-size: 12.5px; }
}

/* ──────────────────────────────────────────────────────────────────
 * PHONE (≤600px) — desktop-style layout, just compressed
 * ──────────────────────────────────────────────────────────────────
 * The 880px tablet breakpoint above collapses the vertical rail to
 * a horizontal nav at the top, but the user wants the desktop layout
 * preserved on phones: vertical sidebar on the left, portal + cards
 * on the right (stacked underneath each other when narrow), ticker
 * pinned at the bottom of <main> as usual.
 *
 * This block UNDOES the rail-row collapse and re-pins the rail as a
 * narrow vertical capsule. Wordmark hides; logo + nav items stay.
 * Hero stacks portal-above-cards. Inline <span style="font-size:Npx">
 * bombs in the headline copy get clamped via !important. */
@media (max-width: 600px) {
  /* ── grid: narrow gutter for the fixed rail ──────────────────── */
  .app {
    grid-template-columns: 88px 1fr;
    gap: 0;
  }

  /* ── rail: revert to fixed vertical, narrow ──────────────────── */
  .rail {
    position: fixed;
    left: var(--s-2);
    top: var(--s-2);
    bottom: var(--s-2);
    width: 76px;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: var(--s-2);
    border-radius: var(--r-3);
    gap: var(--s-1);
  }
  .rail-logo {
    width: 36px; height: 36px;
    margin: 0 0 var(--s-2);
  }
  .wordmark { display: none; }
  .nav {
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin: 0;
    gap: 4px;
    overflow-x: visible;
    overflow-y: auto;
  }
  .nav-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
  }
  /* Force the label span to wrap inside the narrow rail. min-width: 0
     overrides the flex-item intrinsic size that otherwise locks the
     span to its longest unbreakable word ("GLOSSARY" at 9.5px mono is
     wider than 60px). */
  .nav-item > span {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
  }
  .live-pip { display: none; }

  /* ── main: reset grid-column from the 880px row-layout rule ── */
  .main {
    padding: 0 var(--s-3) var(--s-7);
    grid-column: 2;
  }

  /* ── HUD bar: tight, allow wrap ──────────────────────────────── */
  .hud {
    margin: var(--s-2) 0;
    padding: var(--s-2) var(--s-3);
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  .hud * { font-size: 10px !important; }

  /* ── home hero: portal stacks above the side column ─────────── */
  .home-hero-row {
    flex-direction: column;
    gap: var(--s-3);
  }
  .home-hero-side {
    min-width: 0;
    width: 100%;
  }
  .hero-portal-wrap {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto;
  }
  /* folded-space.css has @media (max-width:720px) { .fs-stage {
     aspect-ratio: 4/5; min-height: 480px } } — at 4:5 aspect with
     480px min-height the canvas is forced to 384px wide, which
     overflows a 360px phone viewport. Cap both at <=600px. */
  .fs-stage {
    min-height: 200px !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
  }

  /* ── headline: clamp inline-span font-size bombs ─────────────── */
  .home-tagline span[style*="font-size"] {
    font-size: clamp(20px, 6.8vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .home-tagline {
    font-size: clamp(20px, 6.8vw, 44px);
    line-height: 1.05;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── eyebrow / intro / CTAs ──────────────────────────────────── */
  .home-eyebrow-row { flex-wrap: wrap; gap: 4px var(--s-2); }
  .home-eyebrow-row .eyebrow,
  .home-eyebrow-row .stamp { font-size: 10px; }
  .home-intro { font-size: 12.5px; line-height: 1.5; }
  .home-cta-row { flex-wrap: wrap; gap: var(--s-2); }

  /* ── signal cards: single column, more compact ──────────────── */
  .home-hero-side .signal-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .home-hero-side .signal,
  .home-hero-side .signal.wide,
  .home-hero-side .signal.live-signal {
    grid-column: span 1;
    min-height: 76px;
    padding: var(--s-3);
  }
  .home-hero-side .signal h3 { font-size: 14px; }
  .home-hero-side .signal p  {
    font-size: 11.5px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  /* ── page heads: smaller, fluid title ───────────────────────── */
  .page-head h1 {
    font-size: clamp(28px, 8vw, 56px);
    line-height: 1.1;
  }
  .page-head .eyebrow { font-size: 10px; }
  .page-head .lede    { font-size: 13px; line-height: 1.5; }
}

/* ──────────────────────────────────────────────────────────────────
 * APPS PAGE — accordion stack
 * Each app is a full-width clickable header. Click expands the body
 * (media grid + markdown + CTA). Only one open at a time (handled
 * in JS); closed cards just show the header. Width-preset media
 * items lay out in a flex row, wrapping to a new line when they
 * exhaust the available space.
 * ──────────────────────────────────────────────────────────────── */
.apps-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 880px;
}

.app-card {
  padding: 0;
  overflow: hidden;
  /* Pre-promote so the chevron / expand transition stays smooth and
     hovering doesn't trigger a fresh layer allocation + paint. */
  transform: translateZ(0);
  contain: layout paint;
  transition: border-color var(--t-fast);
}
.app-card.open { border-color: var(--accent); }

.app-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background var(--t-fast);
}
.app-head:hover { background: rgba(255,255,255,0.02); }
.app-head:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }

.app-head-meta {
  grid-column: 1 / 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.app-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* About page — contact card on the left, social-link rail on the right.
   Drops to a stacked column on narrow screens. The card is allowed to
   grow but capped so very wide About pages don't stretch it absurdly. */
.about-contact-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}
.about-contact-card {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 540px;
}
.about-contact-row .social-rail {
  align-self: flex-start;
  padding-top: 0;
}
@media (max-width: 720px) {
  .about-contact-row { flex-direction: column; }
  .about-contact-row .social-rail {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Footnote on live-status cards explaining the 5-min cache window and
   pushing a Subscribe link as the canonical realtime alert channel.
   Reads as a small italic disclaimer; never grabs visual weight from
   the live indicator above it. */
.live-cache-disclaimer {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}
.live-cache-disclaimer a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.live-cache-disclaimer a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.live-cache-disclaimer-asterisk {
  color: var(--accent);
  margin-right: 2px;
  font-style: normal;
}
/* Brand portion of a gear/app eyebrow — rendered as neon-outlined text in
   the theme accent colour, so the manufacturer reads as a sign rather than
   an afterthought. Transparent fill + colored stroke + double glow shadow
   gives the classic neon outline. */
.gear-brand {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  text-shadow:
    0 0 4px var(--accent-glow),
    0 0 9px var(--accent-glow);
  letter-spacing: 0.18em;
  font-weight: 600;
  padding: 0 2px;
}
[data-mode="light"] .gear-brand {
  text-shadow:
    0 0 3px var(--accent-glow),
    0 0 6px var(--accent-glow);
}
.app-status {
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.app-title {
  grid-column: 1 / 2;
  grid-row: 2;
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.app-chevron {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform var(--t-fast), color var(--t-fast);
}
.app-card.open .app-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.app-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0 var(--s-5) var(--s-5);
  border-top: 0.5px solid var(--line-edge);
  margin-top: 0;
  padding-top: var(--s-4);
}

/* Media grid — flex row that wraps. Width classes set flex-basis so
   matching widths line up cleanly side-by-side. */
.app-media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.app-media-item {
  border-radius: var(--r-2);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 0.5px solid var(--line-edge);
}
.app-media-item img,
.app-media-item video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}
.app-media-full  { flex: 1 1 100%; }
.app-media-half  { flex: 1 1 calc(50%  - var(--s-3) / 2); min-width: 240px; }
.app-media-third { flex: 1 1 calc(33.333% - var(--s-3) * 2 / 3); min-width: 180px; }

.app-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
}

.app-cta-row {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--s-2);
}
.app-cta { text-decoration: none; }
.app-cta-soon {
  pointer-events: none;
  opacity: 0.65;
  background: var(--bg-pane);
  border: 0.5px dashed var(--line-edge);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 720px) {
  .app-head { padding: var(--s-3) var(--s-4); }
  .app-title { font-size: 20px; }
  .app-body { padding: var(--s-3) var(--s-4) var(--s-4); padding-top: var(--s-3); }
  .app-media-half  { flex: 1 1 100%; }
  .app-media-third { flex: 1 1 100%; }
}

/* ──────────────────────────────────────────────────────────────────
 * GEAR & GLOSSARY PAGE
 * Section headers above the gear accordion and the terms list. The
 * gear cards reuse the apps-page accordion (.app-card / .app-head /
 * .app-body) so we only need to style the bits that are unique to
 * gear: the two-column bullet grid + the closing-line typography.
 * ──────────────────────────────────────────────────────────────── */
.gg-section-h {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s-6) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 0.5px solid var(--line-edge);
  max-width: 880px;
}
.gear-section .gg-section-h:first-child,
.gear-section + .glossary-section .gg-section-h { margin-top: 0; }
.gear-section { margin-bottom: var(--s-7); }

/* Two-column bullet grid inside an open gear card. Lists on each side
   line up so headers and first bullets align horizontally. Stacks on
   narrow screens. */
.gear-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.gear-col-h {
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.gear-col-list {
  margin: 0;
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 14px;
}
.gear-col-list li::marker { color: var(--text-muted); }

.gear-closing {
  margin-top: 0;
  font-style: italic;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .gear-cols { grid-template-columns: 1fr; gap: var(--s-3); }
}