:root {
  --ink: #090a0c;
  --ink-soft: #111318;
  --paper: #e9e5dc;
  --muted: #9c9a95;
  --rust: #d86b46;
  --gold: #c9b77d;
  --blue: #789aa0;
  --line: rgba(233, 229, 220, .16);
  --page: min(100% - 3rem, 1160px);
  --score-shift: 0px;
  --score-tilt: 0deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", Inter, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}
a { color: inherit; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.skip-link {
  position: fixed; z-index: 100; top: .75rem; left: .75rem;
  padding: .65rem 1rem; background: var(--paper); color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute; z-index: 20; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: var(--page); margin: 0 auto; padding: 1.25rem 0;
  border-bottom: 1px solid var(--line); font-size: .78rem; letter-spacing: .08em;
}
.identity { font-family: Georgia, serif; font-size: 1rem; text-decoration: none; letter-spacing: 0; }
nav { display: flex; gap: 1.5rem; }
nav a { color: rgba(233,229,220,.66); text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--paper); }
.header-note { justify-self: end; color: var(--rust); }

.opening { position: relative; min-height: 100svh; overflow: hidden; border-bottom: 1px solid var(--line); }
.opening::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,10,12,.96) 0%, rgba(9,10,12,.73) 38%, rgba(9,10,12,.05) 74%), linear-gradient(0deg, rgba(9,10,12,.78), transparent 55%);
  pointer-events: none;
}
.opening-image {
  position: absolute; inset: 0; display: block; margin: 0; overflow: hidden;
}
.opening-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) contrast(1.15) brightness(.68); transform: scale(1.015);
}
.opening-copy {
  position: absolute; z-index: 2;
  left: max(1.5rem, calc((100% - 1160px) / 2)); top: 25%;
  width: min(29rem, calc(100% - 3rem));
}
.eyebrow {
  margin: 0 0 1rem; color: var(--gold); font-size: .75rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase;
}
h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; }
.intro { max-width: 26rem; margin: 1.5rem 0 0; color: rgba(233,229,220,.7); }
.margin-note {
  position: absolute; z-index: 2;
  right: max(1.5rem, calc((100% - 1160px) / 2)); bottom: 8%; margin: 0;
  color: rgba(233,229,220,.58); font-family: Georgia, serif; font-style: italic; text-align: right;
}
.down { position: absolute; z-index: 3; left: 50%; bottom: 2rem; color: var(--rust); font-size: 1.4rem; text-decoration: none; }

.improvisation, .traces { width: var(--page); margin: 0 auto; padding: 9rem 0; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 5rem; }
.section-heading .eyebrow { margin: 0; }
.section-heading h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.2; }

.score {
  position: relative; height: 15rem; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(var(--score-tilt)); transition: transform 650ms ease;
}
.staff { position: absolute; left: 0; right: 0; height: 1px; background: rgba(233,229,220,.2); }
.staff-1 { top: 26%; } .staff-2 { top: 38%; } .staff-3 { top: 50%; } .staff-4 { top: 62%; } .staff-5 { top: 74%; }
.note {
  position: absolute; width: .95rem; height: .7rem; border-radius: 50%; background: var(--rust);
  transform: translateY(var(--score-shift)) rotate(-16deg);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), background 450ms ease;
}
.note::after { content: ""; position: absolute; left: .78rem; bottom: .3rem; width: 1px; height: 3.3rem; background: currentColor; }
.note-1 { left: 8%; top: 47%; } .note-2 { left: 23%; top: 35%; } .note-3 { left: 40%; top: 59%; }
.note-4 { left: 58%; top: 23%; } .note-5 { left: 76%; top: 47%; } .note-6 { left: 91%; top: 35%; }
.modes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0; }
.mode {
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 10rem;
  background: transparent; color: var(--muted); cursor: pointer; font-size: .82rem;
}
.mode:hover, .mode:focus-visible, .mode.active { border-color: var(--gold); color: var(--ink); background: var(--gold); outline: none; }
.mode-text { display: grid; grid-template-columns: 1fr 2fr; }
.mode-number { color: var(--rust); font-family: Georgia, serif; font-size: 1.5rem; }
.mode-text p { max-width: 35rem; margin: 0; font-family: Georgia, serif; font-size: 1.12rem; }
.sound-material {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;
  width: 76%; margin: 5rem 0 0 auto;
}
.sound-material figure { position: relative; margin: 0; overflow: hidden; background: var(--ink-soft); }
.sound-material img { display: block; width: 100%; height: 18rem; object-fit: cover; filter: saturate(.55) contrast(1.2) brightness(.72); }
.stage-photo { transform: translateY(3rem) rotate(1.5deg); }
.stage-photo img { filter: sepia(.2) grayscale(.35) contrast(1.2) brightness(.75); }
.sound-material figcaption, .archive-photo figcaption {
  position: absolute; right: .8rem; bottom: .65rem; left: .8rem;
  color: rgba(233,229,220,.68); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}

