/* totheircredit.com: the Imprint design, a book's title page. One
   hand-written stylesheet, no build step. The tokens, the type and the rules
   are in the site folder's design-system.md. Read it before you change this
   file. */

/* The `hidden` attribute always wins over any later `display` rule. */
[hidden] { display: none !important; }

/* --- Fonts: self-hosted, Latin and Latin Extended -------------------------- */

/* Newsreader is the only face. It is variable in weight and optical size, one
   file per subset. The dagger (U+2020) is in the Latin Extended file only, so
   every page loads both files. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens: two themes ----------------------------------------------------- */

/* Light on :root. Dark twice: for a dark system setting unless the visitor
   chose Light, and for a visitor who chose Dark. The head script in base.html
   sets data-theme before the first paint. The light ground is the heroes' own
   cream, so a hero sits on the page with no frame (design-system.md, The
   theme). */
:root {
  color-scheme: light;
  --ground: #F9F5EA;
  --ink: #1A1814;
  --sec: #5E584D;
  --acc: #B8361C;
  --rule: #D9D1C0;
  --leader: #A79F90;
  --draw-fill: #E6E1D5;
  --draw-acc: #C33A1F;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* On the dark ground each hero is inverted in full and keeps its hue: the
   cream turns near-black, the line pale, the vermilion a salmon red. The
   heroes' cream varies from image to image, so no ground could match it;
   instead the inverted cream always falls below the ground, and the lighten
   blend shows the ground there, so every hero sits on the page with no edge.
   The blend needs every ancestor of a hero to stay out of an isolated
   stacking context: no transform, opacity, isolation or will-change on them
   (test_heroes_blend_into_the_dark_ground). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #201D14;
    --ink: #ECE6D8;
    --sec: #A9A193;
    --acc: #E8613F;
    --rule: #3A352C;
    --leader: #6B6457;
    --draw-fill: #2E2A23;
    --draw-acc: #E8613F;
  }
  :root:not([data-theme="light"]) img.pic { filter: invert(1) hue-rotate(180deg); mix-blend-mode: lighten; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #201D14;
  --ink: #ECE6D8;
  --sec: #A9A193;
  --acc: #E8613F;
  --rule: #3A352C;
  --leader: #6B6457;
  --draw-fill: #2E2A23;
  --draw-acc: #E8613F;
}
:root[data-theme="dark"] img.pic { filter: invert(1) hue-rotate(180deg); mix-blend-mode: lighten; }

