/* Plain-text pages (the daily archive, methodology): the same paper, ink and side colours as the map, set for
   reading. Day and night follow the device, or the visitor's pick on the map (saved as "theme"). */
@font-face {
  font-family: "Kufi";
  src: url("/assets/fonts/kufi.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: oklch(0.968 0.010 85);
  --paper-2: oklch(0.938 0.014 82);
  --ink: oklch(0.24 0.018 60);
  --ink-2: oklch(0.46 0.018 60);
  --ink-3: oklch(0.62 0.014 70);
  --line: oklch(0.86 0.014 80);
  --gov: #2E6B3A;
  --hou: #D9483B;
  --r: 8px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: oklch(0.215 0.012 70);
  --paper-2: oklch(0.175 0.010 70);
  --ink: oklch(0.935 0.012 85);
  --ink-2: oklch(0.76 0.014 80);
  --ink-3: oklch(0.62 0.012 78);
  --line: oklch(0.33 0.012 70);
  --gov: oklch(0.64 0.11 148);
  --hou: oklch(0.71 0.16 30);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.215 0.012 70);
    --paper-2: oklch(0.175 0.010 70);
    --ink: oklch(0.935 0.012 85);
    --ink-2: oklch(0.76 0.014 80);
    --ink-3: oklch(0.62 0.012 78);
    --line: oklch(0.33 0.012 70);
    --gov: oklch(0.64 0.11 148);
    --hou: oklch(0.71 0.16 30);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Kufi", "Segoe UI", system-ui, sans-serif; font-size: 1rem; line-height: 1.85;
}
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px max(16px, calc((100% - 760px) / 2)); border-bottom: 1px solid var(--line); background: var(--paper);
}
.home img { display: block; height: 32px; width: auto; }
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none !important; }
  :root:not([data-theme="light"]) .on-dark { display: block !important; }
}
.bar nav { display: flex; gap: 20px; font-size: 0.9375rem; font-weight: 700; }
.bar nav a { text-decoration: none; color: var(--ink-2); }
.bar nav a:hover { color: var(--ink); text-decoration: underline; }

main { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.35; margin: 0 0 12px; font-weight: 800; }
h2 { font-size: 1.25rem; margin: 40px 0 12px; display: flex; align-items: baseline; gap: 10px; }
h2 .n { font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
h3 { font-size: 1rem; margin: 2px 0 0; }
.crumb { margin: 0 0 8px; font-size: 0.875rem; color: var(--ink-2); }
.lede { color: var(--ink-2); max-width: 65ch; margin: 0 0 8px; }
.lede .map { color: var(--ink); font-weight: 700; white-space: nowrap; }

.events { list-style: none; margin: 0; padding: 0; }
.ev { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ev p { margin: 6px 0 0; max-width: 70ch; }
.ev .src { font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ev .sub { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
/* the clarification: apart from the news, smaller and quieter */
.ev .clarify { font-size: 0.8125rem; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 6px; max-width: 70ch; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 0.8125rem; color: var(--ink-2); }
.meta time { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.meta .kind { font-weight: 700; }
.side-G, .side-C { color: var(--gov); font-weight: 700; }
.side-H { color: var(--hou); font-weight: 700; }

.unconf { margin-top: 40px; padding: 4px 20px 8px; background: var(--paper-2); border-radius: var(--r); }
.unconf > p { color: var(--ink-2); font-size: 0.9375rem; max-width: 65ch; }

.days { list-style: none; margin: 24px 0 0; padding: 0; }
.days li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.days a { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; font-weight: 800; }
.days a:hover .d { text-decoration: underline; }
.days .n { font-weight: 600; font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.days p { margin: 4px 0 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 70ch; }

.pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; font-weight: 700; font-size: 0.9375rem; }

.prose p, .prose li { max-width: 68ch; }
.prose ol, .prose ul { padding-inline-start: 22px; }
.prose li { margin: 6px 0; }

.foot { border-top: 1px solid var(--line); padding: 20px 16px 32px; text-align: center; font-size: 0.875rem; color: var(--ink-2); }
.foot p { margin: 0 auto; max-width: 760px; }