/* ============================================================================
   Retirement in USA — Broadsheet layer
   Loads LAST: theme-variables.css -> main.css -> riu.css
   style.css is metadata only and is never enqueued. One cascade, three files.

   New components use the .riu- namespace so main.css cannot match them.
   Where a core class IS reused (.main-navigation, .entry-content, .site-container)
   the override lives here and is commented with what it is beating.
   ========================================================================= */

/* ==========================================================================
   1. BASE
   ========================================================================== */

body {
    background: var(--riu-paper);
    color: var(--riu-ink);
    font-family: var(--riu-text);
    font-size: var(--riu-size-body);
    line-height: var(--riu-lh-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.riu-display {
    font-family: var(--riu-display);
    color: var(--riu-ink);
    line-height: var(--riu-lh-head);
    letter-spacing: -0.021em;
    font-weight: 800;
    text-wrap: balance;
}

.site-container {
    max-width: var(--riu-page-max);
    padding: 0 var(--riu-gutter);
}

a { color: var(--riu-accent); }
a:hover, a:focus-visible { color: var(--riu-accent-dark); }

:focus-visible {
    outline: 2px solid var(--riu-accent);
    outline-offset: 2px;
}

.riu-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--riu-ink);
    color: var(--riu-paper);
    padding: 0.75rem 1.25rem;
    z-index: 9999;
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
}
.riu-skip-link:focus {
    left: 0;
    color: var(--riu-paper);
}

/* Shared furniture -------------------------------------------------------- */

.riu-kicker,
.riu-meta,
.riu-label {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: var(--riu-track-meta);
}
.riu-kicker { color: var(--riu-accent); }
.riu-meta   { color: var(--riu-meta); }
.riu-label  { color: var(--riu-ink); }

.riu-meta a { color: var(--riu-meta); text-decoration: none; }
.riu-meta a:hover { color: var(--riu-accent); text-decoration: underline; }

.riu-tabular { font-variant-numeric: tabular-nums; }

/* Card headlines are links that should not look like body links */
.riu-headline a,
.riu-lead-title a,
h2.riu-card-title a,
h3.riu-card-title a {
    color: var(--riu-ink);
    text-decoration: none;
}
.riu-headline a:hover,
.riu-lead-title a:hover,
.riu-card-title a:hover {
    color: var(--riu-accent);
}

figure { margin: 0; }
.riu-figure img,
.riu-card img,
.riu-lead-figure img {
    display: block;
    width: 100%;
    height: auto;          /* WP's width/height attrs are presentational hints
                              that set an explicit height. aspect-ratio is
                              ignored unless one axis is auto, so this line is
                              what makes every ratio below work at all. */
}

/* Uniform crops. The library is a mix of 16:9 renders and other ratios, so
   without this a row of four cards comes out with four different image
   heights and the headlines stop aligning. */
.riu-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.riu-lead-figure img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.riu-popular img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.riu-caption {
    font-family: var(--riu-text);
    font-style: italic;
    font-size: var(--riu-size-body-sm);
    line-height: 1.5;
    color: var(--riu-meta);
    margin-top: 0.6rem;
}

/* ==========================================================================
   2. MASTHEAD
   Deliberately NOT .site-header / .header-main — main.css marks those
   display/padding !important for its own layout. A separate namespace
   sidesteps the fight entirely. Nav hooks stay so menu.js keeps working.
   ========================================================================== */

.riu-masthead {
    background: var(--riu-paper);
    border-top: var(--riu-rule-heavy) solid var(--riu-ink);
    position: relative;
    z-index: 100;
}

.riu-dateline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--riu-rule);
}
.riu-dateline > * { margin: 0; }

.riu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0 1.35rem;
}
.riu-brand a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--riu-ink);
}
.riu-wordmark {
    font-family: var(--riu-display);
    font-weight: 800;
    font-size: clamp(2rem, 1rem + 3.4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    margin: 0;
    color: var(--riu-ink);
}
.riu-brand img {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(2rem, 1rem + 3.4vw, 3.5rem);
    max-width: 100%;
    margin: 0;                 /* flex centres the MARGIN box — an inherited
                                  margin reads as a misalignment bug */
}

/* Nav row ---------------------------------------------------------------- */

.riu-navrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid var(--riu-ink);
    border-bottom: 1px solid var(--riu-ink);
    position: relative;
}

