/*
Theme Name: The Reliance
Theme URI: https://the-reliance.co.uk
Author: Vendo Digital
Description: Editorial theme for The Reliance — Dental Industry News & Insight. Implements the v2 brand guidelines (docs/brand-guidelines.md in the project repo).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: the-reliance
*/

:root {
  --paper: #F7F4EC;
  --paper-2: #FBF9F2;
  --surface: #FFFFFF;
  --ink: #10222B;
  --gold-dec: #C8932B;
  --gold-text: #8A6320;
  --grey: #5B5B5B;
  --hairline: #E4E0D4;
  --rule-gold: #E0CDA0;
  --serif-display: 'Cormorant Garamond', Georgia, serif;
  --serif-text: 'Source Serif 4', Georgia, serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --maxw: 1180px;
  --content: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

a { color: var(--gold-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* rule-gold, not text-gold: text-gold is 3.02:1 on ink, so on the inverted
   lead band and the footer the focus ring was less visible than the link it
   was marking -- backwards for the one affordance a keyboard user navigates by. */
a:focus-visible { outline: 2px solid var(--rule-gold); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---- masthead ---- */
.site-masthead { text-align: center; padding: 48px 0 18px; }
.mast-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.mast-orn .ln { height: 1px; width: 46px; background: var(--rule-gold); }
.mast-orn .dia { width: 7px; height: 7px; border: 1px solid var(--gold-dec); transform: rotate(45deg); flex: none; }
.site-masthead h1, .site-masthead .site-title { margin: 0; line-height: 0; }
.site-masthead .site-title a { display: block; }
/* Outlined Cormorant lockup (Direction A). Font-independent paths, scales with
   the header; the ornament + strapline are baked into the same SVG. */
.masthead-svg { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; }
@media (max-width: 600px) { .masthead-svg { max-width: 340px; } }
/* Inverted-ink colourway (future use — e.g. inverted lead band). Wordmark to
   paper; strapline to rule-gold per the contrast caveat (text-gold fails on ink). */
.inverted .masthead-svg .wm { fill: var(--paper); }
.inverted .masthead-svg .strap { fill: var(--rule-gold); }
/* Visually-hidden site name: keeps "The Reliance" in the DOM as real text for
   crawlers/AT while the SVG carries the visual mark. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dateline { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; color: var(--grey); border-top: 1px solid var(--hairline); border-bottom: 2px solid var(--ink); padding: 12px 0; margin-top: 26px; }

/* ---- nav ---- */
.site-nav { display: flex; justify-content: center; align-items: center; gap: 32px; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.site-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.site-nav a { color: var(--grey); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav .menu-item-subscribe a { color: var(--gold-text); }

/* ---- story / article card components (shared: home, archive) ---- */
.story-grid { display: grid; gap: 36px; padding: 48px 0 12px; }
.story-grid.featured { grid-template-columns: repeat(3, 1fr); }
.story-grid.archive { grid-template-columns: repeat(4, 1fr); padding: 22px 0 60px; }
@media (max-width: 900px) {
  .story-grid.featured, .story-grid.archive { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .story-grid.featured, .story-grid.archive { grid-template-columns: 1fr; }
}

.story .kicker { display: inline-block; font-family: var(--serif-text); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; text-decoration: none; }
.story h2, .story h3 { font-family: var(--serif-text); font-weight: 700; line-height: 1.18; margin: 0 0 10px; color: var(--ink); }
.story-grid.featured .story h2 { font-size: 27px; }
.story-grid.archive .story { padding-top: 15px; border-top: 1px solid var(--hairline); }
.story-grid.archive .story h3 { font-size: 17px; }
.story-grid.archive .story .kicker { font-size: 10px; margin-bottom: 9px; }
.story h2 a, .story h3 a { color: inherit; text-decoration: none; }
.story .standfirst { font-family: var(--serif-text); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--grey); margin: 0 0 14px; }
.story-grid.archive .story .standfirst { font-size: 13px; }
.story .byline { display: flex; align-items: center; gap: 8px; font-family: var(--serif-text); font-size: 12px; color: var(--grey); }
.story .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--serif-display); font-size: 11px; font-weight: 600; flex: none; }

/* ---- inverted lead band (homepage, first page only) ----
   The week's lead story gets a full-bleed ink cover above the equal-billing
   3-up, which then carries the next three at equal weight. This is the only
   full-bleed element on the site, and that is the point: it reads as the
   cover, not another card. Text-only by decision — no imagery yet, so the LCP
   stays a preloaded webfont headline. The band renders as a direct child of
   <main> (outside .wrap), so it spans edge to edge without a 100vw hack.
   The ornament echoes the masthead directly above; ornament + kicker are the
   single gold gesture. text-gold fails on ink, so gold here is rule-gold. */
.lead-band { background: var(--ink); color: var(--paper); padding: 60px 0 64px; }
.lead-band-inner { max-width: 800px; margin: 0 auto; padding: 0 28px; text-align: center; }
.lead-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.lead-orn .ln { height: 1px; width: 46px; background: var(--rule-gold); }
.lead-orn .dia { width: 7px; height: 7px; border: 1px solid var(--gold-dec); transform: rotate(45deg); flex: none; }
.lead-band .kicker {
  display: inline-block; font-family: var(--serif-text); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--rule-gold);
  text-decoration: none; margin-bottom: 14px;
}
.lead-band-title { font-family: var(--serif-text); font-weight: 700; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; margin: 0 0 18px; text-wrap: balance; }
.lead-band-title a { color: var(--paper); text-decoration: none; }
.lead-band-title a:hover { color: var(--rule-gold); }
.lead-band-standfirst { font-family: var(--serif-text); font-style: italic; font-size: 19px; line-height: 1.5; color: #CFC8B8; margin: 0 auto 22px; max-width: 58ch; }
.lead-band-byline { display: flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--serif-text); font-size: 13px; color: #CFC8B8; }
.lead-band-byline .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--serif-display); font-size: 12px; font-weight: 600; flex: none; }
@media (max-width: 600px) { .lead-band { padding: 44px 0 46px; } .lead-band-title { font-size: clamp(27px, 8vw, 34px); } }
/* ---- end lead band ---- */

/* ---- guides band (homepage, first page only) ----
   Cornerstone links, styled as a reference shelf rather than more stories:
   heavier ink rule above, no images, no bylines. See home.php for why it
   exists at all, and why it sits below the featured 3-up. */
.guides-band { margin: 54px 0 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.guides-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.guides-band-title {
  margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.guides-band-all {
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--gold-text);
  text-decoration: none; border-bottom: 1px solid var(--gold-dec); white-space: nowrap;
}
.guides-band-intro {
  font-family: var(--serif-text); font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--grey); max-width: 62ch; margin: 12px 0 0;
}
.guides-band-list {
  list-style: none; margin: 0; padding: 26px 0 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.guides-band-item { margin: 0; padding-top: 14px; border-top: 1px solid var(--hairline); }
.guides-band-item h3 {
  font-family: var(--serif-text); font-weight: 600; font-size: 20px; line-height: 1.25;
  margin: 0 0 8px; color: var(--ink);
}
.guides-band-item h3 a { color: inherit; text-decoration: none; }
.guides-band-item h3 a:hover { color: var(--gold-text); }
.guides-band-item p {
  margin: 0; font-family: var(--serif-text); font-size: 15px; line-height: 1.55; color: var(--grey);
}
@media (max-width: 900px) {
  .guides-band-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .guides-band-list { grid-template-columns: 1fr; gap: 24px; }
}

.archive-heading { margin-top: 54px; padding-top: 14px; border-top: 2px solid var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

.pagination { display: flex; justify-content: space-between; padding: 24px 0 60px; font-family: var(--sans); font-size: 13px; }
.pagination a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-dec); }

/* ---- single article ---- */
.article-header { max-width: var(--content); margin: 56px auto 0; }
.article-kicker { font-family: var(--serif-text); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; text-decoration: none; display: inline-block; }
.article-h1 { font-family: var(--serif-text); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; color: var(--ink); margin: 0 0 16px; }
.article-standfirst { font-family: var(--serif-text); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0 0 22px; }
.article-meta { display: flex; align-items: center; gap: 12px; font-family: var(--serif-text); font-size: 15px; color: var(--grey); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0; margin-bottom: 36px; }
.article-meta .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--serif-display); font-size: 14px; font-weight: 600; flex: none; }
.article-meta .dot { color: var(--gold-dec); }

