/* Cubebox Records. Greyscale only, see docs/design.md in cubebox-docs */

/* Latin subsets of the Google Fonts variable files, served from vendor/ (SIL OFL 1.1) */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(vendor/archivo.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(vendor/newsreader.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(vendor/newsreader-italic.woff2) format("woff2"); }

:root {
  --ink: #0a0a0a;
  --coal: #161616;
  --ash: #2b2b2b;
  --smoke: #808080;
  --lead: #555;
  --fog: #b5b5b5;
  --paper: #f3f3f1;
  --line: rgb(243 243 241 / .22);

  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --gutter: clamp(1rem, 3.5vw, 3rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --word: clamp(3.5rem, 15vw, 17rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ash) var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--serif);
  overflow-x: clip;
}
::selection { background: var(--paper); color: var(--ink); }
.light ::selection { background: var(--ink); color: var(--paper); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--gutter); top: -4rem; z-index: 300; background: var(--paper); color: var(--ink); padding: .75rem 1rem; }
.skip:focus { top: 1rem; }

.display {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
}
/* small caps-height labels: the grotesk, not a mono */
.label { font: 700 .7rem/1.4 var(--display); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; }
.num { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.h2 { font-size: clamp(2.4rem, 6vw, 6rem); }
.light { background: var(--paper); color: var(--ink); color-scheme: light; }

.i { width: 1em; height: 1em; flex: none; }
.i--down { rotate: 90deg; }
.i--out { rotate: -45deg; }

/* Buttons: label cell + arrow cell */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 3.1rem;
  padding-left: 1.25rem;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  font: 800 .8rem/1 var(--display);
  font-stretch: 112%;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn__arrow { align-self: stretch; display: grid; place-items: center; padding-inline: .9rem; border-left: 1px solid currentColor; font-size: 1.1rem; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--big { font-size: 1rem; min-height: 4rem; padding-left: 1.75rem; }
.light .btn { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.light .btn:hover { background: var(--paper); color: var(--ink); }

/* Side labels (vertical, with a rule running down) */
.side-label {
  position: absolute;
  top: clamp(2rem, 6vh, 4rem);
  left: max(.5rem, calc(var(--gutter) / 3));
  writing-mode: vertical-rl;
  font-size: .65rem;
  color: var(--fog);
  white-space: nowrap;
}
.side-label::after { content: ""; display: inline-block; inline-size: min(40vh, 22rem); block-size: 1px; background: currentColor; margin-inline-start: 1rem; vertical-align: middle; opacity: .5; }
.light .side-label { color: var(--lead); }

/* Cube-mark pattern; a brighter copy follows the pointer (--x/--y set in JS) */
.pattern {
  position: absolute;
  inset: auto auto 0 0;
  width: 42vw;
  height: 46svh;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 100% at 0 100%, #000 25%, transparent);
}
.pattern::before, .pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(img/mark-pattern.png) 0 0 / 34px 21px repeat;
}
.pattern::before { opacity: .14; }
.pattern::after { opacity: .9; mask-image: radial-gradient(circle 9rem at var(--x, -50%) var(--y, -50%), #000, transparent); }
.pattern--soft { inset: 0; width: auto; height: auto; mask-image: linear-gradient(#000, transparent 70%); opacity: .6; }

/* ---------- Loader ---------- */
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.5rem;
  background: #000; /* matches the video background */
  animation: loader-failsafe 0s 4s forwards; /* if scripts never arrive */
}
.loader__cube { width: min(56vw, 540px); }
.loader__count { font-size: 1.25rem; letter-spacing: .2em; }
@keyframes loader-failsafe { to { visibility: hidden; opacity: 0; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(.75rem, 2.2vw, 1.75rem) var(--gutter);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__mark { display: block; padding-block: .4rem; }
.nav__mark img { width: clamp(52px, 5vw, 72px); }
.nav__menu { display: flex; align-items: center; gap: .6rem; min-height: 44px; font: 800 clamp(1.1rem, 2vw, 1.6rem)/1 var(--display); font-stretch: 112%; text-transform: uppercase; }

/* Two bars fold into a plus on hover; open, the plus turns 45° into the close cross */
.bars { position: relative; width: 1em; height: .72em; transition: rotate .5s var(--ease); }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; right: 0; height: .24em; background: currentColor; transition: rotate .5s var(--ease), translate .5s var(--ease); }
.bars::before { top: 0; }
.bars::after { bottom: 0; }
.nav__menu:is(:hover, :focus-visible) .bars::before, .bars--x::before { translate: 0 .24em; rotate: 90deg; }
.nav__menu:is(:hover, :focus-visible) .bars::after, .bars--x::after { translate: 0 -.24em; }
.bars--x { rotate: 45deg; }
.menu__close:is(:hover, :focus-visible) .bars--x { rotate: 0deg; }
@starting-style { .menu:popover-open .bars--x { rotate: 0deg; } }
/* "Menu" wipes away as the menu opens and back in once it has closed */
.nav__menu-text { transition: clip-path .5s var(--ease) .3s; }
:root:has(#menu:popover-open) .nav__menu-text { clip-path: inset(0 0 0 100%); transition-delay: 0s; }

/* ---------- Menu (popover) ---------- */
/* Fades over the page, then each row slides in from the left behind its own mask */
.menu {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  border: 0;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  display: none;
  grid-template: 1fr auto / minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  opacity: 0;
  transition: opacity .4s var(--ease), display .4s allow-discrete, overlay .4s allow-discrete;
}
.menu:popover-open { display: grid; opacity: 1; }
@starting-style { .menu:popover-open { opacity: 0; } }
.menu__close { position: absolute; top: clamp(.75rem, 2.2vw, 1.75rem); right: var(--gutter); }

.menu__photo { position: relative; justify-self: end; height: min(62vh, 640px); aspect-ratio: 4 / 5; overflow: clip; }
.menu__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0; scale: 1.06;
  transition: opacity .6s var(--ease), scale 1.2s var(--ease);
}
.menu__photo .is-on { opacity: 1; scale: 1; }

.menu__list li { --d: calc(.2s + var(--i) * 60ms); position: relative; overflow: clip; }
.menu__list li::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line);
  transform-origin: left; transition: scale .8s var(--ease) var(--d), background-color .35s var(--ease);
}
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding-block: .25em;
  font: 900 clamp(2rem, min(5.5vw, 8vh), 5rem)/1 var(--display);
  font-stretch: 125%;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  transition: color .35s var(--ease), translate .35s var(--ease);
}
.menu__num { width: 2.2rem; flex: none; }
.menu__word { transition: translate .7s var(--ease) var(--d); }
.menu__sub { white-space: nowrap; }
.menu__num, .menu__sub { opacity: .6; transition: opacity .5s var(--ease) calc(var(--d) + .3s); }
@starting-style {
  .menu:popover-open li::after { scale: 0 1; }
  .menu:popover-open .menu__word { translate: calc(-100% - 3.5rem) 0; }
  .menu:popover-open :is(.menu__num, .menu__sub) { opacity: 0; }
}
/* the hovered link stays white, the rest step back */
.menu__list:has(a:hover, a:focus-visible) a:not(:hover, :focus-visible) { color: var(--smoke); }
.menu__list a:hover, .menu__list a:focus-visible { translate: 1rem 0; }
.menu__list li:has(a:hover, a:focus-visible)::after { background-color: var(--paper); }
.menu__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--fog); }
.menu__foot a { display: inline-block; padding-block: .8rem; }

/* ---------- Hero ---------- */
/* Pinned three-step story. The photo is full-bleed underneath and clipped to a box;
   --open (0 → 1, scrubbed in JS) opens the clip to the whole screen. */
.hero__pin {
  --pt: clamp(5.5rem, 13vh, 8rem);
  --mw: min(58vw, 980px);
  --mh: calc(var(--mw) * .625);
  --mt: calc(var(--pt) + var(--word) * .4);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pt) var(--gutter) 0;
  overflow: clip;
}
.hero__word { position: relative; display: grid; font-size: var(--word); line-height: .78; white-space: nowrap; color: var(--paper); }
.hero__chars { grid-area: 1 / 1; position: relative; }
/* the copy above the photo: where the photo covers the solid word, the letters read through as a tint */
.hero__chars--ghost { z-index: 2; opacity: .55; }
.hero__media {
  --open: 0;
  --side: calc((100% - var(--mw)) / 2);
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--coal);
  clip-path: inset(
    calc(var(--mt) * (1 - var(--open)))
    calc(var(--side) * (1 - var(--open)))
    calc((100% - var(--mt) - var(--mh)) * (1 - var(--open)))
    calc(var(--side) * (1 - var(--open)))
  );
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.hero__img:not([data-step="0"]) { opacity: 0; } /* later photos wait for their step */
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .7)); opacity: var(--open); pointer-events: none; }
/* Layers: the photos, then (steps 2–3) the depth canvas from main.js, which also draws the cube marks;
   .hero__marks is the 2D fallback when WebGL is missing */
