/* MILLI — oxblood site. Rebuilt 2026-10-11 (design review 3) as tokens + components, no override layers.
   Type scale: 7 sizes (display / xl / h2 / h3 / body / small / tag). Spacing scale: 8 · 16 · 24 · 32 · 48 · 64 · 96.
   Section rule: a heading has 64 above / 24 below; lists hang straight off the heading's line; free content
   (card grids, poster, About) gets 32 above / 64 below. Phones: 48 / 16 and 24 / 48. */

/* ───────── 0 · fonts ───────── */
/* self-hosted (2026-10-11): Anton + IBM Plex Mono 400/700, from Google Fonts (SIL Open Font License) */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/anton-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/anton-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ibm-plex-mono-700-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ibm-plex-mono-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ibm-plex-mono-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/ibm-plex-mono-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ───────── 1 · tokens ───────── */
:root {
  --bg: #722221;
  --fg: #f3ece4;
  --line: rgba(243, 236, 228, .2);
  --muted: #d4aba5;      /* 5.2:1 on --bg */
  --soft: #ecdcd7;       /* reading text */
  --hot: #ffb38a;
  --deep: #2a0c0b;
  --tile: #5f1b1a;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;

  --fs-display: clamp(88px, 17vw, 300px);  /* page titles */
  --fs-xl: clamp(56px, 7vw, 112px);         /* gig day, poster headliners, menu */
  --fs-h2: clamp(34px, 4.6vw, 64px);        /* section titles, gig venue, CTA lines */
  --fs-h3: clamp(24px, 2.6vw, 36px);        /* card titles in Anton, footer titles, numbers */
  --fs-body: 16px;                          /* reading text, card titles, inputs */
  --fs-small: 13px;                         /* info lines, buttons, lists */
  --fs-tag: 12px;                           /* labels, kickers, nav */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --gutter: clamp(16px, 1.6vw, 22px);
  --maxw: 1480px;
  --edge: max(var(--gutter), calc((100vw - var(--sbw, 0px) - var(--maxw)) / 2 + var(--gutter)));
  --tap: 44px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wipe: cubic-bezier(.7, 0, .2, 1);
  --flower: url("assets/flower.png") center / contain no-repeat;
  color-scheme: dark;
}

/* ───────── 2 · base ───────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; } /* nothing may ever push the page sideways */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: var(--fs-small); line-height: 1.5; }
/* reading text can be selected + copied; controls can't (so a tap never highlights a button or the menu) */
.nav, .mmenu, .menu-btn, .dropbar, .btn, .tix, .chips, .pscreen, .player figcaption a, .platforms a, .head a, .lost a, .shutter { -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.caps { text-transform: uppercase; letter-spacing: .04em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
img, svg, .mark { -webkit-user-drag: none; user-drag: none; }
input, textarea, select, a[href^="mailto:"] { -webkit-user-select: text; user-select: text; }
.direct b { -webkit-user-select: all; user-select: all; }
.index a { -webkit-user-drag: none; }
/* content sits in a centred max-1480 column; colour bands stay full width */
main:not(.about-page) > *:not(.cta), .fcols, .legal { max-width: var(--maxw); margin-inline: auto; }
/* every other section block sits on the deep red, edge to edge (main.js adds .deep); 1px bleed so no seam shows */
.deep { background: var(--deep); box-shadow: 0 0 0 100vmax var(--deep); clip-path: inset(-1px -100vmax); }

/* ───────── 3 · buttons ───────── */
/* one button family: 44px tall, 13px bold caps; the peach flower floods in from the mouse point (main.js sets --fx/--fy) */
@property --fb { syntax: '<length>'; inherits: false; initial-value: 0px; }
.btn, .tix { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 22px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--ease), background .2s, color .2s, border-color .2s; transform: translate(var(--bx, 0px), var(--by, 0px)); }
.btn { background: var(--fg); color: var(--bg); border: 0; }
.btn.ghost, .tix { background: transparent; color: var(--fg); border: 1px solid var(--fg); }
.btn::before, .tix::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hot);
  -webkit-mask: url("assets/flower.png") calc(var(--fx, 50%) - var(--fb) / 2) calc(var(--fy, 50%) - var(--fb) / 2) / var(--fb) var(--fb) no-repeat;
  mask: url("assets/flower.png") calc(var(--fx, 50%) - var(--fb) / 2) calc(var(--fy, 50%) - var(--fb) / 2) / var(--fb) var(--fb) no-repeat;
  transition: --fb .6s cubic-bezier(.3, 0, .2, 1); }
.btn:hover::before, .tix:hover::before, .btn:focus-visible::before, .tix:focus-visible::before { --fb: 720px; }
.btn:hover, .btn.ghost:hover, .tix:hover { color: var(--deep); border-color: var(--hot); }

