/* ==========================================================================
   VILDRA — Ciridae design system
   Tokens: DESIGN.md §Quick Start, verbatim. Font stacks carry the
   DESIGN.md-sanctioned substitutes (Oswald for Pragmatica Cond, Inter for
   Pragmatica) so the system renders identically without licensed fonts.
   Discipline: weight 400 only · no shadows · no gradients · no color fills
   on controls · ember #cc6437 as hairline strokes only.
   ========================================================================== */

/* Self-hosted fonts (latin subsets, Google Fonts builds, OFL/Apache licensed) */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/oswald-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto-mono-400-latin.woff2') format('woff2');
}

:root {
  /* Colors */
  --color-ember-rust: #cc6437;
  --color-void-black: #0b0b0b;
  --color-charcoal-surface: #272a2a;
  --color-bone: #edebe7;
  --color-bone-darker: #dfddd9;
  --color-pure-white: #ffffff;
  --color-abyss: #050505;
  --color-steel: #484848;
  --color-ash: #cecece;

  /* Typography — Font Families */
  --font-pragmatica-cond: 'Pragmatica Cond', 'Oswald', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pragmatica: 'Pragmatica', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.1;
  --tracking-caption: -0.22px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.28px;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: -0.4px;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.48px;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -0.64px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-65: 65px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-122: 122px;

  /* Layout — DESIGN.md's --element-gap ("16-20px") is omitted: the range
     notation is not a valid CSS value and parsers would drop it silently. */
  --page-max-width: 1400px;
  --section-gap: 80px;
  --card-padding: 32px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-full: 999px;
  --radius-full-2: 1440px;

  /* Named Radii */
  --radius-nav: 1440px;
  --radius-cards: 10px;
  --radius-badges: 1440px;
  --radius-buttons: 1440px;
  --radius-news-bar-button: 0px;

  /* Surfaces */
  --surface-void-canvas: #0b0b0b;
  --surface-abyss-bar: #050505;
  --surface-charcoal-card: #272a2a;
  --surface-bone-inversion: #edebe7;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface-void-canvas);
  color: var(--color-pure-white);
  font-family: var(--font-pragmatica-cond);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

img { max-width: 100%; display: block; }

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--color-void-black);
  color: var(--color-pure-white);
  border: 1px solid var(--color-pure-white);
  padding: var(--spacing-10) var(--spacing-20);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus { left: var(--spacing-16); top: var(--spacing-16); }

:focus-visible {
  outline: 1px solid var(--color-ember-rust);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   News bar — system voice
   -------------------------------------------------------------------------- */

.news-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface-abyss-bar);
  color: var(--color-pure-white);
  font-family: var(--font-roboto-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  text-align: center;
  padding: var(--spacing-11) var(--spacing-16);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Header — two ghost pills over the hero
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-20) var(--spacing-24);
}

/* --------------------------------------------------------------------------
   Pills & badges — the only interactive shapes
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--color-pure-white);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-10) var(--spacing-20);
  color: var(--color-pure-white);
  font-family: var(--font-pragmatica-cond);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.pill:hover { border-color: var(--color-ember-rust); }

.badge {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-badges);
  padding: var(--spacing-5) var(--spacing-11);
  color: var(--color-pure-white);
  font-family: var(--font-pragmatica-cond);
  font-size: var(--text-body-sm);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.badge--ember { border-color: var(--color-ember-rust); }

/* --------------------------------------------------------------------------
   Menu overlay
   -------------------------------------------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11, 11, 11, 0.98);
  display: grid;
  place-items: center;
}

.menu-overlay[hidden] { display: none; }

.menu-overlay ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-30);
  text-align: center;
}

.menu-overlay a {
  font-family: var(--font-pragmatica-cond);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

/* Hover is an ember hairline stroke, not a color fill — text stays white */
.menu-overlay a:hover { border-bottom-color: var(--color-ember-rust); }

.menu-close {
  position: absolute;
  top: var(--spacing-24);
  right: var(--spacing-24);
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-void-canvas);
  padding: var(--spacing-100) var(--spacing-24);
}

/* Image slot: assets/hero.jpg is a tiny void-colored placeholder — overwrite it
   with the real pre-blurred atmospheric photograph; nothing else changes. */
.hero-media {
  position: absolute;
  inset: 0;
  background: url('../assets/hero.jpg') center / cover no-repeat;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.55);
}

.hero-flank {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.hero-flank--left { left: var(--spacing-24); }
.hero-flank--right { right: var(--spacing-24); }

.hero-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.hero-word {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.hero-promise {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-heading-sm);
  text-transform: uppercase;
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: var(--spacing-122) var(--spacing-24); }

.wrap { max-width: var(--page-max-width); margin-inline: auto; }

.section-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--spacing-24);
}

