/* ==========================================================================
     HEADER — only the rgba/blur override is unique to RR article; rest canonical in base.css
     ========================================================================== */
  .site-header {
    background: rgba(250,250,246,0.78);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
  }

  /* ==========================================================================
     HERO
     ========================================================================== */
  .hero {
    padding: calc(var(--announce-h) + var(--header-h-default) + var(--space-8)) var(--space-7) var(--space-7);
    text-align: center;
    max-width: var(--max-page);
    margin: 0 auto;
  }
  .hero-colophon {
    height: clamp(120px, 14vw, 180px);
    width: auto;
    margin: 0 auto var(--space-6);
    display: block;
  }
  .hero-tagline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-display-hero);
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    text-transform: uppercase;
    max-width: 1200px;
    margin: 0 auto;
  }
  .hero-tagline .pop { color: var(--color-accent); }

  /* ==========================================================================
     FEATURED BOOK BANNER (EST)
     ========================================================================== */
  .featured-banner {
    position: relative;
    background: var(--color-dark-bg);
    color: var(--color-dark-text);
    padding: var(--space-9) var(--space-7);
    overflow: hidden;
    isolation: isolate;
  }
  /* atmospheric underlay — darkened/blurred EST cover */
  .featured-banner::before {
    content: '';
    position: absolute;
    inset: -40px;
    background: url('../../img/EST_EBOOK_COVER_FINAL_APPROVED.jpg') center/cover no-repeat;
    filter: blur(60px) brightness(0.35) saturate(1.2);
    z-index: -2;
    opacity: 0.7;
  }
  /* dark gradient overlay keeps content readable */
  .featured-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.72) 55%, rgba(26,26,26,0.5) 100%);
    z-index: -1;
  }
  .featured-banner-inner {
    max-width: var(--max-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: var(--space-8);
    align-items: center;
    position: relative;
  }
  .featured-cover {
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    transition: transform var(--dur-long) var(--ease-out);
  }
  .featured-cover:hover { transform: translateY(-4px); }
  .featured-cover img {
    width: 100%;
    height: auto;
    display: block;
  }
  .featured-content .eyebrow {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-5);
  }
  .featured-author {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--color-dark-muted);
    margin-bottom: var(--space-3);
  }
  .featured-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-display-banner);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--color-dark-text);
    text-transform: uppercase;
    margin-bottom: var(--space-5);
  }
  .featured-teaser {
    font-family: var(--font-body);
    font-size: var(--fs-body-large);
    line-height: 1.65;
    max-width: 640px;
    color: var(--color-dark-text);
    opacity: 0.9;
    margin-bottom: var(--space-6);
  }
  .featured-teaser em { font-style: italic; font-weight: 500; }
  .featured-cta { display: flex; gap: var(--space-3); }
  .btn {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-body-sm);
    letter-spacing: var(--track-cta);
    text-transform: uppercase;
    padding: 16px 28px;
    border: 1px solid transparent;
    display: inline-block;
    transition: all var(--dur-short) var(--ease-out);
  }
  .btn-primary {
    background: var(--color-accent);
    color: var(--color-dark-text);
  }
  .btn-primary:hover { background: var(--color-accent-hover); }
  .btn-ghost {
    background: transparent;
    color: var(--color-dark-text);
    border-color: var(--color-dark-muted);
  }
  .btn-ghost:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

  /* ==========================================================================
     READING ROOM
     ========================================================================== */
  .reading-room {
    padding: var(--space-7) var(--space-7) var(--space-9);
  }
  .reading-room-inner { max-width: var(--max-page); margin: 0 auto; }
  .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-8);
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  .section-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-display-section);
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    text-transform: uppercase;
  }
  .view-all {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--color-accent);
    padding-bottom: 6px;
    position: relative;
  }
  .view-all::after {
    content: ' →';
    transition: transform var(--dur-short) var(--ease-out);
    display: inline-block;
  }
  .view-all:hover::after { transform: translateX(4px); }

  .editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .editorial-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform var(--dur-medium) var(--ease-out);
  }
  .editorial-card:hover { transform: translateY(-3px); }
  .card-thumb {
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--color-border);
    width: 100%;
    max-width: 240px;
  }
  .card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-long) var(--ease-out);
  }
  .editorial-card:hover .card-thumb img { transform: scale(1.04); }
  .card-body { padding-top: 8px; }
  .card-tag {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-micro);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
  }
  .card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-display-card);
    line-height: 1.22;
    letter-spacing: -0.005em;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
  }
  .card-excerpt {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--color-muted);
    margin-bottom: var(--space-3);
  }
  .card-meta {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    color: var(--color-muted);
  }

  /* ==========================================================================
     BOOKS — fluid cover grid (3-col, muted resting state, vibrant on hover)
     ========================================================================== */
  .upcoming {
    padding: var(--space-9) var(--space-7) var(--space-7);
    background: #F4F2EC;
  }
  .upcoming-inner { max-width: var(--max-page); margin: 0 auto; }

  .books-cover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 48px;
    margin-top: var(--space-7);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .book-cover-tile {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #F4F2EC;
    cursor: pointer;
    isolation: isolate;
  }
  .book-cover-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s var(--ease-out);
    will-change: opacity;
  }
  .book-cover-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5);
    background: var(--color-bg);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    pointer-events: none;
    z-index: 2;
  }
  .book-cover-tile-overlay .book-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: 14px;
  }
  .book-cover-tile-overlay .book-rule {
    width: 32px;
    height: 1px;
    background: var(--color-accent);
    margin: 0 0 14px;
  }
  .book-cover-tile-overlay .book-author {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
  }
  .book-cover-tile:hover img { opacity: 0.15; }
  .book-cover-tile:hover .book-cover-tile-overlay { opacity: 1; }
  /* ==========================================================================
     READING ROOM ARTICLE — page-specific
     ========================================================================== */
  .rr-breadcrumb {
    max-width: var(--max-page);
    margin: 0 auto;
    padding: calc(var(--announce-h) + var(--header-h-default) + var(--space-6)) var(--space-7) 0;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .rr-breadcrumb a { color: var(--color-muted); transition: color var(--dur-short); }
  .rr-breadcrumb a:hover { color: var(--color-accent); }
  .rr-breadcrumb .sep { margin: 0 12px; opacity: 0.5; }

  /* RR hero — structure matches live CSB /reading-room/ exactly */
  .article-hero {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5) var(--space-6);
  }
  .article-hero-inner {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  /* aspect-ratio:1/1 added 2026-05-07 — every RR article hero renders as a
     square crop regardless of source. Matches home .card-thumb's 1:1 so the
     same article shows the same shape on home and on its detail page.
     Source images get center-cropped via object-fit:cover. */
  .article-hero-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .article-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  /* Bleed-left variant — image extends to the left viewport edge,
     content stays right-side at normal width. Applied per-post (e.g.,
     the M.R. Madonna interview). */
  .article-hero--bleed-left {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .article-hero--bleed-left .article-hero-inner {
    grid-template-columns: 1fr minmax(0, 480px);
    gap: var(--space-7);
    align-items: stretch;
    max-width: calc(480px + 50vw);
    margin-left: 0;
    margin-right: auto;
    padding-right: var(--space-5);
  }
  .article-hero--bleed-left .article-hero-media {
    /* Bleed-left exempts itself from the standard 1:1 hero crop — image fills
       its grid row at natural ratio (Madonna interview headshot specifically). */
    aspect-ratio: auto;
    align-self: stretch;
  }
  .article-hero--bleed-left .article-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .article-hero--wide-image {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-right: 0;
    padding-left: 0;
  }
  .article-hero--wide-image .article-hero-inner {
    position: relative;
    display: block;
    gap: var(--space-5);
    align-items: stretch;
    overflow: hidden;
  }
  .article-hero--wide-image .article-hero-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(26,26,26,0.08) 0%, rgba(26,26,26,0.74) 100%);
    pointer-events: none;
  }
  .article-hero--wide-image .article-hero-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
  }
  .article-hero--wide-image .article-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
  .article-hero--wide-image .article-hero-content {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-6);
    left: 36%; /* clear of the subject's face/shoulder on the left */
    z-index: 2;
    max-width: none;
    margin: 0;
    color: #fff;
  }
  .article-hero--wide-image .article-hero-meta {
    margin-bottom: var(--space-3);
  }
  .article-hero--wide-image .article-hero-tag {
    display: inline-block;
    background: rgba(0,0,0,0.42);
    padding: 12px 20px;
    font-weight: 800;
    color: var(--color-accent);
  }
  .article-hero--wide-image .article-hero-content .article-title {
    font-size: clamp(28px, 2.05vw, 40px);
    line-height: 1.05;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.36);
  }
  .article-title-lock {
    white-space: nowrap;
  }
  body.postid-505 .article-hero--wide-image {
    padding-top: calc(var(--announce-h) + var(--header-h-default) + var(--space-3));
    padding-bottom: var(--space-5);
  }
  body.postid-505 .article-hero--wide-image .article-hero-inner {
    height: clamp(560px, 43.75vw, 900px);
  }
  body.postid-505 .article-hero--wide-image .article-hero-media {
    height: 100%;
    aspect-ratio: auto;
  }
  body.postid-505 .article-hero--wide-image .article-hero-media img {
    object-position: left top;
  }
  body.postid-505 .article-hero--wide-image .article-hero-content {
    top: 50%;
    bottom: auto;
    left: auto;
    right: clamp(36px, 6vw, 96px);
    width: min(42rem, 44vw);
    max-width: none;
    transform: translateY(-50%);
  }
  body.postid-505 .article-hero--wide-image .article-hero-content .article-title {
    font-size: clamp(32px, 2.55vw, 48px);
    line-height: 1.05;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: normal;
    text-wrap: wrap;
  }
  /* Interview (108) hero: SAME framing as the 505 announcement — full-width,
     header offset + top-anchored crop so the head is never cut, headline
     overlaid on the RIGHT and vertically centered. Mark direction 2026-07-06. */
  body.postid-108 .article-hero--wide-image {
    padding-top: calc(var(--announce-h) + var(--header-h-default) + var(--space-3));
    padding-bottom: var(--space-5);
  }
  body.postid-108 .article-hero--wide-image .article-hero-inner {
    height: clamp(560px, 43.75vw, 900px);
  }
  body.postid-108 .article-hero--wide-image .article-hero-media {
    height: 100%;
    aspect-ratio: auto;
  }
  body.postid-108 .article-hero--wide-image .article-hero-media img {
    object-position: left top;
  }
  body.postid-108 .article-hero--wide-image .article-hero-content {
    top: 50%;
    bottom: auto;
    left: auto;
    right: clamp(36px, 6vw, 96px);
    display: block;
    width: min(42rem, 44vw);
    max-width: none;
    transform: translateY(-50%);
  }
  body.postid-108 .article-hero--wide-image .article-hero-content .article-title {
    font-size: clamp(32px, 2.55vw, 48px);
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: normal;
  }
  .article-hero--wide-image .article-hero-dek {
    max-width: 560px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  }
  .article-hero--wide-image .article-share-row { display: none; }
  .article-hero-content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .article-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .article-hero-tag,
  .article-hero-date {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    font-style: normal;
  }
  .article-hero-sep {
    color: var(--color-accent);
    opacity: 0.5;
    font-size: 11px;
  }
  .article-hero-content .article-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--color-ink);
    margin: 0 0 12px;
  }
  .article-hero-dek {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0 0 12px;
  }
  .article-hero-profile-link {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-label);
    letter-spacing: var(--track-cta);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .article-hero-profile-link a {
    border-bottom: 1px solid var(--color-accent);
    transition: color var(--dur-short);
  }
  .article-hero-profile-link a:hover { color: var(--color-accent); }
  /* Lede red-accent — keeps the surrounding body font-size, recolors text only.
     Selector is hoisted with :first-child to outrank line 894's first-child color rule. */
  .article-body > p.rr-lede-accent,
  .article-body > p.rr-lede-accent:first-child { color: var(--color-accent); }
  .article-body > p.rr-lede-accent a { color: var(--color-accent); }
  .article-hero-byline {
    font-family: var(--font-body);
    font-weight: 600;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0;
  }
  .article-share-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
  }
  .article-share-btns { display: flex; gap: 6px; }
  .article-share-label {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-right: var(--space-2);
  }
  .article-share-btns {
    display: inline-flex;
    gap: 8px;
  }
  .article-share-btns a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: all var(--dur-short);
  }
  .article-share-btns a:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent);
  }
  .article-share-btns svg { width: 14px; height: 14px; display: block; }

  .article-body {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-7);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.72;
    color: var(--color-ink);
  }
  body.postid-505 .article-body,
  body.postid-108 .article-body {
    max-width: 1100px;
    padding: var(--space-4) var(--space-7);
    font-size: 18px;
    line-height: 1.75;
  }
  /* The base theme forces article paragraphs to 16px at the <p> level, which
     overrode the container size. Set the paragraphs themselves to 18px so the
     body reads at a comfortable size and the quote matches it exactly.
     Mark direction 2026-07-06. */
  body.postid-505 .article-body p,
  body.postid-505 .article-body li,
  body.postid-108 .article-body p,
  body.postid-108 .article-body li {
    font-size: 18px;
    line-height: 1.75;
  }
  body.postid-505 .article-body .announcement-press-note {
    border-top: 1px solid rgba(179,69,37,0.24);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-muted);
  }
  .article-body p { margin-bottom: var(--space-4); }
  .article-body p:last-child { margin-bottom: 0; }
  .article-body > p:first-child {
    font-size: 20px;
    line-height: 1.65;
    color: var(--color-accent);
  }
  /* Article-body headings need enough hierarchy to keep long craft pieces scannable. */
  .article-body h2,
  .article-body .wp-block-heading {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: clamp(24px, 2.15vw, 30px);
    line-height: 1.18;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
    margin: var(--space-7) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  /* Gutenberg puts .wp-block-heading on h2 AND h3, so the shared rule above
     out-specifies a bare `.article-body h3`. Match the class here so the
     subhead tier survives in multi-level pieces (roundups). */
  .article-body h3,
  .article-body h3.wp-block-heading {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
    margin: var(--space-5) 0 var(--space-2);
    padding-top: 0;
    border-top: 0;
  }
  .article-body ul,
  .article-body ol {
    margin: var(--space-2) 0 var(--space-5);
    padding-left: 1.35em;
  }
  .article-body li {
    margin-bottom: var(--space-2);
    padding-left: 0.2em;
  }
  .article-body li::marker {
    color: var(--color-accent);
    font-weight: 800;
  }
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0 var(--space-6);
    font-size: 15px;
    line-height: 1.45;
  }
  .article-body th,
  .article-body td {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    vertical-align: top;
  }
  .article-body th {
    font-weight: 800;
    color: var(--color-accent);
    background: rgba(179, 69, 37, 0.06);
  }
  /* Article-body links: accent underline (overrides base a {}). */
  .article-body a {
    border-bottom: 1px solid var(--color-accent);
    transition: color var(--dur-short);
  }


  /* ==========================================================================
     ARTICLE BYLINE STRIP — name left, accent rule middle, date right
     Sits between hero and article body. Mark direction 2026-04-27.
     ========================================================================== */
  .article-byline-strip {
    max-width: 1100px;
    margin: var(--space-6) auto var(--space-5);
    padding: 0 var(--space-7);
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .byline-strip-name,
  .byline-strip-date {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--color-ink);
    flex: 0 0 auto;
    margin: 0;
  }
  .byline-strip-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-accent);
    display: block;
  }
  @media (max-width: 600px) {
    .article-byline-strip {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }
    .byline-strip-rule { width: 100%; }
  }
  /* Pullout quote — TWO TREATMENTS, scoped by post type. 2026-05-12.
     Prior single rule applied the Stitch-ABOUT-US giant Archivo Black
     accent (clamp 27px–54px) to ALL .article-body blockquotes, which
     dominated the Reading Room CPT essays (e.g. cover-design-brief-playbook).
     Now: the legacy interview piece (single-post / single-format-standard,
     e.g. conversation-with-mr-madonna) keeps its giant treatment verbatim;
     RR CPT essays get a restrained body-font italic accent ~15% above
     body text, breaking out of the .article-body horizontal padding for
     emphasis without overpowering. .elle-closing override (below) wins
     in both scopes via :not() exclusion. */

  /* Legacy interview piece — giant Stitch-ABOUT-US treatment.
     Archivo Black italic in Roasted Red Pepper, no background. */
  body.postid-108.single-post.single-format-standard .article-body blockquote:not(.elle-closing) {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(27px, 3.75vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-accent);
    text-align: center;
    margin: var(--space-7) 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    border: none;
    background: none;
  }
  body.postid-108.single-post.single-format-standard .article-body blockquote:not(.elle-closing) p {
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin-bottom: var(--space-3);
  }
  body.postid-108.single-post.single-format-standard .article-body blockquote:not(.elle-closing) p:last-child {
    margin-bottom: 0;
  }

  /* Reading Room CPT essays — restrained treatment.
     Body font is 18px; clamp(18px, 1.4vw, 20px) caps at +11% (under the
     15% maximum). Italic accent color, breaks out of .article-body 64px
     horizontal padding so the quote spans the full 860px container while
     body text stays at ~732px. Net: pullquote is 128px wider than the
     text column. */
  body.single-csb_reading .article-body blockquote:not(.elle-closing) {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 1.4vw, 20px);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-accent);
    text-align: center;
    margin: var(--space-6) calc(-1 * var(--space-7));
    padding: var(--space-5) var(--space-6);
    width: auto;
    max-width: none;
    border: none;
    background: none;
  }
  /* Featured announcement (505): a quoted paragraph is NOT a pullquote — it
     reads as ordinary article body text (same size/color/weight, left-aligned,
     no break-out, no italic accent). Mark direction 2026-07-06. */
  body.postid-505.single-post.single-format-standard .article-body blockquote:not(.elle-closing) {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--color-ink);
    text-align: left;
    margin: 0 0 var(--space-4);
    padding: 0;
    width: auto;
    max-width: none;
    border: none;
    background: none;
  }
  body.single-csb_reading .article-body blockquote:not(.elle-closing) p,
  body.postid-505.single-post.single-format-standard .article-body blockquote:not(.elle-closing) p {
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin-bottom: var(--space-3);
  }
  body.single-csb_reading .article-body blockquote:not(.elle-closing) p:last-child,
  body.postid-505.single-post.single-format-standard .article-body blockquote:not(.elle-closing) p:last-child {
    margin-bottom: 0;
  }
  /* Mobile: collapse the break-out so the quote sits inside the viewport. */
  @media (max-width: 600px) {
    body.single-csb_reading .article-body blockquote:not(.elle-closing),
    body.postid-505.single-post.single-format-standard .article-body blockquote:not(.elle-closing) {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  /* Elle's closing statement — handles BOTH authoring conventions:
     (1) <p><em>...closing...</em></p> at end of article, OR
     (2) <blockquote><p>...closing...</p><p>e.</p></blockquote> at end.
     Styling: normal body text, italic, NOT the pullout accent treatment.
     "e." signature in accent color. */

  /* Convention 1: appended pseudo-element on last italic paragraph */
  .article-body > p:has(em):last-of-type::after {
    content: " e.";
    color: var(--color-accent);
    font-style: italic;
    font-weight: 700;
  }
  body.postid-505 .article-body > p:has(em):last-of-type::after {
    content: none;
  }

  /* Convention 2: blockquote tagged .elle-closing by csb_mark_elle_closing
     (PHP filter detects <p>e.</p> as last child). Override the pullout
     treatment with body-size body-font italic. */
  .article-body blockquote.elle-closing {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--color-accent);
    text-align: left;
    margin: var(--space-5) 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    border: none;
    background: none;
  }
  .article-body blockquote.elle-closing p {
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
  }
  /* The "e." signature renders in Roasted Red Pepper via :last-child. */
  .article-body blockquote.elle-closing p:last-child {
    color: var(--color-accent);
    font-weight: 700;
  }
  /* Hide author-inserted <hr> in article body — separator belongs only
     above the byline-card (which has its own border-top). */
  .article-body hr {
    display: none;
  }
  /* Hide WP block separator (the gray HR Mark gets when adding blockquote block) */
  .article-body .wp-block-separator,
  .article-body hr.wp-block-separator {
    display: none;
  }

  /* ==========================================================================
     ARTICLE BYLINE CARD — verbatim from rr-article-lane-v1.html mockup
     Tight under article body (negative margin pulls it close to last paragraph).
     ========================================================================== */
  .article-byline-card {
    max-width: 860px;
    margin: var(--space-7) auto var(--space-8);
    padding: var(--space-5) var(--space-7) 0;
    border-top: 1px solid var(--color-accent);
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--space-4);
    align-items: center;
  }
  .article-byline-card .byline-thumb {
    width: 100px; height: 100px;
    overflow: hidden;
    background: #F4F1EA;
    border-radius: 50%;
  }
  .article-byline-card .byline-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .article-byline-card .byline-content {
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .article-byline-card .byline-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    text-transform: uppercase;
  }
  .article-byline-card .byline-bio {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--color-ink);
    margin: 0;
  }
  .article-byline-card .byline-socials-inline {
    display: inline-flex; align-items: center; gap: var(--space-3);
    margin-left: var(--space-3);
    vertical-align: middle;
    font-style: normal;
  }
  .article-byline-card .byline-socials-inline a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-ink);
    border-bottom: none;
    font-family: var(--font-body); font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: color var(--dur-short);
  }
  .article-byline-card .byline-socials-inline a:hover { color: var(--color-accent); }
  /* GLOBAL RULE — byline social icons in Roasted Red Pepper, text in black. */
  .article-byline-card .byline-social-icon {
    display: inline-flex;
    width: 14px; height: 14px;
    color: var(--color-accent);
    transition: color var(--dur-short);
  }
  .article-byline-card .byline-social-icon svg { width: 14px; height: 14px; }
  .article-byline-card .byline-socials-inline a:hover .byline-social-icon { color: var(--color-accent-hover); }
  @media (max-width: 700px) {
    .article-byline-card { grid-template-columns: 1fr; }
  }

  /* Speaker labels — scoped to the M.R. Madonna conversation post (post 108) only,
     so other Reading Room articles aren't affected. Match MRM treatment.
     First H3 -> "ELLE DURAND: ", subsequent H3s -> "ED: ".
     First H3 + P -> "M.R. MADONNA: ", subsequent -> "MRM: ". */
  body.postid-108 .article-body h3::before {
    content: "ED: ";
    font-weight: 700;
    color: #1c1714;
    margin-right: 0.25em;
  }
  body.postid-108 .article-body h3:first-of-type::before {
    content: "ELLE DURAND: ";
  }
  body.postid-108 .article-body h3 + p::before {
    content: "MRM: ";
    font-weight: 700;
    color: #1c1714;
    margin-right: 0.25em;
  }
  body.postid-108 .article-body h3:first-of-type + p::before {
    content: "M.R. MADONNA: ";
  }
  .article-body a {
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-accent);
    transition: color var(--dur-short);
  }
  .article-body a:hover { color: var(--color-accent); }
  .article-body .q {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--color-ink);
    margin: var(--space-4) 0 var(--space-3);
  }

  .article-pullquote {
    background: var(--color-accent);
    color: var(--color-bg);
    padding: var(--space-6) var(--space-7);
    margin: var(--space-7) 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
  }
  .article-pullquote p {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.35;
    color: var(--color-bg);
  }

  .article-author-card {
    max-width: 860px;
    margin: var(--space-7) auto 0;
    padding: var(--space-7) 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .article-author-card .author-card-thumb {
    width: 100%;
    background: #E8E4D8;
  }
  .article-author-card .author-card-thumb img {
    width: 100%;
    height: auto;
    display: block;
  }
  .article-author-socials {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    flex-wrap: wrap;
  }
  .article-author-socials a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-ink);
    border-bottom: none;
    transition: color var(--dur-short);
  }
  .article-author-socials a:hover { color: var(--color-accent); }
  .article-author-socials .icon { color: var(--color-accent); display: inline-flex; width: 12px; height: 12px; }
  .article-author-socials .icon svg { width: 100%; height: 100%; display: block; }
  .red-period { color: var(--color-accent); }
  .article-author-card .author-card-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
  }
  .article-author-card .author-card-bio {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-ink);
  }
  .article-author-card .author-card-bio a {
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-accent);
    transition: color var(--dur-short);
  }
  .article-author-card .author-card-bio a:hover { color: var(--color-accent); }

  @media (max-width: 700px) {
    .article-author-card { grid-template-columns: 1fr; }
  }

  /* ==========================================================================
     RESPONSIVE
     ========================================================================== */
  @media (max-width: 1024px) {
    .site-header-inner { padding: 0 var(--space-5); }
    .site-nav { gap: var(--space-4); }
    .hero { padding: calc(var(--header-h-default) + var(--space-7)) var(--space-5) var(--space-7); }
    .featured-banner { padding: var(--space-7) var(--space-5); }
    .featured-banner-inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .reading-room, .upcoming, .newsletter { padding: var(--space-7) var(--space-5); }
    .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  }
  @media (max-width: 700px) {
    .site-nav { display: none; }
    .hero-tagline { font-size: clamp(40px, 11vw, 80px); }
    .rr-breadcrumb {
      padding: calc(var(--announce-h) + var(--header-h-compact) + var(--space-5)) var(--space-4) 0;
    }
    .article-hero {
      padding: var(--space-5) var(--space-4) var(--space-5);
    }
    .article-hero-inner {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    /* Bleed-left layout (Madonna interview) collapses to single column on mobile —
       otherwise its 480px content track squeezes the media column to 0 width. */
    .article-hero--bleed-left .article-hero-inner {
      grid-template-columns: 1fr;
      max-width: 100%;
      padding-right: var(--space-4);
    }
    .article-hero--bleed-left .article-hero-media {
      width: 100%;
      aspect-ratio: 16 / 9;
    }
    .article-hero-media {
      width: min(100%, 320px);
    }
    .article-hero--wide-image {
      padding: calc(var(--announce-h) + var(--header-h-compact)) 0 var(--space-5);
    }
    .article-hero--wide-image .article-hero-inner {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      background: var(--color-ink);
    }
    .article-hero--wide-image .article-hero-inner::after {
      display: none;
    }
    .article-hero--wide-image .article-hero-media {
      width: 100%;
      height: clamp(300px, 88vw, 420px);
      aspect-ratio: auto;
    }
    .article-hero--wide-image .article-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 28% top;
    }
    .article-hero--wide-image .article-hero-content {
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      z-index: 2;
      width: auto;
      max-width: none;
      padding: 22px 28px 24px 18px;
      color: #fff;
      background: var(--color-ink);
    }
    .article-hero--wide-image .article-hero-meta { margin-bottom: 14px; }
    .article-hero--wide-image .article-hero-tag {
      background: rgba(0,0,0,0.48);
      padding: 8px 12px;
    }
    .article-hero--wide-image .article-hero-content .article-title {
      display: block;
      width: 100%;
      max-width: calc(100vw - 64px);
      font-size: clamp(21px, 5.6vw, 25px);
      line-height: 1.08;
      color: #fff;
      text-shadow: 0 2px 14px rgba(0,0,0,0.48);
      text-transform: uppercase;
      overflow-wrap: anywhere;
      word-break: normal;
      white-space: normal;
      text-wrap: balance;
    }
    .article-hero--wide-image .article-hero-content .article-title .article-title-lock {
      display: inline;
      white-space: nowrap;
    }
    body.postid-505 .article-hero--wide-image {
      padding-top: calc(var(--announce-h) + var(--header-h-compact));
      padding-bottom: var(--space-5);
    }
    body.postid-505 .article-hero--wide-image .article-hero-inner {
      height: auto;
      min-height: 0;
    }
    body.postid-505 .article-hero--wide-image .article-hero-content {
      display: block;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      width: auto;
      max-width: none;
      transform: none;
    }
    body.postid-505 .article-hero--wide-image .article-hero-content .article-title {
      font-size: clamp(21px, 5.6vw, 25px);
      line-height: 1.08;
      overflow-wrap: anywhere;
      word-break: normal;
      text-wrap: balance;
    }
    body.postid-505 .article-hero--wide-image .article-hero-content .article-title .article-title-lock {
      white-space: normal;
    }
    body.postid-505 .article-hero--wide-image .article-hero-media img {
      object-position: left top;
    }
    /* Interview (108) mobile: reset the desktop right-side/centered overlay back
       to the standard mobile treatment — headline spans the width, sits LOW,
       face preserved. Mark direction 2026-07-06. */
    body.postid-108 .article-hero--wide-image .article-hero-inner {
      height: auto;
      min-height: 0;
    }
    body.postid-108 .article-hero--wide-image .article-hero-media img {
      object-position: 28% top;
    }
    body.postid-108 .article-hero--wide-image .article-hero-content {
      display: block;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      width: auto;
      max-width: none;
      transform: none;
    }
    body.postid-108 .article-hero--wide-image .article-hero-content .article-title {
      font-size: clamp(21px, 5.6vw, 25px);
      line-height: 1.08;
      overflow-wrap: anywhere;
      word-break: normal;
      text-wrap: balance;
    }
    body.postid-108 .article-hero--wide-image .article-hero-content .article-title .article-title-lock {
      white-space: normal;
    }
    .article-hero--wide-image .article-hero-dek {
      font-size: 15px;
      line-height: 1.5;
      color: rgba(255,255,255,0.9);
      margin-bottom: var(--space-4);
      max-width: calc(100vw - 64px);
    }
    .article-hero--wide-image .article-share-row { display: none; }
    .article-hero--wide-image .article-share-label { color: var(--color-muted); }
    .article-hero-content .article-title {
      font-size: clamp(30px, 9vw, 38px);
    }
    .article-hero--wide-image .article-hero-content .article-title,
    body.postid-505 .article-hero--wide-image .article-hero-content .article-title,
    body.postid-108 .article-hero--wide-image .article-hero-content .article-title {
      font-size: clamp(21px, 5.6vw, 25px);
      line-height: 1.08;
      max-width: calc(100vw - 64px);
      overflow-wrap: anywhere;
      word-break: normal;
      white-space: normal;
      text-wrap: balance;
    }
    .article-hero--wide-image .article-hero-content .article-title .article-title-lock,
    body.postid-505 .article-hero--wide-image .article-hero-content .article-title .article-title-lock,
    body.postid-108 .article-hero--wide-image .article-hero-content .article-title .article-title-lock {
      white-space: normal;
    }
    .article-hero--wide-image .article-hero-dek {
      max-width: calc(100vw - 64px);
      overflow-wrap: anywhere;
    }
    .article-share-row {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-2);
    }
    .article-byline-strip {
      margin: var(--space-5) auto var(--space-4);
      padding: 0 var(--space-4);
    }
    .article-body {
      padding: var(--space-3) var(--space-4);
      font-size: 16px;
      line-height: 1.68;
    }
    body.postid-505 .article-body,
    body.postid-108 .article-body {
      max-width: 100%;
      padding: var(--space-3) 24px;
      box-sizing: border-box;
      overflow-wrap: anywhere;
    }
    body.postid-505 .article-body p,
    body.postid-505 .article-body li,
    body.postid-108 .article-body p,
    body.postid-108 .article-body li {
      font-size: 16px;
      line-height: 1.68;
      overflow-wrap: anywhere;
    }
    body.postid-505 .article-body > p:first-child,
    body.postid-108 .article-body > p:first-child,
    body.postid-108 .article-body > p.rr-lede-accent {
      font-size: 17px;
      line-height: 1.65;
    }
    .article-body .wp-block-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .article-body table {
      min-width: 560px;
    }
    body.postid-246 .article-body .wp-block-table {
      overflow-x: visible;
    }
    body.postid-246 .article-body table,
    body.postid-246 .article-body thead,
    body.postid-246 .article-body tbody,
    body.postid-246 .article-body tr,
    body.postid-246 .article-body td {
      display: block;
      width: 100%;
      min-width: 0;
    }
    body.postid-246 .article-body thead {
      display: none;
    }
    body.postid-246 .article-body tr {
      border: 1px solid var(--color-border);
      background: rgba(179, 69, 37, 0.03);
    }
    body.postid-246 .article-body td {
      border: 0;
      border-bottom: 1px solid var(--color-border);
      padding: 12px 14px;
    }
    body.postid-246 .article-body td:last-child {
      border-bottom: 0;
    }
    body.postid-246 .article-body td::before {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent);
    }
    body.postid-246 .article-body td:nth-child(1)::before { content: "Moment"; }
    body.postid-246 .article-body td:nth-child(2)::before { content: "Issue type"; }
    body.postid-246 .article-body td:nth-child(3)::before { content: "Reader count"; }
    body.postid-246 .article-body td:nth-child(4)::before { content: "Revision decision"; }
    .editorial-grid { grid-template-columns: 1fr; }
    .books-cover-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  }
  @media (max-width: 1024px) {
    body.postid-505 .article-hero--wide-image .article-hero-inner {
      overflow: visible;
    }
    body.postid-505 .article-hero--wide-image .article-hero-media {
      height: auto !important;
      aspect-ratio: auto !important;
      box-sizing: border-box;
      padding-top: clamp(16px, 4vw, 24px);
      overflow: visible;
      background: var(--color-ink);
    }
    body.postid-505 .article-hero--wide-image .article-hero-media img {
      display: block;
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
      object-position: left top !important;
    }
  }

  /* ==========================================================================
     BYLINE-STRIP SHARE (2026-07-18) — wide-image heroes hide the in-hero share
     row; the share cluster surfaces right-aligned on the byline strip instead.
     ========================================================================== */
  .byline-strip-share { margin-left: auto; }
  @media (max-width: 768px) {
    .byline-strip-share { margin-left: 0; }
  }