/* ───────── 4 · nav + phone menu ───────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--edge) 12px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: var(--fs-tag);
  transition: top .4s var(--ease), background .3s, box-shadow .3s; animation: nav-in .6s var(--enter, .45s) var(--ease) both; }
.nav.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(12px, 2vw, 28px); }
.nav ul:last-of-type { justify-content: flex-end; }
.nav ul a { display: inline-block; padding: 6px 0 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.nav ul a:hover, .nav ul a.on { background-size: 100% 2px; }
.mark.flower { display: block; width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--flower); mask: var(--flower); transition: transform .6s var(--ease); }
.nav a:hover .mark.flower { transform: rotate(72deg) scale(1.08); }
/* the small flower that marks the page you're on and hops to the hovered link */
.navflower { position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: var(--hot); pointer-events: none; opacity: 0; -webkit-mask: var(--flower); mask: var(--flower);
  transition: translate .5s cubic-bezier(.3, 1.5, .5, 1), rotate .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.navflower.on { opacity: 1; }
.menu-btn, .mmenu { display: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

/* "new drop" bar on top */
.dropbar { position: fixed; inset: 0 0 auto 0; z-index: 31; height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: env(safe-area-inset-top, 0px) 44px 0; background: var(--hot); color: var(--deep); font-size: var(--fs-tag); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .4s var(--ease); white-space: nowrap; overflow: hidden; }
.dropbar a { display: inline-flex; align-items: center; gap: 10px; overflow: hidden; text-overflow: ellipsis; }
.dropbar a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.dropbar i { flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--flower); mask: var(--flower); animation: spin 6s linear infinite; }
.dropbar button { all: unset; cursor: pointer; position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; display: grid; place-items: center; font-size: 16px; }
.has-drop .nav { top: 34px; }
.has-drop.drop-gone .dropbar { transform: translateY(-100%); }
.has-drop.drop-gone .nav { top: 0; }

/* ───────── 5 · first screens: home stage + page heads ───────── */
.stage, .page-head { position: relative; overflow: hidden; background: var(--bg); }
.stage { height: max(600px, 100vh); }
.page-head { height: max(460px, 60vh); } /* short on every page, so the first content shows on the first screen */
/* bottom rule stops at the content column, like every other line */
.page-head { background-image: linear-gradient(var(--fg), var(--fg)); background-repeat: no-repeat; background-position: center bottom; background-size: min(var(--maxw), 100%) 1px; }
.stage::after, .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(114, 34, 33, 0), var(--bg) 92%); }
.ink { position: absolute; z-index: 2; color: var(--fg); font-size: var(--fs-tag); line-height: 1.45; }
.label { top: 96px; right: var(--edge); text-align: right; }
.page-head .label { left: var(--edge); right: auto; text-align: left; }
.has-drop .label, .has-drop .index { top: calc(96px + 34px); }
.name { left: var(--edge); bottom: var(--gutter); margin: 0 0 0 -.02em; font-family: var(--display); font-weight: 400; font-size: var(--fs-display); line-height: .92; letter-spacing: -.01em; }
.corner { right: var(--edge); bottom: var(--gutter); display: grid; gap: var(--s1); justify-items: end; text-align: right; }
.corner a:not(.btn):hover::before { content: "→ "; }
.corner.jump, .hero-cta { gap: var(--s2); }
.corner.jump span { color: var(--soft); letter-spacing: .08em; }