.eyebrow {
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h2 {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.subhead {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

/* The discipline block maps to the full Section Heading Block (PLAN §B) —
   its headline carries the 32px display size. */
.subhead--display {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.lead {
  font-family: var(--font-pragmatica);
  font-size: var(--text-heading);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 720px;
}

.prose {
  font-family: var(--font-pragmatica);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 560px;
}

.mono-line {
  font-family: var(--font-roboto-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
}

.subblock {
  margin-top: var(--spacing-100);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--spacing-20);
}

/* The discipline block carries the smoke backdrop — image edges are pure
   black, so it dissolves into the void canvas with no visible seam */
.subblock--discipline {
  position: relative;
  padding: var(--spacing-40) 0;
}

.subblock--discipline::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--spacing-40)) calc(-1 * var(--spacing-24));
  background: url('../assets/discipline.jpg') center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.subblock--discipline > * { position: relative; }

/* --------------------------------------------------------------------------
   System cards
   -------------------------------------------------------------------------- */

.card-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-20);
  margin-top: var(--spacing-65);
  counter-reset: card;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--surface-charcoal-card);
  border-radius: var(--radius-cards);
  box-shadow: none;
  padding: var(--card-padding);
  display: grid;
  gap: var(--spacing-16);
  align-content: start;
}

/* Atmospheric card backdrops — DESIGN.md: photography sits behind content
   within each card, ambient not illustrative. Low opacity keeps the type boss. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

.card > * { position: relative; }

.card--ingest::before { background-image: url('../assets/card-1.jpg'); }
.card--ground::before { background-image: url('../assets/card-2.jpg'); }
.card--abstain::before { background-image: url('../assets/card-3.jpg'); }
.card--compound::before { background-image: url('../assets/card-4.jpg'); }

.card--ember { border-top: 1px solid var(--color-ember-rust); }

.card h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
}

.card p {
  font-family: var(--font-pragmatica);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Registers must not cross inside cards — keep label/system voices intact
   against the .card p prose rule above */
.card .eyebrow {
  font-family: var(--font-pragmatica-cond);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: -0.02em;
}

.card .mono-line {
  font-family: var(--font-roboto-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

.card .badge { justify-self: start; }

/* Agentic CRM — a single card, held narrow */

.card--solo {
  max-width: 700px;
  margin-inline: auto;
  gap: var(--spacing-20);
}

.card--solo h2 { font-size: var(--text-heading); letter-spacing: var(--tracking-heading); }

/* --------------------------------------------------------------------------
   Verification ledger — the machine's contract, in system voice
   -------------------------------------------------------------------------- */

.ledger {
  font-family: var(--font-roboto-mono);
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  width: min(560px, 100%);
  margin-top: var(--spacing-20);
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-16);
  padding: var(--spacing-11) 0;
  border-top: 1px solid var(--color-ember-rust);
}

.ledger-row:last-child { border-bottom: 1px solid var(--color-ember-rust); }

.ledger-row span:first-child { text-align: left; }
.ledger-row span:last-child { text-align: right; }

/* --------------------------------------------------------------------------
   Data perimeter
   -------------------------------------------------------------------------- */

.subblock--wide { justify-items: stretch; }

.subblock--wide .eyebrow { text-align: center; }

.perimeter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-32) var(--spacing-20);
  margin-top: var(--spacing-20);
  text-align: left;
}

.perimeter-item dt {
  font-family: var(--font-roboto-mono);
  font-size: var(--text-body-sm);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.perimeter-item dd {
  margin-top: var(--spacing-10);
  font-family: var(--font-pragmatica);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-ash);
}

/* --------------------------------------------------------------------------
   Bone inversion — the single light break
   -------------------------------------------------------------------------- */

.bone {
  background: var(--surface-bone-inversion);
  color: var(--color-void-black);
}

.bone .mono-line { color: var(--color-steel); }

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

.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16) var(--spacing-32);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--spacing-80) var(--spacing-24) var(--spacing-40);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Breakpoints — 1100 / 700
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .card-grid,
  .perimeter-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero flanking labels stack below 768px (PLAN §C hero spec) —
   a dedicated breakpoint, distinct from the 700/1100 grid breakpoints */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-40);
  }

  .hero-flank {
    position: static;
    transform: none;
  }
}

@media (max-width: 700px) {
  .card-grid,
  .perimeter-grid { grid-template-columns: 1fr; }

  .section { padding: var(--spacing-80) var(--spacing-24); }

  .site-footer {
    justify-content: center;
    text-align: center;
  }
}