/* ---------- the telly: a hand-painted Philips 14 inch, the photo as chrome, the screen as the site ---------- */
/* ---------- the photo is the chrome ---------- */
.telly {
  position: relative;
  height: 92vh;
  aspect-ratio: 698 / 762;
  max-width: 96vw;
  user-select: none;
  z-index: 1;
  filter: drop-shadow(0 18px 22px rgba(20,10,0,.55)) drop-shadow(0 2px 4px rgba(20,10,0,.4));
}

.telly > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* the glass: measured off the photo, in % of the image box */
.screen {
  position: absolute;
  left: 9.9%; top: 11.4%;
  width: 80.4%; height: 56.2%;
  border-radius: 3.5% / 5%;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(120% 100% at 50% 45%, #0d2027 0%, #06131a 60%, #010507 100%);
  box-shadow: inset 0 0 40px 6px rgba(0,0,0,.9);
  transition: opacity .25s;
}
.telly.off .screen { opacity: 0; transition-delay: .25s; }

/* bulge: a highlight arcing across the top of the glass, like the real thing */
.screen::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 45% at 50% -10%, rgba(255,255,255,.09), rgba(255,255,255,0) 70%),
    radial-gradient(40% 30% at 18% 12%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  z-index: 3;
}

.phosphor {
  position: absolute; inset: 0;
  padding: 5cqw 7cqw 6cqw;
  overflow-y: auto;
  scrollbar-width: none;
  font-size: calc(2.55cqw * var(--zoom) * var(--fit, 1));
  line-height: 1.5;
  color: var(--ink);
  text-shadow: 0 0 .35em rgba(120,241,221,.3), 0 0 1px rgba(214,235,230,.7);
}
.phosphor::-webkit-scrollbar { display: none; }

.scanlines {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.25) 2px 3px);
  mix-blend-mode: multiply;
}
.vignette {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 12cqw 2cqw rgba(0,0,0,.6);
  border-radius: inherit;
}

