/* ==========================================================================
   বারিন্দ পোস্ট — editorial theme
   A newsprint-inspired design system layered on top of Bootstrap's grid.
   Everything visual lives here; views should carry structure, not styling.
   ========================================================================== */

:root {
    /* Ink & paper */
    --ink:        #14140f;
    --ink-2:      #3d3d38;
    --ink-3:      #6f6f68;
    --ink-4:      #93938c;
    --paper:      #ffffff;
    --paper-2:    #f7f6f2;
    --paper-3:    #efeee8;
    --rule:       #e0dfd8;
    --rule-dark:  #14140f;

    /* Editorial red — masthead & section accents */
    --accent:      #c8102e;
    --accent-dark: #9d0c24;
    --accent-wash: #fdf2f3;

    /* Type */
    --serif: 'Noto Serif Bengali', 'Tiro Bangla', Georgia, 'Times New Roman', serif;
    --sans:  'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Rhythm */
    --gap:    1.5rem;
    --gap-lg: 2.5rem;

    --shell: 1240px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container { max-width: var(--shell); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Bengali headlines contain long conjunct clusters that browsers will happily
   run past the edge of a narrow column. Let them break rather than overflow. */
h1, h2, h3, h4, h5, h6, p, li, a, .story__title, .article__title, .prose {
    overflow-wrap: break-word;
    word-break: break-word;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

/* Focus ring that stays legible on a white page */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.topbar {
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    font-size: 0.78rem;
    color: var(--ink-3);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
    padding: 0.25rem 0;
}

.topbar__date { letter-spacing: 0.02em; }

.topbar__social { display: flex; gap: 0.9rem; align-items: center; }
.topbar__social a { color: var(--ink-3); font-size: 0.9rem; }
.topbar__social a:hover { color: var(--accent); }

.masthead {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 1.4rem 0 1.25rem;
}

.masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.masthead__logo { height: 62px; width: auto; display: block; }

.masthead__name {
    font-family: var(--serif);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}

.masthead__tagline {
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-top: 0.4rem;
}

.masthead__flag {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--accent);
    padding: 0.12rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    border-radius: 2px;
}

/* Search */
.masthead__search { flex-shrink: 0; }

.searchbox {
    display: flex;
    align-items: center;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    border-radius: 2px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.searchbox:focus-within {
    border-color: var(--ink);
    background: var(--paper);
}

.searchbox input {
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    font-family: var(--sans);
    width: 210px;
    color: var(--ink);
}

.searchbox input:focus { outline: none; }
.searchbox input::placeholder { color: var(--ink-4); }

.searchbox button {
    border: 0;
    background: transparent;
    color: var(--ink-3);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.searchbox button:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.mainnav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--paper);
    border-bottom: 2px solid var(--rule-dark);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.mainnav__inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 46px;
    position: relative;
}

.mainnav__link {
    font-family: var(--sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: 0.7rem 0.75rem;
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease;
}

.mainnav__link:hover { color: var(--accent); }

.mainnav__link.is-active { color: var(--ink); font-weight: 600; }

.mainnav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
}

.mainnav__home { color: var(--accent); font-size: 1rem; }

.mainnav__special {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.86rem;
}

.mainnav__more { margin-left: auto; }

.mainnav .dropdown-menu {
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    padding: 0.35rem;
    font-family: var(--sans);
}

.mainnav .dropdown-item {
    font-size: 0.9rem;
    padding: 0.45rem 0.7rem;
    border-radius: 2px;
    color: var(--ink-2);
}

.mainnav .dropdown-item:hover { background: var(--paper-2); color: var(--accent); }

/* Mobile nav toggle */
.mainnav__toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.1rem;
    color: var(--ink);
    padding: 0.5rem 0.6rem;
}

/* --------------------------------------------------------------------------
   Kicker / eyebrow labels
   -------------------------------------------------------------------------- */

.kicker {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.45rem;
    line-height: 1.2;
}

.kicker--bar {
    padding-left: 0.55rem;
    border-left: 3px solid currentColor;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 2px solid var(--rule-dark);
    padding-top: 0.6rem;
    margin-bottom: 1.25rem;
}

.section-head__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.section-head__title .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--accent);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.section-head__more {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
}

.section-head__more:hover { color: var(--accent); }

/* Lighter variant used inside the rail */
.rail-head {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 2px solid var(--rule-dark);
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------------------
   Story cards
   -------------------------------------------------------------------------- */

/* No height:100% here — these are used both as grid cards and as stacked rows
   inside a rail, and forcing full height makes every stacked row expand to its
   container and overflow. Cards align to the top, which is the newspaper look
   anyway. */
.story {
    display: flex;
    flex-direction: column;
}

.story__media {
    display: block;
    overflow: hidden;
    background: var(--paper-3);
    margin-bottom: 0.75rem;
}

.story__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(.2,.6,.3,1), filter 0.3s ease;
}

