/* My Concussed Brain — shared styles.
   Layout follows Marit's mockups (content/marit-mockups/). Colors come only from brand/palette.md.
   Fonts are self-hosted (SIL Open Font License): Fraunces for headings, Atkinson Hyperlegible Next for text. */

@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-wght-normal.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-wght-italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible Next"; src:url("../fonts/atkinson-wght-normal.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible Next"; src:url("../fonts/atkinson-wght-italic.woff2") format("woff2"); font-weight:200 800; font-style:italic; font-display:swap; }

/* Palette (brand/palette.md): Forest #25554B, Cream #F8F4EC, Mint #82DAB1, Ink #1B2B27 */
:root {
  --forest:#25554B; --cream:#F8F4EC; --mint:#82DAB1; --ink:#1B2B27;

  --bg:var(--cream);
  --text:var(--ink);
  --muted:var(--forest);                 /* secondary text: 7.7:1 on Cream */
  --accent:var(--forest);                /* drop cap, rules, numbers, links */
  --card:rgba(255,255,255,0.55);
  --line:rgba(27,43,39,0.16);
  --focus:var(--forest);
  --nav-bg:rgba(248,244,236,0.94);
  --button-bg:var(--mint); --button-text:var(--ink);   /* 8.9:1 */
  --soft:rgba(130,218,177,0.22);

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light dark;
}

/* Dark mode for light-sensitive readers: follows the phone or computer setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:var(--ink);
    --text:var(--cream);                 /* 13.5:1 on Ink */
    --muted:var(--mint);                 /* 8.9:1 on Ink */
    --accent:var(--mint);
    --card:rgba(248,244,236,0.05);
    --line:rgba(248,244,236,0.18);
    --focus:var(--mint);
    --nav-bg:rgba(27,43,39,0.94);
    --soft:rgba(130,218,177,0.12);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:1.125rem; line-height:1.6;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
h1, h2, h3, h4 { font-family:var(--serif); font-weight:600; line-height:1.15; margin:0; }
p { margin:0; }
a { color:inherit; text-underline-offset:0.18em; }
img { max-width:100%; height:auto; }

:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }

.skip-link { position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--button-bg); color:var(--button-text);
  padding:0.6rem 1rem; border-radius:8px; font-weight:700; text-decoration:none; }
.skip-link:focus { top:1rem; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Header / navigation ---------- */
.site-header { border-bottom:1px solid var(--line); background:var(--nav-bg); }
.site-header .bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.8rem 5vw; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:0.6rem; font-family:var(--serif); font-weight:600; font-size:1.1rem; text-decoration:none; }
.brand img { width:44px; height:44px; border-radius:50%; }
.navlinks { display:flex; flex-wrap:wrap; gap:0.3rem 1.3rem; font-size:0.95rem; list-style:none; margin:0; padding:0; }
.navlinks a { text-decoration:none; padding:0.3rem 0; display:inline-block; }
.navlinks a:hover, .navlinks a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; }
.navcta, .btn {
  display:inline-block; background:var(--button-bg); color:var(--button-text); padding:0.6rem 1.15rem;
  border-radius:999px; font-size:0.95rem; font-weight:700; text-decoration:none; white-space:nowrap; border:2px solid transparent;
}
.navcta:hover, .btn:hover { border-color:var(--text); }
.btn.secondary { background:transparent; color:var(--text); border-color:var(--line); }
.btn.secondary:hover { border-color:var(--text); }

@media (min-width:821px) {
  .site-header { position:sticky; top:0; z-index:10; backdrop-filter:blur(6px); }
}
@media (max-width:820px) {
  .site-header .bar { padding:0.8rem 1rem; }
  .navlinks { order:3; width:100%; gap:0.2rem 1.1rem; }
}

/* ---------- "Coming soon" labels ---------- */
.soon { display:inline-block; font-size:0.85rem; font-weight:700; padding:0.3rem 0.8rem; border-radius:999px;
  border:1.5px dashed currentColor; width:fit-content; }

/* ---------- Homepage ---------- */
.tagline { text-align:center; font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.8vw,1.25rem);
  padding:1.1rem 1rem; border-bottom:1px solid var(--line); }

