/* FS-33 — the ANTI·TUBE wall. BASE = the founder's binding prototype CSS, near-verbatim
   (docs/product/frontend/antitube-wall-prototype-v1.html); adaptations for real data below. */

/* The wordmark face: Clash Display (Indian Type Foundry via Fontshare), SELF-HOSTED under the ITF
   Free Font License v1.0 (100% free personal + commercial; the license copy + source URL live in
   this directory). Only the two used weights ship. Never hotlink the Fontshare CDN. */
@font-face{
  font-family:'Clash Display';
  src:url('/assets/fonts/clash-display-200.woff2') format('woff2');
  font-weight:200;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Clash Display';
  src:url('/assets/fonts/clash-display-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

  /* FS-33 amendment 2026-07-19 + the 2026-07-21 premium-editorial layer (founder-directed): ONE
     warm near-black, ONE accent (the REC signal red), Clash Display wordmark + Inter UI, frosted tile
     chrome. No neon, no pixel font, no scanlines. Motion law unchanged: the wordmark i-dot blink
     is the only looping DECORATIVE accent; the two FUNCTIONAL loops are the column `drift` (:43,
     guarded at :351) and the Ken-Burns poster pan (app.css, the active cueing poster). */
  :root{
    --bg:#0B0B0E;
    --ink:#F4F3EF;
    --ink-dim:rgba(244,243,239,.58);
    --ink-faint:rgba(244,243,239,.36);
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --rec:#E5484D;
    --tally:#E5484D;
    --panel:rgba(255,255,255,.045);
    --r-tile:14px;
    --r-pill:999px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --shadow-tile:0 12px 32px rgba(0,0,0,.42);
    --shadow-tile-hover:0 18px 48px rgba(0,0,0,.55);
    --chip-bg:rgba(12,12,16,.52);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    overflow:hidden;
  }
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  input{font:inherit;color:inherit}
  .mono{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.08em}

  /* ---------- THE WALL ---------- */
  .wall{
    position:fixed;inset:0;
    display:flex;gap:10px;padding:0 10px;
  }
  .col{flex:1;min-width:0;overflow:hidden;height:100vh}
  .track{
    display:flex;flex-direction:column;gap:10px;
    animation:drift var(--speed,60s) linear infinite;
    animation-direction:var(--dir,normal);
  }
  @keyframes drift{to{transform:translateY(-50%)}}
  .col:hover .track{animation-play-state:paused}

  .tile{
    position:relative;width:100%;
    aspect-ratio:var(--ar,16/10);
    border-radius:var(--r-tile);
    overflow:hidden;
    border:1px solid var(--line);
    background:#0e0d12;
    text-align:left;
    box-shadow:var(--shadow-tile);
    transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
    transform:translateZ(0);
    flex-shrink:0;
    display:block;
  }
  .tile:hover,.tile:focus-visible{
    transform:translateY(-3px);
    border-color:var(--line-strong);
    box-shadow:var(--shadow-tile-hover);
    z-index:5;
  }
  .tile:focus-visible{outline:2px solid var(--rec);outline-offset:2px}

  .poster{position:absolute;inset:0}

  /* SMPTE bars — "off-air" channels */
  .bars{
    position:absolute;inset:0;
    background:linear-gradient(90deg,
      #b5b5ad 0 14.28%,#b5b03a 0 28.57%,#3ab5ac 0 42.85%,
      #3ab53f 0 57.14%,#b03ab5 0 71.42%,#b53a3f 0 85.71%,#3a3fb5 0 100%);
    filter:saturate(.55) brightness(.55);
  }
  .bars::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
    background:linear-gradient(90deg,#101014 0 25%,#e8e6df 0 40%,#101014 0 60%,#26262c 0 100%);
  }

  .tile-tally{
    position:absolute;top:10px;right:10px;
    display:flex;align-items:center;gap:6px;
    font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink);
    background:var(--chip-bg);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);
    padding:5px 9px;border-radius:var(--r-pill);
    opacity:0;transition:opacity .18s var(--ease);
  }
  .tile-tally .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--rec);
    animation:blink 1.4s ease-in-out infinite;
  }
  @keyframes blink{50%{opacity:.35}}
  .tile:hover .tile-tally,.tile:focus-visible .tile-tally{opacity:1}

  .tile-info{
    position:absolute;left:0;right:0;bottom:0;
    /* Title and duration are sibling <span>s — INLINE boxes, on which vertical margins have no
       effect. Without this the `.tile-dur{margin-top}` below was silently dropped and the duration
       ran straight on from the caption on every tile ("…chronological wall fixture0:14"). Stacking
       here rather than making `.tile-dur` a block keeps the intent in one place and fixes the
       results grid and the selected state, which reuse this element. */
    display:flex;flex-direction:column;align-items:flex-start;
    padding:34px 12px 12px;
    background:linear-gradient(to top,rgba(4,4,7,.92),rgba(4,4,7,.55) 55%,transparent);
  }
  .tile-title{font-weight:600;font-size:13px;letter-spacing:-.005em;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.65)}
  .tile-dur{font-size:10.5px;color:var(--ink-dim);margin-top:3px}

  /* ---------- SCRIM ---------- */
  .scrim{
    position:fixed;inset:0;pointer-events:none;
    background:
      radial-gradient(ellipse 62% 55% at 50% 46%,rgba(9,9,12,.92),rgba(9,9,12,.42) 62%,rgba(9,9,12,.16));
    transition:background .3s var(--ease);
  }
  body.dim .scrim{
    background:radial-gradient(ellipse 70% 62% at 50% 46%,rgba(10,10,13,.94),rgba(10,10,13,.55) 62%,rgba(10,10,13,.32));
  }

  /* film grain — a whisper, never a texture */
  .grain{
    position:fixed;inset:0;pointer-events:none;opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- HERO ---------- */
  .hero{
    position:fixed;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:20px;padding:24px;pointer-events:none;
  }
  /*
    ONLY CONTROLS SWALLOW TOUCHES (founder, 2026-08-16: tapping near the constitution line "blocks
    the smooth scrolling effect of the tiles behind it").

    `.hero>*{pointer-events:auto}` made EVERY child a touch target — the wordmark, the hint, the
    thesis and the governance paragraph are all full-width blocks lying across the middle of the
    screen, so a drag that began anywhere on them was captured by text and never reached the
    scrollable column behind. The overlay was a sheet of glass over the product.

    Now the blocks pass touches straight through and only the things you can actually operate take
    them. The governance LINK still does — it is the <a> that captures, not the paragraph around it,
    which is what made a whole band of the screen dead to dragging.
  */
  .hero>*{pointer-events:none}
  .hero .searchbar,
  .hero .start-here,
  .hero .wall-governance a,
  .hero .chips{pointer-events:auto}
  .eyebrow{
    font-weight:600;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1.8;
    color:var(--ink-dim);
    animation:rise .5s var(--ease) both;
    text-align:center;
  }
  /* ONE word (FS-33 amendment): "Antitube", the i's dot = the blinking rec light. Lettering v6
     (2026-07-22, founder-directed): CLASH DISPLAY weight duet — 600 "Anti" / 200 "tube" (the 700
     read too thick against the whisper), both monochrome ivory; the tally lens is the mark's only
     chroma. (Graveyard: Fraunces serif = plain; Alfa Slab One = costume; Oswald = anonymous;
     Prosto = didn't land; Poppins = generic; Bricolage duet = right structure, childish face;
     white-on-red plate = YouTube dress, banned; red "Anti" = fractures the mark.) */
  .wordmark{
    font-family:'Clash Display',sans-serif;font-weight:600;
    font-size:clamp(54px,8vw,94px);
    letter-spacing:-.01em;line-height:1;
    color:#F4F3EF;
    animation:rise .5s var(--ease) .06s both;
  }
  .wordmark .i-slot{position:relative;display:inline-block}
  /* the weight duet: "tube" whisper-light, same ivory — the contrast IS the device. */
  .wordmark .wm-tube{
    font-weight:200;
    letter-spacing:.005em;
  }
  .wordmark .i-dot{
    /* the i's dot IS the record light — a literal video-camera tally lens: glossy red dome with
       a specular hotspot at ten-o'clock, a dark bezel rim, and the red bloom. Same single blink
       loop, reduced-motion kill unchanged. */
    position:absolute;left:50%;top:.1em;transform:translateX(-50%);
    width:.17em;height:.17em;border-radius:50%;
    background:
      radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 20%),
      radial-gradient(circle at 50% 52%, #ff7a6e 0%, #ee2f27 45%, #b3150f 78%, #6e0c09 100%);
    border:.012em solid #1a0505;
    box-shadow:
      inset 0 -.02em .03em rgba(0,0,0,.45),
      0 0 .06em rgba(255,90,80,.9),
      0 0 .18em rgba(229,72,77,.55),
      0 0 .4em rgba(229,72,77,.28);
    animation:blink 1.8s ease-in-out infinite;
  }
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}

  .searchbar{
    display:flex;align-items:center;gap:12px;
    width:min(620px,100%);
    height:52px;padding:0 8px 0 18px;
    background:var(--panel);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    animation:rise .5s var(--ease) .12s both;
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  }
  .searchbar:focus-within{
    border-color:rgba(244,243,239,.42);
    box-shadow:0 0 0 3px rgba(244,243,239,.07);
  }
  .searchbar svg{flex-shrink:0;opacity:.5}
  .searchbar input{
    flex:1;min-width:0;background:none;border:none;outline:none;
    font-size:15px;
  }
  .searchbar input::placeholder{color:var(--ink-faint)}
  .searchbar kbd{
    font-weight:600;font-size:11px;
    color:var(--ink-dim);
    border:1px solid var(--line-strong);border-radius:6px;
    padding:3px 8px;flex-shrink:0;
  }
  .searchbar .go{
    height:38px;padding:0 18px;flex-shrink:0;
    background:var(--ink);color:#0B0B0E;
    border-radius:var(--r-pill);
    font-weight:600;font-size:13px;
    transition:background .18s var(--ease),box-shadow .18s var(--ease);
  }
  .searchbar .go:hover{background:#ffffff;box-shadow:0 4px 16px rgba(244,243,239,.18)}

  /* quiet pills — the channels speak, the chrome stays out of the way */

  /* Trailer-sampler on-ramp: the featured-reel CTA. Uses the ONE FS-33 REC accent (red outline →
     filled on hover) so it reads as the on-ramp without competing with the ivory SEARCH action.
     Static paint; the rise entrance reuses the hero's existing keyframe (no new looping motion). */
  .start-here{
    display:inline-flex;align-items:center;gap:8px;align-self:center;
    margin-top:2px;padding:8px 18px;border-radius:var(--r-pill);
    text-decoration:none;background:transparent;color:var(--ink);
    border:1px solid var(--rec);
    font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    animation:rise .5s var(--ease) .2s both;
    transition:background .18s var(--ease),color .18s var(--ease);
  }
  .start-here .play{color:var(--rec);font-size:9px}
  .start-here:hover{background:var(--rec);color:#fff}
  .start-here:hover .play{color:#fff}
  .hint{
    font-weight:500;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:2;
    color:var(--ink-faint);
    animation:rise .5s var(--ease) .24s both;
    text-align:center;
  }

  /* ---------- RESULTS ---------- */
  .results{
    position:fixed;inset:0;z-index:20;
    background:var(--bg);
    display:none;flex-direction:column;
  }
  .results.open{display:flex;animation:fadeUp .24s var(--ease)}
  .results.closing{animation:fadeDown .18s var(--ease) forwards}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
  @keyframes fadeDown{to{opacity:0;transform:translateY(10px)}}

  .results-bar{
    display:flex;align-items:center;gap:14px;
    padding:16px 20px;border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .back{
    display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:500;color:var(--ink-dim);
    min-height:44px;padding:0 6px;
    transition:color .18s var(--ease);
  }
  .back:hover{color:var(--ink)}
  .results-bar .searchbar{height:48px;width:min(480px,100%);animation:none;flex:1}
  .results-meta{font-size:11px;color:var(--ink-faint);letter-spacing:.08em;margin-left:auto}

  .results-grid{
    flex:1;overflow-y:auto;
    display:grid;gap:12px;padding:20px;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    align-content:start;
  }
  .results-grid .tile{aspect-ratio:16/10}
  .results-grid .tile .tile-info{transform:none;opacity:1}

  .empty{
    grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--ink-dim);
  }
  .empty strong{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--ink);margin-bottom:10px}

  /* ---------- PLAYER ---------- */
  .player{
    position:fixed;inset:0;z-index:30;
    background:#0b0b0d;
    display:none;
  }
  .player.open{display:block;animation:playerIn .24s var(--ease)}
  .player.closing{animation:playerOut .18s var(--ease) forwards}
  @keyframes playerIn{from{opacity:0;transform:scale(.985)}}
  @keyframes playerOut{to{opacity:0;transform:scale(.985)}}

  .screen{position:absolute;inset:0;overflow:hidden}
  .screen .bars-flash{position:absolute;inset:0;opacity:0;pointer-events:none}
  .screen .bars-flash.show{animation:tune .45s steps(2) forwards}
  @keyframes tune{0%{opacity:1}100%{opacity:0}}

  .player-chrome{
    position:absolute;inset:0;
    display:flex;flex-direction:column;justify-content:space-between;
    background:linear-gradient(to bottom,rgba(8,8,10,.72),transparent 24%,transparent 70%,rgba(8,8,10,.82));
  }
  .player-top{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 24px;gap:16px}
  .player-title h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(20px,3vw,30px);letter-spacing:-.01em}
  .player-title .sub{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
  .player-title .live{display:flex;align-items:center;gap:6px;color:var(--ink)}
  .player-title .live .dot{width:7px;height:7px;border-radius:50%;background:var(--tally);animation:blink 1.4s ease-in-out infinite}
  .close{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;
    transition:border-color .18s var(--ease),background .18s var(--ease);
  }
  .close:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}

  .player-bottom{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
  .progress{height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
  .progress-fill{height:100%;width:100%;background:var(--tally);transform-origin:left;transform:scaleX(0)}
  .player-controls{display:flex;align-items:center;gap:16px}
  .pp{
    width:48px;height:48px;border-radius:50%;
    background:var(--ink);color:#141317;
    display:flex;align-items:center;justify-content:center;
    transition:background .18s var(--ease);
  }
  .pp:hover{background:#d8d4cc}
  .timecode{font-size:12px;color:var(--ink-dim)}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){
    .col:nth-child(n+5){display:none}
    .hint .desk{display:none}
  }
  @media(max-width:560px){
    .col:nth-child(n+4){display:none}
    .searchbar{height:54px}
    .searchbar kbd{display:none}
    .results-meta{display:none}
  }

  /*
    THE WALL IS DRAGGABLE ON TOUCH (founder-directed 2026-08-16): "i cant drag the videos and tiles
    around".

    On a pointer device the wall is a broadcast you watch drift past, and hovering a column pauses it
    — that is the desktop affordance and it is untouched. A phone has no hover, so the wall was a
    thing that moved at you with no way to hold it still or look further down a column.

    On coarse pointers the drift yields to the viewer: each column becomes natively scrollable and
    the animation stops, so a finger drags the tiles directly and gets the platform's own momentum
    and rubber-banding rather than a hand-rolled imitation. `overscroll-behavior: contain` keeps a
    flick inside the column instead of chaining to the page behind it.

    The track already renders its content twice for the seamless drift loop, so there is plenty of
    length to drag through. Scrollbars are hidden because this is a wall, not a list.
  */
  @media(pointer:coarse){
    /* CORRECTED 2026-08-16 (founder, from a phone recording): killing the drift to enable dragging
       traded one affordance for another. The wall is a BROADCAST — the motion is the thing — so the
       drift stays and the drag is added ON TOP of it.
       Touching a column pauses its drift, which is exactly what :hover does on a pointer device;
       `:active` is the touch equivalent, so the same idea reaches the same result on both. */
    .col{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
    .col::-webkit-scrollbar{display:none}
    .col:active .track{animation-play-state:paused}
  }

  @media(prefers-reduced-motion:reduce){
    .track,.wordmark .i-dot,.tile-tally .dot,
    .player-title .live .dot,.tune-tally{animation:none !important}
    .hero>*,.results.open,.player.open{animation-duration:.01ms !important}
  }


/* ═══ ANTITUBE ADAPTATIONS (real product wiring on top of the prototype base) ═══ */

/* real posters are <img>/<video>, absolutely filling the tile like the prototype's .poster divs */
.tile .poster-img,
.tile .tile-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the one-shot hover zoom (a transition, never a loop): a gentle 4% push, not a jump */
.tile .poster-img {
  transition: transform 0.6s var(--ease);
}
.tile:hover .poster-img,
.tile:focus-visible .poster-img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .tile:hover .poster-img,
  .tile:focus-visible .poster-img {
    transform: none;
  }
}

.tile .tile-preview {
  opacity: 0;
}

.tile .tile-preview[data-tuned="1"] {
  opacity: 1;
}

/* results tiles reuse the same anchors */
.results-grid .tile {
  width: 100%;
}

/* ── the tune-in player restyle (fixes the stretched-portrait disaster) ────────
   The engine's DOM is untouched; within .tune-shell the stage becomes the prototype's .screen:
   a centered, CONTAINED video over #0b0b0d — a 9:16 clip on desktop letterboxes like a
   broadcast monitor instead of upscale-cropping across the viewport. */
.tune-shell {
  position: fixed;
  inset: 0;
  background: #0b0b0d;
}

.tune-shell .feed-shell,
.tune-shell .swipe-player {
  position: absolute;
  inset: 0;
  background: #0b0b0d;
}

.tune-shell video {
  object-fit: contain !important;
  background: #0b0b0d;
}

.tune-shell .media-frame,
.tune-shell .feed-item {
  background: #0b0b0d;
}

/* FS-29 recurrence (found 2026-07-22 by pixel-level shoot QA): the fills above re-created the
   exact occlusion app.css's FS-29 fix documents — the pooled video paints at z1 BEHIND the
   active feed-item (z2), so every opaque fill on the item chain must clear once frames paint.
   FS-29 cleared only .media-frame; the restyle's .feed-item fill stayed → the player rendered
   black while the clip decoded brightly (composited ~16/255, rung ~110/255). Same keying as
   FS-29: a static data-video-playing paint toggle, CUEING keeps its backdrop. */
.tune-shell .feed-item[data-stage-state="active"][data-video-playing="true"],
.tune-shell .feed-item[data-stage-state="active"][data-video-playing="true"] .media-frame {
  background: transparent;
}

/* prototype player-chrome gradient over the stage */
.tune-shell .feed-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 8, 10, 0.72), transparent 24%, transparent 70%, rgba(8, 8, 10, 0.82));
}

