/* ============================================================
   CheckEm site constitution · C0
   CHECKEM_SITE_SPEC v1.0 §3 (tokens), §10 (nav), §14 (delivery)
   Tokens scoped to .site. Fonts load via <link> in shell head.
   Law: one accent moment per viewport. No hard seams.
   ============================================================ */

.site {
  /* color (§3.1, locked) */
  --paper-0: #EDE9E0;
  --paper-warm: #E6E1D5;
  --paper-deep: #DDD7C8;
  --ink: #1C2B4B;
  --grid: rgba(28, 43, 75, 0.12);
  --ledger-red: #A65138;
  --verdict-green: #3E6B4F;
  --verdict-amber: #A87B2A;

  /* type (§3.3) */
  --font-round: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* motion (§3.4, locked) */
  --dur-quick: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pen: cubic-bezier(0.5, 0, 0.4, 1);

  /* layout */
  --nav-h: 72px;
  --pad-x: clamp(20px, 5vw, 64px);
  --w-hub: 1080px;
  --measure: 62ch;
}

/* ---------- base ---------- */

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

body.site {
  margin: 0;
  font-family: var(--font-round);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper-0);
  /* static palette drift, C0 stand-in. C2 replaces with scrubbed drift. */
  background-image: linear-gradient(
    180deg,
    var(--paper-0) 0%,
    var(--paper-0) 30%,
    var(--paper-warm) 55%,
    var(--paper-deep) 78%,
    var(--paper-deep) 86%,
    var(--ink) 98%
  );
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.site ::selection { background: var(--ink); color: var(--paper-0); }

.site a { color: inherit; }

.site :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- atmosphere layers ---------- */
/* stack: washes z0, dots z1, content z2, nav z10, grain z50 (overlay) */

.site-wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 18% 14%, rgba(255, 255, 255, 0.25), transparent 62%),
    radial-gradient(70vw 55vh at 84% 72%, rgba(28, 43, 75, 0.04), transparent 65%);
}

.site-dots {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* §3.2: ink dots 12% alpha, 1.2px radius, 30px pitch. Never grid lines. */
  background-image: radial-gradient(circle at 1.2px 1.2px, var(--grid) 1.2px, transparent 1.5px);
  background-size: 30px 30px;
}

.site-grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.site-main { position: relative; z-index: 2; }

/* ---------- type voices (§3.3) ---------- */

.wordmark {
  font-family: var(--font-round);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.voice-editorial,
.lift {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
}

.lift { font-size: 1.06em; }

.voice-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

.site h1, .site h2, .site h3 {
  font-family: var(--font-round);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

.site p { margin: 0 0 1em; }

/* ---------- nav (§10, Abyssa shell pattern) ---------- */
/* C1 swaps .nav-mark text for the scaled SVG lockup. */
/* C2 makes the veil palette-aware over deep and ink sections. */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad-x);
  z-index: 10;
  transition:
    background-color var(--dur-base) var(--ease-move),
    box-shadow var(--dur-base) var(--ease-move);
}

.site-nav.is-scrolled {
  background: rgba(237, 233, 224, 0.82);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(28, 43, 75, 0.08);
}

.nav-mark {
  font-size: 20px;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
}

.nav-links a {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur-quick) var(--ease-enter);
}

.nav-links a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ---------- buttons (§1: give, never ask) ---------- */

.site .btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-0);
  border: 1px solid var(--ink);
  font-family: var(--font-round);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-quick) var(--ease-enter),
    background-color var(--dur-base) var(--ease-move);
}

.site .btn:hover { transform: translateY(-1px); }
.site .btn:active { transform: translateY(0); }

.site .sec-nightfall .btn,
.site .site-footer .btn {
  background: var(--paper-0);
  color: var(--ink);
  border-color: var(--paper-0);
}

/* ---------- sections ---------- */

.sec {
  position: relative;
  padding: clamp(72px, 12vh, 140px) var(--pad-x);
}

.sec-inner {
  max-width: var(--w-hub);
  margin: 0 auto;
}

