/* Yiannberts — "arrangement view": the site borrows the vocabulary of a DAW
   timeline (lanes, clips, bar ruler, playhead) on a dark studio background.
   Every colour lives here. No pure black or pure white: the base is a soft
   charcoal with a faint glow and film grain, and text is a warm off-white. */
:root {
  --bg: #111113;
  --bg-2: #18181b;       /* timeline, mobile menu */
  --bg-3: #212125;       /* lane names, placeholders, hovers */
  --text: #e9e7e2;       /* body text */
  --text-soft: rgb(233 231 226 / .7);
  --line: rgb(233 231 226 / .12);
  --line-strong: rgb(233 231 226 / .28);
  --grid: rgb(233 231 226 / .05);
  --music: #c6f04d;        /* production clips, primary action */
  --music-hi: #d8f87c;
  --sound: #b7a4ff;           /* sound design clips, notes */
  --sound-hi: #cfc2ff;
  --on-clip: #111113;
  --clip-strip: rgb(17 17 19 / .16);
  --clip-wave: rgb(17 17 19 / .5);
  --glow-music: rgb(198 240 77 / .35);
  --accent-text: var(--music);   /* lime used as text */
  --note-text: var(--sound);        /* placeholder notes, focus ring */
  --glow-a: rgb(198 240 77 / .05);   /* background glow, lime corner */
  --glow-b: rgb(183 164 255 / .07);  /* background glow, lilac corner */
  --section-tint: rgb(233 231 226 / .025);
  --grain-opacity: .07;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;

  --font: "Instrument Sans", system-ui, sans-serif;
  --max: 1200px;
  --lane-name: 132px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Light mode (toggle in the header). Lime and lilac get darker text versions
   so small text keeps at least 4.5:1 contrast on the light background. */
:root[data-theme="light"] {
  --bg: #f1f1ee;
  --bg-2: #e8e8e4;
  --bg-3: #deded9;
  --text: #1c1c1f;
  --text-soft: rgb(28 28 31 / .72);
  --line: rgb(28 28 31 / .12);
  --line-strong: rgb(28 28 31 / .3);
  --grid: rgb(28 28 31 / .06);
  --music: #b2dc2a;
  --music-hi: #c6f04d;
  --sound: #a08bf7;
  --sound-hi: #b7a4ff;
  --accent-text: #4d6100;
  --note-text: #5a3fc0;
  --glow-music: rgb(120 150 20 / .3);
  --glow-a: rgb(178 220 42 / .1);
  --glow-b: rgb(120 95 230 / .07);
  --section-tint: rgb(28 28 31 / .025);
  --grain-opacity: .05;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Elements marked hidden stay hidden even if a class gives them a display */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text);
  background:
    radial-gradient(1100px 700px at 100% -10%, var(--glow-b), transparent 65%),
    radial-gradient(900px 640px at -10% 30%, var(--glow-a), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  font-family: var(--font); font-size: 18px; line-height: 1.65; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
::selection { background: var(--music); color: var(--on-clip); }
:focus-visible { outline: 3px solid var(--note-text); outline-offset: 3px; border-radius: 4px; }
/* Film grain over the whole page, behind the content */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain); opacity: var(--grain-opacity); }
html[data-lang="es"] .en, html[data-lang="en"] .es { display: none !important; }