.hero__frames { position: absolute; inset: 0; }
.hero__gl, .hero__marks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hero__lines {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(clamp(1.5rem, 5vh, 3rem) + 5rem);
  font-size: clamp(1.9rem, 4.4vw, 4.25rem);
  line-height: 1;
}
html:not(.motion) .hero__lines { mix-blend-mode: difference; color: #fff; } /* all three lines stack over the photo */
.motion .hero__lines { display: grid; overflow: clip; padding-bottom: .06em; }
.motion .hero__line { grid-area: 1 / 1; }
.hero__bar {
  position: absolute;
  z-index: 4;
  inset: auto var(--gutter) clamp(1.5rem, 5vh, 3rem);
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.hero__step { display: none; }
.motion .hero__step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  border: 1px solid var(--line);
}
.hero__step::before { content: ""; width: 1px; height: 1.1rem; background: currentColor; transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { scale: 1 0; } 50% { scale: 1 1; transform-origin: top; } 51% { transform-origin: bottom; } 100% { scale: 1 0; transform-origin: bottom; } }
.hero__step .num { font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.hero__of { color: var(--fog); }
.hero__foot { display: flex; gap: .5rem; margin-left: auto; }
.hero__est { display: grid; align-content: center; padding: .5rem 1.1rem; border: 1px solid var(--line); color: var(--fog); }
.hero__est span { color: var(--paper); }

/* ---------- Roster marquee ---------- */
.roster { position: relative; padding: clamp(6rem, 18vh, 12rem) 0; display: grid; justify-items: center; gap: 3rem; }
.roster__stage { position: relative; width: 100%; display: grid; place-items: center; }
.roster__stage picture { display: contents; }
.roster__logo, .roster__photo { grid-area: 1 / 1; width: min(42vw, 520px); aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.75); }
.roster__rows { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: .1em; font-size: clamp(2.6rem, 8vw, 7.5rem); }
.marquee { overflow: clip; }
.marquee__track { display: flex; width: max-content; }
.marquee__track > span { white-space: pre; padding-right: .3em; color: transparent; -webkit-text-stroke: 1.5px var(--paper); }
/* Hover a name: it fills in and that artist's photo fades in over the video */
.roster__photo { opacity: 0; transition: opacity .5s var(--ease); }
.roster__name { transition: color .3s; }
.roster__name:hover { color: var(--paper); }
.roster__stage:has([data-a="starzgrey"]:hover) .roster__photo[data-a="starzgrey"],
.roster__stage:has([data-a="enharmony"]:hover) .roster__photo[data-a="enharmony"] { opacity: 1; }

/* ---------- About ---------- */
.about { padding: clamp(6rem, 16vh, 11rem) var(--gutter); max-width: 1500px; margin-inline: auto; }
.about__lead { font: 400 clamp(2.1rem, 5.2vw, 5.25rem)/1.04 var(--serif); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; }
.about__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem 4rem; margin-top: clamp(3rem, 8vh, 6rem); max-width: 60rem; margin-left: auto; color: var(--fog); }
.about__cols strong { font-weight: 600; color: var(--paper); }