.story:hover .story__media img { transform: scale(1.035); }

/* An image that fails to load (dead external URL, moved file) collapses the
   media slot entirely — a grey box full of alt text reads worse than a clean
   text-led card. Applied by the handler in the layout. */
.is-broken-media { display: none !important; }

.story__title {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.45rem;
    letter-spacing: -0.01em;
}

.story__title a { color: var(--ink); }
.story__title a:hover { color: var(--accent); }

.story__lead {
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story__meta {
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--ink-4);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.story__meta .sep { color: var(--rule); }

/* Size variants */
.story--lead .story__title   { font-size: 2.35rem; font-weight: 700; line-height: 1.15; }
.story--lead .story__lead    { font-size: 1.05rem; -webkit-line-clamp: 4; }
.story--feature .story__title{ font-size: 1.32rem; }
.story--medium .story__title { font-size: 1.1rem; }
.story--compact .story__title{ font-size: 1rem; }
.story--compact .story__lead { display: none; }

/* Horizontal list row (used in rails and secondary lists) */
.story--row {
    flex-direction: row;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule);
}

.story--row:last-child { border-bottom: 0; }

.story--row .story__media {
    flex: 0 0 84px;
    width: 84px;
    margin-bottom: 0;
}

.story--row .story__media img { aspect-ratio: 1 / 1; }

.story--row .story__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.story--row .story__lead { display: none; }
.story--row .story__body { flex: 1; min-width: 0; }

/* Text-only row, no thumbnail */
.story--text {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}

.story--text:last-child { border-bottom: 0; }

.story--text .story__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
}

/* Divider columns in grids — thin newspaper column rules */
.grid-ruled > [class*="col-"] {
    border-right: 1px solid var(--rule);
}

.grid-ruled > [class*="col-"]:last-child { border-right: 0; }

@media (max-width: 767.98px) {
    .grid-ruled > [class*="col-"] {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding-bottom: 1.1rem;
    }
    .grid-ruled > [class*="col-"]:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Front page — lead block
   -------------------------------------------------------------------------- */

.lead-block {
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--gap-lg);
    margin-bottom: var(--gap-lg);
}

.lead-block__side {
    border-left: 1px solid var(--rule);
    padding-left: var(--gap);
}

/* Side stories are compact rows, so they carry their own dividers. Give the
   first one a little breathing room under the rail heading. */
.lead-block__side .story--row:first-of-type,
.lead-block__side .story--text:first-of-type { padding-top: 0; }

@media (max-width: 991.98px) {
    .lead-block__side {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--rule);
        padding-top: 1.25rem;
        margin-top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Rail (sidebar) modules
   -------------------------------------------------------------------------- */

.rail-module { margin-bottom: 2rem; }

.rail-module--boxed {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 1.1rem;
}

/* Ranked "most read" list */
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }

.rank-list li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}

.rank-list li:last-child { border-bottom: 0; }

.rank-list li::before {
    counter-increment: rank;
    content: counter(rank);
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--rule);
    flex: 0 0 auto;
    min-width: 1.4rem;
}

.rank-list li:nth-child(-n+3)::before { color: var(--accent); }

.rank-list a {
    font-family: var(--serif);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.rank-list a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Article page
   -------------------------------------------------------------------------- */

.article { max-width: 46rem; }
.article--wide { max-width: none; }

.article__kicker { margin-bottom: 0.75rem; }

.article__title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.article__standfirst {
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 1.4rem;
}

/* "এক নজরে" key points — lead_text, one point per line */
.key-points {
    margin: 0 0 1.8rem;
    padding: 1rem 1.2rem 1.1rem;
    border-top: 3px solid var(--accent);
    background: var(--paper-2);
    font-family: var(--sans);
}

.key-points__title {
    margin: 0 0 0.6rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.key-points__list { margin: 0; padding: 0 0 0 1.1rem; }
.key-points__list li { margin: 0 0 0.45rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
.key-points__list li::marker { color: var(--accent); }
.key-points__list li:last-child { margin-bottom: 0; }

.article__byline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink-3);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0.8rem 0;
    margin-bottom: 1.6rem;
}

.article__byline strong { color: var(--ink); font-weight: 600; }
.article__byline .sep { color: var(--rule); }

.article__figure { margin: 0 0 1.6rem; }

.article__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.article__figure figcaption {
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-3);
    padding-top: 0.55rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.7rem;
}

/* Long-form body copy */
.prose {
    font-family: var(--serif);
    font-size: 1.16rem;
    line-height: 1.85;
    color: var(--ink);
}

.prose p { margin: 0 0 1.35rem; }

.prose p:first-of-type::first-letter {
    float: left;
    font-size: 3.6rem;
    line-height: 0.86;
    font-weight: 700;
    padding: 0.16rem 0.55rem 0 0;
    color: var(--ink);
}