.traces { border-top: 1px solid var(--line); }
.trace-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trace-card { min-height: 23rem; padding: 2rem; background: var(--ink); transition: background 300ms ease; }
.trace-card:hover { background: var(--ink-soft); }
.trace-card span { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.trace-card h3 { margin-top: 4rem; font-size: 1.65rem; }
.trace-card p { max-width: 19rem; margin: 1.2rem 0 0; color: rgba(233,229,220,.64); }
.card-music { grid-column: span 5; }
.card-art { grid-column: span 3; transform: translateY(3rem); }
.card-unknown { grid-column: span 4; transform: translateY(-2rem); }

.archive {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
  width: var(--page); min-height: 115svh; margin: 0 auto; padding: 10rem 0;
}
.archive-crowd {
  position: absolute; inset: 15% -12vw 10% 24%; z-index: 0;
  background: linear-gradient(90deg, var(--ink), transparent 30%, rgba(9,10,12,.2)), url("assets/photos/crowd-light.webp") center / cover no-repeat;
  filter: grayscale(.2) saturate(.55) contrast(1.12) brightness(.4);
  clip-path: polygon(7% 0, 100% 8%, 93% 100%, 0 89%);
}
.archive-photo { position: relative; z-index: 2; grid-column: 1 / 6; margin: 0; transform: rotate(-1.5deg); }
.archive-photo img { display: block; width: 100%; max-height: 70svh; object-fit: cover; filter: saturate(.68) contrast(1.08) brightness(.8); }
.archive-copy {
  position: relative; z-index: 3; grid-column: 7 / 13; padding: 2.5rem;
  border-left: 1px solid var(--gold); background: rgba(9,10,12,.76); backdrop-filter: blur(10px);
}
.archive-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; }
.archive-copy > p:last-child { max-width: 30rem; color: rgba(233,229,220,.68); }

.closing { display: flex; justify-content: space-between; align-items: end; width: var(--page); min-height: 55svh; margin: 0 auto; padding: 8rem 0 4rem; }
.closing p { margin: 0; font-family: Georgia, serif; font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.3; }
.top-button { padding: .4rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; letter-spacing: .08em; }
.top-button:hover, .top-button:focus-visible { color: var(--gold); border-color: var(--gold); }
footer { display: grid; grid-template-columns: repeat(3, 1fr); width: var(--page); margin: 0 auto; padding: 1.25rem 0 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
footer span:nth-child(2) { text-align: center; } footer span:last-child { text-align: right; }

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 800ms ease, transform 800ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  :root { --page: min(100% - 2rem, 1160px); }
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .opening::after { background: linear-gradient(0deg, rgba(9,10,12,.97) 0%, rgba(9,10,12,.72) 38%, rgba(9,10,12,.06) 72%); }
  .opening-copy { left: 1rem; top: auto; bottom: 5.5rem; width: calc(100% - 2rem); }
  .opening-copy .intro { margin-top: 1rem; }
  .margin-note { display: none; }
  .down { right: 1rem; bottom: 1.25rem; left: auto; }
  .section-heading, .mode-text { grid-template-columns: 1fr; gap: 1rem; }
  .improvisation, .traces { padding: 6rem 0; }
  .section-heading { margin-bottom: 3rem; }
  .trace-grid { display: block; background: none; border: 0; }
  .trace-card { min-height: auto; margin-bottom: 1px; border: 1px solid var(--line); }
  .card-art, .card-unknown { transform: none; }
  .sound-material { grid-template-columns: 1fr; width: 100%; margin-top: 4rem; }
  .sound-material img { height: 15rem; }
  .stage-photo { width: 70%; margin-left: auto !important; transform: translateY(-1rem) rotate(1.5deg); }
  .archive { display: block; min-height: auto; padding: 7rem 0; }
  .archive-crowd { inset: 14% -1rem 8% 18%; }
  .archive-photo { width: 72%; }
  .archive-copy { width: 90%; margin: -4rem 0 0 auto; padding: 1.5rem; }
  .closing { display: grid; gap: 4rem; align-content: center; }
  footer { grid-template-columns: 1fr; gap: .35rem; }
  footer span:nth-child(2), footer span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}