/* Navbar: always visible, opaque, and clearly a bar (fixed over the banner on
   the homepage, sticky in normal flow on interior pages). */
.navbar.fixed-top,
.navbar.sticky-top {
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.navbar a.navbar-brand {
  color: #212529;
}

.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
  color: #311206;
  text-decoration: underline;
}

/* Site title stands in for the banner in the menu bar on interior pages, so it
   speaks the same serif voice as the hero heading. */
.navbar .navbar-site-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  padding-left: 1rem;
}

/* Content images (e.g. blog posts) never overflow their column. */
img {
  max-width: 100%;
  height: auto;
}

/* Tag filter pills on the homepage strip (topic + era rows).
   Idle pill text is #FFF3E4 (near-white) rather than the sand #FCC27B used
   elsewhere: sand-on-rust is only ~3.5:1, below the WCAG AA 4.5:1 text
   minimum; #FFF3E4 on the same #A84B11 band measures ~5.2:1. The border
   keeps the sand tone since a 3px hairline isn't held to the text ratio. */
.filter-group .filter-pill {
  color: #FFF3E4;
  border: 1px solid #FCC27B;
  background-color: transparent;
  margin: 0 0.15rem 0.5rem;
}

.filter-group .filter-pill:hover,
.filter-group .filter-pill:focus {
  background-color: rgba(252, 194, 123, 0.18);
  color: #FFF3E4;
  text-decoration: none;
}

.filter-group .filter-pill.active,
.filter-group .filter-pill.active:hover,
.filter-group .filter-pill.active:focus {
  background-color: #FCC27B;
  border-color: #FCC27B;
  color: #311206;
}

/* Start Here reads as the curated entry point: filled, a touch bolder. */
.filter-group .filter-pill-start {
  background-color: rgba(252, 194, 123, 0.18);
  font-weight: 600;
}

.filter-group .filter-count {
  font-size: 0.75em;
  /* No opacity reduction: it inherits the pill's #FFF3E4 text color, which
     already meets 4.5:1 on the rust band; fading it further would drop it
     back below AA. */
}

/* Era pills with no matches under the current topic are removed from the row. */
.filter-group .pill-hidden {
  display: none;
}

/* "Era:" label sits inline with its pill row. */
.filter-era-label {
  color: #FCC27B;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.8;
  vertical-align: middle;
}

/* Navbar search: compact input with a card-style results dropdown. */
#site-search {
  max-width: 220px;
}

#site-search .search-results {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.35rem;
  width: 320px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  background-color: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1040;
  text-align: left;
}

#site-search .search-result {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #212529;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

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

#site-search .search-result:hover,
#site-search .search-result.active {
  background-color: #e9ecef;
}

#site-search .search-result-title {
  display: inline;
  font-weight: 600;
  font-size: 0.9rem;
}

#site-search .search-result-badge {
  background-color: #4B686E;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: capitalize;
  vertical-align: middle;
  margin-left: 0.35rem;
}

#site-search .search-result-authors {
  display: block;
  font-size: 0.8rem;
}

#site-search .search-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Homepage banner: keep the title clear of the fixed navbar. */
.bg .jumbotron {
  padding-top: 72px;
}

/* Banner contrast: dark title with a light halo against the photo. */
.jumbotron {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.6);
}

