:root {
  color-scheme: light;
  --background: #f5ebbd;
  --foreground: #073c2d;
  --line: #073c2d30;
  --font-display: "Bodoni MT", Didot, "Times New Roman", serif;
  --font-utility: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--foreground); }
::selection { background: var(--foreground); color: var(--background); }

.holding-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: max(3rem, env(safe-area-inset-top)) clamp(1.25rem, 6vw, 7rem) max(2.5rem, env(safe-area-inset-bottom));
}
.announcement { width: 100%; align-self: center; padding-block: 3rem 4.5rem; text-align: center; }
.brand { max-width: 70rem; margin: 0 auto; line-height: 0; }
.brand__art {
  display: block;
  width: 100%;
  height: auto;
}
.announcement__title {
  margin: clamp(2.75rem, 6vw, 5.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .045em;
}
.loading-line { width: 4rem; height: 1px; margin: 1.75rem auto 0; background: var(--line); overflow: hidden; }
.loading-line span { display: block; width: 100%; height: 100%; background: var(--foreground); transform-origin: left; animation: slow-fill 7s cubic-bezier(.4,0,.2,1) infinite; }
.location { text-align: center; font: 400 .75rem/1.6 var(--font-utility); letter-spacing: .2em; }
.location p { margin: 0; }
.location span { padding-inline: .5em; }
@keyframes slow-fill {
  0% { transform: scaleX(0); opacity: 0; }
  8% { opacity: .8; }
  75% { transform: scaleX(1); opacity: .8; }
  92%, 100% { transform: scaleX(1); opacity: 0; }
}
@media (max-width: 600px) {
  .holding-page { padding-inline: 1rem; }
  .announcement { padding-block: 3rem; }
  .announcement__title { margin-top: 3rem; }
  .location { letter-spacing: .15em; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-line span { animation: none; transform: scaleX(.45); opacity: .7; }
}