/* Byline. Inherits the theme's font and colour unless told otherwise, so it
   looks native rather than pasted in. */
.rt-byline{display:flex;align-items:center;gap:.75em;flex-wrap:wrap;margin:0 0 1.5em;font-size:.95em;line-height:1.4}
.rt-byline *{box-sizing:border-box}
.rt-photo{flex:0 0 auto;line-height:0}

/* 🔴 !important on the avatar geometry, and only here.

   Measured on pagineromaniste, whose theme prints:

       .article-content img{max-width:100% !important;height:auto !important;width:auto !important}

   Themes put `!important` on content images routinely — it is how they stop
   editors' inline widths from breaking the column. Against that, specificity is
   irrelevant: a 48px avatar rendered at its natural 300x300 turned the byline
   into a 348px-tall block with the photo above the text. That is not styling
   the theme is entitled to override, it is the geometry the component needs to
   exist, so these three properties insist and nothing else does.

   Everything else in this file stays low-specificity and overridable on
   purpose — colour, spacing and type still belong to the theme.

   ⚠️ !important alone was not enough, measured the hard way: `.ea-photo img`
   and the theme's `.article-content img` are both (0,1,1) and both !important,
   so the later stylesheet won — the theme's. The rule is qualified by its own
   wrapper to reach (0,2,1). border-radius did apply on the first attempt, only
   because the theme sets that one without !important — which is exactly how a
   half-applied fix hides itself. */
.rt-byline .rt-photo img{width:48px !important;height:48px !important;border-radius:50% !important;object-fit:cover;display:block}
.rt-meta{flex:1 1 auto;min-width:0}
.rt-author,.rt-role{margin:0}
.rt-author{font-weight:600}
.rt-label{font-weight:400;opacity:.75}
.rt-author a{text-decoration:none}
.rt-author a:hover{text-decoration:underline}
.rt-role{font-size:.85em;opacity:.75;font-weight:400}
.rt-editor{margin:.15em 0 0;font-size:.85em;opacity:.8}
.rt-editor-name{font-weight:600}
.rt-editor a{text-decoration:none}
.rt-editor a:hover{text-decoration:underline}
.rt-dates{flex:0 0 auto;margin-left:auto;text-align:right;font-size:.85em;opacity:.8}
.rt-dates time{display:block;white-space:nowrap}