.article-body { max-width: var(--content); margin: 0 auto 60px; font-family: var(--serif-text); font-size: 18px; line-height: 1.7; }
/* Headings set their own leading. Without this they inherit .article-body's
   1.7, which is a body-copy value: a 28px h2 rendered 28/47.6 against a 28/31
   spec, and a heading that wrapped stopped reading as one object on a phone.
   The top margin goes 40->44 to put back the space the loose leading was
   contributing. */
.article-body h2 { font-family: var(--serif-text); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 44px 0 16px; }
.article-body h3 { font-family: var(--serif-text); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 32px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body a { color: var(--gold-text); }

/* ---- text-breaking furniture ----
   The spokes run 1,500-3,200 words. Everything below was rendering at browser
   defaults inside an 18px serif column: 206 list items across 52 lists, the
   end-of-article rule on all 21 guides, and both tables. Lists are by far the
   most-used break in the copy, so they carry most of the weight here.

   The diamond signature stays rationed (brand-guidelines.md 7, "one appearance
   per view"): it marks the end of the article and centres a pull quote, and
   those two never co-occur -- the rule sits below the last body element. List
   markers deliberately use a plain hairline dash instead, because a diamond on
   every bullet is exactly the scattering the guidelines forbid. */

.article-body ul, .article-body ol { margin: 26px 0; padding: 0; list-style: none; }
.article-body li { position: relative; padding-left: 26px; margin: 0 0 12px; }
.article-body li:last-child { margin-bottom: 0; }
.article-body li > ul, .article-body li > ol { margin: 12px 0 0; }

/* unordered: a short rule in ornament gold, optically centred on the first line */
.article-body ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 12px; height: 1px; background: var(--gold-dec);
}
/* ordered: text-gold numerals -- gold carrying meaning is always Accent-Text */
.article-body ol { counter-reset: rl; }
.article-body ol > li { padding-left: 32px; }
.article-body ol > li::before {
  content: counter(rl) "."; counter-increment: rl;
  position: absolute; left: 0; top: 0; width: 24px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--gold-text);
}

