/* ============================================================
   OLIVER ALBACH — main stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 350;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ember); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
}

/* ---------- utilities ---------- */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.5;
}
.mono--s { font-size: var(--fs-mono-s); }
.dim { color: var(--bone-70); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--bone); color: var(--ink); padding: 10px 16px;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.wrap {
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

.section {
  position: relative;
  padding-block: var(--sec-y);
}

/* a measure the whole family keeps: content never runs wider than this */
.hold { max-width: var(--container); }

/* section label: a rule, then (01) and the title under it */
.section__label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.9em;
  align-items: start;
  color: var(--bone-70);
  border-top: 1px solid var(--bone-12);
  padding-top: clamp(14px, 1.8vh, 22px);
  margin-bottom: clamp(28px, 5vh, 64px);
}
.section__label > span { color: var(--bone-52); padding-top: 0.5em; }
.section__title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: uppercase;
}

/* ---------- ambient grain ---------- */
.grain {
  position: fixed; inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.025;
  background-image: var(--grain-src);
  background-size: 128px 128px;
  will-change: transform;
  animation: grain var(--bar) steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, 2%); }
  33%  { transform: translate(2%, -4%); }
  50%  { transform: translate(-2%, -2%); }
  66%  { transform: translate(3%, 3%); }
  83%  { transform: translate(-4%, 1%); }
  100% { transform: translate(0, 0); }
}
body.no-grain .grain { display: none; }

/* ---------- the beat rail (signature element) ---------- */
.rail {
  position: fixed;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 80;
  pointer-events: none;
}
.rail__line {
  position: absolute; inset: 0;
  background: var(--bone-12);
}
.rail__progress {
  position: absolute; left: 0; top: 0; width: 1px;
  height: 0;
  background: var(--bone-52);
}
.rail__beat {
  position: absolute;
  left: -3px;
  width: 7px; height: 7px;
  margin-top: -3px;
  background: var(--bone);
  border-radius: 50%;
  transform: scale(0.45);
  opacity: 0.75;
}
.rail__tick {
  position: absolute;
  left: -5px; width: 11px; height: 1px;
  background: var(--bone-24);
}
.rail__tick[data-active='true'] { background: var(--ember); }
@media (max-width: 640px) { .rail { display: none; } }

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.4vh, 26px) var(--pad-r) clamp(16px, 2.4vh, 26px) var(--pad-l);
  mix-blend-mode: difference;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* once the hero is gone the bar becomes a solid system rule, so it never
   sits on top of running text */
body.scrolled .topbar {
  mix-blend-mode: normal;
  background: var(--ink);
  border-bottom-color: var(--bone-12);
}
.topbar__mark {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.scrolled .topbar__mark { opacity: 1; transform: none; }

.lang {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
}
.lang__btn {
  padding: 2px 0;
  color: var(--bone-52);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lang__btn[aria-pressed='true'] {
  color: var(--bone);
  border-bottom-color: var(--bone);
}
.lang__btn:hover { color: var(--bone); }
.lang__sep { color: var(--bone-24); }

/* ---------- section index (right edge) ---------- */
.index {
  position: fixed;
  right: calc(var(--pad-r) * 0.45);
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  display: grid;
  gap: 14px;
  justify-items: end;
}
.index__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-52);
  transition: color 0.3s var(--ease);
}
.index__item span {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.index__item::after {
  content: '';
  width: 16px; height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.index__item:hover,
.index__item[aria-current='true'] { color: var(--bone); }
.index__item:hover span { opacity: 1; transform: none; }
.index__item[aria-current='true']::after { width: 30px; background: var(--ember); }
@media (max-width: 1100px) { .index { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(96px, 14vh, 180px);
  padding-bottom: clamp(24px, 4vh, 48px);
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
body.shader-on .hero__canvas { opacity: 1; }

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: clamp(24px, 4vh, 56px);
}

.hero__name {
  font-family: var(--display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-hero);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  display: grid;
  width: max-content;
  max-width: 100%;
}
.hero__name .line { display: block; white-space: nowrap; }
.hero__name .line:nth-child(2) { margin-left: clamp(18px, 4.5vw, 96px); }
/* when the shader paints the name, the DOM text stays in the accessibility
   tree and stays selectable — it just hands its pixels to the canvas */
body.shader-on .hero__name { color: transparent; }

.hero__quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 19ch;
  margin: 0;
  margin-left: clamp(18px, 4.5vw, 96px);
  text-wrap: balance;
}

.hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.hero__meta { color: var(--bone-70); }

.player {
  display: flex;
  align-items: center;
  gap: 14px;
}
.player__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: 10px 0;
  border-bottom: 1px solid var(--bone-24);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.player__btn:hover { color: var(--ember); border-bottom-color: var(--ember); }
.player__btn:disabled { opacity: 0.55; cursor: default; }
.player__btn:disabled:hover { color: inherit; border-bottom-color: var(--bone-24); }
.player__bars[hidden] { display: none; }
.player__glyph { width: 9px; height: 11px; fill: currentColor; }
.player__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  padding-bottom: 10px;
}
.player__bars i {
  display: block;
  width: 3px;
  height: 20%;
  background: var(--bone-52);
  transform-origin: bottom;
  transition: height 90ms linear;
}
.hero__scroll {
  color: var(--bone-52);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__scroll::after {
  content: '';
  width: 40px; height: 1px;
  background: var(--bone-24);
  animation: slide var(--bar) var(--ease) infinite;
}
@keyframes slide {
  0%, 100% { transform: scaleX(0.4); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
}

/* ============================================================
   LISTEN
   ============================================================ */
.listen__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 860px) { .listen__grid { grid-template-columns: 1fr; } }

.cover {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--bone-24);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  color: var(--bone-52);
  background:
    repeating-linear-gradient(-45deg, var(--bone-06) 0 1px, transparent 1px 11px);
}
.cover__tag { max-width: 22ch; }

.release__title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 0.5em;
}
.release__meta { color: var(--bone-70); margin-bottom: clamp(20px, 3vh, 34px); }
.release__desc {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--bone-70);
  max-width: 44ch;
  margin: 0 0 clamp(28px, 4vh, 48px);
}

