/* ============================================================
   JPI prototype stylesheet

   Colours and fonts remain PLACEHOLDERS for the real Newmark
   theme values. Layout follows the current JPI site: a full-width
   hero, then a two-column content + dark sidebar-nav grid.
   ============================================================ */

:root {
  /* Brand palette — approximated from the Newmark logo + Pantone codes */
  --accent:      #F58220;   /* brand orange (PMS 151-ish) */
  --accent-dark: #A6560E;   /* darker orange for links/labels (AA on white) */
  --ink:         #1A1A1A;
  --body:        #2E3136;
  --muted:       #6E7278;
  --rule:        #E2E1DE;
  --tint:        #F5F5F3;
  --archive:     #EFEDE8;
  --charcoal:    #333F48;   /* PMS 432 */
  --charcoal-rule: #52606A;

  /* Brand type: Oswald ~= Trade Gothic Bold Condensed 20 (headline face);
     PT Serif = body (both free web equivalents of the guideline faces);
     Verdana/Helvetica = universal UI fallback. */
  --sans: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  --display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --reading: "PT Serif", Georgia, "Times New Roman", serif;

  --shell: 72rem;
  --prose: 38rem;
  --wide: 62rem;
}

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

body {
  margin: 0;
  color: var(--body);
  background: #fff;
  font-family: var(--reading);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--sans); color: var(--ink); line-height: 1.2; margin: 0; }
p { margin: 0 0 1.15em; }
a { color: var(--accent-dark); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--prose); margin: 0 auto; padding: 0 1.25rem; }
.masthead .wrap, .foot .wrap { max-width: var(--shell); }

/* ---- Shared full-width container aligned with the content grid ---- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Prototype banner. Remove for production. ---- */
.banner {
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.6rem 1rem;
}

.masthead { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--charcoal);
  border-radius: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.brand__i { color: var(--accent); }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.94;
  font-size: 1rem;
  color: var(--ink);
}
.brand:hover .brand__mark { background: var(--ink); }
.brand:hover .brand__name { color: var(--accent-dark); }

/* ---- Hero ----
   A charcoal block under the masthead, the same PMS 432 as the sidebar nav so
   the page has one dark rather than two. The accent lives in the last word of
   the title, echoing the orange I in the monogram, rather than in a separate
   bar alongside it. The masthead itself stays light, so the twenty pages that
   have no hero keep the same header as the ones that do. */
.hero { background: var(--charcoal); }
.hero .shell { padding-top: 4rem; padding-bottom: 4rem; }
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
  color: #fff;
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  margin: 0;
  max-width: 20ch;
}
.hero__accent { color: var(--accent); }
/* The home page stacks to three lines because those are the words in the
   logo's wordmark. Every other title wraps naturally. */
.hero--stack .hero__title { line-height: 0.92; max-width: none; }