.split { display:flex; min-height:min(72vh, 680px); }
.panel { position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:6vw; }
.panel .eyebrow { font-size:0.85rem; font-weight:700; letter-spacing:0.04em; }
.panel h2 { font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.08; max-width:11ch; }
.panel p { max-width:34ch; }
.panel.left {
  background:radial-gradient(circle at 25% 20%, rgba(130,218,177,0.22), transparent 55%),
             radial-gradient(circle at 75% 80%, rgba(130,218,177,0.10), transparent 60%), var(--forest);
  color:var(--cream);                    /* 7.7:1 */
}
.panel.left :focus-visible { outline-color:var(--mint); }
.panel.right {
  background:linear-gradient(155deg, var(--mint) 0%, rgba(130,218,177,0.55) 100%), var(--cream);
  color:var(--ink);                      /* 8.9:1 or better */
}
.panel.right :focus-visible { outline-color:var(--ink); }

.creative { padding:2.6rem 1.25rem; text-align:center; border-bottom:1px solid var(--line); }
.creative h2 { font-size:1.45rem; max-width:24ch; margin:0.5rem auto 0.7rem; }
.creative p { max-width:46ch; margin:0 auto 1.2rem; }
.eyebrow { font-size:0.85rem; font-weight:700; letter-spacing:0.04em; color:var(--muted); }
.panel .eyebrow { color:inherit; }
.mediums { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; list-style:none; margin:0 0 1.2rem; padding:0; }
.mediums li { font-size:0.9rem; padding:0.35rem 0.85rem; border:1px solid var(--line); border-radius:999px; background:var(--card); }

.sections { padding:3.5rem 5vw; max-width:1120px; margin:0 auto; }
.sections > .eyebrow { text-align:center; }
.sections > h2 { text-align:center; font-size:clamp(1.6rem,3vw,2.1rem); max-width:22ch; margin:0.4rem auto 2.4rem; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; list-style:none; margin:0; padding:0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; gap:0.55rem; height:100%; }
.tile .ic { font-size:1.6rem; }
.tile h3 { font-size:1.2rem; }
.tile h3 a { text-decoration:none; }
.tile h3 a::after { content:""; position:absolute; inset:0; }   /* whole tile is clickable */
.tile { position:relative; }
.tile:has(a:hover) { border-color:var(--text); }
.tile .go { font-size:0.95rem; font-weight:700; margin-top:auto; color:var(--muted); }

@media (max-width:820px) {
  .split { flex-direction:column; min-height:auto; }
  .panel { padding:3.2rem 1.25rem; }
  .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) { .grid { grid-template-columns:1fr; } }

/* ---------- Article pages (founder, submit) ---------- */
.hero { padding:3.4rem 1.25rem 2.6rem; text-align:center; border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 20% 15%, var(--soft), transparent 55%), radial-gradient(circle at 85% 85%, var(--soft), transparent 55%); }
.hero h1 { font-size:clamp(2rem,4.2vw,2.8rem); max-width:18ch; margin:0.6rem auto 0.5rem; }
.hero .by { color:var(--muted); }
.portrait { display:block; width:200px; height:200px; object-fit:cover; border-radius:50%; margin:0 auto 1.4rem;
  box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--accent); }

.wrap { max-width:680px; margin:0 auto; padding:3rem 1.25rem 4rem; }
.story p { line-height:1.75; margin-bottom:1.3rem; }
.story p:first-of-type::first-letter { font-family:var(--serif); font-weight:600; font-size:2.8rem; float:left; line-height:0.85;
  padding-right:0.5rem; margin-top:0.12rem; color:var(--accent); }
.pullquote { font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.35rem; line-height:1.4;
  border-left:4px solid var(--accent); padding:0.2rem 0 0.2rem 1.2rem; margin:2rem 0; }
.story .pullquote p { margin:0; line-height:1.4; }
.sign { margin-top:2rem; font-family:var(--serif); font-style:italic; font-size:1.2rem; }

.cta-band { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.6rem; text-align:center; margin-top:2.6rem; }
.cta-band p { margin-bottom:1rem; }
.cta-row { display:flex; gap:0.8rem; justify-content:center; align-items:center; flex-wrap:wrap; }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.6rem; margin-bottom:1.4rem; }
.card h2 { font-size:1.3rem; margin-bottom:0.7rem; }
.card p + p { margin-top:0.8rem; }
.intro { max-width:52ch; margin-bottom:1.2rem; }
.kicker { font-size:0.85rem; font-weight:700; letter-spacing:0.04em; color:var(--muted); }