/* header photos: Milli's transparent cut-outs, standing on the oxblood; only the waist cut fades */
.ph { position: absolute; z-index: 0; bottom: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
/* photos stay INSIDE the content column (on wide screens the line under the header stops at the column — a photo
   past its end looked unfinished), and on page heads they keep clear of the corner text on the right */
.ph.hero { right: calc(var(--edge) - var(--gutter) + clamp(0px, 5vw, 110px)); height: 94%; aspect-ratio: var(--ar); max-width: 60%;
  translate: calc(var(--mx, 0) * -12px) calc(var(--py, 0px) + var(--my, 0) * -8px); }
.ph.phead { right: calc(var(--edge) + clamp(200px, 16vw, 260px)); height: 92%; aspect-ratio: var(--ar, 3 / 2);
  translate: calc(var(--mx, 0) * -16px) calc(var(--py, 0px) + var(--my, 0) * -10px); }
.ph.hero, .ph.phead { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%); mask-image: linear-gradient(to top, transparent 0, #000 16%);
  transition: translate .9s var(--ease); animation: photo-in .9s calc(var(--enter, .45s) + .12s) var(--ease) both; }
@keyframes photo-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

/* home: the hand-drawn MILLI wordmark with its two flowers */
.logo-name { line-height: 0; bottom: calc(var(--gutter) + 6px); }
.logo-big { display: block; width: clamp(260px, 46vw, 820px); height: auto; color: var(--fg); overflow: visible;
  animation: logo-wipe 1.1s cubic-bezier(.65, 0, .25, 1) var(--enter, .45s) both; }
@keyframes logo-wipe { from { clip-path: inset(-20% 100% -20% -2%); translate: 0 18px; } to { clip-path: inset(-20% -6% -20% -2%); translate: 0 0; } }
.logo-big .bloom { transform-box: fill-box; transform-origin: 50% 50%;
  animation: spin 14s linear calc(var(--enter, .45s) + .2s) infinite, bloom-pop .55s cubic-bezier(.2, 1.6, .35, 1) calc(var(--enter, .45s) + .2s) both; }
.logo-big .bloom + .bloom { animation: bloom-pop .55s cubic-bezier(.2, 1.6, .35, 1) calc(var(--enter, .45s) + .3s) both; }
@keyframes bloom-pop { from { scale: 0; } to { scale: 1; } }
@keyframes spin { to { rotate: 360deg; } }

/* home (desktop): tracklist top-left; hovering a track pops its sleeve up */
.index { top: 96px; left: var(--edge); width: min(360px, calc(100% - 2 * var(--gutter))); list-style: none; margin: 0; padding: 0; }
.index li + li { border-top: 1px solid rgba(243, 236, 228, .18); }
.index a { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding: 6px 0; transition: padding-left .3s var(--ease); }
.index a:hover, .index a:focus-visible { padding-left: 10px; }
.index a span:first-child { justify-self: start; padding: 0 .12em; margin-left: -.12em; background: linear-gradient(var(--hot), var(--hot)) 0 58% / 0% 78% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .38s cubic-bezier(.6, 0, .2, 1), color .2s; }
.index a:hover span:first-child, .index a:focus-visible span:first-child { background-size: 100% 78%; color: var(--deep); }
.index .yr { color: var(--muted); font-variant-numeric: tabular-nums; }
.pv { position: absolute; z-index: 3; left: calc(var(--edge) + min(400px, 36vw)); top: 88px; width: min(38vh, 26vw, 420px); aspect-ratio: 1; display: grid; place-items: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(26px) rotate(-9deg) scale(.9); transform-origin: 20% 0; pointer-events: none;
  transition: opacity .25s, transform .55s cubic-bezier(.2, 1.4, .3, 1); }
.has-drop .pv { top: calc(88px + 34px); }
.pv.show { opacity: 1; transform: rotate(-3deg); }
.pv.art-img { overflow: hidden; }
.pv.cover { overflow: hidden; padding: 8%; place-items: start; text-align: left; }
.pv.cover b { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: .9; }
.pv.cover i { position: absolute; z-index: 1; left: 9%; bottom: 7%; font: 400 var(--fs-tag)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pv.cover img { position: absolute; bottom: 0; right: -10%; height: 84%; width: auto; max-width: none; pointer-events: none; mix-blend-mode: luminosity; filter: contrast(1.15); }
.pv::after { content: ""; position: absolute; inset: 0; opacity: .25; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* home: proof + the two first-screen buttons (Watch = main goal, Book = second) */
.hero-cta .proof, .hero-strip .proof { display: grid; gap: 4px; color: var(--soft); letter-spacing: .06em; }
.hero-cta .proof { text-align: right; }
.proof b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: .01em; color: var(--fg); }
.cta-pair { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }
.hero-strip { display: none; }

/* ───────── 6 · sections ───────── */
.head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s6) var(--gutter) var(--s3); border-bottom: 1px solid var(--fg); }
.head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: .005em; }
.head h2::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .16em; vertical-align: .52em; background: var(--hot);
  -webkit-mask: var(--flower); mask: var(--flower); animation: spin 12s linear infinite; }
.head a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-tag); white-space: nowrap; }
.head a:hover { color: var(--hot); }
.head-links { display: flex; gap: var(--s3); }
.head[hidden], #nextup[hidden] { display: none; }

/* call-to-action band: full-width colour, text + button on the content column */
.cta { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s6) max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background-image: linear-gradient(var(--line), var(--line)); background-repeat: no-repeat; background-position: center bottom; background-size: min(var(--maxw), 100%) 1px; }
.cta p { margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: .01em; }

