/* The page's styles. The brand's tokens come from branding/viewer/DESIGN.md §6. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fraunces-latin.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2'); }

:root {
  --ground: #f6f0e6; --ink: #2a1b12; --ink-muted: #6a5646; --line: #d9cbb6; --copper: #b4552a;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #16110d; --ink: #f4ece1; --ink-muted: #b7a595; --line: #3a2f27; --copper: #e08a5a; color-scheme: dark } }
:root[data-theme="dark"] { --ground: #16110d; --ink: #f4ece1; --ink-muted: #b7a595; --line: #3a2f27; --copper: #e08a5a; color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0 }
body {
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

.hero {
  width: 100%; max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 5vw, 80px);
  padding-block: 48px;
}
.figure { position: relative; aspect-ratio: 1882 / 1964; width: 100%; max-height: min(76svh, 720px); justify-self: center }
.figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms var(--ease-settle) }
.figure canvas.on { opacity: 1 }

h1 {
  margin: 0; max-width: 13ch;
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 .name { color: var(--copper) }
.lede { margin: 24px 0 0; max-width: 34ch; color: var(--ink-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; text-wrap: pretty }

footer {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding-block: 20px max(24px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px;
}

.copy > * { animation: rise 700ms var(--ease-settle) both }
.copy > .lede { animation-delay: 120ms }
@keyframes rise { from { opacity: 0; transform: translateY(12px) } }

@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 24px 40px; align-content: center }
  .figure { width: min(100%, 360px); max-height: 44svh }
  .copy, footer { text-align: center }
  h1, .lede { margin-inline: auto }
}
@media (prefers-reduced-motion: reduce) {
  .copy > * { animation: none }
  .figure canvas { transition: none }
}