.riu-masthead .main-navigation {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    border: none;
    padding: 0;
    margin: 0;
}
.riu-masthead .primary-menu,
.riu-masthead .main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(1rem, 2.4vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.riu-masthead .main-navigation li { margin: 0; }
.riu-masthead .main-navigation a {
    display: flex;
    align-items: center;
    min-height: var(--riu-nav-tap);
    padding: 0;
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-ink);
    text-decoration: none;
    position: relative;
}
.riu-masthead .main-navigation a:hover {
    color: var(--riu-accent);
}
/* Underline as a positioned ::after, never a real border — a border adds
   height and shifts the whole row by 2px on hover. */
.riu-masthead .main-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    height: 2px;
    background: var(--riu-accent);
    opacity: 0;
}
.riu-masthead .main-navigation a:hover::after { opacity: 0.35; }
.riu-masthead .main-navigation .current-menu-item > a,
.riu-masthead .main-navigation .current_page_item > a,
.riu-masthead .main-navigation .current-cat > a {
    color: var(--riu-accent);
}
.riu-masthead .main-navigation .current-menu-item > a::after,
.riu-masthead .main-navigation .current_page_item > a::after,
.riu-masthead .main-navigation .current-cat > a::after {
    opacity: 1;
}

.riu-masthead .header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.riu-masthead .desktop-search-toggle {
    width: var(--riu-tap);
    height: var(--riu-tap);
    color: var(--riu-ink);
}
.riu-masthead .desktop-search-toggle svg { color: inherit; }
.riu-masthead .desktop-search-toggle:hover svg { color: var(--riu-accent); }

.riu-masthead .desktop-search-form,
.riu-masthead .mobile-search-form {
    background: var(--riu-band);
    border-bottom: 1px solid var(--riu-rule);
    margin-bottom: 0;
}
.riu-masthead .search-field {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    min-height: var(--riu-tap);
    border-radius: 0;
}
.riu-masthead .desktop-search-form button,
.riu-masthead .mobile-search-form button {
    border-radius: 0;
    min-height: var(--riu-tap);
    font-family: var(--riu-display);
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    font-size: var(--riu-size-meta);
}

/* Mobile masthead --------------------------------------------------------- */

@media (max-width: 1024px) {
    .riu-dateline { font-size: 0.8125rem; }
    .riu-dateline .riu-count { display: none; }

    .riu-brand { padding: 1.1rem 0 1rem; }

    .riu-navrow {
        justify-content: space-between;
        border-bottom: 1px solid var(--riu-ink);
        min-height: var(--riu-nav-tap);
    }
    /* main.css turns .main-navigation into a fixed drawer at this width. It
       relied on `.header-main .main-navigation{display:block!important}` for
       the display switch, and this masthead has no .header-main — so supply
       it here. Everything else (position:fixed, padding-top) comes from
       main.css's own !important rules and still applies. */
    .riu-masthead .main-navigation {
        display: block;
        flex: none;
    }
    .riu-masthead .primary-menu,
    .riu-masthead .main-navigation ul {
        display: block;
        text-align: left;
    }
    .riu-masthead .main-navigation li {
        border-bottom: 1px solid var(--riu-rule);
    }
    .riu-masthead .main-navigation a {
        min-height: var(--riu-nav-tap);
        padding: 0 1.5rem;
        font-size: 1rem;
    }
    .riu-masthead .main-navigation a::after { display: none; }

    .riu-masthead .header-actions {
        position: static;
        transform: none;
        margin-left: auto;
    }
    .riu-masthead .mobile-menu-toggle,
    .riu-masthead .mobile-search-toggle {
        width: var(--riu-tap);
        height: var(--riu-tap);
        min-width: var(--riu-tap);
    }
    .riu-masthead .hamburger-line { background: var(--riu-ink); }
    .riu-navrow .riu-navrow-label {
        font-family: var(--riu-display);
        font-size: var(--riu-size-meta);
        font-weight: 600;
        letter-spacing: var(--riu-track-meta);
        text-transform: uppercase;
        color: var(--riu-meta);
        padding-left: 0;
    }
}
@media (min-width: 1025px) {
    .riu-navrow .riu-navrow-label { display: none; }
}

/* ==========================================================================
   3. SECTION HEADERS  — heavy rule carrying a label, count at the right
   ========================================================================== */