/* caption block → editorial display face for programme titles */
.tune-shell .caption-strip,
.tune-shell .post-copy {
  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* VIEW + LIKE COUNTERS (2026-08-15). Inter rather than the Fraunces the copy block uses: these are
   instrument readings, not editorial voice, and the FS-33 language reserves the serif for titles and
   station names. Muted by default so they sit under the title rather than competing with it — a
   counter is context, not the headline. */
.tune-shell .stat-row,
.feed-item .stat-row {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim, rgba(240, 236, 228, 0.62));
}

.tune-shell .stat-row [data-stat-views]::after,
.feed-item .stat-row [data-stat-views]::after {
  content: " VIEWS";
  letter-spacing: 0.12em;
}

.tune-shell .stat-row [data-stat-likes]::after,
.feed-item .stat-row [data-stat-likes]::after {
  content: " LIKES";
  letter-spacing: 0.12em;
}

.tune-shell .post-actions button {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--chip-bg);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.tune-shell .post-actions button:hover {
  border-color: var(--ink);
}

.tune-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  pointer-events: none;
}

.tune-back,
.tune-topbar-right {
  pointer-events: auto;
}

.tune-back {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.tune-back:hover {
  color: var(--ink);
}

/*
  THE PHONE HEADER (2026-08-16). Four items — back, LISTEN, FOLLOW, station — on one 390px row, with
  the back label wrapping to two lines into the LISTEN button. Shorten the label and tighten the
  gap; nothing is removed, because each of the four does a different job.
*/
@media (max-width: 560px) {
  .tune-topbar { padding: 12px 14px; gap: 10px; }
  .tune-back-long { display: none; }
  .tune-topbar-right { gap: 10px; }
}

.tune-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.tune-mode {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

/* Trailer-sampler funnel: FOLLOW is the primary conversion CTA (ivory fill, dark text — the FS-33
   "white primary action"), receding to a quiet confirmed state once followed. Static paint, no motion. */
.tune-follow {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: #0b0b0e;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.tune-follow[data-following="true"] {
  background: transparent;
  color: var(--ink-dim);
  border-color: var(--line-strong);
}

.tune-station {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.tune-tally {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tally);
  animation: blink 1.4s ease-in-out infinite;
}

/* ── station (channel) page in the prototype language ──────────────────── */
.station-page {
  /* BOUNDED height, not min-height (QA 2026-08-13 H2) — see the note on .lineup-index in app.css.
     The station page's whole back catalogue sat below the fold and was unreachable. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  padding: 72px clamp(16px, 3vw, 40px) 64px;
  overflow-y: auto;
}

.station-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: clamp(12px, 4vh, 40px) 0 30px;
}

.station-hero-bars {
  width: min(300px, 62vw);
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}

.wall-station-bar { flex: 1; }
.wall-station-bar-a { background: #b5b5ad; }
.wall-station-bar-b { background: #b5b03a; }
.wall-station-bar-c { background: #3ab5ac; }
.wall-station-bar-d { background: #3ab53f; }
.wall-station-bar-e { background: #b03ab5; }
.wall-station-bar-f { background: var(--tally); }
.wall-station-bar-g { background: #3a3fb5; }

.station-name {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: -0.015em;
  margin: 0;
}

.station-desc {
  max-width: 560px;
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}

.station-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Inter", system-ui, sans-serif;
  flex-wrap: wrap;
  justify-content: center;
}

.station-tunein,
.station-actions [data-follow-channel] {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

/* the one primary action on a station page is white, like the search submit */
.station-tunein {
  background: var(--ink);
  color: #0b0b0e;
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.station-tunein:hover { background: #ffffff; box-shadow: 0 4px 18px rgba(244, 243, 239, 0.16); }

.station-actions [data-follow-channel] {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.station-actions [data-follow-channel]:hover {
  border-color: var(--ink);
}
.station-actions [data-follow-channel][data-following="true"] { border-color: var(--rec); color: var(--rec); }

.station-count {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* #77: the archive's explicit label — the LIVE hero leads, the catalogue reads as the archive. */
.station-section {
  margin: 28px 24px 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.station-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ── station feature tiles (M-6: restored after the b255364 FS-33 rebuild dropped the .wall-tile family;
   re-tokenized to the premium-editorial sheet) ───────────────────────────────────── */
.station-grid .wall-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: 3px;
}
.wall-tile-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: #0e0d10;
  border: 1px solid var(--line);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.station-grid .wall-tile:hover .wall-tile-frame,
.station-grid .wall-tile:focus-visible .wall-tile-frame {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.wall-tile-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wall-tile-poster-dead {
  background: repeating-linear-gradient(45deg, #141216 0 8px, #0e0d10 8px 16px);
}
.wall-tile-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.88);
  background: var(--chip-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}
.wall-tile-caption {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── tile selector (keyboard surf: arrows + Enter) — the rec ring, never neon ───── */
.tile.selected {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--rec);
  z-index: 6;
  box-shadow:
    0 0 0 2px var(--rec),
    0 0 22px rgba(229, 72, 77, 0.3),
    var(--shadow-tile-hover);
}

.tile.selected .tile-info {
  transform: none;
  opacity: 1;
}

.tile.selected .tile-tally {
  opacity: 1;
}

/* an active surf cursor freezes the WHOLE broadcast, console-style — a selection on a still-
   drifting wall slides out from under the arrows */
.wall-root.surfing .track {
  animation-play-state: paused;
}

/* drift clones tune in via wall-behavior (data-href) — they must read as clickable */
.tile[data-clone] {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .tile.selected {
    transform: none;
  }
}

/* ── FS-34 v1: the broadcast layer (station strip, sign-off, up-next, premiere badge).
   Every rule here is STATIC — the rec-blink family + drift + the Ken-Burns pan (app.css)
   stay the only looping motions. ───────────────────────────────────────────────────── */

/* the station page's ON NOW/UP NEXT or NEXT PREMIERE line under the hero */
.station-broadcast {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8898b;
}
.station-broadcast[data-broadcast-now] {
  color: var(--ink-dim);
}

/* sign-off: a station with no features plays the test card, honestly */
.station-signoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 64px 24px;
  margin-top: 24px;
  border: 1px solid var(--line, rgba(242, 239, 233, 0.14));
  background: rgba(255, 255, 255, 0.02);
}
.signoff-bars {
  height: 72px;
}
.signoff-title {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.signoff-sub {
  font-size: 12px;
  color: var(--ink-dim);
}

/* the tune-in page's UP NEXT strip (engine keeps it current as the programme advances) */
.tune-upnext {
  margin: 0;
  padding: 6px 20px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line, rgba(242, 239, 233, 0.14));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the wall's premiere appointment badge (frosted chip, rec accent, under the genre tag) */
.tile-premiere {
  position: absolute;
  top: 36px;
  left: 10px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--chip-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: 999px;
  pointer-events: none;
}
.tile-premiere::first-letter {
  color: var(--rec);
}


/* ── What this network is (centre overlay) ─────────────────────────────────────────────────────
   Lives in the centre panel because THE WALL DOES NOT SCROLL — .col is height:100vh;overflow:hidden,
   so anything appended after the columns is unreachable. FS-33 premium-editorial: warm near-black,
   one REC accent, no new motion. */
.wall-thesis {
  margin: 1.05rem auto 0;
  max-width: 46ch;
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(231, 229, 228, 0.66);
}
/* The centre .scrim is a radial that fades by the time it reaches this copy, so on bright tiles
   (checked live 2026-08-11: the autumn-forest tile sat under "38 FEATURES") the strip drowned.
   A local shadow keeps the scrim geometry — and the whole FS-33 look — untouched. */
.wall-thesis,
.wall-scale,
.hint,
.wall-governance a {
  text-shadow:
    0 1px 2px rgba(10, 10, 13, 0.9),
    0 2px 18px rgba(10, 10, 13, 0.8);
}
.wall-thesis strong { color: rgba(245, 243, 240, 0.94); font-weight: 600; }
.wall-thesis abbr {
  text-decoration: none;
  border-bottom: 1px dotted rgba(231, 229, 228, 0.38);
  cursor: help;
}
.wall-scale {
  margin: 0.6rem 0 0;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 229, 228, 0.4);
}
.wall-scale strong { color: #e8483c; font-weight: 600; }

/* The one link out of the centre overlay. Quiet by default — it must not compete with the wordmark
   or the search — but it is the only path to the page that lets a visitor CHECK the sentence
   directly above it, so it brightens decisively on hover/focus rather than staying decorative.
   Kept inside the overlay because the wall does not scroll (see wall-page.tsx). */
.wall-governance {
  margin: 0.85rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.wall-governance a {
  color: rgba(231, 229, 228, 0.52);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 229, 228, 0.22);
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.wall-governance a:hover,
.wall-governance a:focus-visible {
  color: rgba(245, 243, 240, 0.96);
  border-bottom-color: #e8483c;
}
@media (max-width: 640px) {
  .wall-thesis { font-size: 0.76rem; max-width: 34ch; }
  .wall-governance { font-size: 0.66rem; }

  /*
    LESS FOREGROUND, NOT A DARKER BACKGROUND (founder, 2026-08-16: the overlay "seems to be
    overpowering the back video tiles, which should be the thing we are trying to show").

    The first correction reached for a heavier scrim and won the legibility argument by hiding the
    product. The honest fix is to put less in front of the videos. The scale strip goes: it is the
    least valuable line on the wall — a raw count that invites "39 clips of five seconds" as the
    reading — and it was the worst offender, landing squarely on a tile caption at every phone width.

    What survives is what a visitor needs: the mark, the search, the on-ramp, the one sentence that
    says what this is, and the link to the constitution.
  */
  .wall-scale { display: none; }

  /*
    ...AND THE BRAND BLOCK MOVES DOWN (founder: "centre the antitube lettering and the search bar,
    right now it's too high up").

    The hero is a centred column, so it was already centred AS A BLOCK — but the block is
    bottom-heavy (on-ramp, hint, thesis, link all sit below the search), which pushes the mark and
    the search into the top third. Padding the top shifts the whole column down so the search lands
    near the middle, where a thumb is.
  */
  .hero { padding-top: 12vh; gap: 16px; }

  /*
    THE SCRIM HAS TO COVER WHAT THE OVERLAY ACTUALLY OCCUPIES (2026-08-16).

    The desktop scrim is an ellipse sized 62% x 55% OF THE VIEWPORT. On a 390px phone that dark core
    is ~242px wide, while the hero is a nearly full-width column — so the thesis, the scale strip and
    the governance link all sit OUTSIDE the core, on the .42/.16 falloff, directly over tile
    captions. Captured headless at 360 and 390: "8 CHANNELS 38 FEATURES" landed on "Coastline at
    first light", and the governance link on "Morning briefing, 6 a.m.". Unreadable, on the landing
    surface, on the device a partner is most likely to open a link on.

    The local text-shadows above were the 2026-08-11 fix for the same collision on DESKTOP, where
    the text is inside the core and the shadow only has to win against a bright tile. They are
    necessary here and not sufficient: no shadow rescues small type sitting on another caption.

    Widened rather than redesigned — same radial character, same centre, same palette, so the FS-33
    look is unchanged. Only the geometry follows the content it exists to make readable.
  */
  /* The caption hide that lived here is REVERTED (founder, 2026-08-16): "the wall tiles are just
     videos, there is no description visible". A tile with no title is a texture, not a programme —
     the captions are what make the wall read as a catalogue rather than a screensaver. */

  /*
    LIGHTENED 2026-08-16, after a phone recording showed the correction had overshot: at .95/.88 the
    tiles behind were nearly black and the overlay dominated a screen whose whole job is to show the
    VIDEOS. The foreground was winning against the product.

    The copy still has to read, so legibility moves back onto the local text-shadows (which is where
    the 2026-08-11 desktop fix put it) and the scrim returns to a veil: enough to seat the type,
    little enough that the wall is plainly a wall of moving pictures.
  */
  /*
    A TIGHT CORE, NOT A WASH. Two failed shapes got here: .95 across 135% drowned the wall, and .72
    across 120% was a flat wash that dimmed every tile without ever getting dark enough under the
    type. The text occupies a narrow column down the middle, so the darkness should too — a smaller,
    steeper ellipse seats the copy while the outer columns keep their brightness and the wall still
    reads as moving pictures.
  */
  .scrim {
    background: radial-gradient(
      ellipse 86% 46% at 50% 50%,
      rgba(9, 9, 12, 0.9),
      rgba(9, 9, 12, 0.62) 42%,
      rgba(9, 9, 12, 0.16) 78%,
      rgba(9, 9, 12, 0.05)
    );
  }
  body.dim .scrim {
    background: radial-gradient(
      ellipse 100% 56% at 50% 50%,
      rgba(10, 10, 13, 0.94),
      rgba(10, 10, 13, 0.76) 42%,
      rgba(10, 10, 13, 0.34) 78%,
      rgba(10, 10, 13, 0.16)
    );
  }
}

/* ── outage state (QA 2026-08-13) ─────────────────────────────────────────
   Occupies the COLUMN AREA, not the viewport. It replaced `.results.open`, whose whole job is to be a
   full-bleed sheet ABOVE the wall — correct for a search result, catastrophic for a transient catalog
   error, because it hid the wordmark, the search, the chips and the on-ramp behind two lines of text.
   Deliberately below the hero in stacking order so the brand and the search remain usable. */
.wall-outage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.wall-outage .empty {
  pointer-events: auto;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
}
.wall-outage-retry {
  pointer-events: auto;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  color: var(--ink, #f3efe7);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ── /governance ──────────────────────────────────────────────────────────
   A READING surface, and the only one on the site that scrolls. Everything else here is a locked
   viewport by design (the wall drifts, the player fills); this page is prose and evidence, so it
   gets ordinary document flow and a measure that is comfortable to read. */
.gov {
  /*
    ITS OWN SCROLL CONTAINER, and this is load-bearing rather than stylistic.

    This sheet sets `body{overflow:hidden}` because the wall is a locked drifting viewport, and
    /governance links the same sheet — so a normal document-flow page here renders every section
    below the fold into the DOM where NOTHING can reach it. Caught in a real browser on 2026-08-16:
    the served HTML was complete and the bottom half of the page did not exist for any visitor.
    That is the 2026-08-10 masthead defect exactly, reproduced by the page built to prevent this
    class of thing.

    Fixing it by unsetting body overflow would reach the wall too. Scrolling the element sidesteps
    body entirely, so the wall is untouched.
  */
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4.5rem 1.5rem 6rem;
  color: rgba(231, 229, 228, 0.86);
}
/* The reading measure moves to the children, since .gov is now full-bleed. `margin-inline` and not
   `margin`, so each panel keeps its own vertical rhythm. */
.gov > * {
  max-width: 62ch;
  margin-inline: auto;
}
.gov-back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 229, 228, 0.45);
  text-decoration: none;
}
.gov-back:hover, .gov-back:focus-visible { color: rgba(245, 243, 240, 0.95); }
.gov-title {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  margin: 0 0 1rem;
  color: rgba(245, 243, 240, 0.96);
}
.gov-lede { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; color: rgba(231, 229, 228, 0.72); }
.gov-panel { margin-top: 3rem; }
.gov-h2 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231, 229, 228, 0.45);
  margin: 0 0 1.1rem;
  font-weight: 600;
}
.gov-dim { font-size: 0.85rem; line-height: 1.65; color: rgba(231, 229, 228, 0.55); margin: 1rem 0 0; }
.gov-warn { font-size: 0.85rem; line-height: 1.65; color: #e8483c; margin: 1rem 0 0; }
.gov-decisions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2.2rem; }
.gov-decisions li { display: flex; flex-direction: column; gap: 0.3rem; }
.gov-count { font-family: Fraunces, Georgia, serif; font-size: 2.4rem; font-weight: 400; color: #e8483c; line-height: 1; }
.gov-decision-name { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(231, 229, 228, 0.5); }
.gov-fired { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.gov-fired li { border-left: 2px solid #e8483c; padding-left: 1rem; }
.gov-fired-head { margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; }
.gov-rule { color: #e8483c; font-size: 0.8rem; letter-spacing: 0.08em; }
.gov-reason { font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(231, 229, 228, 0.5); }
.gov-fired-detail { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(231, 229, 228, 0.8); }
.gov-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.gov-rules li { display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.88rem; }
.gov-clause { color: rgba(231, 229, 228, 0.72); }
.gov-meta { margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.gov-meta div { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: baseline; }
.gov-meta dt { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(231, 229, 228, 0.4); min-width: 12ch; }
.gov-meta dd { margin: 0; font-size: 0.88rem; color: rgba(231, 229, 228, 0.8); }
.gov code { font-size: 0.85em; color: rgba(245, 243, 240, 0.9); }

/* ── comments drawer (V2 Phase 3) ─────────────────────────────────────────────
   `.tune-shell` is `position: fixed; inset: 0`, so anything appended after the player is
   off-viewport with nothing to scroll — the 2026-08-10 masthead defect, found again here by a
   browser walk while every HTTP probe reported the section "present". The drawer is therefore its
   OWN fixed layer above the player rather than flow content below it, and it scrolls internally. */
.tune-comments-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #f5f5f7;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  cursor: pointer;
}
.tune-comments-toggle[aria-expanded="true"] {
  background: #f5f5f7;
  color: #0b0b0d;
}
.tune-comments {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.4rem;
  background: rgba(11, 11, 13, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  /* The whole point: the drawer scrolls even though the shell behind it does not. */
  overflow-y: auto;
}
.tune-comments[hidden] {
  display: none;
}
.tune-comments-title {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.comment {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.7rem;
}
.comment-badge {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}
.comment-body {
  margin: 0.25rem 0;
  color: #f5f5f7;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.comment-time {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}
.comment-reply-open {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 0 0 0 0.6rem;
}
.comment-replies {
  list-style: none;
  margin: 0.5rem 0 0 0.9rem;
  padding: 0 0 0 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.comment-status {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  min-height: 1em;
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.comment-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f5f5f7;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.55rem 0.6rem;
  border-radius: 2px;
  resize: vertical;
}
.comment-submit {
  align-self: flex-end;
  background: #f5f5f7;
  color: #0b0b0d;
  border: none;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.45rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
}