/* Styles */
.rt-byline--bordered{border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:.75em 0;border-color:rgba(127,127,127,.25)}
.rt-byline--card{padding:1em 1.25em;border-radius:8px;background:#f6f7f9}

/* On a narrow screen the dates cannot share the row with the photo and the
   role: measured on a 360px viewport, an "Updated: 30 Jul 2026" label needs
   more room than is left once the photo and name have taken theirs, and it
   breaks mid-date. They get their own row instead, which no font size can
   substitute for. */
@media (max-width:600px){
    .rt-dates{width:100%;margin-left:0;text-align:left;margin-top:.5em}
    .rt-dates time{display:inline;white-space:nowrap}
    .rt-dates time+time{margin-left:.75em}
}

/* Author box. One card layout with a compact modifier for the editor: two sets
   of rules for two cards drift, and the drift shows up as the editor's card
   missing whatever was added to the author's. */
.rt-box{display:flex;flex-direction:column;gap:1em;margin:2.5em 0 0}
.rt-box *{box-sizing:border-box}
.rt-box-card{display:flex;gap:1.25em;padding:1.25em;border:1px solid rgba(127,127,127,.25);border-radius:8px}
.rt-box-photo{flex:0 0 auto;line-height:0}
.rt-box .rt-box-photo img{width:96px !important;height:96px !important;border-radius:50% !important;object-fit:cover;display:block}
.rt-box-body{flex:1 1 auto;min-width:0}
.rt-box-label{margin:0 0 .35em;font-size:.75em;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.rt-box-name{margin:0;font-size:1.1em;font-weight:600}
.rt-box-name a{text-decoration:none}
.rt-box-name a:hover{text-decoration:underline}
.rt-box-role{margin:.15em 0 0;font-size:.9em;opacity:.75}
.rt-box-bio{margin:.7em 0 0;font-size:.95em}
.rt-box-links{list-style:none;margin:.8em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em .9em;font-size:.85em}
.rt-box-links li{margin:0}
.rt-box-more{font-weight:600}

/* The editor's card is secondary to the author's and says so by being smaller,
   not by being a different component. */
.rt-box-card--compact{padding:.9em 1.25em;align-items:center}
.rt-box .rt-box-card--compact .rt-box-photo img{width:56px !important;height:56px !important}
.rt-box-card--compact .rt-box-name{font-size:1em}

@media (max-width:600px){
    .rt-box-card{flex-direction:column;gap:.9em}
    .rt-box-card--compact{flex-direction:row}
}

/* Expertise on the profile page. Not links: these strings are knowsAbout, and
   they are not a taxonomy, so there is nowhere for a link to go. */
.rt-author-topics{list-style:none;margin:1em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em;font-size:.85em}
.rt-author-topics li{margin:0;padding:.2em .7em;border:1px solid rgba(127,127,127,.3);border-radius:999px}
.rt-author-email{margin:.9em 0 0;font-size:.9em}
.rt-author-edited{margin-top:2.5em}

/* Breadcrumbs. Geometry only, and the list markers explicitly off: an <ol> is
   the correct element for a trail because the order carries the meaning, but its
   numbers are not part of that meaning — without this rule every crumb renders
   behind a "1." and the trail reads as a numbered list.

   🔴 Every rule below the wrapper is deliberately qualified by it, and that is
   not tidiness — it is the only thing that makes them apply at all.

   The trail is inserted into the_content, so it renders inside whatever element
   the theme wraps content in — and every theme styles lists inside that wrapper.
   Measured on britishboxingnews.co.uk, whose theme prints:

       .betting-content ol{list-style:decimal}
       .betting-content ol,.betting-content ul{margin:0 0 1.25rem;padding-left:2.5rem}
       .betting-content li{margin:.35rem 0}

   A bare `.rt-crumbs` is one class — (0,1,0) — and loses to (0,1,1) on all
   three. The decimal came back, the 2.5rem indent came back, and because the
   flex row is still ours the outside markers landed on top of the previous
   crumb's text: the live trail read "1. Hon2e › …". Qualifying by the wrapper
   makes these (0,2,0), which wins on class count without a single !important.
   The li rules are restated for the same reason — a theme that puts
   list-style on li rather than ol would otherwise still win. */
.rt-breadcrumbs{margin:0 0 1.25em;font-size:.85em;line-height:1.5}
.rt-breadcrumbs .rt-crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.rt-breadcrumbs .rt-crumb{list-style:none;margin:0;padding:0;min-width:0}
.rt-breadcrumbs .rt-crumb a{text-decoration:none}
.rt-breadcrumbs .rt-crumb a:hover{text-decoration:underline}
.rt-breadcrumbs .rt-crumb-sep{opacity:.45;margin:0 .5em}
/* The last crumb is the page the reader is already on, so it recedes rather
   than competing with the links beside it. */
.rt-breadcrumbs .rt-crumb [aria-current]{opacity:.7}

/* Author page. Geometry only — every colour here is inherited or a neutral grey
   at low opacity, so the page takes the theme's palette rather than arguing with
   it. Without these rules the page renders as unstyled flow content: measured on
   a live theme, the profile sat flush against the window edge at x=0 while the
   footer below it was properly contained. */
.rt-author-page{margin:0}
.rt-author-page *{box-sizing:border-box}

/* Only when the site has not named its own wrappers. With them, the theme's
   container owns the width and adding to it here would double the padding. */
.rt-author-page--bare{max-width:70rem;margin:0 auto;padding:2.5em 1.25em}

.rt-author-header{display:flex;align-items:flex-start;gap:1.75em;flex-wrap:wrap;margin-bottom:2.5em}
.rt-author-photo{flex:0 0 auto;line-height:0}
.rt-author-page .rt-author-photo img{width:9rem !important;height:9rem !important;border-radius:50% !important;object-fit:cover;display:block}
.rt-author-intro{flex:1 1 20rem;min-width:0}
.rt-author-name{margin:0 0 .15em}
.rt-author-role{margin:0 0 .9em;font-size:.95em;opacity:.75}
.rt-author-bio{margin:0}
.rt-author-bio p:last-child{margin-bottom:0}
.rt-author-links{list-style:none;margin:1em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4em .9em;font-size:.9em}
.rt-author-links li{margin:0}

.rt-author-articles>h2{margin:0 0 1em;font-size:1.35em}

/* Plain list: the date on its own line. Inline after the title it reads as part
   of the headline, which is what the first version did. */
.rt-author-list{list-style:none;margin:0;padding:0}
.rt-author-list li{padding:.85em 0;border-bottom:1px solid rgba(127,127,127,.2)}
.rt-author-list li:first-child{border-top:1px solid rgba(127,127,127,.2)}
.rt-author-list a{display:block;text-decoration:none;font-weight:600}
.rt-author-list a:hover{text-decoration:underline}
.rt-author-list time{display:block;margin-top:.25em;font-size:.82em;opacity:.7}

/* Cards */
.rt-author-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5em}
.rt-author-card{min-width:0}
.rt-author-card-link{display:block;text-decoration:none}
.rt-author-card-image{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:6px}
.rt-author-card-image--empty{background:rgba(127,127,127,.15)}
.rt-author-card-title{margin:.6em 0 .25em;font-size:1em;line-height:1.35}
.rt-author-card-link:hover .rt-author-card-title{text-decoration:underline}
.rt-author-card-date{font-size:.82em;opacity:.7}

.rt-author-pager{display:flex;flex-wrap:wrap;gap:.4em;margin-top:2em;font-size:.95em}
.rt-author-pager .page-numbers{display:inline-block;padding:.35em .7em;border:1px solid rgba(127,127,127,.25);border-radius:4px;text-decoration:none;line-height:1}
.rt-author-pager .page-numbers.current{font-weight:700;border-color:currentColor}
.rt-author-pager .page-numbers.dots{border-color:transparent}

@media (max-width:600px){
    .rt-author-page .rt-author-photo img{width:6rem !important;height:6rem !important}
    .rt-author-header{gap:1.1em;margin-bottom:1.75em}
    .rt-author-page--bare{padding:1.75em 1em}
    /* The placeholder exists to keep grid rows level. In one column there is
       nothing to keep level, and a full-width empty box costs half a screen. */
    .rt-author-card-image--empty{display:none}
}

/* FAQ, plain. Deliberately close to bare: the block sits inside the article body,
   where the theme already styles headings and paragraphs, so it only needs
   separating from the text around it. */
.rt-faq--plain .rt-faq-item+.rt-faq-item{margin-top:1.25em;padding-top:1.25em;border-top:1px solid rgba(127,127,127,.2)}
.rt-faq-q{margin:0 0 .4em}
.rt-faq-a>p:last-child{margin-bottom:0}

/* FAQ, accordion. Built on <details>, so everything here is presentation only —
   the open and closed states work with the stylesheet removed.

   The doubled-up `.rt-faq.rt-faq--accordion` prefix is not decoration. Article
   themes style the prose inside their content wrapper, and the rules that do it are
   specific: measured on this one, ts-blog.css carries
   `.article_page .content .inner h3, … p { margin: 25px 0 }` — three classes and an
   element. A single-class reset loses to that, and a same-weight one is decided by
   which stylesheet happens to be enqueued last, which is not something a plugin can
   rely on. Four classes wins on specificity alone, so no !important is needed and a
   theme can still override deliberately. Collapsed rows cannot inherit a 25px gap
   between the question and an answer that is not on screen. */
.rt-faq.rt-faq--accordion .rt-faq-item{border-bottom:1px solid rgba(127,127,127,.2)}
.rt-faq.rt-faq--accordion .rt-faq-item:first-of-type{border-top:1px solid rgba(127,127,127,.2)}
.rt-faq.rt-faq--accordion .rt-faq-summary{display:flex;align-items:flex-start;gap:.6em;cursor:pointer;padding:.85em 0;list-style:none;margin:0}
/* The default disclosure triangle, removed in both dialects, and replaced below by
   a marker that can be positioned and animated. */
.rt-faq.rt-faq--accordion .rt-faq-summary::-webkit-details-marker{display:none}
.rt-faq.rt-faq--accordion .rt-faq-summary::marker{content:''}
.rt-faq.rt-faq--accordion .rt-faq-item .rt-faq-q{margin:0;flex:1 1 auto;font-size:1.05em;line-height:1.4}
.rt-faq.rt-faq--accordion .rt-faq-summary::after{content:'';flex:0 0 auto;width:.55em;height:.55em;margin-top:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;opacity:.55}
.rt-faq.rt-faq--accordion .rt-faq-item[open]>.rt-faq-summary::after{transform:rotate(-135deg)}
.rt-faq.rt-faq--accordion .rt-faq-summary:hover{opacity:.85}
.rt-faq.rt-faq--accordion .rt-faq-summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rt-faq.rt-faq--accordion .rt-faq-item .rt-faq-a{padding:0 0 1.05em}
.rt-faq.rt-faq--accordion .rt-faq-item .rt-faq-a>p{margin:0}
.rt-faq.rt-faq--accordion .rt-faq-item .rt-faq-a>p+p{margin-top:.7em}

@media (prefers-reduced-motion:reduce){
    .rt-faq-summary::after{transition:none}
}