.jumbotron h1,
.jumbotron .h1 {
  color: #1a1206;
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

a.resp-sharing-button__link:hover {
    color: #fff;
}

.resp-sharing-button {
  font-size: 10px;
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--x {
  background-color: #000;
  border-color: #000;
}

.resp-sharing-button--x:hover,
.resp-sharing-button--x:active {
  background-color: #2f2f2f;
  border-color: #2f2f2f;
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

/* Flannelgraph figures (felt shortcode): centered, rounded, with a quiet caption */
.felt-figure {
  margin: 1.6rem auto;
  text-align: center;
}

.felt-figure img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.felt-figure figcaption {
  font-size: 0.85em;
  font-style: italic;
  color: #6c757d;
  text-align: center;
  margin-top: 0.5em;
}

/* ==========================================================================
   Reading design language
   --------------------------------------------------------------------------
   One system for the whole site: Vollkorn (already loaded in <head>) is the
   voice for titles and long-form prose; Montserrat stays the voice for the
   interface (nav, search, buttons, filter pills, meta labels). Built on the
   existing palette — brown #311206, rust #A84B11, slate #4B686E, sand #FCC27B.

   Shared building blocks:
     .prose          long-form article body (blog posts + library entries)
     .reading-title  serif display heading (library entry titles)
   The blog's landing/pager layout keeps its .notebook-* classes but draws
   from the same variables below, so nothing drifts.
   ========================================================================== */
:root {
  --serif: "Vollkorn", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --nb-ink: #311206;    /* primary brown — titles */
  --nb-body: #2b2521;   /* warm near-black — prose */
  --nb-rust: #a84b11;   /* accent — rules, "continue reading" */
  --nb-slate: #4b686e;  /* meta and links */
  --nb-hair: rgba(49, 18, 6, 0.12); /* warm hairline dividers */
}

/* Site hero title in the reading serif, so the most prominent heading on the
   site speaks the same voice as the article titles. */
.jumbotron h1,
.jumbotron .h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Shared serif display title (library entry pages) ---- */
.reading-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  margin-bottom: 0.75rem;
}

.reading-title a {
  color: var(--nb-ink);
  text-decoration: none;
}

.reading-title a:hover,
.reading-title a:focus {
  color: var(--nb-rust);
  text-decoration: none;
}

/* ---- Topic chips (library entry pages) ---- */
.reading-tags {
  margin: -0.25rem 0 1rem;
}

.tag-chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nb-slate);
  border: 1px solid var(--nb-hair);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  margin: 0 0.35rem 0.35rem 0;
  text-decoration: none;
}

.tag-chip:hover,
.tag-chip:focus {
  background-color: rgba(75, 104, 110, 0.1);
  color: var(--nb-slate);
  text-decoration: none;
}

/* ---- Landing masthead (blog) ---- */
.notebook-masthead {
  margin-bottom: 2.75rem;
}

.notebook-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  margin-bottom: 0.5rem;
}

.notebook-lede {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--nb-slate);
  margin-bottom: 1rem;
}

.notebook-rule {
  display: block;
  width: 3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--nb-rust);
}

/* ---- Shared meta line ---- */
.notebook-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nb-slate);
  margin-bottom: 0.4rem;
}

.notebook-meta .notebook-dot {
  margin: 0 0.5rem;
  opacity: 0.6;
}

/* ---- Post list ---- */
.notebook-entry {
  padding: 2rem 0;
  border-bottom: 1px solid var(--nb-hair);
}

.notebook-entry:first-child {
  padding-top: 0.5rem;
}

.notebook-entry:last-child {
  border-bottom: none;
}

.notebook-entry-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: 0.55rem;
}

.notebook-entry-title a {
  color: var(--nb-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

.notebook-entry-title a:hover,
.notebook-entry-title a:focus {
  color: var(--nb-rust);
  text-decoration: none;
}

.notebook-excerpt {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--nb-body);
  margin-bottom: 0.85rem;
}

.notebook-more {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb-rust);
  text-decoration: none;
}

.notebook-more span {
  display: inline-block;
  transition: transform 0.15s ease;
}

.notebook-more:hover,
.notebook-more:focus {
  color: var(--nb-rust);
  text-decoration: none;
}

.notebook-more:hover span,
.notebook-more:focus span {
  transform: translateX(0.25rem);
}

/* ---- Article page ---- */
.notebook-back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb-slate);
  text-decoration: none;
  margin-bottom: 2rem;
}

.notebook-back:hover,
.notebook-back:focus {
  color: var(--nb-rust);
  text-decoration: none;
}

.notebook-post-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--nb-hair);
}

.notebook-post-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
  margin-bottom: 0.75rem;
  order: 2;
}

