/* The Children's Space Trust
   Look: engineering blueprint (cyanotype blue, white line drawings, drawing-style labels)
   meets the glow-in-the-dark stars children stick on their ceilings (phosphor green).
   Layout: one reading column with a wide margin for notes and drawings; no card grids.
   To change a colour everywhere, edit the tokens below. */

@font-face { font-family: "Archivo"; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400 700; font-display: swap; src: url(fonts/source-serif.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/source-serif-italic.woff2) format("woff2"); }

:root {
  --paper: #f6f7f9;       /* page */
  --ink: #161a26;         /* text */
  --pencil: #555c6e;      /* secondary text */
  --rule: #d5d9e2;        /* hairlines */
  --cyan: #1c3d8c;        /* blueprint blue: headings, bands, drawings */
  --cyan-deep: #142d6b;
  --on-cyan: #f3f6ff;     /* text on blue */
  --glow: #c9f26b;        /* glow-in-the-dark green: stars, highlights */
  --glow-ink: #1d2a05;    /* text on glow */
  --link: #1c3d8c;
  --hl-bg: color-mix(in srgb, #c9f26b 80%, transparent);
  --hl-ink: inherit;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 36rem;
  --wrap: 72rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1430; --ink: #e8ecf8; --pencil: #a3abc6; --rule: #26325a;
    --cyan: #9fb6f5; --cyan-deep: #16285e; --on-cyan: #f3f6ff;
    --glow: #c9f26b; --glow-ink: #1d2a05; --link: #c9f26b; --hl-bg: transparent; --hl-ink: #c9f26b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1430; --ink: #e8ecf8; --pencil: #a3abc6; --rule: #26325a;
  --cyan: #9fb6f5; --cyan-deep: #16285e; --on-cyan: #f3f6ff;
  --glow: #c9f26b; --glow-ink: #1d2a05; --link: #c9f26b; --hl-bg: transparent; --hl-ink: #c9f26b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.15rem/1.6 var(--body);
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); color: var(--cyan); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 800; font-stretch: 112%; line-height: 0.98; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 750; font-stretch: 108%; line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 700; font-stretch: 100%; line-height: 1.25; color: var(--ink); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 0.9em; }
strong { font-weight: 650; }

/* A highlighter stroke in glow green, for the one phrase that matters */
.hl { background: linear-gradient(transparent 58%, var(--hl-bg) 58%, var(--hl-bg) 92%, transparent 92%); color: var(--hl-ink); padding: 0 0.1em; }

/* Drawing-style label: small, wide capitals, like a callout on a technical drawing */
.label {
  font-family: var(--display); font-size: 0.78rem; font-weight: 600; font-stretch: 125%;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pencil);
}

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Header ---------- */
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px; border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cyan); }
.brand-name { font-family: var(--display); font-weight: 750; font-stretch: 100%; font-size: 1.05rem; line-height: 1.05; letter-spacing: -0.01em; }
.nav-list { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-family: var(--display); font-size: 0.95rem; font-weight: 500;
  color: var(--ink); text-decoration: none; padding-block: 4px;
}
.nav-list a:hover { color: var(--cyan); }
.nav-list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--glow); }
.menu-btn { display: none; }
@media (max-width: 880px) {
  .site-header { position: relative; }
  .menu-btn {
    display: block; cursor: pointer; background: none; border: 0; padding: 2px 0;
    font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--cyan);
    border-bottom: 2px solid var(--glow);
  }
  .js .menu:not(.open) .nav-list { display: none; }
  .menu.open .nav-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 5; display: block;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 4px max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px));
  }
  .menu.open .nav-list a { display: block; padding-block: 11px; border-top: 1px solid var(--rule); font-size: 1.05rem; }
  html:not(.js) .menu-btn { display: none; }
}

/* ---------- Page blocks ---------- */
.block .wrap { padding-block: clamp(48px, 7vw, 96px); }
.block + .block .wrap { border-top: 1px solid var(--rule); }

