/* ÆMY NIAFELIZ — v2 look, taken from the red concept picture she liked:
   deep maroon ground with a painterly grain, high-contrast serif display type (Playfair),
   a light geometric sans for the small text (Jost), handwritten accents (Caveat), thin outlined
   buttons with an arrow, brush strokes as colour, photos with brushed edges.
   Plain CSS, no build step. Motion lives in js/v2.js, the page transition in js/brush.js. */

/* ---------- fonts (local) ---------- */
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-italic-var.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --maroon: #3F090D;
  --maroon-2: #55101A;
  --maroon-deep: #2B0508;
  --cream: #F3E7D6;
  --cream-2: #D9C6AE;
  --orange: #E8772C;
  --yellow: #F0B33A;
  --pink: #E23F7A;
  --blue: #1D4B9E;
  --blue-deep: #12336F;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;
  --gutter: clamp(18px, 5vw, 80px);
  --brush: var(--maroon);
  --ease: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--maroon); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font: 400 17px/1.6 var(--sans);
  color: var(--cream);
  background: var(--maroon);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* art and music pages: a real painted ground instead of flat maroon (his ChatGPT picture, tiled by mirroring
   so it has no seam). The home page keeps the flat colour: its picture is the page. */
body.painted { background: #37040A url("../img/ui/ground.webp") center top / 1024px auto repeat; }
/* the drag: one fast blue and orange brush drag laid behind the top of a few sections, edges faded out */
.s { isolation: isolate; }
.drag {
  position: absolute; z-index: -1; pointer-events: none; left: -8%; right: -8%; top: 0; height: clamp(300px, 40vw, 620px);
  background: url("../img/ui/drag.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.drag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #37040A, transparent 18%, transparent 82%, #37040A); }
@media (max-width: 899px) { .drag { height: 62vw; background-image: url("../img/ui/drag-1024.webp"); } }
/* the painterly grain of the picture, over everything, very light */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: url("../img/ui/grain.png") repeat; background-size: 512px;
  opacity: .085; mix-blend-mode: soft-light;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { position: relative; z-index: 2; }

/* ---------- type ---------- */
.d { font-family: var(--serif); font-weight: 900; line-height: .95; letter-spacing: -.01em; }
.d-xl { font-size: clamp(64px, 13vw, 210px); line-height: .88; }
.d-l { font-size: clamp(44px, 7.5vw, 120px); line-height: .92; }
.d-m { font-size: clamp(30px, 4vw, 60px); }
.d i, .d em, .it { font-style: italic; font-weight: 700; }
.hand { font: 600 clamp(22px, 2.6vw, 38px)/1.1 var(--hand); color: var(--pink); transform: rotate(-3deg); display: inline-block; }
.hand.orange { color: var(--orange); }
.hand.yellow { color: var(--yellow); }
.hand.blue { color: #7FA3E6; }
.eb { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cream-2); }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 46ch; }
.prose { font: 400 clamp(17px, 1.3vw, 19px)/1.7 var(--serif); max-width: 62ch; }
.prose p + p { margin-top: 1.2em; }
.prose.big { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.35; font-weight: 400; max-width: 30ch; }
.split-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } /* room for descenders inside the mask */
.rule { border: 0; border-top: 1px solid rgba(243, 231, 214, .22); margin: 0; }

/* ---------- buttons (the outlined ones from the picture) ---------- */
.btn-o {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 54px; padding: 0 22px 0 24px;
  border: 1px solid rgba(243, 231, 214, .8);
  color: var(--cream);
  font: 500 14px/1 var(--sans); letter-spacing: .12em;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn-o::after { content: "→"; font-family: var(--sans); font-size: 20px; line-height: 1; transition: transform .35s var(--ease); }
.btn-o:hover { background: var(--cream); color: var(--maroon); }
.btn-o:hover::after { transform: translateX(4px); }
.btn-o.on-cream { border-color: rgba(63, 9, 13, .8); color: var(--maroon); }
.btn-o.on-cream:hover { background: var(--maroon); color: var(--cream); }
.btn-o.on-blue { border-color: rgba(243, 231, 214, .8); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  color: var(--cream);
  transition: background .4s, backdrop-filter .4s;
}
.nav.solid { background: rgba(43, 5, 8, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav .mark { display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); }
.nav .mark b { font-weight: 900; font-size: 24px; letter-spacing: .01em; }
.nav .mark i { font-style: italic; font-weight: 700; font-size: 18px; color: var(--cream-2); }
.nav .links { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); font: 400 15px/1 var(--sans); letter-spacing: .1em; }
.nav .links a { position: relative; padding: 8px 0; }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.nav .links a:hover::after, .nav .links a.on::after { transform: scaleX(1); }
.nav .ig { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1 var(--sans); letter-spacing: .08em; }
.nav .ig svg { width: 22px; height: 22px; }
.menu-btn { display: none; margin-left: auto; font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 14px 0 14px 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--maroon-deep); color: var(--cream);
  display: grid; align-content: end; gap: 4px;
  padding: 0 var(--gutter) 12vh;
  transform: translateY(101%);
  visibility: hidden; /* out of the tab order while closed */
  transition: transform .6s var(--ease), visibility 0s .6s;
}
html.menu-open .menu { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
.menu a { font: 900 clamp(40px, 11vw, 80px)/1.05 var(--serif); }
.menu a.soon { color: var(--cream-2); font-weight: 400; font-style: italic; }
.menu .eb { margin-bottom: 18px; }

/* "More" dropdown on desktop */
.more { position: relative; }
.more-lbl { display: inline-block; padding: 8px 0; cursor: default; }
.more-lbl span { display: inline-block; margin-left: 6px; font-size: 11px; transform: translateY(-1px); }
.more ul {
  position: absolute; top: 100%; left: -18px; margin: 8px 0 0; padding: 14px 0; list-style: none;
  min-width: 230px;
  background: rgba(43, 5, 8, .96); border: 1px solid rgba(243, 231, 214, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.more:hover ul, .more:focus-within ul { opacity: 1; visibility: visible; transform: none; }
.more li { padding: 10px 20px; display: flex; justify-content: space-between; gap: 18px; font-size: 14px; letter-spacing: .06em; }
.more li small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); }

/* ---------- brush overlay (canvas; see js/brush.js) ---------- */
#brush { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9500; pointer-events: none; display: none; }
html.brushing #brush { display: block; background: var(--brush); }

/* ---------- decorative strokes cropped from the picture ---------- */
.stroke { position: absolute; pointer-events: none; z-index: 0; }
.stroke img { width: 100%; height: 100%; object-fit: cover; }
.stroke.fade-round { -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%); }
.stroke.fade-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.stroke.fade-y { -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }

/* photos with a brushed edge */
.brushed { position: relative; }
.brushed img { -webkit-mask-image: url("../img/ui/edge-1.png"); mask-image: url("../img/ui/edge-1.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; width: 100%; height: 100%; object-fit: cover; }
.brushed.tall img { -webkit-mask-image: url("../img/ui/edge-2.png"); mask-image: url("../img/ui/edge-2.png"); }
.brushed.wide img { -webkit-mask-image: url("../img/ui/edge-3.png"); mask-image: url("../img/ui/edge-3.png"); }

/* ---------- sections ---------- */
.s { position: relative; padding: clamp(84px, 11vw, 170px) var(--gutter); overflow: clip; } /* clip, not hidden: sticky children keep working */
.s.deep { background: var(--maroon-deep); }
.s.blue { background: var(--blue-deep); }
.s.cream { background: var(--cream); color: var(--maroon); }
.s.cream .eb { color: #7A4A4A; }
.s.cream .rule { border-color: rgba(63, 9, 13, .18); }
.s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: clamp(40px, 6vw, 96px); position: relative; z-index: 1; }
.s-head .eb { margin-bottom: 20px; display: block; }
.s-head .hand { margin-top: 16px; }
.rv { will-change: transform, opacity; }
.z { position: relative; z-index: 1; }

/* ---------- HOME: the picture is the page ---------- */
/* the picture fills the screen edge to edge. It is his widescreen ChatGPT picture (hero-wide.jpg, 1673 x 940,
   19 Sep). The box keeps the picture's own shape, so the controls below (in cqw = % of the picture's width)
   always sit on the paint; a screen with a different shape trims a few px at the sides or top/bottom. */
.stage-wrap { position: relative; background: var(--maroon); height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stage {
  position: relative; flex: none; width: max(100%, calc(100svh * (1673 / 940))); aspect-ratio: 1673 / 940;
  container-type: inline-size;
}
.stage > picture, .stage > img, .stage picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* measured on the picture: the name ends at y 391, the song rows sit at y 632, 708 and 783, x 111 */
.stage-btns { position: absolute; left: 5.5cqw; top: 25.5cqw; display: flex; gap: 1.2cqw; }
.stage-btns .btn-o { min-height: 3.1cqw; padding: 0 1.3cqw 0 1.6cqw; font-size: 1cqw; letter-spacing: .12em; gap: 2cqw; }
.stage-btns .btn-o::after { font-size: 1.3cqw; }
.stage-song { position: absolute; left: 6.2cqw; width: 17cqw; height: 2.9cqw; border-radius: 4px; }
.stage-song:hover { background: rgba(243, 231, 214, .08); }
.stage-song.s1 { top: 37.2cqw; }
.stage-song.s2 { top: 41.7cqw; }
.stage-song.s3 { top: 46.2cqw; }
.home-nav { padding-top: 26px; }
.home-nav .links { font-size: 16px; }
.stage-hint { position: absolute; right: 3cqw; bottom: 2.2cqw; font: 500 .75cqw/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 231, 214, .75); display: flex; align-items: center; gap: .8cqw; }
.stage-hint i { width: 1px; height: 2.8cqw; background: currentColor; display: block; }
.home-under { display: none; }
.home-contact { padding: clamp(64px, 8vw, 120px) var(--gutter); }

/* ---------- rows (contact, credits) ---------- */
.rows { border-top: 1px solid rgba(243, 231, 214, .2); }
.row { display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(243, 231, 214, .2); }
.row .v { font: 700 clamp(20px, 2.2vw, 30px)/1.15 var(--serif); }
.row .v a:hover { color: var(--yellow); }
.s.cream .rows, .s.cream .row { border-color: rgba(63, 9, 13, .18); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 34px; font-size: 13px; color: var(--cream-2); }
.lang { display: flex; gap: 6px; font: 500 12px/1 var(--sans); letter-spacing: .16em; }
.lang a { padding: 12px 6px; }
.row .v a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.lang a.on { text-decoration: underline; text-underline-offset: 5px; }
.lang a:not(.on) { opacity: .55; }

/* ---------- ART: hero ---------- */
.hero-art { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: var(--gutter); padding-top: clamp(110px, 16vh, 160px); overflow: hidden; }
.hero-art .copy { display: grid; gap: 22px; align-content: center; position: relative; z-index: 1; }
.hero-art .copy .hand { margin: -6px 0 6px 8px; }
.hero-art .pic { position: relative; }
.hero-art .pic .brushed { aspect-ratio: 5 / 4; }
.hero-art .stroke.a { width: 120%; height: 60%; left: -12%; bottom: -18%; z-index: 0; }
.hero-art .stroke.b { width: 60%; height: 90%; right: -18%; top: -14%; opacity: .9; }
.hero-art .cap { position: absolute; left: 6%; bottom: -8px; display: grid; gap: 4px; font: 400 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-2); }
.hero-art .cap b { color: var(--cream); font-weight: 500; }

/* ---------- about (her printed bio) ---------- */
.about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); align-items: start; }
.about .portrait { position: sticky; top: 14vh; }
.about .portrait .brushed { aspect-ratio: 4 / 5; }
.about .portrait .hand { position: absolute; right: -4%; bottom: 4%; }
.about .text { display: grid; gap: 28px; }

