/* ============ THE BROADCAST — three discs, the title on each label, the buttons in one line ============ */

.shelf-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(1.4rem,3vw,2.6rem);min-width:0;
  flex-wrap:wrap;margin-top:2.6rem}
.shelf-ctas{display:flex;gap:.8rem;flex-wrap:nowrap}

/* the discs fan out a little, each one overlapping the last */
.discs{--d:clamp(160px,15.5vw,210px);display:flex;align-items:center;padding:.4rem 0 .8rem}
.disc{position:relative;flex:0 0 auto;width:var(--d);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-decoration:none;color:inherit;
  background:repeating-radial-gradient(circle,var(--g1) 0 2px,var(--g2) 2px 3px);
  box-shadow:0 18px 34px rgba(0,0,0,.55),inset 0 0 0 2px rgba(237,231,214,.09),inset 0 0 0 9px rgba(0,0,0,.28);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.disc + .disc{margin-left:calc(var(--d) * -.12)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,rgba(255,255,255,.12),transparent 16%,rgba(255,255,255,.08) 50%,transparent 66%)}
.disc:hover,.disc:focus-visible{transform:translateY(-6px);z-index:2}
.disc:hover::after{animation:deck-spin 2.6s linear infinite}
.disc:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.disc-label{position:relative;z-index:1;width:50%;aspect-ratio:1;border-radius:50%;background:var(--lbl);color:var(--lbl-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;padding:12%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 0 0 5px rgba(0,0,0,.05)}
.disc-label span{font-family:var(--serif);font-size:clamp(.72rem,.85vw,.86rem);line-height:1.18}
.disc-label::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--void);opacity:.85}
.disc[data-tone="black"]{--g1:#141310;--g2:#22201a;--lbl:var(--amber);--lbl-ink:var(--void)}
.disc[data-tone="amber"]{--g1:#a5531a;--g2:#c0631f;--lbl:#1a1813;--lbl-ink:var(--cream)}
.disc[data-tone="amber"] .disc-label::after{background:var(--cream)}
.disc[data-tone="smoke"]{--g1:#2b2620;--g2:#3a342b;--lbl:var(--paper);--lbl-ink:var(--ink)}

/* phones: the discs scroll sideways in one row, the two buttons sit in one line beneath */
@media(max-width:900px){
  .shelf-row{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;margin-top:2rem}
  .discs{--d:190px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    gap:1rem;margin-right:-1.4rem;padding:.4rem 1.4rem .8rem 0;scrollbar-width:none}
  .discs::-webkit-scrollbar{display:none}
  .disc{scroll-snap-align:start}
  .disc + .disc{margin-left:0}
  .disc-label span{font-size:.8rem}
}
@media(max-width:560px){.shelf-ctas .long{display:none}}

/* ---- the log — tape recorder ---- */
.logbox{margin-top:4.5rem;max-width:640px}
.logbox .lg-kicker{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:var(--cream-faint);
  text-transform:uppercase;margin-bottom:1.2rem;display:flex;align-items:center;gap:.7rem}
.logbox .lg-kicker .rec{color:var(--alert);animation:blinkstep 2.2s step-end infinite}
.log{list-style:none}
.log li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--cream-dim);
  padding:.55rem 0;border-bottom:1px dashed rgba(237,231,214,.08);display:flex;gap:1.4rem;
}
.log li .t{color:var(--cream-faint);flex:none}
.log li:last-child::after{content:"▌";color:var(--amber);animation:blinkc 1.1s steps(1) infinite;margin-left:.3ch}

/* the broadcast heading sits on one line wherever there is room for it */
#broadcast h2{max-width:none;font-size:clamp(1.8rem,3.6vw,3.2rem)}
#broadcast .sub{max-width:none}
@media(min-width:900px){#broadcast h2{white-space:nowrap}}
.research-capture{margin-top:1.6rem}