/* ==========================================================================
   Kyiv Post — clean rebuild on Bootstrap 5
   Values below are measured from the live site's computed styles.
   ========================================================================== */

:root {
    --kp-crimson: #c61f40;
    /* the same red, lifted where it has to read as text on a dark ground */
    --kp-accent: #c61f40;

    --kp-bg: #fff;
    --kp-text: #000;
    --kp-text-2: #3d3d3d;
    --kp-grey: #676767;
    --kp-surface: #f0f0f0;
    --kp-surface-2: #eee;
    --kp-rule: #e3e3e3;
    --kp-rule-2: #e0e1e1;
    --kp-rule-nav: #808080;
    --kp-rule-box: #212121;
    --kp-rule-strong: #000;
    --kp-icon: #333;
    --kp-shadow: rgba(0, 0, 0, .1);
    --kp-tab-bg: #000;
    --kp-tab-text: #fff;
    --kp-dot: #c9c9c9;
    --kp-dot-on: #333;
    --kp-field-bg: #fff;
    --kp-field-border: #676767;

    color-scheme: light;

    --kp-serif: georgia, 'Times New Roman', serif;
    --kp-display: 'Playfair Display', serif;
    /* Manrope has no capital schwa (U+018F), which every uppercase label needs,
       so the interface runs on Inter. The fallbacks stay sans-serif for the
       same reason: a missing glyph must not drop the word into a serif face. */
    --kp-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* content is 1340px inside 50px gutters at a 1440 viewport */
    --kp-content: 1340px;
    --kp-gutter: 50px;
}

/* ---------- dark theme ----------
   Only the tokens move. Surfaces that are black by design in both themes —
   the sticky bar, drawer, footer, spotlight, newsletter — keep their own
   colours and simply sit a shade below the page. */
[data-theme="dark"] {
    --kp-accent: #f2607c;

    --kp-bg: #121212;
    --kp-text: #e9e9e9;
    --kp-text-2: #b3b3b3;
    --kp-grey: #9a9a9a;
    --kp-surface: #1c1c1c;
    --kp-surface-2: #242424;
    --kp-rule: #2e2e2e;
    --kp-rule-2: #3a3a3a;
    --kp-rule-nav: #4a4a4a;
    --kp-rule-box: #3a3a3a;
    --kp-rule-strong: #8a8a8a;
    --kp-icon: #cfcfcf;
    --kp-shadow: rgba(0, 0, 0, .6);
    --kp-tab-bg: #e9e9e9;
    --kp-tab-text: #121212;
    --kp-dot: #454545;
    --kp-dot-on: #cfcfcf;
    --kp-field-bg: #1c1c1c;
    --kp-field-border: #4a4a4a;

    color-scheme: dark;
}

/* ---------- base ---------- */

/* Nothing may push the page sideways, whatever a browser makes of the rules below. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* aspect-ratio is Safari 15+; keep art from collapsing on older builds */
@supports not (aspect-ratio: 16 / 9) {
    .kp-thumb { position: relative; height: 0; padding-bottom: 56.25%; }
    .kp-thumb img { position: absolute; inset: 0; }
    .kp-card--list .kp-thumb { padding-bottom: 100%; }
}

/* flex and grid children must be allowed to shrink below their content */
.row > *, .kp-card > *, .kp-row-item > * { min-width: 0; }
img, svg { max-width: 100%; }

body {
    font-family: var(--kp-serif);
    font-size: 14px;
    line-height: 21px;
    color: var(--kp-text);
    background: var(--kp-bg);
}

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

img { max-width: 100%; height: auto; display: block; }

