@font-face {
  font-family: "Geist Serif";
  src: url("/assets/GeistSerifVF.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #0a0d12;
  color: #f3f0e9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
a { color: inherit; }

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 63% 68% at 18% 80%, #3a404a 0%, transparent 75%),
    radial-gradient(ellipse 48% 52% at 80% 25%, #343c45 0%, transparent 78%),
    #0a0d12;
  z-index: 0;
}

#fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(.72) saturate(.55) contrast(1.18) brightness(.91);
  touch-action: pan-y;
}

.scene-wash, .scene-grain { position: absolute; inset: 0; pointer-events: none; }
.scene-wash {
  background:
    radial-gradient(ellipse 46% 37% at 50% 52%, rgba(7, 10, 14, .61), rgba(8, 11, 15, .18) 68%, transparent 100%),
    linear-gradient(90deg, rgba(8, 10, 14, .62), transparent 24%, transparent 76%, rgba(8, 10, 14, .62)),
    linear-gradient(180deg, rgba(8, 10, 14, .47), transparent 28%, transparent 73%, rgba(8, 10, 14, .54));
}
.scene-grain {
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 3.4vw, 56px) clamp(24px, 4vw, 72px);
}
.site-header { display: flex; align-items: center; justify-content: flex-start; }
.brand {
  display: inline-block;
  width: fit-content;
  font-family: "Geist Serif", Georgia, serif;
  font-size: clamp(28px, 2.6vw, 37px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -.071em;
  text-decoration: none;
  pointer-events: auto;
  text-shadow: 0 1px 24px rgba(0,0,0,.2);
}
.brand span { color: #c5b198; }
.brand:focus-visible { outline: 2px solid #eee8db; outline-offset: 8px; }
.hero { display: grid; place-items: center; text-align: center; }
h1 {
  max-width: 100%;
  margin: -2.5vh 0 0;
  font-family: "Geist Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 10.5vw, 174px);
  line-height: 1.04;
  letter-spacing: -.075em;
  white-space: nowrap;
  text-shadow: 0 6px 55px rgba(0,0,0,.34);
}
h1 span { color: #e4ded4; }
.site-footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(244, 241, 235, .52);
}

.static-background #fluid { display: none; }
@media (max-width: 680px) {
  .frame { padding: 28px 26px; }
  h1 { font-size: clamp(45px, 11vw, 76px); margin-top: -3vh; letter-spacing: -.07em; }
  .brand { font-size: 29px; }
  .scene-wash { background: radial-gradient(ellipse 70% 42% at 50% 52%, rgba(7,10,14,.67), transparent), linear-gradient(180deg, rgba(7,9,12,.58), transparent 40%, rgba(7,9,12,.57)); }
}
@media (max-height: 430px) {
  .frame { padding-top: 16px; padding-bottom: 16px; }
  h1 { font-size: min(12vh, 88px); margin: 0; }
}
@media (prefers-reduced-motion: reduce) { #fluid { display: none; } }