.riu-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: var(--riu-rule-heavy) solid var(--riu-ink);
    padding-top: 0.6rem;
    margin-bottom: 1.5rem;
}
.riu-section-head h2,
.riu-section-head .riu-section-name {
    font-family: var(--riu-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}
.riu-section-head h2 a,
.riu-section-head .riu-section-name a {
    color: var(--riu-ink);
    text-decoration: none;
}
.riu-section-head h2 a:hover { color: var(--riu-accent); }
.riu-section-head .riu-count {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-meta);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. LEAD STORY — five-column grid, shared by front-page and archive
   ========================================================================== */

.riu-lead {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: var(--riu-col-gap);
    align-items: start;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.75rem, 3vw, 2.75rem);
    position: relative;
}
/* The divider lives in the gutter, not in either column's padding — padding
   would shrink one column's content box and mis-size its image. */
.riu-lead::before {
    content: "";
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.5rem);
    bottom: clamp(1.75rem, 3vw, 2.75rem);
    left: calc(60% - var(--riu-col-gap) / 2);
    width: 1px;
    background: var(--riu-rule);
}
.riu-lead-body { display: flex; flex-direction: column; gap: 0.85rem; }
.riu-lead-body > * { margin: 0; }

.riu-lead-title {
    font-size: var(--riu-h1-lead);
    letter-spacing: -0.033em;
    margin: 0;
}
.riu-standfirst {
    font-family: var(--riu-text);
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
    line-height: 1.5;
    color: var(--riu-ink);
    margin: 0;
}
.riu-lead-excerpt {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body);
    line-height: var(--riu-lh-body);
    margin: 0;
}
.riu-lead-figure { align-self: start; }

@media (max-width: 900px) {
    .riu-lead { grid-template-columns: 1fr; row-gap: 1.25rem; }
    .riu-lead::before { display: none; }
    .riu-lead-figure { order: -1; }
}

/* ==========================================================================
   5. CARD ROWS — column rules sit one per gutter
   ========================================================================== */

.riu-row {
    display: grid;
    column-gap: var(--riu-col-gap);
    row-gap: clamp(1.75rem, 3vw, 2.5rem);
    align-items: start;
}
.riu-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.riu-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.riu-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.riu-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    min-width: 0;
}
.riu-card > * { margin: 0; }

/* One hairline per gutter. Suppressed on the first card of each row so the
   rule never lands outside the grid. */
.riu-row-4 > .riu-card:not(:nth-child(4n + 1))::before,
.riu-row-3 > .riu-card:not(:nth-child(3n + 1))::before,
.riu-row-2 > .riu-card:not(:nth-child(2n + 1))::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--riu-col-gap) / 2);
    width: 1px;
    background: var(--riu-rule);
}

.riu-card-title {
    font-size: var(--riu-card);
    letter-spacing: -0.021em;
    margin: 0;
}
.riu-card-excerpt {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    line-height: 1.55;
    margin: 0;
}
.riu-card-date {
    margin-top: auto;
    padding-top: 0.35rem;
}

@media (max-width: 1024px) {
    .riu-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riu-row-4 > .riu-card::before { display: none; }
    .riu-row-4 > .riu-card:not(:nth-child(2n + 1))::before { display: block; }
}
@media (max-width: 700px) {
    .riu-row-4,
    .riu-row-3,
    .riu-row-2 { grid-template-columns: minmax(0, 1fr); }
    .riu-row > .riu-card::before { display: none; }
    .riu-row > .riu-card + .riu-card {
        border-top: 1px solid var(--riu-rule);
        padding-top: clamp(1.25rem, 4vw, 1.75rem);
    }
    .riu-row { row-gap: clamp(1.25rem, 4vw, 1.75rem); }
}

/* Section spacing --------------------------------------------------------- */