/* Two columns: text, then a margin for drawings or notes. Stacks on phones. */
.split { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.split.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 820px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 22px; min-width: 0; align-content: start; }

.intro { font-size: clamp(1.2rem, 2vw, 1.35rem); line-height: 1.5; }
.page-head .wrap { padding-block: clamp(44px, 7vw, 88px) clamp(28px, 4vw, 48px); }
.page-head .stack { max-width: 46rem; }

/* Drawings sit on a blueprint panel */
.drawing { margin: 0; background: var(--cyan-deep); border-radius: 4px; overflow: hidden; }
.drawing svg { display: block; width: 100%; }
.caption { font-size: 0.95rem; color: var(--pencil); font-style: italic; margin-top: 10px; }

/* ---------- Links that act as buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.btn {
  display: inline-block; padding: 14px 22px;
  font-family: var(--display); font-weight: 650; font-size: 1rem; font-stretch: 105%;
  background: var(--cyan); color: var(--paper); text-decoration: none; border-radius: 3px;
}
.btn:hover { background: var(--ink); }
.more { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.more::after { content: " \2192"; }

/* ---------- Lists ---------- */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 44rem; }
.items li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 28px; padding-block: 18px; border-top: 1px solid var(--rule); }
.items li:last-child { border-bottom: 1px solid var(--rule); }
.items h3 { font-size: 1.05rem; }
.items p { font-size: 1.05rem; }
@media (max-width: 560px) { .items li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The blue band: where we are ---------- */
.band { background: var(--cyan-deep); color: var(--on-cyan); }
.band h2 { color: var(--on-cyan); }
.band .label { color: color-mix(in srgb, var(--on-cyan) 70%, transparent); }
.band .wrap { padding-block: clamp(48px, 7vw, 88px); display: grid; gap: 32px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.timeline li { padding: 18px 20px 4px 0; border-top: 2px solid color-mix(in srgb, var(--on-cyan) 30%, transparent); position: relative; display: grid; gap: 6px; align-content: start; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan-deep); border: 2px solid color-mix(in srgb, var(--on-cyan) 60%, transparent); }
.timeline li.done::before { background: var(--glow); border-color: var(--glow); }
.timeline li.done { border-top-color: var(--glow); }
.timeline .when { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--glow); }
.timeline p { font-size: 1.02rem; }
@media (max-width: 820px) {
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline li { border-top: 0; border-left: 2px solid color-mix(in srgb, var(--on-cyan) 30%, transparent); padding: 0 0 22px 22px; }
  .timeline li.done { border-left-color: var(--glow); }
  .timeline li::before { top: 2px; left: -7px; }
}

/* ---------- Star Chasers: the bit for children ---------- */
.chasers { background: var(--cyan); color: var(--on-cyan); position: relative; overflow: hidden; }
.chasers .wrap { padding-block: clamp(56px, 8vw, 104px); position: relative; }
.chasers h2 { color: var(--glow); font-size: clamp(2rem, 5vw, 3.4rem); font-stretch: 118%; }
.chasers p { font-size: 1.25rem; }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 40rem; counter-reset: m; }
.missions li { counter-increment: m; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; font-size: 1.2rem; }
.missions li::before {
  content: "Mission " counter(m); font-family: var(--display); font-weight: 750; font-stretch: 112%;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--glow); color: var(--glow-ink); padding: 3px 9px; border-radius: 3px; white-space: nowrap;
}
.chasers .sky { position: absolute; inset: 0; pointer-events: none; opacity: 0.9; }
.chasers .stack { position: relative; }

/* ---------- Draft notes (for Fen; remove before launch) ---------- */
.draft {
  font-family: var(--display); font-size: 0.92rem; line-height: 1.45; font-stretch: 100%;
  color: var(--ink); background: color-mix(in srgb, var(--glow) 35%, var(--paper));
  border-left: 3px solid var(--glow); padding: 10px 14px; max-width: var(--measure);
}
.draft::before { content: "Draft note: "; font-weight: 700; }

