/* Mike Betham · Game Library
   A PS2-era system menu. Dark-only by design: it's a console UI glowing in a dark room. */
:root {
  --ink: #050505;
  --deep: #1b1b1b;
  --blue: #2a4ad0;
  --blue-2: #13288a;
  --hi: #b2b2b2;          /* secondary text, light blue */
  --white: #f0f0f0;       /* primary text */
  --glow: rgba(163, 163, 163, .75);
  --line: rgba(184, 184, 184, .32);
  --glass: linear-gradient(rgba(36, 36, 36, .82), rgba(10, 10, 10, .9));
  --x: #b0b0b0; --o: #969696; --t: #dadada; --s: #b4b4b4;
  --title: 'Michroma', 'Eurostile', 'Arial Narrow', sans-serif;
  --ui: 'Exo 2', 'Segoe UI', sans-serif;
  --bar-h: 64px;
  --help-h: 0px;
  --gut: clamp(16px, 3.5vw, 48px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  background: var(--ink);
  color: var(--white); font: 400 15px/1.6 var(--ui); letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--white); }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid #d3d3d3; outline-offset: 3px; box-shadow: 0 0 12px var(--glow); }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* background layers */
/* the backdrop gradient lives on the fixed canvas, not a fixed body background (which repaints on every scroll) */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, var(--deep), var(--ink) 72%); }

/* button-prompt glyphs */
.pb { font-style: normal; display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #3e3e3e, #0d0d0d); border: 1px solid #5e5e5e; font-size: .8em; line-height: 1; vertical-align: middle; }
.pb.x { color: var(--x); } .pb.o { color: var(--o); } .pb.t { color: var(--t); } .pb.s { color: var(--s); }

.glass { background: var(--glass); border: 1px solid rgba(195, 195, 195, .5); border-radius: 6px;
  box-shadow: 0 0 40px rgba(117, 117, 117, .25), inset 0 1px 0 rgba(255, 255, 255, .14); }
/* no backdrop blur on panels or the bar: blurring over the animated background re-runs every frame, and at
   82-90% opacity it was barely visible anyway */

/* ---------- system bar ---------- */
.sysbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 3vw, 40px); padding: 0 var(--gut);
  background: linear-gradient(rgba(44, 44, 44, .9), rgba(16, 16, 16, .8)); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .6); transition: opacity .6s; }
/* stretched to its column (not sized to its text), so a long breadcrumb shortens with "…" instead of running under the tabs */
.brandwrap { display: flex; align-items: center; gap: 14px; justify-self: stretch; min-width: 0; }
.brand { display: block; text-decoration: none; min-width: 0; overflow: hidden; }
.brand .ttl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 clamp(13px, 1.5vw, 19px) var(--title); letter-spacing: .14em; text-shadow: 0 0 10px var(--glow); }
.brand .crumb { display: block; margin-top: 2px; font: 300 11px var(--ui); letter-spacing: .18em; color: var(--hi); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 4px; margin: 0; overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; padding: 8px 14px; text-decoration: none; font: 400 12px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--hi); border-radius: 3px; white-space: nowrap; transition: color .2s, background .2s; }
.tabs a:hover { color: var(--white); background: rgba(166, 166, 166, .1); }
.tabs a.on { color: var(--white); text-shadow: 0 0 8px var(--glow); background: rgba(166, 166, 166, .14); }
.tabs a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: #d3d3d3; box-shadow: 0 0 6px var(--glow); }


body.booting .sysbar { opacity: 0; pointer-events: none; }
/* ---------- views ---------- */
main { position: relative; z-index: 1; outline: none; }
.view { display: none; min-height: 100vh; min-height: 100dvh; padding: calc(var(--bar-h) + 28px) var(--gut) calc(var(--help-h) + 28px); }
.view.on { display: block; animation: viewIn .45s ease both; }
@keyframes viewIn { from { opacity: 0; transform: scale(.985); } }
.page { max-width: 1200px; margin: 0 auto; }
h1, h2 { font-weight: 400; }
.kicker { margin: 0; font: 300 11px var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--hi); }

/* ---------- intro (first visit) ----------
   A grey M is drawn exactly over the Resume card's neon M (measured in library.js), with "Click to Start" under it.
   The library is already laid out underneath but invisible; on start the library fades in around the M, then the
   neon flickers on over the grey. Each card fades on its own, so the 3D ring is never flattened. */