.riu-section { padding: clamp(2rem, 4vw, 3.25rem) 0 0; }
.riu-section:last-of-type { padding-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ==========================================================================
   5b. VERTICAL RHYTHM
   These gaps are sums of stacked boxes, so each has to be set in every place
   that contributes or the change only lands halfway. Measure the whole chain
   in the browser before touching any one of them.
   ========================================================================== */

/* Menu -> first content, every template. Was 48px of .site-main padding plus
   the component's own top padding (36-40px) = 84-88px; now 44px, all of it on
   .site-main so each template gets the same gap. */
.site-main { padding-top: 28px; }

.riu-lead { padding-top: 0; }
.riu-single { padding-top: 0; }
.riu-page { padding-top: 0; }
.riu-archive-head { margin-top: 0; }

/* The two column rules were offset to clear the padding those elements no
   longer have; without this they start 36px down and float. */
.riu-lead::before { top: 0; }
.riu-single::before { top: 0; }

/* Bottom padding is only dropped on the homepage — an article still wants
   breathing room before the newsletter band. */

/* Last content -> newsletter, every template. THREE boxes stack here: the
   last element's own bottom spacing, .site-main's padding-bottom (main.css),
   and the newsletter's margin-top. Measured before this: 160px on archives
   (48 pager + 48 main + 64 newsletter), 112px on singles, 28px on the
   homepage. Now 28px everywhere. */
.site-main { padding-bottom: 0; }
.riu-section:last-of-type { padding-bottom: 0; }
/* .riu-newsletter margin-top is set in section 9 — see the note there. */

@media (min-width: 1025px) {
    .site-main { padding-top: 44px; }
}

/* ==========================================================================
   6. ARCHIVE MASTHEAD + PAGER
   ========================================================================== */

.riu-archive-head {
    background: var(--riu-band);
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    /* The band is a heavy filled block; without this the lead headline starts
       against its bottom edge with no air. */
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem 2rem;
}
.riu-archive-head > div > * { margin: 0; }
.riu-archive-title {
    font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.25rem);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin: 0.25rem 0 0;
}
.riu-archive-description {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body);
    line-height: 1.5;
    max-width: 58ch;
    margin: 0.6rem 0 0;
}
.riu-archive-description p { margin: 0; }
.riu-archive-head .riu-count { white-space: nowrap; }

@media (max-width: 700px) {
    .riu-archive-head { grid-template-columns: 1fr; align-items: start; }
}

.riu-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid var(--riu-rule);
    border-bottom: 1px solid var(--riu-rule);
    padding: 1.1rem 0;
    /* No bottom margin: .site-main has no bottom padding, so this margin would
       collapse through it and win against the newsletter's smaller margin-top,
       leaving archives at 48px while every other template sat at 28px. */
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.riu-pager-count { font-variant-numeric: tabular-nums; }
.riu-pager .nav-links {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.riu-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--riu-tap);
    height: var(--riu-tap);
    padding: 0 0.85rem;
    border: 1px solid var(--riu-ink);
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-ink);
    text-decoration: none;
    background: var(--riu-paper);
    font-variant-numeric: tabular-nums;
}
.riu-pager .page-numbers:hover {
    background: var(--riu-band);
    color: var(--riu-accent);
    border-color: var(--riu-accent);
}
.riu-pager .page-numbers.current {
    background: var(--riu-ink);
    border-color: var(--riu-ink);
    color: var(--riu-paper);
}
/* A disabled control should read as absent, not as a grey button. */
.riu-pager .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    min-width: 1.75rem;
    padding: 0;
    color: var(--riu-meta);
}
.riu-pager .page-numbers.dots:hover {
    background: transparent;
    color: var(--riu-meta);
    border-color: transparent;
}

/* ==========================================================================
   7. SINGLE
   ========================================================================== */

/* Tracks are capped so they exactly fill the box — otherwise the article
   (max-width 760) ends ~100px short of the rule and the gutter reads as a
   mistake rather than as a column division. */
.riu-single {
    display: grid;
    grid-template-columns: minmax(0, 760px) 300px;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    position: relative;
    max-width: calc(760px + 300px + clamp(2rem, 4vw, 3.5rem));
    margin: 0 auto;
}
/* The rule between column and sidebar. In a newspaper this IS the layout. */
.riu-single::before {
    content: "";
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.25rem);
    bottom: 0;
    right: calc(300px + clamp(2rem, 4vw, 3.5rem) / 2);
    width: 1px;
    background: var(--riu-rule);
}
@media (max-width: 1024px) {
    .riu-single { grid-template-columns: minmax(0, 1fr); max-width: none; }
    .riu-single::before { display: none; }
    /* The 760px cap lives on the grid TRACK, so it disappears with the second
       column and the measure ran to 100 characters at 1024px — worst exactly
       where the sidebar drops out. Cap the article itself here; 680px is ~70
       characters at 19px, the top of the range this design targets. */
    .riu-article { max-width: 680px; margin-inline: auto; }
}