/* ---------- the wall (gallery, walked along) ---------- */
/* base = a readable grid (phones, reduced motion, no script). The script adds .horizontal
   only when it has pinned the track, so nothing can ever be clipped out of reach. */
.wall { overflow: hidden; }
.wall-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; align-items: start; }
.wall-head, .wall-end { grid-column: 1 / -1; }
.wall-head .eb { display: block; margin-bottom: 20px; }
.wall-head p { margin-top: 26px; max-width: 34ch; }
.piece { position: relative; }
.piece.wide { grid-column: span 2; }
.wall.horizontal { padding: 0; }
.wall.horizontal .wall-track { display: flex; align-items: center; gap: clamp(48px, 7vw, 140px); height: 100vh; height: 100svh; padding: 0 var(--gutter); width: max-content; }
.wall.horizontal .wall-head { flex: none; width: min(70vw, 720px); padding-right: 6vw; }
.wall.horizontal .piece { flex: none; width: clamp(240px, 32vw, 540px); }
.wall.horizontal .piece.tall { width: clamp(200px, 26vw, 440px); }
.wall.horizontal .piece.wide { width: clamp(280px, 40vw, 680px); grid-column: auto; }
.wall.horizontal .piece:nth-child(3n+1) { margin-top: 6vh; }
.wall.horizontal .piece:nth-child(3n) { margin-top: -6vh; }
.wall.horizontal .wall-end { flex: none; width: 30vw; margin-top: 0; }
.piece button { display: block; width: 100%; text-align: left; }
.piece img { width: 100%; box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .7); transition: transform .6s var(--ease); }
.piece:hover img { transform: scale(1.025); }
.piece .tag { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.piece .tag b { font-weight: 500; }
.piece .tag em { font-style: normal; color: var(--yellow); }
.wall-end { display: grid; align-content: center; gap: 22px; margin-top: 24px; }

/* ---------- murals ---------- */
.murals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gutter); align-items: start; position: relative; z-index: 1; }
.murals-fig { position: sticky; top: 12vh; height: 76vh; }
.murals-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); transform: scale(1.04); -webkit-mask-image: url("../img/ui/edge-2.png"); mask-image: url("../img/ui/edge-2.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.murals-fig img.on { opacity: 1; transform: none; }
.ml { list-style: none; margin: 0; padding: 0; }
.ml li { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 16px; padding: 26px 0; border-top: 1px solid rgba(243, 231, 214, .22); }
.ml li:last-child { border-bottom: 1px solid rgba(243, 231, 214, .22); }
.ml .n { font: 400 13px/1 var(--sans); letter-spacing: .12em; color: var(--cream-2); }
.ml h3 { font: 700 clamp(26px, 3.6vw, 56px)/1 var(--serif); }
.ml .where { font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2); }
.ml li.on h3 { color: var(--yellow); font-style: italic; }
.ml li.on .n { color: var(--yellow); }