/* end-of-article mark: the signature, sitting above the provenance note */
.article-body hr {
  border: 0; height: 7px; width: 100%; max-width: 190px;
  margin: 44px auto 32px; position: relative; overflow: visible;
}
.article-body hr::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--rule-gold);
}
.article-body hr::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--gold-dec); transform: rotate(45deg);
  background: var(--paper);
}

/* tables: same ink-rule-over-hairline logic as the figure blocks */
.article-body table {
  width: 100%; border-collapse: collapse; margin: 30px 0;
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
}
.article-body th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-text);
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--ink);
}
.article-body td {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--hairline); vertical-align: top;
  font-variant-numeric: tabular-nums; /* money columns line up digit-for-digit */
}
.article-body tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
.article-body th:last-child, .article-body td:last-child { padding-right: 0; }

/* Guard, not a fix: both tables in the copy today wrap and fit fine at 390px,
   and this renders them identically. It's here because a table can't shrink
   below its min-content width, so a future data-asset table with more columns
   would widen .article-body past the viewport and make the whole article
   scroll sideways -- body paragraphs included. Contained scrolling is what
   .rf-body already does for a wide figure. display:block keeps thead and tbody
   in one anonymous table box, so columns stay aligned. */
@media (max-width: 760px) {
  .article-body table { display: block; overflow-x: auto; }
}

/* any image dropped straight into the copy still lands in the system */
.article-body figure { margin: 34px 0; }
.article-body figure img, .article-body > img { width: 100%; margin: 0; }
.article-body figcaption {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-family: var(--serif-text); font-style: italic; font-size: 14px;
  line-height: 1.5; color: var(--grey);
}

