/* ============================================================
   Faith-AI Covenant — Foundations
   An interfaith × AI ethics initiative by the IAFSC.
   Sparse, editorial, document-grade typography.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Light.ttf") format("truetype");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Regular.ttf") format("truetype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Medium.ttf") format("truetype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Bold.ttf") format("truetype");     font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "DM Serif Text"; src: url("fonts/DMSerifText-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Text"; src: url("fonts/DMSerifText-Italic.ttf") format("truetype");  font-weight: 400; font-style: italic; font-display: swap; }

/* DM Mono — not uploaded; pulled from Google Fonts as the running-head face. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Palette ----------
     The system is almost monochromatic. Ink on paper with one grey hair-line.
     Colour enters only through the photography. */
  --ink:          rgb(0, 0, 0);           /* primary text, logo */
  --ink-soft:     rgb(11, 11, 11);        /* solid dark fills (near-black) */
  --ink-muted:    rgb(6, 6, 6);           /* secondary running text */
  --paper:        rgb(255, 255, 255);     /* primary background */
  --paper-warm:   rgb(250, 249, 246);     /* subtle paper tint for long-read */

  --grey-900: rgb(17, 16, 13);
  --grey-700: rgb(71, 71, 71);
  --grey-500: rgb(120, 124, 135);         /* italic serif subtitle colour */
  --grey-300: rgb(179, 182, 191);         /* silver — cover subtitles, dividers */
  --grey-200: rgb(217, 217, 217);         /* image placeholder */
  --hairline: rgba(0, 0, 0, 0.15);        /* 2px rule / capsule borders */
  --scrim-15: rgba(0, 0, 0, 0.20);        /* image darkening scrim */
  --scrim-70: rgba(15, 15, 15, 0.67);
  --scrim-90: rgba(15, 15, 15, 0.88);

  /* ---------- Type families ---------- */
  --font-sans:   "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif:  "DM Serif Text", "Times New Roman", Georgia, serif;
  --font-mono:   "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (document-first; mirrors Figma sizes) ---------- */
  --fs-cover:     72px;  /* hero cover titles */
  --fs-display:   48px;  /* cover title */
  --fs-h1:        36px;  /* section headline */
  --fs-h2:        26px;  /* sub-headline */
  --fs-h3:        22px;  /* card title */
  --fs-h4:        18px;  /* small headline / serif italic pull-quote */
  --fs-serif-lg:  32px;  /* occasional large serif italic */
  --fs-serif-md:  16px;  /* italic pull-quote / dek */
  --fs-body:      11px;  /* brochure body @ A4 */
  --fs-body-lg:   15px;  /* screen body */
  --fs-caption:   8px;
  --fs-running:   7px;   /* DM Mono running head */
  --fs-tag:       14px;  /* DM Mono category tag */

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-body:   1.30;
  --lh-loose:  1.45;

  --track-mono: 0.04em;     /* DM Mono running-head tracking */
  --track-wide: 0.12em;     /* uppercase tags */

  /* ---------- Spacing (8 × multiples, A4-friendly) ---------- */
  --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;

  /* A4 page (595 × 842 @ 72dpi) and A3-landscape agenda (1684 × 1190) */
  --page-w:  595px;
  --page-h:  842px;
  --page-margin-x: 52px;
  --page-margin-y: 29px;

  --land-w: 1684px;
  --land-h: 1190px;

  /* ---------- Lines, borders, radii ---------- */
  --rule-hair: 1px;
  --rule-reg:  2px;                 /* standard timeline / divider */
  --border:    1px solid var(--hairline);
  --border-2:  2px solid var(--hairline);

  --radius-0:   0px;                /* default — most elements are sharp */
  --radius-1:   2px;
  --radius-dot: 999px;              /* capsules, circle nodes */

  /* ---------- Shadow ---------- */
  /* No elevation in the print system. Screen-only subtle drop for cards. */
  --shadow-none: none;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --shadow-hero: 0 24px 80px -24px rgba(0, 0, 0, 0.35);

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast: 120ms;
  --dur-std:  220ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Semantic roles
   ============================================================ */

html { background: var(--paper); color: var(--ink); }
body { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink); }

/* Running head — the top-of-page chrome on every brochure page.
   Uppercase, DM Mono, tiny (7px on A4, 14px on screen). */
.run-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-running);
  letter-spacing: var(--track-mono);
  color: var(--ink);
  text-transform: none; /* already set in copy */
}

/* Category tag (e.g. "FAITH AI-COVENANT") */
.tag, .eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-tag);
  letter-spacing: var(--track-wide);
  color: var(--ink);
  text-transform: uppercase;
}

/* Cover title */
.title-cover {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-cover);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* Cover display (brochure-size) */
.title-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Section headline */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
/* Alternate section title — medium weight, wide */
.h1-medium {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  color: var(--ink); margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--ink); margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-snug);
  color: var(--ink); margin: 0;
}

/* Italic serif subtitle — the most distinctive voice in the system.
   Always DM Serif Text Italic, grey-500 on white, grey-300 on photo. */
.dek, .subtitle-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-serif-md);
  line-height: var(--lh-body);
  color: var(--grey-500);
}
.dek--on-photo { color: var(--grey-300); }
.dek--lg {
  font-size: var(--fs-serif-lg);
  line-height: 1.2;
}

/* Pull quote / attributed */
blockquote, .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-serif-md);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
.pullquote-attr {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--ink-muted);
  margin-top: var(--s-3);
}

/* Body copy */
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.body--print {
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* Number marker / Roman numerals in agenda timeline ("I.", "II.") — inline with headline */
.roman {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: inherit;
  color: var(--ink);
}

/* Time block — DM Mono, all caps */
.time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}

/* Utilities */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }
.italic { font-style: italic; }

.muted     { color: var(--grey-500); }
.silver    { color: var(--grey-300); }
.on-dark   { color: var(--paper); }

/* Hairline rule */
hr, .rule {
  border: 0;
  border-top: var(--border-2);
  margin: 0;
}

/* Capsule dot node (timeline) */
.dot-node {
  width: 14px; height: 14px;
  border-radius: var(--radius-dot);
  background: var(--paper);
  border: var(--border-2);
  display: inline-block;
}