.intro .sysbar { opacity: 0; pointer-events: none; }
.intro #v-library .case, .intro #v-library .arrow, .intro #v-library .dvd, .intro #v-library .pulse, .intro #v-library .res-title, .intro #v-library .zone { opacity: 0 !important; pointer-events: none; }
#v-library .case, #v-library .arrow, #v-library .dvd { transition: opacity .9s ease; }
.intro-ov { position: fixed; inset: 0; z-index: 25; cursor: pointer; }
.intro-logo { position: fixed; pointer-events: none; animation: introIn 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.intro-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-logo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.intro-logo .g-fill { fill: #0a0a0a; stroke: none; }
.intro-logo .g-tri { stroke: #8a8a8a; stroke-width: 4.2; }
.intro-logo .g-m { stroke: #c4c4c4; stroke-width: 6; }
@keyframes introIn { from { opacity: 0; filter: blur(8px); } }
.intro-text { position: fixed; left: 0; right: 0; text-align: center; pointer-events: none; }
/* the name and title are measured, never shown: "Click to Start" is sized from their footprint */
.intro-measure { position: fixed; left: 0; right: 0; text-align: center; visibility: hidden; pointer-events: none; }
.intro-measure .boot-name { margin: 22px 0 4px; display: inline-block; animation: none; }
.intro-measure .boot-role { display: table; margin: 0 auto; animation: none; }
.intro-text .intro-start { margin: 0; padding: 0 0 0 .173em; pointer-events: auto; font-family: var(--title); font-weight: 400; letter-spacing: .173em; line-height: 1.1; color: #e8e8e8; text-shadow: 0 0 14px rgba(163, 163, 163, .6); white-space: nowrap; }
.intro-ov.go .intro-text { opacity: 0; transition: opacity .35s ease; }
.intro-ov.go .intro-logo { animation: none; }
.intro-ov.fade .intro-logo { opacity: 0; transition: opacity .35s ease .1s; }
.boot-name { margin: 22px 0 4px; font: 400 clamp(16px, 2.2vw, 26px) var(--title); letter-spacing: .3em; text-transform: uppercase; animation: fadeUp .8s .9s both; }
.boot-role { margin: 0; font: 300 clamp(12px, 1.3vw, 15px) var(--ui); letter-spacing: .4em; text-transform: uppercase; color: var(--hi); animation: fadeUp .8s 1.2s both; }
.boot-start { margin-top: 44px; display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font: 400 13px var(--ui); letter-spacing: .3em; text-transform: uppercase; color: #dadada;
  animation: fadeUp .8s 1.8s both, pulse 2.2s 2.6s ease-in-out infinite; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- library ---------- */
#v-library.on { display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 1200px; overflow: hidden; padding-bottom: calc(var(--help-h) + 12px); }
.dvd { position: absolute; left: 50%; top: 46%; width: min(66vw, 780px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: .26; pointer-events: none;
  background: radial-gradient(circle, transparent 0 8%, rgba(218, 218, 218, .9) 8% 9.5%, transparent 9.5% 15%, rgba(187, 187, 187, .35) 15% 16%, transparent 16%),
    conic-gradient(from 20deg, #2b2b2b, #686868, #c0c0c0, #3b3b3b, #1e1e1e, #878787, #dadada, #2b2b2b);
  -webkit-mask: radial-gradient(circle, transparent 0 8%, #000000 8%); mask: radial-gradient(circle, transparent 0 8%, #000000 8%); box-shadow: 0 0 80px rgba(117, 117, 117, .25);
  animation: dvdspin 31.3s linear infinite; }
@keyframes dvdspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.stage { position: relative; width: 100%; height: calc(clamp(204px, min(24vw, 44vh), 376px) / .71 * 1.15 + 48px); transform-style: preserve-3d; }
.stage { pointer-events: none; }   /* the stage plane shares the front card's depth; let clicks reach the cards */
.stage > .ring, .stage > .arrow, .stage > .zone, .stage .case { pointer-events: auto; }
.ring { position: absolute; left: 50%; top: 50%; width: clamp(204px, min(24vw, 44vh), 376px); aspect-ratio: .71; transform-style: preserve-3d; }
.case { position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; text-align: left; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform;
  background: #080808; border-radius: 3px; box-shadow: 0 16px 34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(168, 168, 168, .25); }
.case .cin { position: absolute; inset: 0; display: flex; flex-direction: column; }
/* side cards are dimmed by a black veil (same look as brightness .7) that fades on its own layer, instead of a
   filter that re-renders the whole card while it moves */
.case::after { content: ''; position: absolute; inset: 0; z-index: 4; background: #000; opacity: .3; pointer-events: none; transition: opacity .3s; will-change: opacity; }
.case.cur::after { opacity: 0; }
.case .band { height: 9%; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; background: linear-gradient(90deg, var(--blue-2), var(--blue) 60%, var(--blue-2)); font: 600 clamp(10px, .9vw, 13px) var(--ui); letter-spacing: .22em; color: #fff; }
.case .art { flex: 1; position: relative; overflow: hidden; }
.case .art img { width: 100%; height: 100%; object-fit: cover; }
.case .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0 18%, transparent 34%); pointer-events: none; }
.case .foot { height: 14%; display: flex; flex-direction: column; justify-content: center; padding: 0 7%; background: linear-gradient(#0e0e0e, #060606); border-top: 1px solid rgba(168, 168, 168, .25); }
.case .foot b { font: 600 clamp(12px, 1.26vw, 18px)/1.15 var(--ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case .foot span { font: 300 clamp(10px, .9vw, 13px) var(--ui); color: var(--hi); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case.cur { box-shadow: 0 16px 34px rgba(0, 0, 0, .7), 0 0 0 1px #d3d3d3, 0 0 30px rgba(145, 145, 145, .85); }
.case.manual .foot { align-items: center; text-align: center; }
.case.manual .foot b { animation: resumeBlink 1.6s ease-in-out infinite; will-change: opacity; }   /* own layer: the blink never repaints the neon card */
@keyframes resumeBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.case.manual .foot b { font-size: clamp(17.16px, 1.8018vw, 25.74px); position: relative; top: -.2em; }   /* "Resume": 1.43x the other card titles, nudged up */
/* Resume card: the neon sign on dark tiles (running bond), with a wet-floor reflection. Dark until switched on. */
.case .art-a { background: linear-gradient(#120f0f, #0a0909); }
/* the tile grid covers the wall only (down to the floor line), never the floor */
.case .art-a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 66%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='rgba(0,0,0,0.55)'%3E%3Crect width='40' height='2'/%3E%3Crect y='20' width='40' height='2'/%3E%3C/g%3E%3Cg fill='rgba(0,0,0,0.45)'%3E%3Crect width='2' height='20'/%3E%3Crect x='20' y='20' width='2' height='20'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px repeat; }
/* All the pink light (the glow on the wall) flickers with the pink M: same
   keyframes, started by the same .lit class, so they stay in step. The glow also hums underneath, on its own layer.
   Everything animated sits on its own layer, so nothing repaints the card (or its glow filters) each frame. */
.art-a .a-halo { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.art-a .a-halo::before { content: ''; position: absolute; inset: 0; will-change: opacity;
  background: radial-gradient(circle at 50% 30%, rgba(255, 63, 208, .24), transparent 50%), radial-gradient(circle at 50% 38%, rgba(255, 63, 208, .16), transparent 58%); }
.art-a .a-sign, .art-a .a-reflect { will-change: transform; }
.art-a .a-floor { position: absolute; left: 0; right: 0; top: 66%; bottom: 0; background: linear-gradient(rgba(10, 8, 9, .55), #0b090a); }
.art-a .a-sign { position: absolute; left: 15%; width: 70%; top: 7.7%; }
.art-a .a-reflect { position: absolute; left: 15%; width: 70%; top: 66%; transform: scaleY(-1); opacity: .22; filter: blur(1.5px);
  -webkit-mask: linear-gradient(to top, #000, transparent 70%); mask: linear-gradient(to top, #000, transparent 70%); }
.art-a .n-m, .art-a .n-tri { opacity: 0; }
.case.lit .art-a .a-halo, .case.lit .art-a .n-m { animation: aFlicker 6s linear infinite; }
.case.lit .art-a .a-halo::before { animation: aHum 3.4s ease-in-out infinite; }
.case.lit .art-a .n-tri { animation: aFlickerTri 9s linear infinite; }
@keyframes aHum { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes aFlicker { 0% { opacity: 0; } 2% { opacity: 1; } 3% { opacity: .15; } 4.5% { opacity: 1; } 5.5% { opacity: .3; } 7% { opacity: 1; } 71% { opacity: 1; } 71.6% { opacity: .35; } 72.2% { opacity: 1; } 100% { opacity: 1; } }
@keyframes aFlickerTri { 0% { opacity: 0; } 1.2% { opacity: 1; } 2% { opacity: .4; } 3%, 46% { opacity: 1; } 46.6% { opacity: .5; } 47.2%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .case.lit .art-a .n-m, .case.lit .art-a .n-tri, .case.lit .art-a .a-halo { opacity: 1; } }   /* steady on, no flicker */
.case .neon { display: block; width: 100%; height: auto; overflow: visible; }
.case .neon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.case .neon .n-tri path { stroke: #f4f6e6; stroke-width: 4.2; }
.case .neon .n-tri .n-fill { fill: #070707; stroke: none; }
.case .neon .n-m path { stroke: #ff3fd0; stroke-width: 6; }
.case .neon .n-m .n-core { stroke: #ffd3f4; stroke-width: 1.8; }
.case .neon .n-tri { filter: drop-shadow(0 0 2px rgba(244, 248, 225, .95)) drop-shadow(0 0 7px rgba(220, 235, 200, .45)); }
.case .neon .n-m { filter: drop-shadow(0 0 3px rgba(255, 63, 208, .95)) drop-shadow(0 0 10px rgba(255, 63, 208, .55)); }
.case .art-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: #000; }
.case .art-grid .cell { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.case .art-grid .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.case .art-grid .lock { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 7px 0; text-align: center; background: rgba(0, 0, 0, .78); border-top: 1px solid rgba(255, 255, 255, .25); border-bottom: 1px solid rgba(255, 255, 255, .25); font: 400 clamp(11px, 1.05vw, 15px) var(--title); letter-spacing: .24em; text-transform: uppercase; color: #fff; }
/* light band for the tilt: a fixed gradient 2.2x the card's width, slid with transform (no repaint per frame) */
.case .sheen { position: absolute; top: 0; bottom: 0; left: -60%; width: 220%; z-index: 3; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(105deg, transparent 39%, rgba(255, 255, 255, .15) 50%, transparent 61%); }
.zone { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translateY(-50%); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.res-title { position: absolute; left: 50%; top: 50%; z-index: 6; margin: 0; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  font: 400 clamp(13px, 1.5vw, 20px) var(--title); letter-spacing: .12em; text-transform: uppercase; color: #e6e6e6; text-shadow: 0 0 12px rgba(255, 255, 255, .35);
  opacity: 0; transition: opacity .12s ease; }
.res-title.on { opacity: 1; transition: opacity .55s ease .05s; }
.pulse { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%) translateZ(-2px); pointer-events: none; }
.pulse::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; box-shadow: 0 0 14px rgba(255, 255, 255, .25), inset 0 0 14px rgba(255, 255, 255, .12); opacity: 0; }
.pulse.on::before { animation: cardPulse 3.2s ease-out infinite; }
@keyframes cardPulse { 0% { transform: scale(1); opacity: .55; } 75% { opacity: 0; } 100% { transform: scale(1.1); opacity: 0; } }
.arrow { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); background: none; border: 0; padding: 10px 18px; cursor: pointer;
  font: 200 clamp(54px, 7.5vw, 96px)/1 var(--ui); color: #d4d4d4; text-shadow: 0 0 12px rgba(255, 255, 255, .45); opacity: .8; transition: opacity .2s, color .2s; }
.arrow.l { left: 4%; animation-direction: reverse; } .arrow.r { right: 4%; }
.arrow:hover { opacity: 1; color: #fff; }
.arrow::after { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: .08em; pointer-events: none; opacity: 0; animation: arrowPulse 2.6s ease-out infinite; }
.arrow.l::after { content: "‹"; --dir: -1; }
.arrow.r::after { content: "›"; --dir: 1; }
@keyframes arrowPulse { 0% { transform: translateX(0); opacity: .55; } 70% { opacity: 0; } 100% { transform: translateX(calc(var(--dir) * 30px)); opacity: 0; } }
.quick { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100% - 2 * var(--gut))); max-height: calc(100% - var(--bar-h) - var(--help-h) - 40px); overflow: auto;
  display: none; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 24px 28px; }
.quick.on { display: grid; animation: flipIn .45s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes flipIn { from { transform: translate(-50%, -50%) perspective(900px) rotateY(-80deg); opacity: .3; } }
.quick h3 { margin: 4px 0 2px; font: 400 clamp(18px, 2vw, 26px)/1.2 var(--title); letter-spacing: .06em; text-shadow: 0 0 10px var(--glow); }
.quick ul { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; }
.quick ul li::before, .g-panel ul li::before, .manual ul li::before { content: '◆'; color: #9b9b9b; margin-right: 9px; font-size: .65em; vertical-align: 2px; }
.quick .shots { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.quick .shots img { width: 100%; height: 100%; object-fit: cover; border: 1px solid rgba(195, 195, 195, .45); border-radius: 2px; min-height: 0; aspect-ratio: 16 / 9; }
.quick .q-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

.meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
.meta dt { color: var(--hi); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; padding-top: 2px; }
.meta dd { margin: 0; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 22px; border: 1px solid var(--line); background: rgba(20, 20, 20, .5); cursor: pointer; text-decoration: none;
  font: 400 13px var(--ui); letter-spacing: .08em; color: #e7e7e7; transition: border-color .2s, box-shadow .2s, background .2s; }
.btn:hover, .btn:focus-visible { border-color: #d3d3d3; box-shadow: 0 0 14px var(--glow); background: rgba(79, 79, 79, .35); color: #ffffff; }
.btn[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; color: #dadada; background: rgba(20, 20, 20, .4); }

/* ---------- game detail ---------- */
.game { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.g-media, .g-panel, .player, .playlist, .idc, .mpage { min-width: 0; }
.g-media { position: sticky; top: calc(var(--bar-h) + 20px); }
.g-hero { position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(195, 195, 195, .45); border-radius: 4px; overflow: hidden; background: #000000; cursor: zoom-in; aspect-ratio: 16 / 9;
  box-shadow: 0 0 50px rgba(117, 117, 117, .2); }
.g-hero img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.g-hero .wip, .g-strip .wip { position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(212, 212, 212, .9); color: #1a1a1a; font: 600 10px var(--ui); letter-spacing: .14em; }
.g-cap { margin: 10px 2px 0; display: flex; justify-content: space-between; gap: 12px; font: 300 12px var(--ui); letter-spacing: .12em; color: var(--hi); text-transform: uppercase; }
.g-strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.g-strip button { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: #000000 center / cover no-repeat; cursor: pointer; opacity: .55; transition: opacity .2s, box-shadow .2s, border-color .2s; }
.g-strip button:hover { opacity: .9; }
.g-strip button[aria-selected="true"] { opacity: 1; border-color: #d3d3d3; box-shadow: 0 0 12px var(--glow); }
.g-strip .wip { top: 3px; right: 3px; font-size: 8px; padding: 1px 5px; }
.g-panel { padding: 24px 26px; }
.g-panel h1 { margin: 6px 0 2px; font: 400 clamp(22px, 2.4vw, 34px)/1.15 var(--title); letter-spacing: .05em; text-shadow: 0 0 12px var(--glow); }
.g-panel .sub { margin: 0; color: var(--hi); font-size: 14px; letter-spacing: .04em; }
.g-panel .sub .ship { color: #dfdfdf; }
.g-panel .log { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: #e7e7e7; }
.g-panel h2 { margin: 18px 0 8px; font: 300 11px var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--hi); }
.g-panel ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.75; }
.g-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.g-nav a { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: rgba(20, 20, 20, .35); transition: border-color .2s, box-shadow .2s; }
.g-nav a:hover { border-color: #d3d3d3; box-shadow: 0 0 12px var(--glow); }
.g-nav a span { display: block; font: 300 10px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--hi); }
.g-nav a b { display: block; font: 600 13px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-nav a.next { text-align: right; }
.g-video { margin-top: 16px; aspect-ratio: 16 / 9; border: 1px solid rgba(195, 195, 195, .45); border-radius: 4px; overflow: hidden; background: #000000; display: none; }
.g-video.on { display: block; }
.g-video iframe, .g-video video { width: 100%; height: 100%; border: 0; display: block; background: #000000; }
.g-video.portrait { aspect-ratio: 1920 / 2386; max-height: 80vh; margin-left: auto; margin-right: auto; }

/* ---------- reel ---------- */
.reel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.player { padding: 12px; }
.screen { aspect-ratio: 16 / 9; background: #000000; border-radius: 3px; overflow: hidden; }
.screen.portrait { aspect-ratio: auto; height: min(70vh, 720px); }
.screen iframe, .screen video { width: 100%; height: 100%; border: 0; display: block; background: #000000; }
.screen video { object-fit: contain; }
.now-playing { margin: 12px 4px 2px; font: 300 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--hi); }
.now-playing b { color: var(--white); font: 400 14px var(--title); letter-spacing: .06em; text-transform: none; margin-right: 10px; }
.playlist { padding: 8px; max-height: calc(100vh - var(--bar-h) - var(--help-h) - 70px); overflow: auto; }
.track { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; text-align: left; }
.track:hover { background: rgba(166, 166, 166, .1); }
.track[aria-current="true"] { border-color: #d3d3d3; box-shadow: 0 0 12px var(--glow); background: rgba(79, 79, 79, .25); }
.track .th { aspect-ratio: 16 / 9; border-radius: 2px; background: #000000 center / cover; border: 1px solid var(--line); }
.track b { display: block; font: 600 13px var(--ui); letter-spacing: .04em; }
.track span { display: block; font: 300 11px var(--ui); letter-spacing: .12em; color: var(--hi); text-transform: uppercase; margin-top: 2px; }
.track.master b { color: #dfdfdf; }

/* ---------- manual (resume) ---------- */
.manual { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.idc { padding: 18px; position: sticky; top: calc(var(--bar-h) + 20px); }
.idc .ph { aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 16px; position: relative; }
.idc .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.idc .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(30, 30, 30, .55)), repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .12) 2px 3px); }
.idc h1 { margin: 0; font: 400 20px var(--title); letter-spacing: .06em; text-shadow: 0 0 10px var(--glow); }
.idc .role { margin: 4px 0 0; color: var(--hi); font-size: 13px; letter-spacing: .06em; }
.idc .btns { display: grid; gap: 8px; margin-top: 16px; }
.mpage { padding: 24px 28px; }
.mpage section + section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.mpage h2 { margin: 0 0 12px; font: 300 11px var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--hi); }
.mpage p { margin: 0; line-height: 1.7; color: #e7e7e7; }
.job { display: grid; grid-template-columns: 110px 1fr; gap: 4px 18px; margin-bottom: 18px; }
.job .when { font: 300 12px/1.5 var(--ui); letter-spacing: .1em; color: var(--hi); text-transform: uppercase; }
.job h3 { margin: 0; font: 400 16px var(--title); letter-spacing: .05em; }
.job .jr { margin: 2px 0 0; font-size: 13px; color: var(--hi); }
.job .jr .cur { color: #dfdfdf; }
.job ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.65; color: #e7e7e7; }
.job .shipped { margin-top: 6px; font-size: 13px; color: #dfdfdf; }
.job .links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.job .links a { font-size: 12px; color: var(--hi); text-decoration: none; border-bottom: 1px solid var(--line); }
.job .links a:hover { color: #ffffff; border-color: #d3d3d3; }

/* ---------- contact ---------- */
.contact { max-width: 760px; }
.net { padding: 8px; }
.net-h { padding: 14px 16px 10px; }
.net-h h1 { margin: 0; font: 400 clamp(18px, 2vw, 26px) var(--title); letter-spacing: .06em; text-shadow: 0 0 10px var(--glow); }
.net-h p { margin: 4px 0 0; color: var(--hi); font-size: 13px; }
.row { display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; align-items: center; width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: 4px; background: none; text-align: left; cursor: pointer; text-decoration: none; }
.row:hover, .row:focus-visible { background: rgba(79, 79, 79, .25); border-color: #d3d3d3; box-shadow: 0 0 12px var(--glow); outline: none; }
.row dt, .row .k { font: 300 11px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--hi); }
.row .v { font: 400 15px var(--ui); letter-spacing: .03em; word-break: break-word; }
.row .go { color: var(--hi); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.row.static { cursor: default; }
.row.static:hover { background: none; border-color: transparent; box-shadow: none; }
.net hr { border: 0; border-top: 1px solid var(--line); margin: 4px 16px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(5, 5, 5, .94); }
.lightbox.on { display: grid; animation: viewIn .3s ease both; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 120px); border: 1px solid rgba(195, 195, 195, .45); box-shadow: 0 0 60px rgba(117, 117, 117, .25); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 16px; font: 200 56px/1 var(--ui); color: #bebebe; text-shadow: 0 0 12px var(--glow); }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--gut); border-top: 1px solid var(--line); background: rgba(20, 20, 20, .6); }
.lb-cap { font: 300 13px var(--ui); letter-spacing: .1em; color: #dadada; }
.lb-cap .wip { color: #dfdfdf; }
.lb-close { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: 400 13px var(--ui); color: #dadada; letter-spacing: .06em; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; align-content: center; gap: 18px; background: rgba(5, 5, 5, .82); }
.loader.on { display: grid; }
.ld-disc { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #050505 0 14%, #dadada 14% 17%, transparent 17%), conic-gradient(#2b2b2b, #686868, #c0c0c0, #3b3b3b, #2b2b2b); animation: spin .9s linear infinite; box-shadow: 0 0 30px rgba(117, 117, 117, .5); }
@keyframes spin { to { transform: rotate(360deg); } }
.loader span { font: 300 12px var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--hi); animation: pulse 1.2s ease-in-out infinite; }

.nojs { position: relative; z-index: 2; max-width: 640px; margin: 20vh auto; padding: 0 24px; }

/* logo (upper left): the triangle M, flat. White M, triangle and centre line at 60% value */
.logo { display: block; width: 40px; flex: none; transition: transform .3s; }
.logo:hover { transform: scale(1.06); }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; transform: scale(1.2); transform-origin: 50% 6.6%; }   /* origin = T-junction at (50, 5) of the 100×76 box */
.logo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo .tri path { stroke: #929292; stroke-width: 3.6; }
.logo .m path { stroke: #ffffff; stroke-width: 4; }

/* footage tile at the end of a project's shot strip */
.g-strip .g-tape { opacity: .85; }
.g-strip .g-tape span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); font: 600 11px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #f2f2f4; }
.g-strip .g-tape:hover span { background: rgba(0, 0, 0, .35); }

/* unreleased: the four projects behind one card */
.u-list { display: grid; gap: 6px; margin: 16px 0 6px; }
.u-item { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 7px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; transition: background .2s, border-color .2s; }
.u-item:hover { background: rgba(255, 255, 255, .06); }
.u-item.on { border-color: #d8d8d8; background: rgba(255, 255, 255, .08); box-shadow: 0 0 12px rgba(255, 255, 255, .15); }
.u-item .th { aspect-ratio: 16 / 9; border-radius: 2px; background: #000 center / cover; border: 1px solid var(--line); }
.u-item b { display: block; font: 600 13px/1.25 var(--ui); letter-spacing: .03em; }
.u-item span span { display: block; margin-top: 2px; font: 300 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--hi); }

/* logo click: fade out, then back in on the Resume card */
.fader { position: fixed; inset: 0; z-index: 35; background: #000; opacity: 0; pointer-events: none; transition: opacity .38s ease; }
.fader.on { opacity: 1; pointer-events: auto; }

/* ---------- responsive ---------- */
/* mid widths: centred tabs would run into the name, so they sit on the right instead */
@media (min-width: 721px) and (max-width: 1100px) {
  .sysbar { grid-template-columns: minmax(0, 1fr) auto; }
  .sys-spacer { display: none; }
}
@media (max-width: 1000px) {
  .game, .reel, .manual { grid-template-columns: minmax(0, 1fr); }
  .g-media, .idc { position: static; }
  .idc { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
  .idc .ph { margin: 0; }
  .idc .btns { grid-column: 1 / -1; }
  .quick { grid-template-columns: 1fr; }
  .quick .shots { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  :root { --bar-h: 92px; }
  .sysbar { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-content: center; padding-top: env(safe-area-inset-top); }
  .brandwrap { display: contents; }
  .logo { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .brand { grid-column: 2; grid-row: 1; align-self: end; }
  .brand .ttl { font-size: 17px; }
  .brand .crumb { display: none; }
  .tabs { grid-column: 2; grid-row: 2; align-self: start; width: auto; margin-left: -10px; }
  .tabs a { padding: 6px 10px; font-size: 11px; letter-spacing: .14em; }
  .logo { width: 56px; }
  .logo svg { transform: scale(1.14); }   /* 5% under desktop, same origin */
  .res-title { font-size: 12px; letter-spacing: .08em; }
  .sys-spacer { display: none; }
  .ring { width: 62vw; }
  .stage { height: calc(62vw / .71 * 1.15 + 30px); }
  .arrow { padding: 6px; }
  .job { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr auto; }
  .row .k { grid-column: 1 / -1; }
  .lightbox img { max-width: 100vw; }
  .lb-prev, .lb-next { font-size: 40px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}