@font-face {
  font-family: "Source Serif 4";
  src: url("./assets/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  background: #fbf7e5;
  color: #102d1a;
  font-family: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; }
body, h1, p { margin: 0; }

.page {
  --inset: 4.2vw;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(90px, 15svh, 160px) var(--inset);
}
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/causeway-cracked-basalt.webp") center / 100% 100% no-repeat;
}
.identity { position: absolute; top: clamp(32px, 6svh, 72px); left: var(--inset); }
.brand {
  font-size: clamp(25px, 3.05vw, 55px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
}
.copy { width: 61%; }
h1 {
  font-size: clamp(34px, min(4.55vw, 8.4svh), 86px);
  line-height: 1.04;
  letter-spacing: -.01em;
  font-weight: 500;
  text-wrap: balance;
}
h1 span { display: block; }
.mission {
  max-width: 57ch;
  text-wrap: balance;
  margin-top: clamp(32px, 4svh, 44px);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.42;
}
.actions {
  display: flex;
  align-items: baseline;
  gap: 30px;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 400;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .055em; }
.contact { display: inline-flex; gap: .2em; align-items: baseline; padding-block: .2em; }
.primary { text-decoration: none; }
.primary .link-label { text-decoration: underline; text-decoration-thickness: .055em; }
.secondary { text-decoration: none; }
.secondary:hover { color: #43604a; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
#investors { display: none; margin-top: .75em; font-size: 1.2rem; }
#investors:target { display: block; }

@media (max-width: 1024px) and (orientation: portrait) {
  .page {
    --inset: clamp(20px, 5.6vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(22px, 5.6vw, 44px) 0 0;
  }
  .page::before {
    position: static;
    order: 1;
    flex: 1 0 clamp(170px, 50vw, 420px);
    /* Fill the panel with the lower-right basalt terrace in the engraving. */
    background-size: auto max(365%, 175vw);
    background-position: right bottom;
  }
  .identity { position: static; margin-inline: var(--inset); }
  .brand { font-size: clamp(26px, 6vw, 36px); }
  .hero { padding: clamp(22px, 4vw, 38px) var(--inset) clamp(18px, 3vw, 28px); }
  .copy { width: 100%; }
  h1 { max-width: 23ch; font-size: clamp(30px, 9.5vw, 64px); line-height: 1.05; }
  h1 span { display: inline; }
  .mission { max-width: 47ch; font-size: clamp(16px, 4.3vw, 20px); margin-top: clamp(18px, 3.5vw, 26px); }
  .actions { font-size: 16px; gap: 24px; margin-top: 12px; }
  .contact { min-height: 44px; align-items: center; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .page { align-content: center; gap: 18px; padding-block: 18px; }
  .identity { position: static; }
  .mission { font-size: 19px; margin-top: 22px; }
  .actions { margin-top: 12px; }
}