/* ==========================================================================
   Gray Cat Policy - site styles
   Palette from "Palette Guide.pdf" (sage green | lavender).
   Contrast-checked variants are documented in scripts/check_contrast.py.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COLOR. This is the complete, closed set. Do not introduce another hex
   anywhere in the codebase - if something needs a color, it uses one of
   these, or this list gets extended deliberately and the README table and
   brand/palette.html are updated with it.

   Naming rule, so the set cannot sprawl:
     --name        the brand color, exactly as the palette guide specifies
     --name-700    darkened variant, for when the brand color cannot carry
                   text at WCAG AA (small text, or a control with a label)
     --name-800    the hover/active state of that -700
   At most those three per family. Ratios are checked by
   scripts/check_contrast.py; brand/palette.html renders the live set.
   -------------------------------------------------------------------------- */

:root {
  /* --- brand, exactly as specified in the palette guide ------------------ */
  --blue:        #005C9A;  /* primary: header, footer, headings, links */
  --slate:       #6E8398;  /* gray-blue: borders, third card accent */
  --sage:        #8FA89B;  /* statement band, hero block, first card accent */
  --lavender:    #B68FAD;  /* decorative accents: card top border,
                              form-note edge (see note in README) */
  --linen:       #F8F9F6;  /* page background */

  /* --- approved variants -------------------------------------------------
     Brand mid-tones stay exact on large surfaces. These darkened versions
     exist only because the brand color fails AA behind text at that size. */
  --lavender-700: #8E5F86;  /* BUTTON FILL. White label = 5.08:1.
                               The one sanctioned button color - use this,
                               not a new lavender. */
  --lavender-800: #744C6D;  /* button hover/active */
  --slate-700:    #56687C;  /* muted body text, 5.42:1 on linen */
  --blue-800:     #00456F;  /* link hover */

  /* --- neutrals ---------------------------------------------------------- */
  --ink:   #2A333D;  /* body text, 12.12:1 on linen */
  --white: #FFFFFF;

  /* Transparent tints of the above, not new colors. */
  --rule:         rgba(110, 131, 152, 0.28);  /* --slate 28%, hairlines */
  --on-blue:      rgba(255, 255, 255, 0.85);  /* secondary text on blue */
  --on-blue-wash: rgba(255, 255, 255, 0.12);  /* hover wash on blue */
  --on-blue-rule: rgba(255, 255, 255, 0.22);  /* dividers on blue */
  --on-blue-edge: rgba(255, 255, 255, 0.5);   /* control borders on blue */

  /* --- type -------------------------------------------------------------- */
  --font: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* --- layout ------------------------------------------------------------ */
  --measure: 1240px;
  --gutter: 24px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); }
a:hover { color: var(--blue-800); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--white); color: var(--blue);
  padding: 10px 16px; border-radius: 4px; font-weight: 600;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--blue);
  color: var(--white);
}

.site-header__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 16px var(--gutter) 10px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: block;
  color: var(--white);
  text-decoration: none;
  flex: 0 0 auto;
}

/* The cat artwork is a tall rectangle (see the tightened viewBox written by
   scripts/extract_logo.py), so size it by height and let width follow. */
.brand__mark {
  display: block;
  height: 88px;
  width: auto;
  aspect-ratio: 1117 / 1662;
  color: var(--white);   /* the inlined logo paints with currentColor */
}
.brand__mark svg { width: 100%; height: 100%; display: block; }

.brand__name {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Wordmark stacked above the nav, both flush right, as in the mockup. */
.site-header__bar {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 8px 12px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  border-bottom: 3px solid transparent;
}
.nav__link:hover {
  color: var(--white);
  background: var(--on-blue-wash);
}
.nav__link[aria-current="page"] {
  border-bottom-color: var(--sage);
}

.nav__toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--on-blue-edge);
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 3px;
  cursor: pointer;
}
.nav__toggle:hover { background: var(--on-blue-wash); }

