:root {
  --ink: #f2ecdf;
  --ink-soft: #c9c0b1;
  --muted: #8c857b;
  --void: #0a0a09;
  --surface: #10100f;
  --line: rgba(242, 236, 223, 0.14);
  --teal: #63e6d6;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "DM Mono", "Courier New", monospace;
  --page-x: clamp(1.2rem, 4vw, 4.75rem);
  --nav-scroll-progress: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color-scheme: dark; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--void);
  color: var(--ink);
  font-family: var(--mono);
}
a { color: var(--ink-soft); text-underline-offset: .25em; }
a:hover, a:focus-visible { color: var(--teal); }
:focus-visible { outline: 1px solid var(--teal); outline-offset: 5px; }
.shell { width: min(100%, 76rem); margin-inline: auto; padding-inline: var(--page-x); }
.site-header {
  position: fixed;
  top: calc(var(--nav-scroll-progress) * .65rem);
  left: calc(var(--nav-scroll-progress) * clamp(.65rem, 2vw, 1.5rem));
  right: calc(var(--nav-scroll-progress) * clamp(.65rem, 2vw, 1.5rem));
  z-index: 100;
  border: solid transparent;
  border-width: calc(var(--nav-scroll-progress) * 1px);
  border-radius: calc(var(--nav-scroll-progress) * 8px);
  background:
    linear-gradient(rgba(10,10,9,calc(.12 + (var(--nav-scroll-progress) * .84))), rgba(10,10,9,calc(.12 + (var(--nav-scroll-progress) * .84)))) padding-box,
    linear-gradient(90deg, rgba(240,160,103,var(--nav-scroll-progress)), rgba(99,230,214,var(--nav-scroll-progress))) border-box;
  box-shadow: 0 1rem 3rem rgba(0,0,0,calc(var(--nav-scroll-progress) * .24));
  backdrop-filter: blur(calc(var(--nav-scroll-progress) * 18px));
}
.nav { min-height: calc(6rem - (var(--nav-scroll-progress) * 1.5rem)); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; min-width: 8.5rem; align-items: center; }
.brand-name, .brand-logo { grid-area: 1 / 1; }
.brand-name {
  font: italic 2rem/1 var(--serif);
  opacity: calc(1 - var(--nav-scroll-progress));
  transform: translateY(calc(var(--nav-scroll-progress) * -.4rem));
}
.brand-logo {
  width: 2.4rem;
  height: 2.4rem;
  opacity: var(--nav-scroll-progress);
  transform: translateY(calc((1 - var(--nav-scroll-progress)) * .4rem)) scale(calc(.82 + (var(--nav-scroll-progress) * .18)));
}
.nav-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.legal-main { padding-block: calc(clamp(4rem, 9vw, 8rem) + 6rem) clamp(4rem, 9vw, 8rem); }
.legal-header { max-width: 55rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 1rem; color: var(--teal); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font: 400 clamp(3.5rem, 9vw, 7rem)/.9 var(--serif); }
.updated { margin: 1.5rem 0 0; color: var(--muted); font-size: .72rem; }
.legal-body { max-width: 55rem; padding-top: 3rem; color: var(--ink-soft); line-height: 1.75; }
.legal-body h2 { margin: 3rem 0 1rem; color: var(--ink); font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.1 var(--serif); }
.legal-body p, .legal-body li { max-width: 72ch; }
.legal-body li + li { margin-top: .65rem; }
.site-footer { padding-block: 2.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 1.25rem; }
.footer-links a { text-decoration: none; }
@media (max-width: 640px) {
  .nav, .footer-row { align-items: flex-start; flex-direction: column; }
  .nav { min-height: calc(5.5rem - (var(--nav-scroll-progress) * 1rem)); padding-block: 1rem; }
  .brand-mark { min-width: 7rem; }
  .footer-links { justify-content: flex-start; }
  .legal-main { padding-block: calc(3.5rem + 7.5rem) 3.5rem; }
}