/* on-screen display, like a real set: big green channel number, top right, fades */
.osd {
  position: absolute; right: 8cqw; top: 6cqw; z-index: 4;
  font: 600 9cqw/1 var(--mono);
  color: var(--osd);
  text-shadow: 0 0 .2em rgba(125,255,154,.7), 2px 2px 0 rgba(0,0,0,.8);
  opacity: 0; pointer-events: none;
}
.osd.show { animation: osd 1.6s steps(1) forwards; }
@keyframes osd { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.osd small { display: block; font-size: .3em; font-weight: 500; letter-spacing: .1em; margin-top: .4em; text-align: right; }

/* power: warm-up on load and when switched on */
.telly.warm .phosphor { animation: warm .9s ease-out both; }
@keyframes warm {
  0% { transform: scale(1, .004); filter: brightness(4); }
  35% { transform: scale(1, .004); filter: brightness(4); }
  60% { transform: scale(1, 1.02); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
.telly.zap .phosphor { animation: zap .2s steps(3); }
@keyframes zap {
  0% { filter: brightness(1.8) contrast(1.4); transform: translateY(-.5cqw); }
  50% { filter: brightness(.6); transform: translateY(.5cqw) skewX(.5deg); }
  100% { filter: none; transform: none; }
}

/* ---------- screen typography ---------- */
.phosphor a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted rgba(120,241,221,.5); }
.phosphor a:hover { background: rgba(120,241,221,.14); border-bottom-style: solid; }
.phosphor a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.masthead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding-bottom: .5em; margin-bottom: 1.2em;
  border-bottom: 1px dashed rgba(111,152,147,.5);
  color: var(--ink-dim);
}
.masthead b { color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.masthead .clock { font-variant-numeric: tabular-nums; }

.channel { display: none; }
.channel.on { display: block; }
.channel h1 { font-size: 1.05em; font-weight: 600; margin: 0 0 1em; color: var(--accent); }
.channel h1::before { content: "ch. " attr(data-n) "  "; color: var(--ink-dim); font-weight: 400; }
.channel p { margin: 0 0 1em; max-width: 60ch; }
.phosphor .dim { color: var(--ink-dim); }
.phosphor .cursor::after { content: "▮"; animation: blink 1.1s steps(1) infinite; color: var(--accent); margin-left: .1em; }
@keyframes blink { 50% { opacity: 0; } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35em 1.5em; margin: 0 0 1.2em; }
.kv dt { color: var(--ink-dim); }
.kv dd { margin: 0; }
.jobs { list-style: none; margin: 0; padding: 0; font-size: .94em; }
.jobs > li { padding: .5em 0; border-top: 1px dotted rgba(111,152,147,.35); }
.jobs > li:first-child { border-top: 0; padding-top: 0; }
.job { display: flex; flex-wrap: wrap; gap: 0 .7em; align-items: center; margin-bottom: .3em; }
.job .logo { width: 1.5em; height: 1.5em; image-rendering: pixelated; border-radius: 2px; opacity: .9; filter: saturate(.85) contrast(1.05); box-shadow: 0 0 6px rgba(120,241,221,.25); }
.job b { font-weight: 600; color: var(--accent); }
.job span { color: var(--ink); }
.job time { color: var(--ink-dim); margin-left: auto; font-variant-numeric: tabular-nums; }
.jobs ul { margin: 0; padding-left: 1.2em; max-width: 64ch; }
.jobs ul li { margin: 0 0 .2em; opacity: .9; }
.jobs ul li::marker { color: var(--ink-dim); }

.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 6.5em 1fr; gap: 0 1em; padding: .5em 0; border-top: 1px dotted rgba(111,152,147,.35); }
.log li:first-child { border-top: 0; }
.log time { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.log .title { display: flex; justify-content: space-between; gap: 1em; align-items: baseline; }
.log .kind { color: var(--ink-dim); font-size: .9em; }
.log .score { letter-spacing: -.05em; color: var(--accent); white-space: nowrap; }
.log .score span { color: rgba(111,152,147,.55); }
.log .note { grid-column: 2; opacity: .85; max-width: 58ch; }

.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: .5em 0; border-top: 1px dotted rgba(111,152,147,.35); max-width: 62ch; }
.links li:first-child { border-top: 0; }
.links .take { display: block; opacity: .85; }

.book li { padding: .5em 0; border-top: 1px dotted rgba(111,152,147,.35); max-width: 60ch; }
.book li:first-child { border-top: 0; }
.book .who { color: var(--accent); }
.book .when { color: var(--ink-dim); float: right; }
.sign { display: grid; gap: .6em; max-width: 44ch; }
.sign label { display: grid; gap: .25em; color: var(--ink-dim); }
.sign input, .sign textarea {
  font: inherit; color: var(--ink); background: rgba(120,241,221,.06);
  border: 1px solid rgba(111,152,147,.5); border-radius: 2px; padding: .4em .6em;
}
.sign input:focus, .sign textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sign button {
  font: inherit; font-weight: 600; justify-self: start; cursor: pointer;
  color: #06131a; background: var(--accent); border: 0; border-radius: 2px; padding: .45em .9em;
}
.colophon { margin-top: 2.2em; padding-top: .8em; border-top: 1px dashed rgba(111,152,147,.5); color: var(--ink-dim); font-size: .9em; max-width: 60ch; }

/* ---------- the real buttons, as hotspots ---------- */
.btn {
  position: absolute;
  width: 5.7%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
  transition: box-shadow .15s, background .15s;
}
.btn:hover { background: rgba(255,255,255,.14); box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 14px rgba(255,255,255,.35); }
.btn:active, .btn.pressed { background: rgba(0,0,0,.28); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(120,241,221,.8), 0 0 16px rgba(120,241,221,.7); }

/* the little round window between VOL+ and STOP is the standby LED */
.led {
  position: absolute; left: 50.7%; top: 89.5%;
  width: 1.2%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ff3b1f;
  box-shadow: 0 0 6px 2px rgba(255,59,31,.7), 0 0 14px 4px rgba(255,59,31,.35);
  transition: .3s;
  pointer-events: none;
}
.telly:not(.off) .led { background: #8bffb0; box-shadow: 0 0 6px 2px rgba(139,255,176,.6), 0 0 12px 3px rgba(139,255,176,.3); }

/* sound toggle: a scrap of masking tape under the set */
.sfx {
  position: absolute; left: -16%; bottom: 4%; transform: rotate(-3deg);
  border: 0; cursor: pointer; padding: .35em .9em .3em;
  background: rgba(238,228,200,.94); color: #3a3226; font: 400 1.05em/1.1 var(--pen);
  box-shadow: 0 .1em .2em rgba(0,0,0,.35); z-index: 3;
}
.sfx::before, .sfx::after { content: ""; position: absolute; top: 0; bottom: 0; width: .5em; background: rgba(238,228,200,.6); }
.sfx::before { left: -.5em; clip-path: polygon(100% 0, 0 20%, 100% 45%, 0 70%, 100% 100%); }
.sfx::after { right: -.5em; clip-path: polygon(0 0, 100% 25%, 0 50%, 100% 75%, 0 100%); }
.sfx[aria-pressed="false"] { text-decoration: line-through; opacity: .8; }
.sfx:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) { .sfx { left: 50%; bottom: auto; top: 101%; transform: translateX(-50%) rotate(-1.5deg); font-size: 13px; } }

@media (max-width: 640px) {
  .telly {
    height: auto; width: 94vw; max-width: none;
    margin: 3vh auto 0;
    filter: drop-shadow(0 10px 14px rgba(20,10,0,.5));
  }
  .phosphor { font-size: calc(max(11px, 2.55cqw) * var(--zoom)); padding: 5cqw 6cqw 6cqw; }
  .btn { width: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .telly.warm .phosphor, .telly.zap .phosphor, .osd.show { animation: none; }
  .osd.show { opacity: 1; }
  .phosphor .cursor::after { animation: none; }
}