.tracks { list-style: none; margin: 0 0 clamp(28px, 4vh, 48px); padding: 0; }
.tracks li {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0.85em 0;
  border-top: 1px solid var(--bone-12);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.tracks li:last-child { border-bottom: 1px solid var(--bone-12); }
.tracks .num { color: var(--bone-52); }
.tracks .wave {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; height: 11px;
}
.tracks .wave i {
  flex: 0 0 1px;
  height: 100%;
  background: var(--bone-24);
  transition: background 0.4s var(--ease), height 0.4s var(--ease);
}
.tracks li:hover .wave i { background: var(--ember); }
@media (max-width: 560px) { .tracks .wave { display: none; } }

/* two-click embeds */
.embeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.embed {
  border: 1px solid var(--bone-24);
  padding: clamp(18px, 2.5vw, 28px);
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 150px;
}
.embed__name {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.embed__note { color: var(--bone-70); font-size: 0.86rem; line-height: 1.5; }
.embed__load {
  justify-self: start;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  border-bottom: 1px solid var(--bone-24);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.embed__load:hover { color: var(--ember); border-bottom-color: var(--ember); }
.embed iframe { width: 100%; border: 0; }
.embed--placeholder { border-style: dashed; }

/* ============================================================
   DISCOGRAPHY — horizontal timeline
   ============================================================ */
/* the headline stays put while the years run past it */
#discography { min-height: 100svh; }
/* der Inhalt sitzt in einem Sticky-Rahmen; scroll.js (pin) gibt der Sektion
   die Laufhöhe und schiebt die Reihe per --shift */
#discography[data-pin="on"] { padding-block: 0; }   /* der Sticky-Rahmen trägt den Abstand selbst */
.disco__sticky {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding-top: clamp(40px, 7vh, 96px);
  padding-bottom: clamp(24px, 4vh, 48px);
}
.disco {
  position: relative;
  overflow: hidden;
  align-self: center;
  width: 100%;
}
.disco__track {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  height: clamp(380px, 54vh, 560px);
  padding: 0 max(var(--pad-r), 26vw) 0 var(--pad-l);
  will-change: transform;
}
.disco__axis {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--bone-12);
  pointer-events: none;
}
.rel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 24vw, 340px);
}
.rel__dot {
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--bone-52);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.rel:hover .rel__dot { background: var(--ember); transform: scale(1.5); }
.rel__body {
  position: absolute;
  left: 0;
  width: clamp(210px, 22vw, 310px);
  padding-left: 22px;
}
.rel--up .rel__body { bottom: 50%; padding-bottom: 34px; }
.rel--down .rel__body { top: 50%; padding-top: 34px; }
.rel__body::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  background: var(--bone-12);
  height: 26px;
}
.rel--up .rel__body::before { bottom: 4px; }
.rel--down .rel__body::before { top: 4px; }

/* the silence between Oct 2023 and May 2026, drawn as distance */
.rel--gap { width: clamp(160px, 22vw, 380px); }

.rel__date { color: var(--bone-52); display: block; margin-bottom: 0.7em; }
.rel__name {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 2.15rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 0.45em;
  transition: color 0.4s var(--ease);
}
.rel:hover .rel__name { color: var(--ember); }
.rel__label { color: var(--bone-70); display: block; }
.rel__note { color: var(--bone-52); display: block; margin-top: 0.6em; }

