/* ==========================================================================
   Emergento — static site
   Design tokens and layout transcribed from the original compiled stylesheet.
   ========================================================================== */

/* ---------- fonts (bundled locally) ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-latin.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-weight: 500;
  font-display: swap;
  src: url(fonts/geist-latin.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-weight: 600;
  font-display: swap;
  src: url(fonts/geist-latin.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: Blanka;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/blanka.woff") format("woff");
}

/* ---------- design tokens ---------- */
:root {
  --oracle-violet: #B75EEF;
  --oracle-glow: #BE6EEC;
  --oracle-deep: #673585;
  --electrum: #FDC34B;
  --void: #121618;
  --deep-slate: #1B2023;
  --raised-slate: #2E3639;
  --hairline: #3E4649;
  --signal-white: #F4F9FB;
  --frost-white: #D5DEE3;
  --ion-silver: #A2B3BD;
  --drawdown: #F76C6A;
  --site-label: #8FA0A9;
  --live-void: #000000;

  --thermal-zero: var(--live-void);
  --thermal-cold: var(--void);
  --thermal-cool: var(--oracle-deep);
  --thermal-warm: var(--oracle-violet);
  --thermal-hot: var(--drawdown);
  --thermal-scorch: var(--electrum);
  --thermal-white: var(--signal-white);

  --signal-white-rgb: 244 249 251;
  --oracle-violet-rgb: 183 94 239;
  --electrum-rgb: 253 195 75;

  --bg: var(--void);
  --surface: var(--deep-slate);
  --raised: var(--raised-slate);
  --t1: var(--signal-white);
  --t2: var(--frost-white);
  --t3: var(--ion-silver);
  --t4: var(--site-label);
  --signal: var(--oracle-violet);

  --page-home-hero-bg: var(--bg);

  --osd-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --feed-pad-x: clamp(1.1rem, 4vw, 3.5rem);
  --feed-pad-top: clamp(4.6rem, 9vh, 6.5rem);
  --feed-pad-bottom: clamp(3.4rem, 8vh, 5.5rem);
}

/* ---------- preflight subset ---------- */
*, :before, :after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; }
body {
  margin: 0;
  font-family: Geist, system-ui, -apple-system, Segoe UI, sans-serif;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  color: var(--t2);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: clip;
}
html, body, #root { max-width: 100%; overflow-x: clip; }
h1 { font-size: inherit; font-weight: inherit; margin: 0; font-family: Geist, system-ui, -apple-system, Segoe UI, sans-serif; letter-spacing: 0; overflow-wrap: break-word; }
main section h1 { width: 100%; max-width: calc(100vw - 48px) !important; white-space: normal !important; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: inherit; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

/* ---------- utilities actually used ---------- */
.relative { position: relative; }
.flex { display: flex; }
.font-sans { font-family: Geist, system-ui, -apple-system, sans-serif; }
.font-logo { font-family: Blanka, sans-serif; }

/* skip link */
.skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 50;
  width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  background: var(--frost-white); color: var(--void);
  padding: .75rem 1rem;
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: .75rem; font-weight: 600;
}

/* ---------- paper-shaders host (mirrors the library's injected layer) ---------- */
@layer paper-shaders {
  :where([data-paper-shader]) {
    isolation: isolate;
    position: relative;
  }
  :where([data-paper-shader]) canvas {
    contain: strict;
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
}
.shader-host { pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }

/* ---------- chrome ---------- */
.stealth-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--feed-pad-x);
  background: linear-gradient(180deg, rgb(0 0 0 / .72), transparent);
}
.stealth-header__mark { font-size: 15px; letter-spacing: .22em; color: var(--oracle-violet); }
.stealth-header__link {
  font-family: var(--osd-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--electrum-rgb) / .9);
  text-decoration: none;
}

.feed-crt {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 44;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgb(0 0 0 / .09) 0px, rgb(0 0 0 / .09) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse 120% 96% at 50% 46%, transparent 62%, rgb(0 0 0 / .28) 100%);
}
@media (max-width: 900px) { .feed-crt { opacity: .35; } }

/* ---------- hero frame ---------- */
.feed-frame {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  padding: var(--feed-pad-top) var(--feed-pad-x) var(--feed-pad-bottom);
  isolation: isolate;
  transform: translateZ(0);
}
.feed-frame:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgb(var(--oracle-violet-rgb) / .55) 30%, rgb(var(--electrum-rgb) / .65) 70%, transparent);
}
.feed-frame--single { position: relative; height: auto; min-height: 100svh; }
@media (max-width: 1023px) { .feed-frame > div { max-width: 100% !important; } }

.acq-globe {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(1rem, 5vw, 5rem);
  width: min(46vw, 700px);
  aspect-ratio: 1;
  transform: translateY(-50%);
}
@media (max-width: 900px) {
  .acq-globe {
    top: auto;
    right: 50%;
    bottom: -6%;
    width: min(120vw, 520px);
    opacity: .5;
    transform: translate(50%);
  }
}

.hero-reticle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.hero-reticle__ring {
  position: absolute;
  top: 12%; right: 12%; bottom: 12%; left: 12%;
  border: 1px solid rgb(var(--signal-white-rgb) / .16);
  border-radius: 999px;
}
.hero-reticle__tick { position: absolute; background: rgb(var(--signal-white-rgb) / .4); }
.hero-reticle__tick--n { top: 8.5%; left: 50%; width: 1px; height: 3.5%; }
.hero-reticle__tick--s { bottom: 8.5%; left: 50%; width: 1px; height: 3.5%; }
.hero-reticle__tick--w { top: 50%; left: 8.5%; width: 3.5%; height: 1px; }
.hero-reticle__tick--e { top: 50%; right: 8.5%; width: 3.5%; height: 1px; }

.acq-copy {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: auto;
  max-width: min(64vw, 62rem);
}
@media (max-width: 900px) { .acq-copy { max-width: 100%; } }

.osd-statement {
  font-family: Geist, system-ui, sans-serif;
  font-size: clamp(2.9rem, 8.4vw, 9rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: var(--t1);
}
.osd-statement--hero {
  font-size: clamp(3.4rem, 10.5vw, 11.5rem);
  line-height: .86;
  letter-spacing: -.06em;
}
.osd-statement .heat {
  background: linear-gradient(100deg, var(--thermal-warm), var(--thermal-hot) 45%, var(--thermal-scorch) 78%, var(--thermal-white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 2rem;
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--osd-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t4);
}

/* ── manifesto dialog ─────────────────────────────────────────────────────── */

.stealth-header__nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.stealth-header__link:hover,
.stealth-header__link:focus-visible { color: rgb(var(--electrum-rgb) / 1); }

.manifesto {
  width: min(46rem, calc(100vw - 2 * var(--feed-pad-x)));
  max-height: min(82vh, 46rem);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--deep-slate);
  color: var(--t2);
  box-shadow: 0 24px 80px rgb(0 0 0 / .6);
  overflow: hidden;
}
.manifesto::backdrop {
  background: rgb(0 0 0 / .72);
  backdrop-filter: blur(2px);
}
.manifesto[open] { animation: manifesto-in .22s ease-out; }
.manifesto[open]::backdrop { animation: manifesto-fade .22s ease-out; }
@keyframes manifesto-in {
  from { opacity: 0; transform: translateY(6px) scale(.994); }
  to   { opacity: 1; transform: none; }
}
@keyframes manifesto-fade { from { opacity: 0 } to { opacity: 1 } }

.manifesto__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  outline: none;
}
.manifesto__head {
  position: relative;
  flex: none;
  padding: 1.9rem var(--feed-pad-x) 1.15rem;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgb(var(--oracle-violet-rgb) / .07), transparent);
}
.manifesto__kicker {
  margin: 0 0 .5rem;
  font-family: var(--osd-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oracle-violet);
}
.manifesto__title {
  margin: 0;
  font-family: var(--osd-font);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--t1);
}
.manifesto__close {
  position: absolute;
  top: 1.65rem;
  right: var(--feed-pad-x);
  padding: .45rem .7rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: transparent;
  font-family: var(--osd-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--electrum-rgb) / .9);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.manifesto__close:hover,
.manifesto__close:focus-visible {
  border-color: rgb(var(--electrum-rgb) / .55);
  color: rgb(var(--electrum-rgb) / 1);
}

.manifesto__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem var(--feed-pad-x) 2.1rem;
  font-family: Geist, system-ui, -apple-system, sans-serif;
  font-size: .95rem;
  line-height: 1.68;
}
.manifesto__body p { margin: 0 0 1.05rem; color: var(--t3); }
.manifesto__body p:last-child { margin-bottom: 0; }
.manifesto__body em { font-style: normal; color: var(--t1); }
.manifesto__lede {
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--t1) !important;
  text-wrap: balance;
}

/* No-JS fallback: the anchor navigates and :target reveals the dialog. */
.manifesto:target:not([open]) {
  display: block;
  position: fixed;
  z-index: 60;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .manifesto[open],
  .manifesto[open]::backdrop { animation: none; }
  .manifesto__close { transition: none; }
}

@media (max-width: 640px) {
  .manifesto { max-height: 88vh; }
  .manifesto__head { padding-top: 1.6rem; }
  .manifesto__close { top: 1.35rem; }
  .manifesto__body { font-size: .92rem; }
}