/* Round 06, sample W: Show the Sources. Tokens first; no colour literal below :root. */
:root {
  --red: #A32638;      /* Stevens Red: marks, rules, number squares, buttons, links, focus */
  --ink: #363D45;      /* Dark Gray: every text role */
  --rule: #E4E5E6;     /* Light Gray: hairlines */
  --white: #FFFFFF;

  --disp: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --gut: 24px;
  --wrap: 1344px;
  --mark: 20px;
}
@media (min-width: 1100px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
main:focus { outline: none; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -200px; z-index: 30;
  background: var(--white); color: var(--red);
  font: 600 17px/1 var(--body); padding: 14px 18px; border: 2px solid var(--red);
}
.skip:focus { top: 12px; }

/* ---------- the stamp line ---------- */
/* a white line with a hairline under it, like GOV.UK's phase banner: a Dark Gray band was the
   largest colour field on the first screen (COL-07) and a full-bleed Light Gray one breaks COL-05 */
.stamp { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--rule); }
.stamp-row { display: flex; align-items: center; gap: 6px 28px; min-height: 40px; padding-block: 4px; }
.stamp-t { font: 400 16px/1.4 var(--body); }
.stamp-t strong { font-weight: 600; }
.stamp-t em { font-style: italic; }
.sq {
  display: inline-block; width: 11px; height: 11px; margin-right: 10px; vertical-align: 0;
  background: var(--red);
}
.switch {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 4px 4px 4px 2px; border: 0; background: none; cursor: pointer;
  font: 600 15px/1 var(--body); color: var(--ink);
}
.switch[hidden] { display: none; }
.track {
  position: relative; width: 36px; height: 20px; flex: none;
  border: 1px solid var(--ink); background: var(--white);
}
.knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--ink); }
.src-on .knob { left: auto; right: 3px; background: var(--red); }

/* ---------- header: wordmark 50px with 0.667 clear space -> 120px bar ---------- */
.site-head { border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; height: 120px; }
.wm { flex: none; display: block; }
.wm img { height: 50px; width: auto; }
.lab {
  margin-left: 34px; white-space: nowrap; text-decoration: none; color: var(--ink);
  font: 600 22px/1 var(--disp); font-stretch: 90%;
}
.nav-wide { margin-left: auto; display: none; }
.nav-wide ul { display: flex; gap: 22px; }
.nav-wide a, .menu nav a { color: var(--ink); text-decoration: none; }
.nav-wide a { font: 500 15px/1 var(--body); white-space: nowrap; }
.menu { margin-left: auto; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px;
  padding: 0 18px; border: 1px solid var(--ink); border-radius: 3px;
  font: 600 15px/1 var(--body); color: var(--ink); background: var(--white);
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 260px;
  background: var(--white); border: 1px solid var(--ink); padding: 8px 0;
}
.menu nav a { display: block; padding: 12px 18px; font: 500 16px/1.3 var(--body); }
@media (min-width: 1280px) {
  .nav-wide { display: block; }
  .menu { display: none; }
}
@media (max-width: 759px) {
  .lab { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-wide a:hover, .menu nav a:hover { color: var(--red); text-decoration: underline; }
}

/* ---------- sections and the text column ---------- */
.sec { position: relative; padding-block: 40px 56px; }
.sec + .sec { border-top: 1px solid var(--rule); }
.hero { padding-top: 26px; }
.col { max-width: 760px; }
.h2 {
  font: 600 40px/1.05 var(--disp); font-stretch: 80%;
  margin-bottom: 18px; color: var(--ink);
}
.mission {
  font: 500 clamp(23px, 2.18vw, 31px)/1.15 var(--disp); font-stretch: 86%;
  color: var(--ink); max-width: 34em;
}
.mission ~ .mission { margin-top: .5em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 20px; }
.cta p { font: 400 17px/1.45 var(--body); }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px;
  background: var(--red); color: var(--white); border-radius: 3px;
  font: 600 16px/1.2 var(--body); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.ws-h { margin-top: 26px; font-size: 30px; margin-bottom: 2px; }
.ws { padding-block: 9px; }
.ws h3, .hb h3 { font: 600 23px/1.2 var(--disp); font-stretch: 92%; }
.ws h3 a, .hb h3 a, .ev .t a:not(.mark), .pp .n a { color: var(--ink); text-decoration: none; }
.ws p, .hb p, .lede, .ct p { font: 400 17px/1.5 var(--body); }
.ws p { margin-top: 4px; max-width: 46em; }
.lede { max-width: 44em; }
@media (hover: hover) and (pointer: fine) {
  .ws h3 a:hover, .hb h3 a:hover, .ev .t a:not(.mark):hover, .pp .n a:hover {
    text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px;
  }
}
.ws h3 a:focus-visible, .hb h3 a:focus-visible, .ev .t a:not(.mark):focus-visible, .pp .n a:focus-visible { text-decoration: underline; }

/* events: the post date is the main visual */
.cap { margin-top: 10px; font: italic 400 16px/1.4 var(--body); }
.evs { margin-top: 18px; border-top: 1px solid var(--rule); }
.ev {
  display: grid; grid-template-columns: 178px minmax(0, 1fr); column-gap: 20px;
  padding-block: 14px; border-bottom: 1px solid var(--rule);
}
.ev .date { font: 600 23px/1.2 var(--disp); font-stretch: 85%; white-space: nowrap; }
.ev .t { font: 500 18px/1.4 var(--body); }
.ev .k { margin-top: 2px; font: 400 16px/1.4 var(--body); }
.sold { font-weight: 600; color: var(--red); }
.sep { padding-inline: .1em; }

/* people: plain headshots, no treatment */
.pps { margin-top: 22px; border-top: 1px solid var(--rule); }
.pp {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: center;
  padding-block: 12px; border-bottom: 1px solid var(--rule);
}
.pp img { width: 72px; height: auto; }
.pp .n { font: 600 22px/1.2 var(--disp); font-stretch: 92%; }
.pp .tl { font: 400 16px/1.45 var(--body); }

.hb { margin-top: 4px; }
.hb p { margin-top: 6px; }
.addr { margin-bottom: 14px; }
.ct p { max-width: 40em; }
.ct-btn { margin-top: 24px; }

/* ---------- the mark: a numbered square, like a footnote index ---------- */
.nb { white-space: nowrap; }
.nb > a:not(.mark) { white-space: normal; }
.mark {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--mark); height: var(--mark); padding: 0 4px; margin-left: .3em;
  vertical-align: .14em; background: var(--red); color: var(--white);
  font: 600 12px/1 var(--body); font-stretch: 100%; text-decoration: none; letter-spacing: 0;
}
.mission .mark { --mark: 24px; font-size: 13px; vertical-align: .2em; }
.mark::after { content: ""; position: absolute; inset: -10px -8px; }   /* larger touch target */

