/* ============================================
   SELF-HOSTED FONTS — declared first so font-family rules below resolve.
   EB Garamond (body, headings, italic body) and Inter (chrome, UI labels)
   are served from /assets/fonts/ directly. No third-party font requests.
   Files licensed under SIL Open Font License 1.1 — licences in
   /assets/fonts/EB-GARAMOND-LICENSE.txt and /assets/fonts/INTER-LICENSE.txt.
   ============================================ */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* ============================================
   The Longer Look — shared stylesheet
   Mobile-first. Used by every page on the site.
   ============================================ */

/* No third-party font imports — fonts are self-hosted, declared above */

:root {
  /* News-register palette. Adjusted from the literary cream/navy/bronze
     toward something with stronger contrast and a recognisable "news"
     register. Body type stays EB Garamond; chrome reads as journalism. */
  --ink: #15171A;          /* near-black masthead/heading ink */
  --ink-soft: #2D3138;     /* secondary ink (subtitles, deck) */
  --bronze: #A8201A;       /* news red — masthead links, accents, callouts */
  --bronze-soft: #C44943;  /* hover/light variant of news red */
  --cream: #F4EFE6;        /* body background — kept warm for long reads */
  --cream-soft: #FAF7F0;   /* lighter cream for cards */
  --rule: #B8B0A0;         /* darker, sharper section rules */
  --body: #1A1A1A;         /* body text — proper newspaper black */
  --body-soft: #3A3A3A;    /* secondary body text */
  --muted: #6B6660;        /* metadata, captions */
  --paper: #FFFFFF;        /* white where chrome contrast helps */

  --gutter: 1.25rem;
  --gutter-lg: 2rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--body);
  background: var(--cream-soft);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

p, li, h1, h2, h3, blockquote, .stand, .desc, .standfirst, .title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================
   Masthead — BBC-style single-row dark bar

   A horizontal strip across the top with the publication wordmark on
   the left, a row of plain text links beside it. Current item carries
   a 4px underline accent (the BBC GEL convention). Click goes to the
   page. The "More" menu at the right end folds in any links that don't
   fit. Mobile collapses to a hamburger.

   Dark bar matches the publication's --ink colour rather than BBC red,
   to avoid clashing with the news-red accent the publication already
   uses for emphases (LATEST badges, callouts).
   ============================================ */

.masthead {
  /* Explicit hex rather than var(--ink) — the model page overrides --ink
     to navy for its own chart palette. Masthead must read the same on
     every page. */
  background: #15171A;
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 0;
}

.masthead-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  min-height: 56px;
}

.masthead-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--paper);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.masthead-title:hover { color: #d9b97a; }

.masthead-mark {
  /* Inverted on the dark bar — render the eye-mark in the paper colour */
  filter: brightness(0) invert(1);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.masthead-nav {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
  margin-left: auto;
}

.masthead-nav > a {
  color: var(--paper);
  text-decoration: none;
  padding: 1rem 0.85rem;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: box-shadow 0.12s ease, color 0.12s ease;
  /* The BBC accent: 4px underline appears on hover and on the current page */
  box-shadow: inset 0 0 0 0 currentColor;
}
.masthead-nav > a:hover,
.masthead-nav > a:focus {
  outline: none;
  box-shadow: inset 0 -4px 0 0 currentColor;
}
.masthead-nav > a.current {
  font-weight: 600;
  box-shadow: inset 0 -4px 0 0 currentColor;
}

/* The "More" overflow dropdown — only dropdown in the bar */
.masthead-more {
  position: relative;
  display: inline-flex;
}
.masthead-more-trigger {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 1rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: box-shadow 0.12s ease;
}
.masthead-more-trigger:hover,
.masthead-more-trigger:focus,
.masthead-more[data-open] .masthead-more-trigger {
  outline: none;
  box-shadow: inset 0 -4px 0 0 currentColor;
}
.masthead-more-caret {
  display: inline-block;
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.masthead-more[data-open] .masthead-more-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.masthead-more-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 200;
  background: #15171A;
  min-width: 180px;
  padding: 0.4rem 0;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.masthead-more[data-open] .masthead-more-panel {
  display: block;
}
.masthead-more-panel a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--paper);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}
.masthead-more-panel a:hover,
.masthead-more-panel a:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
}
.masthead-more-panel a.current {
  font-weight: 600;
  box-shadow: inset 4px 0 0 0 var(--paper);
}

/* Hamburger toggle — hidden on desktop, shown via media query */
.masthead-toggle {
  display: none;
}
.masthead-toggle-label {
  display: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--gutter);
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(244, 239, 230, 0.4);
  background: transparent;
  border-radius: 3px;
  z-index: 11;
}
.masthead-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.2s, opacity 0.2s;
}

/* Mobile: hide nav by default, reveal when hamburger checkbox is checked */
@media (max-width: 900px) {
  .masthead-toggle-label {
    display: flex;
  }
  .masthead-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 0.5rem 0 1rem 0;
    border-top: 1px solid rgba(244, 239, 230, 0.15);
  }
  .masthead-toggle:checked ~ .masthead-nav {
    display: flex;
  }
  .masthead-toggle:checked ~ .masthead-inner .masthead-nav,
  .masthead-inner:has(.masthead-toggle:checked) .masthead-nav {
    display: flex;
  }
  .masthead-inner {
    flex-wrap: wrap;
    padding: 0.5rem var(--gutter);
  }
  .masthead-nav > a {
    width: 100%;
    padding: 0.7rem 0;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  }
  .masthead-nav > a:hover,
  .masthead-nav > a:focus,
  .masthead-nav > a.current {
    color: #d9b97a;
  }
  .masthead-more {
    display: block;
    width: 100%;
  }
  .masthead-more-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  }
  .masthead-more-panel {
    position: static;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .masthead-more-panel a {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(244, 239, 230, 0.05);
  }
}

/* AI warning strip — proper class instead of inline styles */
.ai-warning-strip {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font: 0.78rem/1.4 'Inter', system-ui, sans-serif;
  padding: 0.45rem 1rem;
  text-align: center;
}
.ai-warning-strip a {
  color: var(--bronze);
  text-decoration: none;
}
.ai-warning-strip a:hover {
  text-decoration: underline;
}

/* ============================================
   Main container
   ============================================ */

main { flex: 1; width: 100%; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem var(--gutter) 1rem;
}

.container--wide { max-width: 880px; }

/* ============================================
   Typography (mobile-first)
   ============================================ */

.eyebrow {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--bronze);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.eyebrow::before, .eyebrow::after {
  content: "·";
  margin: 0 0.5rem;
  color: var(--bronze-soft);
}

.eyebrow--left { text-align: left; }
.eyebrow--left::before, .eyebrow--left::after { content: none; }

h1.title {
  font-size: 1.85rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
}

h1.title--left { text-align: left; }

.standfirst {
  font-size: 1.1rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--body-soft);
  text-align: center;
  max-width: 580px;
  margin: 0 auto 1.5rem;
}

.standfirst--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.byline {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.byline strong { color: var(--body); font-weight: 500; }

p {
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  color: var(--body);
}

p.lead { font-size: 1.18rem; line-height: 1.6; }

/* Homepage lead — centred. The opening line that says what the publication
   is. Centring it gives it the weight of a publication's mission line
   rather than reading as a left-aligned body paragraph. Only on the
   homepage; article-page leads stay left-aligned for reading flow. */
body.is-homepage p.lead {
  text-align: center;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.55;
}

h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2.4rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h3 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
}

ul, ol {
  margin: 1rem 0 1.5rem 1.25rem;
  padding-left: 0.25rem;
}

li {
  margin-bottom: 0.7rem;
  font-size: 1.06rem;
  line-height: 1.65;
  padding-left: 0.25rem;
}

strong { font-weight: 600; color: var(--body); }
em { font-style: italic; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--bronze-soft);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover, a:focus { color: var(--bronze); }

/* ============================================
   Special blocks
   ============================================ */

.disclosure {
  background: var(--cream);
  border-top: 3px solid var(--bronze);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem var(--gutter);
  margin: 2rem calc(-1 * var(--gutter)) 2rem;
  font-size: 0.98rem;
  line-height: 1.65;
}

.disclosure h3 { margin-top: 0; margin-bottom: 0.7rem; }
.disclosure p { font-size: 0.98rem; margin-bottom: 0.9rem; }
.disclosure p:last-child { margin-bottom: 0; }

