:root {
  --bg: #0b0b0c;
  --fg: #f4f2ee;
  --muted: #8d8a85;
  --line: #242425;
  --accent: #f5c518;
  /* Theme colours, dark set. Pages open in light ([data-theme="light"] below) unless the visitor picked dark. */
  --accent-text: var(--accent);   /* yellow used as text: darker in light mode to stay readable */
  --on-fg: #111;                  /* text on a --fg coloured pill */
  --text-2: #cfcbc4;              /* body copy: descriptions, About */
  --text-3: #bdb9b2;              /* secondary: status, chips, links */
  --surface: #1a1a1b;             /* photo placeholders */
  --panel: #141415;               /* player, sheet, credit cards */
  --panel-2: #232324;
  --border: #444;
  --border-strong: #666;
  --bar-glass: rgba(11,11,12,.92);
  --glass: rgba(30,30,31,.72);
  --ring: rgba(255,255,255,.1);
  --scrim: var(--scrim);
  --viewer: rgb(8,8,9);
  --underline: rgba(244,242,238,.35);
  --ledge: linear-gradient(#34302b, #1d1b18 70%, #141311);
  color-scheme: dark;
  --gap: 4px;
  --bar-h: 56px;
  --band-h: 40px;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* One family everywhere, matching the logo. Futura where installed (Mac, iPhone, Adobe Fonts),
     otherwise Jost, a free Google Font drawn after Futura. */
  --font: "Futura PT", "Futura", "Jost", "Century Gothic", system-ui, sans-serif;
}

/* Ambient glow colour, set from each photo by UI.glow(). Registered so it fades between photos. */
/* Light mode: warm off-white paper, near-black ink */
:root[data-theme="light"] {
  --bg: #f6f4f0;
  --fg: #151413;
  --muted: #6f6b65;
  --line: #e0dcd5;
  --accent-text: #8f6a00;
  --on-fg: #f6f4f0;
  --text-2: #3b3834;
  --text-3: #57534d;
  --surface: #e7e3dc;
  --panel: #fffefc;
  --panel-2: #ece8e1;
  --border: #cfcac2;
  --border-strong: #8f8a83;
  --bar-glass: rgba(246,244,240,.92);
  --glass: rgba(255,255,255,.78);
  --ring: rgba(0,0,0,.1);
  --scrim: rgba(246,244,240,.86);
  --viewer: rgb(246,244,240);
  --underline: rgba(21,20,19,.3);
  --ledge: linear-gradient(#ddd5c6, #c9bfac 70%, #b8ad98);
  color-scheme: light;
}

@property --glow { syntax: "<color>"; inherits: true; initial-value: rgb(0 0 0 / 0); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Small spaced caps used for metadata everywhere */
.si-meta, .lb-no, .lb-sub, .exif, .label, .tile-exif, .back,
.pfig figcaption, .sheet-strip figcaption, .lb-close {
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 10px;
  background: var(--bg);
}
/* On the homepage the bar stays hidden until the intro scrolls away */
.home .bar {
  position: fixed; left: 0; right: 0;
  transform: translateY(-100%); transition: transform .32s var(--ease);
  border-bottom: 1px solid var(--line);
}
.home .bar.show { transform: none; }
.brand { display: flex; align-items: center; }
.status { font-size: 14px; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
/* Availability dot: a solid dot with a soft ring that pulses outward */
.dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: pulse 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- Logo wordmark (used when SITE.logo is empty) ---------- */
.wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  font-weight: 700; text-transform: uppercase;
  line-height: .86; letter-spacing: -.01em;
}
.wordmark small {
  font-weight: 500; color: var(--accent-text); letter-spacing: .04em;
  font-size: .34em; line-height: 1; margin-top: .45em;
}
.wordmark-hero { font-size: clamp(44px, 5vw, 64px); }
/* Compact one-line version for the header */
.wordmark-inline { flex-direction: row; align-items: baseline; gap: .3em; font-size: 20px; line-height: 1; }
.wordmark-inline small { font-size: .55em; margin: 0 0 0 .3em; }
.logo-img { display: block; height: 100%; width: auto; }
.logo-img.wordmark-hero { height: clamp(80px, 9vw, 120px); }
.logo-img.wordmark-inline { height: 34px; }

/* ---------- Homepage intro ---------- */
/* Logo and hello text sit together on the left; the buttons stay right-aligned,
   with any free space falling between the text and the buttons. */
.intro {
  display: grid; grid-template-columns: auto minmax(0, auto) 1fr;
  align-items: center; gap: 24px 56px;
  padding: 60px 44px 44px; margin: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.intro-actions { justify-self: end; }
.intro-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.intro-line {
  margin: 0; max-width: 38ch; text-wrap: balance; /* two even lines on desktop */
  font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -.01em;
}
.intro-status { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.intro-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border); transition: background .2s, border-color .2s, color .2s;
}
.pill:hover { border-color: var(--fg); }
.pill-solid { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.pill-solid:hover { background: var(--accent); border-color: var(--accent); color: #111; }
.pill-ghost { border-color: transparent; color: var(--text-3); }
.pill-ghost:hover { color: var(--fg); border-color: transparent; }
.nav { justify-self: end; display: flex; align-items: center; gap: 24px; }
.nav-link { font-size: 19px; }
/* Light / dark switch: a sun in dark mode, a moon in light mode */
.theme-toggle {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-3); transition: color .2s, border-color .2s, transform .3s var(--ease);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle:active { transform: rotate(-25deg) scale(.92); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }
.nav-link:hover { color: var(--accent-text); }
.nav-link[aria-current="page"] { color: var(--accent-text); }
/* ☰ menu, phones only */
.menu-btn { display: none; width: 34px; height: 34px; place-items: center; border-radius: 50%; border: 1px solid var(--border); }
.menu-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-btn[aria-expanded="true"] { border-color: var(--fg); }
.menu {
  position: absolute; top: calc(100% + 6px); right: 12px; z-index: 25; min-width: 200px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.25);
  animation: menu-in .18s var(--ease);
}
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu > a, .menu > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 9px; font-size: 17px; text-align: left; }
.menu > a:hover, .menu > button:hover, .menu > a[aria-current="page"] { background: var(--panel-2); }
.menu-theme { border-top: 1px solid var(--line) !important; border-radius: 0 0 9px 9px !important; margin-top: 4px; color: var(--text-3); }
.menu-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-theme .sun, .menu-theme .to-light { display: none; }
:root[data-theme="dark"] .menu-theme .sun, :root[data-theme="dark"] .menu-theme .to-light { display: inline; }
:root[data-theme="dark"] .menu-theme .moon, :root[data-theme="dark"] .menu-theme .to-dark { display: none; }
.cta {
  display: inline-flex; gap: 8px; align-items: center;
  background: var(--fg); color: var(--on-fg); padding: 8px 14px;
  font-size: 19px;
  transition: background .2s;
}
.cta:hover { background: var(--accent); color: #111; }

/* ---------- Grid ---------- */
.grid {
  display: flex; gap: var(--gap);
  padding: 0 10px 120px;
}
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

.tile {
  position: relative; display: block; width: 100%;
  overflow: hidden; background: var(--surface); cursor: zoom-in;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.tile.in { opacity: 1; transform: none; }
.tile.in.is-open { opacity: 0; transition: opacity .3s ease; }
.tile[data-type="project"] { cursor: pointer; }
.tile img, .tile video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
.tile img { opacity: 0; transition: opacity .6s; }
.tile img.loaded { opacity: 1; }

/* Spotlight (mouse/trackpad only): the photo under the pointer lifts slightly while the other
   photos around it dim and lose some colour, so it's clear which photo you're on. Used on the
   homepage grid, series previews, project pages and collections.
   The colour comes back after a short pause (.12s) rather than at once, so moving across the
   thin gaps between photos doesn't flash everything back to full colour. */
@media (hover: hover) and (pointer: fine) {
  .tile.in {
    transition: opacity .7s ease, transform .35s var(--ease), filter .35s ease .12s, box-shadow .35s ease;
  }
  .pimg, .coll-card {
    transition: transform .35s var(--ease), filter .35s ease .12s, box-shadow .35s ease;
  }
  .print {
    transition:
      left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease),
      transform .3s var(--ease), box-shadow .3s ease, filter .35s ease .12s;
  }
  .tile.in:hover, .pimg:hover, .coll-card:hover {
    transform: scale(1.04); z-index: 3;
    box-shadow: 0 14px 40px rgba(0,0,0,.6);
    transition-delay: 0s;
  }
  .print:hover { transition-delay: 0s; }
  .grid:has(.tile.in:hover) .tile.in:not(:hover),
  .coll-groups:has(.tile.in:hover) .tile.in:not(:hover),
  .pgrid:has(.pimg:hover) .pimg:not(:hover),
  .coll-cards:has(.coll-card:hover) .coll-card:not(:hover),
  .set-prints:has(.print:hover) .print:not(:hover) {
    filter: saturate(.35) brightness(.55);
    transition-delay: 0s;
  }
  /* On the light background, dimming means fading towards the paper rather than darkening */
  :root[data-theme="light"] :is(.grid, .coll-groups):has(.tile.in:hover) .tile.in:not(:hover),
  :root[data-theme="light"] .pgrid:has(.pimg:hover) .pimg:not(:hover),
  :root[data-theme="light"] .coll-cards:has(.coll-card:hover) .coll-card:not(:hover),
  :root[data-theme="light"] .set-prints:has(.print:hover) .print:not(:hover) {
    filter: saturate(.35) opacity(.45);
  }
}

.label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: #f4f2ee; color: #111;  /* on the photo, so the same in both themes */
  font-size: 11px; padding: 3px 8px;
}
.tile[data-type="project"] .label { background: var(--accent); color: #111; }
.stack { width: 11px; height: 11px; fill: var(--accent); stroke: #111; stroke-width: 1.4; }
.duration {
  position: absolute; right: 12px; top: 14px; z-index: 2;
  font-size: 11px; color: #f4f2ee;
  background: rgba(0,0,0,.45); padding: 2px 6px; backdrop-filter: blur(6px);
}

/* Title + camera settings, revealed on hover */
.tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 36px 14px 12px; color: #f4f2ee;  /* on the photo, so light in both themes */
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s var(--ease);
}
.tile:hover .tile-meta, .tile:focus-visible .tile-meta { opacity: 1; transform: none; }
.tile-title { font-size: 20px; line-height: 1.1; flex: none; }
.tile-exif { font-size: 10.5px; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- All / Photos / Videos filter ---------- */
.mode {
  position: fixed; left: 50%; bottom: calc(var(--band-h) + 14px); transform: translateX(-50%); z-index: 15;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.mode button { padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-3); transition: color .2s, background .2s; }
.mode button:hover { color: var(--fg); }
.mode button[aria-selected="true"] { color: var(--on-fg); background: var(--fg); }

/* ---------- Cursor label (mouse/trackpad only) ---------- */
.cursor-on [data-cursor] { cursor: none; }
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  translate: -50% -50%; padding: 7px 13px; border-radius: 999px;  /* JS adds the pointer position */
  background: var(--fg); color: var(--on-fg); font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; scale: .6; transition: opacity .18s ease, scale .2s var(--ease);
}
.cursor-tag.on { opacity: 1; scale: 1; }
.cursor-tag[data-tone="accent"] { background: var(--accent); color: #111; }

/* ---------- Bottom band ---------- */
/* Fixed to the bottom edge, under the filter pill. Overlays (series, lightbox, About) cover it. */
.has-band { padding-bottom: var(--band-h); }
.band {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; height: var(--band-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--bar-glass); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.band-cta { justify-self: start; color: var(--fg); font-weight: 500; white-space: nowrap; }
.band-cta span { display: inline-block; transition: transform .25s var(--ease); }
.band-cta:hover { color: var(--accent-text); }
.band-cta:hover span { transform: translateX(4px); }
.band-copy { white-space: nowrap; }
.band-links { justify-self: end; display: flex; gap: 18px; white-space: nowrap; }
.band-links a:hover { color: var(--fg); }

/* ---------- Soundtrack player ---------- */
/* Every size inside the player is in em, relative to the player's own font-size (14px by
   default), so the whole card can be scaled up or down by changing that one value. */
.player {
  font-size: 14px;
  width: 100%; display: flex; flex-direction: column; gap: .857em;
  padding: 1em; border: 1px solid var(--line); border-radius: 1em; background: var(--panel);
}
.player-top { display: flex; align-items: center; gap: .857em; }
.player-art { width: 3.714em; height: 3.714em; flex: none; border-radius: .571em; object-fit: cover; background: var(--panel-2); }
.player-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.player-label { font-size: .714em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.player-title, .player-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-title { font-size: 1.071em; font-weight: 500; }
.player-artist { font-size: .929em; color: var(--text-3); }
.player-btn {
  flex: none; width: 3em; height: 3em; border-radius: 50%;
  display: grid; place-items: center; background: var(--fg); color: var(--on-fg);
  transition: background .2s, transform .2s var(--ease);
}
.player-btn:hover:not(:disabled) { background: var(--accent); color: #111; transform: scale(1.06); }
.player-btn:disabled { opacity: .35; cursor: default; }
.player[data-state="loading"] .player-btn { animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .2; } }
.player-btn svg { width: 1em; height: 1em; fill: currentColor; }
.player-bar { height: max(2px, .214em); border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.player-fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width .25s linear; }
.player-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.04em; margin-top: -.286em; font-size: .821em; color: var(--muted); }
.player-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-links { display: flex; gap: 1.04em; white-space: nowrap; }
.player-links a:hover { color: var(--fg); }

/* Full-width button, e.g. View full project */
.pill-block { width: 100%; justify-content: center; gap: 8px; padding: 13px 18px; }

/* ---------- Project set (floating prints) ---------- */
.set { position: fixed; inset: 0; z-index: 30; }
.set[hidden], .sheet-layer[hidden], .lightbox[hidden], .about[hidden] { display: none; }
.set { transition: --glow .8s ease; }
.set-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(60% 65% at 38% 50%, var(--glow), transparent 75%), var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .32s ease;
}
.set.on .set-backdrop { opacity: 1; }
.set-prints { position: absolute; inset: 0; pointer-events: none; }
.print {
  position: absolute; pointer-events: auto; cursor: zoom-in;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition:
    left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease),
    transform .3s var(--ease), box-shadow .3s ease;
}
.print img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gold star on favorite photos (favorites: in a series.txt) */
.fav-star {
  position: absolute; top: 10px; right: 10px; z-index: 2; pointer-events: none;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.fav-star svg { width: 14px; height: 14px; fill: var(--accent); filter: drop-shadow(0 0 4px rgba(245,197,24,.45)); }
.lb-fav { color: var(--accent-text); white-space: nowrap; }
.lb-fav svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -.12em; margin-right: .3em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print:hover, .print:focus-visible {
  transform: scale(1.03); z-index: 5;
  box-shadow: 0 26px 60px rgba(0,0,0,.65);
}
/* Series panel: same width, padding, border and type as the lightbox's .lb-info */
.set-info {
  position: absolute; top: 0; right: 0; bottom: 0; width: 340px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 64px 28px 28px; overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--line);
  opacity: 0; transform: translateX(16px);
  transition: opacity .32s ease .08s, transform .32s var(--ease) .08s;
}
.set.on .set-info { opacity: 1; transform: none; }
/* Bottom of the panel: player, then a divider, then the project button */
.set-bottom { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 18px; }
.set-foot { padding-top: 18px; border-top: 1px solid var(--line); }
/* Tablets: the panel runs along the bottom, details on the left and actions on the right */
.set[data-layout="stack"] .set-info {
  top: auto; left: 0; width: auto; max-height: 40vh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; row-gap: 8px; align-content: start;
  padding: 24px 32px; border-left: 0; border-top: 1px solid var(--line);
  transform: translateY(16px);
}
.set[data-layout="stack"] .set-info > :not(.set-bottom):not(.lb-close) { grid-column: 1; }
.set[data-layout="stack"] .set-bottom { grid-column: 2; grid-row: 1 / span 4; width: 320px; margin: 0; padding: 0; align-self: end; }
.set[data-layout="stack"] .lb-close { top: 16px; right: 24px; }
.set[data-layout="stack"] .lb-title { font-size: 36px; }
.si-meta { margin: 0 0 4px; font-size: 11px; color: var(--muted); }
.si-title { margin: 0; font-weight: 400; font-size: 38px; line-height: 1; }
.si-desc { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 46ch; }

/* ---------- Mobile sheet ---------- */
.sheet-layer { position: fixed; inset: 0; z-index: 30; }
.sheet-backdrop {
  position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease;
  background: radial-gradient(90% 50% at 50% 30%, var(--glow), transparent 80%), var(--scrim);
}
/* Phone series view: full screen. The sheet itself doesn't scroll, so the close button
   (positioned on the sheet, not in the content) stays in the corner; only the body scrolls. */
.sheet {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--panel);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .34s var(--ease);
}
.sheet-layer.on .sheet { transform: none; }
.sheet-layer.on .sheet-backdrop { opacity: 1; }
.sheet-close {
  position: absolute; z-index: 3; right: 12px; top: calc(12px + env(safe-area-inset-top));
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--ring); font-size: 14px; color: var(--fg);
}
.sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}
.sheet-body > * { flex-shrink: 0; }  /* let the contents scroll rather than squash to fit */
.sheet-body .si-head { padding-right: 44px; }  /* keep long titles clear of the close button */
.sheet-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 0 16px; scrollbar-width: none;
}
.sheet-strip figure { flex: 0 0 78%; margin: 0; scroll-snap-align: center; }
.sheet-strip button { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--surface); }
.sheet-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-strip figcaption { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; font-size: 10px; color: var(--muted); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(55% 60% at 40% 50%, var(--glow), transparent 75%), var(--viewer);
  transition: --glow .8s ease;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px 340px;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } }
.lb-stage { margin: 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; display: block; }
/* A series in the viewer: its mini grid of featured photos in justified rows (each photo's
   flex-grow is its aspect ratio, so a row shares one height); JS sets the block's width so
   it fits the screen */
.lb-set { display: flex; flex-direction: column; gap: 8px; animation: fade .25s ease; }
.lb-set-row { display: flex; gap: 8px; }
.lb-print { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.lb-stage .lb-print img { width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform .35s var(--ease); }
.lb-series .lb-info .set-bottom { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .lb-print { transition: filter .35s ease .12s; }
  .lb-print:hover img { transform: scale(1.03); }
  .lb-set:has(.lb-print:hover) .lb-print:not(:hover) { filter: saturate(.35) brightness(.55); transition-delay: 0s; }
  :root[data-theme="light"] .lb-set:has(.lb-print:hover) .lb-print:not(:hover) { filter: saturate(.35) opacity(.45); }
}
.lb-nav { font-size: 26px; color: var(--muted); }
.lb-nav:hover { color: var(--fg); }
.lb-close { position: absolute; top: 18px; right: 22px; z-index: 2; font-size: 12px; color: var(--muted); }
.lb-close:hover { color: var(--fg); }
.lb-info {
  border-left: 1px solid var(--line); padding: 64px 28px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.lb-no { margin: 0 0 12px; font-size: 11px; color: var(--muted); }
.lb-title { margin: 0; font-weight: 400; font-size: 44px; line-height: 1; }
.lb-sub { margin: 0; font-size: 11px; color: var(--accent-text); }
.lb-desc { margin: 8px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.lb-exif-line { display: none; margin: 2px 0 0; font-size: 10px; letter-spacing: .04em; color: var(--muted); }
.exif {
  margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 11px;
}
.exif dt { color: var(--muted); }
.exif dd { margin: 0; text-align: right; }

/* ---------- About ---------- */
.about {
  position: fixed; inset: 0; z-index: 40; background: var(--scrim); backdrop-filter: blur(10px);
  display: flex; justify-content: flex-end; animation: fade .25s ease;
}
.about-inner {
  position: relative; width: min(520px, 100%); height: 100%; background: var(--bg);
  padding: 80px 40px 40px; display: flex; flex-direction: column; gap: 20px;
  border-left: 1px solid var(--line);
}
.about h2 { font-weight: 400; font-size: 56px; line-height: 1; margin: 0; }
.about p { color: var(--text-2); font-size: 17px; line-height: 1.6; margin: 0; }
.about-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.about-links a:hover { color: var(--accent-text); }
.about-records { align-self: flex-start; font-size: 15px; border-bottom: 1px solid var(--border); }
.about-records:hover { color: var(--accent-text); border-color: var(--accent); }
.about .cta { align-self: flex-start; margin-top: auto; }
.about-avatar { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; }
.about-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.about-contact a { border-bottom: 1px solid var(--border); }
.about-contact a:hover { border-color: var(--accent); }
.lb-sub a:hover, .lb-from a:hover { color: var(--fg); text-decoration: underline; }
.lb-from { margin: 0; font-size: 13px; color: var(--muted); }
/* Instagram credit buttons under descriptions. Dark, like the music player, with the logo in
   Instagram's colours and a soft gradient outline that brightens on hover: easy to spot, but
   quieter than the photos. */
.credits { display: flex; flex-direction: column; gap: 8px; }
.credit {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px 10px 12px; border-radius: 12px; border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(45deg, rgba(254,218,117,.5), rgba(250,126,30,.5), rgba(214,41,118,.5), rgba(150,47,191,.5), rgba(79,91,213,.5)) border-box;
  transition: background .25s ease, transform .25s var(--ease);
}
.credit:hover, .credit:focus-visible {
  background:
    linear-gradient(var(--panel-2), var(--panel-2)) padding-box,
    linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) border-box;
  transform: translateY(-1px);
}
.credit-logo svg { display: block; width: 26px; height: 26px; }
.credit-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.credit-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.credit-handle { font-size: 15px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credit-go { font-size: 14px; color: var(--muted); transition: color .2s; }
.credit:hover .credit-go { color: var(--fg); }
.ph-text { flex: none; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }

/* Links inside descriptions (web addresses, @handles) */
.text-link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
.text-link:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.lb-from a { color: var(--fg); }

/* ---------- Collections page ---------- */
.collections { padding: 28px 10px 80px; }
.coll-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; padding: 40px 0 32px; }
.coll-head h1 { margin: 0; font-weight: 400; font-size: clamp(56px, 8vw, 120px); line-height: .9; }
.coll-head p { margin: 0; color: var(--text-3); font-size: 16px; max-width: 42ch; }
.coll-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.coll-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.coll-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease), opacity .6s; opacity: 0; }
.coll-card img.loaded { opacity: 1; }
.coll-card-text {
  position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: baseline;
  padding: 48px 16px 14px; color: #f4f2ee; background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.coll-card-name { font-size: 34px; line-height: 1; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 24px; scrollbar-width: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 14px; color: var(--text-3); }
.chip:hover { color: var(--fg); border-color: var(--border-strong); }
.chip[aria-current="page"] { background: var(--fg); color: var(--on-fg); border-color: var(--fg); }
.chip span { opacity: .55; margin-left: 4px; }
/* One collection: its series in a row of matching tiles, then its single photos */
.coll-groups .grid { padding: 0; }
.coll-group + .coll-group { margin-top: 56px; }
.coll-label {
  margin: 0 0 14px; font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.pimg { position: relative; }
.pimg .play {
  position: absolute; left: 12px; bottom: 12px; padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); font-size: 12px; color: #f4f2ee;
}

/* ---------- Project page ---------- */
.project { padding: 28px 10px 80px; }
.back { display: inline-block; font-size: 12px; color: var(--muted); }
.back:hover { color: var(--accent-text); }
/* Project header: the description sits right beside the title (like the homepage logo and
   intro) and the player is right-aligned, all sharing one bottom edge. If the player doesn't
   fit beside them it wraps onto its own line. */
.ph {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 56px;
  padding: 48px 0 40px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.ph .si-meta { margin-bottom: 18px; }
.ph h1 { margin: 0; font-weight: 400; font-size: clamp(56px, 8.6vw, 120px); line-height: .88; letter-spacing: -.01em; }
/* The description keeps its fitted width; only on screens too narrow for both does it drop under the title */
.ph-lead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 56px; min-width: 0; }
.ph-desc { flex: none; max-width: 100%; margin: 0; width: var(--desc-w, 28ch); text-wrap: balance; color: var(--text-2); font-size: 16px; line-height: 1.6; }
/* The player scales with the window like the title does: never taller than the title block,
   and wider (not taller) on big screens once the title has reached its full size. */
.ph-player { flex: none; width: clamp(260px, 22vw, 460px); }
.ph-player .player { font-size: clamp(10px, calc(.74vw + 3px), 15.5px); }
.pgrid { columns: 3; column-gap: 14px; }
.pfig { break-inside: avoid; margin: 0 0 28px; }
.pimg { display: block; width: 100%; background: var(--surface); overflow: hidden; cursor: zoom-in; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .6s, transform .8s var(--ease); }
.pimg img.loaded { opacity: 1; }
.pfig figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; font-size: 10.5px; color: var(--muted); }
.pfig figcaption span:first-child { color: var(--fg); }
.pnext { display: flex; flex-direction: column; gap: 6px; padding: 48px 0 0; margin-top: 24px; border-top: 1px solid var(--line); }
.pnext-title { font-size: clamp(40px, 6vw, 88px); line-height: 1; }
.pnext:hover .pnext-title { color: var(--accent-text); }

