/* ============ base: ground, page furniture, shared primitives ============ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--veil);
  background-color: var(--ink-0);
  background-image:
    radial-gradient(130% 78% at 50% -12%, hsl(33 26% 9% / .55), transparent 62%),
    radial-gradient(90% 55% at 50% 118%, hsl(30 18% 8% / .5), transparent 65%),
    linear-gradient(180deg, var(--ink-0), var(--ink-1) 55%, var(--ink-0));
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

::selection { background: var(--gold-30); }

:focus-visible {
  outline: 1px solid var(--gold-line);
  outline-offset: .4rem;
}

.skip-link {
  position: fixed; top: .8rem; left: .8rem; z-index: 60;
  padding: .6rem 1.2rem;
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--veil); background: var(--ink-1);
  border: 1px solid var(--hairline-strong);
}
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

/* — Sections take their own measure since the shorter-walk round; only
   the threshold (first-child) keeps the whole door. — */
main > .section {
  display: grid;
  place-items: center;
  min-height: auto;
  padding: var(--section-pad);
  position: relative;
  container-type: inline-size;
}
main > .section > section { width: 100%; max-width: var(--page-max); }
main > .section:first-child { min-height: 100svh; }

@media (max-width: 640px) {
  main > .section { min-height: auto; padding-block: clamp(4rem, 12svh, 6rem); }
}

.eyebrow {
  margin: 0 0 calc(var(--step) * 1.6);
  font-family: var(--font-ui);
  font-size: .66rem; font-weight: 400;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--veil-38);
}

h2 {
  margin: 0 0 var(--step);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: .015em;
  text-wrap: balance;
}

.section-lede {
  max-width: var(--measure);
  margin: 0 0 calc(var(--step) * 2);
  color: var(--veil-60);
}

/* — Threshold buttons: crossing, not submitting. — */
.btn {
  appearance: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: .85em 2.6em;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  color: var(--veil-60);
  font-family: var(--font-ui);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; text-indent: .34em;
  cursor: pointer;
  transition:
    color var(--dur-warm) var(--ease-threshold),
    border-color var(--dur-warm) var(--ease-threshold),
    letter-spacing var(--dur-warm) var(--ease-threshold),
    box-shadow .8s var(--ease-drift);
}
.btn:hover, .btn:focus-visible { letter-spacing: .44em; }

.btn--threshold {
  color: var(--gold);
  border-color: var(--gold-line);
  background-image: linear-gradient(180deg, hsl(41 40% 62% / .055), transparent);
}
.btn--threshold:hover, .btn--threshold:focus-visible {
  box-shadow: 0 0 34px var(--gold-16), inset 0 0 22px hsl(41 40% 60% / .05);
  border-color: var(--gold-68);
}
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--veil); border-color: var(--hairline-strong); }

/* — Scroll reveals: hidden only when scripting is live. — */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-threshold) var(--d, 0ms),
    transform var(--dur-reveal) var(--ease-threshold) var(--d, 0ms);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* — Page furniture: grain, veil, the typed secret. — */
.grain {
  position: fixed; inset: 0; z-index: 35;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px;
}

.veil {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
  background: radial-gradient(64% 64% at 50% 50%, hsl(30 20% 6% / .88), hsl(30 25% 2% / .99));
}
.veil.is-on { opacity: 1; }

.secret {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 12svh;
  margin-inline: auto; width: min(42rem, 88vw);
  text-align: center;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--gold-68);
  opacity: 0;
  transition: opacity 2.4s var(--ease-drift);
  pointer-events: none;
}
.secret.is-said { opacity: 1; }

.site-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 6vw, 4rem) calc(clamp(1.4rem, 4vw, 2.6rem) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: .6rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--veil-38);
}
.foot-mid { color: var(--veil-14); }
@media (max-width: 720px) { .foot-mid, .site-foot > span:last-child { display: none; } }