.who-for {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.who-for p { margin: 0.4rem 0; font-size: 0.95rem; }
.who-for p:first-child { margin-top: 0; }
.who-for p:last-child { margin-bottom: 0; }
.who-for strong { color: var(--ink); }

/* Inline reference superscript links */
.ref-link {
  font-size: 0.78em;
  vertical-align: super;
  line-height: 0;
  color: var(--bronze);
  text-decoration: none;
  font-weight: 600;
  margin-left: 0.05em;
  margin-right: 0.05em;
  white-space: nowrap;
}
.ref-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Per-page references section */
.references-list {
  padding-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.references-list li {
  margin-bottom: 0.7rem;
  padding-left: 0.3rem;
}
.references-list li:target {
  background: #fff5e0;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
}
.references-list a {
  color: var(--bronze);
  word-break: break-word;
}
.references-list a:hover {
  color: var(--ink);
}

/* Visible conflict-of-interest box at top of every article */
.coi-box {
  background: #fef6e7;
  border: 1px solid #d9b87a;
  border-left: 4px solid #b8860b;
  padding: 0.7rem 1rem;
  margin: 0 0 1.2rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #5c3d00;
  border-radius: 2px;
}
.coi-box strong { color: #3d2700; }
.coi-box a { color: var(--bronze); }

/* Frame disclosure box — sits below the COI box on analytical pieces */
.frame-box {
  background: #f8f3e8;
  border: 1px solid #c9b896;
  border-left: 4px solid var(--bronze);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #3d3024;
  border-radius: 2px;
}
.frame-box strong { color: #1f1810; }
.frame-box em { color: #3d3024; font-style: italic; }
.frame-box a { color: var(--bronze); }

blockquote {
  border-left: 3px solid var(--bronze);
  padding: 0.4rem 0 0.4rem 1.1rem;
  margin: 1.8rem 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.recommendation {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: 1.4rem var(--gutter);
  margin: 2rem calc(-1 * var(--gutter)) 2rem;
}

.recommendation h3 { margin-top: 0; color: var(--ink); }
.recommendation p { margin-bottom: 0.7rem; }
.recommendation p:last-child { margin-bottom: 0; }

.triggers {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.triggers li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.7rem;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
  padding-left: 0;
}

.triggers li:last-child { border-bottom: none; }

.triggers .num {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--bronze);
  font-size: 1.05rem;
}

/* ============================================
   Downloads
   ============================================ */

.downloads {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.3rem var(--gutter);
  margin: 2.5rem calc(-1 * var(--gutter)) 2rem;
  text-align: center;
}

.downloads h3 { margin-top: 0; margin-bottom: 0.4rem; }

.downloads p {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.download-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.download-links a {
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  border-radius: 2px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-links a:hover,
.download-links a:focus {
  background: var(--ink);
  color: var(--paper);
}

/* ============================================
   Article navigation
   ============================================ */

/* ============================================
   Group badge — a piece-type label below the date eyebrow
   ============================================ */

.group-badge {
  display: block;
  width: fit-content;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze);
  background: #f8f3e8;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  margin: 0 auto 1rem;
  border: 1px solid #e0d7c4;
}

/* ============================================
   See-also panel — context-aware navigation, sits above prev/next
   ============================================ */

.see-also {
  margin: 2.5rem 0 1rem;
  padding: 1.3rem 1.4rem;
  background: #faf6ed;
  border: 1px solid #e0d7c4;
  border-left: 3px solid var(--bronze);
  border-radius: 2px;
}

.see-also-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze);
  margin: 0 0 0.9rem 0;
}

.see-also-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem 0;
}

.see-also-list li {
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.see-also-list li:last-child { margin-bottom: 0; }

.see-also-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.see-also-list a:hover {
  border-bottom-color: var(--bronze);
}

.see-also-note {
  color: var(--muted);
  font-style: italic;
}

.see-also-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.7rem 0 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid #e9e0c8;
}

.see-also-meta a {
  color: var(--bronze);
}

.article-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: 'Inter', sans-serif;
}

/* ============================================
   Mobile fixes — applied at narrow viewports for components added across the build
   These rules address: site-bar wrapping, downloads-block overflow,
   and tighter padding/sizing for frame-box, see-also, group-badge on small phones.
   ============================================ */

@media (max-width: 600px) {
  /* Site-bar: allow wrapping by overriding white-space: nowrap on links.
     The bar uses both .site-bar a and .site-bar-link selectors elsewhere; cover both. */
  .site-bar {
    padding: 0.7rem 0.6rem;
    line-height: 2.2;
    text-align: center;
    /* Allow children to wrap onto multiple rows */
    white-space: normal;
  }
  .site-bar a,
  .site-bar a:link,
  .site-bar a:visited,
  .site-bar-link {
    white-space: normal;
    padding: 0.45rem 0.55rem;
    display: inline-block;
    /* Tap targets — at least 32px tall */
    min-height: 32px;
    line-height: 1.3;
  }
  .site-bar a + a::before,
  .site-bar-link + .site-bar-link::before {
    /* Hide vertical-rule separators when wrapping; they look wrong at line breaks */
    display: none;
  }
  .site-bar-eyebrow {
    display: block;
    margin: 0 auto 0.3rem auto;
  }

  /* Downloads block: drop the negative margin that bleeds past viewport */
  .downloads {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Frame box: tighter padding on phones */
  .frame-box {
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
  }
  .frame-box p {
    margin-bottom: 0.45rem !important;
  }

  /* COI box: same treatment */
  .coi-box {
    padding: 0.6rem 0.85rem;
    font-size: 0.86rem;
  }

  /* See-also panel: tighter padding, slightly smaller heading */
  .see-also {
    padding: 1rem 0.95rem;
    margin-left: 0;
    margin-right: 0;
  }
  .see-also-list li { font-size: 0.92rem; }
  .see-also-meta { font-size: 0.82rem; }

  /* Group badge: keep it inline-block but shrink padding */
  .group-badge {
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.85rem;
  }
}.article-nav a {
  display: block;
  padding: 1rem 1.2rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: var(--body);
  font-size: 0.92rem;
  line-height: 1.45;
  transition: all 0.15s ease;
  min-height: 44px;
}

.article-nav a:hover,
.article-nav a:focus { border-color: var(--bronze); }

.article-nav .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--bronze);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.article-nav .next { text-align: left; }

.article-nav .prev-empty,
.article-nav .next-empty {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--rule);
  color: var(--muted);
  font-style: italic;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================
   Article list
   ============================================ */

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

.article-list li {
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0;
  margin-bottom: 0;
}

.article-list li:last-child { border-bottom: none; }

.article-list .meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--bronze);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.article-list h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 0.45rem;
  font-weight: 600;
}

.article-list h2 a {
  color: var(--ink);
  text-decoration: none;
}

.article-list h2 a:hover,
.article-list h2 a:focus { color: var(--bronze); }

.article-list .stand {
  font-style: italic;
  color: var(--body-soft);
  font-size: 1.02rem;
  margin-bottom: 0.7rem;
  line-height: 1.55;
}

.article-list .read {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--bronze);
  text-decoration: none;
  letter-spacing: 0.04em;
  padding: 0.4rem 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.article-list .read:hover,
.article-list .read:focus { color: var(--ink); }

.article-list--featured li:first-child {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bronze);
  padding: 1.3rem var(--gutter);
  margin: 0 calc(-1 * var(--gutter)) 1.5rem;
}

.article-list--featured li:first-child h2 { font-size: 1.5rem; }
.article-list--featured li:first-child .meta { color: var(--bronze); }

/* ============================================
   Footer — solid masthead-style block at end of every page.
   Dark contained panel rather than thin lines on cream so the
   descriptions read as substantial closing copy, not afterthought.
   ============================================ */

footer {
  background: var(--ink);
  color: var(--paper);
  margin-top: 4rem;
  padding: 3rem var(--gutter) 2rem;
  border-top: 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.footer-section h3 {
  margin: 0 0 1rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d9b97a;
}

.footer-section p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.78);
  margin-bottom: 0.85rem;
}

.footer-section p strong {
  color: var(--paper);
  font-weight: 600;
}

.footer-section p em {
  color: rgba(244, 239, 230, 0.92);
  font-style: italic;
}

.footer-section a {
  color: #d9b97a;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 185, 122, 0.3);
  transition: border-color 0.12s ease;
}
.footer-section a:hover,
.footer-section a:focus {
  border-bottom-color: #d9b97a;
}

.sites-group-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.66rem !important;
  color: #d9b97a !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600 !important;
  margin-top: 1.4rem !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}

.sites-group-label:first-of-type {
  margin-top: 0.4rem !important;
}

.sites-list {
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.sites-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.08);
  font-size: 0.92rem;
  line-height: 1.4;
}
.sites-list li:last-child { border-bottom: none; }