/* Meta above the title reads like a dateline */
.notebook-post-header {
  display: flex;
  flex-direction: column;
}
.notebook-post-header .notebook-meta {
  order: 1;
  margin-bottom: 0.6rem;
}

/* ---- Reading type: the core readability win ---- */
.prose {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.75;
  color: var(--nb-body);
  /* Cap the measure at ~65-68 characters/line (was ~85-90 unconstrained).
     Reading pages wrap this in .reading-col (which centers the whole column);
     this cap still applies on pages that don't, e.g. About. */
  max-width: 38rem;
}

/* One centered reading column: constrain the whole article/post column (back
   link, title, rule, byline, body, sources, pager) to the reading measure and
   center it on the page, so a capped body doesn't sit narrow-and-left under a
   full-width title. Overrides the Bootstrap column offset for this column. */
.reading-col {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.prose p {
  margin-bottom: 1.35rem;
}

/* Quiet lead-in: first paragraph a touch larger */
.prose > p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.7;
}

.prose h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--nb-ink);
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

.prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--nb-ink);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose a {
  color: var(--nb-slate);
  text-decoration: underline;
  text-decoration-color: rgba(75, 104, 110, 0.4);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.prose a:hover,
.prose a:focus {
  color: var(--nb-rust);
  text-decoration-color: var(--nb-rust);
}

.prose blockquote {
  font-size: 1.18rem;
  line-height: 1.6;
}

.prose ul,
.prose ol {
  margin-bottom: 1.35rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

/* ---- Prev / next pager ---- */
.notebook-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--nb-hair);
  padding-top: 1.75rem;
  margin-top: 3.5rem;
  margin-bottom: 2rem;
}

.notebook-pager-item {
  flex: 1;
}

.notebook-pager-next {
  text-align: right;
}

.notebook-pager-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nb-slate);
  margin-bottom: 0.25rem;
}

.notebook-pager a {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--nb-ink);
  text-decoration: none;
}

.notebook-pager a:hover,
.notebook-pager a:focus {
  color: var(--nb-rust);
  text-decoration: none;
}

/* ==========================================================================
   Library card grid: consistent cover frame
   --------------------------------------------------------------------------
   Real book covers vary in native size, and a couple of entries previously
   showed a full-bleed logo/monogram instead of a cover. Any cover that IS
   shown (see the decorative_image front-matter flag, which suppresses the
   image entirely for those entries) now sits in a fixed-height frame so the
   masonry grid stays even instead of one card ballooning to several times
   its neighbors' height.
   ========================================================================== */
.card-img-bottom {
  height: 220px;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ==========================================================================
   Light-touch accent hierarchy (optional, reversible)
   --------------------------------------------------------------------------
   The rust band, sand pills, and teal card stripe all sit at full strength
   today. These two rules are a conservative pass at hierarchy — they don't
   change any hue, and either can be deleted independently to fall back to
   the prior look.
   ========================================================================== */

/* Card-top teal stripe: a quieter accent (thinner, slightly translucent)
   instead of a bulky solid block, so it reads as a hairline detail rather
   than competing with the rust band and sand pills. Same teal hue throughout. */
.card > .card-header.bg-info {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  background-color: rgba(75, 104, 110, 0.65) !important;
}

/* ==========================================================================
   Reading + touch-target accessibility fixes
   --------------------------------------------------------------------------
   Overrides for rules that originate in static/scss/_custom.scss (compiled
   into bootstrap.css, which loads before this file) or in templates whose
   markup we're leaving alone.
   ========================================================================== */

/* Justified text creates uneven word-spacing "rivers" without hyphenation.
   blockquote and .intro are set text-align:justify in _custom.scss;
   override to ragged-right, which reads more evenly at these widths. */
blockquote,
.intro {
  text-align: left;
}

/* iOS Safari auto-zooms on focus for any input computing under 16px; the
   navbar search input is a form-control-sm (~14px). Bump it to 16px here
   so focusing it doesn't zoom the page, while keeping it visually compact
   via its existing padding/height. */
#search-input {
  font-size: 16px;
}