.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 6px; background: var(--music); color: var(--on-clip); }
.skip:focus { top: 12px; }
.alt { background: var(--section-tint); border-block: 1px solid var(--line); }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; letter-spacing: -.01em; }
.brand-clip { width: 22px; height: 14px; border-radius: 3px; background: var(--music); box-shadow: 6px 6px 0 -1px var(--sound); transition: box-shadow .4s var(--ease); }
.brand:hover .brand-clip { box-shadow: 10px 0 0 -1px var(--sound); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-pages { display: flex; gap: 26px; }
.nav-pages a { position: relative; text-decoration: none; font-weight: 500; font-size: 16px; color: var(--text-soft); padding: 4px 0; transition: color .2s; }
.nav-pages a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--music); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-pages a:hover { color: var(--text); }
.nav-pages a:hover::after, .nav-pages a[aria-current="page"]::after { transform: scaleX(1); }
.nav-pages a[aria-current="page"] { color: var(--text); }
.lang { display: flex; align-items: center; gap: 4px; font-size: 15px; color: var(--text-soft); }
.lang button { padding: 4px 2px; font-weight: 500; color: var(--text-soft); }
.lang button[aria-pressed="true"] { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--music); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu-btn { display: none; width: 44px; height: 40px; border: 1px solid var(--line-strong); border-radius: 6px; }
.menu-btn span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Buttons and text links */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none;
  background: var(--music); color: var(--on-clip); transition: box-shadow .3s var(--ease), transform .15s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--music-hi); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { box-shadow: 0 10px 30px -10px var(--glow-music); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-ghost::before { background: var(--bg-3); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.nav .btn { padding: 9px 16px; font-size: 15px; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .25s, color .25s; }
.text-link:hover { text-decoration-color: var(--music); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* Hero: the name rises in once, then stays still */
.hero { padding: 48px 0 88px; }
.hero-name {
  font-size: clamp(64px, 9.6vw, 148px); font-weight: 600; line-height: .95; letter-spacing: -.045em; margin-left: -.04em;
  animation: rise 1.1s var(--ease) .1s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(.18em); } }
@keyframes up { from { opacity: 0; transform: translateY(18px); } }
@keyframes unveil { from { clip-path: inset(0 0 100% 0 round 8px); } to { clip-path: inset(0 round 8px); } }
/* Hero pieces arrive one after another */
.hero .back { animation: up .8s var(--ease) both; }
.hero .hero-lead { animation: up 1s var(--ease) .22s both; }
.hero .actions { animation: up 1s var(--ease) .34s both; }
.hero .daw { animation: up 1s var(--ease) .3s both; }
.hero-lead { max-width: 34ch; margin-top: 28px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--text); }
.page-title { font-size: clamp(48px, 9vw, 128px); font-weight: 600; line-height: .98; letter-spacing: -.04em; margin-top: 28px; animation: rise 1s var(--ease) both; }
/* Page intro with key figures on the right (music page) */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; margin-top: 28px; }
.page-head .hero-lead { margin-top: 0; }
.stats { display: flex; gap: 36px; margin: 0; padding: 0; list-style: none; animation: up 1s var(--ease) .3s both; }
.stats li { position: relative; min-width: 92px; padding-top: 16px; border-top: 1px solid var(--line); }
.stats li::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 3px; background: var(--chip); transition: width .5s var(--ease); }
.stats li:hover::before { width: 100%; }
.stats b { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats li > span { display: block; margin-top: 8px; font-size: 15px; color: var(--text-soft); }
.back { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--text-soft); text-decoration: none; }
.back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* Photos */
.photo { width: 100%; height: auto; border-radius: 8px; background: var(--bg-3); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px; align-items: end; }
.hero-top .photo { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; animation: unveil 1.3s var(--ease) .15s both; }
.about-head .photo { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; }

