@import url('/assets/fonts/fonts.css');

/* Black is the artwork's own black (the QLED panel shows it as no light at all). The light is warm,
   like the grains; everything else stays quiet so the moving image carries the colour. */
:root {
  --void: #000;
  --light: #eeeae4;
  --dust: #9a968e;
  --dim: #6f6c66;
  --nacre: #a9b6c9;
  --rule: rgba(238, 234, 228, 0.14);
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --step-0: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --step-4: clamp(4rem, 2rem + 11vw, 13rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--light); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Spectral', Georgia, serif; font-weight: 300; font-size: var(--step-0); line-height: 1.75;
  font-feature-settings: 'kern', 'liga', 'onum'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: var(--light); text-decoration-color: rgba(169, 182, 201, 0.5); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--light); }
:focus-visible { outline: 1px solid var(--nacre); outline-offset: 4px; border-radius: 2px; }
p { margin: 0 0 1.1em; hanging-punctuation: first; }
h1, h2, h3 { font-weight: 200; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
em { font-style: italic; }
::selection { background: rgba(169, 182, 201, 0.35); }
img, video { display: block; max-width: 100%; }
video { background: var(--void); }
.skip { position: absolute; left: -999px; top: 1rem; } .skip:focus { left: 1rem; z-index: 99; background: var(--void); padding: 0.5rem 1rem; }

/* The site mark: the name, small, top left; navigation top right. */
.top { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: baseline; padding: 1.4rem var(--gutter);
  z-index: 20; font-size: 0.95rem; pointer-events: none; }
.top a { pointer-events: auto; text-decoration: none; color: var(--light); opacity: 0.85; }
.top a:hover { opacity: 1; }
.top nav { display: flex; gap: 1.6rem; }
.top::before { content: ''; position: absolute; inset: 0 0 -2.5rem 0; background: linear-gradient(#000c, #0000); z-index: -1; }

.foot { padding: 5rem var(--gutter) 3rem; color: var(--dim); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; }
.foot a { color: var(--dust); }

/* Videos (HLS, AV1 or HEVC): a quiet fade in once the first frame is ready. */
.hlsv { opacity: 0; transition: opacity 1.2s ease; }
.hlsv.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hlsv { transition: none; } }