/* Small-screen tap targets: card source links and filter pills are well
   under the ~44px minimum recommended touch target on phones. The <a> in
   each list-group-item is an inline child of a block-level <li>, so the li's
   own padding (list-group-item + py-1) isn't actually part of the clickable
   area — the fix has to size the anchor itself, not just its container. */
@media (max-width: 576px) {
  .card .list-group-item {
    padding: 0;
  }

  .card .list-group-item a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 1rem;
  }

  .filter-group .filter-pill {
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0 0.25rem 0.65rem;
  }
}

/* ==========================================================================
   In-content link affordance + PDF embed framing (polish batch)
   ========================================================================== */

/* Links in the intro card were color-only (no underline), which fails WCAG
   1.4.1 and hides the "suggest other resources" call to action. */
.intro a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Closing signature of the "To the reader" letter. The signed name links to
   waitingtables.org (so it keeps the .intro underline); the dateline sits on
   its own line, upright and muted, with real breathing room above — the old
   inline line-height:1rem crushed the date against the name's underline so it
   read like a strike-through. */
.intro-byline {
  text-align: right;
  font-style: italic;
  margin-top: 1.75rem;
  margin-bottom: 0;
}

.intro-byline-date {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #6c757d;
  margin-top: 0.15rem;
}

/* Result count now rides on the rust band (it used to sit on a white strip
   between the filter band and the grid — a bright bar cutting across the
   rust). Near-white text so it stays legible on #A84B11, matching the pills. */
#results-count {
  color: #FFF3E4;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Entry excerpt: a quotation of the source's own words, labeled and set apart
   (parallel to .entry-summary, our editorial description). Rust accent marks
   it as the source speaking, versus the summary's slate.
   ========================================================================== */
.entry-excerpt {
  background-color: rgba(168, 75, 17, 0.05);
  border-left: 4px solid var(--nb-rust);
  border-radius: 5px;
  padding: 1.25em 1.5em;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.entry-excerpt-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-rust);
  margin-bottom: 0.4em;
}

.entry-excerpt-body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Deacon Training Syllabus (/training/) — draft, unlinked page.
   Reuses the site's reading vocabulary: Vollkorn prose, Montserrat uppercase
   label blocks, rust/teal accents, reading-measure column. All new; nothing
   here changes other pages except the site-wide @media print block at the end.
   ========================================================================== */
.training-shell {
  max-width: 48rem;
}

.training-h1 {
  margin-bottom: 1rem;
}

/* Working-draft banner: teal editorial block, parallel to .entry-summary. */
.training-draft {
  background-color: rgba(75, 104, 110, 0.06);
  border-left: 4px solid #4b686e;
  border-radius: 5px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  max-width: 38rem;
}

.training-draft-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4b686e;
  margin-bottom: 0.3em;
}

.training-draft-body {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--nb-body);
  margin-bottom: 0;
}

.training-draft-body a {
  color: #4b686e;
}

/* Demoted working-draft banner at the foot of the landing page. */
.training-draft-foot {
  margin-top: 2.5rem;
}

/* Center the reading prose to its measure within the wider shell. */
.training-prose {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Course at a glance: week jump pills ---- */
.training-glance-index {
  margin: 2.5rem 0 1rem;
}

.training-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--nb-ink);
  margin-bottom: 1rem;
}

.week-index-block-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin: 1rem 0 0.5rem;
}

.week-index-row {
  margin-bottom: 0.5rem;
}

/* filter-pill base colors are tuned for the rust band; re-tone for the light
   page as slate-on-transparent. Specificity beats the base .filter-group rule. */
.week-index-row.filter-group .filter-pill.week-index-pill {
  color: var(--nb-slate);
  border: 1px solid var(--nb-hair);
  background-color: transparent;
  font-family: var(--sans);
  font-size: 0.8rem;
  margin: 0 0.3rem 0.4rem 0;
}

.week-index-row.filter-group .filter-pill.week-index-pill:hover,
.week-index-row.filter-group .filter-pill.week-index-pill:focus {
  background-color: rgba(75, 104, 110, 0.1);
  color: var(--nb-slate);
  text-decoration: none;
}