/* Arrangement view */
/* The whole timeline always fits its box: no sideways scroll */
.daw { margin-top: 56px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.daw-grid { position: relative; }
.ruler, .lane { display: grid; grid-template-columns: var(--lane-name) repeat(16, 1fr); }
.ruler { height: 30px; align-items: end; font-size: 12px; color: var(--text-soft); border-bottom: 1px solid var(--line); }
.ruler span { padding: 0 0 5px 6px; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ruler span:first-child { border-left: 0; }
.lane { min-height: 92px; border-bottom: 1px solid var(--line); }
.lane:last-child { border-bottom: 0; }
.lane-name {
  position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 0 14px;
  font-size: 14px; font-weight: 600; line-height: 1.2; background: var(--bg-3); border-right: 1px solid var(--line);
}
.lane-name::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--lane-color); }
.lane-clips {
  grid-column: 2 / -1; display: grid; grid-template-columns: repeat(16, 1fr); align-items: center; padding: 10px 0;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: calc(100% / 16) 100%;
}
.lane-music { --lane-color: var(--music); --lane-hi: var(--music-hi); }
.lane-sound { --lane-color: var(--sound); --lane-hi: var(--sound-hi); }
.clip {
  grid-column: var(--start) / span var(--len); margin: 0 2px; height: 70px; display: flex; flex-direction: column;
  border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--on-clip); background: var(--lane-color);
  transition: background-color .25s, transform .35s var(--ease);
  /* Each clip is "recorded" as the playhead passes over it: the sweep crosses
     one bar every .161s (2.576s for 16 bars), starting at .6s. Each clip shows
     exactly up to the playhead, with a clean edge, no fade. */
  animation: record calc(var(--len) * .161s) linear calc(.6s + (var(--start) - 1) * .161s) both;
}
@keyframes record { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.clip svg { flex: 1; width: 100%; height: auto; fill: var(--clip-wave); transform-origin: center; transition: transform .45s var(--ease); }
.clip:hover, .clip:focus-visible { background: var(--lane-hi); transform: translateY(-3px); }
.clip:hover svg, .clip:focus-visible svg { transform: scaleY(1.25); }
.clip:focus-visible { outline-color: var(--text); }
.clip-name { padding: 3px 8px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--clip-strip); }
.clip .todo { color: inherit; }
.playhead-track { position: absolute; top: 0; bottom: 0; left: var(--lane-name); right: 0; pointer-events: none; }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--text); opacity: 0; animation: sweep 2.8s linear .6s both; }
.playhead::before { content: ""; position: absolute; top: 0; left: -6px; border: 7px solid transparent; border-top: 9px solid var(--text); border-bottom: 0; }
@keyframes sweep { 0% { left: 0; opacity: 1; } 92% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.daw-note { margin-top: 12px; font-size: 14px; color: var(--text-soft); }

/* Sections */
.section { padding: 104px 0; }
.section-title { font-size: clamp(36px, 5vw, 60px); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; }
.section-intro { max-width: 52ch; margin-top: 16px; color: var(--text-soft); }
.section-title + .ph, .section-intro + * { margin-top: 40px; }
.reel { padding-top: 0; }

/* Placeholders: client content still to come */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: 8px; background: var(--bg-3); color: var(--text-soft); font-size: 15px;
  transition: border-color .3s;
}
.ph b { font-size: 20px; font-weight: 700; color: var(--text); }
.ph-video { width: 100%; aspect-ratio: 16 / 9; }
.todo { color: var(--note-text); }
.is-todo { text-decoration: underline dashed var(--line-strong); text-underline-offset: 6px; color: var(--text-soft); }

/* Home: two ways to work together */
.ways { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px solid var(--line); }
.way { padding: 36px 40px 8px 0; }
.way + .way { padding-left: 40px; border-left: 1px solid var(--line); }
.way h3 { display: flex; align-items: center; gap: 12px; font-size: 32px; font-weight: 600; letter-spacing: -.015em; }
.way h3::before { content: ""; width: 28px; height: 18px; border-radius: 3px; background: var(--chip); transition: width .45s var(--ease); }
.way:hover h3::before { width: 44px; }
.way p { margin: 14px 0 20px; max-width: 42ch; color: var(--text-soft); }
.way-music { --chip: var(--music); }
.way-sound { --chip: var(--sound); }