/* ───────── 7 · cover art (fallback covers + home sleeves) ───────── */
.art { display: grid; place-items: center; }
.art-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* cover colours (fallback art) */
.a-orange { background: #ff4a12; color: #fff; }
.a-black { background: #120404; color: var(--fg); }
.a-lime { background: #d7ff3a; color: #0e0e0e; }
.a-pink { background: #f7b6cf; color: #0e0e0e; }
.art.cover { position: relative; overflow: hidden; padding: 9%; place-items: start; text-align: left; font-family: var(--display); font-weight: 400; font-size: clamp(17px, 2vw, 28px); letter-spacing: -.03em; }
.art.cover b { position: relative; z-index: 1; font-weight: 400; line-height: .9; }
.art.cover img { position: absolute; bottom: 0; right: -10%; height: 84%; width: auto; max-width: none; pointer-events: none; mix-blend-mode: luminosity; filter: contrast(1.15); }
.a-lime.cover img, .a-pink.cover img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.2); }

/* "New" sticker on anything from the last 14 days */
.newtag { position: absolute; z-index: 3; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 5px 8px; rotate: -6deg; pointer-events: none;
  background: var(--hot); color: var(--deep); font-family: var(--display); font-size: var(--fs-body); line-height: 1; letter-spacing: .05em;
  transition: rotate .45s var(--ease), scale .45s var(--ease); }
.newtag i { width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--flower); mask: var(--flower); transition: rotate .6s var(--ease); }
.player .newtag { top: 44px; }
.pscreen:hover .newtag { rotate: 3deg; scale: 1.06; }
.pscreen:hover .newtag i { rotate: 72deg; }
.anim .newtag { animation: newtag-pop .55s cubic-bezier(.2, 1.6, .35, 1) .35s both; }
@keyframes newtag-pop { from { scale: 0; rotate: -30deg; } }

/* ───────── 8 · media cards (Music, Videos) ─────────
   Not players: a cover that links out, the platform named on top, the length in a corner badge,
   and a full-width 44px "Play on …" button under it — the plays count on SoundCloud / YouTube / Instagram. */
.vgrid { display: grid; gap: var(--s4) var(--s3); padding: var(--s4) var(--gutter) var(--s6); }
.vgrid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgrid.tall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vgrid.tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgrid.latest { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Home: same cards as Music, square covers */
.player { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.pscreen { all: unset; position: relative; display: block; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; background: #120404;
  box-shadow: 0 22px 44px rgba(20, 4, 4, .45); transition: transform .4s var(--ease); }
.tall .pscreen { aspect-ratio: 9 / 16; }
.tracks .pscreen, .latest .pscreen { aspect-ratio: 1; }
.pscreen:hover { transform: translateY(-4px); }
.pscreen:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
.pthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pfallback.art { position: absolute; z-index: 0; inset: 0; width: auto; aspect-ratio: auto; padding: 7%; font-size: clamp(28px, 3.4vw, 54px); box-shadow: none; transform: none; }
.tall .pfallback.art { font-size: clamp(24px, 2.6vw, 40px); }
.pfallback.art img { height: 88%; }
.pscreen:hover .pthumb, .pscreen:hover .pfallback img { transform: scale(1.05); }
.pscreen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 2, 2, .55), transparent 28%, transparent 70%, rgba(10, 2, 2, .55)); }
.ptop { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: var(--fs-tag); white-space: nowrap; }
.ptop span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; margin-right: 7px; vertical-align: 1px; }
.pplay { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(54px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--fg);
  transform: translate(-50%, -50%); transition: transform .35s var(--ease), background .25s; }
.pplay::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 18px solid var(--bg); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.pscreen:hover .pplay { transform: translate(-50%, -50%) scale(1.12); background: var(--hot); }
.pdur { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 4px 8px; background: rgba(10, 2, 2, .78); font-size: var(--fs-tag); font-weight: 700; font-variant-numeric: tabular-nums; }
.player { grid-template-rows: auto 1fr; }
.player figcaption { display: grid; gap: 6px; grid-template-rows: auto auto 1fr; } /* the "Play on…" buttons line up across a row */
.player figcaption a { align-self: end; }
.player figcaption b { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }
.player figcaption small { font-size: var(--fs-small); color: var(--muted); }
.player figcaption a { display: flex; align-items: center; justify-content: center; min-height: var(--tap); margin-top: var(--s1); border: 1px solid var(--line);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; transition: background .2s, color .2s, border-color .2s; }
.player figcaption a:hover { background: var(--fg); color: var(--deep); border-color: var(--fg); }

/* platform links row */
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.platforms a { display: flex; justify-content: space-between; gap: var(--s1); padding: var(--s4) var(--s2); border-right: 1px solid var(--line);
  font-size: var(--fs-small); font-weight: 700; transition: background .25s, color .25s; }
.platforms a:last-child { border-right: 0; }
.platforms a:hover { background: var(--fg); color: var(--bg); }
.platforms a span:last-child { transition: transform .3s var(--ease); }
.platforms a:hover span:last-child { transform: translate(3px, -3px); }

/* ───────── 9 · gigs ───────── */
/* the next gig: one big card — date block | venue + town | Info. No hover effects (Milli). */
.gig { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: var(--s5) var(--gutter); border-bottom: 1px solid var(--line); }
.gig .gd { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: end;
  padding-right: clamp(20px, 3vw, 44px); border-right: 1px solid var(--line); font-style: normal; }
