/* =========================================================
   TOKENS
   The whole identity lives here. Change these values and
   nothing else when the logo and brand arrive.
   ========================================================= */

:root {
  /* Greens */
  --green-900:  #1B3D33;   /* footer band */
  --green-700:  #2E5E4E;   /* header band, primary accent */
  --green-600:  #3A7461;   /* hover */
  --green-100:  #E4EDE8;   /* panel tint */

  /* Neutrals */
  --cream:      #FAF8F5;
  --surface:    #F4F0EA;
  --text:       #23201D;
  --muted:      #5A544D;
  --rule:       #E1DBD2;
  --on-dark:    #F7F3ED;
  --on-dark-mu: #C6D6CD;

  /* The mark. A single warm accent, used only for the dot
     after the name and for focus outlines on dark. */
  --mark:        #E8B75E;
  --focus-light: #A8451A;
  --focus-dark:  #F0C87C;
  --error:       #A8451A;   /* form errors */

  /* Type */
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --t-body:  1.125rem;
  --t-small: 1rem;
  --t-tiny:  0.9375rem;
  --t-h3:    1.25rem;
  --t-h2:    clamp(1.5rem, 1.15rem + 1.5vw, 1.875rem);
  --t-h1:    clamp(2rem, 1.25rem + 3.4vw, 3.25rem);
  --t-lead:  clamp(1.1875rem, 1.08rem + 0.6vw, 1.375rem);
  --t-mark:  clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);

  /* Space and shape */
  --pad:      1.5rem;
  --gap:      3.5rem;
  --measure:  36rem;
  --radius:   4px;
}

@media (min-width: 46em) {
  :root { --pad: 2.5rem; --gap: 4.5rem; }
}

/* =========================================================
   BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
}

p, ul, ol { margin: 0 0 1.15em; max-width: var(--measure); }
li { margin-bottom: 0.45em; }
li:last-child { margin-bottom: 0; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 0.65em; }
h1 { font-size: var(--t-h1); letter-spacing: -0.02em; max-width: 17ch; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; max-width: 20ch; }
h3 { font-size: var(--t-h3); }

/* A named entry, such as a person. The name sits closer to its
   own paragraph than to the entry above it, so each one reads
   as a single block rather than an even run of text. */
p + h3 { margin-top: 2rem; }

a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green-600); text-decoration-thickness: 2px; }

:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--focus-dark);
  color: var(--text);
  padding: 0.85rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 20;
}
.skip:focus { left: 0; top: 0; }

/* For text that a screen reader should read but that the
   page does not need to show. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   THE WORDMARK
   Set as type, with a solid dot after the name. The dot is
   the mark: Reflection Point, and a point. It is the one
   piece of brand furniture until a logo exists.

   To swap in a real logo, replace the contents of
   a.wordmark with an <img> or inline SVG. Nothing else
   needs to change.
   ========================================================= */

.wordmark {
  display: inline-block;
  font-size: var(--t-mark);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--on-dark);
  text-decoration: none;
}
.wordmark .dot { color: var(--mark); }
.wordmark:hover { color: #fff; }

/* =========================================================
   HEADER BAND
   Two rows. The name gets a row of its own, and stands on its
   own: no strapline under it.

   Below 46em the menu collapses into a details element with a
   summary labelled "Menu". Above 46em the summary is taken out
   and the list is forced open, so the desktop menu is the same
   row of links it has always been, always visible. No script
   is involved in either state.
   ========================================================= */

.site-header {
  background: var(--green-700);
  color: var(--on-dark);
}

.site-header :is(a):focus-visible { outline-color: var(--focus-dark); }

.brand-row {
  padding-top: 2.5rem;
  padding-bottom: 2.25rem;
}

.nav-row {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* The button. A word, not a glyph. The open and closed state is
   carried by the details element itself, so it needs no ARIA.
   Sits to the right of the band; the list below it stays left. */
.nav-menu { text-align: right; }

.nav-toggle {
  display: inline-block;
  margin: 0.35rem var(--pad);
  padding: 0.5rem 1.1rem;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--on-dark);
  border: 2px solid var(--on-dark-mu);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }

.nav-toggle:hover { border-color: var(--on-dark); }

.nav-toggle:focus-visible {
  outline: 3px solid var(--focus-dark);
  outline-offset: 3px;
}

/* Closed by default on a narrow screen. Open, each item is a
   row the full width of the band, so the right hand end of
   every one of them is under the thumb that just pressed the
   button, while the words stay left against a straight edge.
   The rows reach the edges, so the wrap gives up its padding
   here and each row carries its own. */
.nav-row .wrap { padding-left: 0; padding-right: 0; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  max-width: none;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.nav li { margin: 0; }

.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--pad);
  font-size: var(--t-small);
  color: var(--on-dark-mu);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.13);
}
.nav li:first-child a { border-top: 0; }