/* Home: about teaser */
.teaser { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.teaser p { max-width: 46ch; margin-top: 16px; font-size: 20px; }

/* Contact */
.contact { padding: 120px 0; border-top: 1px solid var(--line); }
.contact .section-title { font-size: clamp(44px, 7vw, 96px); font-weight: 600; max-width: 12ch; line-height: .94; }
.contact p { margin-top: 18px; max-width: 46ch; color: var(--text-soft); }
.email-big {
  display: inline-block; margin-top: 36px; font-size: clamp(20px, 6vw, 52px); font-weight: 600; letter-spacing: -.02em;
  text-decoration: underline; text-decoration-color: var(--music); text-decoration-thickness: 3px; text-underline-offset: 10px;
  transition: text-underline-offset .3s var(--ease), text-decoration-thickness .3s var(--ease); overflow-wrap: anywhere;
}
.email-big:hover { text-underline-offset: 6px; text-decoration-thickness: 6px; }
.copy-status:not(:empty) { animation: up .4s var(--ease); }
.copy-status { min-height: 24px; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.socials { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }

footer { border-top: 1px solid var(--line); color: var(--text-soft); padding: 26px 0; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* Music: one player beside the list of tracks */
.listen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; margin-top: 40px; }
/* Left column (player + artists) follows the track list while scrolling */
.listen-side { position: sticky; top: 16px; display: grid; gap: 40px; }
.player { position: relative; z-index: 5; min-height: 152px; border-radius: 12px; }
.side-artists .artists-title { margin-top: 0; }
.all-tracks { display: inline-block; margin-top: 24px; }
/* Home: compact player across the top, six tracks in two columns below */
.listen-compact { grid-template-columns: 1fr; gap: 24px; }
.listen-compact .listen-side { position: static; }
.tracklist-2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; }
.side-artists .artists { gap: 2px 20px; font-size: clamp(18px, 1.7vw, 22px); }
.player iframe, .spotify { display: block; width: 100%; border: 0; border-radius: 12px; }
.spotify { background: var(--bg-3); }
.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track { border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.track-link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 12px; text-decoration: none; transition: background-color .25s;
}
.track-link:hover, .track:target .track-link, .track.is-current .track-link { background: var(--bg-3); }
.track-num { font-size: 14px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.track-title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.track.is-current .track-title { color: var(--accent-text); }
/* Current track: the number becomes equalizer bars, moving while it plays */
@property --eq1 { syntax: "<percentage>"; inherits: false; initial-value: 45%; }
@property --eq2 { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@property --eq3 { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
.track.is-current .track-num { position: relative; color: transparent; }
.track.is-current .track-num::before {
  content: ""; position: absolute; left: 0; bottom: .3em; width: 15px; height: 13px;
  background:
    linear-gradient(var(--accent-text) 0 0) 0 100% / 3px var(--eq1) no-repeat,
    linear-gradient(var(--accent-text) 0 0) 6px 100% / 3px var(--eq2) no-repeat,
    linear-gradient(var(--accent-text) 0 0) 12px 100% / 3px var(--eq3) no-repeat;
}
.listen.is-playing .track.is-current .track-num::before { animation: eq .8s ease-in-out infinite alternate; }
@keyframes eq { 0% { --eq1: 30%; --eq2: 95%; --eq3: 50%; } 50% { --eq1: 100%; --eq2: 40%; --eq3: 85%; } 100% { --eq1: 55%; --eq2: 70%; --eq3: 25%; } }
.track-artist { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.35; color: var(--text-soft); }
.track-time { grid-column: 3; grid-row: 1; font-size: 14px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* Artists credited on the tracks */
.artists-title { margin-top: 64px; font-size: 15px; font-weight: 600; color: var(--text-soft); }
.artists { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 12px 0 0; padding: 0; list-style: none; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.artists li { transition: color .25s; }
.artists li:hover { color: var(--accent-text); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin: 40px 0 0; }
.services div { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
.services div::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: var(--chip); transition: width .5s var(--ease); }
.services div:hover::before { width: 100%; }
.services dt { font-size: 22px; font-weight: 600; }
.services dd { margin: 8px 0 0; color: var(--text-soft); font-size: 16px; }
.services .service-cta dd + dd { margin-top: 14px; font-size: 17px; color: var(--text); }

/* Sound design: alternating project rows */
.projects { margin-top: 48px; display: grid; gap: 80px; }
.project { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; scroll-margin-top: 24px; }
.project:nth-child(even) .ph { order: 2; }
.project:hover .ph, .project:target .ph { border-color: var(--sound); }
.project h3 { font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.project-meta { margin-top: 6px; font-size: 15px; color: var(--text-soft); }
.project p { margin-top: 14px; max-width: 42ch; }

/* About */
.about-head { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: end; }
.bio { max-width: 62ch; }
.bio p + p { margin-top: 16px; }
.bio .lead { font-size: 24px; line-height: 1.45; }
.years { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
.years li { display: grid; grid-template-columns: 180px 1fr; gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.years time { font-weight: 700; color: var(--accent-text); }
.years h3 { font-size: 22px; font-weight: 600; }
.years p { color: var(--text-soft); font-size: 16px; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin: 40px 0 0; }
.tools dt { font-weight: 700; font-size: 20px; }
.tools dd { margin: 6px 0 0; }

/* Scroll reveal (added by site.js only when motion is allowed) */
:root .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
:root .reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
  .nav.open { display: flex; animation: drop .3s var(--ease); }
  @keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
  .nav-pages { flex-direction: column; gap: 0; }
  .nav-pages a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav-pages a::after { display: none; }
  .nav-pages a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--music); padding-left: 12px; }
  .lang { padding: 16px 0; font-size: 17px; }
  .nav .btn { justify-content: center; padding: 14px; font-size: 17px; }
  .ways, .teaser, .about-head, .hero-top, .listen, .project, .services, .tools { grid-template-columns: 1fr; }
  .way, .way + .way { padding: 28px 0 8px; border-left: 0; }
  .way + .way { border-top: 1px solid var(--line); }
  .teaser { gap: 32px; }
  .hero-name { font-size: clamp(64px, 18vw, 148px); }
  .hero-top { gap: 32px; }
  .hero-top .photo { aspect-ratio: 1; object-position: 50% 8%; }
  .about-head { gap: 32px; }
  .about-head .photo { max-width: 340px; }
  .listen { gap: 16px; }
  /* On phones the column dissolves: the player sticks alone, artists go after the tracks */
  .listen-side { display: contents; }
  .player { position: sticky; top: 0; background: var(--bg); box-shadow: 0 0 0 8px var(--bg); }
  .side-artists { order: 1; margin-top: 24px; }
  .tracklist-2 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .page-head { grid-template-columns: 1fr; }
  .page-head .stats { gap: 20px; }
  .stats li { flex: 1; min-width: 0; }
  .track { scroll-margin-top: 176px; }
  .project { gap: 20px; }
  .project:nth-child(even) .ph { order: 0; }
  .section { padding: 80px 0; }
}
@media (max-width: 600px) {
  /* Phones: each lane name sits above its clips, so the 16 bars get the full width */
  :root { --lane-name: 0px; }
  .ruler { grid-template-columns: repeat(16, 1fr); height: 24px; font-size: 10px; }
  .ruler span { padding: 0 0 4px 3px; }
  .ruler span:first-child { display: none; }
  .ruler span:nth-child(2) { border-left: 0; }
  .lane { grid-template-columns: repeat(16, 1fr); min-height: 0; }
  .lane-name { position: static; grid-column: 1 / -1; padding: 6px 10px; font-size: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .lane-name::before { width: 8px; height: 8px; }
  .lane-clips { grid-column: 1 / -1; padding: 8px 0; }
  .clip { height: 54px; margin: 0 1px; }
  .clip-name { padding: 2px 5px; font-size: 11px; }
  body { font-size: 17px; }
  .years li { grid-template-columns: 1fr; }
  .hero { padding-bottom: 56px; }
  .contact { padding: 88px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .playhead { display: none; }
}

/* Theme toggle: shows the mode you'll switch to */
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .25s, transform .5s var(--ease); }
.theme-btn:hover { box-shadow: inset 0 0 0 1px var(--text); transform: rotate(-20deg); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .icon-moon, :root[data-theme="light"] .theme-btn .icon-sun { display: none; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }
.header-tools { display: flex; align-items: center; gap: 12px; }
@media (min-width: 861px) { .header-tools { margin-left: 4px; } }