@media (max-width: 960px) {
  .site-header__inner {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 6px;
  }
  .brand__mark { height: 56px; }
  .site-header__bar {
    flex: 1 1 auto;
    min-width: 0;           /* let the bar shrink instead of widening the page */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
  }
  .nav__toggle { display: block; }
  .nav { width: 100%; display: none; }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: 12px;
  }
  .nav__link {
    padding: 12px 4px;
    border-bottom: 1px solid var(--on-blue-rule);
    border-radius: 0;
  }
  .nav__link[aria-current="page"] {
    border-bottom-color: var(--sage);
    border-bottom-width: 3px;
  }
}

/* Phone widths: the wordmark can no longer sit on one line beside the mark
   and the Menu button, so let it wrap rather than push the page wider than
   the viewport. */
@media (max-width: 600px) {
  .brand__mark { height: 46px; }
  .brand__name {
    white-space: normal;
    font-size: 1.3rem;
    text-align: right;
  }
  .site-header__inner { gap: 12px; }
  .site-header__bar { gap: 10px; }
  .nav__toggle { padding: 8px 12px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--lavender-700);
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease-in-out;
}
.btn:hover { background: var(--lavender-800); color: var(--white); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--white);
  padding: 72px 0;
}

.hero__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: 64px;
  align-items: center;
}

/* Photo sits down-and-right of a sage block, as in the mockup. */
.hero__figure {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.hero__figure::before {
  content: "";
  position: absolute;
  inset: -22px 22px 22px -22px;
  background: var(--sage);
  z-index: -1;
}
.hero__photo { width: 100%; height: auto; }

.hero__name {
  color: var(--blue);
  font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}
.hero__name span { display: block; }

.hero__lede {
  color: var(--blue);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: 1.6em;
}

/* Current focus areas, under the lede and a step smaller, so the lede stays
   the headline statement. Added 25 September 2026. */
.hero__lede:has(+ .hero__focus) { margin-bottom: 0.9em; }
.hero__focus {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  max-width: 40ch;
  margin-bottom: 1.8em;
}

@media (max-width: 860px) {
  .hero { padding: 48px 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  /* Leave room for the sage block, which sits 22px outside the photo. */
  .hero__figure { max-width: min(340px, 100% - 48px); margin-inline: auto; }
  .hero__lede, .hero__focus { max-width: none; }
}

/* --------------------------------------------------------------------------
   Statement band
   -------------------------------------------------------------------------- */

.band {
  background: var(--sage);
  color: var(--ink);       /* 5.03:1 - white would be 2.55:1 and fail AA */
  padding: 64px 0;
}

/* Column split is set so the headline has room to break into two lines at
   desktop widths, as it does in the mockup. Below 860px both stack. */
.band__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 56px;
  align-items: center;
}

.band__quote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
}

.band__headline {
  margin: 0;
  font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.5rem);
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;      /* even line lengths where supported */
}

/* Keep "policy complexity" on one line. Verified across widths by
   scripts/measure_text.py, which fails if the phrase splits. */
.band__headline .nowrap { white-space: nowrap; }

@media (max-width: 860px) {
  .band { padding: 48px 0; }
  .band__inner { grid-template-columns: 1fr; gap: 28px; }
  .band__headline { order: -1; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 80px 0; }
.section--tint { background: var(--white); }

.section__title {
  color: var(--blue);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  text-align: center;
  margin-bottom: 0.9em;
}

/* --------------------------------------------------------------------------
   Offer cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--sage);
  padding: 34px 30px;
}
.card:nth-child(2) { border-top-color: var(--lavender); }
.card:nth-child(3) { border-top-color: var(--slate); }

.card__title {
  color: var(--blue);
  font-size: 1.0625rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1em;
}

.card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* No markers at the top level: the items are few, short and well separated,
   so the dots were decoration rather than structure. Separation comes from
   spacing instead. The nested list keeps its markers, because there it is
   doing real work - distinguishing a sub-enumeration from its parent item.
   The markup carries role="list" so removing the markers does not also
   remove the list semantics in Safari/VoiceOver. */
.card > ul > li {
  margin-bottom: 1.15em;
}
.card > ul > li:last-child { margin-bottom: 0; }

.card ul ul {
  margin-top: 0.6em;
  padding-left: 4px;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.card ul ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 0.3em;
}
.card ul ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 9px;
  height: 1px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact__title {
  color: var(--blue);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
  margin-bottom: 0.6em;
}

.contact__email {
  font-weight: 600;
  font-size: 1.125rem;
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-700);
  margin-bottom: 7px;
}