.gig .gd b { grid-row: 1 / 3; font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); line-height: .82; letter-spacing: .005em; color: var(--hot); }
.gig .gd span { font-family: var(--display); font-size: var(--fs-h3); line-height: 1; letter-spacing: .02em; }
.gig .gd small { align-self: start; padding-top: 4px; font-size: var(--fs-tag); color: var(--muted); letter-spacing: .14em; }
.gig .gn { display: grid; gap: var(--s1); min-width: 0; }
.gig .gk { font-size: var(--fs-tag); font-weight: 700; letter-spacing: .2em; color: var(--muted); }
.gig .n { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: .95; letter-spacing: .01em; overflow-wrap: anywhere; }
.gig .c { font-size: var(--fs-small); color: var(--soft); letter-spacing: .08em; }
.gig.soon { grid-template-columns: minmax(0, 1fr) auto; }
/* the gigs after it: plain rows */
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 170px 80px auto; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ev .n { justify-self: start; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: .01em; }
.ev .c { font-size: var(--fs-small); color: var(--muted); }
.ev .d { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.ev .tix { justify-self: end; }

/* Events › Played: a framed gig poster — festivals headline, clubs below, all names solid */
.played { padding: var(--s4) var(--gutter) var(--s6); text-align: center; }
.played .lineup { position: relative; padding: var(--s6) clamp(14px, 3vw, 48px); border: 1px solid rgba(243, 236, 228, .22); }
.played .tier + .tier { margin-top: var(--s5); }
.played .kick { display: inline-flex; align-items: center; gap: 14px; margin-bottom: var(--s2); font-size: var(--fs-tag); font-weight: 700; letter-spacing: .22em; color: var(--muted); }
.played .kick::before, .played .kick::after { content: ""; width: clamp(24px, 5vw, 64px); height: 1px; background: currentColor; opacity: .5; }
.played .tier p { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: .01em; text-wrap: balance; }
.played .tier.big p { font-size: var(--fs-xl); line-height: .98; }
.played .tier span { white-space: nowrap; color: var(--fg); transition: color .3s; }
.played .tier span:hover { color: var(--hot); }
/* a flower after each name (a line never starts with one); main.js hides it at line ends; it spins only next to the hovered name */
.played .tier span:not(:last-of-type)::after { content: ""; display: inline-block; width: .3em; height: .3em; margin: 0 .05em 0 .32em; vertical-align: .3em; background: var(--hot);
  -webkit-mask: var(--flower); mask: var(--flower); }
.played .tier span.eol::after { visibility: hidden; }
.played .tier span:hover::after, .played .tier span:has(+ span:hover)::after { animation: spin 1.4s linear infinite; }
.played .tier b { font-weight: 400; color: var(--hot); margin-left: .1em; }
.lu-corner { position: absolute; padding: 0 12px; background: var(--deep); font-size: var(--fs-tag); font-weight: 700; letter-spacing: .2em; line-height: 1; color: var(--muted); white-space: nowrap; }
.lu-corner.tl { top: -6px; left: 22px; }
.lu-corner.tr { top: -6px; right: 22px; }
.lu-corner.bl { bottom: -6px; left: 22px; color: var(--hot); }
.lu-corner.br { bottom: -6px; right: 22px; color: var(--fg); }

/* ───────── 10 · booking ───────── */
/* the fast lane first: a DM on Instagram; the form below is the backup */
.dm { display: flex; justify-content: space-between; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s3) var(--gutter); border-bottom: 1px solid var(--line); }
.dm div { display: grid; gap: 4px; }
.dm b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: .01em; }
.dm span { font-size: var(--fs-small); color: var(--muted); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.offer { border-right: 1px solid var(--line); }
.offer-row { padding: var(--s3) var(--gutter); border-bottom: 1px solid var(--line); }
.offer-row:last-child { border-bottom: 0; }
.offer-row b { display: block; margin-bottom: var(--s1); font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: .01em; }
.offer-row p { margin: 0; max-width: 48ch; font-size: var(--fs-body); line-height: 1.65; color: var(--soft); text-transform: none; letter-spacing: 0; }
.bform { display: grid; gap: var(--s3); align-content: start; padding: var(--s3) var(--gutter) var(--s5); }
.bform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.lf { display: grid; gap: var(--s1); }
fieldset.lf { border: 0; margin: 0; padding: 0; }
.lf > span, .lf legend { padding: 0; font-size: var(--fs-tag); color: var(--muted); }
.lf legend i { font-style: normal; opacity: .75; text-transform: none; }
.lf input, .lf textarea { all: unset; padding: 10px 0; border-bottom: 1px solid var(--fg); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; transition: border-color .2s; }
.lf textarea { min-height: 96px; white-space: pre-wrap; }
.lf input::placeholder, .lf textarea::placeholder { color: var(--muted); opacity: 1; text-transform: none; letter-spacing: 0; }
.lf input:focus, .lf textarea:focus { border-color: var(--hot); }
.lf.bad input, .lf.bad textarea { border-color: var(--hot); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s2); border: 1px solid var(--fg); font-size: var(--fs-tag); transition: background .2s, color .2s, border-color .2s; }
.chips label:hover span { border-color: var(--hot); color: var(--hot); }
.chips input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chips input:focus-visible + span { outline: 2px solid var(--hot); outline-offset: 2px; }
.lf.bad .chips span { border-color: var(--hot); }
.err { min-height: 1.2em; font-size: var(--fs-small); color: var(--hot); }
.privacy { margin: 0; max-width: 52ch; font-size: var(--fs-tag); line-height: 1.5; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ferr { font-size: var(--fs-small); color: var(--hot); text-transform: none; letter-spacing: 0; }
.bform[hidden] { display: none; }
/* sent: the form makes way for a confirmation — what was sent, when the reply comes, a faster route */
.sent { gap: var(--s2); align-content: start; }
.sent:focus { outline: none; }
.sent-mark { width: 44px; height: 44px; background: var(--hot); -webkit-mask: var(--flower); mask: var(--flower); animation: bloom-pop .6s cubic-bezier(.2, 1.6, .35, 1) both; }
.sent h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: .01em; }
.sent p { margin: 0; max-width: 44ch; font-size: var(--fs-body); line-height: 1.6; color: var(--soft); text-transform: none; letter-spacing: 0; }
.sent p b { color: var(--fg); overflow-wrap: anywhere; }
.sent dl { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s1) 0; padding: var(--s2) 0; border-block: 1px solid var(--line); }
.sent dt { font-size: var(--fs-tag); color: var(--muted); }
.sent dd { margin: 4px 0 0; font-size: var(--fs-body); font-weight: 700; text-transform: none; letter-spacing: 0; }
.sent .cta-pair { justify-content: flex-start; margin-top: var(--s1); }
.sent-note { font-size: var(--fs-tag); color: var(--muted); }
.err.ok { color: var(--fg); }
.err a { text-decoration: underline; text-underline-offset: 3px; }
.direct { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--fs-small); color: var(--muted); }
.direct b { color: var(--fg); font-weight: 700; }
.direct a { display: inline-flex; align-items: center; min-height: var(--tap); }
a[href^="mailto:"]:hover, .direct a:hover b { color: var(--hot); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; min-height: 64px; padding: var(--s2) var(--gutter);
  font-size: var(--fs-body); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; max-width: 64ch; padding: 0 var(--gutter) var(--s3); font-size: var(--fs-body); line-height: 1.65; color: var(--soft); text-transform: none; letter-spacing: 0; }

