/* The Sunlight Engine look, shared by every page of this site. Built from Vi's locked brand system:
   - type: Cormorant Garamond (titles, opening lines, reading), Source Sans 3 (the interface), Gentium Plus (Igbo, Yorùbá, Greek)
   - color: ink and paper, with one accent that follows today's market day (the four palaces of the EPSILON flag palette)
   - 28 as structure: the spacing and type steps below.
   The same tokens as Commonplace and Rudo, so every site in the network reads as one family.
   This site's accent is its locked entity color, set at the bottom. */
@import url('/fonts/fonts.css');

:root {
  --ink: #1d1c38;        /* DC blue (#3C3B6E) taken to ink */
  --ink-2: #4a4966;
  --muted: #6c6b85;
  --line: #dddce6;
  --line-strong: #b9b8c8;
  --paper: #f6f6f3;
  --surface: #ffffff;
  --sunk: #ecebf1;

  --athens: #0d5eaf;     /* Eke: Greek blue */
  --lagos: #00704a;      /* Orie: Naija green, deepened to read as text */
  --dc: #3c3b6e;         /* Afo: American blue */
  --paris: #c42e24;      /* Nkwo: French red, deepened to read as text */
  --accent: var(--athens);
  --accent-ink: #ffffff;

  --yes: #00704a;        /* on the shelf */
  --no: #8a5a00;         /* checked out */

  --serif: 'Cormorant Garamond', 'Gentium Plus', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --langs: 'Gentium Plus', 'Cormorant Garamond', Georgia, serif;

  --s1: 4px; --s2: 7px; --s3: 14px; --s4: 21px; --s5: 28px; --s6: 56px;
  --radius: 4px;
  --measure: 34em;
  --accent-text: var(--accent);
  --bg: var(--paper); --fg: var(--ink); --link: var(--ink); --on-accent: var(--accent-ink);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ecebf5; --ink-2: #c3c2d6; --muted: #9897b0; --line: #34334f; --line-strong: #4b4a6a;
    --paper: #15142a; --surface: #1d1c38; --sunk: #25244a;
    --athens: #6aa6e6; --lagos: #3fbf86; --dc: #a9a8ec; --paris: #ff8075;
    --accent-ink: #15142a; --yes: #4fcf95; --no: #e8b45a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 2px; }
[lang='ig'], [lang='yo'], [lang='el'] { font-family: var(--langs); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- The about, privacy and not-found pages ---------- */
.wrap { max-width: 1008px; margin: 0 auto; padding: 0 var(--s4); }
.narrow { max-width: 728px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--s3); top: var(--s3); background: var(--surface); padding: var(--s2) var(--s3); z-index: 9; }
header.site { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; }
header.site .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 56px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); font: 600 28px/1 var(--serif); }
.brand img { height: 34px; width: auto; }
nav.site { margin-left: auto; display: flex; gap: var(--s4); flex-wrap: wrap; }
nav.site a { color: var(--ink-2); text-decoration: none; font-size: 15px; padding: var(--s2) 0; border-bottom: 2px solid transparent; }
nav.site a:hover, nav.site a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.hero { padding-top: var(--s6); padding-bottom: var(--s5); }
.eyebrow { font: 600 15px/1.3 var(--sans); color: var(--accent-text); margin-bottom: var(--s2); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; margin: 0 0 .4em; font-weight: 600; }
h1 { font-size: clamp(42px, 7vw, 70px); letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: 24px; }
p, li { max-width: 68ch; }
.lede { font: 500 clamp(22px, 3vw, 28px)/1.4 var(--serif); color: var(--ink-2); max-width: 36em; }
section.block { padding: var(--s6) 0 var(--s5); border-top: 1px solid var(--line); }
.grid { display: grid; gap: 0 var(--s5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { border-top: 1px solid var(--line-strong); padding: var(--s3) 0 var(--s4); min-width: 0; }
.card h3 { margin: 0 0 var(--s1); }
.card p { margin: .3em 0 0; color: var(--ink-2); font-size: 16px; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover h3 { color: var(--accent-text); }
.tag { display: inline-block; font: 600 14px/1.2 var(--sans); color: var(--accent-text); }
.tag.soon { color: var(--muted); }
.btn { display: inline-block; padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font: 600 16px var(--sans); background: transparent; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn.primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
table.t { width: 100%; border-collapse: collapse; font-size: 16px; }
table.t th, table.t td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { font: 600 14px var(--sans); color: var(--muted); }
.tblwrap { overflow-x: auto; }
footer.net { border-top: 1px solid var(--line); margin-top: var(--s6); padding: var(--s5) 0 var(--s6); font-size: 15px; color: var(--muted); }
footer.net h4 { font: 600 14px var(--sans); margin: 0 0 var(--s2); color: var(--ink); }
footer.net .cols { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
footer.net a { color: var(--ink-2); text-decoration: none; }
footer.net a:hover { color: var(--ink); text-decoration: underline; }
footer.net li { padding: 3px 0; }
footer.net .sw { display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); vertical-align: middle; }
.today { font: 14px var(--sans); color: var(--muted); }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: var(--s5); padding-bottom: var(--s4); }
  nav.site { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  nav.site a { white-space: nowrap; }
}

/* ---------- This site's locked entity color ---------- */
:root{--accent:#EF4135;--accent-text:#ce382e;--accent-ink:#1d1c38;--swatch:#EF4135}
@media (prefers-color-scheme: dark){:root{--accent:#ef4135;--accent-text:#ef4135;--accent-ink:#15142a}}

/* ---------- Parts some pages use ---------- */
.brand .dot { display: inline-block; width: 10px; height: 10px; background: var(--swatch, var(--accent)); }
.paths .card h3 { font-size: 26px; }
.struct { display: grid; gap: 0 var(--s5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.struct .card { border-top: 3px solid var(--c, var(--accent)); }
.entry { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.entry time { font: 600 14px var(--sans); color: var(--muted); }
.entry h3 { margin: .3em 0; }
.entry p { margin: .5em 0; }

/* ---------- Bold flags (decided 2026-10-10) ----------
   Ink goes from navy to near-black so the flag colors carry the color.
   The stripe is the eight entity colors, all from the American, Greek, Irish, Nigerian, and French flags.
   Washington's palace takes American red, so the four palaces are one blue, one green, and two reds. */
:root {
  --ink: #161616; --ink-2: #3e3e3c; --muted: #67665f; --line: #deddd6; --line-strong: #b9b8b0; --sunk: #ecebe6;
  --dc: #b22234;
  --flag: linear-gradient(90deg, #B22234 0 12.5%, #3C3B6E 0 25%, #0D5EAF 0 37.5%, #169B62 0 50%, #FF883E 0 62.5%, #008751 0 75%, #0055A4 0 87.5%, #EF4135 0);
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f2f1ec; --ink-2: #cfcec8; --muted: #9c9b95; --line: #333331; --line-strong: #4a4a47;
    --paper: #121211; --surface: #1c1c1b; --sunk: #262624; --dc: #ff7a7a; }
}
header.site { border-bottom: 0; }
header.site::before { content: ''; display: block; height: 10px; background: var(--accent); }
header.site::after { content: ''; display: block; height: 5px; background: var(--flag); }
h2 { color: var(--accent-text); }
.card { border-top: 3px solid var(--accent); }
footer.net { border-top: 5px solid transparent; border-image: var(--flag) 1; }

/* White text on French red is under 4.5:1, so primary buttons use the deepened red. */
@media (prefers-color-scheme: light){.btn.primary{background:var(--accent-text);border-color:var(--accent-text)}}