@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --ink:#102635;
  --ink-soft:#18384c;
  --paper:#ffffff;
  --surface:#f2f7fa;
  --muted:#b9c8d1;
  --line:rgba(255,255,255,.18);
  --signal:#f05232;
  --signal-dark:#c93620;
  --acid:#c9ed4b;
}

*{box-sizing:border-box}
html{background:var(--ink)}
body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--paper);
  font-family:'Figtree',sans-serif;
}
body:before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
::selection{background:var(--signal);color:#fff}
button,a{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

main{position:relative;display:grid;grid-template-columns:1.08fr .92fr;min-height:100vh}
.identity{padding:9vh 7vw;border-right:1px solid var(--line)}
.logo{
  display:grid;
  place-items:center;
  width:clamp(150px,22vw,300px);
  aspect-ratio:1;
  overflow:hidden;
  margin-bottom:9vh;
  border:1px solid rgba(255,255,255,.25);
  background:var(--ink-soft);
  box-shadow:18px 18px 0 var(--signal);
}
.logo img{width:100%;height:100%;object-fit:cover}
.logo span{font-family:'Instrument Serif',serif;font-size:38px}
.identity>p:first-of-type,.receiver>span{
  color:#ff8d7b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.identity h1{
  margin:22px 0 40px;
  font:400 clamp(64px,9vw,145px)/.76 'Instrument Serif',serif;
  letter-spacing:-.045em;
}
.description{max-width:620px;color:#b5c3cb;font-size:13px;line-height:1.8}

.receiver{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:7vw 9vw;
  background:linear-gradient(145deg,var(--ink-soft),#240d09);
}
.receiver-art{
  display:grid;
  place-items:center;
  width:min(260px,58vw);
  aspect-ratio:1;
  margin:22px 0 30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  background:var(--surface);
  box-shadow:12px 12px 0 var(--signal);
  color:var(--ink);
  font-size:11px;
  letter-spacing:.18em;
}
.receiver-art img{width:100%;height:100%;object-fit:cover}
.receiver h2{margin:0 0 10px;color:var(--paper);font:400 clamp(38px,5vw,72px)/.95 'Instrument Serif',serif}
.receiver p{color:#b5c3cb}
.receiver>small{min-height:14px;margin-top:8px;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.receiver audio{width:100%;margin:32px 0 25px;accent-color:var(--signal)}
.receiver a{width:max-content;color:var(--paper);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration-color:var(--signal);text-underline-offset:5px}
.receiver #stationAudio{display:none}
.receiver #stationPlay{
  width:100%;
  margin:34px 0 9px;
  padding:17px 20px;
  border:1px solid var(--signal-dark);
  background:var(--signal);
  color:#fff;
  font:800 11px/1 'Figtree',sans-serif;
  letter-spacing:.14em;
  cursor:pointer;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.receiver #stationPlay:hover,.receiver #stationPlay:focus-visible{background:var(--signal-dark);transform:translateY(-2px);box-shadow:5px 5px 0 #1d0a07}
.receiver #stationStatus{margin:0 0 24px;color:var(--muted);font:700 8px/1.4 'Figtree',sans-serif;letter-spacing:.12em}

.public-history{width:100%;margin-top:42px;border-top:1px solid var(--line)}
.public-history>header{display:flex;align-items:center;justify-content:space-between;padding:15px 0 10px}
.public-history>header span{color:#ff8d7b;font-size:9px;font-weight:800;letter-spacing:.15em}
.public-history>header b{color:var(--muted);font-size:8px;letter-spacing:.12em}
.public-history>div{display:grid}
.public-history article{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:50px;border-top:1px solid rgba(255,255,255,.1)}
.public-history article>b{color:var(--signal);font-size:9px}
.public-history article>span{display:grid;min-width:0}
.public-history strong,.public-history small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-history strong{color:var(--paper);font-size:10px;font-weight:700}
.public-history small,.public-history time,.public-history p{color:var(--muted);font-size:8px}
.public-history time{white-space:nowrap}
.public-history p{margin:0;padding:15px 0;border-top:1px solid rgba(255,255,255,.1);line-height:1.5}

@media(max-width:760px){
  main{grid-template-columns:1fr}
  .identity{padding:12vw 8vw;border-right:0;border-bottom:1px solid var(--line)}
  .logo{margin-bottom:70px}
  .receiver{min-height:65vh;padding:14vw 8vw}
  .receiver-art{width:min(240px,70vw)}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}