/* ==========================================================================
   KIRKUS REVIEW SOURCE BLOCK — appended at top level after the (indented)
   article scope failed to apply these rules in the browser. Last-position
   also wins any cascade tie. Mark direction 2026-08-13: review must read
   as a quoted source document, distinct from the CSB frame around it.
   ========================================================================== */
/* Source label — factual attribution, pinned to the review block itself. */
.article-body blockquote.csb-kirkus-review::before {
  content: "From Kirkus Reviews";
  display: block;
  margin: 0 0 var(--space-4);
  color: var(--color-accent);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.article-body blockquote.csb-kirkus-review {
  width: auto;
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: clamp(24px, 4vw, 44px);
  border: 0;
  background: rgba(179, 69, 37, 0.055);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
  text-align: left;
}
.article-body blockquote.csb-kirkus-review p {
  margin: 0 0 var(--space-4);
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.article-body blockquote.csb-kirkus-review p:last-child { margin-bottom: 0; }
.article-body blockquote.csb-kirkus-review .csb-kirkus-review__summary,
.article-body blockquote.csb-kirkus-review .csb-kirkus-review__capsule {
  color: var(--color-accent);
  font-weight: 800;
}
.article-body .csb-kirkus-attribution {
  margin: var(--space-2) 0 var(--space-6);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-align: right;
  text-transform: uppercase;
}
.article-body .csb-kirkus-attribution cite { font-style: normal; }
/* CSB closing — publisher register, separated from the review by a short rule. */
.article-body hr.csb-kirkus-closing-rule {
  display: block; /* theme hides raw hrs in article bodies */
  width: 64px;
  margin: var(--space-6) 0 var(--space-4);
  border: 0;
  border-top: 3px solid var(--color-accent);
}
.article-body .csb-kirkus-closing {
  margin: 0;
  font-size: 16px;
  color: var(--color-ink);
}
/* Elle end-mark reads as a stray character after the closing arrow-link — suppressed
   here only; every other article keeps it. Mark to confirm. */
.article-body > p.csb-kirkus-closing:has(em):last-of-type::after { content: none; }