/* ───────────── with.you ───────────── */

:root {
  --bg: #d8d7d2;
  --ink: #111110;
  --muted: rgba(17, 17, 16, 0.48);
  --line: rgba(17, 17, 16, 0.16);
  --paper: #f3f2ee;
  --g: 8px;                                   /* edge gutter */
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* expo out */
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);  /* quart in-out */
  --noise: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.lb-open { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; text-transform: inherit; letter-spacing: inherit; }
ol, ul { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }

.skip { position: fixed; left: var(--g); top: -40px; z-index: 200; background: var(--ink); color: var(--bg); padding: 6px 10px; }
.skip:focus { top: var(--g); }

/* 8-col grid shared by nav, headers, rows & footer so everything lines up */
.grid8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); }

/* ───────────── wordmark ───────────── */

.masthead { padding: 0 var(--g); position: relative; }
.masthead > .wordmark, .masthead > .nav { position: relative; z-index: 1; }

/* ink branches + crosses in the top right — home page only, fades on other pages.
   They grow: images/header-art-grow.svg slices the ink by distance along the branches from where they
   enter at the top (tools/make_grow_art.py); the slices fade in one after another, so the ink extends
   down every branch to the tips, and each cross pops in when the growth reaches it. */
.header-art {
  position: absolute; top: 0; right: 0; z-index: 0;
  display: block; width: 57.4%; height: auto;
  pointer-events: none; user-select: none;
  opacity: 0; transition: opacity 0.5s ease;
  --grow: 2.93s;    /* how long the branches take to grow (on the site's ease-out curve) */
  --start: 0.3s;    /* starts alongside the wordmark rising in */
}
html[data-route="home"] .header-art { opacity: 1; transition: opacity 0.15s ease var(--start); }
.header-art .ha-b { fill: #fff; opacity: 0; }
.header-art .ha-x { transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg); }
/* --at = when each slice / cross appears, worked out in main.js from the same expo-out curve the rest of the
   site uses (fast start, gentle settle). The calc() fallback is plain constant speed. */
.header-art.grow .ha-b { animation: ha-grow var(--fd, 0.05s) linear forwards; animation-delay: var(--at, calc(var(--start) + var(--k) * var(--grow) / var(--n, 60))); }
.header-art.grow .ha-x { animation: ha-pop 0.8s var(--ease) forwards; animation-delay: var(--at, calc(var(--start) + var(--t) * var(--grow))); }
@keyframes ha-grow { to { opacity: 1; } }
@keyframes ha-pop { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .header-art .ha-b, .header-art .ha-x { animation: none !important; opacity: 1; transform: none; }
}

.wordmark {
  display: block;
  font-weight: 700;
  font-size: 22vw;               /* refined by JS to fill the width */
  line-height: 0.86;
  white-space: nowrap;
  padding: 0.04em 0 0.1em;
  transition: font-size 1s var(--ease-io);
}
.wordmark.no-trans { transition: none; }
.wordmark__inner { display: inline-block; }

/* each letter clips vertically only, so tight tracking never cuts glyphs */
.ch {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.045em;
  clip-path: inset(-0.06em -0.4em -0.2em -0.4em);
}
.ch:last-child { margin-right: 0; }
.ch--slash { color: rgba(17, 17, 16, 0.28); margin-right: -0.02em; }
.ch__r { display: inline-block; }
.ch__h { display: inline-block; }

/* hover: "you" turns into an outline, and the "." opens into a small line-heart clover in place */
.ch--you .ch__h {
  -webkit-text-stroke: 0.022em transparent;
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}
.ch--dot .ch__r { position: relative; }
.ch--dot .ch__h { transform-origin: 50% 82%; transition: transform 0.45s ease; }   /* 82% = the dot's centre */
.wm-clover {
  position: absolute; left: 50%; top: 0.535em;      /* centred on the dot */
  width: 0.34em; height: 0.34em; margin-left: -0.17em;
  overflow: visible; pointer-events: none;
}
.wm-clover g {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0) rotate(-50deg);
  transition: transform 0.75s var(--ease);
}

/* intro: letters rise out of their own baseline */
.ch--intro .ch__r { animation: rise 1.25s var(--ease) backwards; animation-delay: calc(120ms + var(--i) * 55ms); }
@keyframes rise { from { transform: translateY(132%); } }

/* route suffix ("/projects") rolls in and out */
.ch--sfx .ch__r { transition: transform 0.95s var(--ease) calc(260ms + var(--k) * 30ms); }
.ch--sfx.is-pre .ch__r { transform: translateY(132%); transition: none; }
.ch--sfx.is-out .ch__r { transform: translateY(-132%); transition: transform 0.45s var(--ease-io) calc(var(--o) * 18ms); }

@media (hover: hover) {
  .wordmark:hover .ch--you .ch__h { color: transparent; -webkit-text-stroke-color: var(--ink); }
  .wordmark:hover .ch--dot .ch__h { transform: scale(0); }
  .wordmark:hover .wm-clover g { transform: none; }
}
/* the same hover state flares once on first arrival, after the load-in settles (JS adds .is-flare) */
.wordmark.is-flare .ch--you .ch__h { color: transparent; -webkit-text-stroke-color: var(--ink); }
.wordmark.is-flare .ch--dot .ch__h { transform: scale(0); }
.wordmark.is-flare .wm-clover g { transform: none; }

