/*
 * Science of Spirituality — sos.org EDS foundation (stardust:deploy Step 3)
 * Tokens per DESIGN.md "The Illuminated Program" (brand-faithful refresh, 2026-07-20).
 *
 * ── FONT LICENSING NOTE ──────────────────────────────────────────────────────
 * The display stack names adobe-caslon-pro FIRST but that face is intentionally
 * NOT shipped: Adobe Caslon Pro is Adobe-licensed (Adobe Fonts / Typekit) and
 * may not be self-hosted. Lusitana (SIL OFL 1.1) is the site's own captured
 * fallback and is what actually renders; activating real Caslon at go-live
 * requires the site's Adobe Fonts kit (a licensing decision, not a code change).
 * Jost (SIL OFL 1.1) and Lusitana are self-hosted under /styles/fonts/.
 * See styles/fonts/LICENSING.md.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ===== self-hosted fonts (all @font-face live here — never in head.html) ===== */
@font-face {
  font-family: Jost;
  src: url('/styles/fonts/jost-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Lusitana;
  src: url('/styles/fonts/lusitana-1.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Lusitana;
  src: url('/styles/fonts/lusitana-2.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/*
 * Metric-matched system fallbacks (fonttools-computed from the shipped woff2,
 * frequency-weighted advance widths vs the real system faces).
 * "Arial" override carries Jost's metrics — any `arial` in a stack renders
 * with Jost's line box, so the body/session swap shifts nothing.
 */
@font-face {
  font-family: Arial;
  src: local('Arial');
  size-adjust: 96.51%;
  ascent-override: 110.87%;
  descent-override: 38.86%;
  line-gap-override: 0%;
}

/*
 * "Lusitana Fallback" — local Times New Roman carrying Lusitana's metrics.
 * The hero h1 (display face) is above-fold, so its swap must be metric-matched.
 */
@font-face {
  font-family: 'Lusitana Fallback';
  src: local('Times New Roman');
  size-adjust: 103.70%;
  ascent-override: 92.19%;
  descent-override: 32.88%;
  line-gap-override: 0%;
}

/* ===== :root token contract (hex per DESIGN.md frontmatter, brand-native names) ===== */
:root {
  /* fonts — adobe-caslon-pro unshipped by license (see banner); Lusitana renders */
  --font-display: 'adobe-caslon-pro', lusitana, 'Lusitana Fallback', georgia, serif;
  --font-body: jost, arial, sans-serif;
  --heading-font-family: var(--font-display);
  --body-font-family: var(--font-body);

  /* type scale — one modular scale, ratio 1.25, base 18px */
  --display: clamp(2.75rem, 5vw, 3.4375rem); /* 44 → 55px, Display (Caslon voice) */
  --heading-xxl: 55px; /* Display max */
  --heading-xl: 44px;
  --heading-lg: 35px;  /* Headline (Jost 600) */
  --heading-md: 28px;  /* Quote (Caslon voice) */
  --heading-sm: 22px;  /* Title */
  --body: 18px;
  --body-sm: 15px;
  --line-height-heading: 1.2;
  --line-height-body: 1.65;

  /* colors */
  --color-bg: #F9F4ED;      /* First Light */
  --color-fg: #000;         /* Ink */
  --color-accent: #043A5B;  /* Still Waters */
  --color-gold: #E1B93B;    /* Divine Nectar */
  --color-sandal: #6D5F2B;  /* Sandalwood */
  --color-surface: #FFF;    /* Silence */

  /* spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-2xl: 96px;
  --section-padding: 64px; /* 48 tablet / 32 mobile — see media overrides */

  /* layout */
  --maxw: 1200px;
  --max-width: var(--maxw);

  /* corners — the Two Corners Rule: 19px controls, 12px surfaces, 50% photo tiles */
  --radius: 19px;         /* controls: buttons, inputs */
  --radius-surface: 12px; /* cards, media frames */

  /* elevation — the One Shadow Rule */
  --shadow-card: 0 10px 24px 6px rgb(0 0 0 / 6%);
  --shadow-card-hover: 0 14px 32px 8px rgb(0 0 0 / 9%);

  /* motion */
  --ease: cubic-bezier(0.42, 0, 0, 1);

  /* AuthorKit runtime compat (vendored blocks/section-metadata references these) */
  --spacing-s: var(--spacing-sm);
  --spacing-m: var(--spacing-md);
  --spacing-l: var(--spacing-lg);
  --spacing-xxl: var(--spacing-2xl);
  --grid-size: 12;
  --grid-container-width: var(--maxw);
  --grid-column-width: calc(var(--grid-container-width) / var(--grid-size));
  --color-dark: var(--color-fg);
  --color-light: var(--color-bg);
}

@media (width <= 900px) {
  :root { --section-padding: 48px; }
}

@media (width <= 640px) {
  :root {
    --section-padding: 32px;
    --heading-xl: 32px;
    --heading-lg: 28px;
    --heading-md: 24px;
  }
}

/* ===== document reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  hanging-punctuation: first;
  scroll-behavior: smooth;
}

/*
 * body/session font gate (CLS): first paint renders the metric-adjusted local
 * Arial (the override @font-face above); ak.js decorateSession() adds
 * body.session, switching to Jost with a zero-shift swap.
 * NEVER gate display on body.appear (#40) — body stays visible.
 */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: arial, sans-serif;
  font-size: var(--body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

body.session { font-family: var(--font-body); }

::selection {
  background: var(--color-gold);
  color: var(--color-accent);
}

/* EDS media pipeline emits width/height attrs — height:auto is mandatory (#36) */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: var(--line-height-heading);
  text-wrap: balance;
  color: var(--color-accent);
}

/* Display voice — serif reserved for reverence; metric-matched fallback, no session gate */
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 600;
  font-size: var(--heading-lg);
}

h3 {
  font-weight: 600;
  font-size: var(--heading-sm);
  line-height: 1.3;
}

h4 {
  font-weight: 600;
  font-size: var(--body);
}

p {
  margin: 0 0 var(--spacing-md);
  text-wrap: pretty;
}

a { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* gold focus on navy grounds */
main .section.dark :focus-visible,
main .band :focus-visible,
.on-navy :focus-visible,
.on-navy:focus-visible { outline-color: var(--color-gold); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--spacing-lg);
}

/* ===== EDS section scaffold ===== */
main .section {
  display: block;
  position: relative;
  padding-block: var(--section-padding);
}

main .section > .default-content,
main .section > .block-content { display: block; }

main > div,
.has-template,
div[data-status] { display: none; }

/* emptySectionCollapse=true — the consumed metadata block leaves an empty section */
main .section:empty { display: none; }

/*
 * ===== the Silken Thread (site signature) =====
 * "We are knit together by the silken thread of the Divine."
 * A 1px Divine Nectar thread descends through each section's top padding,
 * ending in a 7px gold node just above the content; the footer ends the page
 * with a circled-dot knot. Whitespace-only — never crosses content.
 * Scoped to the EDS section DOM: any section PRECEDED by a non-empty section
 * carries the thread — this skips the first visible section (the hero) even
 * when an empty, collapsed metadata section sits before it.
 */
main .section:not(:empty) ~ .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-0.5px);
  width: 1px;
  height: calc(var(--section-padding) - 24px);
  background: linear-gradient(to bottom, rgb(225 185 59 / 90%), rgb(225 185 59 / 45%));
}

main .section:not(:empty) ~ .section::after {
  content: '';
  position: absolute;
  top: calc(var(--section-padding) - 24px);
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, 0);
  background: var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(225 185 59 / 22%);
}