.riu-article { min-width: 0; }   /* the grid track already caps it at 760 */

.riu-article-head { display: flex; flex-direction: column; gap: 0.85rem; }
.riu-article-head > * { margin: 0; }

/* One line: Home > [category] · date · read time. The category chip doubles
   as the breadcrumb's second crumb, so the section is stated once. */
.riu-breadcrumb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}
.riu-breadcrumb-meta .sep { color: var(--riu-rule); }
.riu-breadcrumb-meta .riu-chip { color: var(--riu-accent); font-weight: 700; }
.riu-breadcrumb-meta a.riu-chip { text-decoration: none; }
.riu-breadcrumb-meta a.riu-chip:hover { text-decoration: underline; }

.riu-title {
    font-size: var(--riu-h1);
    letter-spacing: -0.033em;
    margin: 0;
}
.riu-byline { color: var(--riu-meta); }
.riu-byline .riu-author { color: var(--riu-ink); font-weight: 700; }

.riu-lead-photo { margin: 1.5rem 0 1.75rem; }

/* Article body ------------------------------------------------------------ */

.riu-article .entry-content {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body);
    line-height: var(--riu-lh-body);
    color: var(--riu-ink);
    max-width: none;
}
.riu-article .entry-content p { margin: 0 0 1.35rem; }
.riu-article .entry-content > *:last-child { margin-bottom: 0; }

.riu-article .entry-content h2 {
    font-size: var(--riu-h2);
    margin: 2.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--riu-rule);
    letter-spacing: -0.026em;
}
.riu-article .entry-content h3 {
    font-size: var(--riu-h3);
    margin: 2rem 0 0.75rem;
    letter-spacing: -0.021em;
}
.riu-article .entry-content h4 {
    font-size: 1.25rem;
    margin: 1.75rem 0 0.6rem;
}

.riu-article .entry-content a {
    color: var(--riu-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}
.riu-article .entry-content a:hover { color: var(--riu-accent-dark); }

.riu-article .entry-content ul,
.riu-article .entry-content ol { margin: 0 0 1.35rem; padding-left: 1.5rem; }
.riu-article .entry-content li { margin-bottom: 0.6rem; }

.riu-article .entry-content img { height: auto; }
.riu-article .entry-content figure { margin: 1.75rem 0; }
.riu-article .entry-content figcaption {
    font-style: italic;
    font-size: var(--riu-size-body-sm);
    color: var(--riu-meta);
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* Pull quote in the body serif — italic sans at this size fights the H1. */
.riu-article .entry-content blockquote {
    border: none;
    border-top: var(--riu-rule-heavy) solid var(--riu-ink);
    border-bottom: var(--riu-rule-heavy) solid var(--riu-ink);
    background: transparent;
    margin: 2.25rem 0;
    padding: 1.5rem 0;
    font-family: var(--riu-text);
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.75rem);
    line-height: 1.35;
    font-weight: 600;
}
.riu-article .entry-content blockquote p:last-child { margin-bottom: 0; }
.riu-article .entry-content blockquote cite {
    display: block;
    margin-top: 0.85rem;
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-meta);
}

.riu-article .entry-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--riu-size-body-sm);
    font-variant-numeric: tabular-nums;
}
.riu-article .entry-content th,
.riu-article .entry-content td {
    border: 1px solid var(--riu-rule);
    padding: 0.7rem 0.85rem;
    text-align: left;
}
.riu-article .entry-content th {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    background: var(--riu-band);
}

/* wp_link_pages — no post on this site is paginated today, but a future one
   would otherwise render page 1 with no way forward. */
.riu-page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    border-top: 1px solid var(--riu-rule);
    border-bottom: 1px solid var(--riu-rule);
    padding: 1rem 0;
    margin: 2rem 0;
}
.riu-page-links .riu-label { margin-right: 0.5rem; }
.riu-page-links a,
.riu-page-links > span:not(.riu-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--riu-tap);
    height: var(--riu-tap);
    padding: 0 0.75rem;
    border: 1px solid var(--riu-ink);
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    color: var(--riu-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.riu-page-links > span:not(.riu-label) {
    background: var(--riu-ink);
    color: var(--riu-paper);
}

/* Share row — text only, no brand-coloured buttons to fight the palette */
.riu-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(1rem, 2.5vw, 2rem);
    border-top: 1px solid var(--riu-rule);
    border-bottom: 1px solid var(--riu-rule);
    margin: 2.5rem 0;
}
.riu-share a,
.riu-share .riu-label {
    display: inline-flex;
    align-items: center;
    min-height: var(--riu-tap);
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--riu-ink);
}
.riu-share .riu-label { color: var(--riu-meta); }
.riu-share a:hover { color: var(--riu-accent); }