/* ───────────── nav ───────────── */

.nav { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); padding: 6px 0 34px; }
.nav__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; animation: fadeUp 0.9s var(--ease) backwards; }
.nav__col:nth-child(1) { grid-column: span 2; animation-delay: 0.55s; }
.nav__col:nth-child(2) { grid-column: span 3; animation-delay: 0.62s; }
.nav__col:nth-child(3) { grid-column: span 1; animation-delay: 0.69s; }
.nav__col:nth-child(4) { grid-column: span 2; animation-delay: 0.76s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

.clock { font-variant-numeric: tabular-nums; }

.nav a { display: inline-flex; align-items: center; }
.nav a::before {
  content: "";
  width: 0; height: 0.62em;
  margin-right: 0;
  background: currentColor;
  transition: width 0.5s var(--ease), margin 0.5s var(--ease);
}
.nav a[aria-current="page"]::before { width: 0.62em; margin-right: 0.5em; }
.nav a.now__track::before { display: none; }

/* small text links (nav, footer, back links, viewer controls): a thin underline draws in from the left on hover */
.roll { display: inline-block; vertical-align: top; }
.roll > span {
  display: inline-block; padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease);
}
a:hover .roll > span, button:hover .roll > span, a:focus-visible .roll > span, button:focus-visible .roll > span { background-size: 100% 1px; }

.now { display: inline-flex; align-items: center; gap: 0.55em; }
.now__track { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; color: var(--muted); transition: color 0.3s; }
.now__track:hover { color: var(--ink); }
.eq { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 0.8em; }
.eq i { width: 2px; height: 100%; background: currentColor; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.9s; }
.eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.3s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

/* ───────────── view transitions ───────────── */

.view { outline: none; }
.view.is-leaving { opacity: 0; transform: translateY(-14px); transition: opacity 0.38s ease, transform 0.5s var(--ease-io); }

/* reveal primitives — JS adds .is-in with a staggered --d */
[data-rv="up"] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
[data-rv="up"].is-in { opacity: 1; transform: none; }

[data-rv="media"] .media { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-io) var(--d, 0ms); }
[data-rv="media"] .media__in { transform: scale(1.22) translateY(6%); transition: transform 1.7s var(--ease) var(--d, 0ms); }
[data-rv="media"].is-in .media { clip-path: inset(0 0 0 0); }
[data-rv="media"].is-in .media__in { transform: none; }

/* ───────────── media + generated colour fields ───────────── */

.media { position: relative; overflow: hidden; background: rgba(17, 17, 16, 0.07); }
.media__in { position: relative; width: 100%; height: 100%; }
.media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease, transform 1.4s var(--ease); }
.media img.is-loaded { opacity: 1; }

.gen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform 1.4s var(--ease); }
.gen::after { content: ""; position: absolute; inset: 0; background-image: var(--noise); background-size: 220px; opacity: 0.3; mix-blend-mode: overlay; pointer-events: none; }
.gen__text {
  position: relative; z-index: 1;
  color: #f4f3ef;
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 24px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1em;
}
.gen--corner { align-items: flex-end; justify-content: flex-start; }
.gen--corner .gen__text { text-transform: none; text-align: left; font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(18px, 2vw, 30px); padding: 0 0.45em 0.4em; }

/* ───────────── record (sleeve + spinning disc) ───────────── */