.sites-list a {
  color: var(--paper);
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 0;
  display: inline-block;
  padding: 0;
  min-height: 0;
}
.sites-list a:hover,
.sites-list a:focus { color: #d9b97a; }

.sites-list .desc {
  color: rgba(244, 239, 230, 0.7);
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  margin-top: 0.25rem;
  display: block;
}

.footer-bottom {
  border-top: 1px solid rgba(244, 239, 230, 0.18);
  padding-top: 1.5rem;
  margin-top: 1.8rem;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(244, 239, 230, 0.65);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.footer-bottom .author { color: var(--paper); margin-bottom: 0.2rem; }
.footer-bottom .author strong { color: var(--paper); }
.footer-bottom a {
  color: rgba(244, 239, 230, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 230, 0.25);
}
.footer-bottom a:hover { color: #d9b97a; border-color: #d9b97a; }

/* Footer legal-links row inherits the dark theme — overrides the
   inline-style colour from the markup */
.footer-legal {
  border-top-color: rgba(244, 239, 230, 0.18) !important;
  color: rgba(244, 239, 230, 0.65) !important;
}
.footer-legal a,
.footer-legal button {
  color: rgba(244, 239, 230, 0.85) !important;
}
.footer-legal a:hover,
.footer-legal button:hover {
  color: #d9b97a !important;
}

.footer-bottom .author { font-style: normal; color: var(--body-soft); }
.footer-bottom .licence { font-style: italic; margin-top: 0.4rem; }

/* ============================================
   Tablet — 600px+
   ============================================ */

@media (min-width: 600px) {
  html { font-size: 18px; }
  :root { --gutter: 2rem; }

  .masthead-title {
    font-size: 1.2rem;
    letter-spacing: 0.14em;
  }

  .container { padding: 4rem 2rem 2rem; }

  h1.title { font-size: 2.4rem; }

  .standfirst { font-size: 1.2rem; margin-bottom: 2rem; }

  .byline { padding-bottom: 2rem; margin-bottom: 3rem; }

  p { font-size: 1.1rem; margin-bottom: 1.4rem; }
  p.lead { font-size: 1.2rem; line-height: 1.65; }
  li { font-size: 1.1rem; }

  h2 {
    font-size: 1.55rem;
    margin-top: 2.8rem;
    margin-bottom: 1.1rem;
  }

  h3 {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    margin-top: 2.4rem;
  }

  .disclosure,
  .recommendation,
  .downloads {
    margin-left: 0;
    margin-right: 0;
    padding: 1.7rem 1.9rem;
  }

  .download-links {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }

  .download-links a {
    flex: 0 1 auto;
    padding: 0.65rem 1.4rem;
    min-width: 160px;
  }

  .article-nav {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 3rem 0 2rem;
    padding-top: 2rem;
  }

  .article-nav .next { text-align: right; }
  .article-nav .next-empty { justify-content: flex-end; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
  }

  footer { padding: 3rem 2rem; }

  .article-list li { padding: 2rem 0; }
  .article-list h2 { font-size: 1.5rem; }

  .article-list--featured li:first-child {
    padding: 2rem 2rem;
    margin: 0 0 2rem;
  }

  .article-list--featured li:first-child h2 { font-size: 1.85rem; }

  .triggers li {
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
  }

  blockquote {
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0;
    font-size: 1.15rem;
    line-height: 1.6;
  }

  .footer-bottom { font-size: 0.82rem; }
}

/* ============================================
   Desktop — 880px+
   ============================================ */

@media (min-width: 880px) {
  h1.title { font-size: 2.6rem; }
  .standfirst { font-size: 1.25rem; }
  h2 { font-size: 1.6rem; }
}

/* ============================================
   Print
   ============================================ */

@media print {
  .masthead, .article-nav, .downloads, footer .footer-grid {
    display: none;
  }
  body { background: white; color: black; }
  .container { max-width: none; padding: 0; }
  a { text-decoration: none; color: black; }
  .disclosure, .recommendation { border: 1px solid #999; margin: 1rem 0; }
}

/* ============================================
   Reduced motion
   ============================================ */

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

/* ============================================
   Focus visibility
   ============================================ */

a:focus-visible,
.download-links a:focus-visible,
.article-nav a:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* ============================================
   Cross-site bar — links to sister sites
   Designed to read as a publication network band rather than a row of links.
   Higher specificity than the global `a` rule via descendant selector.
   ============================================ */

.site-bar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.95rem 1.5rem;
  background: linear-gradient(180deg, #EFEAD9 0%, #E8E2CF 100%);
  border-bottom: 1px solid rgba(124, 90, 50, 0.18);
  color: var(--muted);
  line-height: 1.6;
}

.site-bar a,
.site-bar a:link,
.site-bar a:visited {
  color: var(--muted);
  text-decoration: none;
  margin: 0;
  padding: 0 0.85rem;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  transition: color 0.25s ease;
}

/* Subtle vertical-rule separators between items */
.site-bar a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.7em;
  background: rgba(124, 90, 50, 0.25);
}

.site-bar a:hover,
.site-bar a:focus {
  color: var(--bronze);
  text-decoration: none;
}

/* The current site (themanybuilders is special — it's the canonical hub) */
.site-bar a:first-child {
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 720px) {
  .site-bar {
    font-size: 0.6rem;
    padding: 0.75rem 0.5rem;
    letter-spacing: 0.06em;
    line-height: 2;
  }
  .site-bar a {
    padding: 0 0.5rem;
  }
}

/* Print: hide the cross-site bar */
@media print {
  .site-bar { display: none; }
}

/* ================================================================
   HOMEPAGE CALLOUTS — visual hierarchy & warmth
   ================================================================ */

/* Hero callout: the publication's central thesis */
.hero-callout {
  position: relative;
  background: linear-gradient(135deg, #f8f4eb 0%, #f4efe6 100%);
  border-left: 5px solid var(--bronze);
  padding: 1.75rem 1.75rem 1.5rem 2.5rem;
  margin: 2rem 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 3px rgba(21, 23, 26, 0.06);
}

.hero-callout-mark {
  position: absolute;
  left: -0.5rem;
  top: 1.5rem;
  background: var(--bronze);
  color: #f4efe6;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  border-radius: 50%;
  line-height: 1;
}

.hero-callout-title {
  margin: 0 0 0.85rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.hero-callout-body {
  margin: 0 0 0.85rem 0;
  font-size: 1.02em;
  line-height: 1.6;
  color: #2a2a2a;
}

.hero-callout-links {
  margin: 1rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 1px dotted #C9C0B0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.hero-callout-links a {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  background: var(--ink, #15171A);
  color: var(--paper, #F4EFE6);
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.9em;
  line-height: 1.3;
  transition: background 120ms ease, transform 80ms ease;
}
.hero-callout-links a:hover,
.hero-callout-links a:focus {
  background: var(--bronze, #8C6B3F);
}
.hero-callout-links a strong {
  font-weight: 500;
}
/* Hide the "·" separators that used to live between the inline links —
   they're no longer needed now the CTAs are buttons */
.hero-callout-links br + br,
.hero-callout-links {
  /* the inline " · " text content between links is targeted by removing
     non-element text nodes — handled in HTML by emitting buttons in a flex row */
}
@media (max-width: 600px) {
  .hero-callout-links a {
    padding: 0.6rem 0.85rem;
    font-size: 0.88em;
  }
}

/* Reading guide callout: orienting the reader */
.reading-guide-callout {
  background: #fff;
  border: 1px solid #C9C0B0;
  border-top: 3px solid #2C5F3F;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0 3px 3px;
}

.reading-guide-title {
  margin: 0 0 0.6rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.reading-guide-body {
  margin: 0 0 0.75rem 0;
  font-size: 0.95em;
  line-height: 1.55;
  color: #4a4540;
}

.reading-guide-links {
  margin: 0;
  font-size: 0.95em;
}

/* Deflection callout: send the wrong reader away */
.deflection-callout {
  background: #fff;
  border: 1px solid #C9C0B0;
  border-top: 3px solid #6B2737;
  padding: 1.1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0 3px 3px;
  font-size: 0.95em;
}

.deflection-callout-title {
  margin: 0 0 0.5rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}

.deflection-callout-body {
  margin: 0;
  line-height: 1.55;
  color: #4a4540;
}

/* Contribution callout: foreground the substantive piece */
.contribution-callout {
  background: linear-gradient(180deg, #fafafa 0%, #f4efe6 100%);
  border: 1px solid #C9C0B0;
  border-top: 4px solid var(--ink);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-radius: 0 0 4px 4px;
}

.contribution-callout-title {
  margin: 0 0 0.7rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}

.contribution-callout-body {
  margin: 0 0 0.85rem 0;
  font-size: 0.97em;
  line-height: 1.6;
  color: #2a2a2a;
}

.contribution-callout-links {
  margin: 0.85rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 1px dotted #C9C0B0;
  font-size: 0.95em;
}

/* Production callout: how this was made */
.production-callout {
  background: #fff;
  border: 1px solid #C9C0B0;
  border-top: 3px solid var(--ink);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 0 3px 3px;
}

.production-callout-title {
  margin: 0 0 0.7rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.production-callout-body {
  margin: 0 0 0.7rem 0;
  font-size: 0.95em;
  line-height: 1.6;
  color: #4a4540;
}

.production-callout-links {
  margin: 0.85rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 1px dotted #C9C0B0;
  font-size: 0.95em;
}

/* All callout links: warmer styling */
.hero-callout a,
.reading-guide-callout a,
.contribution-callout a,
.production-callout a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.hero-callout a:hover,
.reading-guide-callout a:hover,
.contribution-callout a:hover,
.production-callout a:hover {
  border-bottom-color: var(--bronze);
}

.deflection-callout a {
  color: #6B2737;
}

/* Mobile adjustments */
@media (max-width: 720px) {
  .hero-callout {
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
  }
  .hero-callout-mark {
    left: -0.4rem;
    top: 1.1rem;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.95rem;
  }
  .hero-callout-title {
    font-size: 1.2rem;
  }
  .hero-callout-body {
    font-size: 1em;
  }
  .reading-guide-callout,
  .deflection-callout,
  .contribution-callout,
  .production-callout {
    padding: 1rem 1.1rem;
  }
}

/* ================================================================
   VISUAL MARKS — hero, masthead, article ornaments
   ================================================================ */

/* Masthead mark — small horizon-and-look symbol next to wordmark */
.masthead-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.masthead-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
}

/* Hero mark on homepage — above the eyebrow/title */
.hero-mark-wrapper {
  margin: 0.5rem 0 2rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-mark {
  width: 200px;
  max-width: 60vw;
  height: auto;
  opacity: 0.95;
}

/* Article-page ornament */
.article-ornament {
  margin: 1.75rem 0 2.25rem 0;
  display: flex;
  justify-content: center;
  opacity: 0.8;
}

.article-ornament img {
  width: 110px;
  height: auto;
}

/* ================================================================
   POLISH — typography & spacing refinements
   ================================================================ */

/* Slightly more generous line-length on the body for readability */
.container {
  max-width: 720px;
  padding: 0 var(--gutter);
}

@media (min-width: 600px) {
  .container { padding: 0 var(--gutter-lg); }
}

/* Article body spacing rhythm */
article p { margin-bottom: 1rem; }
article p.lead {
  font-size: 1.12em;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 1.4rem;
}

article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
}

article h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}

/* Article list heading */
.article-list-heading {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: var(--bronze);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}

/* ================================================================
   MOBILE FIXES — ensure callouts and masthead behave on small screens
   ================================================================ */

@media (max-width: 600px) {
  html { font-size: 16px; }

  .masthead-inner {
    padding: 0.75rem var(--gutter);
  }

  .masthead-title {
    font-size: 0.92rem;
    letter-spacing: 0.10em;
  }

  .masthead-mark {
    width: 18px;
    height: 18px;
  }

  /* .masthead-nav font-size is handled by the hamburger system at 900px */
  /* Hero mark — smaller on mobile, centered */
  .hero-mark-wrapper {
    justify-content: flex-start;
    margin: 0.25rem 0 1.5rem 0;
  }
  .hero-mark {
    width: 140px;
    max-width: 55vw;
  }

  /* Article ornament — narrower on mobile */
  .article-ornament img {
    width: 80px;
  }

  /* Article headings — slightly smaller */
  article h2 {
    font-size: 1.35rem;
    margin-top: 2rem;
  }

  article h3 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
  }

  /* Title and standfirst */
  .title {
    font-size: 1.7rem;
    line-height: 1.2;
  }

  .standfirst {
    font-size: 1.05em;
  }

  /* Body text slightly tighter line-height for narrower column */
  article p {
    line-height: 1.6;
  }

  /* Lead paragraphs slightly smaller */
  article p.lead {
    font-size: 1.05em;
  }

  /* Hero callout on mobile — reduce padding, tighten leading */
  .hero-callout {
    padding: 1.1rem 1.1rem 1.1rem 1.5rem;
    margin: 1.25rem 0;
  }
  .hero-callout-title {
    font-size: 1.15rem;
  }
  .hero-callout-body {
    font-size: 0.97em;
  }
  .hero-callout-mark {
    left: -0.35rem;
    top: 0.9rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.9rem;
  }

  /* All callouts: smaller padding on mobile */
  .reading-guide-callout,
  .deflection-callout,
  .contribution-callout,
  .production-callout {
    padding: 0.95rem 1rem;
    margin: 1.25rem 0;
  }

  .reading-guide-title,
  .contribution-callout-title,
  .production-callout-title,
  .deflection-callout-title {
    font-size: 1.02rem;
  }

  .reading-guide-body,
  .contribution-callout-body,
  .production-callout-body,
  .deflection-callout-body {
    font-size: 0.92em;
  }

  /* Cross-site bar — single line on mobile, scroll if needed */
  .site-bar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Container padding tighter on mobile */
  .container {
    padding: 0 1rem;
  }

  /* Article list spacing tighter on mobile */
  .article-list li {
    padding: 1.25rem 0;
  }

  .article-list h2 {
    font-size: 1.2rem;
  }

  .article-list .stand {
    font-size: 0.95em;
  }

  /* Disclosure blocks — smaller padding on mobile */
  .disclosure {
    padding: 1rem 1.1rem;
    margin: 1.25rem 0;
  }
}

/* ================================================================
   TABLET — between mobile and desktop
   ================================================================ */

@media (min-width: 600px) and (max-width: 880px) {
  .container { max-width: 100%; }
  .hero-mark { width: 180px; }
}

/* ================================================================
   FOCUS STYLES — accessibility
   ================================================================ */

a:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* ================================================================
   PRINT — clean print styles
   ================================================================ */

@media print {
  .site-bar,
  .masthead-nav,
  .hero-mark-wrapper,
  .article-ornament,
  .reading-guide-callout,
  .deflection-callout,
  .production-callout {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  .hero-callout,
  .contribution-callout {
    border: 1px solid #999;
    background: white;
    page-break-inside: avoid;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  article p { orphans: 3; widows: 3; }
  article h2, article h3 { page-break-after: avoid; }
}

/* ================================================================
   Home masthead — same BBC-style dark bar as article pages, kept
   visually identical so the publication has one masthead pattern,
   not two. The homepage's hero/lead block sits below in body content.
   ================================================================ */

.home-masthead {
  background: #15171A;
  color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 0;
}

.home-masthead-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  min-height: 56px;
}

.home-masthead-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--paper);
  padding: 0.5rem 0;
}
.home-masthead-link:hover { color: #d9b97a; }

.home-masthead-mark {
  filter: brightness(0) invert(1);
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

.home-masthead-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

.home-masthead-tagline {
  display: none;
}

.home-masthead-nav {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-left: auto;
}

.home-masthead-nav > a {
  color: var(--paper);
  text-decoration: none;
  padding: 1rem 0.85rem;
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: box-shadow 0.12s ease, color 0.12s ease;
  box-shadow: inset 0 0 0 0 currentColor;
}
.home-masthead-nav > a:hover,
.home-masthead-nav > a:focus {
  outline: none;
  box-shadow: inset 0 -4px 0 0 currentColor;
}
.home-masthead-nav > a.current {
  font-weight: 600;
  box-shadow: inset 0 -4px 0 0 currentColor;
}

.home-masthead-toggle-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--gutter);
  border-color: rgba(244, 239, 230, 0.4);
  background: transparent;
}
.home-masthead-toggle-label .masthead-toggle-bar {
  background: var(--paper);
}

/* Mobile: hide nav by default, hamburger reveals */
@media (max-width: 900px) {
  .home-masthead-toggle-label {
    display: flex;
  }
  .home-masthead-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding: 0.5rem 0 1rem 0;
    border-top: 1px solid rgba(244, 239, 230, 0.15);
  }
  .home-masthead-inner:has(.masthead-toggle:checked) .home-masthead-nav {
    display: flex;
  }
  .home-masthead-inner {
    flex-wrap: wrap;
    padding: 0.5rem var(--gutter);
  }
  .home-masthead-nav > a {
    width: 100%;
    padding: 0.7rem 0;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  }
  .home-masthead-nav > a:hover,
  .home-masthead-nav > a:focus,
  .home-masthead-nav > a.current {
    color: #d9b97a;
  }
  .home-masthead-nav .masthead-more {
    display: block;
    width: 100%;
  }
  .home-masthead-nav .masthead-more-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  }
}

/* Sidebar layout activates from medium-large screens up */
@media (min-width: 960px) {
  .home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter-lg);
  }

  .home-content {
    min-width: 0;
    /* keep prose at the publication's intended width even within the grid */
    max-width: 720px;
    width: 100%;
  }

  .home-sidebar {
    display: block;
    position: sticky;
    top: 1.5rem;
    margin: 2.25rem 0 0 0;
    padding: 1.1rem 1.1rem 1.25rem 1.1rem;
    background: transparent;
    border: none;
    border-left: 1px solid var(--rule);
    padding-left: 1.5rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  /* tame the scrollbar in the sidebar */
  .home-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .home-sidebar::-webkit-scrollbar-thumb {
    background: rgba(124, 90, 50, 0.15);
    border-radius: 3px;
  }
}

@media (min-width: 1100px) {
  .home-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
  }
}

/* ================================================================
   Sidebar — Also by Doug Scott (used both on homepage and every page)
   Compact: titles + small labels, no descriptions, denser stack so more
   books are visible without scrolling. Same content, less prose.
   ================================================================ */

.home-sidebar .also-by-eyebrow,
.page-sidebar .also-by-eyebrow {
  margin: 0 0 0.7rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--news-red);
  text-align: left;
}

/* Lead paragraph hidden — was a long italic description that ate space */
.home-sidebar .also-by-lead-mini,
.page-sidebar .also-by-lead-mini {
  display: none;
}

.home-sidebar .also-by-group-label,
.page-sidebar .also-by-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.4rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px dotted var(--rule);
}
.home-sidebar .also-by-group-label:first-of-type,
.page-sidebar .also-by-group-label:first-of-type {
  margin-top: 0.2rem;
}