.riu-related { margin: 2.5rem 0 0; }

/* Ad slots ---------------------------------------------------------------- */

.riu-ad { margin: 1.75rem 0; }
.riu-ad-inline { margin: 2.25rem 0; }
/* Admin-only placeholder. Readers never see a labelled empty frame — when
   no block is configured riu_ad_slot() outputs nothing at all. */
.riu-ad-placeholder {
    border: 1px dashed var(--riu-rule);
    background: var(--riu-band);
    color: var(--riu-meta);
    text-align: center;
    padding: 1.25rem;
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
}

/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */

.riu-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3vw, 2.5rem);
}
.riu-widget > * { margin: 0; }
.riu-widget-title {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 700;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    border-top: var(--riu-rule-heavy) solid var(--riu-ink);
    padding-top: 0.55rem;
    margin: 0 0 1rem;
    color: var(--riu-ink);
}

/* Numbered, with thumbnails — the ranking is real information here. */
.riu-popular { list-style: none; margin: 0; padding: 0; }
.riu-popular li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 72px;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--riu-rule);
}
.riu-popular li:first-child { padding-top: 0; }
.riu-popular li:last-child { border-bottom: none; }
.riu-popular .riu-rank {
    font-family: var(--riu-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--riu-meta);
    font-variant-numeric: tabular-nums;
}
.riu-popular .riu-popular-title {
    font-family: var(--riu-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--riu-ink);
    text-decoration: none;
    display: block;
    margin-bottom: 0.35rem;
}
.riu-popular .riu-popular-title:hover { color: var(--riu-accent); }
.riu-popular img { display: block; width: 72px; height: auto; }

.riu-more-list { list-style: none; margin: 0; padding: 0; }
.riu-more-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--riu-rule);
}
.riu-more-list li:first-child { padding-top: 0; }
.riu-more-list li:last-child { border-bottom: none; }
.riu-more-list a {
    font-family: var(--riu-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--riu-ink);
    text-decoration: none;
}
.riu-more-list a:hover { color: var(--riu-accent); }

/* The article is much taller than the sidebar; without this the column simply
   ends and leaves a dead rail.
   `align-self: stretch` is what makes it work at all: .riu-single sets
   `align-items: start`, so the aside is only as tall as its own content and a
   sticky child has no distance to travel. Stretching it to the grid row's
   height gives the last module somewhere to stick through. */
@media (min-width: 1025px) {
    .riu-sidebar { align-self: stretch; }
    .riu-sidebar-sticky {
        position: sticky;
        top: 1.5rem;
        align-self: start;   /* don't let the sticky item itself stretch */
    }
}

/* ==========================================================================
   9. NEWSLETTER BAND
   ========================================================================== */

.riu-newsletter {
    background: var(--riu-band);
    border-top: 1px solid var(--riu-rule);
    border-bottom: 1px solid var(--riu-rule);
    padding: clamp(2rem, 4vw, 3rem) var(--riu-gutter);
    /* Set HERE, not in the rhythm block above — this rule comes later in the
       file at equal specificity, so an override up there silently loses. */
    margin-top: 18px;
    text-align: center;
}
@media (min-width: 1025px) {
    .riu-newsletter { margin-top: 28px; }
}
.riu-newsletter-inner { max-width: 46rem; margin: 0 auto; }
.riu-newsletter h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}
.riu-newsletter p {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body);
    margin: 0 0 1.5rem;
}
/* main.css sets .newsletter-form to flex-direction:column — a `flex` on the
   child would then size the MAIN axis and render a very tall input. Force
   row before touching flex on children. */