/* ───────── 11 · about ─────────
   No big header: the first screen is the story — title, first line, proof — with the portrait beside it (desktop)
   or right after the proof (phones). */
.about-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: clamp(32px, 6vw, 112px); align-content: start;
  max-width: var(--maxw); margin-inline: auto; padding: calc(96px + var(--s5)) var(--gutter) var(--s6); }
.has-drop .about-page { padding-top: calc(96px + 34px + var(--s5)); }
.about-page > * { grid-column: 1; }
.about-label { margin-bottom: var(--s3); font-size: var(--fs-tag); line-height: 1.45; }
.about-page h1 { margin: 0 0 var(--s3); font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); line-height: .9; letter-spacing: .005em; }
.about-page .lead { margin: 0; max-width: 24ch; font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; text-transform: none; color: var(--fg); }
.about-page p:not(.lead) { margin: var(--s3) 0 0; max-width: 56ch; font-size: var(--fs-body); line-height: 1.7; color: var(--soft); text-transform: none; letter-spacing: 0; }
.about-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--line); }
.about-proof b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; }
.about-proof span { font-size: var(--fs-tag); color: var(--muted); }
.about-proof small { flex-basis: 100%; font-size: var(--fs-small); color: var(--soft); letter-spacing: .06em; }
.about-page .portrait { grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: 120px; aspect-ratio: 777 / 1300; max-height: calc(100vh - 160px); justify-self: center; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14%); mask-image: linear-gradient(to top, transparent 0, #000 14%); animation: photo-in 1s .3s var(--ease) both; }
.xp { display: grid; gap: var(--s1); margin-top: var(--s5); }
.xp + .xp { margin-top: var(--s4); }
.xp h4 { margin: 0; font-size: var(--fs-tag); font-weight: 700; color: var(--hot); }
.socials { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.socials a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-small); }
.socials a:hover { color: var(--hot); }

/* ───────── 12 · footer ───────── */
footer { background: var(--deep); color: var(--fg); }
.fcols { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--s5); padding: var(--s6) var(--gutter) var(--s5); }
.fcols h3 { margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-small); }
.fcols ul a { display: inline-flex; align-items: center; min-height: 36px; transition: color .2s, translate .3s var(--ease); }
.fcols ul a:hover { color: var(--hot); translate: 6px 0; }
.fcols ul a[target="_blank"]::after { content: " ↗"; white-space: pre; opacity: 0; transition: opacity .2s; }
.fcols ul a[target="_blank"]:hover::after { opacity: 1; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 #4a1816; font-size: var(--fs-tag); color: #b98a84; }

/* 404 */
.lost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.lost a { display: grid; gap: var(--s1); padding: var(--s4) var(--gutter); border-right: 1px solid var(--line); transition: background .25s, color .25s; }
.lost a:last-child { border-right: 0; }
.lost b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: .01em; }
.lost small { font-size: var(--fs-tag); color: var(--soft); }
.lost a:hover { background: var(--fg); color: var(--deep); }
.lost a:hover small { color: var(--deep); }

/* links page (Instagram bio): one narrow column — photo, name, five big buttons, the way into the full site */
.links { display: grid; justify-items: center; gap: var(--s2); width: min(100%, 440px); margin: 0 auto; padding: var(--s4) var(--gutter) var(--s5); text-align: center; }
.links-mark { display: grid; place-items: center; width: var(--tap); height: var(--tap); }
.links-photo { width: min(64%, 240px); aspect-ratio: 968 / 1500; margin-top: var(--s1);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%); mask-image: linear-gradient(to top, transparent 0, #000 22%); }
.links-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.links h1 { margin: calc(var(--s4) * -1) 0 0; position: relative; font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); line-height: .9; letter-spacing: .01em; }
.links-sub { margin: 0; font-size: var(--fs-small); color: var(--soft); letter-spacing: .08em; }
.links-list { display: grid; gap: 12px; width: 100%; margin-top: var(--s3); }
.links-list .btn { width: 100%; min-height: 56px; }
.links-gig { flex-direction: column; gap: 2px; line-height: 1.2; }
.links-gig small { font-size: var(--fs-tag); font-weight: 400; color: var(--muted); letter-spacing: .14em; }
.links-gig:hover small { color: inherit; }
.links-site { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--s2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; }
.links-site:hover { color: var(--hot); }
.links-foot { margin: 0; font-size: var(--fs-tag); color: #b98a84; }

/* ───────── 13 · motion ─────────
   --enter (main.js) = when the intro has opened; the first screen is choreographed from it.
   Scroll reveals only hide things while JS runs (html.anim), so pages are complete without it. */
/* intro: the page opens through a growing Milli flower (a hole cut in the dark cover) */
@property --fo { syntax: '<length>'; inherits: false; initial-value: 0vmax; }
.shutter { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--deep);
  -webkit-mask: url("assets/flower.png") 50% 50% / var(--fo) var(--fo) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: url("assets/flower.png") 50% 50% / var(--fo) var(--fo) no-repeat, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: flower-open .8s cubic-bezier(.6, 0, .25, 1) .05s forwards; }
