/* Soleia Collective visual identity, supplied in the client brand guide. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-300-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
}

:root {
  --sea-ink: #13252c;
  --deep-ink: #0e1a1f;
  --antique-gold: #c6a15b;
  --gold-light: #d8bc7e;
  --ivory: #f4eee2;
  --limestone: #dbcdb2;
  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --text: "Jost", Avenir, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--sea-ink); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ivory);
  color: var(--deep-ink);
  font-family: var(--text);
  font-weight: 300;
}

.launch {
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--sea-ink);
  color: var(--ivory);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.launch__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: clamp(3rem, 9vh, 7rem) 0 clamp(2.5rem, 7vh, 5rem);
}

.brand-lockup { width: min(100%, 38rem); }

.brand-lockup__mark {
  display: block;
  width: clamp(7rem, 19vw, 10rem);
  height: auto;
  margin: 0 auto clamp(1.7rem, 4.5vh, 3rem);
  overflow: visible;
  fill: var(--antique-gold);
  stroke: var(--antique-gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.wordmark { margin: 0; font-weight: 400; }

.wordmark__name,
.wordmark__collective { display: block; text-transform: uppercase; }

.wordmark__name {
  padding-left: 0.18em;
  color: var(--ivory);
  font-family: var(--display);
  font-size: clamp(3.25rem, 10vw, 6.75rem);
  letter-spacing: 0.18em;
  line-height: 0.85;
}

.wordmark__collective {
  margin-top: clamp(1.25rem, 3vh, 1.85rem);
  padding-left: 0.48em;
  color: var(--gold-light);
  font-family: var(--text);
  font-size: clamp(0.65rem, 1.7vw, 0.86rem);
  font-weight: 300;
  letter-spacing: 0.48em;
  line-height: 1;
}

.launch__status {
  margin: clamp(3rem, 8vh, 5.25rem) 0 0;
  color: var(--limestone);
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.3;
}

.foot {
  color: color-mix(in srgb, var(--limestone) 65%, transparent);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.foot p { margin: 0; }

/* Simple branded treatment for the static 404 page. */
body:not(.launch) {
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.wrap { max-width: 34rem; }

.mark {
  margin: 0 0 1.25rem;
  color: var(--deep-ink);
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.lede { margin: 0 0 2rem; color: var(--deep-ink); }

.contact {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--limestone);
}

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { opacity: 0.7; }

@media (max-width: 30rem) {
  .wordmark__name { font-size: clamp(2.8rem, 16vw, 4rem); }
  .launch__status { margin-top: 2.75rem; }
}