.field .req { color: var(--lavender-800); }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--slate);
  border-radius: 2px;
  padding: 12px 14px;
}
.field textarea { resize: vertical; min-height: 170px; }

.field input:focus,
.field textarea:focus {
  border-color: var(--blue);
  outline: 3px solid var(--lavender-700);
  outline-offset: 1px;
}

.form__note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--linen);
  border-left: 4px solid var(--lavender);
  font-size: 0.9375rem;
  color: var(--slate-700);
}

@media (max-width: 860px) {
  .section { padding: 56px 0; }
  .contact__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--blue);
  color: var(--white);
  padding: 48px 0 36px;
}

.site-footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.site-footer a { color: var(--white); }

.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer__brand .brand__mark { height: 50px; }
.footer__brand strong { font-size: 1.15rem; }

.footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer__nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer__nav a:hover { text-decoration: underline; }

.footer__meta {
  width: 100%;
  border-top: 1px solid var(--on-blue-rule);
  padding-top: 20px;
  font-size: 0.875rem;
  color: var(--on-blue);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Preview-only banner. Delete this rule and the matching markup in
   assets/js/includes.js when the site goes live.
   -------------------------------------------------------------------------- */

.preview-flag {
  background: var(--ink);
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 8px var(--gutter);
}

/* ==========================================================================
   Interior pages (About, Publications, Media, Contact)
   ========================================================================== */

/* --- page head ----------------------------------------------------------- */

.page-head {
  position: relative;
  background: var(--white);
  padding: 56px 0 44px;
}

/* Same width as a .wrap's content box, so this rule lines up with the sage
   top edge of the panels on the Publications page. */
.page-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100% - var(--gutter) * 2, var(--measure) - var(--gutter) * 2);
  border-bottom: 4px solid var(--sage);
}

.page-head__title {
  color: var(--blue);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);
  margin-bottom: 0.25em;
}

/* For a page whose first element already carries a coloured edge, so the
   two rules do not stack a few pixels apart. */
.page-head--norule { padding-bottom: 8px; }
.page-head--norule::after { display: none; }

.page-head__lede {
  color: var(--slate-700);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  max-width: 58ch;
  margin: 0;
}
.page-head__lede + .page-head__lede { margin-top: 0.75em; }

/* --- generic prose ------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose li { margin-bottom: 0.6em; }
.prose h2 {
  color: var(--blue);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  margin-top: 1.6em;
}
.prose h2:first-child { margin-top: 0; }

.plainlist { list-style: none; margin: 0 0 1em; padding: 0; }
.plainlist li { margin-bottom: 0.9em; }
.plainlist li:last-child { margin-bottom: 0; }

/* --- two-column split with a figure -------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 56px;
  align-items: center;
}
.split--rev { grid-template-columns: 1fr minmax(260px, 360px); }
.split--top { align-items: start; }
/* Equal columns, for when the figure beside the text is itself content that
   has to stay readable rather than illustration. */
.split--even { grid-template-columns: 1fr 1fr; }

@media (max-width: 860px) {
  .split, .split--rev { grid-template-columns: 1fr; gap: 32px; }
  .split--rev > :first-child { order: 2; }
}

.figure { margin: 0; }
.figure img { width: 100%; height: auto; }
.figure figcaption {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--slate-700);
  line-height: 1.5;
}

/* Sage block offset up and left behind a photo, as on the home page.
   Drawn as a shadow on the image rather than a pseudo-element on the
   figure, so it tracks the image and never runs behind a caption. */
.figure--framed { padding: 18px 0 0 18px; }
.figure--framed img { box-shadow: -18px -18px 0 0 var(--sage); }