/* ---------- Mission ---------- */
.mission { padding: 0 var(--gutter) clamp(6rem, 16vh, 11rem); max-width: 1500px; margin-inline: auto; }
.mission .h2 { margin-bottom: clamp(2rem, 5vh, 4rem); }
.row {
  position: relative;
  padding-block: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--ash);
  font: 500 clamp(1.2rem, 2.3vw, 2rem)/1.25 var(--display);
  font-stretch: 100%;
}
.row:first-child { border-top: 0; }
.row:last-child { border-bottom: 1px solid var(--ash); }
.row p { max-width: 38ch; margin-left: auto; transition: translate .5s var(--ease); }
.row::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--paper); scale: 0 1; transform-origin: left; transition: scale .6s var(--ease); }
.row:hover::after { scale: 1 1; }
.row:hover p { translate: -1rem 0; }

/* ---------- Artists ---------- */
.artists { position: relative; padding: clamp(6rem, 16vh, 11rem) var(--gutter) clamp(10rem, 22vh, 15rem); }
.artists__head { max-width: 1100px; margin: 0 auto clamp(3rem, 8vh, 6rem); }
.grid {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 8vw, 8rem);
}
.grid::before { content: ""; position: absolute; left: 50%; top: 4rem; bottom: 0; width: 1px; background: var(--ink); opacity: .25; }
/* name/meta overlay the image via grid stacking so the button's ::after can stretch over the whole card */
.card { position: relative; display: grid; color: var(--paper); background: var(--ink); }
.card > * { grid-area: 1 / 1; }
.card:nth-child(even) { translate: 0 clamp(3rem, 10vw, 8rem); }
.card__media { position: relative; aspect-ratio: 1; overflow: clip; background: var(--ink); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / .45); }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: scale 1.2s var(--ease); }
.card:hover .card__media img { scale: 1.06; }
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .85)); pointer-events: none; }
.card__media--logo { display: grid; place-items: center; }
.card__media--logo img { width: 70%; height: auto; object-fit: contain; }
.card__media--type { display: grid; place-items: center; text-align: center; }
.card__media--type span, .profile__img--type span { font-size: clamp(2rem, 6vw, 5rem); color: transparent; -webkit-text-stroke: 1px var(--smoke); }
.card__cap { align-self: end; z-index: 1; display: grid; gap: .5rem; padding: 1.25rem; }
.card__name { font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1; }
.card__name button { text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.card__name button::after { content: ""; position: absolute; inset: 0; }
.card__name button:focus-visible { outline: 0; }
.card__name button:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 6px; }
.card__meta { color: var(--fog); }
.card:hover .card__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* ---------- Featured ---------- */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(7rem, 18vh, 12rem) var(--gutter);
  overflow: clip;
}
.feature__media { position: relative; padding: clamp(2rem, 6vw, 5rem) 0 0 clamp(1rem, 4vw, 4rem); }
.feature__word { position: absolute; top: 0; left: 0; z-index: 0; font-size: clamp(4rem, 13vw, 13rem); color: transparent; -webkit-text-stroke: 1.5px var(--fog); }
.feature__media img { position: relative; z-index: 1; width: min(100%, 520px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; margin-left: auto; filter: grayscale(1) contrast(1.05); }
.feature__copy { position: relative; display: grid; gap: 1.75rem; justify-items: start; max-width: 34rem; }
.feature__copy > p { color: var(--fog); font-size: 1.2rem; }
.socials { display: flex; }
.socials a { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid var(--ash); margin-left: -1px; font-size: 1.15rem; transition: background .3s, color .3s; }
.socials a:hover { background: var(--paper); color: var(--ink); }

/* ---------- Crew ---------- */
.crew { position: relative; background: var(--coal); padding: clamp(6rem, 16vh, 11rem) var(--gutter); overflow: clip; }
.crew__title { margin: 0 auto clamp(3rem, 10vh, 7rem); text-align: center; }
.collage { position: relative; max-width: 1100px; margin-inline: auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: start; }
.collage figure { position: relative; }
.collage img { width: 100%; filter: grayscale(1) contrast(1.05); }
.collage figure::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .75)); pointer-events: none; }
.collage figcaption { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; display: grid; gap: .3rem; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }
.collage figcaption em { font: italic 600 clamp(1.25rem, 2.2vw, 2rem)/1.05 var(--serif); }
.collage__a { grid-column: 1 / 6; }
.collage__b { grid-column: 7 / 12; margin-top: 12rem; }

