/* =========================================================
   Archive page: CRT television, VCR and a pile of VHS tapes.
   Drag a tape into the VCR (or tap it) to play it on the TV.
   ========================================================= */
:root{
  --plastic:#151515; --plastic-hi:#232323; --plastic-lo:#0A0A0A;
  --crt-blue:#1A3BD1; --vfd:#7DF9D0; --label:#F1ECDF; --label-ink:#1B1B1B;
  --marker:"Permanent Marker","Comic Sans MS","Bradley Hand",cursive;
}
.arch{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(28px,5vw,64px);
  align-items:start;padding-block:clamp(28px,5vh,56px) 80px}

/* ---------- Television ---------- */
.set{display:grid;justify-items:center;gap:0;min-width:0}
.tv{width:100%;max-width:720px;display:grid;grid-template-columns:minmax(0,1fr) clamp(62px,11%,96px);gap:clamp(10px,2%,18px);
  padding:clamp(14px,2.6%,24px);border-radius:22px 22px 14px 14px;
  background:linear-gradient(160deg,var(--plastic-hi),var(--plastic) 40%,var(--plastic-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -3px 0 rgba(0,0,0,.6),0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px #000}
.bezel{background:#060606;border-radius:18px;padding:clamp(8px,2.2%,16px);box-shadow:inset 0 0 0 1px #000,inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.screen{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:14% / 18%;overflow:hidden;background:#0b0c0c;isolation:isolate;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.screen.drop-target{box-shadow:inset 0 0 0 2px var(--tally),inset 0 0 40px rgba(0,0,0,.9)}
.scr{position:absolute;inset:0;width:100%;height:100%}
.scr-off{background:radial-gradient(ellipse at 40% 35%,#1a1c1c,#070808 70%)}
.scr-blue{background:var(--crt-blue);color:#fff;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;opacity:0;transition:opacity .2s;
  text-shadow:0 0 6px rgba(255,255,255,.6)}
.screen.on .scr-blue{opacity:1}
.scr-blue.loaded .osd-tl{display:none}
.osd-tl{position:absolute;top:11%;left:12%;font-size:clamp(12px,2.4vw,20px)}
.osd-mid{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(12px,2.2vw,18px);animation:osdBlink 1.4s steps(2) infinite}
@keyframes osdBlink{50%{opacity:.25}}
.scr-static{image-rendering:pixelated;opacity:.9}
.scr-video{background:#000}
.scr-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.osd{position:absolute;z-index:4;top:11%;left:12%;color:#fff;font-family:var(--mono);font-size:clamp(12px,2.4vw,20px);letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 0 6px rgba(255,255,255,.7),2px 2px 0 rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .2s}
.osd.show{opacity:1}
.scr-glass{z-index:5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.10),transparent 45%),
    radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)}
.scr-video:not([hidden]) ~ .scr-glass{opacity:.55}
.scr-on{z-index:6;pointer-events:none;background:#fff;opacity:0;transform:scale(1,.004)}
.screen.powering .scr-on{animation:crtOn .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes crtOn{0%{opacity:1;transform:scale(0,.004)}40%{opacity:1;transform:scale(1,.004)}100%{opacity:0;transform:scale(1,1)}}

.side{display:grid;align-content:start;justify-items:center;gap:14px;padding-top:6px}
.grille{width:100%;height:clamp(70px,14vw,130px);border-radius:6px;background:repeating-linear-gradient(0deg,#050505 0 3px,#1b1b1b 3px 6px);box-shadow:inset 0 0 0 1px #000}
.knob{width:clamp(30px,5.5vw,46px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 20deg,#2b2b2b,#0d0d0d,#2b2b2b,#0d0d0d,#2b2b2b);
  box-shadow:0 2px 4px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.knob::after{content:"";position:absolute;left:50%;top:10%;width:2px;height:28%;background:#555;transform:translateX(-50%)}
.knob.small{width:clamp(22px,4vw,32px)}
.plate{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.3em;padding-left:.3em;color:#6b6b6b;font-variation-settings:"wdth" 120}
.pwr{display:flex;align-items:center;gap:6px}
.pwr i{width:7px;height:7px;border-radius:50%;background:#3b0a0a;transition:background .3s,box-shadow .3s}
.pwr i.on{background:#3BF06B;box-shadow:0 0 8px #3BF06B}
.pwr i.standby{background:var(--tally);box-shadow:0 0 8px var(--tally)}

/* ---------- VCR ---------- */
.vcr{width:92%;max-width:660px;margin-top:10px;display:flex;align-items:center;gap:clamp(10px,3%,24px);padding:12px clamp(12px,3%,22px);
  border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,#1e1e1e,#121212 60%,#0b0b0b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 30px -16px rgba(0,0,0,.9),0 0 0 1px #000}
.slot{position:relative;flex:1 1 auto;min-width:0;height:clamp(30px,5vw,40px);border-radius:3px;background:#050505;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.05);display:grid;place-items:center;transition:box-shadow .2s}
.flap{position:absolute;inset:4px 6px;border-radius:2px;background:linear-gradient(180deg,#1a1a1a,#0e0e0e);transition:transform .3s;transform-origin:top}
.slot .drop-hint{position:relative;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--tally);opacity:0;transition:opacity .2s}
.slot.drop-target{box-shadow:inset 0 0 0 1px var(--tally),0 0 18px rgba(255,24,36,.35)}
.slot.drop-target .flap{transform:scaleY(.15)}
.slot.drop-target .drop-hint{opacity:1}
.slot.loaded .flap{background:linear-gradient(180deg,#121212,#070707)}
.vcr-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.vfd{font-family:var(--mono);font-size:clamp(12px,2vw,16px);letter-spacing:.08em;color:var(--vfd);text-shadow:0 0 8px rgba(125,249,208,.7);
  background:#020504;padding:6px 10px;border-radius:2px;min-width:92px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px #0c1a15}
.vfd.blink{animation:osdBlink 1s steps(2) infinite}
.vbtn{background:linear-gradient(180deg,#2a2a2a,#161616);border:1px solid #000;color:#bdbdbd;border-radius:3px;padding:6px 9px;cursor:pointer;
  font-size:12px;display:inline-flex;align-items:center;gap:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.vbtn span{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.vbtn:hover:not(:disabled){color:var(--bone);border-color:var(--tally)}
.vbtn:disabled{opacity:.4;cursor:default}
.vbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.now{margin-top:22px;min-height:44px;display:grid;justify-items:center;gap:6px;text-align:center}
.now .title{font-family:var(--marker);font-size:clamp(20px,2.6vw,28px);color:var(--bone);line-height:1.1}
.now .note{font-family:var(--body);font-size:15px;color:var(--dim)}
.now a{color:var(--tally);font-size:11px;letter-spacing:.08em}

/* ---------- The pile ---------- */
.pile-wrap{display:grid;gap:14px;min-width:0}
.pile-cap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.faint{color:var(--faint)}
.pile{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pile li{transition:height .35s cubic-bezier(.2,.8,.2,1),opacity .25s;height:58px}
.pile li.out{height:0;opacity:0;pointer-events:none}
.vhs{all:unset;box-sizing:border-box;display:block;width:100%;height:54px;position:relative;cursor:grab;border-radius:3px;
  background:linear-gradient(180deg,#1b1b1b,#0d0d0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 6px rgba(0,0,0,.7),0 0 0 1px #000;
  transform:translateX(var(--dx,0)) rotate(var(--rot,0deg));transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.vhs::before,.vhs::after{content:"";position:absolute;top:8px;bottom:8px;width:9%;background:repeating-linear-gradient(90deg,#0a0a0a 0 2px,#202020 2px 4px);border-radius:2px}
.vhs::before{left:6px}.vhs::after{right:6px}
.vhs:hover{transform:translateX(calc(var(--dx,0px) - 14px)) rotate(0deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 16px rgba(0,0,0,.8),0 0 0 1px #000}
.vhs:focus-visible{outline:2px solid var(--tally);outline-offset:2px}
.vhs:active{cursor:grabbing}
.vhs.lifted{opacity:.25}
.sticker{position:absolute;left:13%;right:13%;top:7px;bottom:7px;background:var(--label);border-radius:1px;display:flex;align-items:center;gap:8px;
  padding:0 10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sticker::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--stripe,#B3121B)}
.sticker .t{font-family:var(--marker);color:var(--label-ink);font-size:17px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
  padding-left:4px;transform:rotate(var(--tilt,0deg))}
.sticker .y{font-family:var(--marker);color:#555;font-size:12px;flex:0 0 auto}
.sticker .spec{position:absolute;right:8px;top:2px;font-family:var(--mono);font-size:6.5px;letter-spacing:.12em;color:#8a8478;text-transform:uppercase}
.ghost{position:fixed;z-index:40;pointer-events:none;margin:0;transform-origin:center;transition:none!important;box-shadow:0 24px 40px rgba(0,0,0,.85)!important}

@media (max-width:860px){
  .arch{grid-template-columns:1fr}
  .pile-wrap{max-width:520px;width:100%;justify-self:center}
}
@media (max-width:480px){
  .vcr{width:100%}
  .vfd{min-width:76px;padding:5px 7px}
  .vbtn span{display:none}
  .sticker .t{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .vhs,.pile li,.flap{transition:none}
  .osd-mid,.vfd.blink{animation:none}
  .screen.powering .scr-on{animation:none}
}

/* ---------- Full screen TV ---------- */
.vbtn svg{width:12px;height:12px}
.fs-exit{position:absolute;z-index:8;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));display:none;
  align-items:center;gap:8px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);color:#fff;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:3px;cursor:pointer;opacity:.55;transition:opacity .2s}
.fs-exit:hover,.fs-exit:focus-visible{opacity:1}
.fs-exit kbd{font-family:inherit;border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:1px 4px;font-size:9px}
/* real full screen, and a fallback for browsers that can't (e.g. iPhone) */
.screen:fullscreen,.screen.fs-fallback{border-radius:0;width:100%;height:100%;aspect-ratio:auto;max-width:none;background:#000}
.screen.fs-fallback{position:fixed;inset:0;z-index:100}
.screen:fullscreen .fs-exit,.screen.fs-fallback .fs-exit{display:inline-flex}
.screen:fullscreen .scr-glass,.screen.fs-fallback .scr-glass{opacity:.25}
.screen:fullscreen .scr-video:not([hidden]) ~ .scr-glass,.screen.fs-fallback .scr-video:not([hidden]) ~ .scr-glass{opacity:.12}
.screen:fullscreen .osd,.screen.fs-fallback .osd{top:6%;left:5%}
.screen:fullscreen .osd-tl,.screen.fs-fallback .osd-tl{top:6%;left:5%}
body.fs-lock{overflow:hidden}