:root {
  --bg: #F7F7F7;
  --ink: #292B34;
  --ink-2: #44464F;
  --muted: #6E7079;
  --line: #DCDCDE;
  --tile-bg: #ECECEC;
  --dot: rgba(0,0,0,.10);
  --font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.44; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: #000; }
img { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  body, a, button, img { cursor: none; }
}

/* Custom cursor */
.cursor { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.cursor__shape { width: 16px; height: 16px; border-radius: 100px; background: #000; transition: width .4s ease, height .4s ease, background-color .4s ease, border-radius .4s ease, opacity .2s ease; will-change: transform; }
.cursor__text, .cursor__icon { position: absolute; font-size: 13px; color: var(--ink); opacity: 0; transition: opacity .3s ease; white-space: nowrap; display: flex; }
.cursor__icon--min { display: none; }
.cursor[data-mode=nav] .cursor__shape { height: 32px; background: rgba(255,255,255,.1); backdrop-filter: invert(100%) contrast(150%); -webkit-backdrop-filter: invert(100%) contrast(150%); }
.cursor[data-mode=logo] .cursor__shape { width: 64px; height: 64px; border-radius: 0; background: rgba(255,255,255,.1); backdrop-filter: invert(100%) contrast(150%); -webkit-backdrop-filter: invert(100%) contrast(150%); }
.cursor[data-mode=explore] .cursor__shape, .cursor[data-mode=next] .cursor__shape, .cursor[data-mode=repel] .cursor__shape, .cursor[data-mode=attract] .cursor__shape { width: 96px; height: 40px; background: #000; }
.cursor[data-mode=next] .cursor__shape { width: 110px; }
.cursor[data-mode=repel] .cursor__shape { width: 76px; }
.cursor[data-mode=attract] .cursor__shape { width: 84px; }
.cursor[data-mode=explore] .cursor__text, .cursor[data-mode=next] .cursor__text, .cursor[data-mode=repel] .cursor__text, .cursor[data-mode=attract] .cursor__text { opacity: 1; color: #fff; }
/* Project tiles: a black pill holding the project title and subtitle, sized by script to fit. */
.cursor[data-mode=project] .cursor__shape { background: #000; border-radius: 28px; }
.cursor[data-mode=project] .cursor__text { opacity: 1; color: #fff; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cursor__text strong { font-size: 15px; font-weight: 500; line-height: 1.2; }
.cursor__text span { font-size: 12px; line-height: 1.2; color: rgba(255,255,255,.72); }
/* Small round controls: an outline ring around the button so its icon stays visible. */
.cursor[data-mode=ring] .cursor__shape { width: 40px; height: 40px; background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
.cursor[data-mode=light] .cursor__shape { background: rgba(255,255,255,.4); backdrop-filter: invert(100%) contrast(150%); -webkit-backdrop-filter: invert(100%) contrast(150%); }
.cursor[data-mode=gallery] .cursor__shape, .cursor[data-mode=viewer] .cursor__shape { width: 48px; height: 48px; background: rgba(255,255,255,.9); }
.cursor[data-mode=gallery] .cursor__icon--max { opacity: 1; }
.cursor[data-mode=viewer] .cursor__icon--min { display: flex; opacity: 1; }
.cursor[data-mode=viewer] .cursor__icon--max { display: none; }
/* Sandbox link: the nav pill, filled with drifting iridescent rainbow waves. The whole cursor blends with the page
   (multiply on light, screen on dark) so the link text shows through the colour. */
.cursor[data-mode=rainbow] { mix-blend-mode: multiply; }
.cursor[data-mode=rainbow] .cursor__shape { height: 32px;
  background:
    repeating-linear-gradient(-35deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.55) 22px, rgba(255,255,255,0) 30px 44px) 0 0 / 200% 100%,
    linear-gradient(100deg, #ff2e9a, #ff8a3d, #ffd60a, #9be39b, #2bd4ff, #2b59ff, #b84dff, #ff2e9a) 0 0 / 300% 100%;
  animation: rainbow-waves 3s linear infinite; }
@keyframes rainbow-waves { to { background-position: -88px 0, 150% 0; } }
.cursor.is-drag .cursor__shape, .cursor.is-drag .cursor__icon { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Magnetic elements are moved by script */
.mag { display: inline-block; will-change: transform; }

/* Rolling text */
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: top; }
.roll__line { display: block; white-space: nowrap; }
.roll__line + .roll__line { position: absolute; left: 0; top: 100%; }
.roll .c { display: inline-block; transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.rl:hover .roll .c { transform: translateY(-100%); }

/* Scroll progress: 4px black bar with a white hairline above and below, sitting on top of the nav bar. */
.progress { position: fixed; top: 1px; left: 0; z-index: 60; width: 100%; height: 4px; background: var(--bar, #000); box-shadow: 0 -1px 0 var(--bar-edge, #fff), 0 1px 0 var(--bar-edge, #fff); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; height: 0; overflow: visible; }
/* Glass lives on a pseudo-element so the bar itself isn't a backdrop root; that lets the Works submenu blur the page too. */
.header__bar { position: relative; z-index: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 20px; }
.header__bar::before, .submenu::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(247,247,247,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header--static { position: static; height: auto; }
.header--static .header__bar::before { display: none; }
.logo { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink); }
.logo svg { height: 34px; width: auto; display: block; fill: currentColor; }
.nav { display: flex; gap: 20px; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
/* Works submenu: List / Grid, shown on hover or keyboard focus, on the same glass as the bar. */
.nav__item { position: relative; }
.submenu { position: absolute; top: 100%; right: -12px; z-index: 0; display: flex; flex-direction: column; align-items: flex-end; padding: 4px 12px 8px; border-radius: 0 0 10px 10px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.submenu::before { border-radius: inherit; }
.nav__item:hover .submenu, .nav__item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.submenu .toggle { min-height: 36px; }
.navlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.navlink:hover { color: var(--ink); }
.toggle { background: none; border: 0; padding: 0; font: inherit; min-height: 44px; color: var(--muted); }
.toggle[aria-pressed=true] { color: var(--ink); }

/* Dot field */
.dots { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Home */
.wrap { max-width: 1440px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.intro { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.stage { position: absolute; inset: 72px 0 0 0; z-index: 0; }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* Mute toggle for the 3D scene's sounds; sits above the pinned intro text. */
/* Controls over the 3D scene: colour picker and mute, bottom right above the pinned intro text. */
/* Scaled to 69% as a group so every part keeps its proportions; the buttons' invisible ::after pads the hit area
   back out so they stay easy to tap. */
.hero-controls { position: absolute; right: 20px; bottom: 150px; z-index: 3; display: flex; align-items: center; gap: 8px; transform: scale(.69); transform-origin: right bottom; }
/* Frosted pane over the 3D scene, dialled up when movement is paused. */
.stage-glass { position: absolute; inset: 72px 0 0 0; z-index: 1; pointer-events: none; background: rgba(247,247,247,0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease, background-color .5s ease; }
.intro.is-paused .stage-glass { background: rgba(247,247,247,.18); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
/* Motion toggle, first in the control group: a two-line glass label (same height as the buttons) beside the
   accessibility icon, which is sized and coloured like the colour and mute buttons. */
.motion { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); }
.motion[hidden] { display: none; }
.motion__text { display: flex; flex-direction: column; justify-content: center; height: 44px; padding: 0 12px; border-radius: 14px; font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); background: rgba(247,247,247,.6); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transition: background-color .2s ease, color .2s ease; }
/* Each line is spread edge to edge, so the two lines form a justified block with no hyphenation. */
.motion__line { display: flex; justify-content: space-between; gap: .35em; }
.motion__icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #b3b3b3; color: #000; transition: background-color .2s ease, color .2s ease; }
.motion__icon::after { content: ''; position: absolute; inset: -12px; }
.motion__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.motion:hover .motion__text, .motion:focus-visible .motion__text { color: #000; }
.motion:hover .motion__icon, .motion:focus-visible .motion__icon, .motion[aria-pressed=true] .motion__icon { background: #000; color: #fff; }
.motion[aria-pressed=true] .motion__text { background: rgba(0,0,0,.85); color: #fff; }
.motion:focus-visible { outline: none; }
.motion:focus-visible .motion__icon { outline: 2px solid var(--ink); outline-offset: 3px; }
.palette__toggle, .sound, .palette__swatch { position: relative; }
.palette__toggle::after, .sound::after { content: ''; position: absolute; inset: -12px; }
.palette__swatch::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.hero-controls[hidden] { display: none; }
/* At rest the controls are light grey with black icons; hover, focus or an open pill switches them to black with
   white / rainbow icons. */
.palette { display: flex; align-items: center; height: 44px; padding: 0; border-radius: 22px; background: #b3b3b3; transition: padding .35s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
.palette:hover, .palette:focus-within, .palette.is-open { background: #000; }
.palette.is-open { padding-left: 4px; }
/* overflow is hidden for the open/close animation, so the open state pads in enough room for the selected ring,
   hover growth and focus outline. */
.palette__opts { display: flex; align-items: center; gap: 8px; max-width: 0; padding: 0; overflow: hidden; opacity: 0; transition: max-width .35s cubic-bezier(.2,.8,.2,1), padding .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.palette.is-open .palette__opts { max-width: 120px; padding: 6px; opacity: 1; }
.palette__swatch { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.35); transition: transform .2s ease, box-shadow .2s ease; }
.palette__swatch:hover { transform: scale(1.1); }
.palette__swatch[aria-pressed=true] { box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #fff; }
.palette__swatch--black { background: radial-gradient(circle at 35% 30%, #5a5c64, #0b0b0d 65%); }
.palette__swatch--white { background: radial-gradient(circle at 35% 30%, #fff, #c9cace 75%); }
.palette__swatch--color { background: conic-gradient(#ff2e9a, #ffd60a, #9be39b, #2b59ff, #8b1a6b, #ff2e9a); }
.palette__toggle { flex: none; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.palette__toggle span { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #000; }
.palette__toggle span::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ff2e9a, #ffd60a, #9be39b, #2b59ff, #fff, #0b0b0d, #ff2e9a); opacity: 0; transition: opacity .2s ease; }
.palette:hover .palette__toggle span::before, .palette:focus-within .palette__toggle span::before, .palette.is-open .palette__toggle span::before { opacity: 1; }
.palette__swatch:focus-visible, .palette__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sound { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #b3b3b3; color: #000; display: grid; place-items: center; padding: 0; transition: background-color .2s ease, color .2s ease; }
.sound:hover, .sound:focus-visible { background: #000; color: #fff; }
.sound[hidden] { display: none; }
.sound svg { width: 20px; height: 20px; }
.sound .sound__off, .sound[aria-pressed=true] .sound__on { display: none; }
.sound[aria-pressed=true] .sound__off { display: block; }
.sound:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.intro__line { position: relative; z-index: 1; pointer-events: none; display: flex; gap: 12px; align-items: baseline; max-width: 460px; }
.intro__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; transform: translateY(-4px); }
.lead { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 500; }
/* Tiles start at least 100px below the fold so the pinned name and intro read clearly on load. */
.works { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 160px; scroll-margin-top: -28px; }
.label { margin: 0 0 64px; font-size: 14px; font-weight: 400; color: var(--muted); }
/* One tile size everywhere: the desktop square, shrinking only below 386px wide. */
:root { --tile: min(346px, calc(100vw - 40px)); }
/* Scattered layout: rows overlap on wide screens for the interleaved look; below 1200px they stack without overlap.
   Each tile's left offset is a fraction of the free width, set inline from home.js. */
.scatter { height: 300px; display: flex; align-items: flex-start; }
.scatter .tile { flex: none; }
@media (max-width: 1200px) { .scatter { height: calc(var(--tile) + 84px); } } /* + the largest top offset (60px) + 24px */

.tile { position: relative; display: block; width: var(--tile); aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--tile-bg); outline: 1px solid rgba(0,0,0,.25); outline-offset: 0; transition: outline-offset .3s cubic-bezier(.2,.7,.2,1); }
.tile__cover { width: 100%; height: 100%; object-fit: cover; }
.tile__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; opacity: 0; }
.tile__slide.is-on { opacity: 1; }
.tile:hover, .tile:focus-visible { outline-offset: 3px; }
.tile__overlay { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .25s ease .1s; }
.tile:hover .tile__overlay, .tile:focus-visible .tile__overlay { opacity: 1; transition-delay: 0s; }

/* Grid: the same squares, neatly in rows. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, var(--tile)); gap: 24px; justify-content: center; }

/* List: the same squares, each with its text on one side (set per row from home.js). */
.lrows { display: flex; flex-direction: column; gap: 64px; }
.lrow { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.lrow--right { flex-direction: row; align-items: center; }
.lrow--left { flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
.lrow--bottom { flex-direction: column; align-items: flex-start; }
.lrow--top { flex-direction: column-reverse; align-items: flex-start; }
.lrow .tile { flex: none; }
.lrow__text { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.lrow--left .lrow__text { text-align: right; align-items: flex-end; }
.lrow__title { font-size: 22px; font-weight: 500; line-height: 1.2; }
.lrow__meta { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }

.about { position: relative; z-index: 2; padding-top: 160px; padding-bottom: 120px; display: flex; justify-content: flex-end; }
.bio { margin: 0; width: min(100%, 640px); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.bio span { color: #BFC0C5; transition: color .35s ease; }
.bio span.is-lit { color: var(--ink); }

.pin { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-start; align-items: flex-end; gap: 32px; padding: 0 20px 20px; pointer-events: none; }
.pin__title { position: relative; font-size: clamp(72px, 12vw, 184px); line-height: .8; font-weight: 500; letter-spacing: -0.055em; }
.pin__name, .pin__about, .pin__intro { transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.pin__name { color: #D3D4D8; }
.pin__about { position: absolute; left: 0; bottom: 0; color: var(--ink); opacity: 0; transform: translateY(24px); }
/* Glass panel behind the intro text only, for legibility over the 3D objects. */
.pin__intro { margin: 0 0 6px; max-width: 380px; padding: 12px 16px; border-radius: 10px; font-size: 20px; line-height: 1.25; font-weight: 500; color: var(--ink-2); background: rgba(247,247,247,.6); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.pin.is-about .pin__name { opacity: 0; transform: translateY(-24px); }
.pin.is-about .pin__about { opacity: 1; transform: none; }
.pin.is-about .pin__intro { opacity: 0; }

.experience { padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; }
.experience__photo { width: min(100%, 360px); aspect-ratio: 3 / 4; object-fit: cover; }
.experience p { margin: 32px 0 0; max-width: 360px; color: var(--ink-2); background: var(--bg); }
.experience h2 { margin: 0 0 32px; font-size: 22px; font-weight: 500; }
.xp { display: flex; flex-direction: column; background: var(--bg); }
.xp div { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.xp div:last-child { border-bottom: 1px solid var(--line); }
.xp span:first-child { font-weight: 500; }
.xp span:last-child { color: var(--muted); }

.contact { background: var(--ink); color: var(--bg); padding: 120px 20px 40px; }
.contact a { color: var(--bg); }
.contact__inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 120px; }
.contact__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: end; }
.contact h2 { margin: 0; font-size: clamp(72px, 12vw, 184px); line-height: .8; font-weight: 500; letter-spacing: -0.055em; }
.contact__copy { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.contact__email { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; }
.contact__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; color: #A9AAB2; }
.contact__links { display: flex; gap: 24px; }

/* Project page */
.project { min-height: 100vh; display: flex; flex-direction: column; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 16px 20px 8px; scrollbar-width: none; user-select: none; -webkit-user-select: none; }
.strip::-webkit-scrollbar { display: none; }
.strip img { height: clamp(240px, 46vh, 460px); width: auto; max-width: 88vw; object-fit: cover; flex: none; background: var(--tile-bg); -webkit-user-drag: none; }
.next { position: relative; flex: none; overflow: hidden; background: var(--ink); height: clamp(240px, 46vh, 460px); aspect-ratio: 4 / 3; }
.next img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.next:hover img { transform: scale(1.04); }
.next__ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(0,0,0,.35); color: var(--bg); text-align: center; padding: 16px; }
.next__title { font-size: 22px; font-weight: 500; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; padding: 32px 20px 0; flex: 1; }
.details__text { max-width: 480px; display: flex; flex-direction: column; gap: 22px; }
.details h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 500; }
.details p { margin: 0; }
.pager { display: flex; justify-content: space-between; align-items: flex-end; padding: 40px 20px 20px; }
.pn { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--ink); min-height: 44px; display: flex; flex-direction: column; gap: 2px; }
.pn .lbl { color: var(--muted); }
.pn--prev { align-items: flex-start; text-align: left; }
.pn--next { align-items: flex-end; text-align: right; }

.ch-in { display: inline-block; animation: chin .55s ease-out both; }
@keyframes chin { from { opacity: 0; filter: blur(4px); transform: translateY(-25%); } to { opacity: 1; filter: blur(0); transform: none; } }
.fade { animation: fadein .6s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.viewer { position: fixed; inset: 0; z-index: 900; background: rgba(247,247,247,.97); display: flex; flex-direction: column; }
.viewer[hidden] { display: none; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.viewer__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 20px; }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; animation: fadein .35s ease both; }
.vbtn { background: none; border: 0; padding: 0 4px; font: inherit; color: var(--ink); min-height: 44px; min-width: 44px; }

/* Sandbox page (placeholder): inverted palette, 90% black screen, white nav, logo and cursor. */
.sandbox { --bar: #fff; --bar-edge: #000; --bg: #1a1a1a; --ink: #fff; --ink-2: #fff; --muted: rgba(255,255,255,.62); min-height: 100vh; }
.sandbox .header__bar::before { display: none; }
.sandbox .cursor__shape { background: #fff; }
.sandbox .cursor[data-mode=rainbow] { mix-blend-mode: normal; }
/* On the dark page the pills are opaque and carry their own black label (data-cursor-label). */
.cursor[data-mode=exit] .cursor__shape { height: 32px; background: #fff; }
.cursor[data-mode=exit] .cursor__text, .sandbox .cursor[data-mode=rainbow] .cursor__text { opacity: 1; color: #000; font-size: 14px; }
.sandbox a:hover { color: #fff; }
.soon { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; text-align: center; font-size: clamp(64px, 15vw, 240px); font-weight: 500; letter-spacing: -.04em; line-height: .9; color: rgba(255,255,255,.1); pointer-events: none; }
/* Every nav item except Sandbox slides up and out, one after another; Sandbox stays put at the right. */
.nav > :not(.is-here):not(.exit) { transition: transform .6s cubic-bezier(.6,0,.3,1), opacity .4s ease; }
.nav.is-away > :not(.is-here):not(.exit) { transform: translateY(-140%); opacity: 0; pointer-events: none; }
.nav.is-away > :nth-last-child(3) { transition-delay: 0s; }
.nav.is-away > :nth-last-child(4) { transition-delay: .07s; }
.nav.is-away > :nth-last-child(5) { transition-delay: .14s; }
.nav.is-away > :nth-last-child(6) { transition-delay: .21s; }
/* Exit Box rises into place once the other links have gone. */
.exit { opacity: 0; transform: translateY(60%); pointer-events: none; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.nav.is-away > .exit { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
.navlink.is-here { color: var(--ink); }

/* Theme button: a crescent moon that turns into a sun once the page is dark. */
.theme { position: relative; display: grid; place-items: center; width: 24px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); }
.theme::after { content: ''; position: absolute; inset: 0 -10px; }
.theme:hover { color: var(--ink); }
.theme svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.3,.7,.2,1), opacity .3s ease; }
.theme__sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme[aria-pressed=true] .theme__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.theme[aria-pressed=true] .theme__sun { opacity: 1; transform: none; }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* Dark theme: black page, white text; everything with a fixed light colour gets its dark counterpart. */
html[data-theme=dark] { --bg: #0b0b0c; --ink: #f2f2f3; --ink-2: #d6d7da; --muted: #8f9198; --line: #2a2b30; --tile-bg: #1b1c1f; --dot: rgba(255,255,255,.12); --bar: #fff; --bar-edge: #000; color-scheme: dark; }
[data-theme=dark] a:hover { color: #fff; }
[data-theme=dark] .header__bar::before, [data-theme=dark] .submenu::before { background: rgba(11,11,12,.86); }
[data-theme=dark] .pin__intro, [data-theme=dark] .motion__text { background: rgba(24,24,27,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
[data-theme=dark] .pin__name { color: #34353a; }
[data-theme=dark] .bio span { color: #4a4b52; }
[data-theme=dark] .bio span.is-lit { color: var(--ink); }
[data-theme=dark] .tile { outline-color: rgba(255,255,255,.25); }
[data-theme=dark] .viewer { background: rgba(11,11,12,.97); }
[data-theme=dark] .intro.is-paused .stage-glass { background: rgba(11,11,12,.2); }
[data-theme=dark] .cursor__shape { background: #fff; }
[data-theme=dark] .cursor[data-mode=explore] .cursor__shape, [data-theme=dark] .cursor[data-mode=next] .cursor__shape, [data-theme=dark] .cursor[data-mode=repel] .cursor__shape, [data-theme=dark] .cursor[data-mode=attract] .cursor__shape, [data-theme=dark] .cursor[data-mode=project] .cursor__shape { background: #fff; }
[data-theme=dark] .cursor[data-mode=explore] .cursor__text, [data-theme=dark] .cursor[data-mode=next] .cursor__text, [data-theme=dark] .cursor[data-mode=repel] .cursor__text, [data-theme=dark] .cursor[data-mode=attract] .cursor__text, [data-theme=dark] .cursor[data-mode=project] .cursor__text { color: #000; }
[data-theme=dark] .cursor__text span { color: rgba(0,0,0,.62); }
[data-theme=dark] .cursor[data-mode=ring] .cursor__shape { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
[data-theme=dark] .cursor[data-mode=nav] .cursor__shape, [data-theme=dark] .cursor[data-mode=logo] .cursor__shape, [data-theme=dark] .cursor[data-mode=light] .cursor__shape { background: rgba(255,255,255,.1); }
[data-theme=dark] .cursor[data-mode=gallery] .cursor__shape, [data-theme=dark] .cursor[data-mode=viewer] .cursor__shape { background: rgba(255,255,255,.9); }
[data-theme=dark] .cursor[data-mode=rainbow] { mix-blend-mode: normal; }
[data-theme=dark] .cursor[data-mode=rainbow] .cursor__text { opacity: 1; color: #000; font-size: 14px; }
[data-theme=dark] .motion:hover .motion__text, [data-theme=dark] .motion:focus-visible .motion__text { color: #fff; }
[data-theme=dark] .motion[aria-pressed=true] .motion__text { background: rgba(255,255,255,.9); color: #000; }
[data-theme=dark] .sound:hover, [data-theme=dark] .sound:focus-visible,
[data-theme=dark] .motion:hover .motion__icon, [data-theme=dark] .motion:focus-visible .motion__icon, [data-theme=dark] .motion[aria-pressed=true] .motion__icon { background: #fff; color: #000; }
[data-theme=dark] .palette:hover, [data-theme=dark] .palette:focus-within, [data-theme=dark] .palette.is-open { background: #3a3b40; }

@media (max-width: 760px) {
  .header__bar { gap: 12px; }
  .nav { gap: 14px; }
  .submenu { display: none; }
  /* No room beside a full-width tile: side text moves under (right) or over (left) it, left-aligned. */
  .lrow--right { flex-direction: column; align-items: flex-start; }
  .lrow--left { flex-direction: column-reverse; align-items: flex-start; }
  .lrow--left .lrow__text { text-align: left; align-items: flex-start; }
  /* Phones: the three controls stack in a column on the right; no keyboard hint. */
  .hero-controls { bottom: auto; top: 88px; transform-origin: right top; flex-direction: column; align-items: flex-end; gap: 10px; }
  .motion__text { display: none; }
  .pin { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .pin__intro { font-size: 16px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .roll .c, .tile, .tile__overlay, .bio span, .pin__name, .pin__about, .pin__intro, .next img { transition: none !important; }
  .ch-in, .fade, .viewer__img, .cursor__shape { animation: none !important; }
  .theme svg { transition: none !important; }
  .stage-glass { transition: none !important; }
  .nav > * { transition: none !important; }
}