/* ---------- Partners ---------- */
.partners { padding: clamp(4rem, 10vh, 7rem) var(--gutter); text-align: center; }
.partners__h { color: var(--lead); margin-bottom: 2rem; }
.partners__list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(2rem, 8vw, 7rem); }
.partners__list img { height: clamp(5rem, 10vw, 8rem); width: auto; filter: grayscale(1) contrast(1.1); opacity: .85; }

/* ---------- Join ---------- */
.join { position: relative; padding: clamp(7rem, 20vh, 13rem) var(--gutter); overflow: clip; display: grid; justify-items: start; }
.join .pattern { inset: 0 0 auto auto; width: 60vw; height: 100%; mask-image: radial-gradient(ellipse at 100% 50%, #000 20%, transparent 70%); }
.join__title { position: relative; font-size: clamp(3.5rem, 13vw, 14rem); line-height: .82; }
.join__copy { position: relative; max-width: 34rem; margin: 2.5rem 0 3rem; color: var(--fog); font-size: 1.2rem; }

/* ---------- Footer ---------- */
.footer { background: #000; padding: clamp(4rem, 10vh, 6rem) var(--gutter) 2rem; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.5rem; max-width: 1100px; margin-inline: auto; }
.footer__h { font-size: 1rem; margin-bottom: .5rem; }
.footer li a, .footer li button { display: inline-block; padding-block: .7rem; font: 400 .95rem/1.4 var(--display); font-stretch: 100%; color: var(--fog); text-decoration: none; transition: color .2s; }
.footer li a:hover, .footer li button:hover { color: var(--paper); }
.footer__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; max-width: 1100px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--ash); color: var(--smoke); }
.footer__bar img { width: 40px; }
.footer__motto { margin-left: auto; }

/* ---------- Artist profile (popover) ---------- */
.profile {
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88svh, 760px);
  padding: 0;
  border: 1px solid var(--ash);
  background: var(--coal);
  color: var(--paper);
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  translate: 0 2rem;
  transition: opacity .45s var(--ease), translate .45s var(--ease), display .45s allow-discrete, overlay .45s allow-discrete;
}
.profile:popover-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); opacity: 1; translate: 0; }
@starting-style { .profile:popover-open { opacity: 0; translate: 0 2rem; } }
.profile::backdrop { background: rgb(0 0 0 / .78); }
/* contain: size so a portrait video can't stretch the row past max-height; the row follows the text instead */
.profile__img { contain: size; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; filter: grayscale(1); background: var(--ink); }
.profile__img--logo, .profile__img--type { display: grid; place-items: center; text-align: center; }
.profile__img--logo img { width: 70%; }
.profile__body { container-type: inline-size; padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; align-content: start; gap: 1.25rem; }
.profile__body > p:not(.label) { color: var(--fog); }
/* sized to the column, not the viewport: one-word names like ENHARMONY (~8.9em) must fit */
.profile__body .h2 { font-size: min(clamp(2rem, 4.5vw, 3.75rem), 11cqi); }
.profile__meta { color: var(--smoke); margin-top: -.5rem; }
.profile__facts { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--ash); font-size: .95rem; }
.profile__facts dt { font: 700 .7rem/1.9 var(--display); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: var(--smoke); }
.profile__facts dd { overflow-wrap: anywhere; }
.profile__close { position: absolute; top: .5rem; right: .5rem; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.75rem; mix-blend-mode: difference; color: #fff; }

/* ---------- Small screens ---------- */
@media (max-width: 800px) {
  :root { --word: clamp(2.5rem, 14vw, 9rem); }
  .hero__pin { --mw: calc(100vw - 2 * var(--gutter)); --mh: min(var(--mw) * 1.25, 52svh); --mt: calc(var(--pt) + var(--word) * .62); }
  .hero__lines { bottom: calc(clamp(1.5rem, 5vh, 3rem) + 4.5rem); }
  .motion .hero__step { display: none; }
  .hero__foot { flex: 1; justify-content: space-between; }
  .hero__est { border: 0; padding: 0; }
  .hero__pin > .pattern { width: 80vw; }
  .roster__logo, .roster__photo { width: 72vw; }
  .grid { grid-template-columns: 1fr; }
  .grid::before { display: none; }
  .card:nth-child(even) { translate: 0; }
  .feature { grid-template-columns: 1fr; }
  .collage { grid-template-columns: repeat(6, 1fr); }
  .collage__a { grid-column: 1 / 6; }
  .collage__b { grid-column: 2 / 7; margin-top: 2rem; }
  .profile:popover-open { grid-template-columns: 1fr; }
  .profile__img { display: none; } /* text only on phones, so a profile fits without scrolling */
  .menu { grid-template-columns: 1fr; }
  .menu__photo, .menu__sub, .menu__foot p { display: none; }
  .footer__motto { margin-left: 0; }
}

/* Keep colour and opacity feedback, drop movement */
@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
  *, *::before, *::after { transition-property: color, background-color, border-color, opacity !important; animation: none !important; }
}