/* the knot — thread's end (class set by postlcp.js on fragment injection) */
footer.footer { position: relative; }

footer.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-0.5px);
  width: 1px;
  height: calc(var(--section-padding) - 30px);
  background: linear-gradient(to bottom, rgb(225 185 59 / 90%), rgb(225 185 59 / 55%));
}

footer.footer::after {
  content: '';
  position: absolute;
  top: calc(var(--section-padding) - 30px);
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, 0);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-gold) 0 3px, transparent 3.5px);
}

/*
 * ===== global button system =====
 * AuthorKit decorator: strong>a → .btn.btn-primary, em>a → .btn.btn-secondary,
 * 2+ buttons in one parent → parent .btn-group.
 * font-family inherits from body so buttons ride the session font gate.
 * No gradient text, no side stripes (DESIGN.md anti-references).
 */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* the Golden Fill Rule: gold is a fill behind navy — never carries light text */
a.btn-primary {
  background: var(--color-gold);
  color: var(--color-accent);
}

a.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-surface);
  transform: translateY(-1px);
}

a.btn-secondary {
  background: var(--color-accent);
  color: var(--color-surface);
}

a.btn-secondary:hover {
  background: #0A5178; /* Still Waters, one step brighter (canon hover) */
  transform: translateY(-1px);
}

/* surface-aware: on navy sections/blocks a navy secondary would vanish (#41) */
main .band a.btn-secondary,
main .section.dark a.btn-secondary {
  background: var(--color-surface);
  color: var(--color-accent);
}

main .band a.btn-secondary:hover,
main .section.dark a.btn-secondary:hover {
  background: var(--color-gold);
  color: var(--color-accent);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
}

/*
 * ===== static-chrome height reservation (#81) =====
 * postlcp.js injects fragments/header.html AFTER first paint; reserving the
 * fragment's rendered height on the bare <header> prevents the hero jumping
 * down when the chrome lands (the measured-CLS class of failure).
 * Values measured from the rendered fragment (see conversion log).
 */
header {
  min-height: 173px; /* utility 44 + masthead 16 + logo 96 + 16 + 1px border */
  background: var(--color-bg);
}

@media (width <= 900px) {
  /* burger masthead: utility 44 + 16 + logo 72 + 16 + 1px border */
  header { min-height: 149px; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  html { scroll-behavior: auto; }
}