/* --- The page ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--acc); }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

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

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 40px; } }

/* Labels: Newsreader's capitals, small and tracked. No italics anywhere. */
.sc {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sec { color: var(--sec); }

/* The dagger after the wordmark, and before the disclosure it points to. */
.dagger { color: var(--acc); font-weight: 600; }

/* --- The masthead -------------------------------------------------------------- */

.mast { padding-top: 32px; text-align: center; }
.mast-title {
  margin: 0;
  display: inline-block;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.015em;
}
.mast-title .dagger { font-size: .45em; vertical-align: .9em; margin-left: 3px; }
.strap { margin: 14px 0 0; color: var(--sec); }
.strap.sc { font-size: 10.5px; }

/* The front page sets the wordmark as a title page: the one <h1>, larger. */
.mast-front { padding-top: 56px; }
.mast-front .mast-title { font-size: 46px; letter-spacing: -.02em; }
.mast-front .mast-title .dagger { font-size: .42em; vertical-align: .95em; }

@media (min-width: 760px) {
  .mast-title { font-size: 40px; }
  .mast-front .mast-title { font-size: 96px; }
  .strap { margin-top: 18px; }
  .strap.sc { font-size: 13px; }
}

.nav {
  margin-top: 22px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
}
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.nav.sc { font-size: 11.5px; }
.mast-front .nav { margin-top: 18px; }
@media (min-width: 760px) {
  .nav { column-gap: 44px; }
  .nav.sc { font-size: 13px; }
  .mast-front .nav { margin-top: 36px; }
}

/* --- The theme switch -------------------------------------------------------------- */

/* Auto, Light and Dark in the label capitals: bare words, no box. The pressed
   one is ink with the vermilion underline the colophon's link carries. On a
   phone it is a centred row above the wordmark; from 760 px it sits at the
   masthead's top right. The body script unhides it. */
.mast .wrap { position: relative; }
.theme { display: flex; justify-content: center; gap: 4px; margin: -24px 0 4px; }
.theme.sc { font-size: 11.5px; }
.theme button {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--sec);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.theme button:hover { color: var(--acc); }
.theme button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.theme button[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 4px;
}
@media (min-width: 760px) {
  .theme { position: absolute; top: -24px; right: 34px; margin: 0; }
}

/* --- The colophon ------------------------------------------------------------------ */

.colophon { margin-top: 72px; border-top: 1px solid var(--ink); }
.colophon-in { max-width: 720px; margin: 0 auto; padding: 48px 16px 56px; text-align: center; }
.colophon-mark { margin: 0; font-size: 28px; line-height: 1; }
.colophon h2 { margin: 12px 0 14px; }
.colophon-text { margin: 0; color: var(--sec); font-size: 18px; line-height: 1.55; }
.colophon-text a {
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-underline-offset: 3px;
}
.colophon-nav { margin-top: 20px; display: flex; justify-content: center; gap: 32px; }
.colophon-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.colophon-line { margin: 16px 0 0; font-size: 11.5px; }

/* --- Running text: About and the privacy notice ------------------------------------ */

.prose { max-width: 760px; margin: 0 auto; padding: 64px 0 16px; }
.prose p, .prose li { font-size: 20px; line-height: 1.65; }
.prose p { margin: 0 0 20px; }
.prose ul { margin: 0 0 20px; padding-left: 1.2em; }
.prose h2 {
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.prose code { font-family: var(--serif); font-weight: 600; }
.page-title {
  margin: 0 0 36px;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
}
@media (min-width: 760px) { .page-title { font-size: 56px; } }
.updated-line { color: var(--sec); text-align: center; }

/* --- Shared parts ---------------------------------------------------------------- */

/* Text for a screen reader only. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.acc, a.acc { color: var(--acc); }
.more-link { margin: 16px 0 0; }
.more-link a, .section-head a { min-height: 44px; display: inline-flex; align-items: center; }
.empty { padding: 64px 0; text-align: center; color: var(--sec); }

/* The kicker: the medium in vermilion, then the date. */
.kick {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc);
}
.kick a { color: var(--acc); }
.kick .entry { margin-left: 10px; vertical-align: 1px; }
@media (min-width: 760px) { .kick { font-size: 12.5px; } }

.standfirst { margin: 0; color: var(--sec); }

/* The header image at the boards' 40:21, borderless on the cream ground. */
.pic { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.pic-link { display: block; }
.pic-none {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
}
.pic-dagger { font-size: 48px; line-height: 1; color: var(--leader); }

/* A section heading with a rule running to its link. */
.section-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-rule { flex: 1; border-top: 1px solid var(--rule); transform: translateY(-4px); }

/* The dotted leader from a title to its date. */
.leader {
  flex: 1 1 24px;
  min-width: 16px;
  border-bottom: 1.5px dotted var(--leader);
  transform: translateY(-6px);
}

/* A post as a row: the title, the leader, the date and the ledger mark. */
.rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: baseline; gap: 10px; }
.row-title { max-width: 78%; font-size: 18px; line-height: 1.3; }
.row-date { flex: none; font-size: 11px; white-space: nowrap; }
.row .entry { flex: none; }
@media (min-width: 760px) {
  .rows { gap: 18px; }
  .row { gap: 12px; }
  .row-title { font-size: 20px; }
  .row-date { font-size: 12px; }
}

/* --- The ledger mark ------------------------------------------------------------- */

/* A word in a box. The box's shape tells the three apart, never a colour:
   Adopted is filled ink, Resisted an ink outline, Disputed a dotted outline
   in the secondary colour. No rule here uses the vermilion. */
.entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* The top padding centres the capitals. Newsreader's line box keeps room for
   descenders, so centred capitals sat about 1.5px high at both sizes
   (measured in headless Chromium, 2026-10-28); 3px of top padding moves
   them down 1.5px. */
.entry-sm { height: 20px; min-width: 74px; padding: 3px 6px 0; font-size: 9.5px; }
.entry-lg { height: 34px; width: 112px; padding-top: 3px; font-size: 13px; }
.entry-adopted { background: var(--ink); color: var(--ground); border: 1.5px solid var(--ink); }
.entry-resisted { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.entry-disputed { background: transparent; color: var(--sec); border: 1.5px dotted var(--leader); }

.ledger-line { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 10px; }
.ledger-meaning { color: var(--sec); font-size: 15px; }

.legend {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
}
.legend dd { margin: 0 0 16px; font-size: 19px; line-height: 1.45; }
.legend dd strong { font-weight: 600; }
@media (min-width: 760px) {
  .legend { grid-template-columns: 136px minmax(0, 1fr); row-gap: 20px; align-items: center; }
  .legend dd { margin: 0; }
}

/* --- The media icons --------------------------------------------------------------- */

/* The heroes' line: a charcoal stroke, a pale fill and one vermilion shape. */
.ic {
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-lg { stroke-width: 1.6; }
.ic .f { fill: var(--draw-fill); }
.ic .a { fill: var(--draw-acc); }
.ic .k { fill: var(--ink); }
.ic .g { fill: var(--ground); }

/* --- The front page ------------------------------------------------------------------ */

.lead { padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.lead-text .kick { margin-bottom: 12px; }
.lead-title { margin: 0; font-size: 31px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.lead .standfirst { margin-top: 14px; font-size: 17px; line-height: 1.45; }
.lead-pic { margin-top: 20px; }

.latest { padding: 28px 0 12px; }
.cards { display: flex; flex-direction: column; }
.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  column-gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.card:last-child { border-bottom: 1px solid var(--rule); }
.card .pic-link { grid-column: 2; grid-row: 1; }
.card-text { grid-column: 1; grid-row: 1; }
.card-text .kick { margin-bottom: 6px; }
.card-title { margin: 0; font-size: 18.5px; font-weight: 500; line-height: 1.22; }

.lower { padding: 28px 0 8px; }
.earlier h2 { margin: 0 0 14px; }
.contents { padding: 24px 0 8px; border-top: 1px solid var(--rule); }
.contents-head { margin: 0 0 10px; }
.idx { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.idx li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.idx .leader { transform: none; }
.idx-name { font-size: 18px; }
.idx-date { flex: none; font-size: 11px; }
/* On an index page the whole row is the link: the name's link stretches over
   the row, so the link text stays the name alone. */
.idx-whole li { position: relative; }
.idx-whole .idx-name::after { content: ""; position: absolute; inset: 0; }
.idx-whole li:hover .idx-name { color: var(--acc); }
.idx-whole .idx-name:focus-visible { outline: none; }
.idx-whole .idx-name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: 3px; }

/* On a phone, the companies run as one line of names. */
@media (max-width: 759px) {
  .idx-inline { display: block; font-size: 18px; line-height: 2; }
  .idx-inline li { display: inline; min-height: 0; }
  .idx-inline li:not(:last-child)::after { content: " \00B7 "; color: var(--sec); }
  .idx-inline .leader, .idx-inline .idx-date { display: none; }
}

@media (min-width: 760px) {
  .lead {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    align-items: center;
    padding: 56px 0 64px;
  }
  .lead-text { grid-column: span 5; }
  .lead-pic { grid-column: span 7; margin-top: 0; }
  .lead-text-only .lead-text { grid-column: 3 / span 8; text-align: center; }
  .lead-text .kick { margin-bottom: 18px; }
  .lead-title { font-size: 50px; line-height: 1.06; letter-spacing: -.015em; }
  .lead .standfirst { margin-top: 22px; font-size: 21px; }

  .latest { padding: 48px 0 56px; }
  .latest .section-head { margin-bottom: 32px; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .card { display: block; padding: 0; border: 0; }
  .card:last-child { border: 0; }
  .card-text .kick { margin: 16px 0 8px; }
  .card-title { font-size: 24px; line-height: 1.2; }

  .lower {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    padding: 8px 0 24px;
    border-top: 1px solid var(--rule);
  }
  .earlier { grid-column: span 7; padding-top: 40px; }
  .earlier h2 { margin-bottom: 20px; }
  .contents-col { grid-column: 9 / span 4; padding-top: 40px; display: flex; flex-direction: column; gap: 44px; }
  .contents-col .contents { padding: 0; border: 0; }
  .contents-head { margin-bottom: 18px; }
  .idx { gap: 10px; }
  .idx li { min-height: 0; }
  .idx-name { font-size: 19px; }
  .idx-date { font-size: 12px; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- The post page -------------------------------------------------------------------- */

.post-head { padding-top: 36px; padding-bottom: 28px; text-align: center; }
.post-head .kick { margin-bottom: 16px; }
.post-title { margin: 0 auto; max-width: 980px; font-size: 36px; font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
.post-head .standfirst { margin: 18px auto 0; max-width: 760px; font-size: 19px; line-height: 1.45; }

.post-grid { padding: 36px 0 24px; border-bottom: 1px solid var(--rule); }
.body p { margin: 0 0 24px; font-size: 19px; line-height: 1.7; }
.body .citeio-link.citeio-external {
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.body .citeio-link.citeio-internal {
  text-decoration: underline dotted;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* The labels line: each field's label, then its values as plain links. A
   middle dot ends each group but the last, so a wrapped line never starts
   with one. */
.labels {
  margin: 36px 0 28px;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  color: var(--sec);
  font-size: 16px;
  line-height: 1.7;
}
.labels li { display: inline; }
.labels li:not(:last-child)::after { content: " \00B7 "; }
.labels-name { font-size: 11.5px; margin-right: 4px; }
.labels a { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* The Sources in the margin. The list is the citeio library's markup, which
   carries no number and no label: a counter numbers the items, with the
   `/ ""` form so that a screen reader skips the numbers, and `::after` draws
   "Primary" and "This site". Only the list item is named for "This site",
   because citeio also puts citeio-internal on every internal link. */
.sources { margin-top: 12px; }
.sources-head { margin: 6px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.citeio-sources { margin: 0; padding: 0; list-style: none; counter-reset: source; display: flex; flex-direction: column; gap: 14px; }
.citeio-source { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.4; counter-increment: source; overflow-wrap: anywhere; }
.citeio-source::before {
  content: counter(source);
  content: counter(source) / "";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acc);
}
.citeio-sources a { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.citeio-sources a.citeio-internal { text-decoration-style: dotted; text-decoration-color: var(--ink); }
/* The label's capitals sat about 2px high in a box that took the list's line
   height. An 11px line and 3px more padding above than below centre them in
   an 18px box, which sits where the old box sat (measured in headless
   Chromium, 2026-10-28). */
.citeio-primary::after, li.citeio-internal::after {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 6px 1px;
  font-size: 10.5px;
  line-height: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.citeio-primary::after { content: "Primary"; border: 1px solid var(--acc); color: var(--acc); }
li.citeio-internal::after { content: "This site"; border: 1px solid var(--sec); color: var(--sec); }
.disclosure { margin: 32px 0 0; color: var(--sec); font-size: 16px; line-height: 1.55; }
.disclosure a { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* The thread: a dated list of the story so far, ending with this post. */
.story { padding-top: 48px; }
.story h2 { margin: 0 0 22px; }
.stops { margin: 0; padding: 0; list-style: none; max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.stop { display: flex; align-items: baseline; gap: 18px; }
.stop-date { flex: none; width: 64px; font-size: 12px; }
.stop-here .stop-date { color: var(--acc); }
.stop-title { font-size: 18px; line-height: 1.3; }
.stop-note { margin-left: 8px; font-size: 11.5px; }
.story .rows { max-width: 860px; }

.more { padding-top: 48px; }
.more .rows { max-width: 860px; }

@media (min-width: 760px) {
  .post-head { padding-top: 64px; padding-bottom: 44px; }
  .post-head .kick { margin-bottom: 22px; }
  .post-title { font-size: 58px; line-height: 1.06; }
  .post-head .standfirst { margin-top: 26px; font-size: 22px; }
  .post-grid { padding: 56px 0 24px; }
  .body p { margin-bottom: 26px; font-size: 20px; }
  .stop-title { font-size: 20px; }
}
@media (min-width: 1100px) {
  .post-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .post-main { grid-column: 1 / span 7; }
  .sources { grid-column: 9 / span 4; margin-top: 0; }
}

/* --- The list pages: the archive, an entity and an index ------------------------------ */

.list-page { max-width: 940px; }
.page-head { padding: 48px 0 32px; text-align: center; }
.page-head .page-title { margin: 0; }
.page-head .ic { display: block; margin: 0 auto 16px; }
.page-up { margin: 0 0 18px; }
.page-up a { color: var(--acc); min-height: 44px; display: inline-flex; align-items: center; }
.page-links { margin: 20px 0 0; display: flex; justify-content: center; flex-wrap: wrap; column-gap: 32px; }
.page-links a { min-height: 44px; display: inline-flex; align-items: center; }
.list-page .contents { border: 0; padding-top: 0; }

.pager { display: flex; gap: 16px; margin: 48px 0 0; }
/* The 3px of top padding centres the capitals, as on the ledger mark. */
.pager-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 3px 18px 0;
  border: 1px solid var(--ink);
}
.pager-link[rel="next"] { margin-left: auto; }
@media (min-width: 760px) { .page-head { padding: 64px 0 40px; } }