/* ---------- On Repeat: the record room ---------- */
/* A dark, warm room at night: a window onto a rainy street on the left with a desk of
   hobbies under it, the record shelves in the middle under a red neon sign and pendant lamps,
   and plants, a wall shelf, a framed print and a table lamp on the right. A faint haze drifts
   over everything. The room is the same in both themes. Each record stands on its shelf with
   the vinyl peeking out to the right; "out" lifts the sleeve and rolls the vinyl further (the
   slot widens so the others make room). */
.den-page { color: #f3e6d6; }
.den {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(250px, 23%) minmax(0, 1fr) minmax(160px, 14%);
  min-height: calc(100vh - var(--bar-h) - var(--band-h));
  background:
    radial-gradient(45% 40% at 50% 0, rgba(255,150,80,.14), transparent 70%),
    radial-gradient(30% 50% at 92% 60%, rgba(255,170,80,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 2px, transparent 2px 68px),
    linear-gradient(#1b120d, #20150f 50%, #150d09);
}
.den-floor {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 56px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 1px, transparent 1px 110px), linear-gradient(#2a1b11, #160e09);
  box-shadow: inset 0 12px 18px -8px rgba(0,0,0,.8);
}
.haze {  /* soft warm haze, slowly drifting */
  position: absolute; inset: -10%; z-index: 6; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background:
    radial-gradient(40% 30% at 30% 30%, rgba(255,190,140,.08), transparent 70%),
    radial-gradient(35% 28% at 70% 55%, rgba(255,170,120,.07), transparent 70%),
    radial-gradient(50% 35% at 50% 85%, rgba(255,200,160,.06), transparent 70%);
  animation: haze 26s ease-in-out infinite alternate;
}
@keyframes haze { to { transform: translate3d(3%, -2%, 0) scale(1.05); } }

/* Left: window, polaroids, vine, desk */
.den-left { position: relative; z-index: 2; min-height: 100%; }
.den-window {
  position: absolute; left: 0; right: 14%; top: 0; bottom: 230px; overflow: hidden;
  border: 12px solid #120b07; border-left-width: 0; border-top-width: 0;
  box-shadow: inset 0 0 50px rgba(0,0,0,.6), 4px 0 0 #2e1f15, 0 0 40px rgba(0,0,0,.5);
}
.street {
  position: absolute; inset: -20px; filter: blur(4px) saturate(1.25);
  background:
    radial-gradient(5% 3% at 20% 22%, #ffb35c, transparent), radial-gradient(4% 2.5% at 62% 18%, #ff5fa2, transparent),
    radial-gradient(6% 2.5% at 40% 40%, #5ee7ff, transparent), radial-gradient(5% 3% at 78% 36%, #ffd27a, transparent),
    radial-gradient(4% 2.5% at 30% 56%, #c27bff, transparent), radial-gradient(6% 3% at 70% 60%, #ff6b5a, transparent),
    radial-gradient(4% 2% at 50% 70%, #ffb35c, transparent),
    radial-gradient(20% 8% at 30% 92%, rgba(255,90,140,.4), transparent), radial-gradient(18% 8% at 75% 94%, rgba(90,200,255,.35), transparent),
    linear-gradient(90deg, #0a0918 0 18%, transparent 18% 22%, #0d0b1d 22% 46%, transparent 46% 52%, #0b0a1a 52% 80%, transparent 80% 84%, #0e0c1f 84%) 0 8% / 100% 62% no-repeat,
    linear-gradient(#070818, #151030 40%, #261640 66%, #10101f 74%, #0a0a12);
}
.street::after {  /* reflections on the wet road */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(90deg, transparent 16%, rgba(255,179,92,.35) 18%, transparent 20%, transparent 36%, rgba(94,231,255,.3) 38%, transparent 40%,
    transparent 58%, rgba(255,95,162,.32) 60%, transparent 62%, transparent 74%, rgba(255,210,122,.3) 76%, transparent 78%);
  -webkit-mask: linear-gradient(transparent, #000 30%, transparent); mask: linear-gradient(transparent, #000 30%, transparent);
}
.rain { position: absolute; inset: 0; }
.rain i {
  position: absolute; top: -80px; width: 1px; border-radius: 1px;
  background: linear-gradient(transparent, rgba(200,220,255,.9));
  transform: rotate(6deg); animation: rain linear infinite;
}
@keyframes rain { to { translate: -40px 110vh; } }
.glass {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.35) 0 1.5px, transparent 2.5px), radial-gradient(circle at 27% 61%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 14%, rgba(255,255,255,.3) 0 1.2px, transparent 2px), radial-gradient(circle at 68% 70%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 36%, rgba(255,255,255,.3) 0 1.5px, transparent 2.5px), radial-gradient(circle at 40% 82%, rgba(255,255,255,.3) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 30%, rgba(255,220,180,.06) 42%, transparent 55%);
}
.mullions { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 5px), #120b07 calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)); }
.neon-records {  /* vertical neon sign hanging in the window */
  position: absolute; z-index: 2; right: 14%; top: 10%; display: flex; flex-direction: column; align-items: center; gap: .1em;
  padding: .5em .45em; border: 2px solid #ff3b7a; border-radius: 8px;
  font: 600 clamp(18px, 2vw, 30px) / 1 var(--font); color: #ffe3ee;
  text-shadow: 0 0 4px #fff, 0 0 10px #ff3b7a, 0 0 24px #ff3b7a;
  box-shadow: 0 0 8px #ff3b7a, 0 0 24px rgba(255,59,122,.6), inset 0 0 10px rgba(255,59,122,.5);
  animation: flicker 8s infinite;
}
.neon-bar { position: absolute; z-index: 2; right: 38%; top: 30%; width: 6px; height: 16%; border-radius: 3px; background: #9fe9ff; box-shadow: 0 0 8px #5ee7ff, 0 0 22px #5ee7ff; }
@keyframes flicker { 0%, 18%, 21%, 60%, 62%, 100% { opacity: 1; } 19%, 61% { opacity: .55; } }
.polaroids { position: absolute; z-index: 3; right: 0; top: 70px; width: 15%; min-width: 70px; display: flex; flex-direction: column; gap: 14px; }
.polaroid { margin: 0; padding: 5px 5px 16px; background: #efe8dc; box-shadow: 0 8px 14px rgba(0,0,0,.6); }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid-0 { transform: rotate(-6deg); } .polaroid-1 { transform: rotate(4deg) translateX(-10px); } .polaroid-2 { transform: rotate(-3deg); }
.polaroid::before { content: ""; position: absolute; left: 50%; top: -6px; width: 26px; height: 10px; translate: -50% 0; background: rgba(240,220,180,.55); }
.polaroid { position: relative; }
.vine { position: absolute; z-index: 4; top: -10px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.vine svg { display: block; width: 100%; height: auto; }
.vine-l { right: -40px; width: 90px; }
.vine-r { left: -30px; width: 80px; transform: scaleX(-1); }
.desk { position: absolute; z-index: 3; left: 0; right: 0; bottom: 56px; height: 230px; }
.desk-items { position: absolute; left: 4%; right: 4%; bottom: 46px; display: flex; align-items: flex-end; justify-content: space-between; }
.desk-items svg { display: block; width: 100%; height: auto; }
.desk-top { position: absolute; left: 0; right: -6px; bottom: 30px; height: 16px; background: linear-gradient(#6b4529, #3e2717); box-shadow: 0 10px 16px rgba(0,0,0,.6); }
.desk-front { position: absolute; left: 0; right: 4px; bottom: -56px; height: 86px; background: linear-gradient(#2a1a10, #1b110a); display: grid; place-items: center; }
.turntable { width: 30%; flex: none; }
.den.playing .tt-arm { transform: rotate(-9deg); }
.tt-arm { transform-origin: 176px 32px; transform-box: view-box; transition: transform .8s var(--ease); }
.den.playing .tt-led { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); }
.den.playing .tt-shine { animation: tt-shine 1.8s linear infinite; }
@keyframes tt-shine { 50% { opacity: .3; } }
.desk-mini { width: 12%; flex: none; }
.desk-camera { width: 11%; flex: none; }
.desk-d20 { width: 7%; flex: none; transform: rotate(-12deg); }
.desk-books { width: 24%; flex: none; display: flex; flex-direction: column-reverse; gap: 2px; }
.desk-books span {
  width: var(--w); padding: 3px 8px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, #000));
  font-size: clamp(8px, .8vw, 11px); color: #eadcc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.candle { position: relative; flex: none; width: 3.5%; min-width: 9px; height: 34px; border-radius: 2px; background: linear-gradient(90deg, #d9cbb2, #f4ead6, #c8b89b); }
.candle-short { height: 22px; }
.candle i {
  position: absolute; left: 50%; bottom: 100%; width: 8px; height: 14px; translate: -50% 0; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 50% 70%, #fff6d6, #ffc04d 55%, rgba(255,120,30,0));
  box-shadow: 0 0 14px 6px rgba(255,170,60,.45), 0 0 40px 18px rgba(255,150,50,.18);
  animation: flame 2.4s ease-in-out infinite alternate;
}
@keyframes flame { 30% { transform: scale(.92, 1.05) rotate(-2deg); } 70% { transform: scale(1.05, .95) rotate(2deg); } }
.lambda { width: clamp(44px, 4vw, 64px); height: auto; }
.lambda g { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lambda-cut { stroke: rgba(10,5,2,.6); }
.lambda-edge { stroke: rgba(255,226,180,.14); transform: translateY(1.2px); }

/* Centre: pendant lamps, neon sign, shelves */
.den-centre { position: relative; z-index: 2; padding: 0 clamp(12px, 2vw, 36px) 90px; }
.pendants { position: absolute; left: 4%; right: 4%; top: 0; display: flex; justify-content: space-between; pointer-events: none; }
.pendant { position: relative; width: 44px; height: 30px; margin-top: 18px; border-radius: 22px 22px 3px 3px; background: linear-gradient(#3b2c22, #1a120d); }
.pendant::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 18px; background: #3a2a1f; }
.pendant::after {  /* bulb and its pool of light */
  content: ""; position: absolute; left: 50%; top: 100%; width: 360px; height: 300px; translate: -50% -6px; pointer-events: none;
  background: radial-gradient(4% 2.4% at 50% 1.5%, #fff3d0, transparent), radial-gradient(42% 70% at 50% 0, rgba(255,190,110,.22), transparent 70%);
}
.den-back { position: relative; z-index: 3; display: inline-block; margin-top: 18px; color: #f3e6d6 !important; border-color: rgba(243,230,214,.35) !important; }
.den-back:hover { color: var(--accent) !important; }
.den-head { position: relative; z-index: 3; text-align: center; padding: clamp(28px, 6vh, 64px) 0 clamp(22px, 4vh, 40px); }
.neon-title { margin: 0; display: inline-flex; align-items: center; gap: .18em; font-weight: 400; }
.neon-text {
  font-family: "Yellowtail", cursive; font-size: clamp(56px, 8vw, 132px); line-height: 1; color: #ffd6cf;
  text-shadow: 0 0 2px #fff4f0, 0 0 6px #ff3b2b, 0 0 14px #ff2a1a, 0 0 32px #ff1a1a, 0 0 70px rgba(255,30,30,.75);
  animation: neon-on 2.2s ease-out both, flicker 9s 2.2s infinite;
}
@keyframes neon-on { 0% { opacity: .1; } 8% { opacity: .9; } 12% { opacity: .2; } 20% { opacity: 1; } 24% { opacity: .4; } 32%, 100% { opacity: 1; } }
.neon-vinyl {
  width: clamp(54px, 7vw, 116px); height: auto; fill: none; stroke: #f0b7ff; stroke-width: 2.6; stroke-linecap: round;
  filter: drop-shadow(0 0 3px #d66bff) drop-shadow(0 0 10px #b23cff) drop-shadow(0 0 22px rgba(178,60,255,.7));
  animation: neon-on 2.6s .3s ease-out both;
}
.neon-vinyl .fill { fill: #f0b7ff; }
.den-sub { margin: 14px 0 0; font-size: clamp(11px, 1vw, 14px); letter-spacing: .42em; text-transform: uppercase; color: #f3e1c8; text-shadow: 0 0 10px rgba(255,180,110,.4); }
.den-hint { margin: 10px 0 0; font-size: 13px; color: rgba(243,225,200,.6); }
.shelves-empty { position: relative; z-index: 3; color: #e9dcc8; text-align: center; padding: 60px 0; }

.unit { --s: 150px; --gap: 22px; position: relative; z-index: 3; }
.shelf-row { position: relative; padding: 50px 0 0; }
.led {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px;
  background: #ffe9c2; box-shadow: 0 0 6px 1px rgba(255,214,150,.9), 0 2px 16px 4px rgba(255,180,90,.45);
}
.shelf-row::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 2px; bottom: 40px; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0, rgba(255,196,120,.32), transparent 75%), linear-gradient(rgba(255,180,100,.08), transparent);
}
.shelf-items { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: var(--gap); }
.ledge {  /* the shelf board; album names are printed on its front */
  position: relative; z-index: 2; height: 46px; margin: 0 -2%;
  background: linear-gradient(#a06c43 0 3px, #5d3b23 3px, #3d2616 70%, #2a1a0f);
  box-shadow: 0 14px 18px -6px rgba(0,0,0,.75);
}

.rec { position: relative; flex: none; width: calc(var(--s) * 1.32); transition: width .55s var(--ease); }
.rec.out { width: calc(var(--s) * 1.62); }
.rec::before {  /* light pooling behind each record */
  content: ""; position: absolute; z-index: 0; pointer-events: none; left: -10%; right: -10%; top: -16%; height: calc(var(--s) * 1.25);
  background: radial-gradient(closest-side, rgba(255,196,120,.2), transparent); opacity: .6; transition: opacity .5s ease;
}
.rec.out::before { opacity: 1; }
.rec-art {
  position: relative; z-index: 1; display: block; width: var(--s); height: var(--s);
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
}
.rec-art:focus-visible { outline: none; }
.rec-art:focus-visible .sleeve { outline: 2px solid var(--accent); outline-offset: 3px; }
.sleeve {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block;
  background: #2a2420; color: #f4f2ee; box-shadow: 0 10px 18px -4px rgba(0,0,0,.7);
  transition: transform .45s var(--ease), box-shadow .45s ease, opacity .6s;
}
img.sleeve { opacity: 0; }
img.sleeve.loaded { opacity: 1; }
.rec:has(img.sleeve:not(.loaded)) .disc { opacity: 0; }
.sleeve-blank { display: flex; align-items: flex-end; padding: 12px; box-sizing: border-box; font-size: 16px; line-height: 1.1; text-align: left; }
.rec.out .sleeve { transform: translateY(-10px); box-shadow: 0 26px 30px -6px rgba(0,0,0,.7); }
.disc { position: absolute; inset: 4%; z-index: 1; border-radius: 50%; transform: translateX(30%) rotate(20deg); transition: transform .65s var(--ease); }
.rec.out .disc { transform: translate(64%, -10px) rotate(100deg); }
.disc-spin {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(255,255,255,.05) 33.5% 34%, transparent 34.5%),
    repeating-radial-gradient(circle, #0d0d0d 0 1px, #191919 1px 2.5px, #121212 2.5px 3.5px);
  box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.disc-spin img { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; object-fit: cover; }
.disc-spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4%; height: 4%; translate: -50% -50%; border-radius: 50%; background: #2b1c11; }
.disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,240,215,.12) 13%, transparent 19% 50%, rgba(255,240,215,.09) 63%, transparent 69%);
}
.rec[data-state="playing"] .disc-spin { animation: spin 1.8s linear infinite; }
.rec[data-state="loading"] .disc-spin { animation: spin 3.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Artist and album on the shelf front, centred under the sleeve */
.rec-text {
  position: absolute; z-index: 3; left: 0; top: calc(100% + 6px); width: var(--s);
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; pointer-events: none;
}
.rec-text > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.rec-artist { font-size: clamp(11px, calc(var(--s) * .08), 14px); color: #f6ead8; }
.rec-title { font-size: clamp(10px, calc(var(--s) * .068), 12px); color: #e0aa5c; }
/* Song and links appear under the shelf while a record is out */
.rec-more {
  position: absolute; z-index: 5; left: 50%; top: calc(100% + 54px); translate: calc(var(--s) * -.5 - 50%) 0; margin-left: calc(var(--s) * .5);
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: max-content; padding: 6px 10px; border-radius: 10px;
  font-size: 12px; color: #f1e3cf; background: rgba(16,10,7,.85); box-shadow: 0 6px 16px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s var(--ease); pointer-events: none;
}
.rec.out .rec-more, .rec[data-state="playing"] .rec-more { opacity: 1; transform: none; pointer-events: auto; }
.rec-now { display: none; align-items: center; gap: 7px; color: #ffcf7a; }
.rec[data-state="playing"] .rec-now, .rec[data-state="loading"] .rec-now, .rec[data-state="unavailable"] .rec-now { display: flex; }
.rec-links { display: flex; gap: 12px; }
.rec-links a:hover { color: #fff; }
.rec[data-state="unavailable"] .rec-now { color: rgba(246,232,212,.6); }
.rec[data-state="unavailable"] .rec-now::after { content: "· preview unavailable"; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.eq i { width: 2px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.3); }
.rec[data-state="playing"] .eq i { animation: eq .9s ease-in-out infinite alternate; }
.rec[data-state="playing"] .eq i:nth-child(2) { animation-delay: -.3s; }
.rec[data-state="playing"] .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Right: vine, wall shelf, framed print, table lamp, plant */
.den-right { position: relative; z-index: 2; }
.wall-shelf { position: absolute; left: 6%; right: 0; top: 70px; }
.wall-shelf-items { display: flex; align-items: flex-end; gap: 6%; padding: 0 6%; }
.wall-shelf::after { content: ""; display: block; height: 10px; background: linear-gradient(#7a5134, #3c2615); box-shadow: 0 10px 14px rgba(0,0,0,.6); }
.book-row { display: flex; align-items: flex-end; gap: 2px; width: 34%; height: 80px; }
.book-row i { flex: 1; height: var(--h); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c), color-mix(in srgb, var(--c) 70%, #000)); }
.shelf-bluray { width: 24%; transform: rotate(6deg); transform-origin: bottom left; }
.shelf-decks { width: 30%; }
.shelf-bluray svg, .shelf-decks svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(0,0,0,.5)); }
.poster {
  position: absolute; left: 14%; right: 10%; top: 230px; margin: 0; padding: 8px; background: #120c08;
  border: 3px solid #3a2718; box-shadow: 0 14px 24px rgba(0,0,0,.6);
}
.poster img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.85) brightness(.85); }
.side-table { position: absolute; left: 10%; right: 0; bottom: 56px; height: 150px; background: linear-gradient(90deg, #2b1b11, #3e2818 50%, #2b1b11); border-top: 8px solid #5a3a24; }
.table-lamp { position: absolute; right: 18%; bottom: 206px; width: 46px; height: 90px; }
.table-lamp::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 10px; translate: -50% 0; border-radius: 4px; background: #2b1d14; }
.table-lamp::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 4px; height: 44px; translate: -50% 0; background: #5a4130; }
.bulb {
  position: absolute; left: 50%; top: 0; width: 32px; height: 40px; translate: -50% 0; border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 45%, #fff7dc, #ffc96b 55%, #d98a2b);
  box-shadow: 0 0 20px 8px rgba(255,190,90,.55), 0 0 80px 40px rgba(255,160,60,.22);
}
.den-plant { position: absolute; right: -10%; bottom: 40px; width: 90%; max-width: 180px; filter: drop-shadow(0 10px 8px rgba(0,0,0,.5)); }
.den-plant svg { display: block; width: 100%; height: auto; }

/* Medium screens: the right-hand props go, the left keeps the window and desk */
@media (max-width: 1200px) {
  .den { grid-template-columns: minmax(220px, 28%) minmax(0, 1fr); }
  .den-right, .desk-camera { display: none; }
  .turntable { width: 34%; } .desk-books { width: 30%; }
}
/* Phones and narrow tablets: the window becomes a band across the top with the desk under it */
@media (max-width: 820px) {
  .den { grid-template-columns: 1fr; }
  .den-left { min-height: 0; height: 320px; }
  .den-window { right: 0; bottom: 130px; border-right-width: 0; }
  .neon-records { flex-direction: row; right: 6%; top: 14px; gap: .14em; font-size: 15px; padding: .35em .6em; }
  .neon-bar { display: none; }
  .polaroids, .vine-l, .desk-camera, .desk-d20 { display: none; }
  .desk { bottom: 0; height: 130px; }
  .desk-items { left: 4%; right: 4%; bottom: 50px; }
  .desk-top { right: 0; bottom: 36px; }
  .desk-front { right: 0; bottom: 0; height: 36px; }
  .desk-front .lambda { width: 26px; }
  .turntable { width: 32%; } .desk-mini { width: 11%; } .desk-books { width: 30%; }
  .pendants { display: none; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1320px) {
  /* The availability note moves out of the bar so the links have room */
  .bar { grid-template-columns: auto auto; justify-content: space-between; }
  .status { display: none; }
}
@media (max-width: 1240px) {
  .intro { grid-template-columns: auto minmax(0, 1fr); padding-inline: 32px; gap: 20px 48px; }
  .intro-actions { grid-column: 2; justify-self: start; }
}

@media (max-width: 1100px) {
  .set-info { width: 280px; } /* matches the lightbox panel at this width */
  .lightbox { grid-template-columns: 48px minmax(0, 1fr) 48px 280px; }
  .pgrid { columns: 2; }
  .nav { gap: 20px; }
  .nav-link, .cta { font-size: 17px; }
}
/* Narrow tablets: the links fold into the ☰ menu (phones below get smaller sizes too) */
@media (max-width: 900px) {
  .nav { gap: 12px; }
  .nav .nav-link, .nav .theme-toggle { display: none; }
  .menu-btn { display: grid; }
}

@media (max-width: 720px) {
  .bar { grid-template-columns: auto auto; justify-content: space-between; gap: 12px; padding: 0 12px; }
  .status { display: none; }
  .nav { gap: 12px; }
  /* Smaller Book a shoot button, no arrow, so the name, it and the menu fit on one row */
  .nav-link, .cta { font-size: 14px; white-space: nowrap; }
  .cta { padding: 6px 10px; }
  .cta span { display: none; }
  .wordmark-inline { font-size: 15px; white-space: nowrap; }
  .wordmark-inline small { display: none; }
  .intro { padding: 32px 16px 24px; gap: 18px 24px; }
  .intro-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .intro-line { font-size: 17px; }
  .wordmark-hero { font-size: 34px; }
  .intro-actions { gap: 8px; }
  .pill { padding: 9px 10px; font-size: 12.5px; }
  .pill-ghost { padding-inline: 4px; }
  .collections { padding: 20px 8px 60px; }
  .coll-cards { grid-template-columns: 1fr 1fr; }
  .coll-card-text { flex-direction: column; gap: 4px; padding: 36px 10px 10px; }
  .coll-card-name { font-size: 24px; }
  .coll-group + .coll-group { margin-top: 36px; }
  .grid { padding: 0 4px 100px; }
  .band { grid-template-columns: auto 1fr; padding: 0 14px; font-size: 12px; }
  .band-copy { display: none; }
  .band-links { gap: 12px; }
  .theme-toggle { width: 30px; height: 30px; }
  .label { top: 8px; left: 8px; font-size: 9px; padding: 2px 6px; }
  .tile-meta { display: none; }
  /* Viewer on phones: the photo takes the screen, with a small caption block under it.
     Swiping replaces the arrows. */
  .lightbox { display: flex; flex-direction: column; justify-content: center; padding-top: 52px; }
  .lb-nav { display: none; }
  /* The photo takes only the height it needs (shrinking if the screen is short), so the
     caption sits directly under it and the pair is centred on screen */
  .lb-stage { flex: 0 1 auto; min-height: 0; padding: 0 0 10px; touch-action: pinch-zoom; }
  .lb-stage img, .lb-stage video { max-height: 100%; user-select: none; -webkit-user-select: none; }
  .lb-series .lb-stage { padding-inline: 12px; }
  .lb-info {
    flex: none; border: 0; overflow: visible; gap: 2px;
    padding: 4px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .lb-no { margin: 0; font-size: 10px; }
  .lb-title { font-size: 20px; line-height: 1.15; }
  .lb-sub { font-size: 10px; }
  .lb-from { font-size: 12px; }
  .lb-desc {  /* two lines; tap to read the rest */
    margin-top: 3px; font-size: 13px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .lb-desc.open { display: block; }
  /* Compact credit in the phone viewer so the caption stays small */
  .lb-info .credits { margin-top: 4px; }
  .lb-info .credit { width: auto; align-self: flex-start; padding: 5px 10px 5px 8px; gap: 8px; border-radius: 999px; }
  .lb-info .credit-label { display: none; }
  .lb-info .credit-handle { font-size: 13px; }
  .lb-info .credit-logo svg { width: 18px; height: 18px; }
  .exif { display: none; }
  .lb-exif-line { display: block; }
  .back {  /* a clear way back from project and collection pages */
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg);
  }
  .si-title { font-size: 34px; }
  .ph { flex-direction: column; align-items: stretch; padding: 28px 0 28px; }
  .ph-lead { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ph-desc { width: auto; }
  .ph-player { width: 100%; }
  .ph-player .player { font-size: 14px; }
  .pgrid { columns: 1; }
  .about-inner { padding: 72px 20px 28px; }
}

/* The smallest phones (320px): tighten the top bar a little more */
@media (max-width: 340px) {
  .bar { gap: 8px; padding: 0 10px; }
  .nav { gap: 8px; }
  .wordmark-inline { font-size: 13px; }
  .nav-link, .cta { font-size: 13px; }
  .cta { padding: 5px 8px; }
  .theme-toggle { width: 28px; height: 28px; }
  .band { padding: 0 10px; gap: 10px; font-size: 11.5px; }
  .band-links { gap: 9px; }
}

/* Small phones: "About me" becomes "About" so all three intro buttons fit on one row */
@media (max-width: 400px) {
  .about-me { display: none; }
}

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