/**
 * Feature ("special") pages
 *
 * article_main.full_width = 'yes' turns one article or test into a feature: the
 * site header, and then straight into the piece. No breadcrumb, no leaderboard,
 * no right-hand nav, no white card, no ads, no paid skin.
 *
 * The whole page sits on one ground colour taken from article_main.full_width_bg.
 * index.php writes the palette onto <body class="tr-feature"> as custom
 * properties; everything below reads them and nothing hard-codes a colour. The
 * ink is plain white or near-black, whichever carries more contrast against the
 * ground, and every rule, label and lifted surface is that ink at an opacity -
 * so one hex produces a whole coherent page and there is no second field to keep
 * in step.
 *
 * Loaded only on feature pages, and loaded last, so it wins over the article,
 * comment and chart sheets it is restyling onto the colour.
 */

body.tr-feature {
    /* Fallbacks only. index.php overwrites all of these inline from the chosen
       ground colour; these keep the page readable if it ever ships without. */
    --feat-bg: #ffffff;
    --feat-ink: #0b0f13;
    --feat-ink-soft: rgba(11, 15, 19, 0.74);
    --feat-ink-faint: rgba(11, 15, 19, 0.52);
    --feat-line: rgba(11, 15, 19, 0.22);
    --feat-line-soft: rgba(11, 15, 19, 0.11);
    --feat-surface: rgba(11, 15, 19, 0.06);
    --feat-surface-2: rgba(11, 15, 19, 0.11);

    --feat-wrap: 1180px;
    --feat-gutter: 24px;

    /* A class beats the bare `body` selector that the skin's inline <style>
       writes, so the ground wins without !important. The shorthand also clears
       any skin background-image the campaign left behind.

       html carries no background of its own, so this propagates to the canvas:
       the colour fills the viewport even when the piece is shorter than a
       screen. */
    background: var(--feat-bg);
    color: var(--feat-ink);
}


/* ==========================================================================
   Shell

   #whitebg is an ID selector carrying the white card look (background, 1px
   border, 5px radius). A class alone loses to it, so match the id here or the
   card stays drawn around the colour.

   margin-top is deliberately not touched: ad_settings.php emits a responsive
   #whitebg margin that clears the fixed navbar at every breakpoint, and a
   single hand-picked figure could only ever be right at one width.
   ========================================================================== */

#whitebg.tr-feature-shell {
    max-width: none;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Bootstrap's .row carries negative side gutters that #whitebg's padding
   normally absorbs. That padding is gone above, so zero them or the row hangs
   past the viewport and puts a horizontal scrollbar on the page. */
#whitebg.tr-feature-shell > main > .row {
    --bs-gutter-x: 0;
    margin: 0;
}

.tr-feature-main {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* The reading measure. Every top-level block of the piece is centred at the
   wrap width while the colour behind it runs to the viewport edge - which is
   the whole point of the mode. */
.tr-feature-main > * {
    max-width: var(--feat-wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--feat-gutter);
    padding-right: var(--feat-gutter);
}

/* The scroll-progress bar is position:fixed and must not be boxed. */
.tr-feature-main > .article-progress {
    max-width: none;
    padding: 0;
}

/* A free-form special brings its own bands, its own measure and its own
   stylesheet, so it is handed the full width and left alone. Everything around
   it - further reading, the comment thread - keeps the reading measure above. */
.tr-feature-main > .article--freeform {
    max-width: none;
    padding: 0;
}


/* ==========================================================================
   Special report rubric

   The band that names the piece as ours, directly under the site nav and above
   whatever masthead the special draws for itself. Emitted for every free-form
   special rather than written into each one, so they all carry it.

   It reads entirely from the feature palette, so it takes the ink and the
   hairline of whatever ground the page is set to.
   ========================================================================== */

.tr-special-rubric {
    background: var(--feat-surface);
    border-bottom: 1px solid var(--feat-line);
}

.tr-special-rubric__inner {
    max-width: var(--feat-wrap);
    margin: 0 auto;
    padding: 11px var(--feat-gutter);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 11px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.4;
}

.tr-special-rubric__mark {
    color: var(--feat-ink);
    font-weight: 700;
}

.tr-special-rubric__sep {
    color: var(--feat-line);
}

.tr-special-rubric__label {
    color: var(--feat-ink-faint);
}

@media (max-width: 767px) {
    body.tr-feature {
        --feat-gutter: 18px;
    }
}


/* ==========================================================================
   Masthead

   The header card loses its white panel and becomes the opening of the piece:
   an oversized title straight on the colour, with the byline and dates reduced
   to a quiet rule beneath it.
   ========================================================================== */

/* Lead-in above the header card. A free-form special has no header card - it
   opens on its own masthead, which must butt straight up against the rubric -
   so the gap is excluded rather than reset afterwards: an override further up
   this file would only tie on specificity and lose to source order. */
.tr-feature .article:not(.article--freeform) {
    padding-top: 48px;
}

.tr-feature .article-header-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 40px;
}

.tr-feature .article-header-card__title-bar {
    padding: 0;
    border: 0;
    background: none;
}

.tr-feature .article-header-card__title {
    color: var(--feat-ink);
    font-size: clamp(2.1rem, 6.2vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 800;
    margin: 0 0 28px;
    text-wrap: balance;
}

.tr-feature .article-header-card__meta {
    border-top: 1px solid var(--feat-line);
    border-bottom: 1px solid var(--feat-line);
    padding: 16px 0;
    margin: 0;
    gap: 20px;
}

.tr-feature .article-header-card__avatar {
    border-color: var(--feat-line);
}

.tr-feature .article-header-card__attribution,
.tr-feature .article-header-card__detail,
.tr-feature .article-header-card__details {
    color: var(--feat-ink-faint);
}

.tr-feature .article-header-card__author-name {
    color: var(--feat-ink);
}

.tr-feature .article-header-card__details {
    border-left-color: var(--feat-line);
}

.tr-feature .article-header-card__detail + .article-header-card__detail::before {
    color: var(--feat-line);
}

.tr-feature .article-header-card__social a {
    background: var(--feat-surface);
    color: var(--feat-ink-soft);
}

.tr-feature .article-header-card__social a:hover {
    background: var(--feat-surface-2);
    color: var(--feat-ink);
}


/* ==========================================================================
   The piece

   Longer measure, larger type, more air between paragraphs than the boxed
   article template - the page has nothing else on it to compete with.
   ========================================================================== */

.tr-feature .article-content {
    color: var(--feat-ink);
    font-size: 1.14rem;
    line-height: 1.72;
}

.tr-feature .article-content > p {
    margin: 0 0 1.4em;
}

/* An opening paragraph reads as a standfirst. */
.tr-feature .article-content > p:first-of-type {
    font-size: 1.32rem;
    line-height: 1.55;
    color: var(--feat-ink);
}

.tr-feature .article-content h2,
.tr-feature .article-content h3,
.tr-feature .article-content h4 {
    color: var(--feat-ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.tr-feature .article-content h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    margin: 2.2em 0 0.7em;
    padding-top: 0.7em;
    border-top: 1px solid var(--feat-line-soft);
}

.tr-feature .article-content h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 700;
    margin: 1.9em 0 0.6em;
}

.tr-feature .article-content strong,
.tr-feature .article-content b {
    color: var(--feat-ink);
}

.tr-feature .article-content ul,
.tr-feature .article-content ol {
    margin: 0 0 1.4em;
    padding-left: 1.3em;
}

.tr-feature .article-content li {
    margin-bottom: 0.5em;
}

.tr-feature .article-content li::marker {
    color: var(--feat-ink-faint);
}

.tr-feature .article-content blockquote {
    border-left: 3px solid var(--feat-line);
    margin: 2em 0;
    padding: 0.2em 0 0.2em 1.4em;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--feat-ink);
}

.tr-feature .article-content hr {
    border: 0;
    border-top: 1px solid var(--feat-line);
    opacity: 1;
    margin: 2.5em 0;
}

/* Links carry the ink rather than the site blue, which cannot be trusted to
   read against an arbitrary ground. The underline does the work instead. */
.tr-feature .article a,
.tr-feature .article-content a {
    color: var(--feat-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--feat-line);
    transition: text-decoration-color 0.15s ease;
}

.tr-feature .article a:hover,
.tr-feature .article-content a:hover {
    text-decoration-color: currentColor;
}


/* ==========================================================================
   Pictures

   The one place a feature is allowed past the reading measure: an image can run
   to the full wrap width, and the framing the boxed template gives it (border,
   grey mat) comes off.
   ========================================================================== */

.tr-feature .article img {
    border: 0;
    border-radius: 10px;
}

.tr-feature .article-image-block {
    max-width: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 2.4em auto;
}

.tr-feature .article-image-block img {
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.tr-feature .article-image-caption {
    color: var(--feat-ink-faint);
    font-size: 0.92rem;
}


/* ==========================================================================
   Panels, tables and the site's own components

   Anything the article body pulls in that was drawn for a white page gets the
   lifted-surface treatment instead: ink at 6%, hairlines at 22%. It keeps
   third-party components legible on any ground without restyling each one.
   ========================================================================== */

.tr-feature .article-content table,
.tr-feature .article-content #resulttable {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    color: var(--feat-ink);
}