.riu-newsletter .newsletter-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 32rem;
    margin: 0 auto;
}
.riu-newsletter .newsletter-form input[type="email"] {
    flex: 1 1 16rem;
    min-height: var(--riu-tap);
    padding: 0 0.9rem;
    border: 1px solid var(--riu-ink);
    border-radius: 0;
    background: var(--riu-paper);
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    color: var(--riu-ink);
}
.riu-newsletter .newsletter-form button {
    flex: 0 0 auto;
    min-height: var(--riu-tap);
    padding: 0 1.5rem;
    border: 1px solid var(--riu-ink);
    border-radius: 0;
    background: var(--riu-ink);
    color: var(--riu-paper);
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    cursor: pointer;
}
.riu-newsletter .newsletter-form button:hover { background: var(--riu-accent); border-color: var(--riu-accent); }
.riu-newsletter .newsletter-message {
    margin-top: 0.9rem;
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
}
.riu-newsletter .newsletter-message.success { color: #1F5B33; }
.riu-newsletter .newsletter-message.error { color: var(--riu-accent); }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.riu-footer {
    background: var(--riu-footer-bg);
    color: var(--riu-footer-text);
    padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
    margin-top: 0;
}
.riu-footer-brand {
    font-family: var(--riu-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}
.riu-footer-brand a { color: var(--riu-footer-text); text-decoration: none; }
.riu-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem 2.5rem;
    border-top: 1px solid var(--riu-footer-rule);
    padding-top: 1.75rem;
}
.riu-footer h3 {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 700;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: #9C9A92;
    margin: 0 0 0.9rem;
}
.riu-footer ul { list-style: none; margin: 0; padding: 0; }
.riu-footer li { margin: 0; }
.riu-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    color: var(--riu-footer-text);
    text-decoration: none;
}
.riu-footer li a:hover { color: #E2A9A3; text-decoration: underline; }
.riu-footer-about p {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    line-height: 1.6;
    color: #C9C7C0;
    margin: 0 0 0.6rem;
}
.riu-footer-about a { color: var(--riu-footer-text); }
.riu-footer-bottom {
    border-top: 1px solid var(--riu-footer-rule);
    margin-top: 2rem;
    padding-top: 1.25rem;
}
.riu-footer-bottom p {
    font-family: var(--riu-display);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: #9C9A92;
    margin: 0;
}

/* ==========================================================================
   11. PAGES, SEARCH, 404, COMMENTS
   ========================================================================== */

.riu-page { max-width: 760px; margin: 0 auto; padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.riu-page .entry-content { font-family: var(--riu-text); font-size: var(--riu-size-body); line-height: var(--riu-lh-body); }
.riu-page .entry-content h2 { font-size: var(--riu-h2); margin: 2.25rem 0 0.9rem; }
.riu-page .entry-content h3 { font-size: var(--riu-h3); margin: 1.75rem 0 0.7rem; }
.riu-page .entry-content p { margin: 0 0 1.35rem; }
.riu-page .entry-content a { color: var(--riu-accent); text-decoration: underline; }

.riu-page-title {
    font-size: var(--riu-h1);
    letter-spacing: -0.033em;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: var(--riu-rule-heavy) solid var(--riu-ink);
}

.riu-empty { padding: clamp(2.5rem, 6vw, 4.5rem) 0; max-width: 60ch; }
.riu-empty h1 { font-size: var(--riu-h1); margin: 0 0 1rem; }
.riu-empty p { font-family: var(--riu-text); font-size: var(--riu-size-body); }

/* --------------------------------------------------------------------------
   Comments.

   These are NOT rendered by the theme. The `inedit-comments-manager` plugin
   outputs #inedit-comments-wrapper and enqueues its own frontend-style.css,
   which loads BEFORE the theme's three files and scopes every rule with that
   ID — specificity (1,1,1). A plain `.comment-reply-link` rule cannot beat it,
   so the overrides below carry the ID too.

   What was wrong: the plugin painted the Reply link WordPress-admin blue
   (#2271B1) for text and border, while main.css filled its background from
   --color-primary, which this theme sets to oxblood. Blue on oxblood is 1.9:1
   — unreadable, and neither colour was a decision anyone made.
   -------------------------------------------------------------------------- */

.comments-area {
    max-width: 760px;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: var(--riu-rule-heavy) solid var(--riu-ink);
}
.comments-area .comments-title,
.comments-area .comment-reply-title,
#inedit-comments-wrapper ~ * .comment-reply-title {
    font-family: var(--riu-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-ink);
}

/* Thread: hairline-separated rows, not white rounded cards on a paper ground. */
#inedit-comments-wrapper { margin-bottom: 2rem; }
#inedit-comments-wrapper .comment {
    background: transparent;
    border: none;
    border-top: 1px solid var(--riu-rule);
    border-radius: 0;
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 0;
    transition: none;
}
#inedit-comments-wrapper .comment:hover { box-shadow: none; }
#inedit-comments-wrapper .children .comment { background: transparent; }

