/* Dark and mobile-first (docs/brief.md). Wider screens only widen the column. */

:root {
  --background: #0b0b0d;
  --surface: #17171b;
  --text: #f2f2f2;
  --muted: #a3a3ad;
  /* The signature pink of the SoundCloud set covers, for the wordmark, links, buttons and gig dates. */
  --accent: #ff66c4;
  --column-width: 40rem;
  --gutter: 1rem;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

main {
  max-width: var(--column-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
}

a {
  color: var(--accent);
}

section {
  margin-top: 2.5rem;
}

h2 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Self-hosted, so the page asks no font service for it (privacy.html, "In short").
   Archivo Narrow by Omnibus-Type, SIL Open Font License 1.1 (fonts/OFL.txt).
   "block" hides the wordmark until the font has loaded: the wider fallback font
   would not fit on a phone and would make the page scroll sideways for a moment. */
@font-face {
  font-family: "Archivo Narrow";
  src: url("fonts/archivo-narrow-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

.hero {
  container-type: inline-size;
  padding: 0 0 0.5rem;
  text-align: center;
}

/* The photo runs to the screen edges on phones and fades into the page at the bottom,
   so the wordmark can sit on the faded part. On wide screens it keeps to the column. */
.hero-photo {
  display: block;
  width: calc(100% + 2 * var(--gutter));
  height: auto;
  max-height: 75vh;
  margin: 0 calc(-1 * var(--gutter));
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}

/* Inside the column the sides fade as well, so the photo has no hard edges. */
@media (min-width: 42rem) {
  .hero-photo {
    width: 100%;
    margin: 0;
    -webkit-mask-image:
      linear-gradient(to bottom, black 55%, transparent),
      linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, black 55%, transparent),
      linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-composite: intersect;
  }
}

/* Wordmark until a logo exists, lettered like the SoundCloud set covers: Archivo Narrow
   in the cover pink with a thin dark outline. paint-order draws the outline behind the
   fill, so it widens the letters instead of eating into them. The set name is about
   6.9 times as wide as the font size, so 13cqi (90 % of the column) keeps it on one line at every width. */
.wordmark {
  position: relative;
  margin: -3.5rem 0 0;
  font-family: "Archivo Narrow", system-ui, sans-serif;
  font-size: clamp(2.25rem, 13cqi, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent);
  -webkit-text-stroke: 0.08em var(--background);
  paint-order: stroke fill;
}

/* "DJ • Hamburg" under the wordmark, as in the SoundCloud profile. */
.role {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.genre {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.links a,
.button {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
}

.links a:hover,
.links a:focus-visible,
.button:hover,
.button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.player {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: 0.5rem;
}

/* The notice and the "Load SoundCloud player" button, shown until the visitor loads the player. */
.player-consent {
  padding: 1.25rem 1rem;
  background: var(--surface);
  border-radius: 0.5rem;
  text-align: center;
}

.player-consent p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* No display rule here, so the hidden attribute keeps working. */
.unload-player {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.gig-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gig-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border-radius: 0.5rem;
}

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

.gig-place {
  grid-column: 1;
  color: var(--muted);
}

.gig-list li a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Past gigs are a record for bookers, so they take less room than upcoming ones. */
.gig-list.past li {
  padding: 0.5rem 1rem;
  background: none;
  border-bottom: 1px solid var(--surface);
  border-radius: 0;
  margin: 0;
}

.gig-list.past time {
  color: var(--muted);
  font-weight: 400;
}

.gig-list.past .gig-place {
  color: var(--text);
}

#gig-status {
  color: var(--muted);
}

.booking p {
  margin: 0 0 1rem;
}

/* The press kit sits inside the booking section, so its heading is one step quieter than the section's. */
.press-kit {
  margin-top: 2.5rem;
}

.press-kit h3 {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The width and height attributes only reserve the space. This keeps the photo inside the column
   and, on wide screens, smaller than the screen's height. */
.press-photo {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: 0.5rem;
}

.photo-credit {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.photo-credit a {
  color: var(--muted);
}

.genre-line {
  margin: 1rem 0 0.5rem;
  font-weight: 700;
  color: var(--accent);
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.downloads .button {
  border-radius: 0.75rem;
}

.file-info {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.button {
  display: inline-block;
  border-color: var(--accent);
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

footer {
  padding: 1.5rem var(--gutter);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

footer p {
  margin: 0 0 0.5rem;
}

footer nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

footer a {
  color: var(--muted);
}

/* The Impressum and the privacy policy: running text with a link back to the page. */
.legal {
  padding-top: 2rem;
}

.legal h1 {
  margin: 1.5rem 0 1rem;
  font-size: 1.75rem;
}

.legal h2 {
  margin-top: 2rem;
}

.legal address {
  font-style: normal;
}

.legal a {
  overflow-wrap: anywhere;
}