.email { font-family: var(--display); font-weight: 650; font-size: clamp(1.15rem, 3vw, 1.6rem); font-stretch: 105%; color: var(--cyan); user-select: all; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer .wrap { padding-block: 40px 56px; border-top: 1px solid var(--rule); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.site-footer p { font-size: 0.95rem; color: var(--pencil); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--display); font-size: 0.92rem; }
.foot-links a { color: var(--ink); }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Text inside the line drawings */
.drawing text { font-family: var(--display); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; fill: #e9efff; }
.drawing text.small { font-size: 10px; fill: #a9b8e6; }

/* Preview banner (remove at launch) */
.preview-bar { background: var(--glow); color: var(--glow-ink); font-family: var(--display); font-size: 0.88rem; font-weight: 600; }
.preview-bar .wrap { padding-block: 8px; }

/* Header donate button */
.site-header .btn.donate { padding: 9px 18px; font-size: 0.95rem; }
.site-header .wrap > nav { margin-left: auto; }
@media (max-width: 880px) { .site-header .btn.donate { order: 2; } .site-header .wrap > nav { order: 3; margin-left: 0; } }

/* Ways to help: four plain link blocks */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--cyan); }
.ways a { display: grid; gap: 6px; align-content: start; padding: 20px 20px 24px 0; text-decoration: none; color: var(--ink); border-right: 1px solid var(--rule); padding-left: 20px; }
.ways a:first-child { padding-left: 0; }
.ways a:last-child { border-right: 0; }
.ways strong { font-family: var(--display); font-size: 1.2rem; color: var(--cyan); }
.ways a:hover strong { text-decoration: underline; text-decoration-color: var(--glow); text-decoration-thickness: 3px; }
.ways span:not(.label) { font-size: 1rem; color: var(--pencil); }
@media (max-width: 820px) { .ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ways a:nth-child(2) { border-right: 0; } .ways a:nth-child(3) { padding-left: 0; } .ways a { border-bottom: 1px solid var(--rule); } }
@media (max-width: 480px) { .ways { grid-template-columns: minmax(0, 1fr); } .ways a { padding-left: 0 !important; border-right: 0; } }

/* Footer columns */
.site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 24px; }
.foot-cols .foot-links { flex-direction: column; gap: 6px; }
@media (max-width: 560px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.faq li { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
@media (max-width: 560px) { .faq li { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Editorial layer (v5): 12-column grid, photo slots, founder letter
   ===================================================================== */
:root { --slot: #e4e8f0; --slot2: #dce1ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --slot: #16204a; --slot2: #1a2552; } }
:root[data-theme="dark"] { --slot: #16204a; --slot2: #1a2552; }

.ed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 36px); row-gap: 28px; align-items: start; }
.ed > * { min-width: 0; }
@media (max-width: 820px) { .ed > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; } }

/* Photo slots: replace each with a real <img> (see README) */
.photo { position: relative; margin: 0; aspect-ratio: var(--r, 4 / 3); max-width: 100%;
  background: repeating-linear-gradient(135deg, var(--slot) 0 12px, var(--slot2) 12px 24px);
  border: 1px solid var(--rule); display: flex; align-items: flex-end; }
.photo figcaption { margin: 12px; padding: 10px 12px; background: var(--paper); max-width: 30rem;
  font-family: var(--display); font-size: 0.85rem; line-height: 1.4; color: var(--ink); }
.photo figcaption b { display: block; font-size: 0.72rem; font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
.photo figcaption i { display: block; font-style: normal; color: var(--pencil); margin-top: 4px; }
.bleed { margin-inline: calc(-1 * max(20px, env(safe-area-inset-left, 0px))); }
@media (min-width: 1200px) { .bleed { margin-inline: 0; } }

.hero-h1 { font-size: clamp(2.6rem, 7.6vw, 6.2rem); line-height: 0.92; }

/* Founder letter */
.letter p { font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.6; max-width: 34rem; }
.letter p:first-child { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--cyan); }
.sig { font-style: italic; font-size: 1.4rem !important; margin-top: 1.4em !important; }
.sig small { display: block; font-style: normal; font-family: var(--display); font-size: 0.85rem; color: var(--pencil); }

/* Six weeks strip */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid var(--cyan); }
.weeks li { padding: 14px 16px 6px 0; display: grid; gap: 6px; align-content: start; }
.weeks li + li { padding-left: 16px; border-left: 1px solid var(--rule); }
.weeks .n { font-family: var(--display); font-weight: 800; font-stretch: 120%; font-size: 2.2rem; line-height: 1; color: var(--cyan); }
.weeks h3 { font-size: 1rem; }
.weeks p { font-size: 0.95rem; color: var(--pencil); }
@media (max-width: 980px) { .weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .weeks li:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .weeks { grid-template-columns: minmax(0, 1fr); } .weeks li { padding-left: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--rule); padding-bottom: 14px; } }

/* Big numbers */
.big { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: clamp(3.4rem, 9vw, 7rem); line-height: 0.9; color: var(--cyan); letter-spacing: -0.03em; }
.big-row { display: grid; gap: 4px; }
.big-row + .big-row { margin-top: 18px; }
.big-row p { font-size: 1.15rem; }
.routes { list-style: none; margin: 0; padding: 0; }
.routes li { padding-block: 10px; border-top: 1px solid var(--rule); font-size: 1.02rem; }
.routes li:last-child { border-bottom: 1px solid var(--rule); }
.routes strong { font-family: var(--display); font-weight: 650; }

/* Wordmark: two weights, as in the logo artwork */
.brand { gap: 12px; }
.brand-name { display: grid; line-height: 1; }
.brand-name .bn1 { font-weight: 500; font-size: 0.85rem; letter-spacing: 0.01em; }
.brand-name .bn2 { font-weight: 800; font-stretch: 118%; font-size: 1.2rem; letter-spacing: -0.02em; margin-top: 2px; }
.brand-name .bn2 { white-space: nowrap; }
@media (max-width: 420px) { .brand-name .bn2 { font-size: 1.02rem; } .brand svg { width: 46px; height: 46px; } .site-header .btn.donate { padding: 8px 12px; } }
.pic{margin:0} .pic img{display:block;width:100%;aspect-ratio:var(--r,4/3);object-fit:cover} .credit{font-family:var(--display);font-size:.75rem;color:var(--pencil);margin-top:6px}


/* Legal pages */
.legal-draft { font-family: var(--display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--pencil); border-left: 3px solid var(--glow); padding-left: 10px; }
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.35rem; margin-top: 18px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: var(--measure); }
.table-wrap { overflow-x: auto; }
.legal table { border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.legal th { font-family: var(--display); font-size: 0.85rem; }

/* Cookie notice */
#cookie-notice { position: fixed; z-index: 20; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 34rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(10, 20, 50, 0.18);
  padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 0.95rem; }
#cookie-notice p { margin: 0; flex: 1 1 16rem; }
#cookie-notice .cn-actions { display: flex; gap: 8px; }
#cookie-notice .btn { padding: 8px 16px; font-size: 0.9rem; border: 0; cursor: pointer; }
#cookie-notice .cn-plain { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); }

/* Founder note (About page): small portrait beside a short note */
.founder-note { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px 32px; align-items: start; max-width: 46rem; padding-top: 28px; border-top: 1px solid var(--rule); }
.founder-note .pic { width: 200px; max-width: 100%; }
.founder-note p { max-width: var(--measure, 34rem); }
.founder-note .sig { font-size: 1.15rem !important; margin-top: 0.4em !important; }
@media (max-width: 520px) { .founder-note { grid-template-columns: minmax(0, 1fr); } .founder-note .pic { width: 160px; } }

/* Large standalone statement (Home, after the hero) */
.statement { font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.35; max-width: 40ch; text-wrap: pretty; margin: 0 0 clamp(12px, 3vw, 36px); }
.statement .hl { white-space: nowrap; }