/* ======================================================================
   Videos (v1, Oct 2026) — the VHS room.
   A colour monitor, a VCR and a 16-bit console in the same oak cabinet as
   the tape deck, and a rack of VHS tapes below it, newest first.
   Materials, keys and the etched Life Long mark are the deck's own.
   ====================================================================== */

.videos-body .site-head__tag{color:#d8ffd2}

.vroom{max-width:1000px;margin:.5rem auto 4rem;padding:0 clamp(10px,3vw,24px)}
.vroom__cabinet{display:grid;gap:14px;max-width:none;margin:0 0 22px}

/* ---- the etched mark (shared) ----------------------------------------- */
.engrave{position:relative;display:block;height:40px;opacity:.85}
.engrave::before,.engrave::after{
  content:"";position:absolute;inset:0;
  -webkit-mask:url(../assets/brand/lifelong-logo-official-black-transparent-600.webp) left center/contain no-repeat;
          mask:url(../assets/brand/lifelong-logo-official-black-transparent-600.webp) left center/contain no-repeat}
/* on brushed metal: grey cut, light catching the lower edge */
.engrave::after{transform:translate(1.1px,1.1px);background:#fffffff2}
.engrave::before{z-index:1;background:linear-gradient(170deg,#6c6e67,#94968e);filter:drop-shadow(-1.1px -1.1px 0 rgba(20,21,18,.62))}
/* on dark plastic: the cut reads darker than the shell, lit from above */
.engrave--dark::after,.tv__engrave::after,.console__engrave::after{background:rgba(255,255,255,.16)}
.engrave--dark::before,.tv__engrave::before,.console__engrave::before{background:linear-gradient(170deg,#0d0d0c,#232320);filter:drop-shadow(-1px -1px 0 rgba(0,0,0,.7))}

/* ---- the monitor ------------------------------------------------------- */
.tv{position:relative}
.tv__shell{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;
  padding:22px 22px 24px;border-radius:26px 26px 20px 20px;
  background:
    radial-gradient(140% 90% at 30% 0%,rgba(255,255,255,.10),transparent 55%),
    repeating-radial-gradient(circle at 37% 61%,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#45443f,#2f2e2a 60%,#262521);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.65),0 3px 8px rgba(0,0,0,.45),
             inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.35)}
.tv__bezel{
  padding:16px;border-radius:30px/26px;
  background:linear-gradient(180deg,#1d1d1a,#2a2925 70%,#34332e);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.07)}
.tv__screen{
  position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  border-radius:11% / 13%;background:#040604;
  box-shadow:inset 0 0 40px rgba(0,0,0,.95),0 0 0 2px #0b0b0a,0 0 26px rgba(120,220,190,.10)}
.tv__player,.tv__static,.tv__blue,.tv__game,.tv__tracking,.tv__osd,.tv__glass{position:absolute;inset:0}
.tv__player{z-index:1;background:#000;opacity:0;transition:opacity .35s ease}
.tv.has-picture .tv__player{opacity:1}
.tv__player iframe{display:block;width:100%;height:100%;border:0;filter:saturate(1.12) contrast(1.06) brightness(1.02)}
.tv__static{z-index:2;width:100%;height:100%;image-rendering:pixelated;opacity:.85}
.tv.has-picture .tv__static,.tv.is-blue .tv__static,.tv.on-game .tv__static{opacity:0}
.tv__blue{
  z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  background:#1838c4;color:#fff;font:700 clamp(14px,3.3vw,30px)/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;
  text-shadow:2px 2px 0 rgba(0,0,30,.55)}
.tv__blue-mark{width:42%;height:22%;background:#fff;opacity:.92;
  -webkit-mask:url(../assets/brand/lifelong-logo-official-black-transparent-600.webp) center/contain no-repeat;
          mask:url(../assets/brand/lifelong-logo-official-black-transparent-600.webp) center/contain no-repeat}
.tv__osd{
  z-index:6;padding:7% 9%;pointer-events:none;
  font:700 clamp(12px,2.6vw,24px)/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  color:#f2fff0;text-shadow:0 0 6px rgba(140,255,170,.55),2px 2px 0 rgba(0,0,0,.6);white-space:pre-line;
  opacity:0;transition:opacity .2s ease}
.tv__osd.is-on{opacity:1}
.tv__tracking{z-index:5;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:
    linear-gradient(180deg,transparent 0 18%,rgba(255,255,255,.22) 19%,transparent 21% 63%,rgba(255,255,255,.16) 64%,rgba(255,255,255,.05) 66%,transparent 68%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 5px)}
.tv.is-scanning .tv__tracking{opacity:1;animation:vroom-tracking .45s steps(6) infinite}
@keyframes vroom-tracking{0%{background-position:0 0,0 0}100%{background-position:0 120%,7px 0}}
.tv__glass{z-index:7;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px),
    radial-gradient(120% 95% at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%),
    linear-gradient(115deg,rgba(255,255,255,.10) 0 12%,rgba(255,255,255,.03) 24%,transparent 36%)}
.tv.is-warming .tv__screen::after{content:"";position:absolute;inset:0;z-index:8;background:#000;animation:vroom-warm .7s ease-out forwards}
@keyframes vroom-warm{0%{clip-path:inset(49.6% 0 49.6% 0);background:#dfffe8}45%{clip-path:inset(49% 0 49% 0);background:#dfffe8}100%{clip-path:inset(50% 0 50% 0);background:#000}}

.tv__side{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:6px 0 2px}
.tv__engrave{height:46px;opacity:.95}
.tv__model{margin:-4px 0 0;color:#8f8d84;font:700 .56rem/1.3 Helvetica Neue,Arial,sans-serif;letter-spacing:.14em}
.tv__inputs{display:grid;gap:7px}
.tv__input.btn{width:100%;flex:none;height:40px;min-height:40px;font-size:.58rem}
.tv__input[aria-pressed=true]{background:linear-gradient(145deg,#cfd0ca,#b4b5af 45%,#9c9d97);box-shadow:0 0 #86877f,0 1px 2px #00000059,inset 0 1px 3px #00000052;transform:translateY(2px)}
.tv__grille{flex:1 1 auto;min-height:70px;border-radius:8px;
  background:repeating-linear-gradient(90deg,#111110 0 3px,#3a3934 3px 5px,transparent 5px 8px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.07)}
.tv__power{display:flex;align-items:center;gap:7px;margin:0;color:#8f8d84;font:700 .56rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.14em}
.tv__foot{height:12px;margin:0 22%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#1e1d1a,#33322d);box-shadow:0 8px 14px -6px rgba(0,0,0,.6)}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3b2b29;box-shadow:inset 0 0 2px #000a}
.led--green.is-lit,.tv.is-on .tv__power .led{background:#5cf08f;box-shadow:0 0 8px #5cf08f}
.led--red.is-lit{background:var(--led-red,#e2483a);box-shadow:0 0 8px var(--led-red,#e2483a)}

/* ---- VCR + console ---------------------------------------------------- */
.av-stack{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px;align-items:stretch}
.vcr{
  position:relative;display:grid;gap:12px;padding:14px 16px 16px;border-radius:6px;
  background:linear-gradient(175deg,#ffffff8a,#b9bab580 48%,#76777261),url(../assets/materials/silver-painted-metal-seamless-v32.webp) center/440px auto;
  background-blend-mode:soft-light,normal;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.18)}
.vcr__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vcr__engrave{flex:0 1 150px;height:34px}
.vcr__model{color:#55564f;font:800 .52rem/1.2 Helvetica Neue,Arial,sans-serif;letter-spacing:.16em;text-align:right}
.vcr__front{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:stretch}
.vcr__slot{position:relative;min-height:70px;border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,#0c0c0b,#22221f);box-shadow:inset 0 3px 8px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.6)}
.vcr__flap{position:absolute;left:5%;right:5%;top:22%;bottom:22%;border-radius:2px;transform-origin:50% 0;
  background:linear-gradient(180deg,#2c2c29,#1a1a18);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.vcr__slot.is-open .vcr__flap{transform:perspective(200px) rotateX(-62deg)}
.vcr__slot.has-tape .vcr__flap::after{content:"";position:absolute;left:18%;right:18%;top:-3px;height:3px;border-radius:1px;background:#f1eee5;box-shadow:0 0 3px rgba(0,0,0,.5)}
.vcr__loaded{position:absolute;left:12%;right:12%;top:-120%;z-index:3;pointer-events:none}
.vcr__loaded.is-inserting{animation:vroom-insert .9s cubic-bezier(.4,.1,.3,1) forwards}
.vcr__loaded.is-ejecting{animation:vroom-insert .7s cubic-bezier(.4,.1,.3,1) reverse forwards}
@keyframes vroom-insert{0%{top:-120%;opacity:0}20%{top:-70%;opacity:1}100%{top:40%;opacity:1}}

.vcr__vfd{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 10px;align-content:center;
  padding:10px 12px;border-radius:6px/8px;background:#060a09;color:#7ff5dc;
  font:700 .7rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  text-shadow:0 0 6px rgba(127,245,220,.65);
  box-shadow:inset 0 0 18px rgba(0,0,0,.95),inset 0 0 2px rgba(120,220,220,.25),0 1px 0 rgba(255,255,255,.65)}
.vcr__mode{color:#f2b134;text-shadow:0 0 6px rgba(242,177,52,.6)}
.vcr__counter{justify-self:end;font-size:1.05rem;letter-spacing:.12em}
.vcr__title{grid-column:1/-1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.62rem;opacity:.9}
.vcr__keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.vcr__key.btn{width:100%;flex:none;height:48px;flex-direction:column;gap:3px;font-size:.52rem;padding:0 2px}
.vcr__key.btn span{font-size:.72rem;letter-spacing:-.05em;line-height:1}
.vcr__key.is-latched{background:linear-gradient(145deg,#cfd0ca,#b4b5af 45%,#9c9d97);box-shadow:0 0 #86877f,0 1px 2px #00000059,inset 0 1px 3px #00000052;transform:translateY(2px)}
.vcr__key--eject span{font-size:.8rem}

.console{
  display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#232322,#141413);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.console__top{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:16px 14px 10px;
  background:repeating-radial-gradient(circle at 50% 120%,#1a1a19 0 6px,#262624 6px 8px)}
.console__slot{width:78%;padding:6px;border-radius:5px;background:#090909;box-shadow:inset 0 2px 6px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.08)}
.console__cart{position:relative;height:54px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#3a3a37,#262624);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transform:translateY(-14px)}
.console__cart-label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:82%;height:72%;border-radius:2px;
  background:linear-gradient(135deg,#f6f1e2,#e6dfc9);color:#1d1b17;font:900 .78rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.12em;font-style:italic}
.console__cart-label small{margin-top:3px;font:700 .44rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.18em;font-style:normal;color:#b0362a}
.console__front{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-top:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.console__engrave{flex:1 1 auto;height:26px}
.console__bits{color:#c9a54a;font:900 italic .7rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.1em}
.console__key.btn{flex:none;width:auto;height:38px;min-height:38px;padding:0 10px;gap:6px;font-size:.52rem}

/* VIDEO 2: the rally title screen */
.tv__game{z-index:4;background:#2b5fd6;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9%;gap:3%}
.game-title{position:absolute;inset:0}
.game-title__sky{position:absolute;inset:0 0 45% 0;background:linear-gradient(180deg,#2b5fd6,#7fb0ff 70%,#ffd59a)}
.game-title__hills{position:absolute;left:-5%;right:-5%;top:46%;height:12%;
  background:radial-gradient(60% 120% at 20% 100%,#2f6b2f 60%,transparent 61%),radial-gradient(55% 110% at 70% 100%,#3c7d34 60%,transparent 61%);transform:translateY(-55%)}
.game-title{background:linear-gradient(180deg,transparent 54%,#5d8a33 54%,#3f6b25)}
.game-title__road{position:absolute;inset:54% 0 0 0;
  background:
    linear-gradient(180deg,#b88e58,#8f6a3a);
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%)}
.game-title__road::after{content:"";position:absolute;left:49.3%;right:49.3%;top:0;bottom:0;
  background:repeating-linear-gradient(180deg,#f3eedc 0 18px,transparent 18px 36px)}
@media (prefers-reduced-motion:no-preference){.tv.on-game .game-title__road::after{animation:vroom-road .45s linear infinite}}
@keyframes vroom-road{to{background-position:0 36px}}
.game-title__name{position:relative;margin:0;color:#fff;font:900 italic clamp(18px,5vw,44px)/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.04em;
  text-shadow:3px 3px 0 #b0362a,6px 6px 0 rgba(0,0,0,.35)}
.game-title__press{position:relative;margin:0;color:#fff7c2;font:700 clamp(10px,2.2vw,18px)/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;text-shadow:2px 2px 0 #000}
@media (prefers-reduced-motion:no-preference){.game-title__press{animation:vroom-blink 1.1s steps(1) infinite}}
@keyframes vroom-blink{50%{opacity:0}}

/* ---- the VHS rack ----------------------------------------------------- */
.vhs-library__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 2px 8px}
.vhs-library__title{margin:0;color:#f2efe8;font:800 .82rem/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.vhs-library__note{margin:0;color:rgba(242,239,232,.75);font-size:.72rem}
.vhs-library__foot{margin:10px 2px 0;font-size:.72rem}
.vhs-library__foot a{color:#d8ffd2}
.vhs-rack{border-radius:4px}
.vhs-rack .shelf__row{align-items:flex-end;justify-content:flex-start;gap:4px;min-height:242px}

.vhs{
  --vhs-w:42px;
  position:relative;flex:0 0 var(--vhs-w);width:var(--vhs-w);height:228px;padding:6px 5px 20px;
  appearance:none;border:0;border-radius:2px;cursor:pointer;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#0d0d0c,#2a2a27 18%,#1c1c1a 50%,#2a2a27 82%,#0d0d0c);
  box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .18s ease,box-shadow .18s ease,opacity .25s ease}
.vhs:hover{transform:translateY(-8px);box-shadow:0 10px 14px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.vhs:focus-visible{outline:2px solid var(--focus,#f2b134);outline-offset:2px}
.vhs.is-out{opacity:.08;transform:none;pointer-events:none}
.vhs__label{display:flex;flex-direction:column;height:100%;border-radius:1px;overflow:hidden;
  background:linear-gradient(90deg,#e9e5d8,#f7f4ea 30%,#f7f4ea 70%,#e4dfd0);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.vhs__thumb{flex:0 0 auto;aspect-ratio:1;background:#111 center/cover no-repeat;border-bottom:2px solid #b0362a}
.vhs__text{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 0;
  writing-mode:vertical-rl;transform:rotate(180deg);text-align:left;overflow:hidden}
.vhs__title,.vhs__artist{display:block;min-inline-size:0;max-inline-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhs__title{color:#1d1b17;font:800 .64rem/1.15 Helvetica Neue,Arial,sans-serif;letter-spacing:.01em}
.vhs__artist{color:#6b665b;font:600 .5rem/1.15 Helvetica Neue,Arial,sans-serif}
.vhs__year{flex:0 0 auto;padding:2px 0 3px;border-top:1px solid rgba(0,0,0,.12);color:#3a3730;font:700 .5rem/1 ui-monospace,Menlo,monospace;text-align:center}
.vhs__brand{position:absolute;left:4px;right:4px;bottom:4px;height:12px;opacity:.9}
.vhs__brand::before,.vhs__brand::after{-webkit-mask-position:center;mask-position:center}

/* The tape that goes in: a VHS seen face-on, white label with the still */
.vhs-face{position:relative;aspect-ratio:188/104;border-radius:3px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2a2a27,#151514);
  box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.vhs-face__label{position:absolute;left:14%;right:14%;top:8%;height:46%;display:grid;grid-template-columns:auto 1fr;gap:6%;align-items:center;padding:3% 4%;
  border-radius:2px;background:#f6f3ea;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.vhs-face__thumb{height:100%;aspect-ratio:16/9;background:#111 center/cover no-repeat}
.vhs-face__text{min-width:0;color:#1d1b17;font:800 .55rem/1.15 Helvetica Neue,Arial,sans-serif;overflow:hidden}
.vhs-face__text small{display:block;color:#6b665b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhs-face__window{position:absolute;left:28%;right:28%;bottom:12%;height:24%;border-radius:3px;background:linear-gradient(180deg,#0b0b0a,#1b1a18);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9)}

/* ---- small screens --------------------------------------------------- */
@media (max-width:760px){
  .tv__shell{grid-template-columns:minmax(0,1fr);padding:14px 14px 16px;gap:12px}
  .tv__bezel{padding:10px}
  .tv__side{display:grid;grid-template-columns:1fr auto;grid-template-areas:"mark inputs" "model power";align-items:center;gap:6px 12px;padding:0}
  .tv__engrave{grid-area:mark;height:30px}
  .tv__model{grid-area:model;margin:0}
  .tv__inputs{grid-area:inputs;grid-template-columns:1fr 1fr}
  .tv__input.btn{height:36px;min-height:36px;padding:0 10px}
  .tv__power{grid-area:power;justify-content:flex-end}
  .tv__grille{display:none}
  .av-stack{grid-template-columns:minmax(0,1fr)}
  .vcr__front{grid-template-columns:minmax(0,1fr)}
  .vcr__slot{min-height:56px}
  .vcr__keys{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vhs{--vhs-w:36px;height:196px}
  .vhs-rack .shelf__row{min-height:208px}
}
@media (prefers-reduced-motion:reduce){
  .vhs,.vcr__flap{transition:none}
  .tv.is-scanning .tv__tracking{animation:none}
  .vcr__loaded.is-inserting,.vcr__loaded.is-ejecting,.tv.is-warming .tv__screen::after{animation-duration:.01s}
}

/* v1.1 — videos page without the console: the VCR takes the full width */
.tv__channel{margin:0;padding:6px 8px;border-radius:5px;background:#060a09;color:#7ff5dc;text-align:center;
  font:700 .74rem/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;text-shadow:0 0 6px rgba(127,245,220,.6);
  box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.av-stack--single{grid-template-columns:minmax(0,1fr)}
@media (max-width:760px){.tv__channel{grid-area:inputs;justify-self:end;padding:6px 12px}}