/* container matched to the original's 1352px content width */
.kp-container {
    width: 100%;
    max-width: calc(var(--kp-content) + var(--kp-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--kp-gutter);
}

/* ---------- section header: black tab over a full-width rule ---------- */

.kp-sec {
    border-top: 1px solid var(--kp-rule-strong);
    height: 25px;
    margin-bottom: 14px;
}
/* ALL NEWS and SPOTLIGHT carry no rule above the tab */
.kp-sec--bare { border-top: 0; height: 24px; }
/* in the hero the tab sits 4px below the column top */
.kp-hero__side .kp-sec--bare { margin-top: 4px; margin-bottom: 13px; }
/* ALL NEWS sits over the hero's 249px left rail only */
.kp-sec--rail { width: 249px; }

.kp-sec__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--kp-tab-bg);
    color: var(--kp-tab-text);
    font-family: var(--kp-display);
    font-size: 17px;
    font-weight: 800;
    line-height: 23px;
    text-transform: uppercase;
    padding: 0 6px 2px;
}
.kp-sec__tab:hover { color: #fff; background: var(--kp-crimson); }
.kp-sec__tab svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.4; fill: none; }
/* a crimson slab always carries white type — the tab token flips on dark */
.kp-sec--crimson .kp-sec__tab { background: var(--kp-crimson); color: #fff; }

/* ---------- article card primitives ---------- */

.kp-label {
    font-family: var(--kp-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--kp-accent);
    display: block;
    width: fit-content;
    margin-top: 4px;
}
/* a card with no image opens on the label, flush with the column top */
.kp-label:first-child { margin-top: 0; }
.kp-label:hover { color: var(--kp-accent); text-decoration: underline; }

.kp-title {
    font-family: var(--kp-display);
    font-weight: 600;
    line-height: 1.3;
    color: var(--kp-text);
    margin: 2px 0;
}
.kp-title--xl { font-size: 28px; line-height: 36.4px; }
.kp-title--lg { font-size: 24px; }
.kp-title--md { font-size: 18px; }
.kp-title--sm { font-size: 16px; }
.kp-title--xs { font-size: 13px; }
a:hover .kp-title { color: var(--kp-accent); }

.kp-excerpt {
    font-family: var(--kp-serif);
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    color: var(--kp-text-2);
    /* 12px below the headline. The headline's own 2px bottom margin collapses
       into this one, so the full distance has to live here. */
    margin: 12px 0 0;
}

.kp-meta {
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 300;
    line-height: 17px;
    color: var(--kp-grey);
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.kp-meta a { color: var(--kp-grey); }
.kp-meta a:hover { color: var(--kp-accent); }
.kp-meta__sep { width: 1px; height: 17px; background: var(--kp-rule); }

.kp-thumb { display: block; overflow: hidden; background: var(--kp-surface-2); }
.kp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.kp-card { margin-bottom: 0; }
.kp-col-q > article,
.kp-col-h > article { padding-bottom: 15px; }
.kp-col-q > article + article { padding-top: 15px; border-top: 1px solid var(--kp-rule); }
/* 8px from image to label. The original splits it 4+4 across flex items;
   here the two margins are adjacent and collapse, so the larger one carries it. */
.kp-card .kp-thumb { margin-bottom: 8px; }

/* Below the hero the page runs on two tracks inside the 1364 row:
   a 1054 main region and a 310 right rail. */
/* The original's desktop grid is 10 columns, not Bootstrap's 12, so these
   tracks are pinned by measurement — but ONLY from xl up. Below that the
   col-* classes in the markup do the work. */
@media (min-width: 1200px) {
    .kp-col-main   { flex: 0 0 auto; width: 77.27%; }
    .kp-col-rail   { flex: 0 0 auto; width: 22.73%; padding: 0 0 0 8px; }
    .kp-col-half   { flex: 0 0 auto; width: 50%; }
    .kp-col-latest { flex: 0 0 auto; width: 58.00%; }
    .kp-col-econ   { flex: 0 0 auto; width: 19.35%; }
    .kp-col-ops    { flex: 0 0 auto; width: 22.65%; padding: 0 0 0 8px; }
    .kp-col-lead   { flex: 0 0 auto; width: 66.50%; }
    .kp-col-list   { flex: 0 0 auto; width: 33.50%; }
    .kp-col-q      { flex: 0 0 auto; width: 25.05%; }
    .kp-col-h      { flex: 0 0 auto; width: 49.90%; }
    .kp-hero__side { flex: 0 0 auto; width: 20.01%; }
    .kp-hero__mid  { flex: 0 0 auto; width: 59.97%; }
}

/* stacked list item: 240×135 thumb on the left, text column beside it */
.kp-row-item {
    display: flex;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid var(--kp-rule);
}
/* the section heading sits before these, so :first-child never matched —
   target the item that actually follows the heading instead */
.kp-row-item:first-child,
.kp-sec + .kp-row-item { padding-top: 0; }
.kp-row-item:last-child { padding-bottom: 0; border-bottom: 0; }
.kp-row-item__thumb { flex: 0 0 240px; }
.kp-row-item__thumb .kp-thumb { aspect-ratio: 240 / 135; }
.kp-row-item__body { flex: 1 1 auto; min-width: 0; }

/* text-only list (Corruption Watch) */
.kp-tlist { list-style: none; margin: 0; padding: 0; }
.kp-tlist li { padding: 13px 0; border-bottom: 1px solid var(--kp-rule); }
.kp-tlist li:first-child { padding-top: 0; }
.kp-tlist li:last-child { border-bottom: 0; }

/* vertical divider between grid columns */
.kp-divider-end { border-right: 1px solid var(--kp-rule); }

/* ---------- masthead ----------
   Boxes below are matched to the original at a 1440 viewport:
   header 1440x174 · row x=38 w=1364 · logo 345x76 @y29 · nav ul 790x41 @x325
   Their XL grid is 10 columns, not Bootstrap's 12 — hence the explicit widths.
   ------------------------------------------------------------------------- */

/* flow-root stops the row's .mt-4 escaping the header (margin collapse),
   which is what keeps the header box at 0..174 rather than 24..174 */
.kp-masthead { padding: 0; display: flow-root; }

/* container-fluid with the original's 50px side padding;
   the Bootstrap row's -12px gutter then lands the row at x=38 / w=1364 */
.kp-header-info { padding-left: 50px; padding-right: 50px; }

/* 10-column track widths */
@media (min-width: 768px) {
    .kp-col-1 { flex: 0 0 auto; width: 10%; }
    .kp-col-2 { flex: 0 0 auto; width: 20%; }
    .kp-col-4 { flex: 0 0 auto; width: 40%; }
}

/* hamburger + search */
/* column box is 21px tall; the two icons sit at y+6 and y+3 within it */
.kp-tools { display: flex; align-items: flex-start; height: 21px; }
.kp-iconbtn {
    background: none;
    border: 0;
    padding: 0;
    line-height: 0;
    color: var(--kp-text);
    cursor: pointer;
}
.kp-iconbtn--menu { width: 18px; height: 12px; margin: 6px 32px 0 0; }
.kp-iconbtn--search { width: 19px; height: 19px; margin-top: 3px; }
.kp-iconbtn svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* social column carries no gutter — the icons start flush at the column edge */
.kp-col-social { padding-left: 0; padding-right: 0; }

/* social row: 8 × 28px, 6.57px apart → last lands at x=416 */
.kp-social { display: flex; gap: 6.57px; }
.kp-social a {
    width: 28px;
    height: 28px;
    padding: 5px;
    border: 1px solid var(--kp-grey);
    display: grid;
    place-items: center;
    color: var(--kp-grey);
}
.kp-social a:hover { border-color: var(--kp-accent); color: var(--kp-accent); }
.kp-social svg { width: 16px; height: 16px; fill: currentColor; }

/* logo 345×76, centred in its 40% track */
.kp-logo { display: block; text-align: center; }
.kp-logo img { width: 345px; height: 76px; margin-inline: auto; }

/* sponsor 70×86, right-aligned in its 20% track */
.kp-sponsor { display: block; text-align: right; }
.kp-sponsor img { width: 70px; height: 86px; object-fit: cover; margin-left: auto; }

/* ---------- theme toggle ----------
   Sits where the language control used to, keeping that column's anchor to the
   row's right edge. The frame is the same hairline the site uses elsewhere;
   the icon carries the caret's stroke weight so it reads as one family. */
.kp-col-theme {
    flex: 0 0 auto;
    /* Bootstrap gives every .row child width:100%; without overriding it the
       column fills the row and margin-left:auto has no slack to work with. */
    width: auto;
    /* anchored to the row's right edge, not offset from whatever sits left of it */
    margin-left: auto;
    display: flex;
    align-items: center;
}
.kp-theme {
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    background: none;
    border: 1px solid var(--kp-rule-2);
    color: var(--kp-icon);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.kp-theme:hover { color: var(--kp-accent); border-color: var(--kp-accent); }
.kp-theme svg {
    width: 20px; height: 20px;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
/* one face shows at a time: the moon offers dark, the sun offers light back */
.kp-theme__sun { display: none; }
[data-theme="dark"] .kp-theme__moon { display: none; }
[data-theme="dark"] .kp-theme__sun  { display: block; }

/* the masthead carries both cuts of the wordmark; the theme picks one */
.kp-logo__dark { display: none; }
[data-theme="dark"] .kp-logo__light { display: none; }
[data-theme="dark"] .kp-logo__dark  { display: block; }

/* Colours cross-fade only while a switch is in flight — a standing global
   transition would drag on every hover and repaint. */
.kp-theming *, .kp-theming *::before, .kp-theming *::after {
    transition: background-color .2s ease, color .2s ease,
                border-color .2s ease, fill .2s ease, stroke .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    .kp-theming *, .kp-theming *::before, .kp-theming *::after { transition: none !important; }
}

/* ---------- primary nav (lives inside the header) ---------- */

.kp-navbar {
    position: relative;
    margin-top: 22px;
    height: 42px;
    border-bottom: 1px solid var(--kp-rule-nav);
}

/* full-width dropdown: spans the whole 1340 nav, not just its parent item */
.kp-has-sub { position: static; }
.kp-subnav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 59px;
    z-index: 100;
    background: var(--kp-bg);
    box-shadow: var(--kp-shadow) 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* display can't be animated — fade and drop in instead */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.kp-has-sub:hover .kp-subnav,
.kp-has-sub:focus-within .kp-subnav,
.kp-has-sub.is-open .kp-subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* links fade a touch behind the panel so the motion reads as one gesture */
.kp-subnav a {
    opacity: 0;
    transition: opacity .2s ease .06s, color .15s ease;
}
.kp-has-sub:hover .kp-subnav a,
.kp-has-sub:focus-within .kp-subnav a,
.kp-has-sub.is-open .kp-subnav a { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .kp-subnav, .kp-subnav a { transition: none; }
}
.kp-subnav a {
    font-family: var(--kp-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
    color: var(--kp-text);
    white-space: nowrap;
}
.kp-subnav a:hover { color: var(--kp-accent); }
/* the list shrinks to its content (790px) and centres inside the 1340 nav */
.kp-nav__list {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    list-style: none;
    margin: 0 auto;
    padding: 10px 0 0;
    height: 41px;
}
.kp-nav__list > li { padding: 0 15px; }
.kp-nav__link {
    font-family: var(--kp-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: var(--kp-text);
    white-space: nowrap;
}
.kp-nav__link:hover { color: var(--kp-accent); }

/* ---------- losses strip + newsletter ---------- */

/* Row is 1352 wide: losses widget 946 + newsletter 406, no gap.
   Widget sits 20px below the row top; newsletter fills the full 105. */
/* Widget 946 + newsletter 406 sit side by side only from xl up;
   below that they are plain stacked Bootstrap columns. */
.kp-strip { margin-bottom: 34px; }
/* fluid two-up while the container is still narrow… */
@media (min-width: 1200px) {
    .kp-strip { display: grid; grid-template-columns: minmax(0, 946fr) minmax(0, 406fr); height: 105px; }
}
/* …and the measured fixed split once it reaches its full 1352 */
@media (min-width: 1400px) {
    .kp-strip { grid-template-columns: 946px 406px; }
}

/* --- losses widget: 946×85, hairline box with the caption over its top edge --- */
.kp-losses {
    position: relative;
    margin-top: 20px;
    height: 85px;
    border: 1px solid var(--kp-rule-box);
}
.kp-losses__cap {
    position: absolute;
    top: -14px;
    left: 397px;
    width: 131px;
    height: 25px;
    display: grid;
    place-items: center;
    background: var(--kp-bg);
    font-family: var(--kp-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kp-accent);
}
/* seven 129px cells on a 133px step, left-aligned inside the widget */
.kp-losses__grid > * { min-width: 0; }
.kp-losses__grid {
    display: grid;
    grid-template-columns: repeat(7, 129px);
    column-gap: 4px;
    justify-content: start;
    height: 100%;
    align-content: center;
}
/* one cell: 129×63 — title row, then icon + number side by side */
.kp-loss {
    width: 129px;
    height: 63px;
    border-right: 1px solid var(--kp-rule);
}
.kp-loss:last-child { border-right: 0; }
.kp-loss__k {
    display: block;
    width: 128px;
    height: 21px;
    text-align: center;
    font-family: var(--kp-ui);
    font-size: 11px;
    font-weight: 600;
    line-height: 21px;
    color: var(--kp-text);
}
.kp-loss__d {
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--kp-accent);
    vertical-align: super;
    line-height: 1;
}
.kp-loss__v {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    height: 37px;
    margin-top: 5px;
}
/* icon box is 40 wide: 33px art offset 7px from the cell edge */
.kp-loss__ico { padding: 2px 0 2px 7px; line-height: 0; flex: none; }
.kp-loss__ico img { width: 33px; height: 33px; }
/* number box is 80 wide with 69 of content */
.kp-loss__n {
    width: 80px;
    padding: 0 5px 0 6px;
    margin-top: 5px;
    flex: none;
    font-family: var(--kp-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 21px;
    color: var(--kp-accent);
    text-align: center;
}

/* --- newsletter: 382×85 dark panel inside the 406 track --- */
/* the panel itself carries no padding — children are placed individually */
.kp-nlbox {
    width: 382px;
    height: 85px;
    margin: 20px 0 0 12px;
    background: rgb(33, 33, 33);
    color: #fff;
    padding: 0;
}
.kp-nlbox__t {
    width: auto;
    max-width: 362px;
    height: 26px;
    margin: 12px 0 0 10px;
    font-family: var(--kp-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 16.9px;
    color: #fff;
}
.kp-nlbox__form { display: flex; gap: 4px; margin-left: 14px; }
.kp-nlbox__form input {
    width: 217px;
    height: 30px;
    border: 1px solid #fff;
    padding: 0 10px;
    font-family: var(--kp-serif);
    font-size: 13px;
    line-height: 30px;
    background: #fff;
    color: #000;
}
.kp-nlbox__form button {
    width: 135px;
    height: 30px;
    border: 0;
    background: var(--kp-crimson);
    color: #fff;
    font-family: var(--kp-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.kp-nlbox__form button:hover { background: #a91836; }

/* ---------- hero (249 / 791 / 264 measured) ---------- */

/* three tracks inside the 1364 row: 273 / 818 / 273 —
   all three start on the same line, so the ALL NEWS tab lives in the left one */
.kp-hero__lead .kp-thumb { margin: 11px 0 9px; }
.kp-hero__lead .kp-excerpt { line-height: 24px; }
/* the right rail has no tab, so it is padded down to the same first-card line */
.kp-hero__side--pad { padding-top: 52px; }
@media (min-width: 768px) {
    .kp-hero__side .kp-card--list + .kp-card--list {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e3e3e3;
    }
}

/* ---------- ad slot ---------- */

.kp-ad {
    display: grid;
    place-items: center;
    background: var(--kp-surface);
    border: 1px dashed var(--kp-rule-2);
    color: var(--kp-grey);
    font-family: var(--kp-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 26px 0;
}
.kp-ad--leader { height: 100px; }

/* ---------- overlay cards (Exclusive) ---------- */

.kp-overlay { position: relative; display: block; }
/* Exclusive art is portrait: 240×330 */
.kp-overlay .kp-thumb { aspect-ratio: 240 / 330; }
.kp-overlay__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.kp-overlay__body .kp-title { color: #fff; }
.kp-overlay:hover .kp-title { color: #fff; text-decoration: underline; }
.kp-overlay__body .kp-meta { color: #d5d5d5; }

/* ---------- video ---------- */

.kp-play { position: relative; }
.kp-play::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px; height: 46px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 18px;
}

/* ---------- opinions rail ---------- */

.kp-op { display: flex; }
.kp-op + .kp-op { margin-top: 15px; padding-top: 16px; border-top: 1px solid var(--kp-rule); }
.kp-op__ava { flex: 0 0 45px; align-self: flex-start; margin-right: 10px; }
.kp-op__ava img { width: 45px; height: 45px; border-radius: 50%; display: block; }
/* Byline and headline sit as inline-blocks on the copy block's 21px line box —
   that leading is what spaces them apart on the original, not a margin. */
.kp-op__copy { line-height: 21px; }
.kp-op__by {
    display: inline-block;
    font-family: var(--kp-ui);
    font-size: 15px; font-weight: 500; line-height: 17px;
    color: var(--kp-accent);
}
.kp-op .kp-title { display: inline-block; font-weight: 500; margin-top: 2px; }

/* ---------- spotlight (dark band) ---------- */

.kp-spotlight {
    background: #1a1e22;
    color: #fff;
    padding: 0 0 34px;
    margin-top: 34px;
    margin-bottom: 40px;
}
.kp-spotlight .kp-sec { border-top-color: #000; }
.kp-spotlight .kp-title,
.kp-spotlight .kp-excerpt { color: #fff; }
.kp-spotlight .kp-meta { color: #a5a5a5; }
.kp-spotlight a:hover .kp-title { color: var(--kp-accent); }

/* ---------- footer ---------- */

.kp-footer { background: #000; color: #fff; padding: 34px 0 26px; }
.kp-footer__logo { display: flex; justify-content: center; }
.kp-footer__logo img { width: 240px; height: auto; }
.kp-footer__social { display: flex; justify-content: center; gap: 9px; margin: 16px 0 30px; }
.kp-footer__social a { width: 26px; height: 26px; background: #2a2a2a; display: grid; place-items: center; color: #fff; }
.kp-footer__social a:hover { background: var(--kp-crimson); color: #fff; }
.kp-footer__social svg { width: 12px; height: 12px; fill: currentColor; }

.kp-footer h4 {
    font-family: var(--kp-display);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: 9px;
    border-bottom: 1px solid #c61f40;
    margin-bottom: 12px;
}
.kp-footer ul { list-style: none; margin: 0; padding: 0; }
.kp-footer li { margin-bottom: 8px; }
.kp-footer li a { font-family: var(--kp-display); font-size: 15px; }
.kp-footer li a:hover { color: var(--kp-accent); }
.kp-footer__note { border-left: 1px solid #3a3a3a; padding-left: 30px; font-family: var(--kp-display); font-size: 15px; line-height: 1.5; }
.kp-footer__legal {
    border-top: 1px solid #3a3a3a;
    margin-top: 26px;
    padding-top: 20px;
    text-align: center;
    font-family: var(--kp-display);
    font-size: 12.5px;
    line-height: 1.5;
    color: #cfcfcf;
    margin-inline: auto;
}

/* ==========================================================================
   Responsive — matched to the original's mobile layout
   390px: gutters 12 · header 84 · logo 191x42 · losses cell 47x52
   list card = text left (260) + 100x100 thumb right
   ========================================================================== */

@media (max-width: 1399.98px) {
    :root { --kp-gutter: 28px; }
}

/* ---- tablet: three-track blocks fold to two ---- */
@media (max-width: 1199.98px) {
    /* seven fixed 129px cells are wider than a tablet — go fluid */
    .kp-losses { height: auto; }
    .kp-losses__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 0; }
    .kp-loss { width: auto; }
    .kp-loss__k { font-size: 10px; }
    .kp-loss__v { justify-content: center; }
    .kp-loss__n { width: auto; padding: 0 2px; }
    .kp-losses__cap { left: 50%; transform: translateX(-50%); }

    /* hover dropdowns don't apply on touch — subcategories live in the drawer */
    .kp-subnav { display: none !important; }

    /* nav must not push the page wider than the viewport */
    .kp-navbar { overflow-x: auto; scrollbar-width: none; }
    .kp-navbar::-webkit-scrollbar { display: none; }
    .kp-nav__list { width: max-content; margin-inline: auto; min-width: 100%; justify-content: center; }
    .kp-nav__list > li { padding: 0 11px; }

    .kp-hero__side, .kp-hero__mid { width: 50%; }
    .kp-hero__mid { order: -1; width: 100%; }
    .kp-col-main, .kp-col-rail,
    .kp-col-latest, .kp-col-econ, .kp-col-ops { width: 100%; }
    .kp-col-rail, .kp-col-ops { padding-left: 12px; }
    .kp-strip { grid-template-columns: 1fr; height: auto; }
    .kp-nlbox { width: 100%; margin: 14px 0 0; }
    .kp-losses { margin-top: 20px; }
}

@media (max-width: 991.98px) {
    .kp-col-q, .kp-col-h, .kp-col-half,
    .kp-col-lead, .kp-col-list { width: 50%; }
}

/* ---- phone ---- */
@media (max-width: 767.98px) {
    :root { --kp-gutter: 12px; }

    /* masthead: burger · centred logo · language, one row, 84 tall */
    .kp-masthead { border-bottom: 1px solid var(--kp-rule-nav); }
    .kp-header-info { padding-left: 12px; padding-right: 12px; }
    /* header box is 84: 24 above a 60-tall row */
    .kp-masthead .row.mt-4 { margin-top: 24px !important; flex-wrap: nowrap; align-items: flex-start; }
    .kp-masthead .row.mt-4 > .kp-col-1,
    .kp-masthead .row.mt-4 > .kp-col-4 { min-height: 60px; }
    .kp-col-social { display: none; }
    .kp-col-1 {
        flex: 0 0 68px;
        width: 68px;
        min-width: 68px;
    }
    .kp-col-4 { width: auto; min-width: 0; flex: 1 1 auto; }
    .kp-logo img {
        width: 191px;
        max-width: 100%;
        height: auto;
        aspect-ratio: 191 / 42;
    }
    .kp-iconbtn--search { display: none; }
    /* the toggle drops its frame on phones, like the control it replaced */
    /* keeps the 56px the language control reserved, so the centred logo
       stays exactly where it was; the button itself hugs the right edge */
    .kp-col-theme {
        min-height: 0;
        /* the row is 60 tall but burger and logo both sit on a line 21px down;
           centring in the row would drop the icon 9px below them */
        align-self: flex-start;
        width: 56px;
        padding-right: 0;
        justify-content: flex-end;
        margin-right: 19px;
    }
    .kp-theme { width: 32px; height: 32px; border: 0; }
    /* masthead only — the sticky bar centres its own row */
    .kp-col-theme .kp-theme { margin-top: 5px; }
    .kp-theme svg { width: 20px; height: 20px; }

    /* burger keeps a 38×28 tap target */
    .kp-masthead .kp-iconbtn--menu {
        width: 38px; height: 28px;
        margin: 7px 0 0;
        padding: 8px 10px;
        box-sizing: border-box;
    }
    .kp-col-1 { padding-left: 18px; }
    /* the main nav is burger-only on phones */
    .kp-navbar { display: none; }

    /* losses: seven narrow cells, icon stacked over the number */
    .kp-losses { height: 78px; margin-top: 20px; }
    .kp-losses__cap { left: calc(50% + 7px); transform: translateX(-50%); width: 131px; padding: 0; font-size: 13px; }
    .kp-losses__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 2px; padding: 12px 12px; }
    .kp-loss { width: auto; min-width: 0; height: 52px; border-right: 0; text-align: center; }
    .kp-loss__v, .kp-loss__ico, .kp-loss__n { min-width: 0; }
    /* the label is dropped on phones — icon over number only */
    .kp-loss__k { display: none; }
    .kp-loss__v { flex-direction: column; align-items: center; gap: 3px; height: auto; margin-top: 0; }
    .kp-loss__ico { padding: 0; }
    .kp-loss__ico img { width: 28px; height: 28px; }
    .kp-loss__n { width: auto; padding: 0; margin-top: 0; font-size: 9px; line-height: 21px; }

    /* newsletter sits below the widget, full width */
    /* col-12 already spans the row — desktop side margins must go */
    /* width:auto on a flex item collapses to content — must be 100% */
    .kp-nlbox { width: 100%; height: 82px; padding: 0; margin: 10px 0 0; }
    .kp-nlbox__t { width: auto; max-width: 291px; height: 15px; margin: 13px 15px 0; font-size: 11px; line-height: 15px; }
    .kp-nlbox__form { margin: 7px 14px 0; gap: 3px; }
    .kp-nlbox__form input { width: auto; max-width: 208px; flex: 1 1 auto; min-width: 0; }
    .kp-nlbox__form button { width: 128px; flex: none; }

    /* every track collapses */
    .kp-hero__side, .kp-hero__mid,
    .kp-col-main, .kp-col-rail, .kp-col-latest, .kp-col-econ, .kp-col-ops,
    .kp-col-q, .kp-col-h, .kp-col-half, .kp-col-lead, .kp-col-list { width: 100%; }
    .kp-col-rail, .kp-col-ops { padding-left: 12px; }
    .kp-sec--rail { width: 100%; }
    .kp-hero__side--pad { padding-top: 0; }

    /* hero on phones: the ALL NEWS tab must lead, then the main story,
       then every rail card in a single stack. display:contents lifts the
       side columns' children into the row so they can be ordered. */
    .kp-hero { display: flex; flex-direction: column; }
    .kp-hero__side { display: contents; }
    /* hoisted out of their columns by display:contents, so they need the
       gutter back — otherwise they sit on the row's -12px margins */
    .kp-hero__side > .kp-card { padding-left: 12px; padding-right: 12px; }
    /* display:contents removes this column's box, so there is no padding
       left to cancel — the tab must not carry the negative margin here */
    .kp-hero__side > .kp-sec {
        padding-left: 0; padding-right: 0;
        margin-left: 0; margin-right: 0;
    }
    .kp-hero__side > .kp-sec { order: -2; }
    .kp-hero__mid { order: -1; width: 100%; }
    .kp-hero__side > .kp-card { order: 0; }

    .kp-title--xl { font-size: 24px; line-height: 31.2px; }
    .kp-hero__lead .kp-thumb { margin: 10px 0 8px; }
    /* the lead runs without a standfirst on phones */
    .kp-hero__lead .kp-excerpt { display: none; }

    /* Two card shapes on phones.
       Default: full-bleed art 366×206 with the headline under it —
       used by the series, video and spotlight rows. */
    .kp-card { padding: 0 0 16px; }
    /* category label steps up from 11px to 13px on phones */
    .kp-label { font-size: 13px; line-height: 16px; margin-top: 4px; margin-bottom: 0; }
    .kp-card .kp-title { font-size: 19px; line-height: 24.7px; }
    .kp-card .kp-excerpt { display: none; }

    /* sections that simply show fewer items on phones */
    .kp-m-hide { display: none !important; }

    /* Sanctions runs as a swipeable rail on phones: cards 210×260, art 190×100.
       Native scroll-snap — no carousel plugin needed. */
    .kp-rail-m .row.g-4 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: 0;
    }
    .kp-rail-m .row.g-4::-webkit-scrollbar { display: none; }
    .kp-rail-m .row.g-4 > [class*="col"] {
        flex: 0 0 210px;
        width: 210px;
        max-width: 210px;
        padding: 0 10px;
        scroll-snap-align: start;
    }
    .kp-rail-m .kp-card { padding-bottom: 0; }
    .kp-rail-m .kp-thumb { aspect-ratio: 190 / 100 !important; }
    .kp-rail-m .kp-title { font-size: 16px; line-height: 20.8px; }

    /* Exclusive is a swipe rail of overlay cards: 143 wide, art 143×230 */
    .kp-rail-x .row.g-3 {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: 0;
    }
    .kp-rail-x .row.g-3::-webkit-scrollbar { display: none; }
    .kp-rail-x .row.g-3 > [class*="col"] {
        flex: 0 0 153px; width: 153px; max-width: 153px;
        padding: 0 5px; scroll-snap-align: start;
    }
    .kp-rail-x .kp-overlay .kp-thumb { aspect-ratio: 143 / 230 !important; }
    .kp-rail-x .kp-title { font-size: 15px; line-height: 19.5px; }

    /* Opinions is a swipe rail of author cards: 190 wide, 58×58 portrait */
    .kp-rail-o .kp-ops-track {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .kp-rail-o .kp-ops-track::-webkit-scrollbar { display: none; }
    .kp-rail-o .kp-op,
    .kp-rail-o .kp-op + .kp-op {
        flex: 0 0 190px; width: 190px;
        flex-direction: column; align-items: center; text-align: center;
        margin-top: 0; padding: 0 10px;
        border-top: 0; border-right: 1px solid var(--kp-rule);
        scroll-snap-align: start;
    }
    .kp-rail-o .kp-op__ava { flex: none; align-self: center; margin-right: 0; }
    .kp-rail-o .kp-op__ava img { width: 58px; height: 58px; }
    /* the copy block under the portrait */
    .kp-rail-o .kp-op__copy { width: 100%; padding-top: 13px; }
    .kp-rail-o .kp-op__by { font-size: 14px; }
    .kp-rail-o .kp-title { font-size: 16px; line-height: 20.8px; }

    /* pagination dots under a rail */
    .kp-dots { display: flex; justify-content: center; align-items: center; gap: 7px; height: 25px; }
    .kp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--kp-dot); }
    .kp-dots i.is-on { background: var(--kp-dot-on); }

    /* Compact: copy left, 100×100 thumb right — rails and culture. */
    .kp-card--list {
        display: grid;
        grid-template-columns: 1fr 100px;
        column-gap: 12px;
        align-items: start;
        padding: 14px 0;
        border-bottom: 1px solid var(--kp-rule);
    }
    /* thumb link is the first child — avoids :has(), unsupported before Safari 15.4.
       It starts on the headline's row, level with the title, as on the original. */
    .kp-card--list > a:first-child { grid-column: 2; grid-row: 2 / span 3; }
    /* the headline is wrapped in its own link, so the link is the grid item —
       pin every other child to column 1 or auto-placement fills column 2 */
    .kp-card--list > a:not(:first-child) { grid-column: 1; }
    .kp-card--list > * { min-width: 0; }
    .kp-card--list .kp-thumb { aspect-ratio: 1 / 1 !important; margin-bottom: 0; }
    .kp-col-q > .kp-card--list { border-bottom: 0; }
    .kp-card--list .kp-label,
    .kp-card--list .kp-title,
    .kp-card--list .kp-excerpt,
    .kp-card--list .kp-meta { grid-column: 1; }
    .kp-hero__side > .kp-card--list > a:first-child {
        grid-row: 1 / span 4;
    }

    /* the hero lead keeps its full-width art */
    .kp-hero__lead { display: block; padding: 0; border-bottom: 0; }
    .kp-hero__lead .kp-thumb { aspect-ratio: 16 / 10 !important; }

    /* overlay and video cards stay full-bleed */
    .kp-overlay .kp-thumb { aspect-ratio: 4 / 3; }
    .kp-row-item { flex-direction: row-reverse; }
    .kp-row-item__thumb { flex: 0 0 100px; }
    .kp-row-item__thumb .kp-thumb { aspect-ratio: 1 / 1; }

    /* Bootstrap's gutter variable, tuned to the original's 31px step */
    .row.gy-4 { --bs-gutter-y: 31px; }

    /* Original mobile rhythm: 14px from tab to first item.
       Section spacing itself is handled by Bootstrap's mt-* in the markup. */
    .kp-sec {
        height: auto;
        margin-bottom: 14px;
        margin-left: calc(var(--kp-gutter) * -1);
        margin-right: calc(var(--kp-gutter) * -1);
    }
    .kp-sec__tab { font-size: 17px; }

    /* chrome */
    .kp-scrollbar__theme { margin-left: auto; }
    .kp-top { width: 110px; }
    .kp-searchrow { margin-left: 0; }
    .kp-searchrow input { width: auto; flex: 1 1 auto; min-width: 0; }

    /* footer */
    .kp-footer .kp-container { padding-inline: 28px; }
    .kp-footer__logo img { width: 180px; height: 40px; }
    .kp-footer__note {
        border-left: 0;
        padding-left: 0;
        margin-top: 22px;
        font-size: 13px;
        line-height: 19px;
    }
    .kp-footer__legal { font-size: 12px; line-height: 17px; }
}

@media (max-width: 575.98px) {
    .kp-losses__grid { column-gap: 0; }
}

@media (min-width: 768px) { .kp-dots { display: none; } }

/* ==========================================================================
   Layer: interactive chrome — sticky bar, drawer, back-to-top
   Boxes match the original: bar 60px / drawer 264px / button 139×41
   ========================================================================== */

/* ---------- sticky bar that replaces the masthead on scroll ---------- */
.kp-scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #000;
    z-index: 10002;
    transform: translateY(-100%);
    transition: transform .25s ease;
}
.kp-scrollbar.is-on { transform: translateY(0); }
.kp-scrollbar__in {
    height: 60px;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 50px;
    display: flex;
    align-items: center;
    gap: 18px;
}
/* the sticky bar carries the wordmark alone — no slogan band, no shrunken mark */
.kp-scrollbar__logo { flex: none; line-height: 0; }
.kp-scrollbar__logo img { width: auto; height: 29px; }
.kp-scrollbar nav { margin-left: 8px; }
.kp-scrollbar ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 40px;
}
.kp-scrollbar a { color: #fff; font-family: var(--kp-display); font-size: 15px; white-space: nowrap; }
.kp-scrollbar a:hover { color: var(--kp-accent); }
.kp-scrollbar__theme { margin-left: auto; flex: none; display: flex; align-items: center; }
/* on black the frame is the bar's own hairline */
.kp-scrollbar .kp-theme { border-color: rgba(255, 255, 255, .35); color: #fff; }
.kp-scrollbar .kp-theme:hover { border-color: var(--kp-accent); color: var(--kp-accent); }

/* hamburger: three 18×2 bars, morphs to a cross when its drawer is open */
.kp-burger {
    width: 24px; height: 24px;
    flex: none;
    background: none;
    border: 0;
    padding: 0;
    display: grid;
    align-content: center;
    gap: 4px;
    cursor: pointer;
}
.kp-burger span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    transition: transform .22s ease, opacity .22s ease;
}
.kp-burger--dark { color: var(--kp-text); }
.kp-burger--light { color: #fff; }
.kp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- left drawer ---------- */
.kp-drawer { width: 264px; background: rgb(23, 23, 23); }
/* when the sticky bar is showing, the drawer starts under it */
.kp-drawer.is-below-bar { top: 60px; height: calc(100% - 60px); }
.kp-drawer .offcanvas-header { padding: 14px 16px; }
.kp-drawer .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }
.kp-drawer__list { list-style: none; margin: 0; padding: 0; }
.kp-drawer__list > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kp-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 16px;
    color: #fff;
    font-family: var(--kp-display);
    font-size: 16px;
}
.kp-drawer__link:hover { color: var(--kp-accent); background: rgba(255, 255, 255, .04); }
.kp-drawer__link svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .2s ease; }
.kp-drawer__link[aria-expanded="true"] svg { transform: rotate(90deg); }
.kp-drawer__sub { list-style: none; margin: 0; padding: 0 0 8px; background: rgba(0, 0, 0, .35); }
.kp-drawer__sub a {
    display: block;
    padding: 9px 16px 9px 30px;
    color: #cfcfcf;
    font-family: var(--kp-ui);
    font-size: 13px;
}
.kp-drawer__sub a:hover { color: #fff; }
/* Same eight networks as the masthead — wrap so a narrow drawer never clips one. */
.kp-drawer__social { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.kp-drawer__social a { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); color: #fff; }
.kp-drawer__social a:hover { border-color: var(--kp-accent); color: var(--kp-accent); }
.kp-drawer__social svg { width: 13px; height: 13px; fill: currentColor; }
.kp-drawer__search {
    display: flex;
    height: 40px;
    margin: 0 16px 16px;
}
.kp-drawer__search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: #171717;
    font-family: var(--kp-ui);
    font-size: 14px;
}
.kp-drawer__search input:focus {
    border-color: var(--kp-accent);
    outline: 0;
}
.kp-drawer__search button {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--kp-accent);
    background: var(--kp-accent);
    color: #fff;
}
.kp-drawer__search button:hover { background: var(--kp-crimson); }
.kp-drawer__search button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* ---------- inline search row (masthead) ----------
   Measured: wrap 350×35 at x=50 · close 35 · input 244 · button 35 */
.kp-searchrow {
    display: none;
    align-items: center;
    height: 35px;
    margin: 5px 0 0 12px;
}
.kp-searchrow.is-on { display: flex; }
.kp-searchrow__close {
    width: 35px; height: 35px;
    flex: none;
    border: 0;
    background: none;
    color: var(--kp-text);
    cursor: pointer;
    display: grid;
    place-items: center;
    margin-right: 7px;
}
.kp-searchrow__close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.kp-searchrow input {
    width: 244px;
    height: 35px;
    flex: none;
    border: 1px solid var(--kp-field-border);
    background: var(--kp-field-bg);
    color: var(--kp-text);
    font-family: var(--kp-serif);
    font-size: 16px;
    line-height: 24px;
    padding: 6px 12px;
    margin-right: 5px;
}
.kp-searchrow input:focus { outline: 2px solid #9dbcf5; outline-offset: 0; }
.kp-searchrow button[type="submit"] {
    width: 35px; height: 35px;
    flex: none;
    border: 0;
    background: var(--kp-crimson);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.kp-searchrow button[type="submit"] svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }

/* the same row, sized down, inside the sticky bar */
.kp-scrollbar .kp-searchrow { margin: 0 0 0 4px; }
.kp-scrollbar .kp-searchrow__close { color: #fff; }
.kp-scrollbar .kp-searchrow.is-on ~ nav { display: none; }

/* ---------- back to top ---------- */
.kp-top {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 139px;
    height: 41px;
    z-index: 10001;
    border: 0;
    background: rgb(50, 51, 54);
    color: #fff;
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.kp-top.is-on { opacity: 1; visibility: visible; }
.kp-top:hover { background: var(--kp-crimson); color: #fff; }
.kp-top svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.4; fill: none; }

@media (max-width: 991.98px) {
    .kp-scrollbar nav { display: none; }
}

/* Sticky bar on phones. These have to sit after the base block above,
   or the base padding and logo size win on source order. */
@media (max-width: 767.98px) {
    .kp-scrollbar__in { position: relative; padding-inline: 28px; gap: 12px; }
    /* burger left, EN right, wordmark centred between them */
    .kp-scrollbar__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .kp-scrollbar__logo img { height: 26px; }
    /* EN drops its frame here, as on the original: 51 wide, flush right */
    /* frameless on phones, flush with the bar's right edge */
    .kp-scrollbar .kp-theme { width: 32px; height: 32px; border: 0; }
}


/* ==========================================================================
   Category page (opinions) — measured from the live section pages.
   Cards here are centred and author-led, unlike the homepage's left-aligned
   label-led cards, so they get their own primitives rather than overrides.
   ========================================================================== */

/* ---------- category head: back link + title + subcategory rail ---------- */

.kp-cat-head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
    margin-top: 15px;
}
.kp-cat-back {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--kp-ui);
    font-size: 16px;
    line-height: 21px;
    color: var(--kp-text);
    white-space: nowrap;
}
.kp-cat-back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.kp-cat-back:hover { color: var(--kp-accent); }
/* the title is centred on the container, not on what is left of the row.
   It spans the whole row, so it must not swallow clicks on the back link. */
.kp-cat-title {
    position: absolute;
    left: 0; right: 0;
    margin: 0;
    pointer-events: none;
    font-family: var(--kp-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 36.4px;
    text-align: center;
    color: var(--kp-text);
}

.kp-catnav {
    height: 41px;
    margin-top: 15px;
    border-top: 1px solid var(--kp-rule);
    /* the rail swipes once the categories outgrow the screen */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kp-catnav::-webkit-scrollbar { display: none; }
/* max-content lets the row overflow and scroll; min-width keeps it centred
   while it still fits. The 15px ends are the original's breathing room. */
.kp-catnav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: max-content;
    min-width: 100%;
    height: 41px;
    list-style: none;
    margin: 0;
    padding: 0 15px;
}
.kp-catnav a {
    display: block;
    font-family: var(--kp-display);
    font-size: 16px;
    line-height: 21px;
    padding: 10px 0;
    color: var(--kp-text);
    white-space: nowrap;
}
.kp-catnav a:hover { color: var(--kp-accent); }

/* ---------- the two tracks: 1035 of copy, 305 of rail ---------- */

.kp-cat > .row { --bs-gutter-x: 0; }
@media (min-width: 1200px) {
    .kp-cat-main { flex: 0 0 auto; width: 77.24%; padding: 0 15px 0 0; }
    .kp-cat-side {
        flex: 0 0 auto;
        width: 22.76%;
        padding: 0 0 0 10px;
        border-left: 1px solid var(--kp-rule-nav);
    }
}

/* ---------- opinion card: art, author, centred headline, standfirst ---------- */

.kp-op-card { text-align: center; }
.kp-op-card__art { display: block; position: relative; }
.kp-op-card__body { padding-top: 12px; }
.kp-op-card__by {
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
    text-transform: uppercase;
    color: var(--kp-accent);
}
.kp-op-card__t {
    font-family: var(--kp-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 23.4px;
    color: var(--kp-text);
    margin: 8px 0 0;
}
a:hover .kp-op-card__t { color: var(--kp-accent); }
.kp-op-card__d {
    font-family: var(--kp-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    color: var(--kp-text-2);
    margin: 14px 0 0;
}

/* the featured pair runs at nearly double the type size */
.kp-op-card--lead .kp-op-card__body { padding-top: 20px; }
.kp-op-card--lead .kp-op-card__by { font-size: 15px; }
.kp-op-card--lead .kp-op-card__t { font-size: 26px; line-height: 33.8px; margin-top: 12px; }
.kp-op-card--lead .kp-op-card__d { margin-top: 15px; }

/* label chip riding on the art */
.kp-badge {
    position: absolute;
    top: 10px;
    left: 17px;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    font-family: var(--kp-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #fff;
}
.kp-badge--crimson { background: var(--kp-crimson); }
.kp-badge--dark    { background: #000; }

/* ---------- featured pair ---------- */

.kp-feat { display: flex; margin: 0 -12px; }
.kp-feat__cell { flex: 1 1 0; min-width: 0; padding: 15px; }
.kp-feat__cell + .kp-feat__cell { border-left: 1px solid var(--kp-rule); }

/* ---------- list sections: four across, hairline between ---------- */

.kp-opsec { margin-top: 40px; }
.kp-opgrid { --bs-gutter-x: 14px; }
/* From sm up the original pairs a -12 row margin with 7px column padding — not a
   matched pair, but it is what puts the art at 246 inside a 261 column. On a
   phone the row sits flush in the container instead. */
@media (min-width: 768px) {
    .kp-opgrid { margin-left: -12px; margin-right: -12px; }
}
.kp-opgrid__cell { padding-top: 7px; padding-bottom: 7px; }
@media (min-width: 1200px) {
    .kp-opgrid__cell + .kp-opgrid__cell { border-left: 1px solid var(--kp-rule); }
}

/* ---------- popular rail ---------- */

.kp-poplist { list-style: none; margin: 0; padding: 0; }
.kp-poplist li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kp-rule); }
.kp-poptitle {
    font-family: var(--kp-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px;
    color: var(--kp-text);
    margin: 12px 0 0;
}
.kp-poplist li + li .kp-poptitle { margin-top: 0; }
a:hover .kp-poptitle { color: var(--kp-accent); }

/* ---------- featured rail controls (phones only) ---------- */

.kp-featnav { display: none; }
.kp-featnav__arrow {
    width: 30px;
    height: 20px;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    color: var(--kp-grey);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.kp-featnav__arrow:disabled { opacity: .35; cursor: default; }
.kp-featnav__arrow svg {
    width: 20px; height: 20px;
    stroke: currentColor; stroke-width: 1.6; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- house slot between the feature and the lists ---------- */

.kp-ad--thin { height: 24px; margin: 40px 0 4px; font-size: 9px; }

/* ---------- category page on phones ---------- */

@media (max-width: 767.98px) {
    .kp-cat-back span { display: none; }
    .kp-cat-title { font-size: 28px; }

    /* the featured pair becomes a one-card swipe rail */
    .kp-feat {
        /* the feature is inset from the container on a phone: 342 of 366 */
        margin: 0 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .kp-feat::-webkit-scrollbar { display: none; }
    .kp-feat__cell {
        flex: 0 0 100%;
        padding: 15px 4px 0;
        scroll-snap-align: start;
    }
    .kp-feat__cell + .kp-feat__cell { border-left: 0; }
    .kp-op-card--lead .kp-op-card__by { font-size: 14px; }
    .kp-op-card--lead .kp-op-card__t { font-size: 18px; line-height: 23.4px; }
    .kp-op-card--lead .kp-op-card__d { font-size: 12px; }

    .kp-featnav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 8px 12px 0;
    }
    .kp-featnav .kp-dots { flex: 1 1 auto; }

    .kp-opsec { margin-top: 34px; }
    /* the row sits flush in the container here, so its gutter must not pull it out */
    .kp-opgrid { margin-left: 0; margin-right: 0; }
    .kp-opgrid__cell { padding-top: 15px; padding-bottom: 15px; }
    .kp-badge { font-size: 8px; left: 11px; top: 4px; }
}

/* ==========================================================================
   Static pages
   ========================================================================== */

.kp-static {
    max-width: 1440px;
    min-height: 420px;
    margin: 0 auto;
    padding: 48px 24px 72px;
}
.kp-static__inner {
    max-width: 900px;
    margin: 0 auto;
}
.kp-static__title {
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--kp-accent);
    color: var(--kp-text);
    font-family: var(--kp-display);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
}
.kp-static__content {
    color: var(--kp-text);
    font-family: var(--kp-serif);
    font-size: 19px;
    line-height: 1.7;
}
.kp-static__content p { margin: 0 0 18px; }
.kp-static__content strong { font-family: var(--kp-ui); font-weight: 700; }
.kp-static__content a { color: var(--kp-accent); text-decoration: underline; }
.kp-static__content a:hover { text-decoration: none; }

.kp-error__code {
    color: var(--kp-accent);
    font-family: var(--kp-display);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
}
.kp-error__btn {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 26px;
    background: var(--kp-accent);
    color: #fff;
    font-family: var(--kp-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.kp-static__content a.kp-error__btn { color: #fff; text-decoration: none; }
.kp-static__content a.kp-error__btn:hover { background: var(--kp-text); }

@media (max-width: 767px) {
    .kp-static { padding: 32px 16px 52px; }
    .kp-static__title { font-size: 34px; }
    .kp-static__content { font-size: 17px; line-height: 1.65; }
    .kp-error__code { font-size: 88px; }
}

/* ==========================================================================
   Article page — measured from the live post template.
   Its container is wider than the section pages': full width in 12px gutters,
   with the header column capped at 1152 and the body split 283 / 828 / 305.
   ========================================================================== */

.kp-art {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 12px;
}

/* ---------- breadcrumb ---------- */

.kp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--kp-ui);
    font-size: 13px;
    line-height: 21px;
    color: var(--kp-grey);
}
.kp-crumbs a { color: var(--kp-grey); }
.kp-crumbs a:hover { color: var(--kp-accent); }
.kp-crumbs__here { color: var(--kp-text); }

/* ---------- header column ---------- */

.kp-art__head { max-width: 1152px; margin: 0 auto; padding: 0 8px; }

.kp-art__topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}
.kp-art__topics a {
    font-family: var(--kp-ui);
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--kp-accent);
}
.kp-art__topics a:hover { text-decoration: underline; }

.kp-art__title {
    font-family: var(--kp-display);
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    color: var(--kp-text);
    margin: 22px 0 0;
}
/* the section prefix sits a weight lighter than the headline it opens */
.kp-art__kicker { font-weight: 500; }

.kp-art__lead {
    font-family: var(--kp-ui);
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    color: var(--kp-text);
    margin: 8px 0 0;
}
.kp-art__lead b { font-weight: 700; }

.kp-art__author { margin-top: 30px; text-align: center; }
.kp-art__ava { display: block; width: 110px; height: 110px; margin: 0 auto; }
.kp-art__ava img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.kp-art__by {
    display: block;
    margin-top: 8px;
    font-family: var(--kp-ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--kp-accent);
}

.kp-art__info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.kp-art__date {
    font-family: var(--kp-ui);
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    color: var(--kp-rule-nav);
}
.kp-art__tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.kp-art__tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--kp-ui);
    font-size: 14px;
    line-height: 21px;
    color: var(--kp-text);
}
.kp-art__tool:hover { color: var(--kp-accent); }
.kp-art__tool svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.kp-art__share-menu { position: relative; }
.kp-art__share-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.kp-art__share-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 9px);
    right: 0;
    width: 180px;
    padding: 7px;
    border: 1px solid var(--kp-rule);
    background: var(--kp-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.kp-art__share-list[hidden] { display: none; }
.kp-art__share-list a,
.kp-art__share-copy {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--kp-text);
    font-family: var(--kp-ui);
    font-size: 13px;
    line-height: 19px;
    text-align: left;
    cursor: pointer;
}
.kp-art__share-list a:hover,
.kp-art__share-list a:focus-visible,
.kp-art__share-copy:hover,
.kp-art__share-copy:focus-visible {
    background: var(--kp-tab-bg);
    color: var(--kp-accent);
    outline: none;
}
.kp-art__share-status {
    display: block;
    min-height: 17px;
    padding: 2px 10px 0;
    color: var(--kp-accent);
    font-family: var(--kp-ui);
    font-size: 11px;
}

.kp-art__figure { margin: 15px 0 0; }
.kp-art__figure figcaption {
    font-family: var(--kp-ui);
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    color: var(--kp-text-2);
    margin-top: 8px;
}

/* ---------- body: contents rail, column of copy, popular rail ---------- */

.kp-art__body { display: flex; margin-top: 24px; }
.kp-art__rail--start { flex: 0 0 auto; width: 19.99%; padding: 16px 12px 0; }
/* 71px at 1440. Padding percentages resolve against the flex container's
   width, not the column's, so this is 71/1416 — and the measure stays
   proportional as the page narrows. */
.kp-art__text       { flex: 0 0 auto; width: 58.47%; padding: 0 5.01%; min-width: 0; }
.kp-art__rail--end  { flex: 0 0 auto; width: 21.54%; padding: 0 0 0 11px; }

@media (min-width: 992px) {
    .kp-art__rail--end .kp-popular {
        position: sticky;
        top: 76px;
    }
}

.kp-artnav__list { list-style: none; margin: 0; padding: 0; }
.kp-artnav__list li { position: relative; padding: 0 0 0 20px; margin-top: 8px; }
/* the original marks each entry with a small crimson square */
.kp-artnav__list li::before {
    content: "";
    position: absolute;
    left: 4px; top: 10px;
    width: 6px; height: 6px;
    background: var(--kp-accent);
}
.kp-artnav__list a {
    font-family: var(--kp-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--kp-text);
}
.kp-artnav__list a:hover { color: var(--kp-accent); }
.kp-art__share { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--kp-rule); }

/* ---------- the copy itself ---------- */

.kp-entry {
    font-family: var(--kp-serif);
    font-size: 21px;
    font-weight: 300;
    line-height: 33.6px;
    color: var(--kp-text);
}
.kp-entry p { margin: 0 0 16px; }
.kp-entry a { color: var(--kp-accent); }
.kp-entry a:hover { text-decoration: underline; }
.kp-entry h2 {
    font-family: var(--kp-ui);
    font-size: 23px;
    font-weight: 800;
    line-height: 29.9px;
    color: var(--kp-text);
    margin: 15px 0;
}
.kp-ad--inline { height: 368px; margin: 24px 0; }

/* ---------- related story dropped into the flow ---------- */

.kp-insert {
    display: flex;
    gap: 12px;
    background: var(--kp-surface);
    padding: 1px;
    margin: 24px 0;
}
.kp-insert__art { flex: 0 0 205px; padding: 10px; }
.kp-insert__body { flex: 1 1 auto; min-width: 0; padding: 8px 12px; }
.kp-insert__kicker {
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 19.2px;
    text-transform: uppercase;
    color: var(--kp-accent);
}
.kp-insert__t {
    font-family: var(--kp-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    color: var(--kp-text);
    margin: 4px 0 0;
}
a:hover .kp-insert__t { color: var(--kp-accent); }
.kp-insert__d {
    font-family: var(--kp-serif);
    font-size: 13px;
    font-weight: 300;
    line-height: 16.9px;
    color: var(--kp-text);
    margin: 8px 0 0;
}

/* ---------- article on phones ---------- */

@media (max-width: 991.98px) {
    /* both rails fold under the copy and the headline steps down */
    .kp-art__title { font-size: 42px; }
    .kp-art__body { display: block; }
    .kp-art__rail--start,
    .kp-art__text,
    .kp-art__rail--end { width: auto; padding: 0; }
    .kp-art__text { padding: 0 12px; }
    .kp-art__rail--start { margin-bottom: 24px; }
    .kp-art__rail--end { margin-top: 34px; }
}

@media (max-width: 767.98px) {
    .kp-art { padding: 0 12px; }
    .kp-art__head { padding: 0 8px; }
    .kp-art__title { font-size: 27px; line-height: 32px; margin-top: 18px; }
    .kp-art__topics { margin-top: 18px; gap: 12px; }
    .kp-art__topics a { font-size: 13px; }
    .kp-art__ava, .kp-art__ava img { width: 70px; height: 70px; }
    .kp-art__by { font-size: 14px; line-height: 22px; }
    /* date and tools stack and centre */
    .kp-art__info { flex-direction: column; gap: 8px; }
    .kp-art__tools { margin-left: 0; }
    .kp-entry { font-size: 19px; line-height: 28.5px; }
    .kp-entry h2 { font-size: 20px; line-height: 26px; }
    .kp-ad--inline { height: 250px; }
    /* the related insert stacks */
    .kp-insert { display: block; }
    .kp-insert__art { display: block; padding: 10px 10px 0; }
    .kp-insert__art .kp-thumb { aspect-ratio: 16 / 9 !important; }
}

/*.orange-word {*/
/*    color: #f60;*/
/*}*/

/* ---------- category archive ---------- */

.kp-category-head {
    padding: 42px 0 22px;
}
.kp-category-head h1 {
    border-top: 1px solid var(--kp-text);
    margin: 0;
    font-family: var(--kp-display);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.kp-category-head h1 span {
    display: inline-block;
    padding: 2px 7px 4px;
    background: var(--kp-text);
    color: var(--kp-bg);
    line-height: 22px;
}
.kp-category-head__description {
    max-width: 760px;
    margin: 12px 0 0;
    font-family: var(--kp-serif);
    font-size: 16px;
    line-height: 24px;
    color: var(--kp-text-2);
}
.kp-category-layout {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}
.kp-category-content { padding-top: 32px; padding-bottom: 60px; }
.kp-category-content {
    flex: 1 1 auto;
    min-width: 0;
}
.kp-category-sidebar {
    position: sticky;
    top: 76px;
    flex: 0 0 264px;
    width: 264px;
    padding-top: 32px;
}
.kp-listing {
    width: 100%;
    max-width: 1054px;
}
.kp-listing-card {
    display: grid;
    grid-template-columns: minmax(220px, 28%) minmax(0, 1fr);
    grid-template-areas: "image content";
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--kp-rule);
}
.kp-listing-card:first-child {
    padding-top: 0;
    border-top: 0;
}
.kp-listing-card__image {
    grid-area: image;
    align-self: start;
}
.kp-listing-card__image .kp-thumb {
    aspect-ratio: 16 / 9;
    margin: 0;
}
.kp-listing-card__content {
    grid-area: content;
    min-width: 0;
}
.kp-listing-card .kp-label { margin-top: 0; }
.kp-listing-card .kp-title {
    margin-top: 4px;
    font-size: 20px;
}
.kp-listing-card .kp-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.kp-category-empty {
    font-family: var(--kp-ui);
    font-size: 16px;
    color: var(--kp-grey);
    margin: 20px 0;
}
.kp-author-head { text-align: center; }
.kp-author-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin: 0 auto 18px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--kp-tab-bg);
    color: var(--kp-accent);
    font-family: var(--kp-display);
    font-size: 38px;
    font-weight: 700;
}
.kp-author-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.kp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 48px;
}
.kp-pagination a,
.kp-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--kp-rule);
    font-family: var(--kp-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--kp-text);
}
.kp-pagination a:hover,
.kp-pagination .is-active {
    border-color: var(--kp-crimson);
    background: var(--kp-crimson);
    color: #fff;
}
.kp-pagination__arrow { font-size: 19px !important; }

@media (max-width: 767.98px) {
    .kp-category-head { padding: 28px 0 17px; }
    .kp-category-content { padding-top: 24px; padding-bottom: 40px; }
    .kp-listing-card {
        grid-template-columns: minmax(0, 1fr) 100px;
        grid-template-areas: "content image";
        gap: 12px;
        min-height: 130px;
        padding: 15px 0;
    }
    .kp-listing-card:first-child { padding-top: 0; }
    .kp-listing-card__image { align-self: center; }
    .kp-listing-card__image .kp-thumb { aspect-ratio: 1 / 1; }
    .kp-listing-card .kp-title {
        margin-top: 3px;
        font-size: 18px;
        line-height: 1.3;
    }
    .kp-listing-card .kp-excerpt { display: none; }
    .kp-listing-card .kp-meta { margin-top: 8px; }
    .kp-pagination { margin-top: 28px; }
}

@media (max-width: 991.98px) {
    .kp-category-layout { display: block; }
    .kp-category-sidebar {
        position: static;
        width: auto;
        padding: 0 0 40px;
    }
}

/* ---------- article tags, comments and related news ---------- */

.kp-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--kp-rule);
}
.kp-article-tags a {
    padding: 7px 12px;
    border: 1px solid var(--kp-rule);
    background: var(--kp-surface);
    font-family: var(--kp-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--kp-text);
}
.kp-article-tags a:hover {
    border-color: var(--kp-crimson);
    background: var(--kp-crimson);
    color: #fff;
}

.kp-article-comments {
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid var(--kp-rule-strong);
}
.kp-article-comments .post-comments > .block-title {
    font-family: var(--kp-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kp-text);
    margin: 0 0 20px;
}
.kp-article-comments .comments-list { margin-bottom: 24px; }
.kp-article-comments .comment-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--kp-rule);
}
.kp-article-comments .comment-item .author {
    font-family: var(--kp-ui);
    font-weight: 700;
    color: var(--kp-text);
}
.kp-article-comments .comment-item .date {
    margin-left: 8px;
    font-family: var(--kp-ui);
    font-size: 12px;
    color: var(--kp-grey);
}
.kp-article-comments .comment-item .comment { margin-top: 8px; }
.kp-article-comments .comment-item p { margin: 0; color: var(--kp-text-2); }
.kp-article-comments .add-comment .form-group { margin-bottom: 12px; }
.kp-article-comments .form-control {
    border: 1px solid var(--kp-field-border);
    border-radius: 0;
    background: var(--kp-field-bg);
    color: var(--kp-text);
    font-family: var(--kp-ui);
    font-size: 14px;
    box-shadow: none;
}
.kp-article-comments input.form-control { height: 44px; }
.kp-article-comments textarea.form-control { min-height: 130px; resize: vertical; }
.kp-article-comments .form-control::placeholder {
    color: var(--kp-grey);
    opacity: 1;
}
.kp-article-comments .form-control:focus {
    border-color: var(--kp-crimson);
    box-shadow: 0 0 0 1px var(--kp-crimson);
}
.kp-article-comments .submit-add-comment button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: var(--kp-crimson);
    color: #fff;
    font-family: var(--kp-ui);
    font-weight: 700;
    cursor: pointer;
}
.kp-article-comments .submit-add-comment button:hover { background: var(--kp-text); }

.kp-related {
    margin-top: 48px;
    padding: 36px 0 56px;
    border-top: 1px solid var(--kp-rule);
}
.kp-related__card { height: 100%; }
.kp-related__card .kp-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 767.98px) {
    .kp-article-comments .post-comments > .block-title { font-size: 24px; }
    .kp-related { margin-top: 30px; padding: 28px 0 36px; }
}

.article-body .video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
    margin: 24px 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.25);
}
.article-body .video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.article-body .facebook-container {
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.article-body .facebook-container > *,
.article-body .facebook-container .fb-video,
.article-body .facebook-container .fb-post,
.article-body .facebook-container .fb_iframe_widget,
.article-body .facebook-container .fb_iframe_widget span,
.article-body .facebook-container .fb_iframe_widget iframe,
.article-body .facebook-container iframe {
    max-width: 100% !important;
}
.article-body iframe[src*="twitter.com"],
.article-body iframe[src*="instagram.com"],
.article-body blockquote.twitter-tweet,
.article-body blockquote.instagram-media {
    display: block;
    margin: 24px auto;
    max-width: 100%;
}