/* The mark for the current page hugs the words. Stretched
   across the whole row it would read as a divider rather
   than as an underline. */
.nav a .label { border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--on-dark); }
.nav a:hover .label { border-bottom-color: rgba(255,255,255,0.35); }
.nav a[aria-current="page"] { color: var(--on-dark); font-weight: 700; }
.nav a[aria-current="page"] .label { border-bottom-color: var(--mark); }

/* Set as type, like the arrow on links that leave the site.
   It marks the right hand end of the row as live. */
.nav .go { flex: none; font-size: 1.15em; line-height: 1; opacity: 0.75; }

@media (min-width: 46em) {
  /* No button, no rows and no chevrons: back to the row of
     links, with the underline on the link itself where it has
     always been. The list is shown whether the details element
     thinks it is open or not; the second rule is for browsers
     that hide the contents with content-visibility rather than
     display. */
  .nav-toggle { display: none; }
  .nav-menu::details-content { content-visibility: visible; }
  .nav-row .wrap { padding-left: var(--pad); padding-right: var(--pad); }
  .nav .go { display: none; }

  .nav ul {
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.15rem 1.6rem;
  }

  .nav a {
    display: inline-block;
    padding: 0.55rem 0;
    border-top: 0;
    border-bottom: 3px solid transparent;
  }
  .nav a .label { border-bottom: 0; }
  .nav a:hover { border-bottom-color: rgba(255,255,255,0.35); }
  .nav a[aria-current="page"] { border-bottom-color: var(--mark); }
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-size: var(--t-tiny);
  color: var(--muted);
  max-width: none;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 3px;
  background: var(--green-700);
  flex: none;
}

.hero h1 { margin-bottom: 0.75rem; }

.hero .lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 32rem;
  margin-bottom: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--green-700);
  border-radius: var(--radius);
}
.btn-primary { background: var(--green-700); color: var(--cream); }
.btn-primary:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.btn-secondary { background: transparent; color: var(--green-700); }
.btn-secondary:hover { background: var(--green-100); color: var(--green-700); }

/* =========================================================
   NUMBERED SECTIONS
   ========================================================= */

main { padding-bottom: var(--gap); }

/* The hero is inside main, so the page heading sits in the
   main landmark and the skip link lands above it. The gap
   main used to carry at the top now sits below the hero. */
.hero + .wrap { padding-top: var(--gap); }

.section + .section { margin-top: var(--gap); }

.section-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.num {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  font-size: var(--t-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1em;
}

.section-head h2 { margin: 0; }

.section-body { padding-left: 0; }
@media (min-width: 46em) {
  .section-body { padding-left: 3.25rem; }
}

/* =========================================================
   CARDS
   ========================================================= */

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.cards li {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green-700);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  font-size: var(--t-small);
}

/* =========================================================
   STATUS PANEL
   ========================================================= */

.status {
  margin-top: var(--gap);
  background: var(--green-100);
  border-radius: var(--radius);
  padding: 2rem var(--pad) 1.75rem;
}
.status h2 {
  font-size: var(--t-h3);
  margin-bottom: 1rem;
  color: var(--green-900);
}
.status p { max-width: 34rem; }
.status p:last-child { margin-bottom: 0; }

/* =========================================================
   DOT LIST
   A single column of items, each marked with a small green
   dot. One item per line, because the items are a plain list
   and not a set of pairs.
   ========================================================= */

.dot-list { list-style: none; padding: 0; margin: 0; max-width: 34rem; }
.dot-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6em;
}
.dot-list li:last-child { margin-bottom: 0; }

/* The list carries no bottom margin, so anything set after it
   needs its own space or it reads as one more item. */
.dot-list + p { margin-top: 1.15em; }
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--green-700);
  border-radius: 50%;
}

/* =========================================================
   FIGURES AND SOURCES
   The evidence page. Each figure carries its own citation,
   so a claim and the thing it rests on are never separated.
   ========================================================= */

.figure {
  max-width: var(--measure);
  border-left: 4px solid var(--green-700);
  padding-left: 1.25rem;
}
.figure + .figure { margin-top: 2rem; }
.figure p:last-child { margin-bottom: 0; }

