/* All colors sampled from background.webp, with the text colors tinted toward its blue. */
:root {
  --night: #04142a; /* dominant background */
  --ice: #e8f0f7;   /* primary text */
  --steel: #a3b8cc; /* secondary text */
  --line: #273a4f;  /* brightest diamond edges */

  --gutter: clamp(2.5rem, 12vw, 6rem);

  /* The SVG viewBox is 1301 by 275. */
  --logo-width: min(100vw - 2 * var(--gutter), 38rem, 95svh);
  --logo-height: calc(var(--logo-width) * 275 / 1301);
}

* { box-sizing: border-box; margin: 0; }

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

body {
  color: var(--ice);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

.hero {
  min-height: 100svh;
  /* Centers the logo on the line one third down the screen. */
  padding: calc(100svh / 3 - var(--logo-height) / 2) var(--gutter) 2rem;
  text-align: center;
  /* Biased right so narrow screens crop to the diamonds instead of the empty middle. */
  background: var(--night) url(background.webp) 78% center / cover no-repeat;
}

.logo {
  width: var(--logo-width);
  margin-inline: auto;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.dates {
  margin-top: clamp(2rem, 7svh, 4.5rem);
  font-size: clamp(1.625rem, 1.15rem + 2.5vw, 3rem);
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.place {
  margin-top: .5rem;
  font-size: clamp(1rem, .9rem + .5vw, 1.3125rem);
  line-height: 1.35;
  text-wrap: balance;
}

.soon {
  margin-top: 1.25rem;
  color: var(--steel);
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
}

footer {
  padding: 2rem var(--gutter) max(2rem, env(safe-area-inset-bottom));
  color: var(--steel);
  font-size: .9375rem;
  text-align: center;
  text-wrap: balance;
}

footer a {
  display: inline-block;
  margin-top: .25rem;
  padding: .25rem;
  color: var(--ice);
}

.imprint {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2rem, 8svh, 5rem) 1.25rem 3rem;
}

.back {
  display: inline-block;
  padding: .25rem;
  margin-left: -.25rem;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}

.imprint h1 {
  margin-top: 2rem;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
}

.imprint h2 {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.25;
}

.imprint h3 {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.35;
}

.imprint p { margin-top: .5rem; }

.imprint h1 + p { margin-top: 1rem; }