@font-face { font-family: "Share Tech Mono"; src: url("/assets/fonts/share-tech-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --tech: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* Portfolio page. Colours match the home page: ink background, paper text, coral signal, plum and blueprint accents. */
.pf-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.pf-filters button { min-height: 44px; padding: 0 1.2rem; border-radius: 999px; border: 1px solid rgb(241 236 227 / 0.35); background: transparent; color: #F1ECE3; font: inherit; font-weight: 500; font-size: 1rem; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.pf-filters button:hover { border-color: #FFB39E; color: #FFB39E; }
.pf-filters button[aria-pressed="true"] { background: #F1ECE3; color: #29232D; border-color: #F1ECE3; }
.pf-sec { padding-top: clamp(2.5rem, 5vw, 4rem); }
.pf-sec[hidden] { display: none; }
.page-main .pf-sec h2 { margin: 0 0 1.6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #F1ECE3; text-transform: none; }

/* videos */
.pf-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.pv--feat { grid-column: 1 / -1; }
.pv { display: grid; gap: 0.7rem; align-content: start; }
.pv h3 { margin: 0.4rem 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -0.02em; color: #F1ECE3; }
.pv--feat h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.pv p { margin: 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; color: rgb(241 236 227 / 0.82); }
.pv-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: #4E3A57; color: #F1ECE3; font-size: 0.875rem; white-space: nowrap; }
.pv-play, .pv-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1D1822; }
.pv-play { border: 1px solid rgb(241 236 227 / 0.18); cursor: pointer; color: #F1ECE3; display: grid; place-items: center; transition: border-color 200ms ease; background-image: linear-gradient(135deg, #342D3A, #1D1822); }
.pv-play:hover { border-color: #FFB39E; }
.pv-pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border-radius: 999px; background: #F1ECE3; color: #29232D; font-weight: 600; font-size: 1.0625rem; transition: transform 200ms ease; }
.pv-pill::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.pv-play:hover .pv-pill, .pv-play:focus-visible .pv-pill { transform: scale(1.06); }
.pv-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pv-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.pv-pending { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid rgb(241 236 227 / 0.18); background: linear-gradient(135deg, #342D3A, #1D1822); padding: 1rem; text-align: center; color: rgb(241 236 227 / 0.82); font-size: 1.0625rem; }
.pv-play.has-poster { background-size: cover; background-position: center; }
.pv-msg { position: absolute; inset: auto 0 0 0; padding: 0.7rem 1rem; background: rgb(18 13 24 / 0.9); font-size: 0.9375rem; color: #FFB39E; }
.page-main .pf-note { margin: 1.8rem 0 0; max-width: 70ch; font-size: 0.9375rem; line-height: 1.55; color: rgb(241 236 227 / 0.7); }

/* games */
.page-main .pg a { color: #F1ECE3; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: baseline; gap: 0.4rem 1.4rem; padding: 1.2rem 0; border-bottom: 1px solid rgb(241 236 227 / 0.18); text-decoration: none; color: #F1ECE3; transition: padding 200ms ease, color 200ms ease; }
.pg-t { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.02em; }
.pg-j { font-size: 1.0625rem; color: rgb(241 236 227 / 0.78); }
.page-main .pg-go { font-weight: 600; color: #FFB39E; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.page-main .pg a:hover, .page-main .pg a:focus-visible { padding-left: 0.6rem; color: #FFB39E; }
.pg a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 800px) { .page-main .pg a { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pf-filters button, .pv-play, .pv-pill, .ps-btn, .pg a { transition: none; } .pv-play:hover .pv-pill { transform: none; } }

/* ---------- Sound design and music: a desk of taped photos ---------- */
.tb-view { display: inline-flex; gap: 0.3rem; padding: 0.25rem; border-radius: 999px; border: 1px solid rgb(241 236 227 / 0.25); }
.tb-view button { min-height: 40px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: #F1ECE3; font: inherit; font-weight: 500; font-size: 1rem; cursor: pointer; }
.tb-view button[aria-pressed="true"] { background: #F1ECE3; color: #29232D; }
.tb-view button:hover:not([aria-pressed="true"]) { color: #FFB39E; }
.tb-view button:focus-visible, .tb-shuffle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tb-view button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the film: a tall wrapper, a pinned stage with a blurred ambient background, and a diagonal strip that the page scroll runs through */
.fs { --fw: clamp(280px, 46vw, 680px); --fg: clamp(20px, 2.4vw, 36px); height: calc(100svh + 55svh * 4); margin-inline: calc(50% - 50vw); }
.fs[hidden], .ls[hidden] { display: none; }
.fs-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; touch-action: pan-y; box-sizing: border-box; background: #100c15; }
.fs-bg { position: absolute; inset: -6%; }
.fs-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease; filter: blur(34px) saturate(1.1) brightness(0.42); transform: scale(1.1); }
.fs-bg img.on { opacity: 1; }
.fs-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgb(10 7 14 / 0.7)); }
.fs-grain { position: absolute; inset: -20%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.07; mix-blend-mode: overlay; pointer-events: none; animation: fs-grain 0.7s steps(1) infinite; }
@keyframes fs-grain { 0% { transform: translate(0, 0); } 16% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -3%); } 50% { transform: translate(-2%, -2%); } 66% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 3%); } }
.fs-strip { position: absolute; left: 0; right: 0; top: 9.6rem; bottom: 17.2rem; transform: rotate(-7deg) scale(1.04); transform-origin: 50% 50%; }
.fs-track { position: absolute; left: 50%; top: 50%; margin: calc(var(--fw) / -3.56) 0 0 calc(var(--fw) / -2); padding: 0; list-style: none; display: flex; gap: var(--fg); will-change: transform; }
.fs-track::before { content: ""; position: absolute; top: -40px; bottom: -40px; left: -150vw; right: -150vw; background: linear-gradient(180deg, #2a1d14, #110b08 16%, #0b0705 50%, #110b08 84%, #2a1d14); box-shadow: inset 0 0 0 1px rgb(255 190 120 / 0.1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='34'%3E%3Crect x='7' y='10' width='18' height='14' rx='3.5' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='34'%3E%3Crect x='7' y='10' width='18' height='14' rx='3.5' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='34'%3E%3Crect x='7' y='10' width='18' height='14' rx='3.5' fill='%23000'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='34'%3E%3Crect x='7' y='10' width='18' height='14' rx='3.5' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 32px 34px, 32px 34px, 100% 100%; mask-size: 32px 34px, 32px 34px, 100% 100%;
  -webkit-mask-position: 0 3px, 0 calc(100% - 3px), 0 0; mask-position: 0 3px, 0 calc(100% - 3px), 0 0;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat; mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-composite: xor, xor; mask-composite: exclude, exclude; }
.fs-frame { position: relative; flex: none; width: var(--fw); }
.fs-card { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: visible; color: #F1ECE3; box-shadow: 0 0 0 2px #050302, 0 0 0 3px rgb(255 190 120 / 0.14); }
.fs-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fs-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 36px rgb(0 0 0 / 0.5); pointer-events: none; }
.fs-key, .fs-fn { position: absolute; top: -29px; font: 400 10px/18px var(--tech); letter-spacing: 0.12em; color: #d9964a; opacity: 0.85; white-space: nowrap; pointer-events: none; }
.fs-key { left: 4px; } .fs-fn { right: 4px; }
.fs-label { position: absolute; left: 0; bottom: -33px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Rock Salt", "Segoe Print", cursive; font-size: 0.8rem; line-height: 28px; color: #E3CDB0; pointer-events: none; }
.fs-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
/* viewfinder over the front frame (it turns with the strip) */
.fs-vf { position: absolute; left: 50%; top: 50%; width: calc(var(--fw) + 70px); height: calc(var(--fw) / 1.778 + 96px); transform: translate(-50%, -50%); pointer-events: none; color: #F1ECE3; }
.fs-vf .c { position: absolute; width: 22px; height: 22px; border: 0 solid rgb(241 236 227 / 0.85); }
.fs-vf .tl.c { left: 0; top: 14px; border-width: 2px 0 0 2px; } .fs-vf .tr.c { right: 0; top: 14px; border-width: 2px 2px 0 0; }
.fs-vf .bl.c { left: 0; bottom: 14px; border-width: 0 0 2px 2px; } .fs-vf .br.c { right: 0; bottom: 14px; border-width: 0 2px 2px 0; }
.fs-vf .t { position: absolute; font: 400 12px/1 var(--tech); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 6px rgb(0 0 0 / 0.7); }
.fs-vf .t.tl { left: 2px; top: -6px; } .fs-vf .t.tr { right: 2px; top: -6px; }
.fs-vf .t.bl { left: 2px; bottom: -6px; } .fs-vf .t.br { right: 2px; bottom: -6px; } .fs-vf .t.bc { left: 50%; bottom: -6px; transform: translateX(-50%); }
.fs-info { position: absolute; left: 0; right: 0; bottom: 4.6rem; display: grid; justify-items: center; gap: 0.45rem; padding: 0 1rem; text-align: center; }
.page-main .fs-now { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.4rem); letter-spacing: -0.025em; color: #F1ECE3; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / 0.6); }
.page-main .fs-cap { margin: 0; max-width: 60ch; font-size: 1.0625rem; color: rgb(241 236 227 / 0.88); text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.fs-ctl { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; }
.fs-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(241 236 227 / 0.5); background: rgb(16 12 21 / 0.4); color: #F1ECE3; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; transition: border-color 180ms ease, color 180ms ease; }
.fs-btn:hover { border-color: #FFB39E; color: #FFB39E; }
.fs-play { min-height: 52px; padding: 0 1.8rem; border: 0; border-radius: 999px; background: #F1ECE3; color: #29232D; font: inherit; font-weight: 600; font-size: 1.0625rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; transition: transform 200ms ease; }
.fs-play::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.fs-play:hover { transform: scale(1.05); }
.fs-btn:focus-visible, .fs-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* list view: a Selected Work style list; a thumbnail follows the pointer */
.ls { position: relative; }
.ls-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(241 236 227 / 0.18); }
.ls-rows li { border-bottom: 1px solid rgb(241 236 227 / 0.18); }
.ls-row { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 2.2rem; align-items: center; gap: 0 1.6rem; width: 100%; padding: clamp(1rem, 2.2vw, 1.7rem) 0; border: 0; background: transparent; color: #F1ECE3; font: inherit; text-align: left; cursor: pointer; }
.ls-inline { display: none; }
.ls-n { font: 400 0.9rem/1 var(--tech); letter-spacing: 0.12em; color: rgb(241 236 227 / 0.55); font-variant-numeric: tabular-nums; }
.ls-t { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -0.035em; color: rgb(241 236 227 / 0.5); transition: color 220ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.ls-m { font: 400 0.85rem/1 var(--tech); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(241 236 227 / 0.6); white-space: nowrap; }
.ls-a { width: 26px; height: 26px; color: #F1ECE3; opacity: 0.7; transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), color 220ms ease, opacity 220ms ease; }
.ls-row:hover .ls-t, .ls-row:focus-visible .ls-t, .ls-row.is-over .ls-t { color: #F1ECE3; transform: translateX(0.5rem); }
.ls-row:hover .ls-a, .ls-row:focus-visible .ls-a { color: #FFB39E; opacity: 1; transform: translate(3px, -3px); }
.ls.has-over .ls-row:not(.is-over) .ls-t { color: rgb(241 236 227 / 0.22); }
.ls-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ls-thumb { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(240px, 24vw, 380px); aspect-ratio: 16 / 9; margin: -20% 0 0 2rem; border-radius: 4px; overflow: hidden; background: #000; opacity: 0; transform: translate3d(-999px, 0, 0); pointer-events: none; box-shadow: 0 24px 50px rgb(0 0 0 / 0.5); transition: opacity 200ms ease; will-change: transform; }
.ls-thumb.on { opacity: 1; }
.ls-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 140ms ease; }
.ls-thumb img.on { opacity: 1; }
@media (hover: none), (max-width: 760px) {
  .ls-thumb { display: none; }
  .ls-row { grid-template-columns: 96px minmax(0, 1fr) 1.6rem; gap: 0.4rem 1rem; }
  .ls-inline { display: block; grid-row: 1 / span 2; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
  .ls-n { display: none; }
  .ls-t { grid-column: 2; font-size: 1.2rem; color: #F1ECE3; }
  .ls-m { grid-column: 2; font-size: 0.7rem; }
  .ls-a { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 700px) { .fs { --fw: 74vw; } .fs-strip { transform: rotate(-6deg) scale(1.15); bottom: 17.5rem; top: 5.5rem; } .fs-vf .t { font-size: 9px; } .fs-vf { width: calc(var(--fw) + 40px); } .page-main .fs-cap { font-size: 0.95rem; } }
@media (prefers-reduced-motion: reduce) { .fs-grain, .hud-rec i, .fs-fx i, .fs-fx { animation: none; } .fs-bg img, .fs-btn, .fs-play, .ls-t, .ls-a, .ls-thumb, .ls-thumb img { transition: none; } }
/* the video dialog */
.sp-dialog { width: min(1180px, 94vw); max-height: 94vh; padding: 0; border: 1px solid rgb(241 236 227 / 0.25); border-radius: 16px; background: #14101a; color: #F1ECE3; overflow: hidden; }
.sp-dialog::backdrop { background: rgb(8 6 12 / 0.82); }
.sp-dhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem 0.8rem 1.4rem; }
.sp-dhead p { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.sp-close { min-height: 44px; padding: 0 1.3rem; border-radius: 999px; border: 1px solid rgb(241 236 227 / 0.4); background: transparent; color: #F1ECE3; font: inherit; font-weight: 500; cursor: pointer; }
.sp-close:hover { border-color: #FFB39E; color: #FFB39E; }
.sp-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sp-dialog video { display: block; width: 100%; max-height: calc(94vh - 4.5rem); background: #000; }

.portfolio h1 { text-transform: none; }

/* ---------- film HUD: camera readouts, audio meters, controls hint, timeline ---------- */
.fs-hud { position: absolute; inset: 6.3rem 2.2rem 4.6rem; pointer-events: none; font-family: var(--tech); color: #F1ECE3; text-transform: uppercase; }
.fs-hud p, .fs-hud ul { margin: 0; padding: 0; list-style: none; }
.fs-hud .g { position: absolute; background: rgb(241 236 227 / 0.07); }
.fs-hud .g1, .fs-hud .g2 { top: -6rem; bottom: -4rem; width: 1px; } .fs-hud .g1 { left: 33.33%; } .fs-hud .g2 { left: 66.66%; }
.fs-hud .g3, .fs-hud .g4 { left: -2.2rem; right: -2.2rem; height: 1px; } .fs-hud .g3 { top: 33%; } .fs-hud .g4 { top: 66%; }
.fs-hud .cross { position: absolute; left: 50%; top: 46%; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: linear-gradient(rgb(241 236 227 / 0.5), rgb(241 236 227 / 0.5)) 50% 0 / 1px 8px no-repeat, linear-gradient(rgb(241 236 227 / 0.5), rgb(241 236 227 / 0.5)) 50% 100% / 1px 8px no-repeat, linear-gradient(rgb(241 236 227 / 0.5), rgb(241 236 227 / 0.5)) 0 50% / 8px 1px no-repeat, linear-gradient(rgb(241 236 227 / 0.5), rgb(241 236 227 / 0.5)) 100% 50% / 8px 1px no-repeat; }
.hud-tl { position: absolute; left: 0; top: 0; display: grid; gap: 0.35rem; }
.hud-rec { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; letter-spacing: 0.2em; }
.hud-rec i { width: 11px; height: 11px; border-radius: 50%; background: #E0452E; box-shadow: 0 0 10px rgb(224 69 46 / 0.7); animation: hud-rec 1.2s steps(1) infinite; }
@keyframes hud-rec { 50% { opacity: 0.1; } }
.hud-tc { font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: 0.08em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgb(241 236 227 / 0.25); }
.hud-s { font-size: 0.66rem; letter-spacing: 0.12em; white-space: nowrap; color: rgb(241 236 227 / 0.62); }
.hud-tr { position: absolute; right: 0; top: 0; display: grid; justify-items: end; gap: 0.6rem; }
.hud-spec { display: flex; gap: 0.5rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; font-size: 0.8rem; letter-spacing: 0.14em; }
.hud-spec li + li { padding-left: 1.1rem; border-left: 1px solid rgb(241 236 227 / 0.28); }
.hud-batt { display: flex; align-items: center; gap: 3px; font-size: 0.72rem; letter-spacing: 0.18em; color: rgb(241 236 227 / 0.62); }
.hud-batt span { margin-right: 0.5rem; }
.hud-batt i { width: 9px; height: 14px; background: #F1ECE3; opacity: 0.85; }
.hud-batt i:last-child { opacity: 0.25; }
.hud-bl { position: absolute; left: 0; bottom: 0; width: clamp(230px, 20vw, 300px); display: grid; gap: 5px; }
.hud-m { display: grid; grid-template-columns: 1.2rem 1fr; align-items: center; font-size: 0.78rem; letter-spacing: 0.1em; }
.hud-m b { display: block; height: 9px; width: 7%; background: repeating-linear-gradient(90deg, #8FBF86 0 5px, transparent 5px 7px); transition: width 220ms ease-out; max-width: 100%; }
.hud-db { display: flex; justify-content: space-between; padding-left: 1.2rem; font-size: 0.62rem; letter-spacing: 0.04em; color: rgb(241 236 227 / 0.55); }
.hud-br { position: absolute; right: 0; bottom: 0; display: grid; gap: 0.45rem; justify-items: end; font-size: 0.75rem; letter-spacing: 0.16em; color: rgb(241 236 227 / 0.7); }
.hud-br kbd { display: inline-block; margin-right: 0.4rem; padding: 3px 7px; border: 1px solid rgb(241 236 227 / 0.45); border-radius: 3px; font: inherit; color: #F1ECE3; background: rgb(16 12 21 / 0.45); }
.hud-br kbd + kbd { margin-left: -0.1rem; }
/* timeline */
.fs-tl { position: absolute; left: 2.2rem; right: 2.2rem; bottom: 1.1rem; height: 2.6rem; border-top: 1px solid rgb(241 236 227 / 0.4); background: repeating-linear-gradient(90deg, rgb(241 236 227 / 0.4) 0 1px, transparent 1px 2%) 0 0 / 100% 7px no-repeat; }
.fs-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, rgb(241 236 227 / 0.8) 0 1px, transparent 1px 12.5%) 0 0 / 100% 12px no-repeat; }
.tl-head { position: absolute; top: -9px; width: 2px; height: 26px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 10px rgb(217 101 72 / 0.8); pointer-events: none; }
.tl-head::before { content: ""; position: absolute; left: -5px; top: -2px; border: 6px solid transparent; border-top-color: var(--accent); }
.tl-mark { position: absolute; top: 12px; transform: translateX(-50%); min-width: 44px; min-height: 28px; padding: 0; border: 0; background: transparent; color: rgb(241 236 227 / 0.8); font: 400 0.8rem/28px var(--tech); letter-spacing: 0.14em; text-align: center; cursor: pointer; pointer-events: auto; transition: color 180ms ease; }
.tl-mark:first-of-type { transform: translateX(0); text-align: left; } .tl-mark:last-of-type { transform: translateX(-100%); text-align: right; }
.tl-mark:hover { color: #FFB39E; }
.tl-mark:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* film effects: a slow light leak, a few scratches, drifting dust (transform and opacity only) */
.fs-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fs-fx .leak { position: absolute; top: -10%; bottom: -10%; left: -8%; width: 34%; background: radial-gradient(ellipse at 0% 50%, rgb(255 120 40 / 0.5), rgb(255 90 30 / 0.12) 45%, transparent 70%); mix-blend-mode: screen; opacity: 0.1; animation: fx-leak 7s ease-in-out infinite alternate; }
@keyframes fx-leak { to { opacity: 0.32; transform: translateX(3%); } }
.fs-fx .scr { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(255 255 255 / 0.5); opacity: 0; animation: fx-scr 5.3s steps(1) infinite; }
.fs-fx .s1 { left: 22%; } .fs-fx .s2 { left: 71%; animation-duration: 7.7s; animation-delay: -2s; }
@keyframes fx-scr { 0%, 94% { opacity: 0; } 95% { opacity: 0.22; } 97% { opacity: 0; } 98% { opacity: 0.14; transform: translateX(6px); } 99%, 100% { opacity: 0; } }
.fs-fx .dust { position: absolute; inset: -5%; background: radial-gradient(circle at 12% 18%, rgb(255 255 255 / 0.55) 0 1px, transparent 2px), radial-gradient(circle at 63% 41%, rgb(255 255 255 / 0.4) 0 1px, transparent 2px), radial-gradient(circle at 84% 77%, rgb(255 255 255 / 0.5) 0 1.5px, transparent 2.5px), radial-gradient(circle at 36% 88%, rgb(255 255 255 / 0.35) 0 1px, transparent 2px); opacity: 0.35; animation: fx-dust 3.4s steps(1) infinite; }
@keyframes fx-dust { 0% { transform: translate(0, 0); } 25% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 75% { transform: translate(1%, 1%); } }
@media (max-width: 1100px) { .hud-bl, .hud-br { display: none; } .fs-hud .g { display: none; } }
@media (max-width: 700px) { .fs-hud { inset: 5.6rem 1rem 4.6rem; } .hud-spec { display: none; } .hud-batt { display: none; } .hud-tc { font-size: 1.3rem; } .fs-tl { left: 1rem; right: 1rem; } .fs-strip { top: 8rem; } }
/* the portfolio opener: a giant title and three doors */
.pf-doors { list-style: none; margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.4rem); }
.door { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #14101a; color: #F1ECE3; text-decoration: none; isolation: isolate; box-shadow: inset 0 0 0 1px rgb(241 236 227 / 0.14); animation: door-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pf-doors li:nth-child(2) .door { animation-delay: 120ms; } .pf-doors li:nth-child(3) .door { animation-delay: 240ms; }
@keyframes door-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(1.05); transform: scale(1.02); transition: filter 400ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); z-index: -1; }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 10 18 / 0.85), transparent 55%); z-index: -1; }
.door:hover img, .door:focus-visible img { filter: brightness(0.95) saturate(1.1); transform: scale(1.07); }
.door-n { position: absolute; left: 1.1rem; top: 1rem; font: 400 0.9rem/1 var(--tech); letter-spacing: 0.14em; }
.door-t { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 2.5rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: -0.03em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: text-decoration-color 200ms ease; }
.door:hover .door-t, .door:focus-visible .door-t { text-decoration-color: #FFB39E; }
.door-m { position: absolute; left: 1.1rem; bottom: 1rem; font: 400 0.85rem/1 var(--tech); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(241 236 227 / 0.8); }
.door:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) { .pf-doors { grid-template-columns: 1fr; } .door { aspect-ratio: 16 / 9; } .door-t { bottom: 2.4rem; } }
@media (prefers-reduced-motion: reduce) { .door { animation: none; } .door img { transition: none; } }
.pf-sec { scroll-margin-top: 6rem; }

/* ---------- section heads: centred, bigger, each area in its own colour ---------- */
.pf-sec { padding-top: clamp(3.5rem, 7vw, 6rem); }
.pf-open .pf-filters { justify-content: center; margin: 0; }
.pf-open .pf-filters button { border-color: rgb(145 183 216 / 0.5); }
.pf-open .pf-filters button[aria-pressed="true"] { background: #DCEBF8; border-color: #DCEBF8; color: #0e2638; }
/* ---------- Mix & Master: discs ---------- */
.dk { --dd: clamp(290px, 38vw, 560px); height: calc(100svh + 45svh * 6); margin-inline: calc(50% - 50vw); }
.dk-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; box-sizing: border-box; background: #0A121B; touch-action: pan-y; }
.dk-bg { position: absolute; inset: 0; pointer-events: none; }
.dk-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; background: radial-gradient(ellipse 60% 55% at 50% 46%, var(--g), transparent 68%); }
.dk-glow.on { opacity: 0.42; }
.dk-ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; perspective: 1500px; perspective-origin: 50% 44%; pointer-events: none; }
.dk-item { position: absolute; left: 50%; top: 44%; width: var(--dd); height: var(--dd); margin: calc(var(--dd) / -2) 0 0 calc(var(--dd) / -2); will-change: transform; }
.dk-card { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.dk-tilt { position: absolute; inset: 0; display: block; border-radius: 50%; }
.dk-spin { position: absolute; inset: 0; display: block; border-radius: 50%; box-shadow: 0 26px 36px rgb(0 0 0 / 0.5); }
.dk-cv { display: block; width: 100%; height: 100%; }
.dk-item.is-playing .dk-spin { animation: dk-spin 4.5s linear infinite; }
@keyframes dk-spin { to { transform: rotate(360deg); } }
.dk-sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 25deg, transparent 0 8%, rgb(255 255 255 / 0.13) 13%, transparent 21% 52%, rgb(255 255 255 / 0.09) 60%, transparent 68%); pointer-events: none; }
.dk-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; }
.dk-info { position: absolute; left: 0; top: 0; display: grid; gap: 0.7rem; max-width: min(34vw, 420px); }
.dk-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; color: #F1ECE3; text-transform: none; text-wrap: balance; }
.dk-rows { margin: 0.5rem 0 0; display: grid; width: clamp(220px, 22vw, 320px); }
.dk-rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid rgb(241 236 227 / 0.28); }
.dk-rows dt { font-size: 0.72rem; letter-spacing: 0.18em; color: rgb(241 236 227 / 0.6); }
.dk-rows dd { margin: 0; font-size: 0.85rem; letter-spacing: 0.1em; text-align: right; }
.dk-hud .hud-tr { gap: 0.55rem; }
.dk-hud .hud-tc { font-size: clamp(1.3rem, 2.2vw, 2rem); }
.dk-lv { display: grid; gap: 5px; width: clamp(200px, 17vw, 260px); }
.dk-stage.is-on .dk-state i { background: #8FBF86; box-shadow: 0 0 10px rgb(143 191 134 / 0.8); animation: none; }
.dk-ctl { position: absolute; left: 50%; bottom: 4.7rem; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 0.8rem; }
.dk-seek { display: block; width: clamp(150px, 16vw, 260px); margin-left: 0.6rem; }
.dk-seek input { --c: #FF8450; }
@media (max-width: 1100px) { .dk-info { max-width: 46vw; } .dk-lv { display: none; } }
@media (max-width: 700px) { .dk-hud .hud-tc { font-size: 1.05rem; } .dk { --dd: 82vw; } .dk-rows { display: none; } .dk-title { font-size: 1.5rem; } .dk-ctl { flex-wrap: wrap; justify-content: center; width: calc(100% - 2rem); bottom: 4.4rem; } .dk-seek { order: 5; width: 100%; margin: 0; } .dk-item { top: 40%; } }
@media (prefers-reduced-motion: reduce) { .dk-item.is-playing .dk-spin { animation: none; } .dk-glow { transition: none; } }

.dk-stage .fs-grain { pointer-events: none; }
.pf-games { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(241 236 227 / 0.18); }

/* stages that are off screen stop their decorative animations */
.is-off .fs-grain, .is-off .fs-fx i, .is-off .hud-rec i { animation-play-state: paused; }

/* Hi-Res switch (Mix & Master) */
.dk-hires { position: absolute; left: clamp(1rem, 2.4vw, 2.2rem); bottom: 4.7rem; z-index: 60; max-width: 17rem; }
.hr-sw { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; font-family: var(--tech); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #cfd8e3; }
.hr-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hr-track { position: relative; width: 2.6rem; height: 1.45rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 999px; background: rgb(255 255 255 / 0.06); transition: background 200ms ease; flex: none; }
.hr-track i { position: absolute; top: 2px; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #cfd8e3; transition: transform 200ms ease, background 200ms ease; }
.hr-sw input:checked + .hr-track { background: var(--sc, #91B7D8); border-color: var(--sc, #91B7D8); }
.hr-sw input:checked + .hr-track i { transform: translateX(1.15rem); background: #0A121B; }
.hr-sw input:focus-visible + .hr-track { outline: 3px solid #fff; outline-offset: 3px; }
.hr-note { margin: 0.6rem 0 0; font-size: 0.72rem; line-height: 1.45; color: #aeb9c7; }
@media (max-width: 700px) { .dk-hires { left: 50%; transform: translateX(-50%); bottom: 9.6rem; width: max-content; max-width: 86vw; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .hr-track, .hr-track i { transition: none; } }

/* ---------- Game Audio: a shelf of cartridges, same stage as the discs ---------- */
.cs { --cw: clamp(230px, 25vw, 380px); height: calc(100svh + 45svh * 6); }
.cs-item { width: var(--cw); height: calc(var(--cw) * 1.15); margin: calc(var(--cw) * -0.575) 0 0 calc(var(--cw) / -2); }
.cs-card { border-radius: 14px; }
.cs .dk-tilt { border-radius: 14px; }
.cs-body { position: absolute; inset: 0; display: block; filter: drop-shadow(0 26px 26px rgb(0 0 0 / 0.5)); }
.cs-cv { display: block; width: 100%; height: 100%; }
.cs-item.is-insert .cs-body { animation: cs-ins 1000ms cubic-bezier(.5, 0, .3, 1); }
@keyframes cs-ins { 0% { transform: translateY(0); } 45% { transform: translateY(16%); } 60% { transform: translateY(16%); } 100% { transform: translateY(0); } }
.cs-bar { display: flex; gap: 4px; }
.cs-bar i { width: 15px; height: 11px; border: 1px solid rgb(241 236 227 / 0.5); }
.cs-bar i.on { background: #C9A6E8; border-color: #C9A6E8; }
.page-main a.cs-go:not(.button) { text-decoration: none; color: #29232D; }
.cs-go:hover { transform: scale(1.05); }
.cs .dk-stage.is-busy .dk-state i { background: #C9A6E8; box-shadow: 0 0 10px rgb(201 166 232 / 0.8); animation: none; }
@media (max-width: 700px) { .cs { --cw: 64vw; } .cs .dk-state { display: none; } .cs .cs-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .cs-item.is-insert .cs-body { animation: none; } }
.cs-ch { margin: 0.9rem 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.18em; color: rgb(241 236 227 / 0.6); }
.cs-ctl { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; width: clamp(220px, 22vw, 320px); }
.cs-ctl kbd { display: inline-block; margin-right: 0.35rem; padding: 2px 6px; border: 1px solid rgb(241 236 227 / 0.45); border-radius: 3px; font: inherit; background: rgb(16 12 21 / 0.45); }
@media (max-width: 700px) { .cs .cs-ch, .cs .cs-ctl { display: none; } }
.cs-keys { position: absolute; left: 0; bottom: 3.6rem; }
.cs-keys .cs-ch { margin-top: 0; }
@media (max-width: 1100px) { .cs-keys { display: none; } }
@media (min-width: 701px) { .cs .dk-rows { width: clamp(200px, 17vw, 250px); } }
.cs-music { position: absolute; left: 50%; bottom: 8.6rem; transform: translateX(-50%); z-index: 60; display: grid; gap: 0.45rem; justify-items: center; font-family: var(--tech); color: #F1ECE3; text-transform: uppercase; width: max-content; max-width: calc(100% - 2rem); }
.cs-music[hidden] { display: none; }
.cs-mh { margin: 0; font-size: 0.7rem; letter-spacing: 0.18em; color: rgb(241 236 227 / 0.62); }
.cs-mrow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
.cs-tabs { display: flex; gap: 0.4rem; }
.cs-tabs button { min-height: 32px; padding: 0 0.8rem; border: 1px solid rgb(241 236 227 / 0.45); border-radius: 999px; background: transparent; color: #F1ECE3; font: inherit; font-size: 0.75rem; letter-spacing: 0.12em; cursor: pointer; }
.cs-tabs button[aria-pressed="true"] { background: #F1ECE3; color: #29232D; }
.cs-mplay { min-height: 36px; padding: 0 1.1rem; border: 1px solid #C9A6E8; border-radius: 999px; background: transparent; color: #C9A6E8; font: inherit; font-size: 0.78rem; letter-spacing: 0.14em; cursor: pointer; }
.cs-mplay:hover { background: #C9A6E8; color: #29232D; }
.cs-mseek { display: block; width: clamp(130px, 14vw, 220px); }
.cs-mseek input { --c: #C9A6E8; }
.cs-mtime { min-width: 6.6em; font-size: 0.78rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.cs-tabs button:focus-visible, .cs-mplay:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cs-vid[hidden] { display: none; }
.page-main a.cs-go.is-alt:not(.button) { background: transparent; color: #F1ECE3; border: 1px solid rgb(241 236 227 / 0.5); }
@media (max-width: 700px) { .cs-music { bottom: 13.4rem; } .cs-mh { display: none; } .dk-hires { bottom: 17.6rem; } }
.cs-mh { line-height: 1.2; min-height: 0; }
.cs-tabs button { text-transform: uppercase; }
@media (max-width: 700px) { .cs .dk-hires { display: none; } }
.cs-keys[hidden] { display: none; }

/* touch targets: at least 44px, without changing how things look */
.tb-view button { min-height: 44px; }
.tl-mark::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.dk-seek input { height: 44px; }
.cs-mseek input { height: 44px; }
.cs-mplay, .cs-tabs button { min-height: 44px; }
.hr-sw { min-height: 44px; }
.hud-br kbd { background: rgb(16 12 21 / 0.75); }
.sp-dialog { overscroll-behavior: contain; }

/* the song sliders are drawn by hand so they look the same in Safari, Firefox and Chrome (accent-color is ignored on sliders in Safari) */
.rng { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; --p: 0%; --c: #FF8450; }
.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), rgb(241 236 227 / 0.3) var(--p)); }
.rng::-moz-range-track { height: 6px; border-radius: 3px; background: rgb(241 236 227 / 0.3); }
.rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.25); }
.rng::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.25); }
.rng:focus { outline: none; }
.rng:focus-visible::-webkit-slider-thumb { outline: 3px solid #fff; outline-offset: 3px; }
.rng:focus-visible::-moz-range-thumb { outline: 3px solid #fff; outline-offset: 3px; }