:root {
  --night: #07090d;
  --deep: #0c1017;
  --text: #ece6dc;
  --muted: #9ba1ab;
  --gold: #e9b872;
  --line: rgba(233, 184, 114, .22);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: #f6d4a0; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* the painting, full screen, with the eclipse held near the centre on every shape of screen */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-img, .hero-air {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-img {
  object-fit: cover;
  object-position: 49.7% 50%;   /* the ring's centre in the painting: x 1271 of 2560 */
  z-index: -2;
}
.hero-air { z-index: -1; pointer-events: none; }

.hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 1rem max(2.5rem, env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(to top, rgba(7, 9, 13, .92) 0%, rgba(7, 9, 13, .55) 55%, rgba(7, 9, 13, 0) 100%);
  padding-top: 7rem;
}

h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-indent: .2em;            /* letter-spacing adds space after the last letter; keep the line centred */
  text-wrap: balance;
}
.tagline {
  margin: .6rem auto 1.6rem;
  max-width: 36rem;
  text-wrap: balance;
  color: var(--muted);
}
.listen {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .08em;
  font-size: .95rem;
  background: rgba(7, 9, 13, .35);
  transition: background .3s, color .3s;
}
.listen:hover { background: var(--gold); color: var(--night); }

main {
  max-width: 38rem;
  margin: 0 auto;
  padding: 4rem 1rem 2rem;
}
section + section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--line); }
h2 {
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
p { margin: 0 0 1rem; }

footer {
  max-width: 38rem;
  margin: 2rem auto 0;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
footer p { margin: .3rem 0; }
.quiet { opacity: .7; font-style: italic; }

/* the privacy page */
.page { max-width: 42rem; margin: 0 auto; padding: 3rem 1rem 2rem; }
.page header { margin-bottom: 2.5rem; }
.page .home {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--text); text-decoration: none; letter-spacing: .18em; text-transform: uppercase; font-size: .8rem;
}
.page .home img { width: 32px; height: 32px; border-radius: 50%; }
.page h1 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); letter-spacing: .12em; text-indent: 0; margin-top: 2rem; }
.page h2 { margin-top: 2.5rem; }
.page ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.page li { margin-bottom: .5rem; }
.page .updated { color: var(--muted); font-size: .9rem; }