/* On a photo in the right-hand column the block is mirrored, so it always
   pushes out towards the nearer page edge rather than in towards the text. */
.figure--framed.is-right { padding: 18px 18px 0 0; }
.figure--framed.is-right img { box-shadow: 18px -18px 0 0 var(--sage); }

/* Frame colour alternates with the side, so the two brand accents trade off
   down the page rather than one of them doing all the work. */
.figure--framed.figure--lavender img {
  box-shadow: -18px -18px 0 0 var(--lavender);
}
.figure--framed.figure--lavender.is-right img {
  box-shadow: 18px -18px 0 0 var(--lavender);
}

/* --- button row ---------------------------------------------------------- */

.btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }

.btn--ghost {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 13px 28px;
}
.btn--ghost:hover { background: var(--blue); color: var(--white); }

/* --- publications -------------------------------------------------------- */

.pubgroup {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--sage);
  padding: 28px 34px 14px;
  margin-bottom: 32px;
}
.pubgroup:nth-of-type(2) { border-top-color: var(--lavender); }
.pubgroup:nth-of-type(3) { border-top-color: var(--slate); }
.pubgroup:last-child { margin-bottom: 0; }

.pubgroup__title,
.section-label {
  color: var(--blue);
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}

/* Enough clearance that the rule clears a .figure--framed's sage block,
   which sits 18px above the photo it backs. */
.section-label { margin-bottom: 38px; }

@media (max-width: 600px) {
  .pubgroup { padding: 24px 20px 10px; }
}

.pubs { list-style: none; margin: 0; padding: 0; }

.pubs li {
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.pubs li:last-child { border-bottom: 0; }

.pub__title { font-weight: 600; }

/* --- media clips --------------------------------------------------------- */

.clips { display: grid; gap: 24px; }

.clip {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--sage);
  padding: 26px 30px;
}
.clip:nth-child(even) { border-left-color: var(--lavender); }

.clip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-700);
  margin-bottom: 8px;
}
.clip__outlet { font-weight: 700; color: var(--blue); }

.clip__headline {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin-bottom: 0.6em;
}
.clip__headline a { text-decoration: none; }
.clip__headline a:hover { text-decoration: underline; }

.clip blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
  color: var(--ink);
}
.clip blockquote p + p { margin-top: 0.7em; }

/* --------------------------------------------------------------------------
   Selected work — teasers on the home page pointing into the full write-ups.
   Deliberately not shaped like the .card grid above it: wider, two across,
   accent on the left edge rather than the top, and no bullet lists. Two
   card grids stacked would read as one repeated component.
   -------------------------------------------------------------------------- */

.worklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
}

.work {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--sage);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
}
.work:nth-child(even) { border-left-color: var(--lavender); }

.work__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-700);
  margin-bottom: 8px;
}

.work__title {
  color: var(--blue);
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.6em;
}

.work p { margin-bottom: 1.2em; }

.work__more {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}
.work__more:hover { text-decoration: underline; }

.section__more {
  margin-top: 34px;
  text-align: center;
}
.section__more {
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.section__more a {
  font-weight: 600;
  text-decoration: none;
}
.section__more a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Contact as a call-to-action button in the header.
   Only rendered on pages carrying <body data-nav-cta>, so pages without it
   keep the plain eight-item nav and are unaffected by everything below.
   -------------------------------------------------------------------------- */

.site-header__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__cta {
  flex: 0 0 auto;
  background: var(--white);
  color: var(--blue);            /* 7.01:1 on the blue bar */
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out;
}
.nav__cta:hover { background: var(--linen); color: var(--blue-800); }
.nav__cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--sage); }

@media (max-width: 960px) {
  /* Menu and Contact share the top row; the nav drops below when opened,
     so the button never hides behind the hamburger. */
  .site-header__row {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .site-header__row .nav { order: 3; }
  .site-header__row .nav__cta { order: 1; }
  .site-header__row .nav__toggle { order: 2; }
}

@media (max-width: 600px) {
  .nav__cta { padding: 8px 14px; }
}

/* --------------------------------------------------------------------------
   Downloadable resources (Work Requirements page)
   -------------------------------------------------------------------------- */

.resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.resource {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--sage);
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
}
.resource:nth-child(2) { border-top-color: var(--lavender); }
.resource:nth-child(3) { border-top-color: var(--slate); }