/* Replies read as replies via an indent rule, not a grey fill. */
#inedit-comments-wrapper .children {
    padding-left: clamp(1rem, 3vw, 2rem);
    margin-top: 0;
    border-left: 2px solid var(--riu-rule);
}

#inedit-comments-wrapper .comment-author { margin-bottom: 0.5rem; gap: 0.75rem; }
#inedit-comments-wrapper .comment-author img {
    border-radius: 0;      /* square, like every other frame on the site */
    margin-right: 0;
    width: 44px;
    height: 44px;
}
#inedit-comments-wrapper .comment-author .fn {
    font-family: var(--riu-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--riu-ink);
}
/* "Anthony says:" — the colon does the work, the word is noise. */
#inedit-comments-wrapper .comment-author .says { display: none; }

#inedit-comments-wrapper .comment-metadata,
#inedit-comments-wrapper .comment-metadata a {
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-meta);   /* was #757575; this is the site's meta colour */
}
#inedit-comments-wrapper .comment-metadata { margin-bottom: 0.9rem; }
#inedit-comments-wrapper .comment-metadata a:hover {
    color: var(--riu-accent);
    text-decoration: underline;
}

#inedit-comments-wrapper .comment-content {
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    line-height: 1.6;
    color: var(--riu-ink);    /* was #333 */
}
#inedit-comments-wrapper .comment-content p { margin: 0 0 0.9rem; }
#inedit-comments-wrapper .comment-content a {
    color: var(--riu-accent);
    text-decoration: underline;
}

/* Reply: a text link in the same language as the share row, not a button.
   51 filled buttons down a thread would out-shout the comments themselves. */
#inedit-comments-wrapper .reply { margin-top: 0; }
#inedit-comments-wrapper .reply a,
.comments-area .comment-reply-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--riu-tap);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    color: var(--riu-accent);
    text-decoration: none;
    transition: none;
}
#inedit-comments-wrapper .reply a:hover,
#inedit-comments-wrapper .reply a:focus-visible,
.comments-area .comment-reply-link:hover {
    background: transparent;
    color: var(--riu-accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Inline reply form + the main form */
#inedit-comments-wrapper .comment-respond,
.comments-area .comment-respond {
    background: var(--riu-band);
    border: 1px solid var(--riu-rule);
    border-radius: 0;
    padding: 1.5rem;
    margin-top: 1.25rem;
}
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea,
#inedit-comments-wrapper input[type="text"],
#inedit-comments-wrapper input[type="email"],
#inedit-comments-wrapper input[type="url"],
#inedit-comments-wrapper textarea {
    border-radius: 0;
    border: 1px solid var(--riu-ink);
    background: var(--riu-paper);
    font-family: var(--riu-text);
    font-size: var(--riu-size-body-sm);
    color: var(--riu-ink);
    min-height: var(--riu-tap);
    padding: 0.6rem 0.8rem;
}
.comments-area textarea,
#inedit-comments-wrapper textarea { min-height: 8rem; }

.comments-area .submit,
#inedit-comments-wrapper .submit,
#inedit-lazy-comments-container #respond .submit {
    border-radius: 0;
    background: var(--riu-ink);
    border: 1px solid var(--riu-ink);
    color: var(--riu-paper);
    font-family: var(--riu-display);
    font-size: var(--riu-size-meta);
    font-weight: 600;
    letter-spacing: var(--riu-track-meta);
    text-transform: uppercase;
    min-height: var(--riu-tap);
    padding: 0 1.5rem;
    box-shadow: none;
    transform: none;
}
.comments-area .submit:hover,
#inedit-comments-wrapper .submit:hover,
#inedit-lazy-comments-container #respond .submit:hover {
    background: var(--riu-accent);
    border-color: var(--riu-accent);
    color: var(--riu-paper);
    box-shadow: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}