.home-sidebar .also-by-card,
.page-sidebar .also-by-card {
  display: block;
  padding: 0.65rem 0.75rem 0.75rem 0.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  margin: 0 0 0.4rem 0;
  transition: background-color 0.12s ease, border-color 0.12s ease, padding-left 0.12s ease;
}
.home-sidebar .also-by-card:hover,
.home-sidebar .also-by-card:focus,
.page-sidebar .also-by-card:hover,
.page-sidebar .also-by-card:focus {
  background: var(--cream-soft);
  border-color: var(--bronze);
  padding-left: 0.9rem;
}

.home-sidebar .also-by-card-label,
.page-sidebar .also-by-card-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--news-red);
  margin-bottom: 0.3rem;
}

.home-sidebar .also-by-card-title,
.page-sidebar .also-by-card-title {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* Small sales-pitch line under each title — one short line per book,
   italic, muted colour. Adds a reason to click without bringing back
   the long descriptions we removed in the compact pass. */
.home-sidebar .also-by-card-pitch,
.page-sidebar .also-by-card-pitch {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 0.35rem;
}

/* Card descriptions hidden in the compact view */
.home-sidebar .also-by-card-desc,
.page-sidebar .also-by-card-desc {
  display: none;
}

/* Featured card (The Many Builders) — slight emphasis without taking
   extra vertical space */
.home-sidebar .also-by-card--featured,
.page-sidebar .also-by-card--featured {
  border-color: var(--news-red);
  border-left-width: 3px;
}


/* ================================================================
   MOBILE — sidebar drops below the content with tighter padding
   ================================================================ */

@media (max-width: 600px) {
  .home-sidebar {
    margin: 1rem -1rem 1.25rem -1rem;
    padding: 1rem 1rem 1.25rem 1rem;
    border-radius: 0;
  }

  .home-sidebar .also-by-eyebrow {
    text-align: center;
  }

  .home-sidebar .also-by-lead-mini {
    text-align: center;
    font-size: 0.85rem;
  }
}

@media print {
  .home-sidebar { display: none; }
}

/* ================================================================
   CRITIQUE-CALLOUT — homepage callout pointing to Common Reactions.
   Sober slate-and-stone palette to signal "self-critical, not
   self-promotional." Distinct from the warmer hero/contribution
   callouts so it reads as a different kind of invitation.
   ================================================================ */

.critique-callout {
  margin: 1.5rem 0;
  padding: 1.4rem 1.6rem 1.5rem 1.6rem;
  background: linear-gradient(135deg, #ECEDEE 0%, #E1E2E4 100%);
  border-left: 3px solid #6B6660;
  border-radius: 3px;
}

.critique-callout-title {
  margin: 0 0 0.65rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
}

.critique-callout-body {
  margin: 0 0 0.85rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.critique-callout-links {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

.critique-callout-links a {
  color: #2C3E5C;
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 62, 92, 0.3);
}

.critique-callout-links a:hover {
  border-bottom-color: #2C3E5C;
}

@media (max-width: 600px) {
  .critique-callout {
    padding: 1.1rem 1.1rem 1.2rem 1.1rem;
  }
  .critique-callout-title {
    font-size: 1.05rem;
  }
  .critique-callout-body {
    font-size: 0.95rem;
  }
}

/* ================================================================
   ARCHIVE — section headings for the new grouped layout
   ================================================================ */

.archive-section-heading {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.5rem 0 0.5rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.archive-section-note {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 1rem 0;
}

/* ============================================
   FINAL MOBILE OVERRIDES — appended last so they win specificity ties
   These rules ensure the site-bar wraps and the new components fit small viewports.
   ============================================ */

@media (max-width: 600px) {
  /* Site-bar: force wrapping. Existing rules use white-space:nowrap on .site-bar a;
     this resets it both at the parent and on the link variants used in the markup. */
  nav.site-bar {
    white-space: normal !important;
    text-align: center;
    padding: 0.7rem 0.6rem;
    line-height: 2.0;
  }
  nav.site-bar a,
  nav.site-bar a:link,
  nav.site-bar a:visited,
  nav.site-bar .site-bar-link {
    white-space: normal !important;
    display: inline-block;
    padding: 0.4rem 0.55rem;
    line-height: 1.3;
    min-height: 32px;
  }
  nav.site-bar a + a::before,
  nav.site-bar .site-bar-link + .site-bar-link::before {
    display: none !important;
  }
  nav.site-bar .site-bar-eyebrow {
    display: block;
    margin: 0 auto 0.3rem auto;
    width: 100%;
  }
  /* Downloads block negative margin needs the same final-word treatment */
  .downloads {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* AI-warning strip — bump tap target heights on mobile.
   The strip uses inline styles in the markup; we override link sizing here. */
@media (max-width: 600px) {
  .ai-warning-strip a {
    display: inline-block;
    padding: 0.4rem 0.55rem;
    line-height: 1.3;
    min-height: 32px;
  }
  /* Home-masthead nav: bump tap target on mobile */
  .home-masthead-nav a {
    padding: 0.5rem 0.65rem;
    line-height: 1.4;
    min-height: 36px;
    display: inline-block;
  }
  /* Top masthead nav (article pages): same */
  nav.masthead-nav a,
  .masthead-inner nav a {
    padding: 0.5rem 0.6rem;
    min-height: 36px;
    display: inline-block;
    line-height: 1.4;
  }
}

/* Byline links and footer-legal links: ensure adequate tap target on mobile */
@media (max-width: 600px) {
  .byline a,
  .footer-bottom a,
  .footer-legal a,
  .footer-legal button {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    line-height: 1.3;
    min-height: 32px;
  }
  /* List items in the see-also panel and any ol/ul in body text */
  .see-also-list li a,
  ol li > a:only-child,
  .article-body ol li a {
    display: inline-block;
    padding: 0.25rem 0;
    min-height: 28px;
    line-height: 1.4;
  }
}

/* Final-pass: COI box + frame box links, see-also list items */
@media (max-width: 600px) {
  .coi-box a,
  .frame-box a {
    display: inline-block;
    padding: 0.25rem 0;
    line-height: 1.4;
    min-height: 28px;
  }
  /* See-also list items: bump to 32px+ */
  .see-also-list li a {
    padding: 0.4rem 0;
    min-height: 36px;
  }
}

/* See-also meta paragraph links — bump tap target on mobile */
@media (max-width: 600px) {
  .see-also-meta a {
    display: inline-block;
    padding: 0.25rem 0;
    line-height: 1.4;
    min-height: 28px;
  }
}

/* Homepage hero callout primary links: bump tap target on mobile */
@media (max-width: 600px) {
  .hero-callout-links a,
  .reading-guide-links a,
  .deflection-callout-body a {
    display: inline-block;
    padding: 0.4rem 0;
    line-height: 1.4;
    min-height: 32px;
  }
}

/* ============================================
   SHARE BAR — visible share affordances
   No third-party widget code; plain anchor tags + tiny clipboard JS.
   ============================================ */

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
  margin: 2rem 0 1rem;
  padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--muted);
}

.share-bar-label {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--bronze);
  margin-right: 0.4rem;
}

.share-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  /* Tap-target floor */
  min-height: 36px;
}

.share-link:hover,
.share-link:focus {
  border-color: var(--bronze);
  color: var(--bronze);
  outline: none;
}

.share-link svg {
  flex-shrink: 0;
  display: block;
}

.share-feedback {
  font-size: 0.82rem;
  color: var(--bronze);
  font-weight: 500;
  margin-left: 0.3rem;
  /* Reserve space so the layout doesn't shift when feedback appears */
  min-width: 3.5em;
}

/* Mobile: stack tighter, hide some text labels to save horizontal room */
@media (max-width: 600px) {
  .share-bar {
    padding: 0.85rem 0.95rem;
    gap: 0.45rem 0.5rem;
  }
  .share-bar-label {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.1rem;
  }
  .share-link {
    padding: 0.5rem 0.6rem;
    min-height: 36px;
  }
  /* On the smallest phones, drop the text labels and keep just icons for X/LinkedIn/Email/system,
     but keep "Copy link" labelled because it's the most-used and ambiguous-as-icon-only */
  @media (max-width: 380px) {
    .share-link:not(.share-copy) .share-text {
      position: absolute;
      width: 1px; height: 1px; padding: 0;
      margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap;
      border: 0;
    }
  }
}

/* Print: hide share bar */
@media print {
  .share-bar { display: none; }
}

/* Share-bar privacy note — small, unobtrusive line below the share buttons */
.share-privacy-note {
  width: 100%;
  margin: 0.6rem 0 0 0;
  padding: 0.4rem 0 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  border-top: 1px dotted var(--rule);
}
.share-privacy-note a {
  color: var(--bronze);
  text-decoration: none;
}
.share-privacy-note a:hover,
.share-privacy-note a:focus {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .share-privacy-note {
    font-size: 0.76rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
  }
}

/* ============================================
   Homepage secondary featured slot — for the alternative entry point
   that sits between the lead piece and the rest of the article list.
   ============================================ */

.article-list-secondary {
  background: var(--paper);
  border-left: 3px solid var(--bronze);
  padding: 1rem 1.2rem 1.1rem 1.2rem;
  margin: 0.5rem 0 1.5rem 0;
  border-radius: 0 4px 4px 0;
  list-style: none;
}
.article-list-secondary .secondary-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.35rem 0;
}
.article-list-secondary .meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.article-list-secondary h2 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 0.4rem 0;
  font-family: 'EB Garamond', serif;
  font-weight: 600;
}
.article-list-secondary h2 a {
  color: var(--ink);
  text-decoration: none;
}
.article-list-secondary h2 a:hover,
.article-list-secondary h2 a:focus {
  color: var(--bronze);
}
.article-list-secondary .stand {
  font-size: 0.95rem;
  margin: 0 0 0.6rem 0;
  color: var(--ink);
  line-height: 1.5;
}
.article-list-secondary .read {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bronze);
  text-decoration: none;
}
.article-list-secondary .read:hover,
.article-list-secondary .read:focus {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .article-list-secondary {
    padding: 0.85rem 1rem;
  }
  .article-list-secondary h2 {
    font-size: 1.05rem;
  }
  .article-list-secondary .stand {
    font-size: 0.92rem;
  }
}