.week-index-num {
  font-weight: 700;
  color: var(--nb-rust);
  margin-right: 0.15rem;
}

/* ---- The sixteen weeks ---- */
.training-block-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--nb-ink);
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--nb-rust);
}

.training-week {
  scroll-margin-top: 5rem;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--nb-hair);
}

.training-week-kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.3rem;
}

.training-week-topic {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--nb-ink);
  margin-bottom: 0.6rem;
}

.training-week-summary {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--nb-body);
  margin-bottom: 1.25rem;
}

/* ---- Labeled rows (EXAMINE / CONFESSION / READ / LISTEN / MEMORIZE / ...) ---- */
.training-row {
  margin-bottom: 1.5rem;
}

/* Labels are slate at rest so rust reads as a highlight, not the baseline. */
.training-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.25rem;
}

.training-label-icon {
  font-size: 0.78rem;
  margin-right: 0.15rem;
  color: var(--nb-slate);
}

.training-row-body {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--nb-body);
  margin-bottom: 0;
}

.training-opener {
  font-style: italic;
}

/* Human moments (F): the self-examination question and the cumulative
   recitation line get a quiet rust wash instead of tiny gray meta text. */
.training-row-highlight {
  background: rgba(168, 75, 17, 0.06);
  border-left: 3px solid var(--nb-rust);
  border-radius: 4px;
  padding: 0.85rem 1rem;
}

.training-row-highlight .training-label,
.training-row-highlight .training-label-icon {
  color: var(--nb-rust);
}

.training-cumulative {
  font-family: var(--serif);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--nb-rust);
  background: rgba(168, 75, 17, 0.06);
  border-radius: 4px;
  padding: 0.45rem 0.75rem;
  margin: 0.55rem 0 0;
}

.training-cumulative-icon {
  font-size: 0.8rem;
  margin-right: 0.2rem;
}

.training-note {
  display: inline;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--nb-slate);
}

.training-readings {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.training-readings li {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--nb-body);
  margin-bottom: 0.4rem;
}

.training-readings a {
  color: var(--nb-slate);
  text-decoration: underline;
  text-decoration-color: rgba(75, 104, 110, 0.4);
  text-underline-offset: 0.15em;
}

.training-readings a:hover,
.training-readings a:focus {
  color: var(--nb-rust);
}

.training-memory-ref {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nb-rust);
  margin-right: 0.35rem;
}

.training-alt {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--nb-slate);
  margin: 0.4rem 0 1.1rem;
}

.training-row-aux .training-label {
  color: var(--nb-slate);
}

/* ---- Confession: two tracks side by side ---- */
.training-confession .training-tracks {
  margin-top: 0.1rem;
}

.track-col {
  margin-bottom: 0.75rem;
}

.track-name {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.15rem;
}

.track-reading {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nb-body);
  margin-bottom: 0.35rem;
}

.track-details summary {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--nb-slate);
  cursor: pointer;
}

.track-details summary:hover {
  color: var(--nb-rust);
}

.track-questions {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.track-questions li {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--nb-body);
  margin-bottom: 0.5rem;
}

/* A quiet left rule separates the two track columns when both are shown. */
#training-weeks.track-both .track-col {
  border-left: 2px solid var(--nb-hair);
  padding-left: 0.9rem;
}

/* ---- Track prompt (D3): a one-time nudge shown by JS when no track is saved.
   Hidden by default (the `hidden` attribute), revealed by toggle-script.html,
   and dismissed once a track is chosen. ---- */
.track-prompt {
  background: rgba(75, 104, 110, 0.07);
  border-left: 3px solid var(--nb-slate);
  border-radius: 4px;
  padding: 0.7rem 0.95rem;
  margin: 0.5rem 0 0.75rem;
  max-width: 34rem;
}

.track-prompt-text {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--nb-body);
  margin: 0;
}

/* ---- Track toggle ---- */
.track-toggle {
  margin: 0.5rem 0 1.5rem;
}