.resource__title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.55em;
}
.resource__title a { text-decoration: none; }
.resource__title a:hover { text-decoration: underline; }

.resource p { font-size: 0.9375rem; }

.resource__meta {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-700);
}

/* A short callout for "get in touch about this". */
.callout {
  background: var(--white);
  border-left: 6px solid var(--lavender);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 26px 30px;
  margin-top: 40px;
}
.callout p:last-child { margin-bottom: 0; }

/* Cover thumbnail on a resource card. Generated by scripts/pdf_covers.py
   from page 1 of the PDF itself. The sources are mixed orientation, so the
   image fills the card width and is anchored to the top: every cover then
   shows its title block, which is the part worth seeing. */
.resource__cover {
  display: block;
  height: 150px;
  margin: -30px -30px 22px;
  background: var(--linen);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.resource__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Key points pulled out beside a block of prose. */
.factbox {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--sage);
  padding: 26px 28px;
}
.factbox h3 {
  color: var(--blue);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1em;
}
.factbox ul { list-style: none; margin: 0; padding: 0; }
.factbox li {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.factbox li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.factbox strong { display: block; color: var(--blue); }

/* The body a testimony was given to, above its title. */
.testimony__body {
  display: block;
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* A factbox sitting in the page head needs to separate from the white
   background behind it. */
.page-head .factbox { background: var(--linen); }

/* Error state for the contact form's status message. */
.form__note--error {
  border-left-color: var(--lavender-800);
  color: var(--ink);
}

/* The email address in the footer is a link on a blue ground, so it needs
   an underline to read as one - colour alone cannot carry it there. */
.footer__meta a { text-decoration: underline; }

/* Secondary contact route, quieter than the email address above it. */
.contact__signal {
  margin-top: 0.7em;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.contact__signal strong { color: var(--ink); }

/* Screenshots need an edge: they are mostly white UI and would otherwise
   bleed into the page background. */
.figure--screen { margin-top: 2em; }
.figure--screen img {
  border: 1px solid var(--rule);
  /* Never upscale a screenshot: past its native width the text goes soft,
     and the text is the whole reason it is on the page. */
  width: auto;
  max-width: 100%;
}

/* Anchor links to the sections of a long page. */
.jumplist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 1.4em;
}
.jumplist a {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--sage);
  padding-bottom: 3px;
}
.jumplist a:hover { border-bottom-color: var(--lavender); }

/* A related-publications heading sitting under a case study, smaller than
   the section label above it. */
.pubgroup__title + .pubs { margin-top: 0; }
h3.pubgroup__title { margin-top: 2.6em; }

/* Give an anchored section room below the sticky-free header when jumped to. */
[id] { scroll-margin-top: 24px; }

/* --------------------------------------------------------------------------
   Disclosure. Used sparingly, and only for genuinely supplementary detail:
   content inside a closed <details> is not reliably found by find-in-page
   outside Chrome, which matters for an audience that searches for citations.
   Never put an anchor target inside one without also opening it on
   navigation.
   -------------------------------------------------------------------------- */

.disclosure {
  margin-top: 2.6em;
  border-top: 1px solid var(--rule);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  cursor: pointer;
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  list-style: none;          /* Firefox */
}
.disclosure > summary::-webkit-details-marker { display: none; }

.disclosure > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--sage);
  border-radius: 50%;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 9px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 9px no-repeat;
}
.disclosure[open] > summary::before {
  /* Minus only: drop the vertical bar of the plus. */
  background: linear-gradient(var(--blue), var(--blue)) center / 9px 2px no-repeat;
  border-color: var(--lavender);
}

.disclosure > summary:hover { color: var(--blue-800); }
.disclosure > *:not(summary) { padding-bottom: 8px; }