/* Fledge for musicians (/music/). Its own look, separate from styles.css:
   dark, brutalist, one red that only marks what to click. */

@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Inter Tight", "Arial Black", Impact, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;

  --color-bg: #0a0a0a;
  --color-text: #f2f0eb;
  --color-text-muted: #a3a097;
  --color-line: #f2f0eb;
  --color-accent: #ff2a1a;
  --color-on-accent: #0a0a0a;

  --border: 3px solid var(--color-line);

  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-h2: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --text-h1: clamp(3.25rem, 1.8rem + 8vw, 8.5rem);

  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  --page-max: 110rem;
  --gutter: clamp(1rem, 0.5rem + 3vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.6;
}

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

::selection { background: var(--color-accent); color: var(--color-on-accent); }

.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;
}

/* ---------- Page frame ---------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  border-left: var(--border);
  border-right: var(--border);
}

.wrap { padding: 0 var(--gutter); }

.top-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs) var(--gutter);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
}
.top-bar a { text-decoration: none; }
.top-bar a:hover { color: inherit; text-decoration: underline; }

.section { border-top: var(--border); padding: var(--space-xl) 0; }

.label {
  margin: 0 0 var(--space-m);
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

h2 { font-size: var(--text-h2); max-width: 14ch; }

p { margin: 0; max-width: 60ch; }

/* ---------- Hero ---------- */

.hero { padding: var(--space-xl) 0; }

.hero h1 { font-size: var(--text-h1); max-width: 10ch; }

.mark {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0 0.08em;
}

.hero-lead {
  margin-top: var(--space-l);
  font-size: var(--text-lead);
  max-width: 44ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
}

.hero-note { font-size: var(--text-small); color: var(--color-text-muted); }

/* /music/confirmed/: the page fills the screen so the footer sits at the bottom. */
.confirmed { min-height: 70vh; }

/* ---------- Button ---------- */

.btn {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  border: 3px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 700 var(--text-body) / 1.2 var(--font-mono);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
/* Button hover only above tablet width, and only where there's a mouse. */
@media (min-width: 64.0625rem) and (hover: hover) {
  .btn:hover { background: var(--color-bg); color: var(--color-accent); }
}
.btn:disabled { cursor: wait; }

/* ---------- Numbered list (what you get) ---------- */

.list {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  border-top: var(--border);
}

.list li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-bottom: var(--border);
}

.list .num { font-weight: 700; color: var(--color-accent); }

.list h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.list p { color: var(--color-text-muted); }

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border: var(--border);
}

.steps li { padding: var(--space-m); border: var(--border); margin: -1.5px; }

.steps .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  margin-bottom: var(--space-s);
}

.steps h3 { font-size: 1.5rem; line-height: 1.05; margin-bottom: 0.5rem; }
.steps p { color: var(--color-text-muted); }

/* ---------- Example (henrikpultzmelbye.com) ---------- */

.example { margin: var(--space-l) 0 0; border: var(--border); }

.example-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-bg);
}

/* Phones get a still image instead of the video (the video is never fetched there). */
.example-still { display: none; width: 100%; height: auto; }
@media (max-width: 40rem) {
  .example-video, .example-toggle { display: none; }
  .example-still { display: block; }
}

.example-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
  border-top: var(--border);
  font-weight: 700;
  text-transform: uppercase;
}

.example-toggle {
  padding: 0.5rem 0.9rem;
  border: 3px solid var(--color-line);
  background: transparent;
  color: var(--color-text);
  font: 700 var(--text-small) / 1.2 var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 64.0625rem) and (hover: hover) {
  .example-toggle:hover { background: var(--color-text); color: var(--color-bg); }
}

/* ---------- Proof (own site) and the build-it-yourself question ---------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-l);
  align-items: start;
}

.proof-text p + p { margin-top: var(--space-s); }
.diy-title { max-width: 18ch; }
.proof-text { font-size: var(--text-lead); }

.facts { margin: var(--space-m) 0 0; border: var(--border); font-size: var(--text-body); }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  border-bottom: var(--border);
}
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--color-text-muted); text-transform: uppercase; font-size: var(--text-small); }
.facts dd { margin: 0; font-weight: 700; text-align: right; }

/* ---------- Waitlist ---------- */

.waitlist h2 { max-width: 12ch; }
.waitlist-intro { margin-top: var(--space-m); font-size: var(--text-lead); }

.form { margin-top: var(--space-l); max-width: 36rem; }

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--text-small);
  font-weight: 700;
  text-transform: uppercase;
}

.form-row { display: flex; flex-wrap: wrap; }

.form-row input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: var(--border);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body) / 1.2 var(--font-mono);
}
.form-row input:focus-visible { outline-offset: 0; }
.form-row .btn { flex: 0 0 auto; }

.form-status { margin-top: var(--space-s); font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--color-accent); }

.small-print { margin-top: var(--space-s); font-size: var(--text-small); color: var(--color-text-muted); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sent { margin-top: var(--space-l); padding: var(--space-m); border: 3px solid var(--color-accent); max-width: 36rem; }
.sent:focus { outline: none; }
.sent h3 { font-size: 2rem; margin-bottom: 0.5rem; }

/* The waitlist form in the hero. */
.hero .form { margin-top: var(--space-l); }
.hero .sent { margin-top: var(--space-l); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: var(--border);
  padding: var(--space-m) var(--gutter);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---------- Workshop (/music/workshop/) ---------- */

.workshop-note { margin-top: var(--space-l); padding: var(--space-m); border: var(--border); max-width: 60ch; }
#book .hero-actions { margin-top: var(--space-l); }
#book .small-print { max-width: 60ch; margin-top: var(--space-m); }
.facts div[hidden] { display: none; }
/* Button at the end of a section (waitlist on /music/, booking on /music/workshop/). */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); margin-top: var(--space-l); }

/* /music/: workshop strip under the top bar, until 10 November 2026. */
.workshop-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem var(--space-m);
  padding: var(--space-xs) var(--gutter);
  border-bottom: var(--border);
  font-size: var(--text-small);
  text-decoration: none;
}
.workshop-strip-go { font-weight: 700; text-transform: uppercase; color: var(--color-accent); }
.workshop-strip:hover .workshop-strip-go { text-decoration: underline; }