/* amplifymusic.fm — landing page and text pages. Build spec: ../design/SPEC.md.
   Every size is in design units: 1u = 1px on a 390-wide phone (SPEC §1). */

/* ---------- §1 Design unit ---------- */
:root { --u: calc(min(100vw, 480px) / 390); }
@media (min-width: 481px) {
  :root { --u: calc(min(480px, 100vh * 390 / 844) / 390); }
}

/* ---------- Font — Clash Display, self-hosted (fonts/FFL.txt), four weights only ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url("fonts/ClashDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url("fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url("fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url("fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- §2 Tokens ---------- */
:root {
  --ink: #1A1A1A;
  --cream: #F4F1EB;
  --coral: #E0442A;
  --orange: #D9621A;
  --lime: #BDC334;
  --muted: #D8D5CF;
  --fine: #B9B5AE;
}

/* ---------- Base ---------- */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Clash Display', system-ui, sans-serif;
  letter-spacing: 0.021em;
}
h1, h2, p, ul { margin: 0; }
img { display: block; }
a { color: var(--cream); }
a:hover { color: var(--coral); }
button, input { font-family: inherit; letter-spacing: inherit; border-radius: 0; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex="-1"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Centered column; #1A1A1A fills both sides on wider screens (SPEC §1). */
.page {
  width: calc(390 * var(--u));
  margin: 0 auto;
}

/* Wordmark style, measured from the hero wordmark (SPEC §2). */
.wm {
  color: #1A1A1A;
  font-weight: 700;
  -webkit-text-stroke: .02em #FFFFFF;
  text-shadow: -.078em .085em 0 #F4F1EB;
}

/* ---------- Shared section layers ----------
   background (0) < grain (1) < art (2–5) < bar (4) < text and cards (3+) */
.section {
  position: relative;
  overflow: hidden;
  height: calc(844 * var(--u));
}
.divided { border-top: calc(2 * var(--u)) solid var(--cream); }

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(390 * var(--u));
  height: calc(844 * var(--u));
  z-index: 0;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("assets/grain.png");
  background-repeat: repeat;
  opacity: 0.6;
  pointer-events: none;
}

.bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(12.67 * var(--u));
  border-left: calc(2.67 * var(--u)) solid #F4F1EB;
  z-index: 4;
}
.bar-coral { background: var(--coral); }
.bar-orange { background: var(--orange); }
.bar-lime { background: var(--lime); }