.shutter.first { animation-delay: .05s; animation-duration: .6s; } /* first visit: short — people from Instagram shouldn't wait */
@keyframes flower-open { 0% { --fo: 0vmax; } 30% { --fo: 20vmax; } 100% { --fo: 420vmax; } }
/* only the big page titles drop in letter by letter; section titles just sit there (they still shake on hover) */
.name.split { overflow: hidden; padding-bottom: .04em; }
.split.done { overflow: visible; }
.split .ch { display: inline-block; white-space: pre; }
.name.split .ch { animation: ch-up .8s cubic-bezier(.2, .9, .25, 1) calc(var(--enter, .45s) + var(--i) * 55ms) both; }
@keyframes ch-up { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
.index li { animation: row-in .55s var(--ease) calc(var(--enter, .45s) + .3s + var(--i, 0) * 60ms) both; }
@keyframes row-in { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.label, .corner { animation: rise .6s calc(var(--enter, .45s) + .5s) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.anim .rv { opacity: 0; transform: translateY(34px); }
html.anim .rv.from-left { transform: translateX(-36px); }
html.anim .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease) var(--rd, 0s), transform .8s var(--ease) var(--rd, 0s); }

/* switching pages: content fades out (.18s), the menu stays; the new page waits for its fonts, then fades in.
   Arriving from inside the site: no intro, no entrance animations — the fade is the only motion. */
html.nav-in .shutter { display: none; }
html.nav-in .nav, html.nav-in .dropbar, html.nav-in .ph, html.nav-in .label, html.nav-in .corner, html.nav-in .name .ch, html.nav-in .index li,
html.nav-in .logo-big { animation: none !important; }
html.nav-in .logo-big .bloom { animation: spin 14s linear infinite; }
html.nav-in .logo-big .bloom + .bloom { animation: none; }
html.page-leave main, html.page-leave .stage, html.page-leave .page-head, html.page-leave footer {
  opacity: 0 !important; transform: translateY(-6px); transition: opacity .18s ease-in, transform .18s ease-in; }
html.nav-in main, html.nav-in .stage, html.nav-in .page-head, html.nav-in footer {
  opacity: 0; transform: translateY(10px); transition: opacity .4s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
  animation: show-anyway 0s 1.5s forwards; /* safety: never stay hidden */ }
html.nav-in.shown main, html.nav-in.shown .stage, html.nav-in.shown .page-head, html.nav-in.shown footer { opacity: 1; transform: none; }
@keyframes show-anyway { to { opacity: 1; transform: none; } }

/* ───────── 14 · tablet + phone (≤900px) ───────── */
@media (max-width: 900px) {
  :root { --gutter: 18px; }
  body { overflow-x: clip; }
  /* nav → flower + menu button; full-screen menu */
  .nav { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-bottom: 10px; }
  .nav ul, .navflower { display: none !important; }
  .nav > a { grid-column: 2; }
  .mark.flower { width: 30px; height: 30px; }
  .menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; grid-column: 3; justify-self: end;
    width: var(--tap); height: var(--tap); margin-right: -10px; padding: 0; background: none; border: 0; color: var(--fg); cursor: pointer; }
  .menu-btn i { display: block; width: 26px; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
  .menu-open .menu-btn i:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-open .menu-btn i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-open .nav { background: transparent; box-shadow: none; z-index: 45; }
  .menu-open { overflow: hidden; }
  .mmenu { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0; z-index: 44; padding: 90px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--deep); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s var(--wipe), visibility 0s .55s; }
  .menu-open .mmenu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--wipe), visibility 0s; }
  .mmenu a.big { font-family: var(--display); font-size: var(--fs-xl); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase;
    opacity: 0; transform: translateY(40px); transition: opacity .35s, transform .5s var(--ease); }
  .mmenu a.big.on { color: var(--hot); }
  .menu-open .mmenu a.big { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * 60ms); }
  .mmenu .mfoot { margin-top: auto; padding-top: var(--s3); display: flex; flex-wrap: wrap; gap: 0 var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted);
    opacity: 0; transition: opacity .4s; }
  .mmenu .mfoot a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .menu-open .mmenu .mfoot { opacity: 1; transition-delay: .5s; }
  .dropbar { justify-content: flex-start; padding-left: var(--s2); padding-right: 44px; }
  .dropbar a > span:first-of-type { display: none; }
  .dropbar a > span:last-child { overflow: hidden; text-overflow: ellipsis; }

  /* first screens: home keeps a big stage; subpage headers are short so content shows on the first screen */
  /* the stage leaves room for the proof + buttons strip, so both buttons are on the first screen */
  .stage { height: max(440px, calc(100svh - 196px)); }
  .has-drop .stage { height: max(440px, calc(100svh - 196px - 34px)); }
  .index, .pv, .label, .corner { display: none; }
  .ph.hero { right: -4%; height: 80%; max-width: 86%; }
  .logo-big { width: min(78vw, 420px); }
  .page-head, .page-head.short { height: max(340px, 46svh); }
  .page-head .name { font-size: clamp(72px, 21vw, 150px); }
  .ph.phead { right: 0; height: 74%; max-width: 72%; } /* clears the menu bar (+ drop bar) */
  .hero-strip { display: grid; gap: var(--s2); padding: var(--s3) var(--gutter); border-top: 1px solid var(--line); }
  .hero-strip .proof { font-size: var(--fs-small); }
  .hero-strip .cta-pair { display: grid; grid-template-columns: 1fr 1fr; }

  /* sections */
  .head { padding: var(--s5) var(--gutter) var(--s2); }
  .vgrid { padding: var(--s3) var(--gutter) var(--s5); }
  .vgrid.wide, .vgrid.tracks { grid-template-columns: 1fr; }
  .vgrid.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) 14px; }
  .vgrid.tracks .player { width: 100%; max-width: 460px; justify-self: center; }
  .vgrid.latest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) 14px; }
  /* half-width cards (Clips, Home): platform + credit stacked, button text on one line */
  .tall .ptop, .latest .ptop { flex-direction: column; gap: 2px; }
  .tall .player figcaption a, .latest .player figcaption a { font-size: var(--fs-tag); letter-spacing: 0; padding: 0 4px; text-align: center; }
  .latest .pplay { width: 48px; }
  .tall .player .newtag, .latest .player .newtag { top: auto; right: auto; bottom: 12px; left: 12px; } /* clear of the stacked label on top */
  .cta { padding-block: var(--s5); }
  .platforms { grid-template-columns: 1fr 1fr; }
  .platforms a { border-bottom: 1px solid var(--line); }
  .platforms a:nth-child(2n) { border-right: 0; }

  /* gigs */
  .ev { grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "d n t" "d c t"; row-gap: 3px; column-gap: 12px; }
  .ev .d { grid-area: d; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .01em; color: var(--hot); }
  .ev .n { grid-area: n; }
  .ev .c { grid-area: c; }
  .ev .tix { grid-area: t; }
  .played { padding: var(--s3) var(--gutter) var(--s5); }
  .played .lineup { padding: var(--s5) 14px; }

  /* booking: form first on phones */
  .dm .btn { width: 100%; }
  .book { grid-template-columns: 1fr; }
  .book .bform { order: -1; border-bottom: 1px solid var(--line); }
  .offer { border-right: 0; }
  .bform .row2 { grid-template-columns: 1fr; }

  /* about: one column — title, first line, proof, portrait, story, links */
  .about-page { grid-template-columns: 1fr; padding-top: calc(72px + var(--s4)); padding-bottom: var(--s5); }
  .has-drop .about-page { padding-top: calc(72px + 34px + var(--s4)); }
  .about-page .portrait { grid-column: 1; grid-row: auto; position: relative; top: 0; order: 0; width: min(78%, 320px); max-height: none; margin-top: var(--s4); }
  .about-page h1 { margin-bottom: var(--s2); }

  /* footer: short blocks, links in rows of 44px tap targets */
  .fcols { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5) var(--gutter) var(--s4); }
  .fcols h3 { margin-bottom: var(--s1); padding-bottom: var(--s1); }
  .fcols ul { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
  .fcols ul a { min-height: var(--tap); }
  .legal { flex-direction: column; gap: 6px; }
  .lost { grid-template-columns: 1fr; }
  .lost a { border-right: 0; border-bottom: 1px solid var(--line); }
  .lost a:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .gig { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "d n" "t t"; row-gap: var(--s3); column-gap: 18px; padding-block: var(--s4); }
  .gig .gd { grid-area: d; padding-right: 18px; }
  .gig .gd b { font-size: 64px; }
  .gig .gd span { font-size: 20px; }
  .gig .gn { grid-area: n; }
  .gig .n { font-size: clamp(32px, 10vw, 48px); }
  .gig .tix { grid-area: t; width: 100%; }
  .gig.soon { grid-template-columns: 1fr; grid-template-areas: "n" "t"; }
  .lu-corner { padding: 0 8px; letter-spacing: .14em; }
  .lu-corner.tl, .lu-corner.bl { left: 12px; }
  .lu-corner.tr { right: 12px; }
  .lu-corner.br { display: none; } /* phones: the two bottom labels would run into each other */
}
@media (max-width: 420px) {
  .player figcaption b { font-size: 14px; }
  .ev .n { font-size: 22px; }
}

/* ───────── 15 · reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shutter { display: none; }
  html.anim .rv { opacity: 1 !important; transform: none !important; }
}