@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #0b0d10;
  --text: #f9fafb;
  --muted: #c1c7d0;
  --accent: #e74e62;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  min-height: 100vh;
  min-height: 100svh;
}

.photo {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(90deg, rgb(11 13 16 / 12%), transparent 32%),
    url("/images/home.webp") 72% center / cover no-repeat;
}

.content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(24px, 4.2vw, 64px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.mark {
  width: 20px;
  height: 26px;
  color: var(--accent);
  flex: none;
}

.intro {
  max-width: 780px;
  padding-block: clamp(24px, 4vh, 72px);
}

.eyebrow {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  letter-spacing: .005em;
}

h1 {
  margin: 0;
  font-size: clamp(56px, 7.2vw, 116px);
  font-weight: 600;
  letter-spacing: -.075em;
  line-height: .99;
}

.period { color: var(--accent); }

.statement {
  max-width: 26ch;
  margin: 36px 0 0;
  color: var(--muted);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.025em;
}

.footer {
  color: #929aa5;
  font-size: 12px;
  letter-spacing: .03em;
}

@media (max-width: 760px) {
  .page { display: block; position: relative; isolation: isolate; }

  .photo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(11 13 16 / 72%) 0%, rgb(11 13 16 / 75%) 38%, rgb(11 13 16 / 96%) 100%),
      url("/images/home.webp") 67% center / cover no-repeat;
  }

  .content {
    min-height: 100vh;
    min-height: 100svh;
    padding: 28px 24px 24px;
  }

  .intro { padding-block: 88px; }
  .eyebrow { margin-bottom: 20px; }
  h1 { font-size: clamp(54px, 14vw, 88px); }
  .statement { margin-top: 28px; font-size: clamp(19px, 5vw, 24px); }
}

@media (max-width: 380px) {
  .content { padding-inline: 20px; }
  h1 { font-size: 53px; }
}