.stack { position: relative; aspect-ratio: 1; width: 100%; }
.sleeve { position: absolute; inset: 0; z-index: 2; box-shadow: 1px 0 0 rgba(0,0,0,.08); }
.sleeve .media { position: absolute; inset: 0; }
.record { position: absolute; inset: 1.5%; z-index: 1; transition: transform 1.6s var(--ease-io) calc(var(--d, 0ms) + 450ms), opacity 0.3s ease calc(var(--d, 0ms) + 400ms); }
[data-rv] .record { opacity: 0; }
.is-in .record { transform: translateX(40%); opacity: 1; }
.record__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--bg) 0 3.4%, transparent 3.8%),
    radial-gradient(circle closest-side, var(--label, #c8b28a) 0 33%, #0d0d0d 33.5% 36%, transparent 36.5%),
    repeating-radial-gradient(circle closest-side, #0c0c0c 0 0.55%, #1a1a1a 0.55% 1.1%),
    #0d0d0d;
  animation: spin 3.2s linear infinite;
}
.record__side {
  position: absolute; left: 50%; top: 37%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: clamp(5px, 0.55vw, 8px); letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; color: rgba(0, 0, 0, 0.55);
}
.record__side + .record__side { top: auto; bottom: 37%; }
.record__sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255,255,255,.09) 13%, transparent 19% 55%, rgba(255,255,255,.07) 62%, transparent 69%);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────── home ───────────── */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--g); }
.tile { position: relative; display: block; aspect-ratio: 8 / 7; overflow: hidden; color: #f4f3ef; isolation: isolate; }
.tile--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.tile > .media { position: absolute; inset: 0; }
.tile .media__in > * { position: absolute; inset: 0; }
@media (hover: hover) {
  .tile:hover .media img, .tile:hover .gen { transform: scale(1.035); }
}

.tile__center { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tile__center .stack { width: 40%; margin-right: 16%; opacity: 0; transform: translateY(18px); transition: opacity 1s ease calc(var(--d, 0ms) + 500ms), transform 1.4s var(--ease) calc(var(--d, 0ms) + 500ms); }
.tile.is-in .tile__center .stack { opacity: 1; transform: none; }

/* home index: big rows on the left, a preview on the right that follows the row you're on */
.hindex { padding: 0 var(--g); align-items: start; row-gap: 24px; }
.hindex__list { grid-column: 1 / 6; }
.hrow { position: relative; }
.hrow::before, .hrow:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io) var(--d, 0ms);
}
.hrow::before { top: 0; }
.hrow:last-child::after { bottom: 0; }
.hrow.is-in::before, .hrow.is-in:last-child::after { transform: none; }
.hrow a {
  display: grid; grid-template-columns: 3.2em auto minmax(0, 1fr); column-gap: clamp(14px, 1.4vw, 24px);
  align-items: baseline; padding: clamp(14px, 1.6vw, 24px) 0 clamp(18px, 2vw, 30px);
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.9s ease calc(var(--d, 0ms) + 150ms), transform 1.1s var(--ease) calc(var(--d, 0ms) + 150ms), color 0.45s ease;
}
.hrow.is-in a { opacity: 1; transform: none; }
.hrow__title { font-size: clamp(40px, 5.2vw, 92px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.hrow__t { display: inline-block; transition: transform 0.7s var(--ease); }
/* ───────────── voyages: a dotted globe with pins ───────────── */
/* the list sits beside a big globe; opening a place swaps the proportions (the tracks animate) */
.voy {
  display: grid; grid-template-columns: 5fr 3fr; column-gap: var(--g);
  padding: 0 var(--g); align-items: start;
  transition: grid-template-columns 1.15s var(--ease);
}
.voy.is-detail { grid-template-columns: 2.6fr 5.4fr; }
.vglobe {
  position: sticky; top: 24px; width: 100%; aspect-ratio: 1 / 1; max-height: 74vh;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.vglobe.is-dragging { cursor: grabbing; }
.vglobe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vpin {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: grid; place-items: center; color: var(--ink); opacity: 0; will-change: transform, opacity;
}
.vpin svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.6s var(--ease); }
.vpin--home svg { width: 19px; height: 19px; fill: none; }
.vpin.is-back { pointer-events: none; }
.vpin__label {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 1px 5px; background: var(--bg); transition: background 0.35s ease, color 0.35s ease;
}
.vpin.is-flip .vpin__label { left: auto; right: 24px; }
.vpin.is-on .vpin__label { background: var(--ink); color: var(--bg); }
.vpin.is-on svg { transform: scale(1.35); }
.vpin.is-on::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid currentColor; border-radius: 50%;
  animation: vpulse 2.4s var(--ease) infinite; pointer-events: none;
}
@keyframes vpulse { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
@media (hover: hover) { .vpin:hover svg { transform: scale(1.35); } .vpin:hover .vpin__label { background: var(--ink); color: var(--bg); } }
.vpin:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

.voy__side { min-width: 0; padding-top: clamp(10px, 2.4vw, 40px); }
.voy__lead { font-size: clamp(26px, 2.6vw, 46px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; max-width: 11em; margin-bottom: clamp(22px, 3vw, 44px); }
.vlist { border-top: 1px solid var(--line); }
.vrow a {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px;
  padding: 12px 0 14px; border-bottom: 1px solid var(--line); transition: color 0.45s ease;
}
.vrow__title { min-width: 0; }
.vrow__t { display: inline-block; font-size: clamp(26px, 2.5vw, 44px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; transition: transform 0.7s var(--ease); }
.vrow__c { color: var(--muted); }
.vrow__home svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
@media (hover: hover) {
  .vlist:has(a:hover) .vrow a:not(:hover) { color: var(--muted); }
  .vrow a:hover .vrow__t { transform: translateX(10px); }
}
.voy__hint { margin-top: 14px; }

.voy__back { display: inline-block; margin-bottom: clamp(18px, 2.6vw, 40px); }
.voy__meta { display: block; color: var(--muted); }
.voy__title { margin: 8px 0 0; font-size: clamp(52px, 6.2vw, 116px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.88; }
.voy__when { display: block; margin-top: 14px; }
.voy__excerpt { margin-top: clamp(16px, 2vw, 28px); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.35; letter-spacing: -0.01em; max-width: 30em; }
.voy__excerpt.is-empty { color: var(--muted); }
.voy__photos { margin-top: clamp(22px, 3vw, 44px); display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.voy__photo .media img { object-fit: cover; }
.voy__photo { display: block; width: 100%; cursor: zoom-in; }
.voy__ph { aspect-ratio: 4 / 5; border: 1px dashed rgba(17, 17, 16, 0.26); display: flex; align-items: flex-end; padding: 8px; color: var(--muted); }

/* subtext sits right after the title, in the same face (bold, tight), just smaller and muted */
.hrow__meta { color: var(--muted); font-size: clamp(16px, 1.45vw, 26px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; transition: transform 0.7s var(--ease); }
@media (hover: hover) {
  .hindex__list:has(a:hover) .hrow a:not(:hover) { color: var(--muted); }
  .hrow a:hover .hrow__t, .hrow a:hover .hrow__meta { transform: translateX(14px); }
  /* subtext only appears on the hovered row */
  .hrow__meta { opacity: 0; transition: transform 0.7s var(--ease), opacity 0.45s ease; }
  .hrow a:hover .hrow__meta, .hrow a:focus-visible .hrow__meta { opacity: 1; }
}

/* panorama: a wide, short letterbox of photos edge to edge under the header, like a film still */
.tile.pano { display: block; aspect-ratio: auto; height: clamp(200px, 32vh, 380px); margin-bottom: clamp(20px, 2.6vw, 40px); }
.pano .media img { object-position: 50% 50%; }

/* right column: the about line + what's playing */
.hside { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.hside__about { font-size: clamp(20px, 1.9vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: 18em; }
.np { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.np__label { display: inline-flex; align-items: center; gap: 0.55em; }
.np .eq i { animation-play-state: paused; }
.np.is-playing .eq i { animation-play-state: running; }
.np__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.np__art { width: 56px; height: 56px; background: rgba(17, 17, 16, 0.08) center / cover no-repeat; }
.np__meta { display: flex; flex-direction: column; min-width: 0; }
.np__title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np__by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.np__meta:hover .np__title { text-decoration: underline; text-underline-offset: 3px; }
.np__play { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform 0.45s var(--ease); }
.np__play svg { width: 19px; height: 19px; fill: currentColor; }
.np__play:hover { transform: scale(1.06); }
.np.is-loading .np__play { background: rgba(17, 17, 16, 0.3); }

.statement { padding: clamp(80px, 12vw, 180px) var(--g) clamp(90px, 13vw, 200px); align-items: start; }
.statement > .mono { grid-column: span 2; padding-top: 0.6em; }
.statement__text {
  grid-column: 3 / -1;
  font-size: clamp(28px, 3.7vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 17em;
}
.w { display: inline-block; vertical-align: top; clip-path: inset(-0.1em -0.1em -0.28em -0.1em); }
.w > span { display: inline-block; transform: translateY(130%); transition: transform 1.1s var(--ease) calc(var(--d, 0ms) + var(--wi) * 16ms); }
.is-in .w > span { transform: none; }

/* ───────────── shared page header ───────────── */

.pagehead { padding: 0 var(--g) 12px; align-items: end; }
.pagehead > :nth-child(1) { grid-column: 1 / 3; }
.pagehead > :nth-child(2) { grid-column: 3 / 6; }
.pagehead > :nth-child(3) { grid-column: 6 / -1; justify-self: end; display: flex; gap: 6px; }
.pagehead--sub { padding-top: 0; }

.ulink { display: inline-flex; gap: 0.4em; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.ulink:hover { border-bottom-color: transparent; }

.btn { padding: 7px 11px 6px; border: 1px solid var(--ink); transition: background 0.35s, color 0.35s; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--fill { background: var(--ink); color: var(--bg); }
.btn--fill:hover { background: transparent; color: var(--ink); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* ───────────── projects ───────────── */

.plist { padding: 0 var(--g); }
.prow { position: relative; }
.prow::before, .plist .prow:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io) var(--d, 0ms);
}
.prow::before { top: 0; }
.plist .prow:last-child::after { bottom: 0; }
.prow.is-in::before, .plist .prow.is-in:last-child::after { transform: none; }

.prow__head {
  width: 100%;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g);
  align-items: baseline;
  padding: 10px 0 16px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.9s ease calc(var(--d, 0ms) + 150ms), transform 1.1s var(--ease) calc(var(--d, 0ms) + 150ms), color 0.45s ease;
}
.prow.is-in .prow__head { opacity: 1; transform: none; }
.prow__n { grid-column: 1 / 3; }
.prow__title { grid-column: 3 / 6; font-size: clamp(26px, 3.4vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.prow__t { display: inline-block; transition: transform 0.7s var(--ease); }
.prow__type { grid-column: 6 / 7; }
.prow__year { grid-column: 7 / 8; }
.prow__icon { grid-column: 8 / 9; justify-self: end; align-self: center; position: relative; width: 13px; height: 13px; transition: transform 0.7s var(--ease-io); }
.prow__icon::before, .prow__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: transform 0.7s var(--ease-io); }
.prow__icon::after { transform: rotate(90deg); }
.prow.is-open .prow__icon { transform: rotate(180deg); }
.prow.is-open .prow__icon::after { transform: rotate(0); }
/* the last row isn't a project: just a quiet note that more is coming */
.prow--wip .prow__head { cursor: default; color: var(--muted); }
.prow--wip .prow__face { grid-column: 6 / -1; color: var(--ink); letter-spacing: 0.04em; }
.prow--wip .prow__head:hover .prow__t { transform: none; }
@media (max-width: 760px) { .prow--wip .prow__face { display: block; grid-column: 1 / -1; padding-top: 8px; } }

@media (hover: hover) {
  .plist:has(.prow__head:hover) .prow__head:not(:hover) { color: var(--muted); }
  .prow__head:hover .prow__t { transform: translateX(14px); }
}

.prow__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.85s var(--ease-io); }
.prow.is-open .prow__body { grid-template-rows: 1fr; }
.prow__clip { overflow: hidden; min-height: 0; }
.prow__inner { padding: 4px 0 44px; opacity: 0; transform: translateY(-12px); transition: opacity 0.5s ease, transform 0.8s var(--ease); }
.prow.is-open .prow__inner { opacity: 1; transform: none; transition-delay: 0.2s; }
.prow__media { grid-column: 3 / 6; }
.prow__media .media { aspect-ratio: 4 / 3; }
.prow__info { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.prow__desc { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.3; letter-spacing: -0.015em; max-width: 26em; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags li { border: 1px solid var(--line); padding: 3px 7px 2px; }

/* cursor-follow preview */
.peek { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; }
.peek__box { position: relative; width: clamp(200px, 19vw, 320px); aspect-ratio: 4 / 5; transform: translate(28px, -50%); }
.peek__item { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 0.7s var(--ease-io); }
.peek__item .media { position: absolute; inset: 0; }
.peek.is-on .peek__item.is-active { clip-path: inset(0 0 0 0); z-index: 2; }

/* ───────────── listening ───────────── */

/* the deck: one playlist, on a record, with a player */
.deck { padding: 0 var(--g) clamp(80px, 9vw, 140px); align-items: start; row-gap: 32px; }
.deck__art { grid-column: 1 / 5; display: block; }
.deck__art .stack { width: 70%; transition: opacity 0.35s ease, transform 0.55s var(--ease-io); }
.deck__info { grid-column: 6 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.deck__title { font-size: clamp(48px, 6.2vw, 108px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.88; margin-top: 4px; }
.deck__year { color: var(--muted); }
.deck__ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.deck__player { width: 100%; margin-top: 10px; }

/* the record only spins while music is playing */
.deck .record__disc { animation-play-state: paused; }
.deck.is-playing .record__disc { animation-play-state: running; }

/* custom player (SoundCloud plays in the hidden iframe) */
.player { position: relative; width: 100%; }
/* the SoundCloud iframe that actually plays — kept on the page, out of sight */
.music-sc { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.player__now { display: flex; align-items: center; gap: 16px; }
.player__play {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--bg); display: grid; place-items: center;
  transition: transform 0.45s var(--ease), background 0.3s;
}
.player__play svg { width: 24px; height: 24px; fill: currentColor; }
.player__play:hover { transform: scale(1.06); }
.player__play:active { transform: scale(0.95); }
.player.is-loading .player__play, .player.is-failed .player__play { background: rgba(17, 17, 16, 0.3); pointer-events: none; }
/* autoplay was blocked by the browser: the play button breathes until pressed */
.player.is-blocked .player__play { animation: breathe 1.8s var(--ease) infinite; }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(17, 17, 16, 0.35); } 100% { box-shadow: 0 0 0 16px rgba(17, 17, 16, 0); } }

/* ── the bottom dock: music keeps going while you browse ── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 14px;
  height: 64px; padding: 0 var(--g) 0 calc(var(--g) + 2px);
  background: var(--bg); border-top: 1px solid var(--line);
  transform: translateY(105%); transition: transform 0.6s var(--ease);
}
.dock.is-on { transform: none; }
html.has-dock body { padding-bottom: 64px; }
.dock .dock__bar { position: absolute; left: 0; right: 0; top: -11px; }   /* rides the dock's top edge, not a column */
.dock__bar::after { bottom: calc(100% - 4px); }
.dock__art { width: 44px; height: 44px; background: rgba(17, 17, 16, 0.08) center / cover no-repeat; }
.dock__meta { display: flex; flex-direction: column; min-width: 0; }
.dock__title { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock__meta:hover .dock__title { text-decoration: underline; text-underline-offset: 3px; }
.dock__ctrl { display: flex; align-items: center; gap: 2px; }
.dock__play { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform 0.45s var(--ease); }
.dock__play svg { width: 18px; height: 18px; fill: currentColor; }
.dock__play:hover { transform: scale(1.06); }
.dock__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock .player__vol { margin-left: 0; }
.dock__close { width: 34px; height: 34px; }
.dock__close svg { width: 16px; height: 16px; }
.dock.is-muted .player__btn .w1, .dock.is-muted .player__btn .w2 { display: none; }
.dock.is-muted .player__btn .x { display: inline; }
.dock.is-loading .dock__play { background: rgba(17, 17, 16, 0.3); }
.player__meta { min-width: 0; }
.player__title { font-size: clamp(17px, 1.35vw, 22px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__by { margin-top: 3px; }

.player__seek { display: grid; grid-template-columns: 3.2em 1fr 3.2em; gap: 12px; align-items: center; margin: 18px 0 6px; font-variant-numeric: tabular-nums; }
.player__seek > :last-child { text-align: right; }
.player__bar { position: relative; height: 22px; cursor: pointer; touch-action: none; outline-offset: 2px; }
.player__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(17, 17, 16, 0.22); }
.player__fill, .player__hover { position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); transition: height 0.3s var(--ease); }
.player__fill { width: var(--p, 0%); background: var(--ink); }
.player__fill::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); transform: translateY(-50%) scale(0); transition: transform 0.35s var(--ease);
}
.player__hover { width: var(--h, 0%); background: rgba(17, 17, 16, 0.18); opacity: 0; transition: opacity 0.25s; }
.player__bar::after {
  content: attr(data-t); position: absolute; bottom: calc(100% + 2px); left: var(--h, 0%); transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--ink); opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.player__bar:hover .player__fill, .player__bar.is-seeking .player__fill, .player__bar:focus-visible .player__fill { height: 4px; }
.player__bar:hover .player__fill::after, .player__bar.is-seeking .player__fill::after, .player__bar:focus-visible .player__fill::after { transform: translateY(-50%) scale(1); }
.player__bar:hover .player__hover, .player__bar:hover::after { opacity: 1; }

.player__ctrl { display: flex; align-items: center; gap: 4px; margin: 4px 0 16px -8px; }
.player__btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background 0.3s; }
.player__btn:hover { background: rgba(17, 17, 16, 0.08); }
.player__btn svg { width: 19px; height: 19px; fill: currentColor; }
.player__btn .x { display: none; }
/* shuffle: grey when off, ink with a small dot underneath when on */
.player__shuffle { position: relative; color: rgba(17, 17, 16, 0.4); transition: background 0.3s, color 0.3s; }
.player__shuffle::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 0.4s var(--ease); }
.player__shuffle[aria-pressed="true"] { color: var(--ink); }
.player__shuffle[aria-pressed="true"]::after { transform: scale(1); }
.player.is-muted .player__btn .w1, .player.is-muted .player__btn .w2 { display: none; }
.player.is-muted .player__btn .x { display: inline; }
.player__vol { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.player__vol input[type="range"] {
  -webkit-appearance: none; appearance: none; width: clamp(90px, 9vw, 130px); height: 22px; background: transparent; cursor: pointer;
}
.player__vol input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--v, 80%), rgba(17, 17, 16, 0.22) var(--v, 80%)); }
.player__vol input[type="range"]::-moz-range-track { height: 2px; background: rgba(17, 17, 16, 0.22); }
.player__vol input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
.player__vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); border: 0; transition: transform 0.3s var(--ease); }
.player__vol input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
.player__vol input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }

.player__list { border-top: 1px solid var(--line); }
.player__list:empty { border-top: 0; }
.player.is-loading .player__list::before { content: "Loading tracks…"; display: block; padding: 12px 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.player__list button {
  width: 100%; display: grid; grid-template-columns: 2.4em 36px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 7px 6px; border-bottom: 1px solid var(--line); color: #4d4c48; transition: background 0.25s, color 0.25s;
}
.player__list button:hover { background: rgba(17, 17, 16, 0.05); color: var(--ink); }
.player__list .is-on button { color: var(--ink); background: rgba(17, 17, 16, 0.06); }
.player__n { display: flex; align-items: center; }
.player__art { width: 36px; height: 36px; background: rgba(17, 17, 16, 0.08); overflow: hidden; }
.player__art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.player__art img.is-loaded { opacity: 1; }
.player__t { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.player__t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__t .mono { margin-top: 1px; }
.player__more { margin-top: 10px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.player__more:hover { border-bottom-color: transparent; }
.swap { display: inline-block; transition: opacity 0.3s ease, transform 0.55s var(--ease); }

.deck.is-swapping .swap { opacity: 0; transform: translateY(-10px); }
.deck.is-swapping .stack { opacity: 0; transform: scale(0.965); }
.deck.is-swapping .record { transform: none; transition: transform 0.4s var(--ease-io); }

/* the archive: every month, laid out as a calendar */
.archive__bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: 10px var(--g) 10px;
  align-items: baseline;
}
.archive__bar > :first-child { grid-column: 1 / 3; }
.years { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.years button { color: var(--muted); transition: color 0.3s; }
.years button:hover { color: var(--ink); }

.yr { position: relative; margin: 0 var(--g); padding: 12px 0 30px; align-items: start; }
.yr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-io) var(--d, 0ms); }
.yr.is-in::before { transform: none; }
.yr__head { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease calc(var(--d, 0ms) + 120ms), transform 1.1s var(--ease) calc(var(--d, 0ms) + 120ms); }
.yr__tracks { display: block; }
.yr__label { font-size: clamp(34px, 4.2vw, 68px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.85; }
.yr__months { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 6px; }
.yr.is-in .yr__head { opacity: 1; transform: none; }

.pl { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease calc(var(--d, 0ms) + 180ms + var(--mi) * 30ms), transform 1s var(--ease) calc(var(--d, 0ms) + 180ms + var(--mi) * 30ms); }
.yr.is-in .pl { opacity: 1; transform: none; }
.pl > a { display: block; }
.pl .media { aspect-ratio: 1; }
.pl .gen__text { font-size: 11px; font-family: var(--mono); font-weight: 400; }
.pl__ghost { display: block; aspect-ratio: 1; border: 1px dashed rgba(17, 17, 16, 0.2); }
.pl__cap { display: flex; justify-content: space-between; gap: 4px; padding-top: 5px; white-space: nowrap; }
.pl--empty .pl__cap { color: rgba(17, 17, 16, 0.28); }
.pl__dot { display: inline-block; width: 0; height: 0.62em; margin-right: 0; background: currentColor; vertical-align: baseline; transition: width 0.5s var(--ease), margin 0.5s var(--ease); }
.pl.is-current .pl__dot { width: 0.62em; margin-right: 0.4em; }
.pl.is-current .media { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.pl > a .media { transition: outline-offset 0.4s var(--ease); }
@media (hover: hover) {
  .pl > a:hover .media img, .pl > a:hover .gen { transform: scale(1.07); }
  .yr__months:has(a:hover) .pl:not(:hover) > a { opacity: 0.45; }
  .pl > a { transition: opacity 0.35s ease; }
}

/* home tile: the playlist art, blurred into a room for the record to sit in */
.tile--record > .media img { filter: blur(34px) saturate(1.15) brightness(0.82); transform: scale(1.35); }
@media (hover: hover) { .tile--record:hover > .media img { transform: scale(1.42); } }

/* ───────────── feeling lucky ───────────── */

.deal { padding: 0 var(--g) clamp(70px, 9vw, 140px); align-items: start; row-gap: 26px; }
.deal__stage { grid-column: 1 / 7; }
.deal__info { grid-column: 7 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.deal__mood { font-size: clamp(36px, 4.2vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; }
.deal__info.is-swapping .swap { opacity: 0; transform: translateY(-10px); }

/* the collage: a 12 x 8 grid (8 x 12 on phones), pieces wipe in one after another */
.collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 6px; aspect-ratio: 16 / 9; }
.collage--tall { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); aspect-ratio: 4 / 5; }
.cl__p { position: relative; min-width: 0; min-height: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--ease-io) calc(var(--k) * 95ms); }
.cl__btn { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.cl__p img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.7s var(--ease) calc(var(--k) * 95ms); }
.collage.is-dealt .cl__p { clip-path: inset(0 0 0 0); }
.collage.is-dealt .cl__p img { transform: none; }
/* low-res pictures: shown at the size they're sharp at, like a small print pinned in the space */
.cl__p.is-print .cl__btn { display: flex; align-items: center; justify-content: center; }
.cl__p.is-print img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 0 1px rgba(17, 17, 16, 0.08); }
.collage.is-leaving .cl__p { clip-path: inset(0 0 100% 0); transition: clip-path 0.5s var(--ease-io) calc(var(--k) * 45ms); }
@media (hover: hover) { .collage.is-dealt .cl__btn:hover img { transform: scale(1.035); transition-delay: 0s; } }

.swatches { display: flex; gap: 4px; min-height: 22px; }
.swatches i { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(17, 17, 16, 0.08); animation: pop 0.6s var(--ease) backwards; animation-delay: calc(300ms + var(--k) * 70ms); }
@keyframes pop { from { transform: scale(0); } }

.btn--big { padding: 12px 18px 11px; font-size: 12px; }

/* the Feeling lucky button: a big, softly rounded ink button with the wordmark's clover,
   which turns a quarter on hover and tumbles when you pull */
.lucky-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 26px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 13px; letter-spacing: 0.04em;
  transition: transform 0.5s var(--ease), background 0.35s ease;
}
.lucky-btn__clover { display: block; width: 19px; height: 19px; }
.lucky-btn__clover svg { display: block; width: 100%; height: 100%; transition: transform 0.9s var(--ease); }
.lucky-btn:active { transform: scale(0.98); }
.lucky-btn:disabled { opacity: 0.4; pointer-events: none; }
.lucky-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* the colour ring: segments around the clover button; a little cross marks the colour in play */
.lring { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(240px, 100%); margin-top: 8px; }
.lring__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lring__seg {
  cursor: pointer; opacity: 0.55; stroke: rgba(17, 17, 16, 0.12); stroke-width: 0.8;
  transform-box: fill-box; transform-origin: center; outline: none;
  transition: opacity 0.4s ease, transform 0.6s var(--ease);
}
.lring__seg.is-on { opacity: 1; }
.lring__seg:hover, .lring__seg:focus-visible { opacity: 1; transform: scale(1.05); }
.lring__mk { fill: var(--ink); transition: transform 1.4s var(--ease); }
.lring__ctr { cursor: pointer; outline: none; }
.lring__ctr circle { fill: var(--ink); transition: fill 0.35s ease; }
.lring__ctr:focus-visible circle { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lring__clv { color: var(--bg); transform-box: fill-box; transform-origin: center; transition: transform 0.9s var(--ease); }
@media (hover: hover) {
  .lring__ctr:hover circle { fill: #2a2a28; }
  .lring__ctr:hover .lring__clv { transform: rotate(90deg); }
}
@media (hover: hover) {
  .lucky-btn:hover { background: #2a2a28; }
  .lucky-btn:hover .lucky-btn__clover svg { transform: rotate(90deg); }
}

/* colour palette: paint chips, no words */
.palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 280px; margin-top: 12px; }
.chip {
  aspect-ratio: 1;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 16, 0.12);
  outline: 1.5px solid transparent; outline-offset: 3px;
  cursor: pointer;
  transition: transform 0.5s var(--ease), outline-color 0.3s ease, outline-offset 0.4s var(--ease);
  animation: pop 0.6s var(--ease) backwards; animation-delay: calc(500ms + var(--k) * 45ms);
}
.chip:hover { transform: translateY(-3px); }
.chip[aria-pressed="true"] { outline-color: var(--ink); outline-offset: 4px; }
.chip:focus-visible { outline-color: var(--ink); }

/* the pile: every picture as a square, in colour order */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; padding: 0 var(--g); }
.wall__i { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--c); cursor: zoom-in; }
.wall__i img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease, transform 0.8s var(--ease); }
.wall__i img.is-loaded { opacity: 1; }
@media (hover: hover) { .wall__i:hover img { transform: scale(1.08); } }
.demo-note { padding: 40px var(--g) 0; color: var(--muted); max-width: 60em; text-transform: none; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 8px var(--g); }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity 0.5s ease; }
.lb__bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 4px 0; opacity: 0; transition: opacity 0.5s ease 0.15s; }
.lb.is-open .lb__bg, .lb.is-open .lb__bar { opacity: 1; }
.lb__fig { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px 0; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: 50% 50%; cursor: zoom-out; }
.lb__cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__ctrl { display: flex; gap: 20px; flex-shrink: 0; }

/* ───────────── footer ───────────── */

.foot { padding: 0 var(--g) 14px; }
.foot__in { border-top: 1px solid var(--line); padding-top: 10px; row-gap: 14px; }
.foot__in > :nth-child(1) { grid-column: 1 / 3; }
.foot__in > :nth-child(2) { grid-column: 3 / 6; }
.foot__in > :nth-child(3) { grid-column: 6 / 8; }
.foot__in > :nth-child(4) { grid-column: 8 / 9; justify-self: end; }
.foot a { display: block; width: fit-content; }

/* ───────────── small screens ───────────── */

@media (max-width: 760px) {
  :root { --g: 10px; }
  .nav { grid-template-columns: 1fr 1fr; row-gap: 14px; padding-bottom: 26px; }
  .nav__col { grid-column: auto !important; }

  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 5; }
  .tile--wide { aspect-ratio: 4 / 3; }

  .hindex__list, .hside { grid-column: 1 / -1; }
  .tile.pano { height: clamp(200px, 30vh, 280px); }
  .hside { padding-top: 26px; }
  .hrow a { grid-template-columns: 2.4em minmax(0, 1fr); }
  .voy, .voy.is-detail { grid-template-columns: 1fr; }
  .vglobe { position: relative; top: 0; max-height: none; justify-self: center; transition: width 1.15s var(--ease); }
  .voy.is-detail .vglobe { width: 62%; }
  .voy__photos { grid-template-columns: 1fr 1fr; }
  .voy__side { padding-top: 28px; }
  .hrow__meta { display: none; }

  .statement > .mono, .statement__text { grid-column: 1 / -1; }
  .statement > .mono { margin-bottom: 18px; }

  .pagehead { grid-template-columns: 1fr auto; row-gap: 10px; }
  .pagehead > :nth-child(1) { grid-column: 1; }
  .pagehead > :nth-child(2) { display: none; }
  .pagehead > :nth-child(3) { grid-column: 2; }

  .prow__head { grid-template-columns: 2.4em 1fr auto 18px; }
  .prow__n { grid-column: 1; }
  .prow__title { grid-column: 2; }
  .prow__type { display: none; }
  .prow__year { grid-column: 3; }
  .prow__icon { grid-column: 4; }
  .prow__media, .prow__info { grid-column: 1 / -1; }
  .prow__inner { row-gap: 18px; }

  .deck__art, .deck__info { grid-column: 1 / -1; }
  .deck__art .stack { width: 66%; }
  .player__vol input[type="range"] { width: 90px; }
  .dock { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; }
  .dock__time, .dock .player__vol { display: none; }
  .dock__art { width: 40px; height: 40px; }
  .archive__bar { grid-template-columns: 1fr; row-gap: 6px; }
  .archive__bar > *, .years { grid-column: 1 / -1 !important; }
  .years { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 16px; }
  .yr__head { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .yr__tracks { display: inline; }
  .yr__tracks::before { content: " · "; }
  .yr__months { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .deal__stage, .deal__info { grid-column: 1 / -1; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 3px; }
  .lb__ctrl { gap: 14px; }
  .lb__bar--bot { flex-direction: column; align-items: flex-start; }

  .foot__in > * { grid-column: span 4 !important; justify-self: start !important; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .deal__stage { grid-column: 1 / -1; }
  .deal__info { grid-column: 1 / -1; }
  .yr__months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}