.disco__hint { color: var(--bone-52); padding: 0 var(--pad-r) 0 var(--pad-l); }

/* fallback: schmaler Schirm oder reduced motion — die Zeitleiste wird eine Liste */
.disco--static .disco__axis { display: none; }
.disco--static .disco__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  height: auto;
  padding-right: var(--pad-r);
  transform: none !important;
}
.disco--static .rel { width: auto; }
.disco--static .rel__dot { display: none; }
.disco--static .rel__body {
  position: static;
  width: auto;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--bone-12);
}
.disco--static .rel__body::before { display: none; }
.disco--static .rel--gap { display: none; }
.disco--static + .disco__hint { display: none; }
@media (max-width: 860px) {
  #discography, .disco__sticky { min-height: 0; grid-template-rows: auto auto; }
}

/* ============================================================
   DATES
   ============================================================ */
.dates__head {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 0.35em;
  max-width: 14ch;
}
.dates__sub { color: var(--bone-70); max-width: 44ch; margin: 0 0 clamp(40px, 6vh, 80px); }
.dates__sub a { border-bottom: 1px solid var(--bone-24); }
.dates__sub a:hover { color: var(--ember); border-bottom-color: var(--ember); }

.log { display: grid; }
.log__row {
  display: grid;
  grid-template-columns: 8em 1fr 1fr 6em;
  gap: 16px;
  align-items: baseline;
  padding: 1.05em 0;
  border-top: 1px solid var(--bone-12);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bone-70);
}
.log__row:last-child { border-bottom: 1px solid var(--bone-12); }
.log__row--head { color: var(--bone-52); border-top: 0; }
.log__row .ev { color: var(--bone); }
.log__row .st { text-align: right; color: var(--bone-52); }
@media (max-width: 760px) {
  .log__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .log__row .ev { grid-column: 1 / -1; order: 2; }
  .log__row .ve { grid-column: 1 / -1; order: 3; color: var(--bone-52); }
  .log__row--head { display: none; }
}

/* ============================================================
   WORLDS — three doors
   ============================================================ */
#worlds { padding-bottom: 0; }
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bone-12);
}
.door {
  --door-pad: clamp(24px, 3vw, 44px);
  --door-pad-l: var(--door-pad);
  position: relative;
  min-height: clamp(360px, 76vh, 780px);
  padding: var(--door-pad) var(--door-pad) var(--door-pad) var(--door-pad-l);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  border-right: 1px solid var(--bone-12);
  overflow: hidden;
  isolation: isolate;
}
.door:last-child { border-right: 0; }
.door:first-child { --door-pad-l: var(--pad-l); }  /* keep clear of the rail */
.door::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--door-colour);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  z-index: -2;
}
.door:hover::before, .door.is-open::before { opacity: 0.16; }
.door__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.door.is-open .door__canvas { opacity: 1; }

/* Text guard: kicker and body sit on the ground colour, the shader (and the
   colour wash) fade out beneath them — no shadow, no blur, the ground just
   comes back. The fields reach the door's edges, so their height follows the
   text and the shader keeps the window in between. Static, so reduced motion
   changes nothing here. */
.door__kicker {
  --door-fade: 72px;
  color: var(--bone-52);
  margin: calc(-1 * var(--door-pad)) calc(-1 * var(--door-pad)) 0 calc(-1 * var(--door-pad-l));
  padding: var(--door-pad) var(--door-pad) var(--door-fade) var(--door-pad-l);
  background: linear-gradient(to bottom, var(--ink) calc(100% - var(--door-fade)), transparent);
}
.door__body {
  --door-fade: clamp(90px, 14vh, 140px);
  align-self: end;
  display: grid;
  gap: 18px;
  margin: 0 calc(-1 * var(--door-pad)) calc(-1 * var(--door-pad)) calc(-1 * var(--door-pad-l));
  padding: var(--door-fade) var(--door-pad) var(--door-pad) var(--door-pad-l);
  background: linear-gradient(to top, var(--ink) calc(100% - var(--door-fade)), transparent);
}
.door__name {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 3.1rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  text-transform: uppercase;
}
.door--omo .door__name {
  text-transform: lowercase;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.door__line {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(0.98rem, 1.25vw, 1.2rem);
  line-height: 1.35;
  color: var(--bone-70);
  max-width: 26ch;
  margin: 0;
}
.door__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--bone-52);
  transition: color 0.4s var(--ease);
}
.door:hover .door__foot { color: var(--bone); }
.door__enter { display: inline-flex; align-items: center; gap: 8px; }
.door:hover .door__enter { color: var(--door-colour); }
.door--surge:hover .door__enter { color: #cc5a6b; } /* tint of the wine red, 4.9:1 on ink */

@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; }
  .door {
    --door-pad-l: var(--pad-l);
    min-height: 58vh;
    border-right: 0;
    border-bottom: 1px solid var(--bone-12);
  }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: clamp(30px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__head {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
}
.contact__mail {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  display: inline-block;
  border-bottom: 1px solid var(--bone-24);
  padding-bottom: 6px;
  margin-bottom: clamp(30px, 5vh, 56px);
}
.contact__mail:hover { color: var(--ember); border-bottom-color: var(--ember); }
.contact__mail.is-placeholder {
  border-style: dashed;
  color: var(--bone-52);
  cursor: default;
}

.links { display: grid; gap: 0; }
.links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0.95em 0;
  border-top: 1px solid var(--bone-12);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.links a:last-child { border-bottom: 1px solid var(--bone-12); }
.links a:hover { color: var(--ember); padding-left: 10px; }
.links .host { color: var(--bone-52); }
.links a:hover .host { color: var(--ember); }

.portrait {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--bone-24);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  color: var(--bone-52);
  background: repeating-linear-gradient(-45deg, var(--bone-06) 0 1px, transparent 1px 11px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--bone-12);
  padding-block: clamp(46px, 7vh, 92px);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(40px, 6vh, 80px);
}
.footer h3 {
  font-family: var(--mono);
  font-size: var(--fs-mono-s);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-52);
  font-weight: 400;
  margin: 0 0 1.4em;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; }