/* ---------- the card ---------- */
.card { position: relative; background: var(--white); color: var(--ink); font: 400 16px/1.35 var(--body); }
.card .num {
  position: absolute; left: 0; top: 2px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--white); font: 600 13px/1 var(--body);
}
.card dl { margin-left: 26px; border: 1px solid var(--rule); background: var(--white); }
.card .r { display: flex; gap: 10px; min-width: 0; padding: 4px 10px; border-top: 1px solid var(--rule); }
.card .r:first-child { border-top: 0; }
.card dt { flex: none; width: 5.3em; font-weight: 600; }
.card.longlabel dt { width: 6.8em; }
.card dd { min-width: 0; }
.card .url {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere; color: var(--red);
}
.card.hot dl { border-color: var(--red); }
.card.hot .url { text-decoration-thickness: 2px; }
.claim.hot .says { text-decoration: underline 1px; text-decoration-color: var(--red); text-underline-offset: .22em; }

/* no JavaScript: the cards print as numbered notes after each section */
.notes { margin-top: 30px; }
.notes-h { font: 600 16px/1.4 var(--body); margin-bottom: 10px; }
.notes-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.mcol { display: none; }

/* ---------- with JavaScript ---------- */
.js .notes { display: none; }
.js .card { display: none; }
.js .card.open, .js.src-on .card { display: block; }
.rule { display: none; }
/* inline cards (narrow screens, or a single card opened in plain reading) */
.js .col .card { margin: 10px 0 6px; padding-left: 0; font-size: 16px; max-width: 640px; }
.js .col .card .num { left: 22px; }
.js .col .card::before {          /* the short red rule from the sentence to the card */
  content: ""; position: absolute; left: 0; top: 15px; width: 22px; height: 1px; background: var(--red);
}
.js .col .card dl { margin-left: 48px; }
.js .ev .card, .js .pp .card { grid-column: 1 / -1; }