.track-toggle .track-btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--nb-slate);
  border: 1px solid var(--nb-hair);
  background-color: transparent;
  margin: 0 0.3rem 0.4rem 0;
}

.track-toggle .track-btn:hover,
.track-toggle .track-btn:focus {
  background-color: rgba(75, 104, 110, 0.1);
  color: var(--nb-slate);
}

.track-toggle .track-btn.active {
  background-color: var(--nb-slate);
  border-color: var(--nb-slate);
  color: #fff;
}

/* Track visibility. Default markup carries .track-both (no-JS shows both). */
#training-weeks.track-wcf .belgic-only {
  display: none;
}

#training-weeks.track-belgic .wcf-only {
  display: none;
}

/* When one track is chosen, its column takes the full width. */
#training-weeks.track-wcf .track-col.wcf-only,
#training-weeks.track-belgic .track-col.belgic-only {
  flex: 0 0 100%;
  max-width: 100%;
  border-left: 0;
  padding-left: 0;
}

/* ---- Student handout: per-week print controls (screen) ---- */
.training-week-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.training-print-week {
  flex: none;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--nb-slate);
  background: transparent;
  border: 1px solid var(--nb-hair);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
}

.training-print-week:hover,
.training-print-week:focus {
  color: var(--nb-rust);
  border-color: var(--nb-rust);
}

/* ==========================================================================
   Print styles (site-wide; our own hand-written print block — Bootstrap ships
   its own @media print rules ahead of this in bootstrap.css).
   Safe defaults: drop the chrome, keep the content readable on paper.
   Expands collapsed <details> so nothing is lost when printed.
   ========================================================================== */
@media print {
  nav.navbar,
  #site-search,
  .track-toggle,
  .no-print,
  .print-hide,
  .training-glance-index,
  body > .container-fluid.bg-light {
    display: none !important;
  }

  /* Expand any collapsed details for print, and drop the toggle triangle. */
  details > *:not(summary) {
    display: block !important;
  }

  /* Modern Chromium hides closed <details> content through the
     ::details-content pseudo (content-visibility: hidden), which the
     display rule above cannot reach. Force it visible so a printed sheet
     keeps the confession questions even when the toggle was left closed. */
  details::details-content {
    content-visibility: visible !important;
  }

  .track-details summary {
    display: none !important;
  }

  /* Print both confession tracks regardless of the on-screen toggle choice. */
  #training-weeks .wcf-only,
  #training-weeks .belgic-only {
    display: block !important;
  }

  #training-weeks.track-both .track-col {
    border-left: 0;
    padding-left: 0;
  }

  .training-week {
    break-inside: avoid;
  }

  .training-shell {
    max-width: none;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  /* ---- Student handout: one self-contained week per sheet ---- */
  /* The intro prints as a front sheet; each week then starts on its own page.
     The kicker ("Week 9 of 16 · Practice") carries the block name, so the
     block headings are dropped in print. */
  .training-handout .training-block-h2 {
    display: none;
  }

  .training-handout .training-week {
    break-before: page;
    break-inside: avoid;
  }

  /* Print only the chosen track (both when "Both" is selected). Overrides the
     site-wide "show both tracks" rule above for the handout. */
  .training-handout #training-weeks.track-wcf .belgic-only,
  .training-handout #training-weeks.track-belgic .wcf-only {
    display: none !important;
  }
}

/* ============================================================
   Full-text book reader (/read/the-deaconship/)
   The one book published here in full. A landing page with a
   cover, credits, and grouped table of contents; per-chapter
   reader pages with a scroll-progress bar and prev/next pager.
   Reuses the palette + .prose measure from the reading pages.
   ============================================================ */

.reader-shell {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Landing: hero ---- */
.book-hero {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 0.5rem 0 2.25rem;
}

.book-hero-cover {
  flex: 0 0 190px;
  max-width: 190px;
}

.book-hero-cover img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(49, 18, 6, 0.22);
}

.book-hero-body {
  flex: 1 1 auto;
  min-width: 0;
}