/* ============================================
   PROJECT CALLOUT — the seven-sites disclosure panel on the homepage.
   Sits between the IHT hero callout and the reading-guide callout.
   Does what it says: names the six other sites, states the why concisely,
   and links to the about-page deeper version.
   ============================================ */

.project-callout {
  margin: 2.5rem 0 2.5rem 0;
  padding: 1.6rem 1.7rem 1.4rem 1.7rem;
  background: #f7f3ec;
  border: 1px solid #c9c0b0;
  border-left: 4px solid var(--bronze);
  border-radius: 0 4px 4px 0;
}

.project-callout-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.55rem 0;
}

.project-callout-title {
  font-family: 'EB Garamond', serif;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.85rem 0;
}

.project-callout-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.85rem 0;
}

.project-callout-body--quiet {
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}

.project-sites-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .project-sites-list {
    grid-template-columns: 1fr 1fr;
  }
  .project-sites-list-item--featured {
    grid-column: 1 / -1;
  }
}

.project-sites-list-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 0;
  padding: 0;
  transition: border-color 0.12s, transform 0.12s;
}

.project-sites-list-item:hover,
.project-sites-list-item:focus-within {
  border-color: var(--bronze);
}

.project-sites-list-item--featured {
  background: linear-gradient(135deg, #ede5d3 0%, #f4efe6 100%);
  border-color: var(--bronze);
}

.project-sites-list-item a {
  display: block;
  padding: 0.95rem 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.project-site-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin-bottom: 0.3rem;
}

.project-site-title {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.project-sites-list-item a:hover .project-site-title,
.project-sites-list-item a:focus .project-site-title {
  color: var(--bronze);
}

.project-site-desc {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink);
}

.project-callout-links {
  margin: 0.9rem 0 0 0;
  padding-top: 0.85rem;
  border-top: 1px dotted var(--rule);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
}

.project-callout-links a {
  color: var(--bronze);
  text-decoration: none;
}

.project-callout-links a:hover,
.project-callout-links a:focus {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .project-callout {
    margin: 2rem 0 2rem 0;
    padding: 1.2rem 1.1rem 1.1rem 1.1rem;
  }
  .project-callout-title {
    font-size: 1.25rem;
  }
  .project-callout-body {
    font-size: 0.98rem;
  }
  .project-callout-body--quiet {
    font-size: 0.9rem;
  }
  .project-site-title {
    font-size: 1.1rem;
  }
  .project-site-desc {
    font-size: 0.93rem;
  }
}

/* ============================================
   FINAL OPTIMIZATION PASS — additional mobile fixes from comprehensive
   responsive testing. Each block named so a future maintainer can find it.
   ============================================ */

/* Mobile tables: any wide table inside article-body becomes horizontally scrollable
   on narrow viewports rather than overflowing the page. Standard pattern.  */
@media (max-width: 720px) {
  .article-body table,
  main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
    /* A subtle hint that the table scrolls */
    border: 1px solid var(--rule);
  }
  /* But keep cells readable inside the scroll container */
  .article-body table td,
  .article-body table th,
  main table td,
  main table th {
    white-space: normal;
    min-width: 110px;
  }
}