.figure-claim { font-weight: 700; }

blockquote {
  margin: 0 0 1.15em;
  max-width: var(--measure);
  border-left: 4px solid var(--green-700);
  padding-left: 1.25rem;
  font-size: var(--t-lead);
  line-height: 1.5;
}

.source {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: var(--measure);
}
.source cite { font-style: italic; }
.source a { overflow-wrap: anywhere; }

/* =========================================================
   LINK LISTS
   Useful links. The address is shown in full, so it can be
   read aloud or written down, and it breaks mid-address
   rather than pushing the page sideways.
   ========================================================= */

.links a { overflow-wrap: anywhere; }


/* =========================================================
   EXTERNAL LINKS
   Every link that leaves the site opens in a new tab, and
   says so before it is followed: an arrow for people who
   can see it, and words for people using a screen reader.
   Set as type, like everything else here. Not an icon file.
   ========================================================= */

.ext {
  display: inline-block;
  padding-left: 0.2em;
  text-decoration: none;
}

/* =========================================================
   FORM
   Labels sit above their field and are always visible.
   No placeholder-only labels, and no CAPTCHA.
   ========================================================= */

.form { max-width: var(--measure); }

.field { margin-bottom: 1.5rem; }

.field > label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.field :is(input[type="text"], input[type="email"], textarea) {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--cream);
  border: 2px solid var(--muted);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}

.field textarea { min-height: 9rem; resize: vertical; }

/* Checkbox group. All five reasons stay visible and any number
   of them can be chosen. Nothing is preselected, so the choice is
   always the person's own. */
.field fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field legend {
  padding: 0;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.field-hint {
  margin: 0 0 0.6rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}
.choice:last-child { margin-bottom: 0; }

.choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.25rem 0 0;
  accent-color: var(--green-700);
}

.choice label { font-weight: 400; }

button.btn { font-family: var(--font); cursor: pointer; }

/* The honeypot. Moved off screen rather than hidden, so an
   automated submission fills it in and a person never sees
   it. It replaces a CAPTCHA, which we will not use. The
   field name and autocomplete="off" keep password managers
   from filling it in and locking a real person out. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =========================================================
   FORM ERRORS
   A summary at the top of the form, and the same words
   again above the field they belong to. The summary takes
   focus when the page comes back, so the first thing a
   person meets is what went wrong.
   ========================================================= */

.error-summary {
  max-width: var(--measure);
  border: 2px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 1.25rem var(--pad);
  margin-bottom: 2rem;
}

.error-summary:focus-visible {
  outline: 3px solid var(--focus-light);
  outline-offset: 3px;
}

.error-summary h2 {
  font-size: var(--t-h3);
  color: var(--error);
  max-width: none;
  margin-bottom: 0.75rem;
}

.error-summary ul { list-style: none; padding: 0; margin: 0; max-width: none; }

.error-summary a { color: var(--error); font-weight: 700; }

.field-error {
  color: var(--error);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--error); }

/* =========================================================
   STEP-THROUGH
   Previous and next at the foot of the page content, above
   the site footer, so the site can be read straight through
   in order. Text links, not buttons.

   Next always sits on the right, including on the first page
   where there is no previous link to balance it. On a narrow
   screen the two wrap onto their own lines and read down.
   ========================================================= */

.pager {
  border-top: 1px solid var(--rule);
  margin-top: var(--gap);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

/* The first page has no previous link, so the lone next link
   is pushed over rather than sitting where previous belongs. */
.pager .next-only { margin-left: auto; }

.pager .lab { color: var(--muted); }

/* =========================================================
   FOOTER BAND
   ========================================================= */

.site-footer {
  background: var(--green-900);
  color: var(--on-dark-mu);
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  font-size: var(--t-small);
}

.site-footer a { color: var(--on-dark); text-decoration: underline; }
.site-footer a:hover { color: #fff; }
.site-footer :is(a):focus-visible { outline-color: var(--focus-dark); }

.footer-mark {
  display: block;
  font-size: var(--t-mark);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--on-dark);
  margin: 0 0 1.75rem;
  max-width: none;
}
.footer-mark .dot { color: var(--mark); }

.footer-nav ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
}
.footer-nav li { margin: 0; }
.footer-nav a[aria-current="page"] { font-weight: 700; }

.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 46em) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.legal p { margin-bottom: 0.8em; max-width: 30rem; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--on-dark); }

.crisis {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  max-width: 34rem;
}