/* The site (akompi.app): the app's look (Akompi/UI/Theme.swift), with big, easy type. */
@font-face {
  font-family: "Archivo";
  src: url("/static/font.ttf") format("truetype");
  font-weight: 100 900;
}

:root {
  --body-top: #4a4a50;
  --body-bottom: #424248;
  --key: #2a2a2e;
  --edge: rgba(255, 255, 255, 0.08);
  --text: #f4f4f6;
  --label: #d0d0d6;
  --link: #ffb4bd;
  --red: #c8102e;
  --plastic: linear-gradient(#f6f6f8, #cdcdd3);
  --plastic-text: #26262a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--body-bottom); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(var(--body-top), var(--body-bottom));
  font: 500 clamp(20px, 1.2vw + 16px, 23px) / 1.5 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); }
p { margin: 0 0 18px; color: var(--label); }
img { max-width: 100%; height: auto; }

.bar, main, .foot {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left));
}
.bar { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 800; font-size: 26px; text-decoration: none; }
.brand img { border-radius: 10px; }
.barEnd { display: flex; align-items: center; gap: 22px; }
.barLink { color: var(--text); font-weight: 650; text-decoration: none; }

h1 { margin: 0 0 24px; font-size: clamp(50px, 6.6vw, 84px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.big { margin: 0 0 22px; font-size: clamp(36px, 4vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: clamp(23px, 1.8vw + 16px, 30px); line-height: 1.35; color: var(--text); }
.phone { display: block; border-radius: 36px; border: 1px solid var(--edge); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

.hero { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; column-gap: 64px; padding-block: 16px 96px; }
.hero h1 { align-self: end; }
.heroMore { align-self: start; }
.frame { grid-column: 2; grid-row: 1 / 3; }
/* The way to the App Store: no link yet (APP_STORE in site.js) it reads as a promise, not a button. */
.store { display: inline-block; margin-top: 10px; padding: 14px 24px; border-radius: 14px; color: var(--text); font-weight: 750; line-height: 1.2; text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28); }
.store[href] { color: #fff; background: #101012; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35); }
.store.small { margin: 0; padding: 9px 14px; border-radius: 11px; font-size: 17px; white-space: nowrap; }

/* The app's main screen, built in the page. Every size is the app's own, in its points
   (ContentView, AtomView, ChordCell, Theme, InstrumentBar), so the screen scales as one. */
:root { --pt: calc(100cqw / 402); }
.frame {
  --h: clamp(680px, calc(100svh - 130px), 874px);
  height: var(--h);
  width: calc(var(--h) * 402 / 874 + 20px);
  padding: 10px;
  border-radius: 58px;
  background: #101012;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 28px 70px rgba(0, 0, 0, 0.5);
}
.app { height: 100%; container-type: inline-size; overflow: hidden; border-radius: 48px; background: linear-gradient(var(--body-top), var(--body-bottom)); }
.screen { position: relative; display: flex; flex-direction: column; height: 100%; font-family: "Archivo", system-ui, sans-serif; line-height: 1.1; color: #f4f4f6; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* No weight of its own: what comes after decides each button's type. */
:where(.screen button) { font: inherit; color: inherit; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; }
.screen button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.sign { font-family: -apple-system, system-ui, sans-serif; font-weight: 900; font-size: 1.1em; }

.status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(62 * var(--pt)); padding: calc(10 * var(--pt)) calc(32 * var(--pt)) 0 calc(48 * var(--pt)); }
.status .time { font: 600 calc(17 * var(--pt)) -apple-system, system-ui, sans-serif; }
.status .island { position: absolute; left: 50%; top: calc(11 * var(--pt)); width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); margin-left: calc(-62 * var(--pt)); border-radius: calc(18 * var(--pt)); background: #000; }
.status .battery { width: calc(64 * var(--pt)); height: calc(24 * var(--pt)); fill: #fff; }
.home { flex: none; display: flex; align-items: center; justify-content: center; height: calc(26 * var(--pt)); }
.home span { width: calc(139 * var(--pt)); height: calc(5 * var(--pt)); border-radius: calc(3 * var(--pt)); background: #fff; }

/* LEDCap: the plastic cap, with room for a finger around it. */
.cap { flex: none; padding: calc(6 * var(--pt)) calc(4 * var(--pt)); border: 0; background: none; }
.face { display: flex; align-items: center; justify-content: center; width: calc(36 * var(--pt)); height: calc(32 * var(--pt)); border-radius: calc(7 * var(--pt)); color: #26262a; background: linear-gradient(rgba(246, 246, 248, 0.94), rgba(205, 205, 211, 0.86)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 calc(1 * var(--pt)) calc(2 * var(--pt)) rgba(0, 0, 0, 0.35); }
.cap.lit .face, .cap.touching .face { color: #fff; background: radial-gradient(circle calc(140 * var(--pt)), #e3263f, #a80c25); box-shadow: inset 0 0 0 1px #f07a8a, 0 0 calc(8 * var(--pt)) rgba(200, 16, 46, 0.65); }
.face svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); fill: currentColor; }
.topBar { flex: none; display: flex; align-items: center; height: calc(64 * var(--pt)); padding-inline: calc(6 * var(--pt)); }
.spring { flex: 1; }
.key .face { width: calc(44 * var(--pt)); height: calc(38 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 800; white-space: nowrap; letter-spacing: 0; }
.key .face.long { font-size: calc(15 * var(--pt)); }
.mode .face { font-size: calc(12 * var(--pt)); font-weight: 700; letter-spacing: calc(0.5 * var(--pt)); }
.plus .face { width: calc(34 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 800; letter-spacing: calc(0.5 * var(--pt)); }
.raise .face { width: calc(34 * var(--pt)); font-size: calc(17 * var(--pt)); }
.pedal .face { flex-direction: column; width: calc(38 * var(--pt)); }
.pedal i { display: block; width: calc(28 * var(--pt)); height: calc(15 * var(--pt)); background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.pedal b { font-size: calc(8 * var(--pt)); font-weight: 800; }

.instruments { flex: none; display: flex; gap: calc(6 * var(--pt)); padding: 0 calc(16 * var(--pt)) calc(4 * var(--pt)); }
.instrument { flex: 1 1 0; min-width: 0; padding-inline: 0; }
.instrument .face { flex-direction: column; gap: calc(1 * var(--pt)); width: 100%; height: calc(40 * var(--pt)); padding-inline: calc(2 * var(--pt)); }
.instrument i { display: block; flex: none; width: calc(34 * var(--pt)); height: calc(24 * var(--pt)); background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.instrument b { font-size: calc(8.5 * var(--pt)); font-weight: 800; letter-spacing: calc(0.3 * var(--pt)); white-space: nowrap; }

/* The pads: two across, three down, each a big chord with its eight places around it. */
.playing { position: relative; flex: 1; min-height: 0; display: flex; }
.grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: calc(8 * var(--pt)); padding: calc(4 * var(--pt)) calc(10 * var(--pt)) calc(8 * var(--pt)); touch-action: manipulation; }
.atom { min-height: 0; min-width: 0; display: grid; grid-template-columns: 0.3fr 0.4fr 0.3fr; grid-template-rows: 0.285fr 0.43fr 0.285fr; gap: calc(3 * var(--pt)); padding: calc(3 * var(--pt)); border-radius: calc(14 * var(--pt)); background: #1f1f23; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.chord { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 0 calc(2 * var(--pt)); border: 0; overflow: visible; white-space: nowrap; font-weight: 800; }
.sat { border-radius: calc(6 * var(--pt)); font-size: calc(18 * var(--pt) * var(--fit, 1)); color: #f4f4f6; background: #1e1e22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sat.long { font-size: calc(14 * var(--pt) * var(--fit, 1)); }
.sat.played { color: #c6c6cd; }
.sat.faded { color: #5e5e66; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.hub { border-radius: calc(12 * var(--pt)); font-size: calc(28 * var(--pt) * var(--fit, 1)); color: #f4f4f6; background: #2a2a2e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(4 * var(--pt)) calc(5 * var(--pt)) rgba(0, 0, 0, 0.5); }
.hub.tonic { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #c8102e, 0 calc(4 * var(--pt)) calc(5 * var(--pt)) rgba(0, 0, 0, 0.5); }
.free { border-radius: calc(6 * var(--pt)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.chord.on { z-index: 1; color: #fff; background: radial-gradient(circle calc(140 * var(--pt)), #e3263f, #a80c25); box-shadow: inset 0 0 0 1px #f07a8a, 0 0 calc(18 * var(--pt)) rgba(200, 16, 46, 0.7); }
/* SlideMarks: how far a slide went, and the touch's own level. */
.level { position: absolute; right: calc(2 * var(--pt)); top: 20%; width: calc(3 * var(--pt)); height: 60%; border-radius: calc(2 * var(--pt)); background: rgba(255, 255, 255, 0.2); }
.level b { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill) * 100%); border-radius: inherit; background: rgba(255, 255, 255, 0.9); }
.level u { position: absolute; left: calc(-2 * var(--pt)); width: calc(7 * var(--pt)); height: calc(1.5 * var(--pt)); bottom: calc(var(--tick) * 100%); background: rgba(255, 255, 255, 0.9); }

/* BarPanel: an instrument's options, over the top of the pads. */
.panel { position: absolute; left: calc(10 * var(--pt)); right: calc(10 * var(--pt)); top: calc(10 * var(--pt)); z-index: 2; padding: 0 calc(16 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(20 * var(--pt)); background: #1e1e22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 calc(20 * var(--pt)) rgba(0, 0, 0, 0.5); }
.panel[hidden] { display: none; }
.panelTop { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-right: calc(-10 * var(--pt)); }
.panelTop i { display: block; width: calc(34 * var(--pt)); height: calc(24 * var(--pt)); background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.panelTop h3 { flex: 1; margin: 0; font-size: calc(15 * var(--pt)); font-weight: 800; letter-spacing: calc(0.5 * var(--pt)); }
.panelTop .cap .face { width: calc(60 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 800; letter-spacing: calc(0.5 * var(--pt)); }
.close { display: flex; align-items: center; justify-content: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); padding: 0; border: 0; background: none; }
.close svg, .bubble button svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.segments { display: flex; margin-bottom: calc(6 * var(--pt)); padding: calc(2 * var(--pt)); border-radius: calc(9 * var(--pt)); background: rgba(118, 118, 128, 0.24); }
.segments button { flex: 1; height: calc(28 * var(--pt)); padding: 0; border: 0; border-radius: calc(7 * var(--pt)); background: none; font: 500 calc(13 * var(--pt)) -apple-system, system-ui, sans-serif; }
.segments button.chosen { background: #636366; font-weight: 600; }
.row { display: flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(36 * var(--pt)); }
.row + .row { margin-top: calc(6 * var(--pt)); }
.row > b { width: calc(64 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 800; letter-spacing: calc(0.5 * var(--pt)); }
.row > span { width: calc(64 * var(--pt)); text-align: right; font-size: calc(15 * var(--pt)); font-weight: 800; font-variant-numeric: tabular-nums; }
.fader { position: relative; flex: 1; align-self: stretch; cursor: pointer; touch-action: none; }
.fader:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fader::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5 * var(--pt)); height: calc(3 * var(--pt)); border-radius: calc(2 * var(--pt)); background: rgba(255, 255, 255, 0.16); }
.fader .fill { position: absolute; left: 0; top: calc(50% - 1.5 * var(--pt)); height: calc(3 * var(--pt)); width: calc(var(--at) * 100%); border-radius: calc(2 * var(--pt)); background: #c8102e; }
/* The fader's cap, seen from above: white plastic with a dark line across its middle. */
.fader .thumb { position: absolute; top: calc(50% - 13 * var(--pt)); left: calc(var(--at) * (100% - 14 * var(--pt))); width: calc(14 * var(--pt)); height: calc(26 * var(--pt)); border-radius: calc(3 * var(--pt)); background: linear-gradient(90deg, transparent calc(50% - 5.5 * var(--pt)), #8c8c8c 0 calc(50% - 4.5 * var(--pt)), transparent 0 calc(50% + 4.5 * var(--pt)), #8c8c8c 0 calc(50% + 5.5 * var(--pt)), transparent 0), linear-gradient(90deg, transparent calc(50% - 1 * var(--pt)), #26262a 0 calc(50% + 1 * var(--pt)), transparent 0), linear-gradient(#f7f7f7, #c7c7c7); box-shadow: 0 calc(1.5 * var(--pt)) calc(2.5 * var(--pt)) rgba(0, 0, 0, 0.6); }

/* The app's hint: only its X takes a touch, a finger on it plays the pad under it. */
.bubble { position: absolute; z-index: 3; display: flex; align-items: flex-start; width: calc(270 * var(--pt)); border-radius: calc(12 * var(--pt)); color: #141416; background: #ececee; box-shadow: 0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.45); pointer-events: none; }
.bubble[hidden] { display: none; }
.bubble p { flex: 1; margin: 0; padding: calc(12 * var(--pt)) 0 calc(12 * var(--pt)) calc(14 * var(--pt)); color: inherit; font-size: calc(14 * var(--pt)); font-weight: 700; line-height: 1.2; }
.bubble button { flex: none; display: flex; align-items: center; justify-content: center; width: calc(36 * var(--pt)); height: calc(40 * var(--pt)); padding: 0; border: 0; background: none; color: #55555c; pointer-events: auto; }
.bubble button svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.bubble .arrow { position: absolute; top: calc(-5 * var(--pt)); left: var(--arrow); width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); margin-left: calc(-6 * var(--pt)); background: inherit; transform: rotate(45deg); }

/* Stop: a near-white frame around the whole screen, as in the app. */
.screen.stopped::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: calc(44 * var(--pt)); box-shadow: inset 0 0 0 calc(5 * var(--pt)) #ececee; pointer-events: none; }
.noscript { padding: 16px; }

.moment { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; padding-bottom: 104px; }
.moment.flip { grid-template-columns: 1fr 1.25fr; }
.moment .phone { justify-self: center; width: min(100%, 340px); }

/* The song playing as the page scrolls (tour.js): the phone stays, the text passes beside it,
   each part of it holding until the next pushes it away. */
.moment.tour { --tourH: min(calc(100svh - 48px), 874px); grid-template-columns: 1fr auto; align-items: start; }
.tourPhone { position: sticky; top: calc((100svh - var(--tourH)) / 2); pointer-events: none; }
.tourPhone .frame { --h: var(--tourH); }
.tour .beat { min-height: 170svh; }
.tour .beat:first-child { min-height: 70svh; }
.tour .beat:last-child { min-height: 140svh; }
.tour .beat > div { position: sticky; top: 28svh; padding-bottom: 56px; opacity: 0.3; transition: opacity 0.3s; }
.tour .beat.now > div { opacity: 1; }
.tour .beat p { font-size: clamp(23px, 1.8vw + 16px, 30px); line-height: 1.35; color: var(--text); }

/* The band's page inside that phone, at its sizes on a phone (viewer.css), in the phone's points. */
.band { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 calc(16 * var(--pt)); }
.bandTop { flex: none; display: flex; align-items: center; gap: calc(5 * var(--pt)); padding: calc(8 * var(--pt)) 0 calc(6 * var(--pt)); }
.bandLogo { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(8 * var(--pt)); box-shadow: 0 0 calc(12 * var(--pt)) rgba(200, 16, 46, 0.4); }
.bandKey { display: flex; flex-direction: column; min-width: calc(64 * var(--pt)); }
.bandCaption { color: #b4b4bb; font-size: calc(11 * var(--pt)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.bandKeyValue { display: flex; align-items: center; gap: calc(5 * var(--pt)); font-size: calc(21 * var(--pt)); font-weight: 800; }
.bandKeyValue svg { width: calc(12 * var(--pt)); height: calc(8 * var(--pt)); fill: none; stroke: #b4b4bb; stroke-width: 2; }
.bandDot { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); margin-inline: calc(4 * var(--pt)); border-radius: 50%; background: #c8102e; box-shadow: 0 0 calc(8 * var(--pt)) #c8102e; }
.bandIcon { display: flex; padding: calc(9 * var(--pt)); border-radius: calc(8 * var(--pt)); color: #b4b4bb; background: #1e1e22; transition: color 0.2s, background 0.2s; }
.bandIcon svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); fill: currentColor; }
.guitarOn .bandGuitar, .namesOn .bandOptions { color: #1e1e22; background: #f4f4f6; }

/* What opens as a reader chooses: the rows grow from nothing, so the song makes room. */
.bandNames, .bandShapes { flex: none; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.25s, opacity 0.25s; }
.bandNames > div, .bandShapes > div { min-height: 0; overflow: hidden; }
.namesOn .bandNames, .guitarOn .bandShapes { grid-template-rows: 1fr; opacity: 1; }
.bandNames > div { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--pt)); }
.bandSegments { display: flex; margin-bottom: calc(6 * var(--pt)); padding: calc(2 * var(--pt)); border-radius: calc(8 * var(--pt)); background: #1e1e22; }
.bandSegments span { display: flex; align-items: center; justify-content: center; min-width: calc(44 * var(--pt)); height: calc(36 * var(--pt)); border-radius: calc(6 * var(--pt)); color: #b4b4bb; font-size: calc(15 * var(--pt)); font-weight: 700; }
.bandSegments span:nth-child(3) { color: #1e1e22; background: #f4f4f6; }
.bandShapes > div { display: flex; align-items: flex-end; justify-content: center; gap: calc(12 * var(--pt)); }
.bandShapeName { margin-bottom: calc(10 * var(--pt)); min-width: 2.5em; text-align: right; font-size: calc(20 * var(--pt)); font-weight: 800; }
.bandShapeRow { display: flex; align-items: flex-end; gap: calc(10 * var(--pt)); padding-bottom: calc(4 * var(--pt)); color: #b4b4bb; }
.bandShapeRow svg { display: block; width: calc(44 * var(--pt)); height: auto; }
.bandShapeRow svg:first-child { width: calc(68 * var(--pt)); }
.bandShapeRow line { stroke: currentColor; stroke-width: 1; }
.bandShapeRow .nut { fill: currentColor; }
.bandShapeRow .dot { fill: #f4f4f6; }
.bandShapeRow .open { fill: none; stroke: #f4f4f6; stroke-width: 1.2; }
.bandShapeRow .mute, .bandShapeRow .fret { fill: #b4b4bb; font-size: 10px; font-weight: 700; }

.bandSong { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: calc(8 * var(--pt)); border-top: 1px solid var(--edge); }
.bandTitle { font-size: calc(18 * var(--pt)); font-weight: 800; }
.bandOrder { display: flex; gap: calc(5 * var(--pt)); padding: calc(6 * var(--pt)) 0 calc(4 * var(--pt)); }
.bandStep { min-width: calc(34 * var(--pt)); padding: calc(4 * var(--pt)) calc(7 * var(--pt)); text-align: center; color: #b4b4bb; font-size: calc(15 * var(--pt)); font-weight: 800; background: #2a2a2e; border: 1px solid var(--edge); border-radius: calc(8 * var(--pt)); }
.bandStep.here { color: #fff; background: radial-gradient(circle at center, #e3263f, #a80c25); border-color: #f07a8a; box-shadow: 0 0 calc(10 * var(--pt)) rgba(200, 16, 46, 0.5); }
.bandParts { flex: 1; min-height: 0; overflow: hidden; }
.bandInner { position: relative; transition: transform 0.25s; }
.bandPart { padding: calc(4 * var(--pt)) 0 0; }
.bandLabel { color: #8a8a93; font-size: calc(10 * var(--pt)); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.bandPart.here .bandLabel { color: #f4f4f6; }
.bandChords { display: grid; grid-template-columns: repeat(4, minmax(0, calc(60 * var(--pt)))); gap: calc(4 * var(--pt)); margin-top: calc(2 * var(--pt)); }
.bandC { padding: calc(1 * var(--pt)) calc(2 * var(--pt)); text-align: center; font-size: calc(15 * var(--pt)); font-weight: 800; line-height: 1.1; white-space: nowrap; background: #2a2a2e; border: 1px solid var(--edge); border-radius: calc(6 * var(--pt)); box-shadow: 0 calc(1 * var(--pt)) calc(3 * var(--pt)) rgba(0, 0, 0, 0.4); }
.bandC.lit { background: radial-gradient(circle at center, #e3263f, #a80c25); border-color: #f07a8a; box-shadow: 0 0 calc(16 * var(--pt)) rgba(200, 16, 46, 0.6); }
.bandMade { flex: none; padding: calc(8 * var(--pt)) 0 calc(6 * var(--pt)); text-align: center; color: #b4b4bb; font-size: calc(16 * var(--pt)); font-weight: 500; }

.stage { max-width: 760px; padding-bottom: 80px; }

.story, .price, .support, .text { max-width: 760px; }
.story, .price { padding-bottom: 80px; }
/* A fine line between the sections, the same as above the footer. */
.stage + .story, .story + .price, .price + .support { padding-top: 64px; border-top: 1px solid var(--edge); }
.story p { font-size: clamp(22px, 1.4vw + 16px, 27px); color: var(--text); }
.story .signature { margin-top: 30px; text-align: right; color: var(--label); }
.story .signature b { color: var(--text); font-weight: 800; }
.story .signature span { display: inline-block; font-size: 0.85em; }
.support { padding-bottom: 72px; scroll-margin-top: 20px; }
.support h3 { margin: 32px 0 8px; font-size: 25px; line-height: 1.25; font-weight: 750; }

.text { padding-bottom: 72px; }
.page { margin: 24px 0 8px; font-size: clamp(46px, 6vw, 68px); }
.updated { color: var(--label); }
.text .lead { margin: 26px 0 8px; }
.text h2 { margin: 38px 0 10px; font-size: 29px; line-height: 1.2; font-weight: 750; }

/* The press page. */
.press dl { margin: 22px 0 0; }
.press dt { margin-top: 14px; color: var(--label); font-size: 0.85em; font-weight: 650; }
.press dd { margin: 0; }
.press .story { padding-bottom: 0; }
.press .logo { display: inline-block; margin-top: 6px; }
.press .logo img { display: block; width: 160px; height: 160px; border-radius: 36px; }
.press h3 { margin: 26px 0 12px; font-size: 25px; line-height: 1.25; font-weight: 750; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shots img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 560px) { .shots { grid-template-columns: repeat(2, 1fr); } }

.foot { display: flex; flex-wrap: wrap; gap: 14px 32px; padding-block: 28px max(36px, env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); }
.foot a { color: var(--text); font-weight: 600; }

/* The page's quiet movement (motion.js). Nothing here applies without its class on the page. */
@property --reveal { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes pressed {
  0% { opacity: 0; transform: none; text-shadow: 0 0 0 rgba(227, 38, 63, 0); }
  24% { opacity: 1; transform: translateY(3px) scale(0.99); text-shadow: 0 0 22px rgba(227, 38, 63, 0.42); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 rgba(227, 38, 63, 0); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .motion .bar, .motion main, .motion .foot { position: relative; z-index: 1; }
  .lights { position: fixed; inset: -10vh 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
  .motion .press { opacity: 0; transform-origin: 0 50%; }
  .motion .press.in { animation: pressed 0.75s ease-out both; }
  /* A strum: each block rises a little after the last, its lines showing from the top down. */
  .motion .strum { --reveal: 0%; transform: translateY(10px); -webkit-mask-image: linear-gradient(#000 calc(var(--reveal) - 35%), transparent var(--reveal)); mask-image: linear-gradient(#000 calc(var(--reveal) - 35%), transparent var(--reveal)); transition: --reveal 0.8s linear, transform 0.8s ease-out; transition-delay: calc(0.12s + var(--string) * 0.09s); }
  .motion .strum.in { --reveal: 135%; transform: none; }
  /* A mask would cut the button's shadow. */
  .motion .store.strum { opacity: 0; -webkit-mask-image: none; mask-image: none; transition-property: opacity, transform; }
  .motion .store.strum.in { opacity: 1; }
  .motion .glow { opacity: 0.32; transition: opacity 0.7s ease-out; }
  .motion .glow.in { opacity: 1; }
}

@media (max-width: 359px) {
  .store.small { display: none; }
}

@media (max-width: 800px) {
  .bar { padding-block: 10px 6px; }
  .brand { font-size: 22px; }
  .brand img { width: 34px; height: 34px; border-radius: 8px; }
  .barEnd .barLink { display: none; }
  .store.small { padding: 8px 11px; font-size: 15px; }
  h1 { font-size: clamp(34px, 9.6vw, 46px); margin-bottom: 12px; }
  .hero { display: block; padding-block: 0 64px; }
  /* On a phone the screen fills the glass under the title; a little shorter than in the app. */
  .frame { width: min(100vw, 520px); height: clamp(520px, calc(100svh - 148px), calc(min(100vw, 520px) * 2)); margin-left: calc(50% - min(50vw, 260px)); padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .app { border-radius: 0; background: none; }
  .status, .home { display: none; }
  .atom { grid-template-rows: 0.31fr 0.38fr 0.31fr; }
  .screen.stopped::after { border-radius: calc(20 * var(--pt)); }
  .heroMore { margin-top: 28px; }
  .moment, .moment.flip { grid-template-columns: 1fr; gap: 36px; }
  .moment { padding-bottom: 80px; }
  .moment.flip > div { order: -1; }
  .phone { border-radius: 28px; }
  .moment .phone { width: min(84%, 340px); }
  /* The phone on top, as wide as the glass with the band's page at its real size, so the song
     is shorter rather than smaller; the text passes under it. */
  .moment.tour { --tourH: min(60svh, calc(min(100vw, 520px) * 1.4)); display: flex; flex-direction: column; gap: 0; }
  .tourPhone { order: -1; top: 0; z-index: 2; display: flex; justify-content: center; height: var(--tourH); margin-inline: calc(50% - 50vw); background: #46464c; }
  .tourPhone::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(#46464c, rgba(70, 70, 76, 0)); }
  .tourPhone .frame { width: min(100vw, 520px); height: 100%; margin: 0; }
  .bandMade { display: none; }
  .tour .beat { min-height: 130svh; }
  .tour .beat:first-child { min-height: 60svh; }
  .tour .beat:last-child { min-height: 110svh; }
  .tour .beat > div { top: calc(var(--tourH) + 18px); }
  .tour .beat p { font-size: 22px; }
}