:root {
  --sky: #1f86dd;
  --sky-deep: #0f5fb0;
  --cloud: #eef0f3;
  --cloud-edge: #3f9ae0;
  --grass: #4c9e27;
  --rust: #e2652a;
  --paper: #f8f4e8;
  --ink: #1c1712;
  --tv-case: #2b2219;

  --clip-cyan: #16cbe8;
  --clip-teal: #18b5ac;
  --clip-magenta: #ee2c97;
  --clip-orange: #f79c2d;

  --lav-ink: #2e2b3a;

  --cur-arrow: url("assets/cursor-arrow.png") 0 0, default;
  --cur-hand: url("assets/cursor-hand.png") 10 0, pointer;
  --cur-grab: url("assets/cursor-grab.png") 16 12, grab;

  --display: "Alfa Slab One", Rockwell, Georgia, serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --tv: min(82svh, 82vw); /* the set is the centrepiece; the name stands either side of it */
  --rtv: min(88svh, 86vw); /* fit the full TV in the reel close-up */
}

* { box-sizing: border-box; }
html { cursor: var(--cur-arrow); }
a, button, [role="button"] { cursor: var(--cur-hand); }
body {
  margin: 0;
  background: var(--sky);
  color: #fff;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 3px solid var(--clip-orange); outline-offset: 3px; }
main { position: relative; z-index: 1; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

/* The sky behind everything ------------------------------------------ */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky); }
.sky-img { position: absolute; left: 0; top: 0; width: 100%; height: 165%; object-fit: cover; object-position: 50% 0; filter: saturate(.92) brightness(.92); }
.cloud { position: absolute; max-width: none; opacity: .95; mix-blend-mode: lighten; will-change: transform; }
.cloud-a { width: clamp(320px, 42vw, 720px); left: -8%; top: 12%; }
.cloud-b { width: clamp(260px, 30vw, 520px); right: -6%; top: 46%; }
.cloud-c { width: clamp(200px, 22vw, 400px); left: 38%; top: 72%; opacity: .75; }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 30; background: var(--rust); transform: scaleX(0); transform-origin: 0 50%; }

/* Nav ---------------------------------------------------------------- */
.nav {
  position: fixed; inset: 14px 20px auto; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.brand, .nav-pills, .nav-mail { background: rgba(28, 23, 18, .8); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; color: #fff; padding: 6px 16px 6px 6px; border-radius: 12px; }
.brand-tile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--rust); font: 400 15px/1 var(--display); }
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-size: 14px; font-weight: 600; }
.brand-text small { font: 400 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.nav-pills { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.nav-pills a { padding: 7px 14px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.nav-pills a:hover, .nav-pills a.is-here { background: var(--paper); color: var(--ink); }
.nav-mail { justify-self: end; padding: 9px 16px; border-radius: 999px; color: #fff; font: 400 12px var(--mono); text-decoration: none; transition: background .2s; }
.nav-mail:hover { background: var(--rust); }

/* Roaming butterfly -------------------------------------------------- */
.roamer { position: fixed; left: 0; top: 0; z-index: 15; width: clamp(64px, 8.5vw, 124px); pointer-events: none; perspective: 500px; will-change: transform; }
.roamer-tilt { will-change: transform; }
.roamer img, .fly img { width: 100%; animation: flap .3s ease-in-out infinite alternate; filter: drop-shadow(10px 22px 10px rgba(10, 40, 80, .28)); }
.roamer.is-landed img { animation-duration: 1.5s; }
@keyframes flap { from { transform: rotateY(-8deg) rotateX(14deg); } to { transform: rotateY(52deg) rotateX(20deg); } }

/* Hero --------------------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--sky); }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  filter: saturate(.92) brightness(1.05);
  transform-origin: 50% 100%;
}
.tagline {
  position: absolute; z-index: 1; left: 0; right: 0; top: clamp(76px, 10svh, 96px);
  padding-inline: 24px;
  text-align: center; color: #fff;
  font: italic 400 clamp(18px, 2vw, 32px)/1.1 var(--serif);
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(6, 50, 105, .7), 0 1px 14px rgba(6, 50, 105, .7);
}
.title { position: absolute; z-index: 1; inset: 0; margin: 0; font: 400 100px/.86 var(--display); color: #f7f9fb; pointer-events: none; }
.title-word { position: absolute; display: block; white-space: nowrap; transform: scaleY(var(--sy, 1.5)); transform-origin: 50% 100%; }
.title-inner b, .slab b { display: inline-block; font-weight: 400; }
.title-inner b { text-shadow: .01em .004em 0 var(--cloud-edge), 0 .05em .16em rgba(5, 45, 100, .42); }

.set {
  position: absolute; z-index: 2; left: 50%; bottom: 0;
  width: var(--tv); height: var(--tv); margin-left: calc(var(--tv) / -2);
  will-change: transform;
}
.set-pop { width: 100%; height: 100%; position: relative; }
.set-img { width: 100%; height: 100%; }
.set .set-img { filter: drop-shadow(0 18px 30px rgba(20, 50, 15, .35)); }

/* The TV screen sits exactly over the blank glass in tv.png */
.screen {
  position: absolute; left: 27.5%; top: 13.3%; width: 43%; height: 33.6%;
  padding: 0; border: 0; overflow: hidden;
  border-radius: 9% / 11%;
  background: #0d0c0b;
  isolation: isolate;
}
button.screen { cursor: var(--cur-hand); }
.ch { position: absolute; inset: 0; opacity: 0; transition: opacity .12s; }
.ch.is-on { opacity: 1; }
.glass {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255, 255, 255, .17), transparent 42%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 calc(var(--tv) * .05) rgba(0, 0, 0, .85);
  animation: flicker 5s steps(40) infinite;
}
@keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .78; } 98.5% { opacity: .92; } }
.osd {
  position: absolute; z-index: 2; top: 8%; right: 7%;
  color: #7dff8a; font: 500 calc(var(--tv) * .019)/1 var(--mono);
  text-shadow: 0 0 6px rgba(125, 255, 138, .8);
}

/* Channel 1: an edit timeline */
.ch-edit { filter: blur(.5px) saturate(1.1); background: #10242b; display: flex; flex-direction: column; justify-content: center; gap: 2.5%; padding: 14% 0 6%; }
.ch-edit::after { content: ""; position: absolute; top: 0; bottom: 0; left: 62%; width: 2px; background: #6fc7ff; box-shadow: 0 0 8px #6fc7ff; }
.track { flex: 1; min-height: 0; overflow: hidden; }
.track-in { display: flex; gap: 1%; height: 100%; width: max-content; animation: roll var(--t, 26s) linear infinite; }
@keyframes roll { to { transform: translateX(-50%); } }
.clip {
  flex: none; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  border-radius: 3px; color: rgba(15, 25, 30, .85);
  font: 500 calc(var(--tv) * .012)/1 var(--mono); white-space: nowrap; overflow: hidden;
}
.clip i { font-style: italic; padding: 1px 3px; border-radius: 2px; background: #f4d27a; font-size: .85em; }

/* Channel 2: colour bars */
.ch-bars { background: linear-gradient(90deg, #d8d8d8 0 14.3%, #d8d214 0 28.6%, #14d2d2 0 42.9%, #14d214 0 57.2%, #d214d2 0 71.5%, #d21414 0 85.8%, #1414d2 0); }
.ch-bars::after { content: ""; position: absolute; inset: 72% 0 0; background: linear-gradient(90deg, #141496 0 25%, #eee 0 50%, #3c0f78 0 75%, #111 0); }

/* Channel 3: static */
.ch-noise {
  inset: -60%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: snow .35s steps(5) infinite;
}
@keyframes snow { 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 3%); } }

/* Small hero butterfly and floating seeds */
.fly { position: absolute; z-index: 3; perspective: 500px; pointer-events: none; }
.fly-b { width: clamp(30px, 3.4vw, 52px); right: 11%; top: 34%; animation: drift-b 23s ease-in-out infinite; }
.fly-b img { animation-duration: .24s; }
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) rotate(12deg); }
  33% { transform: translate(-6vw, 9svh) rotate(-14deg); }
  66% { transform: translate(3vw, 18svh) rotate(20deg); }
}
.motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.motes span {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; opacity: .85; filter: blur(1px);
  animation: float var(--d) ease-in-out infinite alternate; animation-delay: var(--w);
}
@keyframes float { to { transform: translate(var(--x), var(--y)); opacity: .25; } }

.hero-side { position: absolute; z-index: 4; bottom: clamp(20px, 5svh, 44px); }
.hero-left { left: clamp(16px, 3vw, 44px); }
.hero-right { right: clamp(16px, 3vw, 44px); }
.status {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 500 12px var(--mono); letter-spacing: .02em;
}
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--grass); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 158, 39, .55); } 100% { box-shadow: 0 0 0 9px rgba(76, 158, 39, 0); } }