.footer__list a:hover { color: var(--ember); }
.brand-omo { text-transform: none; letter-spacing: 0.06em; }
.footer address {
  font-style: normal;
  color: var(--bone-70);
  font-size: 0.92rem;
  line-height: 1.7;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  color: var(--bone-52);
  border-top: 1px solid var(--bone-12);
  padding-top: clamp(22px, 3vh, 34px);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px 24px; }
.footer__legal button { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; }
.footer__legal button:hover { color: var(--ember); }

/* ---------- legal overlay ---------- */
.legal {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  overflow-y: auto;
  padding: clamp(70px, 10vh, 130px) var(--pad-r) clamp(50px, 8vh, 100px) var(--pad-l);
}
.legal[hidden] { display: none !important; }
.legal__close {
  position: fixed;
  top: clamp(16px, 2.4vh, 26px);
  right: var(--pad-r);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  z-index: 2;
}
.legal__close:hover { color: var(--ember); }
.legal__inner { max-width: 66ch; }
.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 1em;
}
.legal h3 {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bone-52);
  font-weight: 400;
  margin: 2.4em 0 0.8em;
}
.legal p { color: var(--bone-70); margin: 0 0 1em; font-size: 0.95rem; }
.legal a { border-bottom: 1px solid var(--bone-24); }
.legal a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ---------- preloader ---------- */
.preload {
  position: fixed; inset: 0;
  z-index: 300;
  background: var(--ink);
  display: grid;
  place-content: center;
  gap: 18px;
  justify-items: center;
}
.preload__mark {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.preload__beats { display: flex; gap: 10px; }
.preload__beats i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bone-24);
}
.preload[hidden] { display: none !important; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .grain { animation: none; }
  .hero__scroll::after { animation: none; transform: scaleX(1); }
}

/* ============================================================
   STATEMENT — a full screen of calm, in his own words
   ============================================================ */
#sound {
  min-height: 92svh;
  display: grid;
  align-content: center;
  gap: clamp(26px, 5vh, 60px);
}
.statement__kicker { color: var(--bone-52); }
.statement { display: grid; gap: clamp(4px, 0.8vh, 12px); }
.statement__line {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--bone);
  position: relative;
  padding-left: clamp(22px, 3vw, 54px);
}
.statement__line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: clamp(10px, 1.6vw, 28px);
  height: 1px;
  background: var(--ember);
  opacity: 0.8;
}
.statement__line:nth-child(2) { margin-left: clamp(16px, 4vw, 90px); color: var(--bone-70); }
.statement__line:nth-child(3) { margin-left: clamp(32px, 8vw, 180px); color: var(--bone-52); }
.statement__foot { max-width: 46ch; }

/* ---------- the silence between the records ---------- */
.rel--gap {
  display: grid;
  place-items: center;
  position: relative;
}
.rel__silence {
  color: var(--bone-24);
  background: var(--ink);
  padding: 0 14px;
  letter-spacing: 0.22em;
}

/* ---------- timeline scale ---------- */
.disco__scale {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--bone-52);
  padding-bottom: clamp(14px, 2vh, 24px);
}
.disco__bar {
  flex: 1;
  height: 1px;
  background: var(--bone-12);
  position: relative;
  max-width: 560px;
}
.disco__bar i {
  position: absolute;
  left: 0; top: -1px;
  height: 3px;
  width: 0%;
  background: var(--ember);
}
.disco--static ~ .disco__scale { display: none; }