/* ---------- live ---------- */
.live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--gutter); align-items: end; position: relative; z-index: 1; }
.live .copy { display: grid; gap: 26px; align-content: end; }
.live figure { position: relative; }
.live figure .brushed { aspect-ratio: 4 / 3; }
.live figcaption { margin-top: 14px; font: 400 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-2); }
.live-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: var(--gutter); position: relative; z-index: 1; }
.live-row .brushed { aspect-ratio: 4 / 3; }

/* ---------- commissions ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: clamp(32px, 5vw, 72px); position: relative; z-index: 1; }
.step { border-top: 1px solid rgba(63, 9, 13, .35); padding-top: 22px; }
.step .n { font: 900 clamp(48px, 6vw, 92px)/.9 var(--serif); color: #A8471A; } /* the bright orange is 2.4:1 on cream */
.step h3 { font: 700 22px/1.2 var(--serif); margin: 18px 0 10px; }
.step p { font-size: 15.5px; max-width: 26ch; color: #5A3A3A; }
.proof { margin: clamp(48px, 8vw, 110px) calc(-1 * var(--gutter)) 0; overflow: hidden; position: relative; z-index: 1; }
.proof-row { display: flex; gap: 22px; width: max-content; animation: slide 52s linear infinite; }
.proof-row img { height: clamp(200px, 28vw, 380px); width: auto; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .5); }
@keyframes slide { to { transform: translateX(-50%); } }
.commission-cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: clamp(32px, 5vw, 64px); position: relative; z-index: 1; }

