:root { color-scheme: dark; --ink: #10100e; --paper: #f4f0e8; --acid: #d7ff40; --muted: #aaa79f; --line: rgba(244,240,232,.22); }
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.35; }
a { color: inherit; }
.masthead { position: fixed; z-index: 4; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 18px 20px; mix-blend-mode: difference; color: white; pointer-events: none; }
.masthead a { pointer-events: auto; }
.wordmark { font: 400 29px/.73 "Instrument Serif", Georgia, serif; letter-spacing: -.045em; text-decoration: none; }
.admin-link { align-self: flex-start; color: inherit; text-decoration: none; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.loading { min-height: 100vh; margin: 0; display: grid; place-items: center; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
.work { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 31vw); align-items: stretch; }
.video-wrap { position: relative; min-height: 58svh; background: #080808; overflow: hidden; }
.video-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #080808; }
.sound-button { position: absolute; z-index: 2; right: 18px; bottom: 18px; border: 1px solid rgba(244,240,232,.7); background: rgba(16,16,14,.8); color: var(--paper); padding: 9px 11px; font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.sound-button:hover, .sound-button.is-on { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.sync-note { position: absolute; z-index: 2; left: 18px; bottom: 18px; margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.meta { display: flex; flex-direction: column; justify-content: space-between; gap: 44px; padding: clamp(82px, 8vw, 128px) clamp(20px, 3vw, 48px) 30px; background: var(--paper); color: var(--ink); }
.meta__number { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.meta h2 { max-width: 9ch; margin: 12px 0; font: 400 clamp(42px, 5.1vw, 82px)/.84 "Instrument Serif", Georgia, serif; letter-spacing: -.055em; }
.meta h2 em { display: block; font-style: italic; }
.artist { text-underline-offset: 3px; }
.description { max-width: 31ch; margin: 0; font-size: 11px; line-height: 1.5; }
.empty { min-height: 100svh; display: grid; place-items: center; padding: 100px 24px 48px; background: var(--acid); color: var(--ink); }
.empty-inner { width: min(720px, 100%); }
.empty h1 { margin: 0; font: 400 clamp(66px, 14vw, 190px)/.75 "Instrument Serif", Georgia, serif; letter-spacing: -.075em; }
.empty p { max-width: 30ch; margin: 30px 0 0; font-size: 11px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px; background: var(--acid); color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
footer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.screen-mode { overflow: hidden; }
.screen-mode .masthead, .screen-mode footer { display: none !important; }
.screen-mode .work { display: block; height: 100svh; min-height: 0; }
.screen-mode .video-wrap { height: 100svh; min-height: 0; }
.screen-mode .meta { display: none; }
.admin { min-height: 100svh; padding: 100px max(20px, calc((100vw - 1040px) / 2)) 48px; color: var(--ink); background: var(--paper); }
.admin__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 56px; }
.admin-label { color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.admin h2 { margin: 38px 0 13px; font: 400 30px/1 "Instrument Serif", Georgia, serif; }
.admin p { max-width: 66ch; font-size: 11px; line-height: 1.55; }
.admin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.panel { border-top: 1px solid var(--ink); }
form { display: grid; gap: 14px; padding: 18px 0; }
label { display: grid; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.check { grid-template-columns: auto 1fr; align-items: center; text-transform: none; letter-spacing: 0; font-size: 11px; }
.check input { width: auto; }
input, textarea, button { font: inherit; border-radius: 0; }
input, textarea { width: 100%; border: 1px solid rgba(16,16,14,.35); padding: 11px; color: var(--ink); background: transparent; }
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
button { width: max-content; min-height: 37px; padding: 10px 14px; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
button:hover { background: var(--acid); color: var(--ink); }
button:disabled { cursor: not-allowed; opacity: .45; }
button.secondary { background: transparent; color: var(--ink); }
.text-link { display: inline-block; margin: 18px 0; font-size: 11px; text-underline-offset: 3px; }
.status { min-height: 17px; margin: 0; color: #635f58; font-size: 10px; }
.status.error { color: #b22719; }
@media (max-width: 720px) { .work { min-height: auto; display: flex; flex-direction: column; } .video-wrap { aspect-ratio: 4 / 5; min-height: 0; } .meta { min-height: 42svh; padding-top: 28px; } .meta h2 { font-size: clamp(54px, 16vw, 86px); } .admin-grid { grid-template-columns: 1fr; gap: 10px; } footer { align-items: flex-start; flex-direction: column; } .screen-mode .work { display: block; height: 100svh; } .screen-mode .video-wrap { height: 100svh; aspect-ratio: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }