/* ==========================================================================
   NRI Affairs — article.css
   Single-article template only. Loads after base.css.
   Everything global (chrome, footer, newsletter, share sheet, tokens, fonts)
   lives in base.css and is not repeated here.
   Generated from the supplied comps. Do not hand-edit values: every colour,
   size, weight, radius, shadow and transition below traces back to
   work/extract/home.css or work/extract/article.css.
   See work/DESIGN-SYSTEM.md for the token table, conflicts and inventory.
   ========================================================================== */


.article-header-width {
  width: min(1080px,100% - 56px);
  margin-inline: auto;
}

/* Shared with .eyebrow in base.css — same declarations, split so no selector
   lives in two stylesheets. Keep in sync. */
.section-kicker,
.ad-label,
.rail-label {
  letter-spacing: .17em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.reading-progress {
  z-index: 200;
  background: 0 0;
  height: 3px;
  position: fixed;
  inset: 0 0 auto;
}

.reading-progress span {
  background: var(--gold);
  height: 100%;
  transition: width 90ms linear;
  display: block;
  box-shadow: 0 0 14px #d6ac5b7a;
}

.article-intro {
  color: #f6f8fb;
  background: radial-gradient(circle at 78% 18%, #3f5f8245, transparent 27%), radial-gradient(circle at 14% 100%, #d6ac5b14, transparent 32%), var(--navy-900);
  padding: 46px 0 56px;
  position: relative;
  overflow: hidden;
}

.article-intro:after {
  content: "";
  background: linear-gradient(90deg,#0000,#d6ac5b94,#0000);
  height: 1px;
  position: absolute;
  inset: auto 0 0;
}

/* The second selector is Rank Math's own breadcrumb markup. nria_breadcrumbs()
   hands over to the plugin whenever it is active, so on staging and in
   production this is the class that actually renders. Same values throughout —
   the trail must look identical either way. */
.breadcrumbs,
.rank-math-breadcrumb {
  color: #728096;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  font-size: 11px;
  display: flex;
}

/* Rank Math wraps its crumbs in a <p>, so the row lives one level deeper. */
.rank-math-breadcrumb p {
  color: inherit;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: inherit;
  display: flex;
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
  color: var(--gold-light);
}

.section-kicker {
  color: var(--gold-light);
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.section-kicker:before {
  content: "";
  background: var(--gold);
  width: 28px;
  height: 1px;
}

.article-intro h1 {
  max-width: 960px;
  font-family: var(--display);
  letter-spacing: -.04em;
  text-wrap: balance;
  margin: 18px 0 0;
  font-size: clamp(58px,6.2vw,88px);
  font-weight: 500;
  line-height: .96;
}

.standfirst {
  color: #c3cedd;
  max-width: 840px;
  font-family: var(--reading);
  margin: 25px 0 0;
  font-size: 23px;
  line-height: 1.45;
}

.article-meta-block {
  border-top: 1px solid var(--dark-line);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 24px;
  display: flex;
}

.author-meta {
  align-items: center;
  gap: 12px;
  display: flex;
}

.author-monogram {
  width: 42px;
  height: 42px;
  color: var(--gold-light);
  font-family: var(--display);
  background: #d6ac5b14;
  border: 1px solid #d6ac5b8a;
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.author-meta a {
  color: #f4f6f9;
  font-size: 13px;
  font-weight: 700;
}

.author-meta p {
  color: #75849a;
  margin: 4px 0 0;
  font-size: 11px;
}

.author-meta p span {
  color: #4f5f72;
  margin-inline: 5px;
}

.intro-actions {
  align-items: stretch;
  gap: 8px;
  display: flex;
}

.google-source-button {
  background: #ffffff0f;
  border: 1px solid #ffffff30;
  border-radius: 4px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 12px;
  transition: border-color .18s,background .18s;
  display: flex;
}

.google-source-button:hover {
  background: #ffffff1a;
  border-color: #ffffff59;
}

.google-g {
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 45%, #fbbc05 0 68%, #ea4335 0 82%, #4285f4 0);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
}

.google-source-button>span:last-child {
  flex-direction: column;
  display: flex;
}

.google-source-button b {
  color: #f4f6f8;
  font-size: 11px;
  line-height: 1.2;
}

.google-source-button small {
  color: #8897a9;
  font-size: 9px;
}

.action-button {
  border: 1px solid var(--dark-line);
  color: #aab6c6;
  cursor: pointer;
  background: 0 0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 86px;
  font-size: 11px;
  font-weight: 600;
  transition: color .18s,border-color .18s,background .18s;
  display: flex;
}

.action-button svg {
  width: 17px;
  height: 17px;
}

.action-button:hover,
.action-button.is-active {
  color: var(--gold-light);
  background: #d6ac5b14;
  border-color: #d6ac5b80;
}

/* `container` names the reading area as a size container so the two
   `@container nria-paper` blocks below can key off ITS width rather than the
   viewport's — see "CONTAINER-DRIVEN LAYOUT" at the end of this file.
   `inline-size` containment only: block size still comes from the content, and
   nothing here is painted or clipped differently.

   `display`, `float` and `width` are stated with it and are not decoration.
   Inline-size containment means the box's own width must not depend on its
   contents, so a shrink-to-fit paper surface would compute to ZERO — which is
   what an unlayered `div { display: inline-block }` or `div { float: left }`
   from a plugin sheet would otherwise produce. At 0,1,0 this rule beats any
   bare-element selector, so the surface stays a full-width block and the
   container always measures the real reading area. */
.paper-surface {
  background: var(--paper);
  padding-top: 42px;
  position: relative;
  display: block;
  float: none;
  width: auto;
  min-width: 100%;
  max-width: none;
  container: nria-paper / inline-size;
}

.lead-figure {
  margin-top: 0;
  margin-bottom: 0;
}

.lead-image-wrap {
  background: #bb8056;
  height: clamp(480px,48vw,620px);
  position: relative;
  overflow: hidden;
}

.lead-image-wrap:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px #13191f1f;
}

.lead-image-wrap img {
  object-fit: cover;
  object-position: center 58%;
  width: 100%;
  height: 100%;
}

.image-story-mark {
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #07111fc2;
  border: 1px solid #ffffff6b;
  padding: 8px 11px;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  bottom: 22px;
  right: 22px;
}

.lead-figure figcaption {
  color: var(--ink-faint);
  font-family: var(--reading);
  margin-top: 9px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
}

/* The 260px floor the comp's rail was drawn at is expressed as a `max` here,
   not a `min`: a `minmax(260px,…)` track cannot shrink, so it took its 260px
   out of the row before the reading column got anything and the copy absorbed
   100% of any shortfall. Track sizing is identical whenever the container is
   its intended width — verified against every template at 1512/1440/1024/768/
   375 — and no longer annihilates the middle column when it is not. See
   "CONTAINER-DRIVEN LAYOUT" at the end of this file. */
.reading-layout {
  grid-template-columns: 58px minmax(0,720px) minmax(0,310px);
  justify-content: center;
  gap: 34px;
  padding-top: 64px;
  padding-bottom: 70px;
  display: grid;
}

.share-rail {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: fit-content;
  padding-top: 4px;
  display: flex;
  position: sticky;
  top: 82px;
}

.rail-label {
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  margin-bottom: 8px;
  font-size: 8px;
  transform: rotate(180deg);
}

.share-rail button,
.share-rail a {
  border: 1px solid var(--line);
  color: #5a5b5c;
  cursor: pointer;
  background: 0 0;
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  transition: color .16s,border-color .16s,background .16s;
  display: grid;
}

.share-rail button:hover,
.share-rail a:hover,
.share-rail .is-active {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  background: #fffdf8;
}

.share-rail svg {
  width: 17px;
  height: 17px;
}

.rail-divider {
  background: var(--line);
  width: 1px;
  height: 20px;
  margin-block: 3px;
}

.article-copy {
  min-width: 0;
  font-family: var(--reading);
  font-size: 20px;
  line-height: 1.72;
}

.article-copy.text-size-1 {
  font-size: 22px;
}

.article-copy.text-size-2 {
  font-size: 24px;
}

.article-copy>p {
  color: #282b2e;
  margin: 0 0 1.35em;
}

/* the global preflight strips list markers; restored here so post content
   authored in Gutenberg renders as written. Mirrors the same restoration made
   for .nria-page-copy in base.css — keep the two in sync. */
.article-copy ul,
.article-copy ol {
  margin: 0 0 1.35em;
  padding-left: 1.3em;
}

.article-copy ul {
  list-style: disc;
}

.article-copy ol {
  list-style: decimal;
}

.article-copy li {
  color: #282b2e;
  margin-bottom: .45em;
}

/* nested levels: the browser's own marker ladder, and no double gap where a
   sub-list closes out its parent item */
.article-copy ul ul {
  list-style: circle;
}

.article-copy ul ul ul {
  list-style: square;
}

.article-copy li>ul,
.article-copy li>ol {
  margin: .45em 0 0;
}

/* description lists lose their indent to the same preflight */
.article-copy dl {
  margin: 0 0 1.35em;
}

.article-copy dt {
  color: #13171c;
  font-weight: 600;
}

.article-copy dd {
  color: #282b2e;
  margin: 0 0 .45em 1.3em;
}

.article-copy .source-line {
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--sans);
  letter-spacing: .03em;
  margin-bottom: 30px;
  padding-bottom: 16px;
  font-size: 11px;
  font-weight: 500;
}

.opening-paragraph:first-letter {
  float: left;
  color: var(--navy-900);
  font-family: var(--display);
  margin: 9px 10px 0 0;
  font-size: 78px;
  font-weight: 600;
  line-height: .68;
}

.article-copy h2 {
  color: #13171c;
  font-family: var(--display);
  letter-spacing: -.025em;
  margin: 2em 0 .65em;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
}

.article-copy blockquote {
  border-left: 3px solid var(--gold);
  margin: 52px 0;
  padding: 8px 20px 9px 32px;
  position: relative;
}

/* The pull-quote glyph is a ::before on .is-style-nria-pull, registered as a block style in inc/editor.php (WRITE2-02). */

.article-copy blockquote p {
  z-index: 1;
  color: var(--navy-900);
  font-family: var(--display);
  margin: 0;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.25;
  position: relative;
}

.in-article-ad {
  font-family: var(--sans);
  background: linear-gradient(135deg,#0000 0 55%,#d6ac5b17 55% 56%,#0000 56% 100%),#efe7d8;
  border: 1px solid #d9cfbd;
  margin: 50px 0 54px;
}

.in-article-ad .ad-label {
  color: #8e836f;
  border-bottom: 1px solid #d9cfbd;
  padding: 8px 14px;
  font-size: 8px;
  display: block;
}

.in-article-ad>div {
  padding: 24px 26px 27px;
}

.in-article-ad p {
  color: var(--gold-dark);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
}

/* The title is a <p class="ad-title">, not a heading: an ad is not a section
   of the article, and on a post with no body headings it put an h3 straight
   after the h1 (A11Y-R2-09). Same specificity as `.in-article-ad p` above and
   later in source, so the kicker's tracking/uppercase do not leak onto it. */
.in-article-ad h3,
.in-article-ad .ad-title {
  max-width: 520px;
  color: var(--navy-900);
  font-family: var(--display);
  margin: 8px 0 18px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: normal;
  text-transform: none;
}

.in-article-ad a,
.read-next-link,
.author-card a {
  color: var(--gold-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.in-article-ad a svg,
.read-next-link svg,
.author-card a svg {
  width: 16px;
  height: 16px;
  transition: transform .18s;
}

.in-article-ad a:hover svg,
.next-read-card:hover .read-next-link svg,
.author-card a:hover svg {
  transform: translate(4px);
}

.article-notes {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-family: var(--sans);
  margin-top: 54px;
  padding: 18px 0;
  font-size: 11px;
  line-height: 1.55;
}

.article-notes p {
  margin: 0 0 5px;
}

.article-notes a,
.article-tags a {
  color: var(--gold-dark);
  font-weight: 600;
}

.article-tags {
  font-family: var(--sans);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 10px;
  display: flex;
}

.article-tags>span {
  color: var(--ink-faint);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 5px;
  font-weight: 700;
}

.article-tags a {
  border: 1px solid var(--line);
  background: #fffdf8;
  padding: 7px 10px;
}

.whatsapp-follow-note {
  font-family: var(--sans);
  background: #f3f3e9;
  border: 1px solid #d3d6c9;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
  padding: 17px 19px;
  display: flex;
}

.whatsapp-follow-note>span {
  color: #1e764d;
  border: 1px solid #1e764d4d;
  border-radius: 50%;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.whatsapp-follow-note svg {
  width: 18px;
  height: 18px;
}

.whatsapp-follow-note p {
  color: #343934;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.author-card {
  border-top: 3px solid var(--navy-900);
  font-family: var(--sans);
  background: #f0e9dd;
  grid-template-columns: 84px 1fr;
  gap: 22px;
  margin-top: 54px;
  padding: 28px;
  display: grid;
}

.author-card-mark {
  background: var(--paper);
  width: 84px;
  height: 84px;
  color: var(--gold-dark);
  font-family: var(--display);
  border: 1px solid #9b722f6b;
  border-radius: 50%;
  place-items: center;
  font-size: 24px;
  font-weight: 600;
  display: grid;
}

/* The mark is a <span> monogram, and a portrait — when there is one — is laid
   OVER it so that a Gravatar URL which 404s falls back to the initials rather
   than to an empty circle (1.1.1). Absolute, not a grid child: the span is
   `display: grid` and a nested image would otherwise take a second row and
   push the monogram out of the circle. `position: relative` is what the
   overlay is positioned against. */
.author-card-mark {
  position: relative;
  overflow: hidden;
}

.author-card-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* The mark can also BE the image, when the author has an uploaded attachment
   (wp_get_attachment_image() puts the class on the <img> itself). */
img.author-card-mark {
  object-fit: cover;
  display: block;
}

.author-card .eyebrow {
  color: var(--gold-dark);
}

.author-card h2 {
  margin: 6px 0;
  font-size: 24px;
}

.author-card p {
  color: #5d5b57;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
}

/* Staff title under the name, e.g. "Sydney Bureau Chief" (user meta
   nria_role_title, added in 1.1.0). Same eyebrow treatment as the label above
   the name, so the card gains a line without gaining a new voice. Renders only
   when the profile carries one — desk accounts have none by design. */
.author-card .author-card-role {
  color: var(--gold-dark);
  font-family: var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: -2px 0 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.article-sidebar {
  align-self: start;
  position: sticky;
  top: 72px;
}

.art-fair-ad {
  color: #21141d;
  background: #f2bfd3;
  border: 1px solid #dfb2c5;
  display: block;
  position: relative;
  overflow: hidden;
}

.art-fair-ad .ad-label {
  z-index: 2;
  color: #4f3b45;
  background: #fffcf9ed;
  padding: 5px 7px;
  font-size: 8px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.art-fair-ad img {
  aspect-ratio: 1.35;
  object-fit: cover;
  width: 100%;
}

.art-fair-ad>div {
  padding: 18px 18px 20px;
}

.art-fair-ad small {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
}

.art-fair-ad h2 {
  font-family: var(--display);
  margin: 8px 0 5px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.05;
}

.art-fair-ad p {
  font-family: var(--reading);
  margin: 0 0 17px;
  font-size: 14px;
}

.art-fair-ad>div>span {
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #21141d;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.art-fair-ad>div>span svg {
  width: 14px;
  height: 14px;
}

.sidebar-list {
  border-top: 3px solid var(--navy-900);
  margin-top: 30px;
}

.sidebar-heading {
  border-bottom: 1px solid var(--line);
  padding: 16px 0 13px;
}

.sidebar-heading .eyebrow {
  color: var(--gold-dark);
}

.sidebar-heading h2 {
  font-family: var(--display);
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: 600;
}

.sidebar-list>a {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 31px 1fr;
  gap: 9px;
  padding: 14px 0;
  display: grid;
}

.sidebar-list>a>span {
  color: #b09a72;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
}

.sidebar-list>a p {
  color: #2f3132;
  font-family: var(--reading);
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.22;
  transition: color .16s;
}

.sidebar-list>a:hover p {
  color: var(--gold-dark);
}

.sidebar-google {
  border: 1px solid var(--line);
  background: #fff;
  grid-template-columns: 25px 1fr 18px;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 15px;
  display: grid;
}

.sidebar-google small,
.sidebar-google b {
  display: block;
}

.sidebar-google small {
  color: var(--ink-faint-paper);   /* was --ink-faint #7b7973 — 4.35:1 on #fff at 9px (A11Y-R3-04); 5.83:1 now */
  font-size: 9px;
}

.sidebar-google b {
  color: #2d3033;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
}

.sidebar-google>svg {
  width: 16px;
  height: 16px;
  color: var(--gold-dark);
}

.next-read,
.related-reading {
  border-top: 1px solid var(--line);
  padding-block: 48px;
}

.section-rule-heading {
  align-items: center;
  gap: 16px;
  margin-bottom: 23px;
  display: flex;
}

.section-rule-heading .eyebrow,
.section-rule-heading>h2 {
  color: var(--navy-900);
  font-family: var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.section-rule-heading .rule {
  background: var(--line);
  flex: 1;
  height: 1px;
}

.section-rule-heading>a {
  color: var(--gold-dark);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.next-read-card {
  border: 1px solid var(--line);
  background: #f3ede2;
  grid-template-columns: minmax(0,1.45fr) minmax(0,.9fr);
  min-height: 390px;
  display: grid;
}

.next-image {
  overflow: hidden;
}

.next-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.2,.65,.3,1);
}

.next-read-card:hover .next-image img {
  transform: scale(1.025);
}

.next-read-card>div:last-child {
  flex-direction: column;
  justify-content: center;
  padding: 44px;
  display: flex;
}

.next-read-card .eyebrow {
  color: var(--gold-dark);
}

.next-read-card h2 {
  color: var(--navy-900);
  font-family: var(--display);
  letter-spacing: -.025em;
  margin: 12px 0 14px;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.08;
}

.next-read-card p {
  color: #65625c;
  font-family: var(--reading);
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.45;
}

.related-reading {
  padding-top: 20px;
}

.related-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 22px;
  display: grid;
}

.related-grid>a {
  min-width: 0;
}

.related-grid img {
  aspect-ratio: 1.52;
  object-fit: cover;
  width: 100%;
  margin-bottom: 16px;
}

.related-grid .eyebrow {
  color: var(--gold-dark);
}

.related-grid h3 {
  color: #202326;
  font-family: var(--display);
  margin: 8px 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.14;
}

.related-grid p {
  color: var(--ink-faint);
  font-family: var(--reading);
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.related-text-card {
  border: 1px solid var(--line);
  background: #f1eadf;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  display: flex;
}

.related-text-card h3 {
  font-size: 28px;
}

.related-text-card .read-next-link {
  margin-top: 24px;
}

@media (width<=1120px) {
  .reading-layout {
    grid-template-columns: 52px minmax(0,700px);
    max-width: 850px;
  }

  .article-sidebar {
    display: none;
  }

  .next-read-card {
    grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr);
  }
}

/* The same structural change, keyed to the reading area's own width instead of
   the viewport's. See "CONTAINER-DRIVEN LAYOUT" at the end of this file for why
   both exist and why this block must stay immediately after its `@media` twin. */
@container nria-paper (width<=1120px) {
  .reading-layout {
    grid-template-columns: 52px minmax(0,700px);
    max-width: 850px;
  }

  .article-sidebar {
    display: none;
  }

  .next-read-card {
    grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr);
  }
}

@media (width<=820px) {
  .article-header-width {
    width: min(100% - 36px,740px);
  }

  .article-intro h1 {
    font-size: 62px;
  }

  .article-meta-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .reading-layout {
    width: min(100% - 36px,720px);
    display: block;
  }

  .share-rail {
    display: none;
  }

  .related-grid {
    gap: 16px;
  }

  .related-grid h3 {
    font-size: 18px;
  }

  .related-text-card h3 {
    font-size: 23px;
  }
}

/* Container twin of the block above. Only the two structural declarations —
   nothing typographic, which stays keyed to the device. */
@container nria-paper (width<=820px) {
  .reading-layout {
    width: min(100% - 36px,720px);
    display: block;
  }

  .share-rail {
    display: none;
  }
}

@media (width<=640px) {
  .article-header-width {
    width: calc(100% - 34px);
  }

  .article-intro {
    padding: 27px 0 34px;
  }

  .breadcrumbs,
  .rank-math-breadcrumb {
    margin-bottom: 25px;
    font-size: 10px;
  }

  .section-kicker {
    font-size: 9px;
  }

  .article-intro h1 {
    letter-spacing: -.045em;
    text-wrap: pretty;
    margin-top: 14px;
    font-size: clamp(43px,12.3vw,55px);
    line-height: .99;
  }

  .standfirst {
    margin-top: 19px;
    font-size: 19px;
    line-height: 1.42;
  }

  .article-meta-block {
    gap: 20px;
    margin-top: 25px;
    padding-top: 19px;
  }

  .author-monogram {
    width: 39px;
    height: 39px;
  }

  .intro-actions {
    grid-template-columns: 1fr auto auto;
    width: 100%;
    display: grid;
  }

  .google-source-button {
    min-width: 0;
  }

  .action-button {
    min-width: 44px;
    height: 44px;
  }

  .action-button span {
    display: none;
  }

  .paper-surface {
    padding-top: 0;
  }

  .lead-figure {
    width: 100%;
  }

  .lead-image-wrap {
    height: 64vw;
    min-height: 260px;
    max-height: 390px;
  }

  .lead-image-wrap img {
    object-position: center 58%;
  }

  .image-story-mark {
    padding: 6px 8px;
    font-size: 7px;
    bottom: 13px;
    right: 13px;
  }

  .lead-figure figcaption {
    padding-inline: 17px;
    font-size: 10px;
  }

  .reading-layout {
    width: 100%;
    padding: 37px 17px 52px;
  }

  .article-copy {
    font-size: 19px;
    line-height: 1.7;
  }

  .article-copy.text-size-1 {
    font-size: 21px;
  }

  .article-copy.text-size-2 {
    font-size: 23px;
  }

  .article-copy .source-line {
    margin-bottom: 25px;
    font-size: 10px;
  }

  .opening-paragraph:first-letter {
    margin-top: 8px;
    font-size: 69px;
  }

  .article-copy h2 {
    margin-top: 1.8em;
    font-size: 29px;
  }

  .article-copy blockquote {
    margin: 42px 0;
    padding-left: 24px;
  }

  .article-copy blockquote p {
    font-size: 26px;
  }

  .in-article-ad {
    margin: 42px -1px 46px;
  }

  .in-article-ad>div {
    padding: 21px;
  }

  .in-article-ad h3,
  .in-article-ad .ad-title {
    font-size: 23px;
  }

  .article-tags {
    gap: 6px;
  }

  .whatsapp-follow-note {
    gap: 11px;
    margin-top: 28px;
    padding: 15px 16px;
  }

  .whatsapp-follow-note>span {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .whatsapp-follow-note p {
    font-size: 11px;
  }

  .author-card {
    grid-template-columns: 58px 1fr;
    gap: 16px;
    margin-top: 46px;
    padding: 21px 18px;
  }

  .author-card-mark {
    width: 58px;
    height: 58px;
    font-size: 18px;
  }

  .author-card h2 {
    margin-top: 5px;
    font-size: 21px;
  }

  .next-read,
  .related-reading {
    padding-block: 38px;
  }

  .next-read-card {
    min-height: 0;
    display: block;
  }

  .next-image {
    aspect-ratio: 1.4;
  }

  .next-read-card>div:last-child {
    padding: 26px 22px 30px;
  }

  .next-read-card h2 {
    font-size: 29px;
  }

  .related-reading {
    width: 100%;
    padding-left: 17px;
    overflow: hidden;
  }

  .related-reading .section-rule-heading {
    padding-right: 17px;
  }

  .related-grid {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    grid-auto-flow: column;
    gap: 12px;
    padding-bottom: 8px;
    padding-right: 17px;
    display: grid;
    overflow-x: auto;
  }

  .related-grid::-webkit-scrollbar {
    display: none;
  }

  .related-grid>a {
    scroll-snap-align: start;
  }

  .related-grid h3 {
    font-size: 20px;
  }

  .related-text-card {
    min-height: 300px;
  }
}


/* ==========================================================================
   SPONSOR SLOT SPACE RESERVATION (added at integration)

   Contract §8: "Reserve the slot's dimensions in CSS so there is no layout
   shift." Every value below is a dimension the comp already draws.

   `.art-fair-ad img` already carries the comp's own `aspect-ratio: 1.35`, so
   the sidebar creative's box exists before its bytes do; the min-height here
   is that ratio's floor at the rail's own width and is what keeps "Most read"
   from jumping if the artwork is ever swapped for one with no intrinsic size.

   `.in-article-ad` is type only and server-rendered, so it has no async
   content of its own and cannot shift — the reservation it needs is for the
   pasted-tag mode, below.
   ========================================================================== */

.art-fair-ad img {
  min-height: 180px;
}

/* Pasted third-party tags (slot mode "html"). See the note in home.css. */
.nria-ad-html {
  display: block;
  overflow: hidden;
}

.nria-ad-html--sidebar_rail {
  min-height: 360px;
}

.nria-ad-html--in_article {
  min-height: 190px;
  margin: 50px 0 54px;
}

@media (max-width: 760px) {
  .nria-ad-html--in_article {
    margin: 42px -1px 46px;
  }
}


/* ==========================================================================
   CONTAINER-DRIVEN LAYOUT AND OVERFLOW CONTAINMENT (added at 1.0.2)
   --------------------------------------------------------------------------
   WHAT WENT WRONG

   Every responsive rule above keys off the VIEWPORT. In the QA harness the
   viewport and the reading grid's containing block are the same number, so the
   two are indistinguishable and the templates passed at 1440/1024/768/375. On
   the real install they are not the same number: the site still carries an
   unlayered legacy sheet (the same one that produced the black-links bug) and a
   page builder that prints an inline <style> after every stylesheet, and a
   single declaration in either of them —

       main { max-width: 800px; margin: 0 auto }

   or any other width, max-width, padding or float on the bare `main` element —
   narrows the whole article without moving the viewport a pixel. `main` is the
   only bare element between <body> and the templates' own markup and the theme
   never styled it, so nothing stopped that.

   The theme's own contribution, and the reason it was catastrophic rather than
   merely tight, was the reading grid: 58px + minmax(260px,310px) of rails plus
   68px of gap is 386px that could not shrink, and `.article-copy` was the only
   flexible track, so it absorbed the entire shortfall. Measured at a 1512px
   viewport with `main` capped at 800px: `.reading-layout` 744px, share rail
   58px, sidebar 310px, `.article-copy` 308px — 43% of its 720px measure, the
   page 7.3x taller than wide. At a 640px cap the copy is 148px and the page is
   10.8x. That is the reported failure exactly.

   THE FIX, in four parts

   1. `html :where(body) > main` in base.css restates `main`'s geometry at
      0,0,2, so a bare `main { … }` selector at 0,0,1 can no longer resize the
      page. That neutralises the trigger.
   2. The rails' floors became `max`es, above, so no track is unshrinkable.
   3. The structural half of each breakpoint is restated as a CONTAINER query on
      `.paper-surface` (see the `@container nria-paper` blocks, each printed
      immediately after the `@media` block it mirrors), so the sidebar and the
      share rail come out on the reading area's OWN width whatever narrowed it.
      Only the structural rules are duplicated — type size stays viewport-keyed,
      which is correct: the reader's device decides that, not the column.

      Each `@container` block sits directly after its `@media` twin and nowhere
      else. Container queries add no specificity, so a block placed at the end
      of the file would out-order the narrower media queries below it and
      re-widen `.reading-layout` at 375. Keep them paired.

   4. Everything below this comment: the reading grid's children all declare
      `min-width: 0`, and anything that can be oversized is capped and given its
      own scroller.

   In the clean case the container and the viewport are the same width at every
   breakpoint, so these fire in lockstep with the media queries and change
   nothing: all eleven templates are pixel-identical at 1512/1440/1024/768/375
   before and after — 55 captures, zero differing pixels. Verified, not assumed.

   A browser without container queries drops the `@container` blocks and behaves
   exactly as it does today, so this is progressive enhancement, not a floor
   change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OVERFLOW CONTAINMENT

   A grid item whose `min-width` resolves to `auto` is at least as wide as its
   min-content, so one oversized child — a Twitter embed's 550px iframe, a
   full-size upload, a nine-column table, a <pre> holding one 190-character
   command — can push a track out and squeeze its siblings. `.article-copy`
   already declared `min-width: 0`; the rails did not. All three do now, and
   the things that can be oversized are capped and given their own scroller, so
   wide content scrolls inside itself instead of widening or squeezing the page.
   -------------------------------------------------------------------------- */

.reading-layout > * {
  min-width: 0;
}

/* Below 640px both of these are `width: 100%` plus horizontal padding, so they
   are the article template's two dependencies on the global `* { box-sizing:
   border-box }`. That reset is 0,0,0 and loses to a page builder's inline
   `* { box-sizing: content-box }` on source order; restated at 0,1,0 it cannot.
   See the matching block in base.css. */
.reading-layout,
.related-reading {
  box-sizing: border-box;
}

.article-copy {
  overflow-wrap: break-word;
}

.article-copy :is(img, svg, video, canvas, iframe, embed, object, figure, pre) {
  max-width: 100%;
}

/* `.wp-block-table` and `.wp-block-embed__wrapper` are Gutenberg's own
   wrappers; `pre` is the classic editor's, which has none. */
.article-copy :is(pre, .wp-block-table, .wp-block-embed__wrapper) {
  overflow-x: auto;
}

/* A bare <table> pasted by the classic editor has no wrapper to scroll inside,
   so the table box becomes its own scroller. The rows still form one anonymous
   table inside it, so columns stay aligned; a table narrower than the column
   renders exactly as it did. */
.article-copy table {
  width: max-content;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.article-sidebar :is(img, svg, video, iframe, embed, object) {
  max-width: 100%;
}


/* --- Forms in article copy (1.1.2) ---------------------------------
   Contact Form 7 (the /contact/ and /advertise/ forms, shortcode 5267) and The
   Newsletter Plugin both render their controls inside post content, and until
   1.1.2 nothing here styled them. The unlayered hardening block at the foot of
   base.css deliberately restates the preflight's `button, input, select,
   textarea { font: inherit; color: inherit; background-color: transparent;
   border-radius: 0 }` at 0,0,2 so a legacy plugin sheet cannot re-type the
   site's fields — which left every field on a paper page transparent on paper,
   borderless (the preflight zeroes borders) and therefore invisible: labels
   with nothing under them and no submit button. That block is correct and is
   not weakened; the fields are given a treatment here instead, above it on
   specificity.

   Nothing below is invented. The geometry (48px control, 3px radius, 15px
   inline padding, 10px/700/.1em label, the gold submit) is
   `.newsletter-inner input` / `button` / `form label` — the comps' only field
   treatment. The paper colours are the article comp's own field-like chip,
   `.article-tags a` ({ border: 1px solid var(--line); background: #fffdf8 }),
   the small-caps navy of `.nria-page-copy th`, the sent-state wash of
   `.subscribe-success` (#d6ac5b12) and the comps' live red #ec6d5f for the
   invalid state. The focus ring is `--navy-900` rather than the dark band's
   gold, because gold on paper is the link colour.

   Every element-level rule carries `:where(:not(.newsletter-block *))`. The
   `[newsletter]` shortcode (inc/compat.php) renders the dark newsletter band
   *inside* `.article-copy`, so without that guard the paper treatment would
   overwrite the band's own dark fields. `:where()` contributes no specificity,
   so the guard costs nothing and `.wpcf7-not-valid` below can still win.
   -------------------------------------------------------------------------- */

/* CF7 and tnp wrappers. Both are direct children of the copy column and both
   set their own measure; the sans face is the form system's, not the prose's. */
.article-copy .wpcf7,
.article-copy .tnp-subscription {
  font-family: var(--sans);
  margin: 34px 0;
}

.article-copy .wpcf7-form,
.article-copy .tnp-subscription form {
  margin: 0;
}

/* CF7 emits one <p> per field; the hardening block zeroes its margin. */
.article-copy .wpcf7-form p,
.article-copy .tnp-field {
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

.article-copy .wpcf7-form p:last-child,
.article-copy .tnp-field:last-child {
  margin-bottom: 0;
}

/* from `.newsletter-inner form label`, recoloured to `.nria-page-copy th`'s
   navy for the paper surface. CF7 wraps the control inside the <label>, so the
   bottom margin lands under the whole field rather than under the caption; the
   caption/control gap is the `margin-top` on the wrap below. */
.article-copy form label:where(:not(.newsletter-block *)),
.article-copy .tnp-field label {
  color: var(--navy-900);
  font-family: var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 9px;
  display: block;
}

.article-copy .wpcf7-form-control-wrap {
  margin-top: 9px;
  display: block;
}

/* --- The controls ---------------------------------------------------------- */

.article-copy :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  textarea,
  select
):where(:not(.newsletter-block *)) {
  box-sizing: border-box;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: none;
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  display: block;
}

/* `appearance: none` is withheld from <select> on purpose: it would take the
   native caret with it, and the comps have no caret glyph to put back. */
.article-copy :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  textarea
):where(:not(.newsletter-block *)) {
  -webkit-appearance: none;
  appearance: none;
}

.article-copy textarea:where(:not(.newsletter-block *)) {
  min-height: 190px;
  padding: 14px 15px;
  resize: vertical;
}

.article-copy select:where(:not(.newsletter-block *)) {
  padding-right: 11px;
}

/* from `.newsletter-inner input:focus`, gold swapped for navy. #0a15241f is
   --navy-900 at 12%; the ring technique is `.trend-label i`'s. */
.article-copy :is(input, textarea, select):where(:not(.newsletter-block *)):focus {
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px #0a15241f;
}

.article-copy :is(input, textarea):where(:not(.newsletter-block *))::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

.article-copy :is(input, textarea, select):where(:not(.newsletter-block *))[disabled] {
  background: var(--paper-deep);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* Any control type not enumerated above — a file field, a multi-select, a
   range — at least keeps the form's face and stays inside the measure. */
.article-copy .wpcf7-form-control:where(:not(.newsletter-block *)) {
  max-width: 100%;
  font-family: var(--sans);
}

/* --- Submit ---------------------------------------------------------------- */

/* verbatim from `.newsletter-inner button`, plus the uppercase tracking the
   comps give every other gold chip (`.utility-subscribe`). */
.article-copy :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):where(:not(.newsletter-block *)) {
  box-sizing: border-box;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #211806;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 3px;
  width: auto;
  min-height: 48px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  display: inline-block;
}

/* from `.share-rail button:hover`, which is the paper surface's only button
   hover: it darkens to the gold-deep step rather than lightening. */
.article-copy :is(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):where(:not(.newsletter-block *)):hover {
  border-color: var(--gold-deep);
  background: var(--gold-deep);
}

/* The dark chrome rings in gold (`form.nria-search-form :focus-visible`); on
   paper gold is the link colour, so the ring is navy for the same reason the
   field's focus border is. */
.article-copy :is(input, textarea, select, button):where(:not(.newsletter-block *)):focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 2px;
}

/* --- Choices and consent --------------------------------------------------- */

.article-copy .wpcf7-list-item {
  margin: 0 20px 6px 0;
  display: inline-block;
}

.article-copy .wpcf7-list-item label,
.article-copy .tnp-field-privacy label,
.article-copy .wpcf7-acceptance label {
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 0;
  display: inline-flex;
}

.article-copy :is(input[type="checkbox"], input[type="radio"]):where(:not(.newsletter-block *)) {
  accent-color: var(--gold-dark);
  flex: none;
  width: 15px;
  height: 15px;
}

/* --- CF7 messages ---------------------------------------------------------- */

/* Both restated from Contact Form 7's own stylesheet, which an optimisation
   plugin may have dequeued and which the theme must not depend on: without the
   first the live-region duplicate of every message prints as visible text, and
   without the second an empty bordered box sits under every unsubmitted form. */
.article-copy .screen-reader-response {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.article-copy .wpcf7 form.init .wpcf7-response-output,
.article-copy .wpcf7 form.resetting .wpcf7-response-output,
.article-copy .wpcf7 form.submitting .wpcf7-response-output {
  display: none;
}

.article-copy .wpcf7-response-output {
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin: 24px 0 0;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* from `.subscribe-success`, the comps' one success wash. */
.article-copy .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--gold);
  background: #d6ac5b12;
}

.article-copy .wpcf7 form.invalid .wpcf7-response-output,
.article-copy .wpcf7 form.unaccepted .wpcf7-response-output,
.article-copy .wpcf7 form.payment-required .wpcf7-response-output,
.article-copy .wpcf7 form.failed .wpcf7-response-output,
.article-copy .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #ec6d5f;
}

.article-copy .wpcf7-not-valid-tip {
  color: #ec6d5f;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

/* 0,3,0 — above the control rule's 0,2,1, so the invalid border wins. */
.article-copy .wpcf7-form-control.wpcf7-not-valid {
  border-color: #ec6d5f;
}

.article-copy .wpcf7-spinner {
  margin: 0 0 0 14px;
}

/* --- The dark band, when it lands inside the copy column --------------------
   `[newsletter]` (inc/compat.php) renders `template-parts/footer/newsletter.php`
   inside post content — the live subscription page (id 14735) does exactly
   that. In the footer the band inherits the body's 16px sans; inside
   `.article-copy` it inherited the reading serif at 20px/1.72 instead, because
   the comp's `.newsletter-inner input` sets no face and the hardening block's
   `font: inherit` then handed it the prose. Restated here as the body's own
   values, so the band renders identically wherever it is placed. Its fields
   are otherwise untouched: every rule above is guarded against them.
   -------------------------------------------------------------------------- */
.article-copy .newsletter-block {
  font-family: var(--sans);
  font-size: 16px;
  line-height: normal;
}

/* Same cause, the other half: the hardening block hands the band's headings
   and links `color: inherit` at 0,0,2, which `.article-copy h2` (0,1,1) and
   `.article-copy a` (0,1,1) outrank — so the band's headline rendered near-black
   on navy. Restated at 0,2,1. */
.article-copy .newsletter-block :is(a, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* Below 640px the newsletter band's submit goes full width; the page forms
   follow it. Breakpoint copied from `.newsletter-inner button`'s own. */
@media (width<=640px) {
  .article-copy :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"]
  ):where(:not(.newsletter-block *)) {
    width: 100%;
  }

  .article-copy textarea:where(:not(.newsletter-block *)) {
    min-height: 150px;
  }
}


/* ==========================================================================
   1.3.0 — THE ARTICLE-PROSE BLOCK
   ==========================================================================
   The gap INTEGRATION-REPORT §G.1 deferred, closed. Four elements inside
   `.article-copy` had no rule at all, so each fell through to whatever the
   cascade happened to leave, and the editor canvas (assets/css/editor.css) has
   been promising a different result to writers since 1.1.0:

     h3          canvas Fraunces 26/600   → page Fraunces 20/400 on most posts,
                 and 25px — LARGER THAN h2's 24px — on others. A subhead level
                 that is byte-identical to a paragraph in size, weight, leading
                 and colour, or else out of order. 994 posts use headings;
                 /vfs-global-…/ carries seven h3 and no h2, so its entire
                 structure was flat. (READ-01, CODE-16, WRITE-03)
     a           canvas --gold-dark + underline → page rgb(40,43,46), the exact
                 colour of the surrounding paragraph, `text-decoration: none`,
                 `border-bottom: 0`. Not "hard to see": a body link was
                 distinguishable from ordinary text by NOTHING. On classic-editor
                 posts not even by weight. WCAG 2.1 SC 1.4.1 outright, on a house
                 style that requires two to ten sourced links per news piece.
                 (CODE-01)
     figcaption  unstyled, therefore inconsistent by editor: Gutenberg captions
                 got 14px Hanken from theme.json, classic `.wp-caption-text` got
                 Newsreader 20px near-black — identical to body copy. (READ-01)
     blockquote  canvas Hanken 13px grey → page Newsreader 30px near-black. A
       cite      writer types a short attribution because the editor shows it
                 small and ships a 30px line. (WRITE-03)

   Values are traced from editor.css so the canvas and the page now agree
   element for element; the link treatment is `.nria-page-copy a`'s colour
   (base.css:2326) plus the underline WCAG requires and the comp's own body
   links carry.
   -------------------------------------------------------------------------- */

/* Subheads. Sized in `em` rather than px on purpose: `.article-copy` changes
   its font-size at the two text-size steps, and with fixed headings the body
   grew to 24px against a fixed 34px h2 — the size ratio fell from 1.70 to 1.42
   and the hierarchy flattened just when a reader who needs larger text is
   relying on it (READ-17). 1.7em/1.3em reproduce 34px/26px exactly at the
   default 20px. */
.article-copy h2 {
  font-size: 1.7em;
}

.article-copy h3 {
  color: #13171c;
  font-family: var(--display);
  font-size: 1.3em;                          /* 26px at the default step */
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 1.6em 0 .5em;
}

.article-copy h4 {
  color: #13171c;
  font-family: var(--display);
  font-size: 1.05em;                         /* 21px at the default step */
  font-weight: 600;
  line-height: 1.25;
  margin: 1.5em 0 .5em;
}

/* Links in running text. Colour AND underline: SC 1.4.1 is not satisfied by
   colour alone, and this palette's gold on cream is exactly the case the
   criterion exists for. The 0,1,1 specificity clears base.css's 0,0,2 hardening
   block, which is what was suppressing theme.json's own `a { color }` rule. */
.article-copy a:where(:not(.wp-element-button):not(.nria-ad-link):not(.read-next-link)) {
  color: var(--gold-paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

.article-copy a:where(:not(.wp-element-button):not(.nria-ad-link):not(.read-next-link)):hover,
.article-copy a:where(:not(.wp-element-button):not(.nria-ad-link):not(.read-next-link)):focus-visible {
  text-decoration-thickness: 2px;
}

/* Body captions. `.wp-caption-text` is the classic editor's; `.wp-element-caption`
   is Gutenberg's; `figcaption` catches everything else. All three now say what
   the comp says (ref.css:164) and what the canvas already showed. */
.article-copy :is(figcaption, .wp-caption-text, .wp-element-caption) {
  color: var(--ink-faint-paper);
  font-family: var(--reading);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  margin-top: 9px;
  text-align: left;
}

/* Quote attribution. */
.article-copy blockquote :is(cite, .wp-block-quote__citation, footer) {
  display: block;
  color: var(--ink-faint-paper);
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.5;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   READ-07 — a third-party embed fallback is not a pull quote
   --------------------------------------------------------------------------
   `blockquote.twitter-tweet` is the markup X ships for widgets.js to replace.
   Until the script runs — and permanently for any reader whose browser blocks
   it, and on every page load in between — it is a visible blockquote, and
   `.article-copy blockquote` was giving it the full house treatment: 3px gold
   rule, 52px margins, its paragraph at Fraunces 31px/500 navy. So
   "🥉 Bronzed brilliance for Jesse Moore in the men's individua…" was presented
   to the reader as an editorial pull quote from NRI Affairs.

   The pull-quote treatment is withdrawn from every known embed fallback and
   from anything inside a `.wp-block-embed` wrapper. Everything else — a real
   `core/quote`, a classic `<blockquote>` — is untouched.
   -------------------------------------------------------------------------- */
.article-copy blockquote:is(
  .twitter-tweet,
  .instagram-media,
  .tiktok-embed,
  .reddit-card,
  .reddit-embed,
  .mastodon-embed,
  .bluesky-embed
),
.article-copy .wp-block-embed blockquote {
  border-left: 0;
  margin: 24px 0;
  padding: 0;
}

.article-copy blockquote:is(
  .twitter-tweet,
  .instagram-media,
  .tiktok-embed,
  .reddit-card,
  .reddit-embed,
  .mastodon-embed,
  .bluesky-embed
) p,
.article-copy .wp-block-embed blockquote p {
  color: #282b2e;
  font-family: var(--reading);
  font-size: .85em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 .8em;
}

.article-copy blockquote:is(.twitter-tweet, .instagram-media, .tiktok-embed) > span {
  display: none;                             /* the 92px gold glyph, withdrawn */
}

/* --------------------------------------------------------------------------
   READ-06 — wide tables scroll, and are set as tabular data
   --------------------------------------------------------------------------
   The old rule was `width: max-content; max-width: 100%` on the table itself.
   Those two cancel: `max-width` clamps the box straight back to the column, so
   the intrinsic width the scroller depends on never materialises and there is
   nothing to scroll. Measured at 375 on /nre-nro-fcnr-account-difference-nri/:
   `width: 326, scrollWidth: 326, overflow-x: auto` — six columns of
   61/56/54/52/52/51px and a 182px-tall data row.

   The wrapper scrolls; the table is free. Gutenberg supplies `.wp-block-table`;
   a bare classic table is wrapped in `.nria-table-scroll` by
   nria_wrap_bare_tables() in single.php. Cell typography mirrors
   `.nria-page-copy th/td` (base.css:2441), which already had it right.
   -------------------------------------------------------------------------- */
.article-copy :is(.nria-table-scroll, .wp-block-table) {
  max-width: 100%;
  overflow-x: auto;
  margin: 34px 0;
  -webkit-overflow-scrolling: touch;
}

.article-copy :is(.nria-table-scroll, .wp-block-table) > table,
.article-copy > table {
  display: table;
  width: max-content;
  max-width: none;                           /* the clamp that broke the scroll */
  min-width: 100%;
  border-collapse: collapse;
  margin: 0;
  overflow: visible;
}

.article-copy :is(th, td) {
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  padding: 10px 16px 10px 0;
  text-align: left;
  vertical-align: top;
}

.article-copy th {
  color: var(--navy-900);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The scroll container is focusable (role="region" + tabindex="0") so a
   keyboard user can reach the scrollbar; give the focus a visible ring. */
.article-copy .nria-table-scroll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   READ-05 — long headlines
   --------------------------------------------------------------------------
   A 129-character title ran to seven lines / 591px at 1440 inside a 1,012px
   `.article-intro`, i.e. the entire first viewport was headline. At 375 the
   word "disproportionately" measured 377px against a 326px content box —
   `scrollWidth 377 > clientWidth 326`, `overflow-wrap: normal` — and was
   clipped at the viewport edge, reading "disproportionate". WCAG 1.4.10.

   Two separate fixes, because they are two separate problems:
     - `overflow-wrap: anywhere` so nothing is ever truncated. Scoped to the
       headline (the copy has had it since 1.1.2 — the headline was missed) and
       paired with `hyphens: auto`, which breaks at a syllable where the
       language rules allow one and only falls back to a hard break otherwise.
     - a length step-down. Only 4 of 600 sampled titles carry a ≥17-character
       word and the median title is ~60 characters, so a blanket smaller clamp
       would cost the comp its headline on the 99% that are fine. The class
       comes from article-intro.php.
   -------------------------------------------------------------------------- */
.article-intro h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.article-intro h1.is-len-medium {
  font-size: clamp(52px, 5.4vw, 76px);
}

.article-intro h1.is-len-long {
  font-size: clamp(46px, 4.6vw, 64px);
  line-height: 1;
}

.article-intro h1.is-len-xlong {
  font-size: clamp(40px, 3.9vw, 54px);
  line-height: 1.04;
}

/* Card and rail headlines can meet the same word. Cheaper here than a second
   PHP measurement, and harmless on short titles. */
.next-read-card h2,
.related-text-card h3,
.sidebar-list > a p {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   READ-08 — inline images narrower than the measure
   --------------------------------------------------------------------------
   64 of 300 sampled posts carry `<img style="width:NNNpx">` and 31 carry a
   `width="…"` attribute between 110 and 700px, all from the legacy editor. Left
   flush left inside the 720px column they leave up to 443px of dead space and a
   ragged right edge down the reading column.
   -------------------------------------------------------------------------- */
.article-copy :is(figure, .wp-block-image) {
  text-align: center;
}

.article-copy :is(figure, .wp-block-image) img {
  display: block;
  margin-inline: auto;
}

.article-copy :is(figure, .wp-block-image) figcaption {
  text-align: left;
}

/* READ2-05 — the half of READ-08 the rule above cannot reach. A figure the
   editor centred and resized (`.aligncenter.is-resized`) is `display: table`
   at exactly its image's width, so centring the img INSIDE it moves nothing;
   the figure itself has to be centred, and nothing else in the cascade sets
   its inline margins (core's `:where(figure)` only sets the block ones, the
   theme's reset zeroes all four). 26 of 200 sampled posts carry
   `is-resized`, 19 `aligncenter`. */
.article-copy :is(figure, .wp-block-image).aligncenter,
.article-copy .wp-block-image.is-resized {
  margin-inline: auto;
}

/* READ-20 — video embeds present at the provider's ratio, not at whatever the
   oEmbed cache happened to store. One article's YouTube player letterboxed
   inside a 4:3 box, wasting 135px of column height. */
.article-copy .wp-block-embed.is-type-video :is(iframe, .wp-block-embed__wrapper > iframe) {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   READ-04 / A11Y-02 — Devanagari typography on Hindi articles
   --------------------------------------------------------------------------
   `body.nria-hindi` has been emitted since 1.0 and `grep -rn "nria-hindi"
   assets/css/` returned NOTHING — the class was set and never used. The
   archive/home Devanagari stacks are scoped to `.nria-hi`, which the single
   template never sets, so a Hindi article declared
   `font-family: Newsreader, Georgia, serif` — a stack with no Devanagari
   coverage at all — and silently dropped to whatever the OS offered. Measured:
   "सामाजिक रूप से सक्रिय" is 185px in Newsreader, 185px in Georgia, 186px in
   generic serif and 177px in Noto Sans Devanagari. Hindi readers were getting a
   different, unspecified face from English readers.

   Worse at display size: the h1 rendered Fraunces 88px at line-height 0.96 —
   253px of box for a string that needs 351px at `normal` — so the i-matras and
   e-matras of lines 2 and 3 overlapped the glyphs above them
   (audit2/shots/READ-hindi-h1-matra-collision.jpg). Devanagari display type
   needs ≥1.3 line-height for matras and reph, and no negative tracking.

   Stacks are copied verbatim from base.css:1846's `.nria-hi` block so a Hindi
   post and a Hindi archive card can never disagree about the face.
   -------------------------------------------------------------------------- */
body.nria-hindi .article-intro h1 {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0;
  text-wrap: pretty;
}

body.nria-hindi .standfirst {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  line-height: 1.6;
}

body.nria-hindi .article-copy {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  line-height: 1.85;
}

body.nria-hindi .article-copy :is(h2, h3, h4) {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  line-height: 1.4;
  letter-spacing: 0;
}

body.nria-hindi .article-copy blockquote p {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  line-height: 1.45;
}

body.nria-hindi :is(.section-kicker, .rail-label, .article-meta-block, .article-tags) {
  font-family: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  letter-spacing: .04em;
}

/* A11Y-R3-03 — the "Continue reading" and "More from" cards on a Hindi
   article. They sit outside `article.article-copy[lang=hi-IN]` (the document
   itself is en-GB since A11Y-R2-03), so once READ2-02 made them Hindi their
   headlines were declared English and set in Fraunces at line-height
   1.08–1.14 (35/28/21px): the glyphs fell back to whatever Devanagari face the
   OS had, with no room for matras. next-read.php and related-reading.php now
   put lang="hi" on a headline or excerpt that carries Devanagari; these rules
   give those elements the archive card's Devanagari treatment (base.css,
   `.nria-card.nria-hi .nria-card-title`: Noto Serif Devanagari 600, 1.34, no
   tracking). Keyed on :lang() so the face follows the attribute the screen
   reader follows; (0,2,1) clears `.next-read-card h2` and the ≤640px sizes. */
.next-read-card h2:lang(hi),
.related-grid h3:lang(hi) {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0;
}

.next-read-card p:lang(hi),
.related-grid p:lang(hi) {
  font-family: "Noto Serif Devanagari", "Nirmala UI", serif;
  line-height: 1.6;
}

/* The drop cap is a Latin conceit and a Devanagari matra is not a capital;
   floating one letter out of a conjunct is a typographic error, not a flourish. */
body.nria-hindi .opening-paragraph:first-letter {
  float: none;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  margin: 0;
  color: inherit;
}

/* --------------------------------------------------------------------------
   A11Y-01 — the paper-surface contrast tokens, applied
   --------------------------------------------------------------------------
   One root cause: `--gold-dark #9b722f`, `--gold-deep #a87f33` and
   `--ink-faint #7b7973` were picked against the navy chrome, where they pass
   comfortably (gold on navy is 8.65:1 and is left completely alone), and reused
   on the cream and paper grounds, where they do not. 34 failing nodes on the
   article template alone, from 2.57:1 to 4.26:1, across figure captions,
   article tags, author bylines, "read next" links, sidebar links and the
   trivia/poll kickers — reading furniture, not decoration. Several runs are
   8–11px, well under the theme's own body size, and one is 20px normal weight,
   which is NOT WCAG "large text" (that is 24px normal / 18.66px bold).

   The replacements are defined in base.css and verified against every paper
   ground in use — #fffdf8, #fbf8f1, #f3ede2, #f1eadf, #f0e9dd, #f3f3e9,
   #efe7d8 — with the worst case, `--gold-paper` on #efe7d8, at 5.04:1.
   -------------------------------------------------------------------------- */
.read-next-link,
.author-card a,
.author-card .eyebrow,
.sidebar-heading .eyebrow,
.next-read-card .eyebrow,
.related-text-card .eyebrow,
.related-grid .eyebrow,
.section-rule-heading > a,
.article-notes a,
.article-tags a,
.in-article-ad a,
.in-article-ad p {
  color: var(--gold-paper);
}

/* A11Y-R2-01 — the six nodes the T-17 list missed, because the image-card
   variant (`.related-grid`, which is what renders now that the backfilled
   posts have images) and the in-article ad's kicker/label were not in it:
   `.related-grid .eyebrow` and `.section-rule-heading > a` were #9b722f on
   #fbf8f1 = 4.09:1 at 10px bold; `.related-grid p` #7b7973 on #fbf8f1 =
   4.10:1 at 12px; `.in-article-ad p` #9b722f on #efe7d8 = 3.53:1 at 10px bold;
   `.in-article-ad .ad-label` #8e836f on #efe7d8 = 3.04:1. After:
   --gold-paper #7d5b22 = 5.84:1 on #fbf8f1 and 5.04:1 on #efe7d8;
   --ink-faint-paper #67655e = 5.50:1 on #fbf8f1 and 4.75:1 on #efe7d8. */
.related-grid p,
.in-article-ad .ad-label {
  color: var(--ink-faint-paper);
}

.sidebar-list > a > span {
  color: var(--gold-paper);                  /* was #b09a72 — 2.57:1, the worst on the site */
}

.lead-figure figcaption,
.rail-label,
.article-tags span,
.related-text-card > p,
.article-copy .wp-element-caption {
  color: var(--ink-faint-paper);
}

/* READ-17 — the text-size control shows its state. The comp ships `.is-active`
   for rail buttons (ref.css:169) and nothing was ever applying it. */
.share-rail button.is-active,
.mobile-share-bar button.is-active {
  border-color: var(--gold-paper);
  color: var(--gold-paper);
  background: #fdf6e8;
}