/* ---------- tribute ---------- */
.tribute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; position: relative; z-index: 1; }
.tribute img { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); transform: rotate(-1.5deg); }
.tribute .copy { display: grid; gap: 22px; }

/* ---------- MUSIC ---------- */
.hero-music { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--gutter); padding-top: clamp(110px, 16vh, 160px); overflow: hidden; }
.hero-music .copy { display: grid; gap: 22px; position: relative; z-index: 1; }
.hero-music .pic { position: relative; }
.hero-music .pic .brushed { aspect-ratio: 4 / 5; }
.hero-music .stroke.a { width: 130%; height: 70%; left: -20%; bottom: -22%; }
.songs { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.song { border-top: 1px solid rgba(243, 231, 214, .25); }
.song:last-child { border-bottom: 1px solid rgba(243, 231, 214, .25); }
.song > button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; width: 100%; padding: 26px 0; text-align: left; }
.song h3 { font: 700 clamp(26px, 3.6vw, 54px)/1 var(--serif); text-transform: uppercase; letter-spacing: .01em; }
.song h3 small { display: block; margin-top: 8px; font: 400 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); }
.song .play { width: 52px; height: 52px; border: 1.5px solid rgba(243, 231, 214, .8); border-radius: 50%; display: grid; place-items: center; transition: background .3s, transform .3s var(--ease); }
.song .play svg { width: 18px; height: 18px; margin-left: 3px; }
.song > button:hover .play { background: var(--cream); color: var(--maroon); transform: scale(1.06); }
.song .video { display: none; padding: 0 0 30px; }
.song.open .video { display: block; }
.song .frame { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); }
.song .frame iframe, .song .frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.song .meta { margin-top: 14px; font: 400 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-2); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gutter); align-items: start; position: relative; z-index: 1; }
.story .side { position: sticky; top: 14vh; display: grid; gap: 22px; }
.story .side .brushed { aspect-ratio: 4 / 5; }
.awards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; z-index: 1; }
.awards li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; border-top: 1px solid rgba(243, 231, 214, .2); align-items: baseline; }
.awards li:last-child { border-bottom: 1px solid rgba(243, 231, 214, .2); }
.awards .y { font: 400 13px/1 var(--sans); letter-spacing: .14em; color: var(--cream-2); }
.awards .y:empty { display: none; }
.awards h3 { font: 700 clamp(18px, 1.8vw, 26px)/1.25 var(--serif); }
.awards p { font-size: 15px; color: var(--cream-2); margin-top: 4px; }
.choir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; position: relative; z-index: 1; }
.choir .copy { display: grid; gap: 22px; }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: var(--cream); }
.lb::backdrop { background: rgba(43, 5, 8, .95); }
.lb-in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 72px var(--gutter) 40px; }
.lb-img { display: grid; place-items: center; min-height: 0; }
.lb-img img { max-height: calc(100vh - 112px); max-width: 100%; width: auto; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.lb-side { display: grid; align-content: end; gap: 22px; }
.lb-side h3 { font: 700 clamp(30px, 3.6vw, 56px)/1 var(--serif); font-style: italic; }
.kv { display: grid; margin: 0; }
.kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 10px 0; border-top: 1px solid rgba(243, 231, 214, .22); }
.kv div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cream-2); }
.kv dd { margin: 0; font: 500 15px/1.2 var(--sans); text-align: right; }
.lb-x { position: absolute; top: 22px; right: var(--gutter); font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 12px 0; }
.lb-nav { display: flex; gap: 12px; }
.lb-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(243, 231, 214, .4); display: grid; place-items: center; font-size: 20px; transition: background .3s; }
.lb-nav button:hover { background: rgba(243, 231, 214, .12); }

