/* ───────── Tokens ───────── */
:root {
  --ink: #0a0a0a;
  --ink-2: #161616;
  --bone: #f2f2f2;
  --bone-dim: rgba(242, 242, 242, 0.5);
  --line: rgba(242, 242, 242, 0.12);
  --accent: #ffffff;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease-film: cubic-bezier(0.6, 0.14, 0, 1);   /* Inherited's signature ease */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);

  --gutter: clamp(16px, 2vw, 28px);
  --ui: 13px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.defs { position: absolute; width: 0; height: 0; }

/* Small UI text, sentence case */
.meta, .frame, .tabs, .menu__foot, .footer__row, .deck__index, .timeline, figcaption {
  font-size: var(--ui); letter-spacing: 0;
}

/* Section names: a quiet vertical label on the left edge */
.side-label {
  position: absolute; z-index: 1; left: var(--gutter); top: 50%;
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%);
  display: flex; align-items: center; gap: .9rem;
  font-size: var(--ui); color: var(--bone-dim);
}
.side-label::before { content: ""; width: 1px; height: 48px; background: var(--line); }
.side-label[data-reveal] { transform: rotate(180deg) translateY(calc(50% - 20px)); }
.side-label[data-reveal].is-in { transform: rotate(180deg) translateY(50%); }
.meta { margin: 0 0 2rem; color: var(--bone-dim); }

/* ───────── Photos: true black & white, no grading ───────── */
.photo { position: relative; overflow: hidden; background: var(--ink-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Loader ───────── */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s var(--ease-film) .2s;
}
.loader__word { display: flex; gap: .6em; font-size: var(--ui); font-size: var(--ui); }
.loader__word span { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.loader.is-on .loader__word span { opacity: 1; transform: none; }
.loader.is-on .loader__word span:nth-child(2) { transition-delay: .12s; }
.loader.is-on .loader__word span:nth-child(3) { transition-delay: .24s; }
.loader.is-done { clip-path: inset(0 0 100% 0); }

/* ───────── Frame navigation (Inherited) ───────── */
.frame::before, .frame::after { /* soft scrims keep corner text legible over bright images */
  content: ""; position: fixed; left: 0; right: 0; z-index: 59; pointer-events: none; height: 90px;
}
.frame::before { top: 0; background: linear-gradient(rgba(10,10,10,.6), transparent); }
.frame::after { bottom: 0; background: linear-gradient(transparent, rgba(10,10,10,.6)); }
@media (max-width: 860px) { .frame::after { display: none; } }
.frame > * { position: fixed; z-index: 60; text-shadow: 0 0 16px rgba(10,10,10,.5); }
.frame__tl { top: var(--gutter); left: var(--gutter); font-weight: 700; letter-spacing: .3em; }
.frame__tc { top: var(--gutter); left: 50%; transform: translateX(-50%); }
.frame__tr { top: var(--gutter); right: var(--gutter); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.frame__bl { bottom: var(--gutter); left: var(--gutter); display: flex; gap: 1.25rem; }
.frame__br { bottom: var(--gutter); right: var(--gutter); color: var(--bone-dim); }
.frame__br b { color: var(--bone); font-weight: 400; }
.frame a { transition: color .4s; }
.frame__tr a { color: var(--bone-dim); }
.frame a:hover, .frame__tr a.is-active { color: var(--accent); }
.frame__tr a.is-active::before { content: "● "; font-size: 7px; vertical-align: 2px; }

.menu-btn {
  display: none; align-items: center; gap: 10px;
  top: calc(var(--gutter) - 6px); right: var(--gutter);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--bone); font: inherit; font-size: var(--ui);
}
.menu-btn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transition: transform .6s var(--ease-film); }
body.menu-open .menu-btn__dot { transform: scale(1.6); }

.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--gutter) * 3) var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 1s var(--ease-film), visibility 0s 1s;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 1s var(--ease-film); }
.menu { align-items: center; text-align: center; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block; padding: .1em 0;
  font-size: clamp(3rem, 11vw, 7rem); font-weight: 300; font-style: italic;
  line-height: 1.05; letter-spacing: -.03em;
  color: var(--bone-dim);
  transform: translateY(105%); transition: transform 1s var(--ease-film), color .4s;
}
body.menu-open .menu__list a { transform: none; }
body.menu-open .menu__list li:nth-child(2) a { transition-delay: .06s; }
body.menu-open .menu__list li:nth-child(3) a { transition-delay: .12s; }
.menu__list a:hover, .menu__list a.is-active { color: var(--bone); }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 3.5rem; color: var(--bone-dim); }