.book-kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-rust);
  margin-bottom: 0.5rem;
}

.book-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.12;
  color: var(--nb-ink);
  margin-bottom: 0.35rem;
}

.book-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--nb-slate);
  margin-bottom: 0.9rem;
}

.book-byline {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--nb-body);
  margin-bottom: 0.25rem;
}

.book-credits {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--nb-slate);
  margin-bottom: 1.25rem;
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.book-btn-read,
.book-btn-buy {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.book-btn-read {
  background-color: var(--nb-rust);
  color: #fff;
  border: 1px solid var(--nb-rust);
}

.book-btn-read:hover,
.book-btn-read:focus {
  background-color: #8f3f0d;
  border-color: #8f3f0d;
  color: #fff;
}

.book-btn-buy {
  background-color: transparent;
  color: var(--nb-slate);
  border: 1px solid var(--nb-hair);
}

.book-btn-buy:hover,
.book-btn-buy:focus {
  border-color: var(--nb-slate);
  color: var(--nb-ink);
}

/* ---- Landing: intro + TOC ---- */
.book-intro {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.book-toc {
  margin-top: 2.75rem;
  border-top: 2px solid var(--nb-hair);
  padding-top: 1.5rem;
}

.book-toc-title {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nb-ink);
  margin-bottom: 1.5rem;
}

.book-toc-group {
  margin-bottom: 2rem;
}

.book-toc-heading {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.5rem;
}

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

.book-toc-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--nb-hair);
}

.book-toc-item > a {
  flex: 1 1 auto;
  text-decoration: none;
  min-width: 0;
}

.book-toc-kicker {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.1rem;
}

.book-toc-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--nb-ink);
}

.book-toc-note {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--nb-slate);
  margin-top: 0.1rem;
}

.book-toc-item > a:hover .book-toc-name,
.book-toc-item > a:focus .book-toc-name {
  color: var(--nb-rust);
}

.book-toc-time {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--nb-slate);
  white-space: nowrap;
}

/* ---- Reader: scroll progress ---- */
.book-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}

.book-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--nb-rust);
  transition: width 0.1s linear;
}

/* ---- Reader: chapter head ---- */
.book-crumb a {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--nb-slate);
}

.book-chapter-head {
  margin-bottom: 1.75rem;
}

.book-chapter-kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nb-slate);
  margin-bottom: 0.5rem;
}

.book-chapter-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.18;
  color: var(--nb-ink);
  margin-bottom: 0.4rem;
}

.book-chapter-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--nb-slate);
  margin-bottom: 0;
}

/* ---- Reader: footnotes ---- */
.book-prose .footnotes {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nb-hair);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--nb-slate);
}

.book-prose .footnotes hr {
  display: none;
}

.book-prose .footnotes ol {
  padding-left: 1.25rem;
}

.book-prose .footnotes p {
  margin-bottom: 0.5rem;
}

.book-prose sup a,
.book-prose .footnote-ref {
  text-decoration: none;
  font-weight: 600;
}

.book-toc-return {
  margin-top: 1rem;
}

.book-toc-return a {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--nb-slate);
}

/* ---- Reader: responsive ---- */
@media (max-width: 575.98px) {
  .book-hero {
    flex-direction: column;
    gap: 1.25rem;
  }
  .book-hero-cover {
    flex-basis: auto;
    max-width: 150px;
  }
  .book-title {
    font-size: 1.9rem;
  }
  .book-chapter-title {
    font-size: 1.6rem;
  }
}

/* Training landing grid and week pages */

/* Primary call to action (G): one rust pill above the grid. */
.training-cta {
  display: inline-block;
  margin: 0 0 1.75rem;
}

/* Plain-language gloss under each block name on the grid. */
.week-index-block-gloss {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--nb-slate);
  margin: 0 0 0.85rem;
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

/* Week card (C): a large Vollkorn numeral is the dominant element, the topic
   sits beside it, and the "Week" kicker is shrunk to a whisper. */
.training-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--nb-hair);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.training-card:hover,
.training-card:focus-visible {
  border-color: var(--nb-rust);
  text-decoration: none;
  color: inherit;
}

