/* Wild Bot — home. Values follow design/design_handoff_wildbot_home exactly. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-wdth.woff2) format('woff2-variations'), url(/fonts/archivo-wdth.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist.woff2) format('woff2-variations'), url(/fonts/geist.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-mono.woff2) format('woff2-variations'), url(/fonts/geist-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0a0a0b;
  --ink: #ecebe7;
  --ink-2: #bdbcb7;
  --muted-1: #a9a8a3;
  --muted-2: #8f8e89;
  --muted-3: #77766f;
  --faint-1: #5c5b58;
  --faint-2: #4a4946;
  --faint-3: #3a3937;
  --line: #2e2d2b;
  --line-2: #1c1c1b;
  --accent: oklch(0.76 0.13 60);

  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --display: 'Archivo', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: #ffffff; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}

.hero-seat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0) 70%);
}

.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0), var(--bg));
}

.hero-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 56px);
}

.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-1);
  transition: color 400ms ease;
}
.nav-link:hover { color: var(--ink); }

.hero-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: -6svh;
  padding: 0 16px;
}

.wordmark {
  margin: 0;
  margin-right: -0.14em; /* optical centering against trailing tracking */
  font-family: var(--display);
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-weight: 600;
  font-size: clamp(34px, 10.4vw, 196px);
  line-height: 0.9;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--ink);
}

.hero-line {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(14px, 1.25vw, 19px);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-align: center;
}

.scroll-cue {
  position: absolute;
  bottom: clamp(24px, 4svh, 44px);
  left: 50%;
  z-index: 1;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(236, 235, 231, 0), rgba(236, 235, 231, 0.45));
}

/* ---------- Thesis ---------- */

.thesis {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(96px, 14vw, 200px) clamp(24px, 6vw, 96px);
}

.thesis-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.thesis-block {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.thesis-lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}
.thesis-lines > span { text-wrap: balance; }
.thesis-second { color: var(--muted-2); }

.thesis-sub {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* ---------- Credentials ---------- */

.cred {
  min-height: 70svh;
  display: grid;
  place-items: center;
  padding: clamp(80px, 10vw, 160px) 24px;
}

.cred-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3vw, 40px);
  max-width: 880px;
  text-align: center;
}

.cred-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.rule {
  width: 24px;
  height: 1px;
  background: var(--faint-3);
}

.cred-title {
  margin: 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}

.cred-body {
  margin: 0;
  max-width: 60ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  letter-spacing: 0.015em;
  color: rgba(236, 235, 231, 0.65);
  text-wrap: pretty;
}

/* ---------- Contact ---------- */

.contact {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(96px, 12vw, 180px) clamp(24px, 6vw, 96px);
}

.contact-inner {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 88px);
}

.contact-title {
  margin: 0;
  font-family: var(--display);
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 48px) clamp(32px, 4vw, 56px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.field-optional { color: var(--faint-2); }

.field-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0 14px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  caret-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus { border-bottom-color: var(--ink); }
.field-input:focus-visible { outline: none; }
.field-input::placeholder { color: var(--faint-1); }
.field-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--bg) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--accent);
}

/* Honeypot: off-screen for humans, visible to naive bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile { grid-column: 1 / -1; }
.turnstile:empty { display: none; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 8px;
}

.button {
  appearance: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 18px 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 400ms ease, color 400ms ease, opacity 400ms ease;
}
.button:hover { background: var(--ink); color: var(--bg); }
.button[disabled] { cursor: default; opacity: 0.5; }
.button[disabled]:hover { background: transparent; color: var(--ink); }

.form-error {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}
.form-error a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.form-error a:hover { color: var(--ink); }

.received {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  outline: none;
}

.received-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.received-text {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line-2);
  padding: 32px clamp(24px, 6vw, 96px);
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.dot { color: var(--faint-3); }

.footer-mail {
  color: var(--muted-1);
  text-transform: none;
  letter-spacing: 0.06em;
  transition: color 400ms ease;
}
.footer-mail:hover { color: var(--ink); }

/* ---------- Reveal ---------- */

/* Hidden only when scripting is on, so a no-JS visitor still sees everything. */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 1600ms cubic-bezier(.2, .6, .2, 1),
      transform 1600ms cubic-bezier(.2, .6, .2, 1);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}