/* ───────── Hero ───────── */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.hero__media { position: absolute; inset: -8% 0 0 0; transform: scale(1.15); transition: transform 2.4s var(--ease-film); }
body.is-ready .hero__media { transform: scale(1); }
.hero__img { object-position: 62% 30%; }
.hero__media::before { /* fade into the page at the bottom */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, transparent 20%, transparent 60%, var(--ink) 100%);
}
.hero { flex-direction: column; justify-content: flex-end; }
.hero__name {
  position: relative; z-index: 2; width: 100%;
  margin: 0 0 1.5rem;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between;
  font-size: clamp(7rem, 33vw, 38rem); font-weight: 800; font-stretch: 125%;
  line-height: .78; letter-spacing: -.02em;
}
.mask { display: inline-block; overflow: hidden; padding-top: .06em; }
.hero__listen {
  position: relative; z-index: 2; width: 100%;
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: calc(var(--gutter) * 2.5); padding: 0 var(--gutter);
  font-size: clamp(14px, 1.2vw, 16px);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--ease-out) 1.3s, transform 1.2s var(--ease-film) 1.3s;
}
body.is-ready .hero__listen { opacity: 1; transform: none; }
.hero__listen a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-film); }
.hero__listen a:hover { background-size: 100% 1px; }
/* the corner socials repeat these links, so hide them while the hero is on screen */
.frame__bl { transition: opacity .5s; }
body.at-hero .frame__bl { opacity: 0; pointer-events: none; }
.char { display: inline-block; transform: translateY(105%); transition: transform 1.6s var(--ease-film); }
body.is-ready .char { transform: none; }
body.is-ready .mask:nth-child(2) .char { transition-delay: .1s; }
body.is-ready .mask:nth-child(3) .char { transition-delay: .2s; }

/* ───────── About: text only, negative space ───────── */
.about { position: relative; overflow: hidden; padding: clamp(10rem, 22vw, 18rem) var(--gutter); }
.about__body { position: relative; z-index: 1; }
/* Live photo as a faded backdrop: dissolves into black on every edge */
.about__bg {
  position: absolute; z-index: 0; inset: 0 40% 0 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 45% 50%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 65% at 45% 50%, #000 25%, transparent 75%);
}
.about__bg img {
  width: 100%; height: 120%; margin-top: -10%; object-fit: cover; object-position: 42% 35%;
  filter: grayscale(1) contrast(1.1);
  opacity: .32;
}
.about__bg[data-reveal="fade"] { opacity: 0; transform: scale(1.06); transition: opacity 2.6s var(--ease-out), transform 3s var(--ease-film); }
.about__bg[data-reveal="fade"].is-in { opacity: 1; transform: none; }
.about__body { margin-left: auto; width: min(100%, 38rem); margin-right: clamp(0px, 8vw, 9rem); }
.about__lead {
  margin: 0 0 1.5rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 400;
  line-height: 1.3; letter-spacing: -.01em;
}
.about__more { margin: 0 0 clamp(4rem, 8vw, 6rem); color: var(--bone-dim); line-height: 1.6; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; margin: 0; }
.facts div { padding-top: .8rem; border-top: 1px solid var(--line); }
.facts dt { font-size: var(--ui); color: var(--bone-dim); margin-bottom: .3rem; }
.facts dd { margin: 0; }

/* ───────── Live: looping performance clip ───────── */
.live { position: relative; padding: clamp(8rem, 16vw, 14rem) var(--gutter) clamp(6rem, 12vw, 10rem) clamp(var(--gutter), 8vw, 9rem); }
.live__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 2 / 1; border-radius: 10px;
  background: var(--ink-2) url("video/dayere-poster.jpg") center / cover;
  cursor: pointer;
}
.live__video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;                       /* the link handles clicks, never the player */
  transition: transform 1.6s var(--ease-film);
}
/* never show a native play/start button, even where autoplay is blocked */
.live__video::-webkit-media-controls,
.live__video::-webkit-media-controls-start-playback-button,
.live__video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.live__frame:hover .live__video { transform: scale(1.025); }
.live__cue {
  position: absolute; right: 16px; bottom: 14px;
  padding: .45rem .8rem; border-radius: 999px;
  background: rgba(10,10,10,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--ui); color: var(--bone);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-film);
}
.live__frame:hover .live__cue, .live__frame:focus-visible .live__cue { opacity: 1; transform: none; }
.live__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.25rem; }
.live__title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -.02em; }
.live__meta { margin: 0; font-size: var(--ui); color: var(--bone-dim); }
@media (hover: none) { .live__cue { opacity: 1; transform: none; } }

/* ───────── Shared bits ───────── */
/* Drawn arrow (never turns into an emoji on phones); inherits the text colour */
.arr {
  display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: -.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s var(--ease-film);
}
.arr--up { transform: rotate(-45deg); }
a:hover > .arr:not(.arr--up), .live__frame:hover .arr { transform: translate(2px, -2px); }
.tabs { display: grid; grid-template-columns: max-content max-content; gap: .4rem 3rem; margin: 0 0 3rem; }
.tabs span:nth-child(even) { color: var(--bone-dim); }
.footer a, .frame__bl a, .song__links a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--ease-film), color .4s;
}
.footer a:hover, .frame__bl a:hover, .song__links a:hover { background-size: 100% 1px; color: var(--accent); }

/* ───────── Music: minimal pinned stage ───────── */
.music { position: relative; }
.deck { position: relative; height: calc(var(--n, 10) * 90svh + 100svh); }
.deck__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: calc(var(--gutter) * 4) var(--gutter) calc(var(--gutter) * 5) clamp(var(--gutter), 8vw, 9rem);
}
.deck__cover { position: relative; z-index: 1; width: min(34vw, 54svh); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.deck__cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(100% 0 0 0); transform: scale(1.12);
  transition: clip-path 1.1s var(--ease-film), transform 1.6s var(--ease-film);
}
.deck__cover img.is-active { clip-path: inset(0 0 0 0); transform: none; z-index: 1; }
.deck__cover { display: block; transition: transform .8s var(--ease-film); }
.deck__cover:hover { transform: scale(1.02); }
.song__title a { transition: opacity .4s; }
.song__title a:hover { opacity: .7; }
.deck__info { position: relative; z-index: 1; }
.deck__index { margin: 0 0 1.5rem; color: var(--bone-dim); }
.deck__index b { color: var(--accent); font-weight: 400; }
.songs { position: relative; height: clamp(17rem, 46svh, 26rem); }
.song { position: absolute; inset: 0; pointer-events: none; }
.song.is-active { pointer-events: auto; }
.song .m { display: block; overflow: hidden; padding-bottom: .06em; }
.song .m > * { display: block; transform: translateY(110%); transition: transform .9s var(--ease-film); }
.song.is-active .m > * { transform: none; transition-duration: 1.3s; }
.song.is-active .m:nth-child(2) > * { transition-delay: .06s; }
.song.is-active .song__tabs .m > * { transition-delay: .14s; }
.song.is-active .song__links .m > * { transition-delay: .22s; }
.song__badge {
  margin: 0 0 .9rem;
  font-size: var(--ui); color: var(--accent);
}
.song__badge .m > span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); vertical-align: 1px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }
.song__title {
  margin: 0 0 1.75rem;
  font-size: clamp(2.2rem, 5.5vw, 6rem); font-weight: 400;
  line-height: 1; letter-spacing: -.035em; white-space: nowrap;
}
.song__tabs { margin: 0 0 2rem; }
.song__tabs .tabs { margin: 0; }
.song__links .m > span { display: flex; gap: 1.75rem; font-size: var(--ui); }

.timeline {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) * 3.5);
  display: flex; align-items: flex-end; gap: 0;
  border-bottom: 1px solid var(--line);
}
.timeline li { flex: 1; position: relative; }
.timeline button {
  display: block; width: 100%; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; color: var(--bone-dim); font: inherit; letter-spacing: inherit; text-align: left;
}
.timeline button::before { /* tick */
  content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 8px;
  background: var(--bone-dim); transition: height .6s var(--ease-film), background .4s;
}
.timeline button.is-active::before { height: 22px; background: var(--accent); }
.timeline button.is-past::before { background: var(--bone); }
.timeline .year { position: absolute; left: 6px; bottom: 12px; white-space: nowrap; }
.timeline__fill { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ───────── Footer ───────── */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: var(--gutter) var(--gutter) calc(var(--gutter) * 3.5); }
.footer__row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; }
.footer__row--small { color: var(--bone-dim); }
.footer__name {
  position: relative; z-index: 1; margin: 2rem 0 1rem;
  display: flex; justify-content: space-between;
  font-size: clamp(7rem, 33vw, 38rem); font-weight: 800; font-stretch: 125%;
  line-height: .78; letter-spacing: -.02em;
}

/* ───────── Scroll reveals ───────── */
[data-reveal] {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-film);
  transition-delay: var(--d, 0s);
}
[data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--ease-film); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* ───────── Mobile ───────── */
@media (max-width: 860px) {
  .frame__tc, .frame__tr, .frame__bl, .frame__br { display: none; }
  .menu-btn { display: flex; }
  .about__body { margin-right: 0; }
  .live { padding-left: var(--gutter); }
  .live__frame { aspect-ratio: 4 / 3; }
  .side-label, .side-label[data-reveal], .side-label[data-reveal].is-in {
    position: static; writing-mode: horizontal-tb; transform: none; margin: 0 0 2.5rem;
  }
  .side-label::before { width: 32px; height: 1px; }
  .deck__label { margin-bottom: 0; }
  .about__bg { inset: 0; }
  .about__bg img { opacity: .2; }
}

@media (max-width: 640px) {
  .deck__stage { grid-template-columns: 1fr; align-content: center; gap: 1.5rem; padding: calc(var(--gutter) * 5) var(--gutter) calc(var(--gutter) * 5); }
  .deck__cover { width: min(58vw, 34svh); }
  .songs { height: 15rem; }
  .song__title { font-size: clamp(1.8rem, 8.5vw, 3rem); margin-bottom: 1rem; }
  .song__tabs { margin-bottom: 1.25rem; }
  .timeline .year { display: none; }
  .timeline { bottom: calc(var(--gutter) * 1.5); }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
  [data-reveal], [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: none; }
}