/* Week 1 only: a faint rust wash and left border mark the course's one
   entry point (four tinted cards read as arbitrary striping). */
.training-card-start {
  background: rgba(168, 75, 17, 0.06);
  border-left: 3px solid var(--nb-rust);
}

.training-card-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  min-width: 2.2rem;
  line-height: 1;
}
.training-card-kicker {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-slate);
  margin-bottom: 0.1rem;
}
.training-card-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nb-ink);
  /* Vollkorn's old-style figures render 1 as a Roman-looking I ("IO" for 10,
     "II" for 11); force lining figures so week numbers read as numbers. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.training-card-topic {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nb-ink);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.training-card::after {
  content: "\2192";
  margin-left: auto;
  align-self: center;
  color: var(--nb-slate);
  opacity: 0.45;
  font-size: 1rem;
}
.training-card:hover::after,
.training-card:focus-visible::after {
  color: var(--nb-rust);
  opacity: 1;
}

.training-grid-lede {
  margin-bottom: 1.25rem;
}

/* Progress spine (H): sixteen segments under the week-page title, filled to
   the current week. */
.training-spine {
  display: flex;
  gap: 0.2rem;
  margin: 0.4rem 0 1.1rem;
}
.training-spine-seg {
  flex: 1 1 0;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--nb-hair);
}
.training-spine-seg.is-filled {
  background: var(--nb-rust);
}

.training-back a,
.training-week-nav a {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nb-slate);
}
.training-back a:hover,
.training-week-nav a:hover {
  color: var(--nb-rust);
}
.training-week-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nb-hair);
}
.training-week-section {
  margin-top: 2rem;
}
.training-facilitator {
  border-top: 1px solid var(--nb-hair);
  padding-top: 1.25rem;
}

/* Course plan: the whole course as one table (/training/plan/) */
.training-plan-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
}
.training-plan-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.4;
}
.training-plan-table th {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-slate);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--nb-slate);
}
.training-plan-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--nb-hair);
  vertical-align: top;
}
.training-plan-block td {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-rust);
  border-bottom: 1px solid var(--nb-rust);
  padding-top: 1.4rem;
}
.training-plan-gloss {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-slate);
}
.training-plan-num {
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.training-plan-item,
.track-col-wcf,
.track-col-belgic {
  display: block;
}
.track-col-belgic {
  margin-top: 0.25rem;
}
.training-plan-scroll.track-wcf .track-col-belgic,
.training-plan-scroll.track-belgic .track-col-wcf {
  display: none;
}
.training-plan-scroll.track-wcf .track-col-wcf,
.training-plan-scroll.track-belgic .track-col-belgic {
  margin-top: 0;
}
@media print {
  .training-plan-table {
    min-width: 0;
    font-size: 0.72rem;
  }
  .training-plan-scroll {
    overflow-x: visible;
  }
}
/* The plan table needs more than the reading measure on desktop. */
.training-shell.training-plan {
  max-width: 72rem;
}

/* ============================================================
   Markdown tables (render hook: layouts/_default/_markup/render-table.html)
   Default: table stays within the reading measure and scrolls if needed.
   Wide tables (4+ cols) offer a button to break out to a wider, centered
   width for readability. Toggle wired up in static/js/custom.js.
   ============================================================ */
/* Quiet micro-label, not a boxed button: right-aligned above the table so it
   stays out of the reading path. Muted until hover/focus. */
.table-widen-btn {
  display: block;
  width: fit-content;
  margin: 0 0.1rem 0.4rem auto;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nb-slate);
  opacity: 0.55;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.table-widen-btn:hover,
.table-widen-btn:focus {
  opacity: 1;
  color: var(--nb-rust);
}

/* Break the widened table out of the 38rem reading measure and center it on
   the page. The reading column is itself centered, so shifting to the block's
   center centers on the viewport. Caps at 72rem; leaves margins on small
   screens. */
.table-block.is-wide {
  width: min(72rem, 94vw);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}