/* ---- Breadcrumb ---- */
.crumbwrap { padding-top: 1.6rem; }
.crumb {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.crumb a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.crumb a:hover { color: var(--accent-dark); }

/* ---- Two-column layout ---- */
.layout {
  display: grid;
  grid-template-columns: 64% 29%;
  justify-content: space-between;
  align-items: start;
  margin: 1.75rem auto 0;
  padding-bottom: 4rem;
}
.content { min-width: 0; }
.content > :first-child { margin-top: 0; }
/* Neutralise the inner prose wrappers so the column controls width. */
.content .wrap,
.content .entries,
.content .fellows { max-width: none; margin: 0; padding: 0; }
.content .entry, .content .fellow { max-width: none; }

/* ---- Sidebar nav ---- */
.sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}
.sidebar__nav {
  background: var(--charcoal);
  padding: 1.75rem 1.6rem 0.5rem;
}
/* Briefing pages: the site nav scrolls away and the On this page menu tracks the reader. */
.sidebar--toc { position: static; align-self: stretch; }
.sidebar--toc .onpage {
  position: sticky;
  top: 1.5rem;
  margin: 1.5rem 0 0;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.sidebar__heading {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
  padding-bottom: 1.4rem;
}
.sidebar__heading:hover { color: #fff; }
.sidebar__nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar__nav li { border-top: 1px solid var(--charcoal-rule); }
.sidebar__nav a {
  display: block;
  padding: 1.15rem 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.sidebar__nav a:hover { color: var(--accent); }
.sidebar__nav a[aria-current],
.sidebar__heading[aria-current] { color: var(--accent); }

/* Funder credit sitting below the nav panel, on the page rather than in it,
   so it reads as a credit rather than a menu item. Uses the same grey as the
   funder row on the home page. */
.sidebar__funder { margin-top: 1.75rem; }
.sidebar__funder-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.sidebar__funder img { display: block; width: 100%; max-width: 180px; height: auto; }

/* ---- Type: lede / opening paragraph ---- */
.lede {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 2rem;
}
.lede p { margin-bottom: 0.9rem; }
.bios { margin-top: 2rem; font-size: 1rem; color: var(--body); }

.cta {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.cta:hover { color: var(--ink); }
.cta--off {
  color: var(--muted);
  border-bottom: 2px dotted var(--rule);
  cursor: default;
}

/* Condensed uppercase section headings. */
.section-head, .band__title, .row__title, .more__title, .onpage__title {
  font-family: var(--display);
  font-stretch: condensed;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head { margin: 2.5rem 0 0.5rem; }
/* On the archive page the heading introduces the search box, so it needs a little
   more room beneath it than when it sits directly on a list. */
.section-head + .u-search { margin-top: 1rem; }

/* ---- Home ---- */
.band { background: var(--tint); margin: 3rem 0; padding: 2rem 1.75rem; }
.band__title { margin-bottom: 2rem; }
.cards { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.card { border-top: 3px solid var(--ink); padding-top: 1rem; }
.card h3 {
  font-family: var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.card p { font-size: 0.9375rem; }


.row { border-top: 1px solid var(--rule); padding: 2rem 0; }
.row--last { padding-bottom: 1rem; }
.row__title { margin-bottom: 1rem; }
.placeholder {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.875rem;
  background: var(--tint);
  border: 1px dashed var(--rule);
  padding: 1.25rem;
}
.placeholder--big { margin: 2rem 0 3rem; }

.card__btn { margin-top: 1rem; }

.team { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 620px) { .team { grid-template-columns: repeat(2, 1fr); } }
.team__member { text-align: center; }
.team__photo {
  display: block;
  width: 100%;
  max-width: 256px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 1.1rem;
}
.team__name {
  font-family: var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.team__name a { color: var(--ink); text-decoration: none; }
.team__name a:hover { color: var(--accent-dark); }
.team__role {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.team__bio { font-size: 0.9375rem; }

/* Funder logos: desaturated to one grey family so nine competing brand
   palettes read as a single set, and none of them fights the orange. */
/* Seven logos, laid out 2 / 3 / 2. Seven in a three-column grid strands one
   logo alone on the last row; a symmetrical block reads as a deliberate shape.
   Six columns is the trick: rows of two span three columns each, the row of
   three spans two each, so every row fills the width exactly. Wrapping can't
   do this on its own, because the logos are equal in area but not in width. */
.funders {
  list-style: none;
  /* Explicit, because a <ul> otherwise carries a browser default indent that
     would push the grid out of line with the headings above it. */
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem 2.25rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}
@media (min-width: 620px) {
  .funders { grid-template-columns: repeat(6, 1fr); }
  .funders li:nth-child(-n+2) { grid-column: span 3; }
  .funders li:nth-child(n+3):nth-child(-n+5) { grid-column: span 2; }
  .funders li:nth-child(n+6) { grid-column: span 3; }
}
.funders li { display: flex; align-items: center; justify-content: center; min-height: 56px; }
/* Each logo file is pre-scaled to the same bounding-box area, so a wide
   wordmark and a tall stacked mark take up equal space and none of them reads
   as more important than the others. */
/* No opacity here: the grey is baked into the files so every mark resolves to
   the same ink, rather than being uniformly faded from different starting
   darknesses. */
.funders img { display: block; max-width: 100%; height: auto; }

/* ---- Briefings landing ---- */
.entry { border-top: 1px solid var(--rule); padding: 2.25rem 0; }
.entry__kicker {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 0.6rem;
  line-height: 1.35;
}
.entry__title {
  font-family: var(--display);
  font-stretch: condensed;
  letter-spacing: 0.01em;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.entry__byline {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.entry__summary { font-size: 1rem; margin-bottom: 1rem; }
/* Archived entry: de-emphasised, not a highlighted box */
.entry--archive .entry__kicker,
.entry--archive .entry__title,
.entry--archive .entry__summary { color: var(--muted); }
.entry--archive .cta { color: var(--muted); border-bottom-color: var(--rule); }
.entry__tag {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* ---- Briefing page header (title now lives in the hero) ---- */
.bhead { padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.5rem; }
.bhead__label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.bhead__kicker {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent-dark);
  line-height: 1.35;
  margin: 0 0 0.7rem;
}
.bhead__title {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: clamp(2.15rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 0.75rem;
}
.bhead__subtitle {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--body);
  line-height: 1.35;
  margin: 0 0 1rem;
}
.bhead__byline {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.summary { font-size: 1.5rem; line-height: 1.4; color: var(--ink); margin: 1.75rem 0; }

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.5rem;
}
.download__btn {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
}
.download__btn:hover { background: var(--accent-dark); color: #fff; }
.download__note { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }

/* ---- THE BOX RULE ----
   Shared: tint background, condensed UPPERCASE orange label, body a step below
   the article text (0.9375rem vs 1.0625rem). Border colour signals the type:
   At a glance = orange (the summary); every other callout = quiet grey. */
.glance, .callout {
  background: var(--tint);
  border-left: 3px solid var(--muted);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.glance { border-left: 4px solid var(--accent); margin: 0 0 2.5rem; }
.glance__title, .callout .callout__label {
  display: block;
  font-family: var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 0.7rem;
}
.glance p, .callout p, .glance li, .callout li { font-size: 0.9375rem; }
.glance ul, .glance ol, .callout ul, .callout ol { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.glance li, .callout li { margin-bottom: 0.35rem; }
.glance > :last-child, .callout > :last-child { margin-bottom: 0; }
/* Compact, correctly-grouped spacing inside callouts (spec lists etc.) */
.callout p { margin: 0 0 0.3rem; }
.callout ul, .callout ol { margin: 0.15rem 0 1rem; }
.callout li { margin-bottom: 0.3rem; line-height: 1.45; }

.body li > ul, .body li > ol { margin: 0.4rem 0 0.6rem; }

/* Checkbox checklist (e.g. Tips for immediate action) */
.callout ul.checklist { list-style: none; padding-left: 0; }
.callout ul.checklist li { padding-left: 0; margin-bottom: 0.45rem; line-height: 1.4; }
.callout ul.checklist label { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.callout ul.checklist input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin: 0.28em 0 0;
  border: 2px solid var(--muted);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.callout ul.checklist input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.callout ul.checklist input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.05em;
  width: 0.28em;
  height: 0.55em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.callout ul.checklist input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.onpage { background: var(--tint); padding: 1.5rem 1.6rem 0.6rem; margin: 1.5rem 0 0; border: 0; }
.onpage .onpage__title { margin: 0 0 0.9rem; }
.onpage p { margin: 0; }
.onpage a {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.onpage a:hover { color: var(--accent-dark); }
.onpage br { display: none; }

.body h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 2.6rem 0 1rem;
}
.body h3 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 0.7rem; }

/* Interviews: sans-serif question, serif answer. */
.body .qa__note { color: var(--muted); font-size: 0.9375rem; margin-top: 1.6rem; }
.body .qa__q {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 2.2rem 0 0.75rem;
}
.body .qa__q + p { margin-top: 0; }
.body ul, .body ol { padding-left: 1.25rem; }
.body li { margin-bottom: 0.5rem; }
.body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9375rem;
}
.body th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
  padding: 0.6rem 0.75rem 0.6rem 0;
}
.body td {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0.75rem 0.7rem 0;
  vertical-align: top;
}
/* No side bar: the accent lives in type across the rest of the site, not in
   rules alongside it. The quote is set a size larger than the body and marked
   by an oversized opening quotation mark in orange. Roman rather than italic,
   because a six-line italic passage is hard work to read. */
.body blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding-left: 2.75rem;
  padding-right: 2.75rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
}
.body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
}
.body blockquote p:last-child { margin-bottom: 0; }
.body blockquote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.more { border-top: 1px solid var(--rule); margin: 4rem 0 0; padding-top: 2rem; }
.more__title { margin-bottom: 1.5rem; }
.more__item { margin-bottom: 1.25rem; }
.more__kicker { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.2rem; }
.more__item a { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; }

/* ---- Fellowship ---- */
.funder-logo { margin: 0 0 2rem; }
.funder-logo img { width: 100%; max-width: 260px; height: auto; }
/* Current / Former toggle. Styled as the section headings it replaced, so the
   page keeps one typographic voice for its labels. */
.tabs {
  display: flex;
  gap: 2rem;
  margin: 2.5rem 0 0;
  border-bottom: 1px solid var(--rule);
}
.tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 0.7rem;
  cursor: pointer;
  font-family: var(--display);
  font-stretch: condensed;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabs__tab:hover { color: var(--accent-dark); }
.tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fellows-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 1.1rem 0 0;
}
/* The tablist supplies the rule, so the first entry beneath it must not draw a
   second one directly under it. */
.fellows > .fellow:first-child { border-top: 0; }

.fellow {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
  padding: 2rem 0;
}
@media (min-width: 620px) { .fellow { grid-template-columns: 200px 1fr; } }
/* 4:5 portrait, matching the team block on the home page. */
.fellow__photo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Placeholder form, for fellows without a usable photo yet. */
div.fellow__photo {
  height: 250px;
  background: var(--tint);
  border: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fellow__name {
  font-family: var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
}
.fellow__host { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.75rem; }

/* Selected work: headline carries the link, publication and date sit under it
   in grey, so the list still reads as something if a link ever dies. */
.fellow__work { margin-top: 1.6rem; }
.fellow__work-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.fellow__work ul { list-style: none; margin: 0; padding: 0; }
.fellow__work li { margin-bottom: 0.6rem; line-height: 1.5; }
.fellow__work li:last-child { margin-bottom: 0; }
.fellow__work a {
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.fellow__work a:hover { color: var(--accent-dark); }
/* Source runs on after the headline rather than under it, so each item is one
   line in a narrow column instead of two. */
.fellow__work-src {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--muted);
}
.fellow__work-src::before { content: "\00a0\00b7\00a0"; }

/* ---- Form ---- */
.form { max-width: 30rem; margin-bottom: 2rem; }
.form label {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.form input, .form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  border: 1px solid var(--ink);
}
.form button {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

.foot { background: var(--charcoal); padding: 3.5rem 0 4rem; }
.foot__inner { text-align: center; }
.foot__lockup { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; text-decoration: none; }
.foot__school {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.01em;
  font-size: clamp(1.3rem, 3.1vw, 2.4rem);
  color: #fff;
  text-align: right;
}
.foot__div { align-self: stretch; width: 2px; background: rgba(255,255,255,0.4); }
.foot__cuny {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 3.1vw, 2.4rem);
  color: #fff;
}
.foot__lockup:hover .foot__school, .foot__lockup:hover .foot__cuny { color: var(--accent); }
.foot__meta {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
  margin: 1.9rem 0 0;
}
.foot__meta a { color: var(--accent); }
.foot__copy {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin: 1.25rem 0 0;
}

/* ---- Mobile: single column, nav below the content ---- */
/* The columns only stack on genuinely small screens. The contents list has to
   stay beside the text: stacked above it, it scrolls away and stops being
   usable as navigation, which is its whole purpose. */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; margin-top: 3rem; }
  .sidebar--toc { margin-top: 3rem; }
  .sidebar--toc .onpage { position: static; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* Update-post images */
/* Photos are 600px wide in a column of about 736, so left-aligned they left a
   gap down the right. Centred, with the caption centred under them. */
.body figure { margin: 2.25rem 0; text-align: center; }
.body figure img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 2px; }
/* A portrait photo should not be stretched to the width of a text column: it
   would tower over the page. Held to a sensible width and centred. */
.body .figure--portrait img { width: auto; max-width: 420px; margin-left: auto; margin-right: auto; }
.body figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-top: 0.6rem; }

/* Updates: typed titles + subscribe */
.u-type { font-family: var(--display); font-weight: 600; }
.u-dot { color: var(--muted); padding: 0 .15em; }
/* Updates titles are intentionally quieter/lighter than briefing headings */
.u-sub-slim { font-family: var(--sans); font-size: .85rem; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .7rem 0; margin: 1.4rem 0 2rem; }
.u-sub-slim a { font-weight: 700; }
/* Charcoal panel, matching the hero and the sidebar nav, so the page is
   bookended by one dark rather than three treatments. The accent moves off a
   decorative side bar and onto the button, marking the thing to click. */
.u-sub { background: var(--charcoal); padding: 2rem 2rem 2.25rem; margin: 3rem 0 0; }
.u-sub h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.2rem; color: #fff; margin: 0 0 .5rem; }
.u-sub p { font-size: .95rem; color: rgba(255,255,255,0.82); margin: 0 0 1.3rem; }
.u-sub__btn { display: inline-block; font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--accent); color: var(--ink); text-decoration: none; padding: .85rem 1.5rem; }
.u-sub__btn:hover { background: #fff; color: var(--ink); }
/* archive entries */
.u-entry { border-top: 1px solid var(--rule); padding: 1.6rem 0; }
.u-entry:last-child { border-bottom: 1px solid var(--rule); }
.u-entry__date { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted); margin: 0 0 .45rem; }
/* The type carries the accent permanently rather than on hover, so Update,
   News and Event are legible at a glance down the list. */
.u-entry__type { color: var(--accent-dark); }
.u-entry__desc { font-family: var(--serif); font-size: 1.15rem; line-height: 1.42; margin: 0; }
.u-entry__desc a { color: var(--ink); text-decoration: none; }
.u-entry__desc a:hover { color: var(--accent-dark); }
.u-standfirst { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.5vw, 1.7rem); line-height: 1.38; color: var(--ink); margin: 0 0 .7rem; }
.u-search { margin: 1.6rem 0 1.6rem; }
.u-search input { width: 100%; padding: .7rem .9rem; font: inherit; font-size: 1rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }
.u-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.u-noresults { color: var(--muted); font-family: var(--sans); padding: 1.4rem 0; }
.u-entry:first-child { border-top: 0; padding-top: 0; }

/* section-divider line on briefing-type pages only (updates opt out via .page--update) */
main:not(.page--update) .body h2 { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }


/* Safety Tools */
.t-stat { font-family: var(--serif); font-size: 1.2rem; line-height: 1.42; color: var(--ink); font-style: italic; margin: 1.4rem 0 1.2rem; border-left: 3px solid var(--accent); padding-left: 1rem; }
.t-todo { background: var(--tint); border-left: 4px solid var(--accent); padding: 1.1rem 1.4rem; margin: 1.6rem 0 2.6rem; }
.t-todo__label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--ink); margin: 0 0 .6rem; }
.t-todo ul { margin: 0; padding-left: 1.1rem; }
.t-todo li { margin-bottom: .45rem; font-size: .95rem; line-height: 1.5; }
.t-contents { background: var(--tint); padding: 1.1rem 1.4rem; margin: 0 0 2.5rem; }
.t-contents strong { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); }
.t-contents ol { margin: .55rem 0 0; padding-left: 1.2rem; }
.t-contents li { margin-bottom: .35rem; }
.t-contents a { font-weight: 600; }
.t-tools { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin: 1.5rem 0 2.5rem; }
@media (min-width: 620px){ .t-tools { grid-template-columns: repeat(3,1fr); } }
.t-tool { border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 1.2rem 1.3rem; }
.t-tool h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; margin: 0 0 .5rem; }
.t-tool p { font-size: .9375rem; margin: 0 0 .8rem; }