.tr-feature .article-content th,
.tr-feature .article-content td,
.tr-feature #resulttable th,
.tr-feature #resulttable td {
    border-color: var(--feat-line-soft);
    color: inherit;
}

.tr-feature #resulttable tr.alt td,
.tr-feature .article-content tbody tr:nth-child(even) td {
    background-color: var(--feat-surface);
    color: inherit;
}

.tr-feature .summary-table,
.tr-feature .article-footer {
    background-color: var(--feat-surface);
    border-color: var(--feat-line);
    color: var(--feat-ink);
}

/* Table of contents, when the piece has headings for one. It lives inside the
   header card, so it has to lose the white-page hairlines with it. */
.tr-feature .article-header-card__toc,
.tr-feature .article-header-card__toc details[open] > .article-header-card__toc-summary {
    border-color: var(--feat-line-soft);
}

.tr-feature .article-header-card__toc-summary,
.tr-feature .article-header-card__toc-summary::after,
.tr-feature .article-header-card__toc-list a {
    color: var(--feat-ink-soft);
}

.tr-feature .article-header-card__toc-list a {
    text-decoration: none;
}

.tr-feature .article-header-card__toc-list a:hover,
.tr-feature .article-header-card__toc-summary:hover {
    color: var(--feat-ink);
}

/* Further reading closes the piece on a rule rather than a panel. */
.tr-feature .further-reading {
    border-top: 1px solid var(--feat-line);
    margin-top: 3.5em;
    padding-top: 2em;
    background: transparent;
    color: var(--feat-ink);
}

.tr-feature .further-reading a {
    color: var(--feat-ink);
}


/* ==========================================================================
   Comments

   comments.css is driven end to end by --tr-c-* custom properties (it already
   ships a dark set for [data-bs-theme="dark"]). So the thread does not need
   restyling here at all - redefining its variables from the feature palette
   retints the panel, the rails, the form and the buttons in one go, and keeps
   working if that sheet gains new parts.

   The one thing kept literal is the head strip: it is meant to read as a band,
   so it takes the lifted surface rather than disappearing into the ground.
   ========================================================================== */

body.tr-feature {
    --tr-c-rail: var(--feat-line);
    --tr-c-author: var(--feat-ink);
    --tr-c-meta: var(--feat-ink-faint);
    --tr-c-body: var(--feat-ink-soft);
    --tr-c-divider: var(--feat-line-soft);
    --tr-c-soft: var(--feat-surface);
    --tr-c-panel-bg: transparent;
    --tr-c-panel-bd: var(--feat-line);
    --tr-c-panel-shadow: none;
    --tr-c-head-bg: var(--feat-surface-2);
    --tr-c-head-ink: var(--feat-ink);
    --tr-c-form-bg: var(--feat-surface);
    --tr-c-form-bd: var(--feat-line);
    --tr-c-input-bg: var(--feat-surface);
    --tr-c-input-bd: var(--feat-line);
    --tr-c-rules-bg: var(--feat-surface);
}

/* comments.css loads after this sheet and its own `margin: 2.5rem 0 4rem` and
   side padding tie with `.tr-feature-main > *` on specificity, so the panel
   lost the auto margins and sat flush left. It is a bordered box, so it takes
   the measure as its width rather than as padding. */
.tr-feature-main > .tr-comments {
    width: calc(100% - 2 * var(--feat-gutter));
    max-width: calc(var(--feat-wrap) - 2 * var(--feat-gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
}

/* The count sits on the head strip and is hard-coded near-white in comments.css,
   which vanishes when that strip is a light ground. */
.tr-feature .tr-comments-count {
    color: var(--feat-ink-faint);
}

.tr-feature .tr-comments-empty {
    color: var(--feat-ink-faint);
}

.tr-feature .tr-comment-body a {
    color: var(--feat-ink);
    text-decoration-color: var(--feat-line);
}

.tr-feature .tr-comment-body a:hover {
    color: var(--feat-ink);
    text-decoration-color: currentColor;
}

.tr-feature .tr-comments input::placeholder,
.tr-feature .tr-comments textarea::placeholder {
    color: var(--feat-ink-faint);
}


/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    body.tr-feature {
        background: #fff;
        color: #000;
    }

    .tr-feature .article-header-card__title {
        font-size: 2rem;
    }
}