:root {
  --cream: #f3ece0;
  --sand: #e6d8c3;
  --taupe: #c7b79c;
  --terracotta: #a8543a;
  --wood: #6e5138;
  --ink: #2a2420;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

.landing {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 251, 244, .76), transparent 42%),
    var(--cream);
}

.heroFrame {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 6rem) 1.5rem;
}

.ambient {
  position: absolute;
  z-index: -3;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .48;
  will-change: transform;
}

.ambientOne {
  width: 65vw;
  height: 52vw;
  top: -26vw;
  left: -13vw;
  background: var(--sand);
  animation: drift-one 38s ease-in-out infinite alternate;
}

.ambientTwo {
  width: 48vw;
  height: 48vw;
  right: -18vw;
  bottom: -20vw;
  background: color-mix(in srgb, var(--terracotta) 58%, var(--taupe));
  opacity: .23;
  animation: drift-two 44s ease-in-out infinite alternate;
}

.ambientThree {
  width: 34vw;
  height: 36vw;
  right: 5vw;
  top: 0;
  background: var(--wood);
  opacity: .13;
  animation: drift-three 34s ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.content {
  width: min(100%, 49rem);
  text-align: center;
}

.siteFooter {
  position: absolute;
  right: clamp(1.35rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: clamp(1.35rem, 4vw, 4rem);
  display: flex;
  align-items: center;
}

.wordmark {
  font-size: clamp(.78rem, .9vw, .9rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1;
  text-transform: uppercase;
  animation: arrive .7s .32s cubic-bezier(.22, 1, .36, 1) both;
}

.footerIdentity {
  display: grid;
  gap: .55rem;
}

.legal {
  margin: 0;
  color: rgba(42, 36, 32, .5);
  font-size: clamp(.56rem, .6vw, .64rem);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.2;
  animation: arrive .7s .38s cubic-bezier(.22, 1, .36, 1) both;
}

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

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.15vw, 4.85rem);
  font-weight: 600;
  letter-spacing: -.052em;
  line-height: 1.02;
  text-wrap: balance;
  animation: arrive .8s .12s cubic-bezier(.22, 1, .36, 1) both;
}

.strapline {
  max-width: 44rem;
  margin: clamp(2rem, 5vh, 3.25rem) auto 0;
  color: rgba(42, 36, 32, .76);
  font-size: clamp(.96rem, 1.35vw, 1.1rem);
  font-weight: 400;
  line-height: 1.72;
  text-wrap: pretty;
  animation: arrive .8s .24s cubic-bezier(.22, 1, .36, 1) both;
}

.strapline > span { display: block; }

.straplineFinal {
  margin-top: .55rem;
  font-weight: 560;
}

.privacyLink,
.privacyClose {
  appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.privacyLink {
  padding: 0;
  background: transparent;
  text-decoration: none;
}

.privacyLink:hover,
.privacyLink:focus-visible,
.privacyContent a:hover,
.privacyContent a:focus-visible {
  color: var(--terracotta);
}

.privacyLink:focus-visible,
.privacyClose:focus-visible,
.privacyContent a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.privacyPanel {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(42, 36, 32, .11);
  background: rgba(243, 236, 224, .88);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.35rem, 7vw, 7rem);
}

.privacyPanel[hidden] { display: none; }

.privacyContent {
  width: min(100%, 48rem);
  color: rgba(42, 36, 32, .7);
  font-size: clamp(.72rem, .86vw, .84rem);
  line-height: 1.7;
}

.privacyContent h2 {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.02em;
}

.privacyContent p { margin: 0 0 1rem; }

.privacyContent a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

.privacyClose {
  margin-top: .7rem;
  padding: .55rem 0;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

.privacyClose:hover { color: var(--terracotta); }

@keyframes arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drift-one {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(18%, 14%, 0) scale(1.08); }
}

@keyframes drift-two {
  from { transform: translate3d(5%, 4%, 0) scale(1.05); }
  to { transform: translate3d(-22%, -15%, 0) scale(.93); }
}

@keyframes drift-three {
  from { transform: translate3d(3%, -7%, 0); }
  to { transform: translate3d(-20%, 22%, 0); }
}

@media (max-width: 640px) {
  .heroFrame { padding: 2rem 1.35rem 5rem; }
  h1 { font-size: clamp(2.25rem, 11.5vw, 3rem); }
  .strapline { max-width: 32rem; line-height: 1.64; }
  .ambient { filter: blur(64px); }
  .ambientOne { width: 110vw; height: 90vw; }
  .ambientTwo { width: 90vw; height: 90vw; }
  .ambientThree { width: 70vw; height: 80vw; }
}

@media (min-width: 1024px) {
  .content { width: min(100%, 54rem); }
  .strapline { max-width: 48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient, .wordmark, .legal, h1, .strapline { animation: none; }
  html:focus-within { scroll-behavior: auto; }
}