/* ---------- phone / tablet ---------- */
@media (max-width: 899px) {
  .nav .links, .nav .ig { display: none; }
  .menu-btn { display: block; }
  .stage-wrap { height: auto; display: block; overflow: visible; }
  .stage { position: relative; left: 0; top: 0; transform: none; width: 100%; aspect-ratio: 3 / 2; } /* phones show the original 3:2 picture */
  .stage-btns, .stage-hint, .stage-song { display: none; }
  .home-under { display: grid; gap: 28px; padding: 28px var(--gutter) 40px; }
  .home-under .btn-row { display: grid; gap: 12px; }
  .home-under .btn-o { min-height: 58px; }
  .home-under .links { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 400 15px/1 var(--sans); letter-spacing: .1em; }
  .home-under .links a { padding: 12px 0; }
  .home-under .links .soon { color: var(--cream-2); }
  .hero-art, .hero-music { grid-template-columns: minmax(0, 1fr); padding-top: 96px; min-height: 0; }
  .hero-art .pic .brushed, .hero-music .pic .brushed { aspect-ratio: 4 / 3; }
  .about, .murals, .live, .tribute, .story, .choir { grid-template-columns: minmax(0, 1fr); }
  .about .portrait, .story .side { position: relative; top: 0; max-width: 420px; }
  .wall-track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 18px; }
  .piece.wide { grid-column: 1 / -1; }
  .piece .tag { flex-direction: column; gap: 4px; font-size: 12px; }
  .murals-fig { position: relative; top: auto; height: 62vw; }
  .ml li { grid-template-columns: 40px 1fr; }
  .ml .where { grid-column: 2; }
  .live-row { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lb-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding: 64px 16px 20px; gap: 16px; }
  .lb-img img { max-height: 58vh; }
  .s-head { flex-direction: column; align-items: flex-start; }
  .awards li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .wall-track { grid-template-columns: minmax(0, 1fr); }
  .piece.wide { grid-column: auto; }
}

/* touch screens: one-way reveal, nothing hidden until the script marks the page */
@media (hover: none) {
  html.reveal .rv:not([data-seen]) { opacity: .001; transform: translateY(22px); }
  html.reveal .rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .proof-row { animation: none; }
  .rv { opacity: 1 !important; transform: none !important; }
  * { transition-duration: .01ms !important; }
}