/* wide screens with sources shown: the margin column */
@media (min-width: 1100px) {
  .js.src-on .sec { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 6fr) minmax(0, 38fr); }
  .js.src-on .col { grid-column: 1; max-width: none; }
  .js.src-on .mcol { display: block; grid-column: 3; }
  .js.src-on .col .card {
    position: absolute; top: 0; left: 0; margin: 0; padding-left: 0; font-size: 16px; z-index: 2; max-width: none;
  }
  .js.src-on .col .card::before { display: none; }
  .js.src-on .col .card .num { left: 0; }
  .js.src-on .col .card dl { margin-left: 26px; }
  .js.src-on .col .card .url { -webkit-line-clamp: 1; }
  /* below the hero each source is one ledger line (number, address, date); hover, focus or a
     pinned mark opens the full card over the lines beneath it, at once */
  .js.src-on .col .card.ledger:not(.hot) dl {
    display: flex; align-items: baseline; border-color: transparent; background: transparent;
  }
  .js.src-on .col .card.ledger:not(.hot) .r { border-top: 0; }
  .js.src-on .col .card.ledger:not(.hot) .from { flex: 0 1 auto; min-width: 0; }
  .js.src-on .col .card.ledger:not(.hot) .from dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .js.src-on .col .card.ledger:not(.hot) .url { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .js.src-on .col .card.ledger:not(.hot) .words,
  .js.src-on .col .card.ledger:not(.dated):not(.hot) .pub { display: none; }
  .js.src-on .col .card.ledger:not(.hot) .pub { flex: none; margin-left: auto; padding-left: 14px; }
  .js.src-on .col .card.ledger:not(.hot) dt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .js.src-on .col .card.ledger.hot { z-index: 4; }
  .js.src-on .col .card.covered { visibility: hidden; }   /* a ledger line under an open card */
  .js.src-on .rule {
    display: block; position: absolute; height: 1px; background: var(--red);
    transform-origin: 0 50%; pointer-events: none; z-index: 1;
  }
  /* plain reading: the text column widens at once */
  .js.src-off .col { max-width: 1040px; }
  .js.src-off .mission { max-width: 782px; }   /* the excerpts' measure (46em at 17px), so plain reading keeps one right edge */
}

@media (min-width: 1360px) {
  .js.src-on .sec { grid-template-columns: minmax(0, 55fr) minmax(0, 6fr) minmax(0, 39fr); }
}

/* ---------- load moment: hidden only until w.js has built the animations ---------- */
html.intro .hero .mark, html.intro .hero .card, html.intro .hero .rule { opacity: 0; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule); padding-block: 48px 56px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 24px 34px; align-items: flex-start; }
.foot-t { font: 400 16px/1.5 var(--body); max-width: 46em; }
.foot-name { font: 600 22px/1.2 var(--disp); font-stretch: 90%; margin-bottom: 4px; }
.colophon { margin-top: 12px; font-style: italic; }

/* ---------- narrow screens ---------- */
@media (max-width: 1099px) {
  .mission { font-size: clamp(23px, 3.6vw, 30px); }
  .stamp-row { flex-wrap: wrap; }
  .switch { margin-left: 0; }
}
@media (max-width: 759px) {
  .h2 { font-size: 34px; }
  .sec { padding-block: 30px 44px; }
  .hero { padding-top: 24px; }
  .cta { margin-top: 20px; }
  .ev { grid-template-columns: minmax(0, 1fr); }
  .ev .date { font-size: 21px; }
  .pp { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .pp img { width: 64px; height: auto; }
  .mark { --mark: 22px; }
  /* phones: a shorter lead rule and label column, so a card's values keep to one line */
  .js .col .card::before { width: 14px; }
  .js .col .card .num { left: 14px; }
  .js .col .card dl { margin-left: 40px; }
  .card .r { padding-inline: 8px; }
  .card dt { width: 5em; }
  .card.longlabel dt { width: 6.5em; }
}

/* ---------- reduced motion: cards shown at once; review overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  html:not(.force-motion).intro .hero .mark, html:not(.force-motion).intro .hero .card, html:not(.force-motion).intro .hero .rule { opacity: 1; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation: none !important; transition: none !important; }

@media print {
  .stamp .switch, .menu, .nav-wide, .rule { display: none !important; }
  .js .card { display: block !important; position: static !important; }
}