/* Share-privacy-note link: bump from 14px to ≥32px */
@media (max-width: 600px) {
  .share-privacy-note a {
    display: inline-block;
    padding: 0.4rem 0;
    line-height: 1.4;
    min-height: 32px;
  }
}

/* AI fan-out page: bullet-list links inside the article body.
   Same applies to sources-page reference links. */
@media (max-width: 600px) {
  .article-body ul li > a:only-child,
  main article ul li > a:only-child {
    display: inline-block;
    padding: 0.35rem 0;
    line-height: 1.5;
    min-height: 32px;
  }
  /* When the link is mostly the entire LI text content, give the LI itself
     more vertical space so the tap area is generous. */
  .article-body ul li,
  main article ul li {
    padding: 0.15rem 0;
  }
}

/* Homepage article-list h2 headings — when the heading is a clickable article title,
   bump its line-height on mobile so the tap target meets the floor. */
@media (max-width: 600px) {
  .article-list li > h2 a {
    display: inline-block;
    padding: 0.25rem 0;
    line-height: 1.35;
  }
  /* And make sure the secondary-slot heading does the same */
  .article-list-secondary h2 a {
    display: inline-block;
    padding: 0.25rem 0;
    line-height: 1.35;
  }
}

/* COI box link — bumped earlier to 28px; make sure the touch target is ≥32px on mobile */
@media (max-width: 600px) {
  .coi-box a {
    display: inline-block;
    padding: 0.35rem 0;
    line-height: 1.5;
    min-height: 32px;
  }
}

/* See-also-meta links: bump from 28px to 32px floor */
@media (max-width: 600px) {
  .see-also-meta a {
    display: inline-block;
    padding: 0.4rem 0;
    line-height: 1.5;
    min-height: 32px;
  }
}

/* Article-list h2 link — give the secondary heading slightly more padding so 31px → 32+ */
@media (max-width: 600px) {
  .article-list-secondary h2 a,
  .article-list li > h2 a {
    padding: 0.3rem 0;
    line-height: 1.4;
    min-height: 32px;
  }
}

/* Homepage callout CTA links: bump tap target on mobile */
@media (max-width: 600px) {
  .contribution-callout-links a,
  .critique-callout-links a,
  .production-callout-links a,
  .deflection-callout-body a,
  .reading-guide-links a,
  .project-callout-links a {
    display: inline-block;
    padding: 0.4rem 0;
    line-height: 1.5;
    min-height: 32px;
  }
}

/* Cookie banner "More info" link bump */
@media (max-width: 600px) {
  #tll-cookie-banner a {
    display: inline-block;
    padding: 0.35rem 0.4rem;
    line-height: 1.4;
    min-height: 32px;
  }
}

/* Print stylesheet additions: hide UI chrome that doesn't make sense on paper */
@media print {
  /* Cookie banner is meaningless on a printed page */
  #tll-cookie-banner { display: none !important; }
  /* AI-warning content is informationally important — keep it visible —
     but hide the inline links inside it which are useless on paper. */
  .ai-warning-strip a { display: none !important; }
  /* Hide share-privacy note on print */
  .share-privacy-note { display: none !important; }
  /* Project-callout panel: keep visible but quieter on print */
  .project-callout {
    background: none;
    border-left: 2px solid #999;
    page-break-inside: avoid;
  }
}

/* Group heading inside project-callout — for the trilogy/bear books/names structure */
.project-callout .project-group-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 1.4rem 0 0.7rem 0;
  padding-top: 0.7rem;
  border-top: 1px dotted var(--rule);
}
.project-callout .project-group-heading:first-of-type {
  margin-top: 0.6rem;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 600px) {
  .project-callout .project-group-heading {
    font-size: 0.74rem;
    margin: 1.1rem 0 0.55rem 0;
  }
}

/* Group label inside also-by sidebar */
.also-by-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 1.4rem 0 0.5rem 0;
  padding-top: 0.7rem;
  border-top: 1px dotted var(--rule);
}
.also-by-group-label:first-of-type {
  margin-top: 0.6rem;
  padding-top: 0;
  border-top: none;
}

/* ============================================
   ARTICLE AUTHOR NOTE — per-piece AI disclosure
   ============================================ */