.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: var(--cur-hand); border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: box-shadow .15s, background .15s;
}
.btn:hover { box-shadow: 0 2px 0 var(--ink); }
.btn:active { box-shadow: none; }
.btn-rust { background: var(--rust); }

/* Ticker: continues the orange of the TV stand */
.ticker { position: relative; z-index: 3; overflow: hidden; padding: 12px 0; background: var(--rust); border-block: 3px solid var(--ink); color: var(--ink); }
.ticker-track { display: flex; width: max-content; font: 400 clamp(22px, 2.8vw, 38px)/1 var(--display); text-transform: uppercase; }
.ticker-track span { padding-inline: .55em; white-space: nowrap; }
.ticker-track span:nth-child(even) { color: var(--paper); }

/* Headlines in the hero's style -------------------------------------- */
.slab { font: 400 clamp(56px, 10vw, 150px)/1 var(--display); text-transform: uppercase; color: var(--cloud); }
.slab .line { display: block; white-space: nowrap; line-height: 1.34; transform: scaleY(1.45); transform-origin: 50% 100%; }
.slab b { text-shadow: .018em .012em 0 var(--cloud-edge), .032em .022em 0 var(--sky-deep); }
.slab-giant { font-size: min(11vw, 30svh, 200px); text-align: center; margin-top: .42em; }
.slab-wide { font-size: min(10.2vw, 21svh); text-align: center; }
.label { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: #fff; }
.note { max-width: 36ch; font-size: 18px; line-height: 1.4; color: #fff; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }

/* About: lavender, from your reference ------------------------------- */
.about {
  position: relative; z-index: 2; height: 100svh; min-height: 640px; overflow: hidden; color: var(--lav-ink);
  background:
    linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 124px 124px,
    linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 124px 124px,
    linear-gradient(112deg, #f4e7ff 0%, #e7dbff 42%, #d4cbff 70%, #a8a2ff 100%);
}
.about-glow { position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(38% 42% at 72% 30%, rgba(160, 150, 255, .5), transparent 70%), radial-gradient(30% 34% at 30% 26%, rgba(170, 155, 255, .45), transparent 70%), radial-gradient(40% 40% at 86% 90%, rgba(255, 220, 255, .55), transparent 70%); animation: glow 16s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translate(4%, -3%) scale(1.08); } }

.figure { --fig: min(112svh, 54vw); position: absolute; width: var(--fig); height: var(--fig); left: calc(var(--fig) * -.05); bottom: calc(var(--fig) * -.13); }
.fig-part { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(1.04) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(26px 10px 26px rgba(120, 105, 255, .55)); }
.fig-body { z-index: 2; }
.fig-top { z-index: 3; transform-origin: 50% 16%; will-change: transform; }

.collage { position: absolute; z-index: 1; left: 14%; width: 76%; top: -3%; height: 25%; }
.piece { position: absolute; visibility: hidden; will-change: transform; filter: drop-shadow(3px 5px 7px rgba(50, 35, 110, .4)); }
.p-vinyl { width: 42%; right: -7%; top: 12%; }
.p-timeline { width: 46%; left: -3%; top: 38%; rotate: -8deg; }
.p-computer { width: 36%; left: 54%; top: -24%; }
.p-bust { width: 36%; left: 22%; top: -10%; filter: grayscale(1) drop-shadow(3px 5px 7px rgba(50, 35, 110, .4)); }
.p-camera { width: 34%; left: 54%; top: 46%; }
.p-chip { display: grid; place-items: center; width: 9%; aspect-ratio: 1; border-radius: 22%; font: 700 clamp(10px, 1.1vw, 17px)/1 var(--body); box-shadow: 0 3px 8px rgba(30, 20, 90, .45); }
.p-ai { left: 18%; top: 22%; background: #2e1a05; color: #ff9a00; }
.p-pr { left: 8%; top: 8%; background: #1e1a78; color: #b9b6ff; }
.p-ae { left: 92%; top: 4%; background: #1e1a78; color: #b9b6ff; }
.p-ps { left: 52%; top: 32%; background: #001e36; color: #31a8ff; }

/* The line over the lower part of the portrait */
.fig-line { position: absolute; z-index: 5; left: 50%; bottom: 17%; translate: -50% 0; padding: .1em .55em .16em; border: 2px solid #fff; background: rgba(46, 43, 58, .82); color: #fff; font: italic 400 calc(var(--fig) * .052)/1.1 var(--serif); letter-spacing: -.01em; white-space: nowrap; pointer-events: none; }

.burst { position: absolute; z-index: 4; left: 50%; width: 0; height: 0; pointer-events: none; }
.burst-ring { position: absolute; width: calc(var(--fig) * .72); aspect-ratio: 1; left: calc(var(--fig) * -.36); top: calc(var(--fig) * -.36); border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 34px #fff, inset 0 0 34px rgba(255, 255, 255, .8); opacity: 0; }
.spark { position: absolute; width: calc(var(--fig) * .035); aspect-ratio: 1; left: calc(var(--fig) * -.0175); top: calc(var(--fig) * -.0175); visibility: hidden; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.spark:nth-child(3n) { background: var(--clip-orange); }
.spark:nth-child(3n + 1) { background: var(--clip-cyan); }
.spark:nth-child(5n) { background: var(--clip-magenta); }
.w { display: inline-block; will-change: transform; }

.about-copy { position: absolute; z-index: 4; right: clamp(24px, 4.5vw, 72px); top: 50%; translate: 0 -50%; width: min(46vw, 760px); margin-top: 16px; }
.frame { position: relative; border: 3px solid #fff; box-shadow: 0 16px 40px rgba(95, 80, 220, .18); }
.frame .h { position: absolute; width: clamp(14px, 1.6vw, 22px); aspect-ratio: 1; background: #fff; box-shadow: 0 2px 6px rgba(80, 65, 200, .3); }
.h1 { left: 0; top: 0; translate: -50% -50%; }
.h2 { right: 0; top: 0; translate: 50% -50%; }
.h3 { left: 0; bottom: 0; translate: -50% 50%; }
.h4 { right: 0; bottom: 0; translate: 50% 50%; }
.frame-title { width: fit-content; padding: clamp(4px, .6vw, 10px) clamp(18px, 2.4vw, 36px) clamp(10px, 1vw, 16px); margin-bottom: clamp(24px, 4svh, 40px); }
.about-title { font: italic 400 clamp(52px, min(7vw, 13svh), 112px)/1.05 var(--serif); letter-spacing: -.02em; color: #3a3845; }
.frame-body { padding: clamp(16px, 2svh, 26px) clamp(18px, 2vw, 30px); margin-bottom: clamp(24px, 4svh, 40px); }
.about-body { font-size: clamp(18px, min(1.9vw, 3.3svh), 29px); line-height: 1.26; letter-spacing: -.028em; font-weight: 400; }
.tools { display: flex; justify-content: space-around; gap: 8px; padding: clamp(12px, 2svh, 22px) clamp(16px, 2.4vw, 36px); border-radius: 999px; background: rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 40px rgba(95, 80, 220, .2); }
.tool { display: grid; place-items: center; width: clamp(40px, min(5vw, 9svh), 72px); aspect-ratio: 1; border-radius: 22%; font: 600 clamp(20px, min(2.6vw, 4.8svh), 40px)/1 var(--body); letter-spacing: -.02em; background: linear-gradient(160deg, #fff, #e9e6f5); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -3px 5px rgba(0, 0, 0, .28), 0 5px 10px rgba(40, 30, 110, .32); transition: translate .2s, rotate .2s; }
.tool:hover { translate: 0 -6px; rotate: -5deg; }
.tool img { width: 60%; height: 60%; object-fit: contain; }

/* Reel --------------------------------------------------------------- */
.reel { position: relative; z-index: 2; }
.reel-stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.reel-meadow { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; -webkit-mask-image: linear-gradient(transparent 38%, #000 56%); mask-image: linear-gradient(transparent 38%, #000 56%); filter: saturate(.92) brightness(1.05); }
.reel-head { position: absolute; z-index: 1; left: 0; right: 0; top: clamp(84px, 15svh, 130px); }
.reel-note { position: absolute; z-index: 4; bottom: clamp(26px, 7svh, 64px); max-width: 300px; padding: 14px 18px; border-radius: 14px; background: rgba(28, 23, 18, .8); backdrop-filter: blur(10px); }
.reel-note-l { left: clamp(20px, 3.4vw, 54px); }
.rset { --tv: var(--rtv); position: absolute; z-index: 2; left: 50%; bottom: 0; width: var(--rtv); height: var(--rtv); margin-left: calc(var(--rtv) / -2); will-change: transform; }
.reel-player { position: absolute; inset: 0; z-index: 2; opacity: 0; background: #0d0c0b; display: grid; place-items: center; }
.reel-player .frame16 { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.reel-player iframe, .reel-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #0d0c0b; }
.reel-grass { position: absolute; z-index: 3; left: 0; bottom: -5%; width: 100%; max-width: none; height: clamp(130px, 25svh, 270px); object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.nosignal { container-type: inline-size; position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4%; background: #101014; color: #fff; text-align: center; overflow: hidden; }
.nosignal .ch-noise { opacity: .32; }
.nosignal b { position: relative; font: 400 10.5cqw/1 var(--display); white-space: nowrap; text-transform: uppercase; text-shadow: .03em 0 var(--clip-magenta), -.03em 0 var(--clip-cyan); font-weight: 400; }
.nosignal small { position: relative; font: 400 max(10px, 1.7cqw)/1.4 var(--mono); padding-inline: 16px; }

/* Work --------------------------------------------------------------- */
.work { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 110px); }
.guide { display: grid; gap: clamp(26px, 4vw, 48px); }
.genre-group { min-width: 0; }
.genre-title { margin: 0 0 12px; color: var(--paper); font: 400 clamp(18px, 2vw, 25px)/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.genre-brands { display: grid; gap: 10px; }
.row { border-radius: 14px; overflow: hidden; background: linear-gradient(rgba(16, 74, 150, .5), rgba(6, 42, 100, .56)); backdrop-filter: blur(9px); border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.2), 0 8px 18px rgba(4,30,70,.26); transition: transform .25s cubic-bezier(.2,.9,.25,1), box-shadow .25s; }
.row:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 28px rgba(4,30,70,.42); }
.row button {
  position: relative; width: 100%; display: grid; grid-template-columns: 62px 1fr 96px minmax(110px, 200px) 66px 44px; gap: 16px; align-items: center;
  padding: clamp(16px, 2vw, 24px) 18px clamp(22px, 2.4vw, 30px) 32px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: var(--cur-hand);
  background-image: linear-gradient(var(--clip), var(--clip));
  background-repeat: no-repeat; background-size: 0 100%;
  transition: background-size .35s cubic-bezier(.2, .9, .25, 1), padding .35s, color .2s;
}
.row button:hover, .row button:focus-visible { background-size: 100% 100%; padding-left: 42px; color: var(--ink); }
/* Film perforations down the left edge */
.row button::before { content: ""; position: absolute; left: 9px; top: 7px; bottom: 15px; width: 9px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 7px, transparent 7px 13px); opacity: .7; transition: opacity .2s; }
.row button:hover::before, .row button:focus-visible::before { opacity: 1; background: repeating-linear-gradient(180deg, rgba(20,16,12,.7) 0 7px, transparent 7px 13px); }
/* A small screen with a still from the project */
.row-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 3px solid #1c1712; border-radius: 7px; background: radial-gradient(circle, #24313c, #0b0f13); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 5px 10px rgba(0,0,0,.42); transition: transform .25s cubic-bezier(.2,1.3,.4,1); }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: filter .2s; }
.row-thumb::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), linear-gradient(118deg, rgba(255,255,255,.2), transparent 34%); box-shadow: inset 0 0 8px rgba(0,0,0,.6); }
.row button:hover .row-thumb { transform: rotate(-2deg) scale(1.1); }
.row button:hover .row-thumb img { filter: saturate(1.15) contrast(1.05); }
/* An edit timeline along the bottom; the playhead runs when the row is hovered */
.row-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; height: 8px; padding: 0 2px 2px; background: rgba(0,0,0,.2); }
.row-strip i { display: block; min-width: 0; border-radius: 1px; background: var(--clip); opacity: .55; transition: opacity .2s; }
.row-strip i:nth-child(3n) { opacity: .28; }
.row button:hover .row-strip { background: rgba(20,16,12,.55); }
.row button:hover .row-strip i { opacity: .95; }
.row-head { position: absolute; left: 0; top: -4px; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; opacity: 0; }
.row button:hover .row-head, .row button:focus-visible .row-head { opacity: 1; animation: row-head 2.4s linear infinite; }
@keyframes row-head { to { left: 100%; } }
.row-ch, .row-type, .row-year { font: 400 13px var(--mono); }
.row-title { font: 400 clamp(22px, 3vw, 40px)/1.1 var(--display); text-transform: uppercase; }
.row-go { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid currentColor; border-radius: 50%; font-size: 12px; transition: rotate .3s; }
.row button:hover .row-go { rotate: 120deg; }

/* Hover preview in a tiny TV */
.peek { position: fixed; left: 0; top: 0; z-index: 14; width: 250px; aspect-ratio: 4 / 3; padding: 10px; border-radius: 18px; background: var(--tv-case); box-shadow: 0 18px 40px rgba(5, 30, 70, .5); pointer-events: none; opacity: 0; }
.peek-glass { position: relative; width: 100%; height: 100%; border-radius: 12% / 15%; overflow: hidden; background-color: #111; background-size: cover; background-position: center; }
.peek-glass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 26px rgba(0, 0, 0, .7); }

/* Clients ------------------------------------------------------------ */
.clients { position: relative; padding: clamp(50px, 6vw, 90px) 0 clamp(80px, 9vw, 130px); overflow: hidden; }
.belt { overflow: hidden; padding-block: 7px; }
.belt-track { display: flex; width: max-content; gap: 14px; }
.belt-track li { flex: none; display: grid; place-items: center; min-width: clamp(170px, 20vw, 290px); height: clamp(80px, 8vw, 110px); padding: 0 34px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #17406e; font: 400 clamp(18px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase; box-shadow: 0 10px 24px rgba(5, 50, 110, .25); transition: background .2s; }
.belt-track li:hover { background: var(--clip-orange); }
.belt-track img { max-height: 52px; object-fit: contain; }

/* Contact ------------------------------------------------------------ */
.contact { position: relative; min-height: max(100svh, 680px); display: grid; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; -webkit-mask-image: linear-gradient(transparent 0, #000 42%); mask-image: linear-gradient(transparent 0, #000 42%); filter: saturate(.92) brightness(1.05); }
.contact-body { position: relative; z-index: 2; align-self: start; text-align: center; padding: clamp(120px, 20svh, 180px) 20px 200px; width: 100%; }
.contact-body .label { text-shadow: 0 1px 10px rgba(10, 70, 140, .7); }
.contact-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.contact-grass { position: absolute; z-index: 1; left: 0; bottom: -3%; width: 100%; max-width: none; height: clamp(150px, 30svh, 320px); object-fit: cover; object-position: 50% 100%; pointer-events: none; }

.footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 20px clamp(20px, 3vw, 44px); background: var(--ink); color: var(--paper); font: 400 12px var(--mono); }

/* Video pop-up ------------------------------------------------------- */
/* The video popup: a TV cabinet from the same family as the hero set */
.tube { width: min(1080px, 94vw, calc((100svh - 230px) * 1.78 + 60px)); max-width: none; max-height: none; padding: 0; border: 0; overflow: visible; background: none; color: var(--paper); }
.tube::backdrop { background: radial-gradient(ellipse at 50% 45%, rgba(10, 32, 54, .74), rgba(3, 9, 16, .95)); backdrop-filter: blur(7px); }
.tube[open]::backdrop { animation: tube-backdrop .35s ease-out; }
@keyframes tube-backdrop { from { opacity: 0; } }
.tube-ivy { position: absolute; z-index: 0; left: 0; right: 0; top: 0; aspect-ratio: 6.8; transform: translateY(-58%); background: url("assets/tv-clean.png") 50% 0 / 125% auto no-repeat; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.tube-cabinet {
  position: relative; z-index: 1; padding: 12px 16px 12px; border-radius: 20px;
  background-color: #33261a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .6 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), linear-gradient(#46352a, #2b1f15 60%, #211710);
  box-shadow: inset 0 2px 0 rgba(255,226,186,.3), inset 2px 0 0 rgba(255,226,186,.1), inset -2px 0 0 rgba(0,0,0,.4), inset 0 -3px 0 rgba(0,0,0,.5), 0 10px 0 -1px #150e08, 0 34px 70px rgba(0,0,0,.72), 0 0 130px rgba(120,190,255,.16);
  transform: perspective(1500px) rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg));
  transition: transform .35s ease-out;
}
.tube.is-opening .tube-cabinet { animation: tube-in .62s cubic-bezier(.2, 1.25, .4, 1) backwards; }
.tube.is-opening .tube-ivy { animation: tube-ivy-in .8s .1s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes tube-in { from { opacity: 0; transform: perspective(1500px) translateY(60px) rotateX(14deg) scale(.92); } }
@keyframes tube-ivy-in { from { opacity: 0; transform: translateY(-20%) scale(.96); } }
.tube.is-closing .tube-cabinet { animation: tube-out .36s .12s ease-in forwards; }
.tube.is-closing .tube-ivy { animation: tube-fade .3s .14s forwards; }
@keyframes tube-out { to { opacity: 0; transform: perspective(1500px) translateY(34px) rotateX(-6deg) scale(.96); } }
@keyframes tube-fade { to { opacity: 0; } }

.tube-bar { display: flex; align-items: center; gap: 14px; padding: 2px 4px 12px; }
.tube-osd { flex: none; padding: 6px 9px 5px; border-radius: 4px; background: #070906; color: #7dff8a; font: 500 13px/1 var(--mono); text-shadow: 0 0 7px rgba(125,255,138,.8); box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,226,186,.2); }
.tube-heading { flex: 1; min-width: 0; }
.tube-title { display: block; overflow: hidden; color: #fff8ec; font: 400 clamp(18px, 2vw, 24px)/1.1 var(--display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.tube-type { display: block; overflow: hidden; margin-top: 3px; color: #cdbba2; font: 400 11.5px/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.tube-close { flex: none; padding: 9px 15px; border: 0; border-radius: 6px; background: linear-gradient(#fbf7ec, #d9d2bd); color: var(--ink); font: 500 12px var(--mono); cursor: var(--cur-hand); box-shadow: 0 3px 0 #857e6b, 0 5px 8px rgba(0,0,0,.45); transition: transform .08s, box-shadow .08s, background .15s; }
.tube-close:hover { background: linear-gradient(#ff8c52, var(--rust)); color: #fff; box-shadow: 0 3px 0 #8c3a14, 0 5px 8px rgba(0,0,0,.45); }
.tube-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #857e6b; }

/* Recessed glass with the picture inside it */
.tube-screen { position: relative; overflow: hidden; border-radius: 20px / 24px; background: #050504; box-shadow: 0 0 0 7px #16100a, 0 0 0 8px rgba(255,226,186,.18), inset 0 0 22px #000; }
.tube-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050504; }
.tube-frame iframe, .tube-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #050504; }
.tube-frame.has-playlist { aspect-ratio: auto; max-height: calc(100svh - 240px); overflow: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: #5b4a38 transparent; }
.tube-scan { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(118deg, rgba(255,255,255,.07), transparent 24%); box-shadow: inset 0 0 26px rgba(0,0,0,.55); }
.tube-static { position: absolute; z-index: 3; inset: -30%; opacity: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tube-beam { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; background: #f4fbff; }
.tube.is-opening .tube-beam { animation: tube-beam-on .62s .24s ease-out backwards; }
@keyframes tube-beam-on { 0% { opacity: 1; transform: scale(0, .006); } 30% { opacity: 1; transform: scale(1, .006); } 62% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 1); } }
.tube.is-opening .tube-frame { animation: tube-black .3s .3s steps(1) backwards; }
@keyframes tube-black { from { opacity: 0; } }
.tube.is-opening .tube-static { animation: tube-static-on .5s .6s steps(6) backwards; }
@keyframes tube-static-on { 0% { opacity: .9; transform: translate(-5%, 4%); } 50% { opacity: .55; transform: translate(6%, -5%); } 100% { opacity: 0; } }
.tube.is-closing .tube-frame { visibility: hidden; }
.tube.is-closing .tube-beam { animation: tube-beam-off .32s ease-in forwards; }
@keyframes tube-beam-off { 0% { opacity: 1; transform: scale(1, 1); } 55% { opacity: 1; transform: scale(1, .006); } 100% { opacity: 0; transform: scale(0, .006); } }
.tube.is-zapping .tube-static { animation: tube-zap .46s steps(7) forwards; }
@keyframes tube-zap { 0% { opacity: 1; transform: translate(-5%, 3%); } 45% { opacity: 1; transform: translate(6%, -5%); } 100% { opacity: 0; transform: translate(-3%, 4%); } }

/* Speaker and channel knobs along the bottom */
.tube-controls { display: flex; align-items: center; gap: 14px; padding: 14px 4px 2px; }
.tube-grille { flex: 1; height: 26px; border-radius: 3px; background: repeating-linear-gradient(0deg, #0d0906 0 3px, rgba(255,226,186,.13) 3px 4px, transparent 4px 7px); box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,226,186,.14); }
.tube-count { color: #cdbba2; font: 500 12px/1 var(--mono); white-space: nowrap; }
.tube-knob { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #efe3cf; cursor: var(--cur-hand); }
.tube-knob .tv-knob-cap { position: relative; display: block; flex: none; width: 34px; aspect-ratio: 1; box-shadow: 0 3px 5px rgba(0,0,0,.6); }
.tube-knob small { font: 500 11px/1 var(--mono); }
.tube-knob:hover .tv-knob-cap, .tube-knob:focus-visible .tv-knob-cap { filter: brightness(1.45); }

.project-video-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.project-video-item { min-width: 0; margin: 0; }
.tube.is-opening .project-video-item { animation: tube-tile .55s calc(.72s + var(--i, 0) * .09s) cubic-bezier(.2, 1.2, .4, 1) backwards; }
@keyframes tube-tile { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.project-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-inline: auto; border-radius: 7px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 12px 24px rgba(0,0,0,.7); transition: transform .2s, box-shadow .2s; }
.project-video-item:hover .project-video-frame { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 16px 30px rgba(0,0,0,.8); }
.project-video-frame.is-portrait { width: min(100%, 360px); }
.project-video-frame video, .project-video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.project-video-caption { display: table; margin: 11px 2px 2px; padding: 3px 9px 2px; background: var(--paper); color: var(--ink); font: 500 11.5px/1.4 var(--mono); transform: rotate(-.7deg); box-shadow: 1px 2px 3px rgba(0,0,0,.6); }
.project-preview-label { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 10px 15px; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; color: #fff; background: rgba(0,0,0,.68); font: 500 11px/1 var(--mono); white-space: nowrap; }

/* Portrait screens --------------------------------------------------- */
@media (max-aspect-ratio: 5 / 4) {
  :root { --tv: min(66svh, 96vw); }
}
@media (max-aspect-ratio: 1 / 1) {
  :root { --rtv: min(76svh, 96vw); }
  .slab-wide { font-size: 11.6vw; }
  .slab-wide .line, .slab-giant .line { line-height: 2; transform: scaleY(2.6); }
  .slab-giant { font-size: 12.6vw; margin-top: 1.9em; }
  .reel-head { top: 21svh; }
}
@media (max-width: 900px), (max-aspect-ratio: 1 / 1) {
  .about { height: auto; min-height: 0; padding: 92px 0 0; display: flex; flex-direction: column; }
  .about-copy { position: relative; right: auto; top: auto; translate: none; width: auto; margin: 0 24px; }
  .about-body { font-size: clamp(19px, 3vw, 26px); }
  .figure { --fig: min(92vw, 640px); position: relative; left: auto; bottom: auto; margin: 60px auto calc(var(--fig) * -.12); order: 2; }
  .tool { width: clamp(40px, 9vw, 72px); font-size: clamp(19px, 4.4vw, 40px); }
  .nav { grid-template-columns: auto 1fr; }
  .nav-pills { justify-self: end; }
  .nav-mail, .brand-text { display: none; }
  .brand { padding: 5px; }
}
@media (max-width: 640px) {
  :root { --tv: min(62svh, 96vw); --rtv: min(72svh, 96vw); }
  body { font-size: 16px; }
  .nav-pills a { padding: 7px 10px; }
  .hero-side { bottom: auto; white-space: nowrap; }
  .hero-left, .hero-right { left: 50%; right: auto; translate: -50% 0; }
  .hero-left { top: 136px; }
  .hero-right { top: 184px; }
  .btn { padding: 9px 14px; font-size: 13px; }
  .status { padding: 9px 12px; font-size: 10px; }
  .tagline { top: 70px; font-size: 17px; }
  .tools { padding: 10px 12px; border-radius: 26px; }
  .reel-note { display: none; }
  .row button { grid-template-columns: 44px 1fr 40px; gap: 4px 10px; padding-left: 26px; }
  .row-ch { grid-row: 1 / span 2; align-self: start; padding-top: 4px; }
  .row-title { grid-column: 2; }
  .row-type { grid-column: 2; grid-row: 2; }
  .row-year, .row-thumb { display: none; }
  .row-go { grid-column: 3; grid-row: 1 / span 2; }
  .contact-body { padding-bottom: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reel-player { opacity: 1; }
  .collage { display: none; }
}

/* Personal portfolio poster states */
.reel-poster { position: absolute; inset: 0; display: grid; place-items: end center; overflow: hidden; color: #fff; text-decoration: none; background: #101014; }
.reel-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-poster::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.reel-poster-label { z-index: 1; margin: 0 0 7%; padding: .7em 1.2em; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; background: rgba(0,0,0,.35); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.project-preview { position: absolute; inset: 0; display: grid; place-items: center; background: #101014; }
.project-preview img { width: 100%; height: 100%; object-fit: contain; }
.project-preview-link { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 10px 15px; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; color: #fff; background: rgba(0,0,0,.68); font: 500 11px/1 var(--mono); text-decoration: none; white-space: nowrap; }
.fig-part { object-fit: cover; object-position: 50% 18%; }

/* Experience: the floating computer beside the career panel --------- */
.experience { position: relative; z-index: 2; }
.exp-stage {
  --u: min(.66svh, .4vw); /* one scene unit: every part of the computer scales from this */
  --pc: calc(var(--u) * 78); /* sizes the folders on its screen */
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .19 0 0 0 0 .14 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position: relative; display: flex; align-items: center; justify-content: center;
  height: auto; min-height: max(100svh, 720px);
  padding: 92px clamp(22px, 4vw, 64px) 52px;
  overflow: hidden;
  isolation: isolate;
}
.exp-stage .reel-meadow {
  z-index: -2;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 26%, #000 84%, transparent);
  mask-image: linear-gradient(transparent 0%, #000 26%, #000 84%, transparent);
}
.workstation-layout { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(360px, 500px); align-items: center; justify-content: center; gap: clamp(32px, 4.5vw, 80px); width: 100%; }

/* Glass: faint scanlines, a soft reflection and darkened corners */
.os-window { position: absolute; z-index: 2; inset: 2.6% 2.6% 10.5%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #1c1712; border-radius: 3px; background: var(--paper); box-shadow: 2px 3px 0 rgba(10,20,30,.38); }
.os-titlebar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ink); color: var(--paper); font: 500 clamp(10px, calc(var(--pc) * .017), 13px)/1.1 var(--mono); }
.os-titlebar b { flex: 1; font-weight: 500; }
.os-titlebar span:last-child { opacity: .72; white-space: nowrap; }
.os-close { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rust); }
.desktop-files { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 2px; padding: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8d8572 transparent; }
.desktop-folder { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px 5px; border-radius: 3px; color: var(--ink); text-align: center; text-decoration: none; transition: background .12s, color .12s; }
.desktop-folder:hover, .desktop-folder:focus-visible { background: var(--rust); color: #fff; }
.desktop-folder:focus-visible { outline-offset: -2px; }
.folder-icon { position: relative; display: block; flex: none; width: calc(var(--pc) * .046); height: calc(var(--pc) * .034); margin-top: 4px; border: 1px solid #94682a; border-radius: 1px 3px 3px 3px; background: linear-gradient(170deg, #ffd983, #e7ab4b 80%); box-shadow: inset 0 1px rgba(255,255,255,.6), 1px 1px 0 rgba(28,23,18,.26); }
.folder-icon::before { content: ""; position: absolute; left: -1px; top: -5px; width: 44%; height: 5px; border: 1px solid #94682a; border-bottom: 0; border-radius: 2px 3px 0 0; background: #f2c367; }
.folder-name { max-width: 100%; overflow: hidden; font: 500 clamp(10px, calc(var(--pc) * .0165), 13px)/1.15 var(--body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.folder-kind { max-width: 100%; overflow: hidden; color: #6c6555; font: 400 clamp(9px, calc(var(--pc) * .0135), 11px)/1.1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.desktop-folder:hover .folder-kind, .desktop-folder:focus-visible .folder-kind { color: rgba(255,255,255,.88); }
.desktop-taskbar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 8%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 10px 0 4px; background: #d9d2bd; border-top: 1px solid #f7f3e6; color: var(--ink); font: 500 clamp(9px, calc(var(--pc) * .015), 12px)/1 var(--mono); white-space: nowrap; }
.os-start { padding: 3px 8px; border: 1px solid #1c1712; border-radius: 2px; background: var(--paper); box-shadow: 1px 1px 0 #1c1712; }

/* The career window */
.experience-panel { position: relative; overflow: hidden; border: 1px solid #1c1712; border-radius: 5px; background: var(--paper); color: var(--ink); box-shadow: 4px 6px 0 rgba(12,30,14,.42), 0 22px 40px rgba(10,32,8,.3); }
.experience-panel .os-titlebar { padding: 8px 14px; font-size: 13px; }
.panel-body { padding: clamp(14px, 1.5vw, 22px); }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-window { min-width: 0; padding: 12px 12px 11px; border: 1px solid #cfc8b3; border-radius: 3px; background: #fffdf5; }
.metric-window strong { display: block; color: var(--ink); font: 400 clamp(30px, 2.9vw, 42px)/1 var(--display); }
.metric-window strong span { color: var(--rust); }
.metric-window > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.25; }
.metric-window small { display: block; margin-top: 6px; color: #6c6555; font: 400 11px/1.3 var(--mono); }
.metric-wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
.metric-wide strong { grid-row: 1 / span 2; }
.metric-wide > span { margin: 0; }
.metric-wide small { margin-top: 3px; }
.career-list { display: grid; margin-top: 12px; }
.career-list li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ddd6c2; }
.career-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.career-list time { padding-top: 2px; color: #6c6555; font: 400 11px/1.3 var(--mono); white-space: nowrap; }
.career-list b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.career-list small { display: block; margin-top: 2px; color: #575143; font-size: 13px; line-height: 1.25; }.career-list li { cursor: var(--cur-hand); border-radius: 3px; transition: background .15s, box-shadow .15s; }
.career-list li:hover { background: rgba(226,101,42,.1); box-shadow: -8px 0 0 rgba(226,101,42,.1), 8px 0 0 rgba(226,101,42,.1); }
.career-list li.is-lit b { color: #c94f18; }
.career-list li.is-lit { background: rgba(226,101,42,.16); box-shadow: -8px 0 0 rgba(226,101,42,.16), 8px 0 0 rgba(226,101,42,.16); }

/* The 3D scene */
.pc-scene { position: relative; width: calc(var(--u) * 128); height: calc(var(--u) * 126); perspective: calc(var(--u) * 210); cursor: var(--cur-grab); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pc-scene.is-dragging { cursor: var(--cur-grab); }
.pc-rig { position: absolute; left: 50%; top: 52%; width: 0; height: 0; font-size: var(--u); transform-style: preserve-3d; --ex: 1; }
.pc-part, .pc-bob, .pc-box, .pc-disc-part, .pc-fly, .pc-tilt { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.pc-part { transform:
  translate3d(calc((var(--x) + var(--dx) * var(--ex)) * 1em), calc((var(--y) + var(--dy) * var(--ex)) * 1em), calc((var(--z) + var(--dz) * var(--ex)) * 1em))
  rotateX(calc(var(--rx) * var(--ex) * 1deg)) rotateY(calc(var(--ry) * var(--ex) * 1deg)) rotateZ(calc(var(--rz) * var(--ex) * 1deg)); }
.pc-disc-part { transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scale3d(var(--ex), var(--ex), var(--ex)); }
.pc-bob { animation: pc-bob 7s ease-in-out infinite alternate; }
.pc-monitor .pc-bob { animation-delay: -2s; }
.pc-keyboard .pc-bob { animation-delay: -4.5s; animation-duration: 8s; }
.pc-mouse .pc-bob { animation-delay: -1s; animation-duration: 6s; }
.pc-disc-part:nth-of-type(even) .pc-bob { animation-delay: -3s; animation-duration: 6s; }
@keyframes pc-bob { from { transform: translate3d(0, -.7em, 0); } to { transform: translate3d(0, .7em, 0); } }

/* Aged beige plastic, lit from above and the right */
.pc-face { position: absolute; left: 0; top: 0; overflow: hidden; background-color: #c8c1ad; background-image: var(--grime), linear-gradient(#d0c9b5, #b6af9a); backface-visibility: hidden; box-shadow: inset 0 0 0 .1em rgba(255,250,232,.26), inset 0 0 1.6em rgba(70,52,22,.3); }
/* Scratches, scuffs and the yellowing old beige plastic picks up */
.pc-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 44l74 12M150 18l42 34M212 170l78-16M60 196l32-8M260 40l28 42' stroke='%23fffbe9' stroke-opacity='.42'/%3E%3Cpath d='M23 46l74 12M214 172l78-16M116 110l58 6M18 130l20 30' stroke='%233a2f18' stroke-opacity='.3'/%3E%3C/g%3E%3Cg fill='%233a2f18' fill-opacity='.34'%3E%3Ccircle cx='84' cy='88' r='1.2'/%3E%3Ccircle cx='190' cy='130' r='1.6'/%3E%3Ccircle cx='250' cy='206' r='1'/%3E%3Ccircle cx='36' cy='218' r='1.4'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(60% 50% at 88% 92%, rgba(156,118,44,.3), transparent 70%),
  radial-gradient(44% 38% at 8% 4%, rgba(146,108,38,.2), transparent 70%); background-size: 22em auto, 100% 100%, 100% 100%; }
.pc-face:has(> .pc-screen)::after { z-index: 0; }
.pc-face.is-top { background-image: var(--grime), linear-gradient(#dcd6c4, #cec7b3); }
.pc-face.is-right { background-image: var(--grime), linear-gradient(#a59e8b, #8a8473); }
.pc-face.is-left { background-image: var(--grime), linear-gradient(#7d7767, #5c574b); }
.pc-face.is-bottom { background-image: linear-gradient(#37342c, #2a2822); }
.pc-face.is-back { background-image: var(--grime), linear-gradient(#6d6859, #4e4a3f); }
.pc-rear .pc-face.is-top { background-image: var(--grime), linear-gradient(#a8a18d, #b9b29e); }
.pc-rear.is-deep .pc-face { filter: brightness(.74); }
.pc-neck .pc-face { filter: brightness(.66); }

/* Vents, screws and seams */
.pc-slats { position: absolute; inset: 22% 14%; background: repeating-linear-gradient(0deg, rgba(26,22,14,.62) 0 .32em, rgba(255,248,226,.14) .32em .46em, transparent .46em 1.15em); }
.pc-screw { position: absolute; width: 1.15em; height: 1.15em; border-radius: 50%; background: linear-gradient(145deg, #a79f8a, #5d5748); box-shadow: inset 0 0 0 .08em rgba(40,34,22,.6), 0 .06em 0 rgba(255,250,232,.4); }
.pc-screw::after { content: ""; position: absolute; left: 14%; right: 14%; top: 45%; height: .14em; background: #27231a; transform: rotate(38deg); }
.pc-screw.is-tl { left: 1.1em; top: 1.1em; }
.pc-screw.is-tr { right: 1.1em; top: 1.1em; }
.pc-screw.is-bl { left: .9em; bottom: .9em; }
.pc-screw.is-br { right: .9em; bottom: .9em; }
.pc-seam { position: absolute; left: 0; right: 0; bottom: 2.1em; height: .16em; background: rgba(40,34,22,.42); box-shadow: 0 .12em 0 rgba(255,250,232,.32); }
.pc-lid-seam { position: absolute; inset: 1.5em; border: .14em solid rgba(60,50,30,.3); border-radius: .4em; box-shadow: 0 .1em 0 rgba(255,250,232,.3), inset 0 .1em 0 rgba(255,250,232,.26); }
.pc-sticker { position: absolute; right: 4em; bottom: 3.8em; padding: .5em .9em; background: #f1ebda; color: #4b4535; font: 500 max(6px, 1.25em)/1 var(--mono); letter-spacing: .08em; transform: rotate(-1.2deg); box-shadow: .08em .12em .2em rgba(40,30,12,.45); }
.pc-neck { background: none; }

/* Monitor */
.pc-bezel .pc-face.is-front { box-shadow: inset 0 0 0 .22em rgba(245,241,228,.34), inset 0 -.5em 1em rgba(50,44,30,.3); }
.pc-bezel .pc-face.is-front::before { content: ""; position: absolute; left: 2.8em; right: 2.8em; top: 2.5em; bottom: 5.2em; border-radius: 3.6em / 4.2em; background: linear-gradient(150deg, #8e8672, #b9b19b 45%, #e0d9c5); box-shadow: inset 0 .25em .6em rgba(40,34,20,.55); }
.pc-screen { position: absolute; z-index: 1; left: 4em; right: 4em; top: 3.6em; bottom: 6.4em; padding: 0; overflow: hidden; border: .55em solid #24221d; border-radius: 3em / 3.6em; background: linear-gradient(rgba(7,41,69,.18),rgba(7,41,69,.18)), url("assets/sky-meadow.jpg") center / cover; box-shadow: 0 0 0 .3em #9c9581, 0 .3em 0 .35em rgba(240,235,220,.5); }
.crt-bands { position: absolute; z-index: 5; inset: 0; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, rgba(190,235,212,.035) 0 1px, transparent 1px 3px), linear-gradient(transparent 18%, rgba(235,245,240,.07) 19%, transparent 20.5% 57%, rgba(235,245,240,.05) 58%, transparent 59.5%); background-size: 100% 100%, 100% 240%; animation: crt-roll 7s linear infinite; }
@keyframes crt-roll { to { background-position: 0 0, 0 -240%; } }
.crt-splash { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .5em; padding: 0 3.4em; background: #050706; color: #f4fbf6; text-shadow: 0 0 .5em rgba(205,240,222,.55); opacity: 0; visibility: hidden; transition: opacity .12s, visibility .12s; }
.crt-splash.is-on { opacity: 1; visibility: visible; animation: crt-splash-in .42s steps(5) 1; }
@keyframes crt-splash-in { 0% { transform: scale(1, .02); filter: brightness(4); } 40% { transform: scale(1, 1) translateX(-1.5%); filter: brightness(2); } 70% { transform: translateX(1%); } 100% { transform: none; filter: none; } }
.crt-splash small { color: #a6c2b2; font: 500 max(10px, 2em)/1 var(--mono); letter-spacing: .12em; }
.crt-splash b { font: 400 max(24px, 8.4em)/1 var(--display); text-transform: uppercase; }
.crt-splash b.is-long { font-size: max(17px, 5em); line-height: 1.08; }
.crt-splash span { font: 500 max(11px, 2.8em)/1.2 var(--body); }
.crt-glass { position: absolute; z-index: 6; inset: 0; pointer-events: none; background: linear-gradient(116deg, rgba(255,255,255,.12), transparent 26%); box-shadow: inset 0 0 3em rgba(0,0,0,.55); }
.pc-chin { position: absolute; left: 5em; right: 5em; bottom: 1.7em; display: flex; align-items: center; gap: 1.2em; }
.pc-badge { flex: 1; color: #5f5947; font: 500 max(7px, 1.5em)/1 var(--mono); letter-spacing: .14em; }
.pc-knob { width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(145deg, #aaa28d, #6f6957); box-shadow: 0 .1em .25em rgba(0,0,0,.5); }

/* Base unit */
.pc-chassis .pc-face.is-front { box-shadow: inset 0 .25em 0 rgba(240,235,220,.45), inset 0 -.9em 1em rgba(50,44,30,.42); }
.pc-slot { position: absolute; right: 3.5em; top: 3.2em; width: 19em; height: 3.2em; border: .2em solid #8e8773; border-radius: .25em; background: linear-gradient(#b9b29e, #cec7b3); }
.pc-slot::after { content: ""; position: absolute; left: 1.2em; right: 1.2em; top: 50%; height: .55em; margin-top: -.27em; border-radius: .1em; background: #15130f; transition: background .15s, box-shadow .15s; }
.pc-slot.is-loading::after { background: #ffb37f; box-shadow: 0 0 1.4em #ff9a62; }
.pc-power { position: absolute; left: 3.5em; top: 3.8em; width: 6em; height: 3.2em; padding: 0; color: #4b4535; font: 600 max(6px, 1.2em)/1 var(--mono); letter-spacing: .04em; border: .18em solid #8e8773; border-radius: .3em; background: linear-gradient(#ded8c6, #bdb6a2); cursor: var(--cur-hand); transition: transform .1s; }
.pc-power:hover { background: linear-gradient(#f1ecdc, #d0c9b5); }
.pc-power:active { transform: translateY(.15em); }
.pc-led { position: absolute; left: 10.6em; top: 5em; width: .9em; height: .9em; border-radius: 50%; background: #7ee05f; box-shadow: 0 0 .8em #7ee05f; }
.pc-led.is-busy { background: #ffb24d; box-shadow: 0 0 .9em #ffb24d; }
.pc-vents { position: absolute; left: 13.6em; top: 4em; width: 12em; height: 3.2em; background: repeating-linear-gradient(90deg, rgba(40,36,26,.68) 0 .28em, transparent .28em .95em); }

/* Keyboard */
.pc-keys { position: absolute; inset: 1.5em 2em; padding: .5em; border-radius: .5em; background: #6f6856; box-shadow: inset 0 .2em .5em rgba(20,16,8,.7); display: grid; grid-template-columns: repeat(14, 1fr); grid-auto-rows: 1fr; gap: .4em; }
.pc-key { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: .3em; background: linear-gradient(#efeadb, #cfc8b4); box-shadow: 0 .28em 0 #857e6b; color: #2c281f; font: 600 max(7px, 1.8em)/1 var(--mono); }
.pc-key:not(.is-number) { color: #6a6452; font: 500 1.35em/1 var(--mono); }
.pc-key.is-dark { background: linear-gradient(#55524a, #3a3831); box-shadow: 0 .28em 0 #1f1d19; }
.pc-key.is-number { background: linear-gradient(#ffe2c6, #f4b98d); box-shadow: 0 .28em 0 #a06238; cursor: var(--cur-hand); transition: transform .08s, box-shadow .08s, background .12s; }
.pc-key.is-number:hover { background: linear-gradient(#fff0e0, #ffc69c); }
.pc-key.is-number:active, .pc-key.is-pressed { transform: translateY(.22em); box-shadow: 0 .06em 0 #a06238; }
.pc-key.is-on { background: linear-gradient(#ff8c52, var(--rust)); box-shadow: 0 .28em 0 #8c3a14, 0 0 1em rgba(255,130,70,.75); color: #fff; }

/* Mouse */
.pc-mouse-hit { position: absolute; inset: 0; padding: 0; border: 0; border-radius: 1em; background: linear-gradient(transparent 44%, rgba(50,44,30,.55) 44% 46%, transparent 46%), linear-gradient(90deg, transparent 49%, rgba(50,44,30,.5) 49% 51%, transparent 51%) top / 100% 45% no-repeat; cursor: var(--cur-hand); }
.pc-mouse-hit:hover { background-color: rgba(255,255,255,.2); }

/* Cables */
.pc-wires { position: absolute; left: 0; top: 0; transform-origin: 50% 0; transform: translate3d(calc(var(--x) * 1em), calc(var(--y) * 1em), calc(var(--z) * 1em)) scaleY(var(--ex)); opacity: var(--ex); pointer-events: none; }
.pc-wires svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-wires path { fill: none; stroke: #3a3730; stroke-width: 1.6px; }

/* Discs */
.pc-disc { position: absolute; left: -8em; top: -8em; width: 16em; height: 16em; padding: 0; border: 0; border-radius: 50%; background: none; color: #f2f4f2; font-size: 1em; cursor: var(--cur-hand); }
.pc-disc-face { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, #cfd2d0, #f4efd8, #93cdc6, #e4e5e7, #cda7c7, #b3bbbf, #f4e4b8, #94c9d1, #e0e0e0, #caa9c2, #cfd2d0); box-shadow: inset 0 0 0 .25em rgba(255,255,255,.45); -webkit-mask: radial-gradient(circle closest-side, transparent 0 24%, #000 25% 99%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 0 24%, #000 25% 99%, transparent 100%); overflow: hidden; transition: filter .2s; }
.pc-disc-face::after { content: ""; position: absolute; inset: 31%; border-radius: 50%; background: rgba(238,238,232,.5); box-shadow: 0 0 0 .1em rgba(20,20,20,.3); }
.pc-disc:hover .pc-disc-face, .pc-disc:focus-visible .pc-disc-face { filter: brightness(1.2) saturate(1.5); }

@media (prefers-reduced-motion: reduce) {
  .pc-bob, .crt-bands { animation: none; }
}

/* Fine analogue detail on a small, staggered subset of project rows. */
.row { position: relative; isolation: isolate; }
.row::after { display: none; content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 45%, rgba(255,255,255,.18) 49%, rgba(95,210,255,.16) 50%, transparent 55%); transform: translateY(-100%); animation: row-signal-glint 10s linear var(--glint-delay, 0s) infinite; }
.row:nth-child(3n)::after { display: block; }
@keyframes row-signal-glint { 0%, 1.7%, 100% { opacity: 0; transform: translateY(-100%); } 1.9% { opacity: .65; } 2.4% { opacity: .18; transform: translateY(100%); } 2.8% { opacity: 0; } }
.row:nth-child(3n)::before { content: "✳"; position: absolute; z-index: 3; top: 7px; right: 13px; color: rgba(255,255,255,.27); font: 12px/1 var(--serif); pointer-events: none; }
.row:nth-child(5n + 2) .row-go::before { content: "✦"; position: absolute; margin: -43px 0 0 43px; color: rgba(255,255,255,.58); font: 11px/1 var(--serif); }
.row-go { position: relative; }
@media (prefers-reduced-motion: reduce) { .row::after { animation: none; } }
@media (max-width: 1000px), (max-aspect-ratio: 5 / 4) {
  .exp-stage { --u: min(.76vw, .66svh); align-items: flex-start; min-height: 0; }
  .workstation-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; }
  .experience-panel { width: min(100%, 680px); }
}
@media (max-width: 640px) {
  .exp-stage { padding: 84px 16px 44px; }
  .desktop-files { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 2px; }
  .folder-kind { display: none; }
  .folder-icon { width: 20px; height: 14px; }
  .desktop-taskbar span:last-child { display: none; }
  .career-list li { grid-template-columns: 84px 1fr; }
}

/* Silent channel surf on the hero TV */
.tv-preview-poster, .tv-preview-video { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; pointer-events: none; }
.tv-preview-video { opacity: 0; transition: opacity .12s; }
.tv-preview-video.is-playing { opacity: 1; }
.screen.has-preview > .ch { opacity: 0; }
.channel-caption { position: absolute; z-index: 4; left: 5%; bottom: 5%; max-width: 67%; overflow: hidden; padding: 3px 6px; border-radius: 2px; background: rgba(0,0,0,.62); color: #fff; font: 500 clamp(6px, calc(var(--tv) * .012), 11px)/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.osd { z-index: 4; }
/* Between channels: rainbow interference or static */
.tv-rainbow, .tv-static { position: absolute; z-index: 3; pointer-events: none; opacity: 0; }
.tv-rainbow { inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), repeating-linear-gradient(174deg, #ff2a2a 0, #ffa21c 7%, #fff23a 14%, #2bea4c 21%, #17e6f0 28%, #2b4dff 35%, #d21cf0 42%, #ff2a2a 49%); background-size: 100% 100%, 100% 280%; }
.tv-static { inset: -40%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.screen[data-glitch="rainbow"] .tv-rainbow { opacity: .92; animation: tv-rainbow .5s steps(9) infinite; }
.screen[data-glitch="rainbow"] .tv-static { opacity: .3; mix-blend-mode: overlay; animation: snow .3s steps(5) infinite; }
.screen[data-glitch="static"] .tv-static { opacity: 1; animation: snow .3s steps(5) infinite; }
@keyframes tv-rainbow { 0% { background-position: 0 0, 0 0; transform: skewX(0); } 40% { transform: skewX(5deg) translateX(-2%); } 70% { transform: skewX(-4deg) translateX(3%); } 100% { background-position: 0 0, 0 280%; transform: skewX(0); } }
/* A short tracking wobble on the picture itself */
.screen[data-glitch="tear"] .tv-preview-video, .screen[data-glitch="tear"] .tv-preview-poster { animation: tv-tear .2s steps(3) infinite; }
.screen[data-glitch="tear"] .tv-static { opacity: .32; mix-blend-mode: screen; animation: snow .3s steps(5) infinite; }
@keyframes tv-tear { 0% { transform: translateX(-2%) skewX(3deg); filter: saturate(1.8) hue-rotate(18deg); } 50% { transform: translateX(3%) skewX(-5deg); filter: saturate(.7) hue-rotate(-16deg); } 100% { transform: translateX(-1%) skewX(1deg); } }
/* Off: the picture collapses to a line, then the glass goes dark */
.screen::after { content: ""; position: absolute; z-index: 5; inset: 0; background: #070706; opacity: 0; pointer-events: none; transition: opacity .1s .3s; }
.screen.is-off::after { opacity: 1; }
.screen.is-off .tv-preview-video, .screen.is-off .tv-preview-poster { transform: scale(1, .004); filter: brightness(4); transition: transform .3s ease-in, filter .3s; }
.screen.is-off .channel-caption, .screen.is-off .osd { visibility: hidden; }
button.screen:disabled { cursor: default; }

/* Working controls: circles cut from the set photo, sitting exactly over its knobs */
.tv-knob { position: absolute; z-index: 7; left: calc((var(--cx) - var(--d) / 2) * 1%); top: calc((var(--cy) - var(--d) / 2) * 1%); width: calc(var(--d) * 1%); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: var(--cur-hand); touch-action: none; }
.tv-knob-cap { position: absolute; inset: 0; border-radius: 50%; background: url("assets/tv-clean.png") no-repeat; background-size: calc(10000% / var(--d)); background-position: calc((var(--cx) - var(--d) / 2) / (100 - var(--d)) * 100%) calc((var(--cy) - var(--d) / 2) / (100 - var(--d)) * 100%); transform: rotate(var(--turn, 0deg)); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), filter .15s; }
.tv-knob:hover .tv-knob-cap, .tv-knob:focus-visible .tv-knob-cap { filter: brightness(1.45); }
.tv-knob:focus-visible { outline: 2px solid rgba(255,244,210,.95); outline-offset: 2px; }
.tv-knob-dial { cursor: var(--cur-grab); }
.tv-knob-dial.is-turning { cursor: var(--cur-grab); }
.tv-knob-dial.is-turning .tv-knob-cap { transition: filter .15s; }
.tv-knob-power[aria-pressed="false"] .tv-knob-cap { box-shadow: 0 0 calc(var(--tv) * .007) rgba(255,190,110,.7); }
.tv-knob-power:active .tv-knob-cap { transform: scale(.88); }
@media (max-width: 640px) {
  .tube-cabinet { padding: 10px; border-radius: 14px; }
  .tube-osd { display: none; }
  .tube-count { display: none; }
  .tube-frame.has-playlist { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-knob-cap { transition: filter .15s; }
}

/* CD cases sitting on the two shelves of tv-clean.png.
   Positions in main.js are percentages of the square set image. */
.work-discs { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
/* Shade from the shelf above falls over whatever stands below it */
.work-discs::before, .work-discs::after { content: ""; position: absolute; z-index: 3; left: 20.6%; width: 57.9%; height: 8.6%; background: linear-gradient(rgba(14,8,3,.62), rgba(14,8,3,.14) 45%, transparent 75%); pointer-events: none; }
.work-discs::before { top: 66.3%; }
.work-discs::after { top: 77.8%; }
.work-disc { position: absolute; display: block; padding: 0; color: var(--case-ink); text-decoration: none; transform: rotate(var(--disc-tilt, 0deg)); transform-origin: 0 100%; transition: transform .2s, filter .2s; pointer-events: auto; filter: saturate(.74) brightness(.82); }
/* Contact shadow where the case meets the wood */
.work-disc::before { content: ""; position: absolute; left: -6%; right: -30%; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(12,6,2,.72); filter: blur(2px); }
.work-disc[aria-hidden="true"] { pointer-events: none; }
.work-disc[href]:hover, .work-disc[href]:focus-visible { z-index: 8; transform: translateY(-5%) rotate(0deg) scale(1.1); filter: none; }
/* Readable name while a case is pulled out */
.work-disc[href]::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 5px 9px; border-radius: 4px; background: rgba(20,15,11,.94); color: #fff; font: 500 12px/1 var(--mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
.work-disc[href]:hover::after, .work-disc[href]:focus-visible::after { opacity: 1; translate: -50% 0; }
.case-spine { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8% 0; overflow: hidden; border-radius: 1px; background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.24) 14%, rgba(255,255,255,.05) 34%, transparent 66%, rgba(255,255,255,.14) 86%, rgba(0,0,0,.5)), var(--case-tone); box-shadow: inset 0 1px rgba(255,255,255,.4), inset 0 -1px rgba(0,0,0,.45), 1px 0 1px rgba(8,4,1,.6); writing-mode: vertical-rl; white-space: nowrap; font: 600 clamp(6px, calc(var(--tv) * .0118), 11px)/1 var(--body); letter-spacing: .01em; }
/* The moulded ridges at both ends of a jewel case */
.case-spine::before, .case-spine::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.34); box-shadow: 0 1px rgba(255,255,255,.2); }
.case-spine::before { top: 5%; }
.case-spine::after { bottom: 5%; }
.work-disc.is-flat .case-spine { padding: 0 6%; writing-mode: horizontal-tb; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.04) 30%, transparent 62%, rgba(0,0,0,.42)), var(--case-tone); box-shadow: inset 1px 0 rgba(255,255,255,.25), inset -1px 0 rgba(0,0,0,.4), 0 1px 1px rgba(8,4,1,.7); }
.work-disc.is-flat .case-spine::before, .work-disc.is-flat .case-spine::after { top: 0; bottom: 0; width: 1px; height: auto; right: auto; }
.work-disc.is-flat .case-spine::before { left: 3%; }
.work-disc.is-flat .case-spine::after { left: auto; right: 3%; }
.work-disc.is-flat::before { left: 0; right: -2%; }
/* A loose disc propped against the back of the lower shelf */
.loose-disc { position: absolute; left: 40.6%; top: 79.1%; width: 6.3%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1c130c 0 9%, rgba(240,240,235,.8) 9.5% 13%, transparent 13.5% 21%, rgba(255,255,255,.28) 21.5% 22.5%, transparent 23%), conic-gradient(from 24deg, #b9bcbd, #e8e2c8, #89c3bd, #d8d9dc, #c79fc0, #aab2b6, #eddcae, #8cc0c8, #d6d6d6, #c5a4bd, #b9bcbd); box-shadow: 2px 2px 4px rgba(10,5,2,.7), inset 0 0 0 1px rgba(255,255,255,.3); filter: saturate(.75) brightness(.72); }
@media (max-width: 640px) {
  }
@media (prefers-reduced-motion: reduce) {
}