/* FoNLO 2027 — shared stylesheet for every page in this folder.
   Colours come from the FoNLO logo: navy letters, green molecule. */

:root {
  color-scheme: light;
  --navy:   #00008d;   /* logo letters */
  --link:   #1f3fbf;
  --green:  #2f7d32;   /* logo molecule */
  --ink:    #1b1f2a;
  --muted:  #5b6475;
  --rule:   #d9deea;
  --band:   #f3f5fb;
  --bg:     #ffffff;
  --tbd-bg: #fff4c2;   /* highlight for details still to be confirmed */
  --tbd-ink:#6b4e00;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); }
a:hover { color: var(--navy); }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

/* ── header ─────────────────────────────────────────────────────────── */
header.site {
  text-align: center;
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--rule);
}
header.site img.logo { width: 288px; max-width: 70%; height: auto; }
header.site .title {
  margin: 8px 0 2px;
  font: 700 1.9rem/1.2 Georgia, "Times New Roman", serif;
  color: var(--navy);
}
header.site .when {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
}
header.site .when strong { color: var(--ink); }

/* ── navigation ─────────────────────────────────────────────────────── */
nav.site {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
nav.site a {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
nav.site a:hover { background: var(--band); }
nav.site a[aria-current="page"] { background: var(--navy); color: #fff; }

/* ── content ────────────────────────────────────────────────────────── */
main { padding: 8px 0 32px; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--navy); line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 28px 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--green); }
h3 { font-size: 1.1rem; margin: 22px 0 4px; }

.lead { font-size: 1.1rem; }

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--band);
  border-radius: 8px;
}
.facts dt { font-weight: 700; color: var(--navy); }
.facts dd { margin: 0; }

ol.topics { margin: 8px 0 16px; padding-left: 1.6em; }
ol.topics li { padding: 3px 0 3px 4px; font-weight: 600; }
ol.topics li::marker { color: var(--green); font-weight: 700; }

ul.people { list-style: none; padding: 0; margin: 8px 0; }
ul.people li { padding: 3px 0; }
ul.people .org { color: var(--muted); }

figure { margin: 20px 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
figcaption { margin-top: 6px; font-size: 0.88rem; color: var(--muted); }
figcaption .credit { font-size: 0.8rem; }
figcaption .credit a { color: inherit; }

/* two photos side by side; stacks on phones */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.pair figure { margin: 0; }

.note {
  padding: 12px 16px;
  border-left: 4px solid var(--green);
  background: var(--band);
  border-radius: 0 8px 8px 0;
}

/* Marker for details not yet settled ("to be announced"). Replace the span with
   the real text once known. Shown as quiet italics on the public site; for a
   draft review, swap in the commented yellow highlight to make leftovers pop. */
.tbd {
  font-style: italic;
  color: var(--muted);
  /* background: var(--tbd-bg); color: var(--tbd-ink); padding: 0 4px; border-radius: 3px; */
}

/* ── footer ─────────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--rule);
  padding: 16px 0 32px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  header.site .title { font-size: 1.5rem; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .pair { grid-template-columns: 1fr; }
}