@property --texture-strength {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.16;
}

:root {
  color-scheme: light;

  --paprika: oklch(57% 0.17 45);
  --paprika-light: oklch(67% 0.16 48);
  --paprika-deep: oklch(43% 0.16 42);
  --paprika-glow: oklch(77% 0.12 61);
  --datepalm-ink: #071f17;
  --datepalm-soft: color-mix(in oklch, var(--datepalm-ink), var(--paprika) 18%);
  --page-max: 74rem;
  --logo-width: clamp(18rem, 74vw, 58rem);
  --edge: clamp(1.25rem, 4vw, 3.5rem);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paprika);
}

body {
  min-height: 100%;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--datepalm-ink);
  background:
    radial-gradient(circle at 50% 16%, color-mix(in oklch, var(--paprika-glow), transparent 54%) 0 11rem, transparent 39rem),
    radial-gradient(circle at 7% 92%, color-mix(in oklch, black, transparent 87%) 0 18rem, transparent 30rem),
    radial-gradient(circle at 92% 74%, color-mix(in oklch, white, transparent 89%) 0 14rem, transparent 32rem),
    linear-gradient(135deg, var(--paprika-light), var(--paprika) 42%, var(--paprika-deep));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Plaster/stucco texture: CSS-only, no background image required. */
body::before {
  opacity: var(--texture-strength);
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .68'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

body::after {
  opacity: 0.2;
  mix-blend-mode: soft-light;
  background:
    repeating-radial-gradient(circle at 50% 45%, transparent 0 2px, rgb(255 255 255 / 0.14) 3px 4px, transparent 5px 10px),
    repeating-linear-gradient(107deg, rgb(43 12 4 / 0.23) 0 1px, transparent 1px 9px);
  filter: blur(0.22px);
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.28em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 0.14em;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.landing {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: clamp(4rem, 10svh, 8rem) var(--edge) clamp(2.5rem, 5svh, 4rem);
  display: grid;
  place-items: center;
}

.hero {
  width: min(100%, var(--logo-width));
  display: grid;
  justify-items: center;
  gap: clamp(1.2rem, 2.5vw, 1.9rem);
}

.brand-logo {
  width: 100%;
  height: auto;
}

.coming-soon {
  margin: 0;
  color: var(--datepalm-soft);
  font-size: clamp(0.82rem, 1.2vw, 1.06rem);
  font-weight: 800;
  letter-spacing: clamp(0.28em, 0.75vw, 0.5em);
  line-height: 1;
  text-transform: uppercase;
}

.site-footer {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: 1.5rem var(--edge) 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: color-mix(in oklch, var(--datepalm-ink), var(--paprika) 16%);
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 44rem) {
  :root {
    --logo-width: min(34rem, 96vw);
  }

  .landing {
    padding-top: clamp(3.5rem, 11svh, 6rem);
  }

  .site-footer {
    flex-direction: column-reverse;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-logo,
  .coming-soon {
    animation: settle 720ms cubic-bezier(.2,.72,.1,1) both;
  }

  .coming-soon {
    animation-delay: 90ms;
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}