.sec[data-stub] { min-height: 42vh; }

/* hero */

.sec-hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: calc(var(--nav-h) + 24px);
  text-align: center;
}

.hero-mark {
  font-size: clamp(44px, 8vw, 96px);
  margin: 0 0 20px;
}

.hero-line {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  max-width: var(--measure);
  margin: 0 auto;
  opacity: 0.92;
}

.hero-ledger {
  font-size: 14px;
  margin-top: 18px;
  opacity: 0.75;
}

/* nightfall (§8.7): last palette stop, not a footer */

.sec-nightfall {
  color: var(--paper-0);
  background: linear-gradient(180deg, rgba(28, 43, 75, 0) 0%, var(--ink) 24%);
  text-align: center;
  padding-top: clamp(120px, 20vh, 220px);
  padding-bottom: clamp(96px, 16vh, 180px);
}

.nightfall-line {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}

/* spokes */

.sec-spoke {
  padding-top: calc(var(--nav-h) + clamp(48px, 10vh, 96px));
  min-height: 60vh;
}

.sec-spoke h1 { font-size: clamp(34px, 5vw, 56px); }

.sec-spoke .spoke-line {
  max-width: var(--measure);
  font-size: 17px;
  opacity: 0.9;
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--paper-0);
  padding: 56px var(--pad-x) 36px;
}

.footer-inner {
  max-width: var(--w-hub);
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}

.footer-brand { display: flex; flex-direction: column; gap: 8px; }

.footer-mark { font-size: 18px; }

.footer-stamp { font-size: 13px; opacity: 0.7; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: start; }

.footer-nav a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--dur-quick) var(--ease-enter);
}

.footer-nav a:hover { opacity: 1; }

.footer-fine {
  max-width: var(--w-hub);
  margin: 0 auto;
  font-size: 12px;
  opacity: 0.5;
}

/* ---------- mobile (§11) ---------- */
/* law: no nav overflow, no grid collapse, no pane clipping, never maximum-scale=1 */

@media (max-width: 719px) {
  .nav-links { display: none; }
  .footer-inner { flex-direction: column; }
}

/* ---------- reduced motion (§3.4, house doctrine) ---------- */

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   C1 · hero lockup, ceremony reveal, check widget (§4, §5, §7, §12)
   ============================================================ */

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

.hero-lockup {
  position: relative;
  width: min(92vw, 780px);
  margin: 0 auto;
}

.hero-lockup svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}

.sec-hero .hero-line,
.sec-hero .check {
  opacity: 0;
  transition: opacity 600ms var(--ease-enter);
}

.sec-hero.is-reveal .hero-line,
.sec-hero.is-reveal .check { opacity: 1; }

.sec-hero .hero-line { margin-top: 10px; }

.check {
  max-width: 560px;
  margin: 30px auto 0;
}

.check-row { display: flex; gap: 10px; }

.check-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(28, 43, 75, 0.35);
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}

.check-input::placeholder { color: rgba(28, 43, 75, 0.45); }

.check-input:focus { outline: none; border-color: var(--ink); }

.check-btn { flex: none; }

.check.is-busy .check-btn { opacity: 0.55; pointer-events: none; }

.check-string {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 4px;
  color: var(--ink);
}

.check-verdict {
  min-height: 22px;
  margin: 8px 0 0;
  text-align: center;
  font-size: 14px;
}

/* verdict colors live only in ledger and widget contexts (§3.1) */
.check-verdict.v-valid { color: var(--verdict-green); }
.check-verdict.v-amber { color: var(--verdict-amber); }
.check-verdict.v-invalid { color: var(--ledger-red); }
.check-verdict.v-unknown { color: var(--ink); opacity: 0.8; }

.nav-mark svg {
  display: block;
  height: 30px;
  width: auto;
  color: var(--ink);
}

@media (max-width: 479px) {
  .check-row { flex-direction: column; }
  .check-btn { justify-content: center; }
}

/* C1.1 · widget captioned as a sample of the batch product */
.check-caption {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0 0 10px;
}