/* ---------- §4.1 Hero ---------- */
.hero-firework {
  position: absolute;
  left: calc(107.33 * var(--u));
  top: calc(108 * var(--u));
  width: calc(180 * var(--u));
  height: calc(180 * var(--u));
  z-index: 2;
}
.hero-art {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(390 * var(--u));
  height: calc(844 * var(--u));
  z-index: 3;
}
.hero-planet {
  position: absolute;
  left: calc(33.33 * var(--u));
  top: calc(461.33 * var(--u));
  width: calc(311.33 * var(--u));
  height: calc(311.33 * var(--u));
  z-index: 4;
}
.hero-wordmark {
  position: absolute;
  left: calc(13.67 * var(--u));
  top: calc(576 * var(--u));
  width: calc(347.67 * var(--u));
  height: calc(114.67 * var(--u));
  z-index: 5;
}
.hero-descriptor {
  position: absolute;
  left: 0;
  top: calc(546 * var(--u));
  width: calc(376 * var(--u));
  display: flex;
  justify-content: center;
  z-index: 6;
}
.hero-descriptor span {
  background: var(--ink);
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero-scroll {
  position: absolute;
  left: calc(138.9 * var(--u));
  top: calc(768 * var(--u));
  width: calc(100 * var(--u));
  min-height: max(calc(60 * var(--u)), 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--cream);
  text-decoration: none;
  z-index: 7;
}
.hero-scroll:hover { color: var(--cream); }
.nudge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
}
.hero-scroll-label {
  font-size: calc(11 * var(--u));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero-scroll svg {
  display: block;
  width: calc(21 * var(--u));
  height: calc(28 * var(--u));
}
/* Transparent hit area centered on the JOIN THE LIST button art
   (left 85.34, top 656, 207.67 × 34), grown to at least 44px tall. */
.hero-join {
  position: absolute;
  left: calc(85.34 * var(--u));
  top: calc((656 + 17) * var(--u));
  width: calc(207.67 * var(--u));
  height: max(calc(34 * var(--u)), 44px);
  transform: translateY(-50%);
  z-index: 8;
}
/* Header ribbon: live text + Instagram glyph over hero-art's baked strip
   (0, 0, 374.33 × 43). Text at the left, glyph at the right, each inset 16u:
   ribbon edge → text, and glyph → white vertical rule. */
.hero-header {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: calc(374.33 * var(--u));
  height: calc(43 * var(--u));
  padding: 0 calc(16 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 6;
}
/* Ink cover for the baked text, held 2.33u / 2u off the white rules so
   rounding at any --u can never paint over them. */
.hero-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(372 * var(--u));
  height: calc(41 * var(--u));
  background: var(--ink);
  z-index: -1;
}
/* Measured from the baked text: Clash Display Light, 0.45em tracking. */
.hero-header-text {
  margin-right: -.45em; /* cancel the trailing letter-spacing so the box ends at the ink */
  font-size: calc(18 * var(--u));
  line-height: 1;
  font-weight: 300;
  letter-spacing: .45em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
}
.hero-ig {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.hero-ig img {
  width: 100%;
  height: 100%;
}
/* Invisible 44px hit area centered on the glyph (16u never exceeds 44px), clamped so it
   never starts above the hero's top edge, where overflow:hidden would clip it. */
.hero-ig::after {
  content: "";
  position: absolute;
  left: 50%;
  top: max(calc(8 * var(--u) - 22px), calc(-13.5 * var(--u)));
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
}

/* ---------- §4.2 Page 2 — coral ---------- */
.p2-quarter {
  position: absolute;
  left: calc(-95 * var(--u));
  top: calc(-95 * var(--u));
  width: calc(190 * var(--u));
  height: calc(190 * var(--u));
  border-radius: 50%;
  background: var(--coral);
  z-index: 2;
}
.p2-firework {
  position: absolute;
  width: calc(240 * var(--u));
  height: calc(240 * var(--u));
  z-index: 2;
}
.p2-firework-top { left: calc(257 * var(--u)); top: calc(-8 * var(--u)); }
.p2-firework-bottom { left: calc(-120 * var(--u)); top: calc(676 * var(--u)); }
.p2-text {
  position: absolute;
  left: calc(20 * var(--u));
  right: calc(28 * var(--u));
  top: calc(150 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  z-index: 3;
}
.p2-heading {
  font-size: calc(50 * var(--u));
  line-height: 1.05;
  font-weight: 700;
  color: var(--coral);
}
.p2-lead {
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  font-weight: 300;
}
.p2-body {
  margin-top: calc(36 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.3;
  font-weight: 300;
}
.p2-hl { color: var(--coral); font-weight: 700; }

/* ---------- §4.3 Page 3 — orange ---------- */
.p3-cluster-top {
  position: absolute;
  left: calc(142 * var(--u));
  top: 0;
  width: calc(236 * var(--u));
  height: calc(257.6 * var(--u));
  z-index: 2;
}
.p3-target {
  position: absolute;
  left: calc(34 * var(--u));
  top: calc(120 * var(--u));
  width: calc(96.2 * var(--u));
  height: calc(96.2 * var(--u));
  z-index: 2;
}
.p3-sphere {
  position: absolute;
  left: calc(268 * var(--u));
  top: calc(744 * var(--u));
  width: calc(70 * var(--u));
  height: calc(70 * var(--u));
  border-radius: 50%;
  z-index: 2;
}
.p3-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--orange);
  border: calc(1.5 * var(--u)) solid #1A1A1A;
  z-index: 2;
}
.p3-dot-1 { left: calc(222 * var(--u)); top: calc(776 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.p3-dot-2 { left: calc(200 * var(--u)); top: calc(744 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.p3-dot-3 { left: calc(236 * var(--u)); top: calc(726 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.p3-text {
  position: absolute;
  left: calc(20 * var(--u));
  right: calc(28 * var(--u));
  top: calc(270 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  z-index: 3;
}
.p3-line {
  font-size: calc(32 * var(--u));
  line-height: 1.18;
  font-weight: 300;
}
.p3-hl { color: var(--orange); font-weight: 600; }
.p3-wm {
  font-size: calc(58 * var(--u));
  line-height: 1;
  margin-top: calc(6 * var(--u));
}

/* ---------- §4.4 Page 4 — lime (flows with its content) ---------- */
.p4 {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(104 * var(--u)) calc(28 * var(--u)) calc(150 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  background: var(--ink);
}
.p4-bg-top {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(390 * var(--u));
  height: calc(420 * var(--u));
  z-index: 0;
}
.p4-bg-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(390 * var(--u));
  height: calc(320 * var(--u));
  z-index: 0;
}
.p4-cluster-top {
  position: absolute;
  left: calc(301.5 * var(--u));
  top: 0;
  width: calc(76.5 * var(--u));
  height: calc(118.8 * var(--u));
  z-index: 2;
}
.p4-cluster-bottom {
  position: absolute;
  left: calc(229.5 * var(--u));
  bottom: 0;
  width: calc(148.5 * var(--u));
  height: calc(93.6 * var(--u));
  z-index: 2;
}
.p4-target {
  position: absolute;
  left: calc(60 * var(--u));
  bottom: calc(31 * var(--u));
  width: calc(88.8 * var(--u));
  height: calc(88.8 * var(--u));
  z-index: 2;
}
.p4-heading {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1;
}
.p4-heading-small {
  font-size: calc(25 * var(--u));
  text-transform: uppercase;
  letter-spacing: .03em;
}
.p4-heading-wm { font-size: calc(50 * var(--u)); }
.p4-boxes {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
  padding-top: calc(14 * var(--u));
}
/* Audience toggle: styled with the join role toggle (§4.5); main.js un-hides it. */
.p4-toggle[hidden] { display: none; }
.p4-set {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}
.p4-set[hidden] { display: none; }
.p4-box {
  position: relative;
  border: calc(2 * var(--u)) solid var(--cream);
  background: var(--ink);
  padding: calc(20 * var(--u)) calc(18 * var(--u));
}
.p4-box-indent { margin-left: calc(18 * var(--u)); }
.p4-num {
  position: absolute;
  left: calc(12 * var(--u));
  top: calc(-14 * var(--u));
  padding: 0 calc(6 * var(--u));
  background: var(--ink);
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}
.p4-box p {
  font-size: calc(18 * var(--u));
  line-height: 1.4;
  font-weight: 300;
}
.p4-hl { color: var(--lime); font-weight: 600; }

/* ---------- §4.5 Join ---------- */
.join { height: calc(800 * var(--u)); }
.join-bg { height: calc(800 * var(--u)); }
.join-target {
  position: absolute;
  left: calc(206 * var(--u));
  top: calc(22 * var(--u));
  width: calc(148 * var(--u));
  height: calc(148 * var(--u));
  z-index: 2;
}
.join-card {
  position: absolute;
  left: calc(20 * var(--u));
  right: calc(28 * var(--u));
  top: calc(120 * var(--u));
  box-sizing: border-box;
  background: var(--ink);
  border: calc(2 * var(--u)) solid var(--cream);
  padding: calc(30 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  z-index: 3;
}
.join-heading {
  font-size: calc(34 * var(--u));
  line-height: 1;
}
.join-intro {
  font-size: calc(17 * var(--u));
  line-height: 1.45;
  font-weight: 300;
}
.join-form {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}
.join-form[hidden] { display: none; }
.join-toggle,
.p4-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: calc(2 * var(--u)) solid var(--cream);
}
.join-role,
.p4-role {
  height: max(calc(54 * var(--u)), 44px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.join-role-artist,
.p4-role-artist { border-right: calc(2 * var(--u)) solid var(--cream); }
.join-role-artist[aria-pressed="true"],
.p4-role-artist[aria-pressed="true"] { background: var(--coral); color: var(--ink); }
.join-role-listener[aria-pressed="true"],
.p4-role-listener[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.join-note {
  font-size: calc(15 * var(--u));
  line-height: 1.45;
  color: var(--muted);
}
.join-fields {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.join-label {
  font-size: calc(13 * var(--u));
  text-transform: uppercase;
  letter-spacing: .1em;
}
.join-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: max(calc(56 * var(--u)), 44px);
  margin: 0;
  padding: 0 calc(16 * var(--u));
  background: var(--cream);
  color: var(--ink);
  border: calc(2 * var(--u)) solid var(--cream);
  font-size: calc(15 * var(--u));
}
/* iOS zooms on focus when an input's font-size is under 16px; floor it on touch devices only. */
@media (hover: none) and (pointer: coarse) {
  .join-input { font-size: max(16px, calc(15 * var(--u))); }
}
.join-input::placeholder { color: #8a8782; font-size: calc(13 * var(--u)); }
.join-submit {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: max(calc(56 * var(--u)), 44px);
  margin: 0;
  background: var(--coral);
  color: var(--ink);
  border: calc(2 * var(--u)) solid var(--cream);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
.join-fine {
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  color: var(--fine);
}
.join-fine a { color: var(--fine); }
.join-fine a:hover { color: var(--coral); }
.join-confirm {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--lime);
  padding: calc(20 * var(--u));
}
.join-confirm[hidden] { display: none; }
.join-confirm-title {
  font-size: calc(21 * var(--u));
  font-weight: 600;
  color: var(--lime);
}
.join-confirm-body {
  font-size: calc(16 * var(--u));
  line-height: 1.45;
}
.join-reset {
  align-self: flex-start;
  min-height: 44px;
  margin: 0;
  background: transparent;
  color: var(--cream);
  border: calc(2 * var(--u)) solid var(--cream);
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  font-size: calc(12 * var(--u));
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}
/* Outside the form, the confirmation and the aria-live note, so it survives errors and success. */
.join-follow {
  font-size: calc(15 * var(--u));
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- §4.6 Footer ---------- */
.footer {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: calc(40 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.footer-wm {
  position: relative;
  z-index: 2;
  font-size: calc(40 * var(--u));
  line-height: 1;
}
.footer-lines {
  position: relative;
  z-index: 2;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: calc(16 * var(--u));
}
.footer-lines li {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-lines a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-muted { color: var(--muted); }

/* ---------- §7 Text pages (privacy, support, 404) ---------- */
.text-page {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: calc(844 * var(--u));
  padding: calc(40 * var(--u)) calc(28 * var(--u)) calc(60 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}
.text-wm {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: calc(40 * var(--u));
  line-height: 1;
  text-decoration: none;
}
.text-wm:hover { color: #1A1A1A; }
.text-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}
.text-body h1 {
  font-size: calc(34 * var(--u));
  line-height: 1;
  font-weight: 700;
}
.text-body p {
  font-size: calc(17 * var(--u));
  line-height: 1.45;
  font-weight: 300;
}
.text-body strong { font-weight: 600; }
.text-body .text-muted {
  font-size: calc(15 * var(--u));
  color: var(--muted);
}
.text-body .text-back {
  align-self: flex-start;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: calc(17 * var(--u));
}
/* iOS text sizing floor for tap targets on touch devices, as for .join-input. */
@media (hover: none) and (pointer: coarse) {
  .text-body .text-back { font-size: max(16px, calc(17 * var(--u))); }
}

/* ---------- §5 Motion — all of it gated on no-preference ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(6 * var(--u))); }
  }
  .spin-fw { animation: spin 110s linear infinite; }
  .spin-planet { animation: spin 140s linear infinite; }
  .spin-tgt { animation: spin 40s linear infinite; }
  .nudge { animation: nudge 1.8s ease-in-out infinite; }
}