/*
  FILE PURPOSE: Establishes the standalone marketing surface using PeakHuman's botanical token values.
  WHY: The static site has no runtime dependency graph, so it mirrors the shared brand foundation locally.
*/
:root {
  color-scheme: light;
  --paper: #f4f1e8;
  --paper-strong: #ece8db;
  --ink: #20231c;
  --ink-muted: #5b6253;
  --accent: #2f5d43;
  --brass: #856a1e;
  --rule: rgba(74, 92, 64, 0.2);
  --display: Georgia, 'Times New Roman', serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
a { color: inherit; }

.hero {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 4rem) 2rem;
}

.hero__field { inset: 0; overflow: hidden; position: absolute; z-index: -1; }
.hero__field::before { background: radial-gradient(circle at 72% 33%, rgba(94, 122, 78, .65), transparent 25%), radial-gradient(circle at 31% 80%, rgba(176, 81, 44, .37), transparent 27%); content: ''; inset: 0; position: absolute; }
.hero__field::after { background-image: linear-gradient(rgba(244, 241, 232, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 232, .09) 1px, transparent 1px); background-size: 4.75rem 4.75rem; content: ''; inset: -10%; mask-image: radial-gradient(ellipse at center, black, transparent 72%); position: absolute; transform: rotate(-8deg); }
.hero__orb { border: 1px solid rgba(244, 241, 232, .22); border-radius: 50%; display: block; position: absolute; }
.hero__orb--one { height: min(70vw, 60rem); right: -17rem; top: 10%; width: min(70vw, 60rem); animation: drift 14s ease-in-out infinite alternate; }
.hero__orb--two { height: min(30vw, 25rem); left: 42%; top: 48%; width: min(30vw, 25rem); animation: drift 10s ease-in-out infinite alternate-reverse; }
.hero__map { fill: none; height: 100%; left: 0; opacity: .58; position: absolute; stroke: rgba(244, 241, 232, .55); stroke-width: 1.4; top: 0; width: 100%; }
.hero__map circle { fill: var(--brass); stroke: var(--paper); stroke-width: 2; animation: pulse 2.8s ease-in-out infinite; }

.nav { align-items: center; display: flex; justify-content: space-between; gap: 1rem; }
.wordmark { font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.05em; text-decoration: none; }
.nav__link { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.nav__link:hover, footer a:hover { text-decoration: underline; text-underline-offset: .35rem; }

.hero__content { align-self: center; max-width: 50rem; padding: 3rem 0; }
.eyebrow, .section-label, .sequence__index { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { color: #d6d1bd; margin: 0 0 1rem; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.065em; }
h1 { font-size: clamp(3.35rem, 9.2vw, 8.8rem); line-height: .86; margin-bottom: 1.8rem; }
.hero__lede { color: #e1ddcc; font-size: clamp(1.02rem, 1.7vw, 1.3rem); line-height: 1.55; max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { align-items: center; display: inline-flex; font-size: .85rem; font-weight: 800; gap: .6rem; justify-content: center; min-height: 3.1rem; padding: .9rem 1.15rem; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--paper); color: var(--ink); }
.button--primary:hover { background: #fff; }
.button--quiet { border: 1px solid rgba(244, 241, 232, .46); color: var(--paper); }
.button--quiet:hover { background: rgba(244, 241, 232, .1); }
.hero__note { align-self: end; color: rgba(244, 241, 232, .72); font-size: .78rem; margin: 0; }

.manifesto, .sequence, .closing { padding: clamp(5rem, 11vw, 11rem) clamp(1.25rem, 9vw, 10rem); }
.manifesto { border-bottom: 1px solid var(--rule); }
.section-label, .sequence__index { color: var(--accent); margin-bottom: 1.2rem; }
.manifesto__grid { align-items: start; display: grid; gap: 3rem; grid-template-columns: 1.5fr .7fr; }
.manifesto h2 { font-size: clamp(2.6rem, 6.3vw, 6.3rem); line-height: .94; margin: 0; }
.manifesto p { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.65; margin: .6rem 0 0; max-width: 30rem; }

.sequence { display: grid; gap: 0; padding-bottom: 0; padding-top: 0; }
.sequence__item { border-bottom: 1px solid var(--rule); display: grid; gap: 1.5rem; grid-template-columns: .35fr 1.1fr .8fr; padding: 2.1rem 0; }
.sequence__item h2 { font-size: clamp(2rem, 4vw, 4.2rem); line-height: .95; margin: 0; }
.sequence__item p:last-child { color: var(--ink-muted); line-height: 1.55; margin: .2rem 0 0; max-width: 23rem; }

.closing { background: var(--paper-strong); min-height: 68svh; display: flex; flex-direction: column; justify-content: center; }
.closing h2 { font-size: clamp(3.1rem, 7.8vw, 7.5rem); line-height: .89; margin-bottom: 2.3rem; max-width: 60rem; }
.closing .button { align-self: flex-start; background: var(--accent); color: var(--paper); }
.closing .button:hover { background: #204531; }
footer { align-items: center; background: var(--ink); color: rgba(244, 241, 232, .78); display: flex; font-size: .78rem; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 4vw, 4rem); }
footer a { color: var(--paper); text-decoration: none; }

@keyframes drift { to { transform: translate3d(2rem, -1.5rem, 0) scale(1.04); } }
@keyframes pulse { 50% { opacity: .38; r: 10; } }
@media (max-width: 700px) {
  .hero { min-height: 46rem; }
  .hero__content { align-self: end; padding-bottom: 4rem; }
  .manifesto__grid, .sequence__item { grid-template-columns: 1fr; }
  .manifesto__grid { gap: 1.5rem; }
  .sequence__item { gap: .7rem; padding: 1.7rem 0; }
  footer { align-items: flex-start; flex-direction: column; gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }