/* ============================================================
   Sumsight Pre-launch Site
   Voice: Direction A — The Ethicist
   Visual: Pure black-and-white + selective aurora on hero & footer.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ---------- Tokens ---------- */
:root {
  --ink-100: #0A0A0A;
  --ink-80:  #2B2B2B;
  --ink-60:  #5C5C5C;
  --ink-40:  #8A8A8A;
  --ink-20:  #BFBFBF;
  --ink-10:  #E6E6E6;
  --ink-05:  #F4F4F4;
  --ink-02:  #FAFAFA;
  --paper:   #FFFFFF;

  --aurora-violet: oklch(0.74 0.10 295);
  --aurora-blue:   oklch(0.78 0.06 220);
  --aurora-sage:   oklch(0.78 0.10 145);
  --aurora-yellow: oklch(0.88 0.10  95);
  --aurora-amber:  oklch(0.82 0.10  75);

  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px; --s-5:  24px;
  --s-6:  32px; --s-7:  48px; --s-8:  64px; --s-9:  96px; --s-10: 128px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;

  --t-xs:   13px; --t-sm:   14px; --t-base: 16px; --t-md:   18px;
  --t-lg:   22px; --t-xl:   28px; --t-2xl:  36px; --t-3xl:  48px; --t-4xl:  64px;

  --w-prose: 680px; --w-wide: 960px; --w-page: 1120px;
  --ease: cubic-bezier(0.2, 0.0, 0, 1);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink-100);
  background: var(--paper);
}
::selection { background: var(--ink-100); color: var(--paper); }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-size: var(--t-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-md); }

.eyebrow { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; }
.lede    { font-size: var(--t-md); line-height: 1.55; color: var(--ink-80); max-width: 56ch; }
.meta    { font-size: var(--t-sm); color: var(--ink-40); letter-spacing: 0.01em; }

p { color: var(--ink-80); max-width: 64ch; }
.prose p + p { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-9); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose ul.bullets { margin-top: var(--s-3); }
.prose ul.bullets li { position: relative; padding-left: var(--s-5); color: var(--ink-80); margin-bottom: var(--s-2); max-width: 64ch; }
.prose ul.bullets li::before { content: "—"; position: absolute; left: 0; color: var(--ink-40); }

.eyebrow + h1, .eyebrow + h2, .eyebrow + h3, .eyebrow + h4 { margin-top: var(--s-4); }

a.link { border-bottom: 1px solid var(--ink-20); transition: border-color 200ms var(--ease), color 200ms var(--ease); }
a.link:hover { border-bottom-color: var(--ink-100); }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

.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;
}

.page  { max-width: var(--w-page);  margin: 0 auto; padding: 0 var(--s-6); }
.wide  { max-width: var(--w-wide);  margin: 0 auto; padding: 0 var(--s-6); }
.prose { max-width: var(--w-prose); margin: 0 auto; padding: 0 var(--s-6); }

section { padding: var(--s-9) 0; position: relative; }
section + section { border-top: 1px solid var(--ink-10); }

/* Top nav — transparent at rest, liquid glass once scrolled */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), backdrop-filter 220ms var(--ease), -webkit-backdrop-filter 220ms var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(10, 10, 10, 0.06);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-6); }
.brand { font-weight: 600; letter-spacing: -0.01em; font-size: var(--t-md); }
.nav-cta { font-size: var(--t-sm); font-weight: 500; border: 1px solid var(--ink-100); padding: 6px 12px; transition: background 180ms var(--ease), color 180ms var(--ease); }
.nav-cta:hover { background: var(--ink-100); color: var(--paper); }

.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 12px 20px; font-size: var(--t-sm); font-weight: 500; border: 1px solid var(--ink-100); transition: background 180ms var(--ease), color 180ms var(--ease); }
.btn-primary { background: var(--ink-100); color: var(--paper); }
.btn-primary:hover { background: var(--paper); color: var(--ink-100); }
.btn-secondary { background: var(--paper); color: var(--ink-100); }
.btn-secondary:hover { background: var(--ink-100); color: var(--paper); }
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* HERO with aurora */
.hero {
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(255,255,255,0.85) 92%, var(--paper) 100%),
    radial-gradient(60% 80% at 15% 50%, oklch(0.95 0.13 100 / 0.85), transparent 70%),
    radial-gradient(60% 80% at 50% 50%, oklch(0.88 0.13 190 / 0.90), transparent 70%),
    radial-gradient(60% 80% at 85% 50%, oklch(0.85 0.12 295 / 0.90), transparent 70%),
    oklch(0.86 0.08 240);
}
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: var(--s-5); }
.hero .form-block { margin-top: var(--s-7); }
.hero .meta { margin-top: var(--s-5); }