/* ---------- Resources ---------- */
.wrap.wide { max-width:780px; }
.jump { display:flex; flex-wrap:wrap; gap:0.5rem 1.6rem; margin:0 0 2.4rem; padding:0 0 0.2rem; border-bottom:1px solid var(--line); list-style:none; }
.jump a { display:inline-block; padding:0.7rem 0.1rem; font-weight:700; text-decoration:none; border-bottom:3px solid transparent; }
.jump a:hover { border-bottom-color:var(--accent); }
.resource-section { scroll-margin-top:6rem; }
.resource-section + .resource-section { margin-top:3.5rem; padding-top:3rem; border-top:1px solid var(--line); }
.resource-section h2.page-title { font-size:clamp(1.8rem,3.6vw,2.3rem); margin-bottom:0.7rem; }
.lede { max-width:60ch; margin-bottom:1.2rem; }
.disclaimer { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px;
  padding:0.9rem 1.1rem; font-size:1rem; margin-bottom:2rem; }

.stats { margin-bottom:2.2rem; }
.stats h3, .starthere h3, .topic h3 { font-size:1.2rem; margin-bottom:0.8rem; }
.stat-list { list-style:none; margin:0 0 0.9rem; padding:0; }
.stat-list li { font-size:1rem; margin-bottom:0.8rem; padding-left:1.2rem; position:relative; }
.stat-list li::before { content:"—"; position:absolute; left:0; color:var(--muted); }
.stat-list .num { font-weight:700; color:var(--accent); }
.stat-note, .globalbox { font-size:1rem; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:0.9rem 1.1rem; margin-bottom:1.2rem; }
.globalbox { margin-bottom:2.2rem; }
.globalbox .eyebrow { margin-bottom:0.4rem; }

.starthere { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; margin-bottom:2.2rem; }
.starthere ul { list-style:none; display:flex; flex-direction:column; gap:0.7rem; margin:0; padding:0; }
.starthere a { font-weight:700; }
.caveat { font-size:0.95rem; color:var(--muted); }
.tag { display:inline-block; font-size:0.72rem; font-weight:700; padding:0.15rem 0.55rem; border-radius:999px; margin-left:0.4rem;
  vertical-align:middle; text-transform:uppercase; letter-spacing:0.03em; border:1.5px solid var(--accent); color:var(--text); }
.tag.gov { background:var(--forest); border-color:var(--forest); color:var(--cream); }
.tag.med { background:var(--mint); border-color:var(--mint); color:var(--ink); }

.topic { margin-bottom:2.2rem; }
.topic p { max-width:62ch; margin-bottom:0.6rem; }
.topic .links { display:flex; flex-wrap:wrap; gap:0.4rem 1.3rem; font-size:1rem; }

.caution { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:0.9rem 1.1rem; font-size:1rem; margin:2rem 0; }
.caution p + p { margin-top:0.6rem; }

/* ---------- Voices & Talks ---------- */
.talk-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.talk-list .card { margin:0; padding:1.3rem 1.4rem; position:relative; }
.talk-list h3 { font-size:1.15rem; margin-bottom:0.5rem; }
.talk-list h3 a { text-decoration:none; }
.talk-list h3 a::after { content:""; position:absolute; inset:0; }   /* whole card is clickable */
.talk-list .card:has(a:hover) { border-color:var(--text); }
.talk-list .who { font-size:0.95rem; font-weight:700; color:var(--muted); }
.talk-list .who + p { margin-top:0.4rem; font-size:1rem; }
@media (max-width:640px) { .talk-list { grid-template-columns:1fr; } }

/* ---------- Follow along (homepage) ---------- */
.follow { text-align:center; padding:3rem 1.25rem; border-top:1px solid var(--line); background:var(--soft); }
.follow h2 { font-size:clamp(1.5rem,3vw,1.9rem); margin:0.4rem 0 0.7rem; }
.follow p:not(.eyebrow) { max-width:44ch; margin:0 auto 1.4rem; }
.follow-links { display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem; list-style:none; margin:0; padding:0; }
.follow-links .btn { min-width:9rem; text-align:center; }

/* ---------- Footer (required lines: see AGENTS.md rule 1) ---------- */
.site-footer { border-top:1px solid var(--line); padding:2.4rem 1.25rem calc(2.4rem + env(safe-area-inset-bottom,0px)); text-align:center; font-size:1rem; }
.site-footer .motto { font-family:var(--serif); font-style:italic; margin-bottom:1.2rem; }
.site-footer .social { display:flex; justify-content:center; flex-wrap:wrap; gap:0.4rem 1.4rem; list-style:none; margin:0 0 1.4rem; padding:0; }
.site-footer .required { max-width:44rem; margin:0 auto; }
.site-footer .required p { margin-bottom:0.6rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior:smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}