/* the opening paragraph carries the reader in off the standfirst */
.article-body > p:first-child { font-size: 20px; line-height: 1.62; }

/* pull quote */
.article-body blockquote {
  margin: 40px 0; text-align: center; padding: 8px 0; border: none;
}
.article-body blockquote p {
  font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 28px;
  line-height: 1.4; color: var(--ink); max-width: 600px; margin: 0 auto;
}
.article-body blockquote cite {
  display: block; font-family: var(--serif-text); font-size: 14px; font-style: normal;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); margin-top: 18px;
}
/* The diamond-and-hairline divider the guidelines specify beneath a pull quote
   (5). Same signature as the end-of-article mark but on a shorter rule, so a
   piece carrying both reads as a hierarchy rather than a repeat. Drawn as one
   SVG rather than stacked pseudo-elements: the diamond has to sit dead-centre
   on the hairline, and that alignment shouldn't depend on the blockquote's
   padding staying what it is today. */
.article-body blockquote::after {
  content: ""; display: block; width: 118px; height: 11px; margin: 22px auto 0;
  background: center/118px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='11'%3E%3Cpath d='M0 5.5h48M70 5.5h48' stroke='%23E0CDA0'/%3E%3Crect x='55.5' y='2' width='7' height='7' fill='none' stroke='%23C8932B' transform='rotate(45 59 5.5)'/%3E%3C/svg%3E");
}

/* takeaway callout shortcode */
.reliance-takeaway {
  background: var(--paper-2); border: 1px solid var(--hairline); border-left: 3px solid var(--gold-dec);
  border-radius: 0; padding: 20px 22px; margin: 28px 0;
}
.reliance-takeaway .h {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px;
}
/* margin:0 collided every paragraph of a multi-paragraph takeaway into one
   block. Space them and strip it from the last, so a single-paragraph takeaway
   still sits flush to the box. */
.reliance-takeaway p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.reliance-takeaway p:last-child { margin-bottom: 0; }

/* infographic / data-viz figure (see docs/DATAVIZ_GUIDELINES.md) */
.reliance-figure {
  max-width: var(--content); margin: 40px auto; padding: 22px 0 0;
  border-top: 2px solid var(--ink);
}
.reliance-figure .rf-kicker {
  display: block; font-family: var(--serif-text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px;
}
.reliance-figure .rf-title {
  font-family: var(--serif-text); font-weight: 600; font-size: 20px; line-height: 1.25;
  color: var(--ink); margin: 0 0 18px; max-width: 40ch;
}
.reliance-figure .rf-body { overflow-x: auto; }

/* The figures are drawn to a 720-unit measure and carry real labels at 10-12.5
   units. width:100% alone let them shrink to fit any column, so on a ~340px
   phone column every figure rendered at about 47% and its smallest labels
   landed near 5px -- present, but not readable. Every figure in the set is
   text-bearing (14-48 <text> nodes each, including the map), so there is no
   subset that survives being shrunk and this applies to all of them.

   min-width holds the figure at near its drawn size and lets .rf-body's
   existing overflow-x:auto scroll it, exactly as .article-body table does
   above. It is inert on desktop, where the column is already wider than the
   floor. No media query: the floor should engage when the CONTAINER is narrow,
   which is not always the same thing as the viewport being narrow. */
.reliance-figure .rf-body svg {
  display: block; width: 100%; min-width: 680px; height: auto;
}
.reliance-figure .rf-body img { display: block; max-width: 100%; height: auto; }
.reliance-figure .rf-body table {
  width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; color: var(--ink);
}
.reliance-figure .rf-caption {
  display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.reliance-figure .rf-cap-text {
  display: block; font-family: var(--serif-text); font-style: italic; font-size: 14px;
  line-height: 1.5; color: var(--grey);
}
.reliance-figure .rf-source {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.02em; color: var(--grey);
}

/* source citation shortcode */
.reliance-sources {
  font-family: var(--sans); font-size: 13px; color: var(--grey);
  border-top: 1px solid var(--hairline); padding-top: 14px; margin: 36px 0 0;
}
.reliance-sources a { color: var(--gold-text); }

/* category tags (post footer) */
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; max-width: var(--content); margin: 0 auto 60px; }
.article-tags a {
  font-family: var(--serif-text); font-weight: 600; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
  padding: 5px 11px; text-decoration: none;
}

/* ---- article side gutters on phones ----
   single.php is the only template with no .wrap (cf. page.php), and the three
   blocks that carry the article centre themselves with max-width + margin:auto
   and no padding. Above 720px --content binds and the margins do the work;
   below it the max-width stops binding entirely and body text ran flush to
   both screen edges, while the masthead and nav above it sat at 28px. The most
   read template on the site.

   20px, not the .wrap's 28px: at 390px, 28px each side cuts the measure to
   about 40 characters. Scoped to the breakpoint so desktop rendering -- and
   the LCP element with it -- is untouched. box-sizing is border-box globally,
   so this eats into the column rather than widening it. */
@media (max-width: 720px) {
  .article-header,
  .article-body,
  .article-tags { padding-left: 20px; padding-right: 20px; }
}

/* ---- footer ---- */
.site-footer { background: var(--ink); color: var(--paper); text-align: center; padding: 32px 0; font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; margin-top: 40px; }
.site-footer a { color: var(--gold-dec); }
.site-footer .footer-links { list-style: none; display: inline; margin: 0; padding: 0; }
.site-footer .footer-links li { display: inline; }
.site-footer .footer-links li::before { content: '·'; margin: 0 8px; color: var(--grey); }

/* ---- generic page ---- */
.page-content { max-width: var(--content); margin: 56px auto 80px; font-family: var(--serif-text); font-size: 18px; line-height: 1.7; }
/* Same inherited-1.7 fault as .article-body's headings, same fix. */
.page-content h1 { font-family: var(--serif-text); font-weight: 700; font-size: 36px; line-height: 1.08; margin-bottom: 24px; }
.page-content h2 { font-family: var(--serif-text); font-weight: 700; font-size: 26px; line-height: 1.15; margin: 44px 0 14px; }
.page-content h3 { font-family: var(--serif-text); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 30px 0 12px; }
.page-content p { margin: 0 0 20px; }
.page-content ul, .page-content ol { margin: 0 0 20px; padding-left: 24px; }
.page-content li { margin: 0 0 10px; }
.page-content a { color: var(--gold-text); }
.page-content hr { border: none; border-top: 1px solid var(--hairline); margin: 40px 0; }

/* standfirst on pages (pillar guides + section hubs) */
.reliance-standfirst { font-family: var(--serif-text); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); margin: 0 0 28px; }

/* editorial / review note at the foot of pillar guides */
/* Source Serif italic, not Archivo. fonts.css declares no Archivo italic, so
   Chrome was synthesising the slant -- on the line naming David Hinckley and
   his GDC number, which is the last line on the site that should look
   approximated. Archivo is the interface tier; this is editorial text. */
.reliance-editorial-note { font-family: var(--serif-text); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--grey); }
.reliance-editorial-note a { color: var(--gold-text); }

/* section-hub "Latest in this section" list */
.reliance-section-list { list-style: none; margin: 0 0 20px; padding: 0; }
.reliance-section-list li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hairline); margin: 0; }
.reliance-section-list li:first-child { border-top: 1px solid var(--hairline); }
/* Qualified with the element on purpose. `.page-content a` is (0,1,1) and this
   was (0,1,0), so on every section hub the story titles lost and rendered gold
   like body links. `a.reliance-section-title` ties on specificity and wins on
   order, without reaching for !important. */
a.reliance-section-title { font-family: var(--serif-text); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); text-decoration: none; }
a.reliance-section-title:hover { color: var(--gold-text); }
.reliance-section-date { font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.reliance-section-empty { font-family: var(--sans); font-size: 15px; color: var(--grey); font-style: italic; }