:root {
  color-scheme: light;
  --surface: #f3f6f5;
  --text-primary: #1c3e56;
  --text-secondary: #53636b;
  --accent: #087980;
  --line: #d1dcdd;
  --selection: #c7e4e3;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface);
}

* { box-sizing: border-box; }
body { margin: 0; }
p, h1, figure { margin: 0; }
::selection { color: var(--text-primary); background: var(--selection); }

.page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
  max-inline-size: 1280px;
  margin-inline: auto;
  padding: var(--space-6);
}

.masthead, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.domain { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.domain span { color: var(--accent); font-weight: 400; }
.masthead-note, .footer { color: var(--text-secondary); font-size: 12px; }
.masthead-note { letter-spacing: .02em; }

.hero {
  display: grid;
  align-items: center;
  flex: 1;
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-12);
}

.hero-copy { position: relative; z-index: 1; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.status-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
h1 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(68px, 11.5vw, 144px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 em { color: var(--accent); font-weight: 400; }
.intro {
  margin-block-start: var(--space-8);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
.wave { display: block; margin-block-start: var(--space-8); fill: none; stroke: var(--accent); stroke-width: 1.5; }

.brand-art {
  inline-size: 100%;
  max-inline-size: 520px;
  justify-self: center;
  mix-blend-mode: multiply;
}
.brand-art img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  filter: brightness(1.09);
}

.footer { padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.footer-dot { color: var(--accent); }

@media (min-width: 640px) {
  .page { padding: var(--space-8); }
  .masthead-note, .footer { font-size: 14px; }
  .domain { font-size: 25px; }
  .hero { gap: var(--space-12); }
  .hero-copy { padding-inline-start: var(--space-4); }
  .intro { font-size: 20px; }
}

@media (min-width: 900px) {
  .page { padding: var(--space-12); }
  .hero { grid-template-columns: 1fr 1fr; gap: var(--space-8); padding-block: var(--space-16); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .brand-art { animation: arrive 650ms ease-out both; }
  .brand-art { animation-delay: 100ms; }
  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}