.article-author-note {
  background: #f5f1e8;
  border-left: 4px solid var(--bronze);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0 2rem 0;
  font-size: 0.96rem;
  line-height: 1.55;
}
.article-author-note-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.5rem 0;
}
.article-author-note p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .article-author-note {
    padding: 1rem 1.1rem;
    font-size: 0.92rem;
  }
}

/* ============================================
   ARTICLE TABLE OF CONTENTS — for long pieces
   ============================================ */
.article-toc {
  background: #fafafa;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0 2.5rem 0;
}
.article-toc-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.7rem 0;
}
.article-toc-list {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}
.article-toc-list li {
  margin: 0.35rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.4;
}
.article-toc-list li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.article-toc-list li a:hover {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}
@media (max-width: 600px) {
  .article-toc {
    padding: 1rem 1.2rem;
  }
  .article-toc-list li {
    font-size: 0.96rem;
    margin: 0.4rem 0;
  }
}

/* Part heading — top-level h2 used for TOC anchors in long-form pieces */
main article h2.part-heading {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 3rem 0 1.2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  scroll-margin-top: 2rem;
}
main article h2.part-heading:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1.5rem;
}
@media (max-width: 600px) {
  main article h2.part-heading {
    font-size: 1.4rem;
    margin: 2.2rem 0 1rem 0;
  }
}

/* ============================================
   ARTICLE TABLE OF CONTENTS — for long pieces
   ============================================ */
.article-toc {
  background: #fafafa;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0 2.5rem 0;
}
.article-toc-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.7rem 0;
}
.article-toc-list {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}
.article-toc-list li {
  margin: 0.35rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.4;
}
.article-toc-list li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.article-toc-list li a:hover {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}
@media (max-width: 600px) {
  .article-toc {
    padding: 1rem 1.2rem;
  }
  .article-toc-list li {
    font-size: 0.96rem;
    margin: 0.4rem 0;
  }
}

/* Part heading — top-level h2 inside long-form articles, used for TOC anchors */
main article h2.part-heading {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 3rem 0 1.2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  scroll-margin-top: 2rem;
}
main article h2.part-heading:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1.5rem;
}
@media (max-width: 600px) {
  main article h2.part-heading {
    font-size: 1.4rem;
    margin: 2.2rem 0 1rem 0;
  }
}

/* Article body H3/H4 styling tightened for the long-form pieces */
main article h3 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 0.8rem 0;
  color: var(--ink);
  scroll-margin-top: 2rem;
}
main article h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 1.6rem 0 0.7rem 0;
  color: var(--ink);
}
main article h5 {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 1.2rem 0 0.5rem 0;
  color: var(--muted);
  text-transform: none;
}

/* ============================================
   OTHER QUESTIONS — homepage section
   ============================================ */
.article-list-heading--other-questions {
  margin-top: 4rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.other-questions-lead {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 1.5rem 0;
  font-style: italic;
}
.other-questions-byline {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--bronze);
  font-weight: 600;
}

/* ============================================
   ARTICLE CHANGELOG — per-article editorial history
   ============================================ */
.article-changelog {
  margin: 2.5rem 0 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #fafafa;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.94rem;
  line-height: 1.55;
}
.changelog-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bronze);
  margin: 0 0 0.5rem 0;
}
.changelog-meta {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 1rem 0;
}
.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--bronze);
}
.changelog-list li {
  padding: 0.55rem 0 0.55rem 1rem;
  margin: 0;
  border-bottom: 1px solid #ebe6da;
}
.changelog-list li:last-child {
  border-bottom: none;
}
.changelog-date {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.changelog-note {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--ink);
}
@media (max-width: 600px) {
  .article-changelog {
    padding: 1rem 1.1rem;
    font-size: 0.9rem;
  }
}

/* ============================================
   Side-door note
   Appears at the foot of every article. Frames the publication's
   role in the larger seven-site project. One paragraph, quiet style.
   ============================================ */

.side-door-note {
  margin: 2.5rem 0 2rem 0;
  padding: 1.4rem 1.6rem;
  background: #fafaf6;
  border-left: 3px solid #c4b896;
  border-radius: 0 4px 4px 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #3c3a30;
}

.side-door-note p {
  margin: 0;
}

.side-door-note em {
  font-style: italic;
  color: #2c2a20;
}

.side-door-note a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.3);
}

.side-door-note a:hover {
  border-bottom-color: var(--bronze);
}

@media (max-width: 600px) {
  .side-door-note {
    padding: 1.1rem 1.2rem;
    font-size: 0.9rem;
    margin: 2rem 0 1.5rem 0;
  }
}

/* ============================================
   All-articles homepage link and side-door archive link
   Both surface the archive page so readers can navigate to any piece.
   ============================================ */

.all-articles-link {
  margin: 2.5rem 0 2rem 0;
  padding: 1rem 1.2rem;
  background: #fafaf6;
  border-left: 3px solid #c4b896;
  border-radius: 0 4px 4px 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #3c3a30;
}

.all-articles-link a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.3);
}

.all-articles-link a:hover {
  border-bottom-color: var(--bronze);
}

.side-door-note-archive {
  margin: 0.9rem 0 0 0 !important;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(168, 32, 26, 0.25);
  font-size: 0.94rem;
}

@media (max-width: 600px) {
  .all-articles-link {
    padding: 0.9rem 1rem;
    font-size: 0.92rem;
  }
}

/* ============================================
   Side-door grouped list of the six other sites
   Three small column-groups (trilogy / bears / names)
   that stack on mobile.
   ============================================ */

.side-door-other-sites {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.4rem 1.8rem;
  margin: 1.2rem 0 0.4rem 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(168, 32, 26, 0.25);
}

.side-door-group {
  min-width: 0;
}

.side-door-group-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

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

.side-door-list li {
  margin: 0;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #4a4838;
}

.side-door-list a {
  color: #2c2a20;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.25);
}

.side-door-list a:hover {
  border-bottom-color: var(--bronze);
}

@media (max-width: 700px) {
  .side-door-other-sites {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

/* ============================================
   Translation infrastructure
   AI-translation disclosure, language switcher, back-link panel.
   ============================================ */

.ai-translation-disclosure {
  background: #f8f4ed;
  border-left: 3px solid #c4b896;
  padding: 1rem 1.2rem;
  margin: 0 0 2rem 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3c3a30;
}
.ai-translation-disclosure p { margin: 0; }
.ai-translation-disclosure a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.3);
}
.ai-translation-disclosure a:hover { border-bottom-color: var(--bronze); }

.translated-page-frame {
  margin: 0 0 1.5rem 0;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: #6b6750;
  border-bottom: 1px dotted rgba(168, 32, 26, 0.25);
}
.translated-page-frame a {
  color: var(--bronze);
  text-decoration: none;
}
.translated-page-frame a:hover { text-decoration: underline; }

.language-switcher {
  margin: 2rem 0;
  padding: 1rem 1.2rem;
  background: #fafaf6;
  border-left: 3px solid #c4b896;
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #3c3a30;
}
.lang-switcher-label {
  font-weight: 600;
  margin-right: 0.6rem;
  color: #6b6750;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lang-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.lang-switcher-list li {
  display: inline;
  margin: 0;
  padding: 0;
}
.lang-switcher-list li:not(:last-child)::after {
  content: " · ";
  color: #c4b896;
}
.lang-switcher-list a {
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.25);
}
.lang-switcher-list a:hover { border-bottom-color: var(--bronze); }
.lang-switcher-list li.current a {
  color: #2c2a20;
  border-bottom: none;
  font-weight: 600;
}

/* ============================================
   Homepage navigation block
   The "More on this site" structured nav and "The larger project" side-door
   ============================================ */

.home-nav,
.home-side-door {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid #d4cfbf;
}

.home-nav-heading {
  font-family: 'EB Garamond', serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ink, var(--ink));
  margin: 0 0 1.8rem 0;
  letter-spacing: -0.01em;
}

.home-nav-grid,
.home-side-door-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
}

.home-nav-group-heading,
.home-side-door-group-heading {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6750;
  margin: 0 0 0.9rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted #c4b896;
}

.home-nav-list,
.home-side-door-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-nav-list li,
.home-side-door-list li {
  margin: 0 0 0.85rem 0;
  padding: 0;
  font-family: 'EB Garamond', serif;
  font-size: 1.04rem;
  line-height: 1.5;
  color: #2c2a20;
}

.home-nav-list a,
.home-side-door-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 23, 26, 0.18);
}

.home-nav-list a:hover,
.home-side-door-list a:hover {
  border-bottom-color: var(--ink);
}

.home-nav-list a strong,
.home-side-door-list a strong {
  font-weight: 600;
}

.home-side-door-lead {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #3c3a30;
  margin: 0 0 2rem 0;
  max-width: 56ch;
}

.home-side-door-lead em {
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 700px) {
  .home-nav-grid,
  .home-side-door-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .home-nav-heading {
    font-size: 1.35rem;
  }
}

/* ============================================
   Tags, search, article meta-bar
   ============================================ */

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 1.5rem 0;
}