/* Email form */
.form-block { max-width: 520px; }
.subscribe-form { display: flex; gap: 0; border: 1px solid var(--ink-100); background: var(--paper); align-items: stretch; }
.subscribe-form input[type="email"] { flex: 1; border: 0; padding: 14px 16px; font: inherit; font-size: var(--t-base); background: transparent; color: var(--ink-100); outline: none; min-width: 0; }
.subscribe-form input[type="email"]::placeholder { color: var(--ink-40); }
.subscribe-form input[type="email"]:focus { background: var(--ink-02); }
.subscribe-form button { border: 0; border-left: 1px solid var(--ink-100); padding: 14px 22px; font-size: var(--t-sm); font-weight: 500; background: var(--ink-100); color: var(--paper); transition: background 180ms var(--ease), color 180ms var(--ease); white-space: nowrap; }
.subscribe-form button:hover { background: var(--paper); color: var(--ink-100); }
.subscribe-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.form-meta { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-60); }
.form-meta a { color: var(--ink-100); border-bottom: 1px solid var(--ink-20); }
.form-meta a:hover { border-bottom-color: var(--ink-100); }
.form-status { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-80); min-height: 1.5em; }
.form-status.is-success { color: var(--ink-100); font-weight: 500; }
.form-status.is-error { color: var(--ink-100); }
.subscribe-wrap.is-submitted .subscribe-form { display: none; }

/* Numbers strip */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-top: var(--s-6); border-top: 1px solid var(--ink-10); border-bottom: 1px solid var(--ink-10); }
.numbers .n { padding: var(--s-6) var(--s-5); border-right: 1px solid var(--ink-10); }
.numbers .n:last-child { border-right: none; }
.numbers .n .v { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; display: block; line-height: 1; }
.numbers .n .l { display: block; margin-top: var(--s-3); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); }

/* Manifesto pull */
.pull { font-size: var(--t-xl); line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: var(--ink-100); max-width: 28ch; border-left: 1px solid var(--ink-100); padding-left: var(--s-5); }

/* Wedge cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin-top: var(--s-6); }
.card { background: var(--paper); border: 1px solid var(--ink-10); padding: var(--s-6); display: flex; flex-direction: column; min-height: 240px; transition: border-color 200ms var(--ease), background 200ms var(--ease); }
.card:hover { border-color: var(--ink-100); background: var(--ink-02); }
.card .eyebrow { margin-bottom: var(--s-3); }
.card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.card p { color: var(--ink-60); flex-grow: 1; font-size: var(--t-sm); }

/* Tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tag { border: 1px solid var(--ink-10); padding: 6px 12px; font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--ink-60); text-transform: uppercase; }

/* FAQ */
.faq { border-top: 1px solid var(--ink-10); margin-top: var(--s-6); }
.faq details { border-bottom: 1px solid var(--ink-10); padding: var(--s-5) 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: var(--t-md); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-lg); color: var(--ink-40); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { content: "−"; color: var(--ink-100); }
.faq details p { margin-top: var(--s-3); }

/* Footer with subtle aurora */
.footer {
  border-top: 1px solid var(--ink-10);
  padding: var(--s-8) 0 var(--s-7);
  margin-top: var(--s-9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(50% 80% at 12% 100%, oklch(0.97 0.06 100 / 0.30), transparent 70%),
    radial-gradient(55% 90% at 50% 100%, oklch(0.94 0.06 190 / 0.25), transparent 70%),
    radial-gradient(55% 90% at 88% 100%, oklch(0.93 0.06 295 / 0.28), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, oklch(0.98 0.01 240) 100%);
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurora-violet), var(--aurora-sage), var(--aurora-amber), transparent);
  opacity: 0.6;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); align-items: start; }
.footer h5 { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; margin-bottom: var(--s-3); }
.footer ul li { margin-bottom: var(--s-2); }
.footer a { color: var(--ink-60); font-size: var(--t-sm); }
.footer a:hover { color: var(--ink-100); }
.footer .socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer .socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--ink-10); border-radius: 999px; color: var(--ink-60); transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease); }
.footer .socials a:hover { color: var(--ink-100); border-color: var(--ink-100); background: var(--ink-02); transform: translateY(-1px); }
.footer .socials svg { width: 15px; height: 15px; display: block; }
.footer .brand-block .wordmark { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.footer .brand-block p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-60); }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink-10); display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-40); letter-spacing: 0.02em; }

/* Status pages */
.status-page { min-height: 70vh; display: flex; align-items: center; }
.status-page .prose { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.status-page h1 { font-size: var(--t-3xl); }
.status-page .lede { margin-top: var(--s-4); }
.status-page .btn-row { margin-top: var(--s-7); }
.status-icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink-100); margin-bottom: var(--s-5); font-size: 18px; font-weight: 600; }

@media (max-width: 800px) {
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-xl); }
  .cards { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers .n { border-right: none; border-bottom: 1px solid var(--ink-10); }
  .numbers .n:nth-child(even) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer .brand-block { grid-column: 1 / -1; }
  section { padding: var(--s-7) 0; }
  .hero { padding: var(--s-8) 0 var(--s-7); }
  .subscribe-form { flex-direction: column; }
  .subscribe-form button { border-left: 0; border-top: 1px solid var(--ink-100); }
}