.prose h2, .prose h3 {
    margin: 2.2rem 0 0.9rem;
    font-size: 1.5rem;
}

.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-dark); }

.prose img { height: auto; margin: 1.6rem 0; }

.prose blockquote {
    margin: 1.9rem 0;
    padding: 0.2rem 0 0.2rem 1.4rem;
    border-left: 3px solid var(--accent);
    font-size: 1.32rem;
    line-height: 1.6;
    color: var(--ink);
}

/* "আরও পড়ুন" related-story callout inserted from the editor
   (stored as a blockquote; transformed by render_article_body()) */
.related-inline {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 1.8rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--accent);
    background: var(--paper-2);
    font-family: var(--sans);
}

.related-inline__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.related-inline__label i { margin-right: 0.35rem; }

.related-inline__link {
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
}

.related-inline__link:hover { color: var(--accent); text-decoration: none; }

.prose ul, .prose ol { margin: 0 0 1.35rem 1.25rem; }
.prose li { margin-bottom: 0.5rem; }

/* Share row */
.share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: var(--sans);
}

.share__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-right: 0.15rem;
}

.share__btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink-2);
    background: var(--paper);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share__btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* Tag chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 0.28rem 0.7rem;
    border-radius: 2rem;
    transition: all 0.15s ease;
}

.chip:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.chip--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip--active:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* --------------------------------------------------------------------------
   Page header (section / tag / search)
   -------------------------------------------------------------------------- */

.page-head {
    border-bottom: 2px solid var(--rule-dark);
    padding-bottom: 0.9rem;
    margin-bottom: 1.8rem;
}

.page-head__eyebrow {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.page-head__title {
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.page-head__note {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink-3);
    margin: 0.35rem 0 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    background: var(--paper-2);
}

.empty-state i { font-size: 1.8rem; color: var(--ink-4); margin-bottom: 0.6rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: 4rem;
    border-top: 2px solid var(--rule-dark);
    background: var(--paper-2);
    padding: 2.6rem 0 1.6rem;
    font-family: var(--sans);
    font-size: 0.88rem;
    color: var(--ink-2);
}

.site-footer__brand {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.site-footer__blurb { color: var(--ink-3); line-height: 1.7; max-width: 30rem; }

.site-footer__head {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.85rem;
}

.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: 0.5rem; }
.site-footer__links a { color: var(--ink-2); }
.site-footer__links a:hover { color: var(--accent); }

.site-footer__social { display: flex; gap: 0.6rem; margin-top: 0.2rem; }

.site-footer__social a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--ink-2);
    background: var(--paper);
}

.site-footer__social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.site-footer__bottom {
    border-top: 1px solid var(--rule);
    margin-top: 2rem;
    padding-top: 1.1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Ads
   -------------------------------------------------------------------------- */

.ad-slot {
    border: 1px dashed var(--rule);
    background: var(--paper-2);
    color: var(--ink-4);
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ad-slot--banner  { min-height: 90px; margin: 1.6rem 0; }
.ad-slot--rail    { min-height: 250px; margin-bottom: 1.6rem; }
.ad-slot--inline  { min-height: 120px; margin: 2rem 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .masthead__name { font-size: 2.1rem; }
    .masthead__logo { height: 50px; }
    .story--lead .story__title { font-size: 1.85rem; }
    .article__title { font-size: 2.1rem; }
}

@media (max-width: 767.98px) {
    .masthead__inner { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1rem 0; }
    .masthead__search { width: 100%; }
    .searchbox { width: 100%; }
    .searchbox input { width: 100%; }
    .topbar__social { display: none; }

    .mainnav__toggle { display: inline-flex; }
    .mainnav__inner { overflow-x: auto; scrollbar-width: none; }
    .mainnav__inner::-webkit-scrollbar { display: none; }

    .masthead__name { font-size: 1.75rem; }
    .story--lead .story__title { font-size: 1.5rem; }
    .story--feature .story__title { font-size: 1.15rem; }

    .article__title { font-size: 1.7rem; }
    .article__standfirst { font-size: 1.08rem; }
    .prose { font-size: 1.08rem; line-height: 1.8; }
    .prose p:first-of-type::first-letter { font-size: 3rem; }

    .site-footer { margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Print — strip chrome, keep the story
   -------------------------------------------------------------------------- */

@media print {
    .topbar, .mainnav, .masthead__search, .site-footer,
    .share, .rail, .ad-slot, .read-next { display: none !important; }

    body { font-size: 11pt; color: #000; }
    .article { max-width: none; }
    .prose { font-size: 11pt; line-height: 1.5; }
    .prose p:first-of-type::first-letter { font-size: inherit; float: none; padding: 0; font-weight: inherit; }
    a { color: #000 !important; text-decoration: none !important; }
}