/* ==========================================================================
   PSYNDICA — BASE
   Reset, root canvas, typographic helpers, and layout primitives
   (container / section / grid / page-header / footer).
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font: var(--text-body-md);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  /* Ambient deep-purple depth falling off into void black */
  background-image:
    radial-gradient(1200px 700px at 78% -10%, rgba(45, 27, 105, 0.35), transparent 60%),
    radial-gradient(900px 600px at 0% 8%, rgba(0, 255, 65, 0.05), transparent 55%);
  background-repeat: no-repeat;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-primary); color: var(--text-on-accent); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   Typographic helpers used throughout the pages
   -------------------------------------------------------------------------- */
.h-display-1 {
  font: var(--text-display-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-caps);
  margin: 0;
  color: var(--text-primary);
}
.h-display-2 {
  font: var(--text-display-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-caps);
  margin: 0;
  color: var(--text-primary);
}
.h-display-3 {
  font: var(--text-display-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-caps);
  margin: 0;
  color: var(--text-primary);
}

.body-lg { font: var(--text-body-lg); color: var(--text-secondary); margin: 0; }
.body-md { font: var(--text-body-md); color: var(--text-secondary); margin: 0; }
.body-sm { font: var(--text-body-sm); color: var(--text-tertiary); margin: 0; }

.text-accent    { color: var(--accent-primary); text-shadow: 0 0 24px rgba(0, 255, 65, 0.35); }
.text-secondary { color: var(--accent-secondary); }

.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-10);
  border-top: 1px solid var(--border-hairline);
}
.section--narrow { max-width: 900px; }
.section--no-border { border-top: none; }

.page-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Section label — "// 01  Mission" eyebrow */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.section-label__index {
  font: var(--text-mono-sm);
  color: var(--accent-secondary);
  letter-spacing: var(--tracking-mono);
}
.section-label__text {
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label-caps);
  color: var(--text-tertiary);
}

/* Grids */
.grid-2, .grid-3 {
  display: grid;
  gap: var(--grid-gap);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--space-10) var(--space-20);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer__brand {
  font: var(--text-mono-sm);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-mono);
  max-width: 420px;
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__link {
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label-caps);
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__link:hover { color: var(--accent-primary); }
.footer__credit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: var(--text-mono-sm);
  color: var(--text-tertiary);
}
.footer__credit img { height: 22px; width: auto; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }
  .section { padding: var(--space-16) var(--space-5); }
  .page-header { padding: var(--space-16) var(--space-5) var(--space-6); }
  .footer { padding: var(--space-12) var(--space-5) var(--space-16); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}