.article-tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.article-tag:hover,
.article-tag:focus {
  background: var(--bronze);
  color: #fff;
  border-color: var(--bronze);
}

.article-tag--large {
  font-size: 0.92rem;
  padding: 0.45rem 1rem;
  margin-bottom: 0.4rem;
}

.article-tag-count {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.article-tag--large:hover .article-tag-count,
.article-tag--large:focus .article-tag-count {
  color: rgba(255,255,255,0.9);
}

.article-meta-bar {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.6rem 0 1rem 0;
  text-transform: uppercase;
}

/* Search page */
.search-box-wrap {
  margin: 1.5rem 0 2rem 0;
}

.search-input {
  width: 100%;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.15rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  outline: none;
}

.search-input:focus {
  border-color: var(--bronze);
}

.search-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.7rem;
}

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

.search-result {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.search-result h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

.search-result h2 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 32, 26, 0.2);
}

.search-result h2 a:hover {
  border-bottom-color: var(--bronze);
}

.search-result-stand {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--body-soft);
  margin: 0 0 0.5rem 0;
}

.search-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.search-result-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.search-no-results {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--muted);
  padding: 1rem 0;
}

mark {
  background: rgba(168, 32, 26, 0.12);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================
   Category-page tag filter chips
   Lets readers narrow a category without leaving the page.
   ============================================ */

.category-filter {
  margin: 1.5rem 0 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bronze);
  border-radius: 2px;
}

.category-filter-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.7rem 0;
}

.category-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.category-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.category-filter-chip:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}

.category-filter-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.category-filter-chip.is-active .category-filter-count {
  color: rgba(255,255,255,0.7);
}

.category-filter-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.category-filter-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.7rem 0 0 0;
}

/* See-all link at end of homepage category sections */
.article-list-see-all {
  margin: 1.5rem 0 2.5rem 0;
  padding: 0.7rem 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.article-list-see-all a {
  color: var(--bronze);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.article-list-see-all a:hover {
  color: var(--bronze-soft);
  text-decoration: underline;
}

/* ============================================
   Sticky header stack
   The cross-site bar, masthead, nav rows, and warning strip stick to the
   top of the viewport as the reader scrolls. Locked in place so a reader
   can navigate from any scroll position.
   ============================================ */

.header-stack {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  flex-shrink: 0;
  /* Subtle shadow appears once the stack lifts off the page top. The
     shadow sits below the stack to imply it's hovering over the content. */
  box-shadow: 0 2px 8px rgba(21, 23, 26, 0.06);
}

/* Homepage variant: same sticky behaviour as article pages — full stack
   pinned, with the lift-off shadow. (Previously the homepage only stuck
   the cross-site bar; now the whole compact masthead sticks too.) */
.header-stack--home {
  /* Same shadow as the default header-stack — keeps the visual treatment
     consistent across the site. */
}

/* Ensure the dropdown panel ("More ▾" overflow) sits above the page
   content even when the stack is sticky. */
.header-stack .masthead-more-panel {
  z-index: 101;
}

/* ============================================
   Mobile sticky header collapse
   On viewports under 900px, keep the header-stack sticky but reduce its
   contents to just the wordmark + hamburger toggle. The cross-site bar,
   secondary nav, and AI-warning strip are hidden on mobile to reclaim
   screen real estate. The cross-site project-discovery is duplicated in
   the project-callout block in the homepage body, so nothing is lost.
   ============================================ */
@media (max-width: 900px) {
  /* Hide the cross-site bar inside the sticky stack on mobile.
     It's a horizontal row of seven sister-site links; on a 380px viewport
     it wraps to multiple lines and consumes 90+ pixels for navigation
     to other sites. The project-callout in the homepage body already
     contains all seven sites in a richer mobile-friendly format. */
  .header-stack .site-bar,
  .header-stack--home .site-bar {
    display: none;
  }

  /* Hide the AI-warning strip from the sticky stack on mobile — it's
     a 3-line wrap on small viewports. The same disclosure appears in
     the footer of every page. */
  .header-stack .ai-warning-strip,
  .header-stack--home .ai-warning-strip {
    display: none;
  }

  /* Hide the secondary nav row from the sticky stack on mobile.
     The hamburger menu (which appears in the wordmark row) opens an
     overlay containing both primary and secondary nav, so reachability
     is preserved. */
  .header-stack .masthead-nav-secondary,
  .header-stack--home .home-masthead-nav-secondary {
    display: none;
  }
}



/* ================================================================
   Page-wide layout grid — main content + Also-by-Doug-Scott sidebar
   on every non-homepage page. Mirrors the homepage's home-layout grid:
   left column for content, right column for the seven sister sites.
   Same content as home-sidebar; same visual treatment so the right
   column looks identical site-wide.
   ================================================================ */

/* Mobile / single-column default */
.page-layout {
  display: block;
}
.page-content {
  display: block;
  min-width: 0;
}
.page-sidebar {
  display: none;  /* Hidden on mobile; shows on desktop */
}

/* Tablet/desktop activates the grid */
@media (min-width: 960px) {
  .page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter-lg);
  }
  .page-content {
    min-width: 0;
  }
  .page-sidebar {
    display: block;
    position: sticky;
    top: 1.5rem;
    margin: 2.25rem 0 0 0;
    padding: 1.1rem 1.1rem 1.25rem 1.5rem;
    background: transparent;
    border: none;
    border-left: 1px solid var(--rule);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  .page-sidebar::-webkit-scrollbar { width: 6px; }
  .page-sidebar::-webkit-scrollbar-thumb {
    background: rgba(124, 90, 50, 0.15);
    border-radius: 3px;
  }
}

@media (min-width: 1100px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
  }
}

/* Apply the same eyebrow/card styling to .page-sidebar as .home-sidebar.
   Re-target every existing .home-sidebar rule with .page-sidebar so the
   two sidebars are visually identical. */
.page-sidebar .also-by-eyebrow {
  margin: 0 0 0.5rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--news-red);
}
.page-sidebar .also-by-lead-mini {
  margin: 0 0 1.25rem 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}
.page-sidebar .also-by-group-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--news-red);
  margin: 1.4rem 0 0.6rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--rule);
}
.page-sidebar .also-by-card {
  display: block;
  padding: 0.7rem 0.75rem 0.85rem 0.75rem;
  margin: 0 0 0.6rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.page-sidebar .also-by-card:hover,
.page-sidebar .also-by-card:focus {
  background: var(--cream-soft);
  border-color: var(--bronze);
}
.page-sidebar .also-by-card-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-red);
  margin-bottom: 0.25rem;
}
.page-sidebar .also-by-card-title {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.page-sidebar .also-by-card-desc {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}
.page-sidebar .also-by-card--featured {
  border-color: var(--news-red);
  border-left-width: 3px;
}

/* ================================================================
   Article-list chips — tag chips on each article card. Smaller and
   lighter than the article-page tags so they don't compete with the
   title or standfirst. Sit between the standfirst and the "Read the
   article →" call-to-action.
   ================================================================ */
.article-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.7rem 0 0.6rem 0;
}
.article-list-chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.article-list-chip:hover,
.article-list-chip:focus {
  color: var(--bronze);
  border-color: var(--bronze);
}

/* ================================================================
   Breadcrumbs — Home › Category › Article. Sits just inside the
   article container, above the date eyebrow. Lets a reader see
   where they are and click up one level.
   ================================================================ */
.breadcrumbs {
  display: block;
  margin: 0 0 1.5rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}
.breadcrumbs-sep {
  margin: 0 0.45rem;
  color: var(--rule);
}
.breadcrumbs-current {
  color: var(--ink-soft);
  /* Keep the current-page label readable but not dominant */
  font-weight: 500;
}

/* On narrow screens, breadcrumbs can wrap awkwardly with a long article
   title. Truncate the current-page label on mobile and let it breathe. */
@media (max-width: 600px) {
  .breadcrumbs {
    text-align: left;
    font-size: 0.75rem;
  }
  .breadcrumbs-current {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* ==========================================================================
   Inline article images (added build 132)
   ========================================================================== */
.article-image {
  margin: 2.5rem 0 2rem;
  text-align: center;
}
.article-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.article-image figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #6a6a5e;
  font-style: italic;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.article-image figcaption .credit {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  font-size: 0.75rem;
  color: #8a8a7e;
}
.article-image figcaption .credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(138, 138, 126, 0.4);
}
.article-image figcaption .credit a:hover {
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Topical article marks (small SVGs placed between paragraphs for visual rest)
   Same visual language as the masthead horizon mark.
   ========================================================================== */
.article-mark {
  display: block;
  margin: 2.5rem auto;
  max-width: 200px;
  width: 100%;
  height: auto;
  opacity: 0.95;
}
@media (max-width: 600px) {
  .article-mark { max-width: 160px; margin: 2rem auto; }
}

/* Byline "Updated" stamp (build 133) */
.byline-updated {
  color: var(--bronze, #8C6B3F);
  font-style: italic;
}