/* ====================================================================
   ARTICLE PAGE — page-specific styles
==================================================================== */

/* The "main" area on the article page must be a grid with a single 1fr
   column so it stretches to 100% of the layout's content slot. The side
   panels (gallery/comments) are absolutely positioned over this area. */
.main.article-main {
    display: grid;
    grid-template-columns: 1fr;
    border-right: 1px solid var(--line);
    height: 100%;
    overflow: hidden;
    position: relative;
}
/* When a side panel is open, the article's scroll area gets a right padding
   equal to the panel width — so the article content stays visible to the
   left of the panel without losing its full-width box. */
.main.article-main.gallery-open .article-scroll {
    padding-right: 360px;
    transition: padding-right 0.32s cubic-bezier(.2,.8,.2,1);
}
.main.article-main.comments-open .article-scroll {
    padding-right: 380px;
    transition: padding-right 0.32s cubic-bezier(.2,.8,.2,1);
}
.main.article-main.hashtags-open .article-scroll,
.main.article-main.relevant-open .article-scroll,
.main.article-main.tree-open .article-scroll {
    padding-right: 420px;
    transition: padding-right 0.32s cubic-bezier(.2,.8,.2,1);
}
.main.article-main.more-open .article-scroll {
    padding-right: 320px;
    transition: padding-right 0.32s cubic-bezier(.2,.8,.2,1);
}

.article-scroll {
    height: calc(100vh - var(--topbar-h, 44px));
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
    position: relative;
    transition: padding-right 0.32s cubic-bezier(.2,.8,.2,1);
    /* Anchor in the single grid column */
    grid-column: 1;
    grid-row: 1;
}
.article-scroll::-webkit-scrollbar { width: 6px; }
.article-scroll::-webkit-scrollbar-track { background: transparent; }
.article-scroll::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
.article-scroll::-webkit-scrollbar-thumb:hover { background: #aaa; }

.article-wrap {
    /* Editorial column width on desktop. The padding gives breathing
       room on the left (for the floating actions rail) and right (for
       the floating toolbar). Centered via `margin-inline: auto`. */
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 110px 60px 60px;
    position: relative;
    box-sizing: border-box;
}

/* Top elements need room on the right for the floating toolbar.
   This way the toolbar never overlaps the headline/meta on any screen. */
.article-meta-top,
.article-headline,
.article-deck {
    padding-right: 80px;
}

.article-meta-top {
    color: #1f8fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.article-meta-top .pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-strong); display: inline-block;
}

.article-headline {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 700;
    /* Fluid type: 28px on tiny phones → 52px on desktop. The middle
       value lets the browser interpolate based on viewport width,
       so the headline always fits without overflowing on any screen. */
    font-size: clamp(28px, 5vw + 8px, 52px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--text-strong) !important;
    margin-bottom: 22px;
    /* Long English/Portuguese title words should wrap gracefully
       instead of pushing the column wider. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.article-deck {
    font-family: "Source Serif 4", Georgia, serif;
    /* 16px on phones → 24px on desktop */
    font-size: clamp(16px, 1.5vw + 12px, 24px);
    line-height: 1.32;
    color: var(--text) !important;
    font-weight: 400;
    margin-bottom: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inter", sans-serif;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.article-byline .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b4a36, #2c2418);
    flex: 0 0 36px;
    overflow: hidden;
    position: relative;
}
.article-byline .avatar::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, #8a6e4e 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, #1a130a 0 50%, transparent 51%);
}
.article-byline .by {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 500;
}
.article-byline .by .name { font-weight: 600; cursor: pointer; transition: color 0.15s; }
.article-byline .by a.name:hover { text-decoration: underline !important; text-underline-offset: 2px; }

/* ============ LISTEN-TO-ARTICLE PLAYER ============
   Inline player below the byline that uses the Web Speech API to read
   the article aloud. Provides play/pause, voice selection, speed control,
   and a progress indicator. */
.article-listen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 22px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    transition: background 0.15s, border-color 0.15s;
    flex-wrap: wrap;
}
.article-listen:hover {
    border-color: var(--text-faint);
}
.article-listen.is-playing {
    background: var(--bg);
    border-color: #1f8fff;
    box-shadow: 0 0 0 3px rgba(31, 143, 255, 0.08);
}
body.theme-negative .article-listen.is-playing,
body.theme-low-contrast .article-listen.is-playing {
    border-color: var(--link-accent);
}

.listen-play-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--text-strong);
    color: var(--bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    transition: transform 0.15s;
}
.listen-play-btn:hover { transform: scale(1.05); }
.listen-play-btn svg {
    width: 16px; height: 16px;
    fill: currentColor;
    stroke: none;
}
/* Show/hide play vs pause icon */
.listen-play-btn .icon-pause { display: none; }
.article-listen.is-playing .listen-play-btn .icon-play { display: none; }
.article-listen.is-playing .listen-play-btn .icon-pause { display: block; }

.listen-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.listen-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.1;
}
.listen-progress {
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.listen-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: #1f8fff;
    border-radius: 2px;
    transition: width 0.3s linear;
}
body.theme-negative .listen-progress-bar,
body.theme-low-contrast .listen-progress-bar {
    background: var(--link-accent);
}

.listen-time {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.listen-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.listen-speed {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    transition: all 0.15s;
    min-width: 38px;
}
.listen-speed:hover {
    color: var(--text-strong);
    border-color: var(--text-faint);
}
.listen-stop {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.listen-stop:hover {
    color: var(--text-strong);
    background: var(--bg-card);
}
.listen-stop svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.listen-stop[hidden] { display: none; }

.listen-warn {
    font-size: 11px;
    color: var(--text-faint);
    margin-left: 4px;
}

@media (max-width: 640px) {
    .article-listen {
        gap: 10px;
        padding: 8px 12px;
        max-width: 100%;
        min-width: 0;
    }
    .article-listen .listen-info {
        min-width: 0;
        flex: 1 1 0;
    }
    .article-listen .listen-progress {
        max-width: 100%;
        min-width: 0;
    }
    .listen-time { display: none; }
}

/* ============ HERO IMAGE — wide layout, sits above the headline ============ */
.article-hero-image {
    width: 100%;
    margin: 0 0 18px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #2a2a2a;
    aspect-ratio: 16 / 8;
    /* Same color treatment philosophy as the gallery: grayscale by default */
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.article-hero-image:hover {
    filter: grayscale(0%);
}
.article-hero-image svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Caption now sits below the image (not over it) for better readability,
   following the editorial pattern of NYT, The Guardian, etc. */
.article-hero-caption {
    margin: 0 0 28px;
    padding: 0 2px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-family: "Inter", sans-serif;
    border-bottom: 1px solid var(--line);
}
.article-hero-caption .caption {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color: var(--text);
    line-height: 1.4;
    flex: 1;
}
.article-hero-caption .credit {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Two-column body, like a newspaper. */
.article-body {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 36px;
}

.article-prose {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text) !important;
    max-width: 680px;
}
.article-prose p {
    margin: 0 0 18px 0;
}
.article-prose .hl {
    color: var(--text-strong);
    font-weight: 600;
}
.article-prose .tag {
    color: #1f8fff;
    font-weight: 600;
}
body.theme-negative .article-prose .tag,
body.theme-low-contrast .article-prose .tag { color: var(--link-accent); }

/* Side notes column inside the article body */
.article-aside {
    font-family: "Inter", sans-serif;
}
.article-aside .note {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    align-items: flex-start;
}
.article-aside .note:last-child { border-bottom: none; }
.article-aside .note-icon {
    width: 18px; height: 18px;
    color: var(--text-faint);
    flex: 0 0 18px;
    display: flex; align-items: center; justify-content: center;
}
.article-aside .note-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.article-aside .note-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.article-aside .note-text strong { color: var(--text-strong); font-weight: 600; }

/* Floating action buttons on the left edge of the article (favorite/share/comment) */
.article-actions {
    position: absolute;
    top: 360px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 5;
}
.article-actions button {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, transform 0.15s;
}
.article-actions button:hover {
    color: var(--text-strong);
    transform: scale(1.1);
}
.article-actions button.is-active { color: #ff3b6b; }
.article-actions svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.article-actions .filled svg path { fill: currentColor; stroke: none; }

/* ============ SHARE POPOVER ============
   Anchored to the share button on the left of the article */
.share-popover {
    position: absolute;
    top: 400px;          /* aligns with the share button — JS adjusts on open */
    left: 60px;
    width: 240px;
    background: var(--bg);
    border-radius: 8px;
    padding: 14px;
    z-index: 30;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--line);
    display: none;
    transform-origin: left center;
    animation: sharePopIn 0.18s ease-out;
}
.share-popover.is-open { display: block; }

@keyframes sharePopIn {
    from { opacity: 0; transform: scale(0.92) translateX(-8px); }
    to   { opacity: 1; transform: scale(1) translateX(0); }
}

/* Arrow pointing to the share button */
.share-popover .share-arrow {
    position: absolute;
    top: 14px;
    left: -7px;
    width: 14px; height: 14px;
    background: var(--bg);
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

.share-popover .share-title {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 0 4px;
}

.share-popover .share-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-popover .share-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    font-family: "Inter", sans-serif;
}
.share-popover .share-opt:hover {
    background: var(--bg-soft);
}

.share-popover .share-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-popover .share-icon svg {
    width: 16px; height: 16px;
}

.share-popover .share-label {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 500;
}

/* "Copied!" feedback state */
.share-popover .share-opt.is-copied .share-label {
    color: #4caf50;
    font-weight: 600;
}

/* ============ ARTICLE TOOLBAR (floating, top-right) ============
   - The X button sits OUTSIDE the panel (no container, just floats)
   - Below it, a small white rounded card with shadow holds the 6 tool icons */
.article-toolbar {
    position: fixed;
    top: calc(var(--topbar-h, 44px) + 18px);
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 20;
    pointer-events: none; /* children re-enable */
    transition: right 0.32s cubic-bezier(.2,.8,.2,1);
}
.article-toolbar .close-x,
.article-toolbar .tool-card { pointer-events: auto; }

/* When gallery/comments sidebar is open, the toolbar slides left
   so it sits just outside the sidebar's left edge — never overlapping
   any photo or comment. The body classes are toggled via JS. */
body.gallery-open .article-toolbar {
    right: calc(360px + 18px);
}
body.comments-open .article-toolbar {
    right: calc(380px + 18px);
}
body.hashtags-open .article-toolbar,
body.relevant-open .article-toolbar,
body.tree-open .article-toolbar {
    right: calc(420px + 18px);
}
body.more-open .article-toolbar {
    right: calc(320px + 18px);
}

.article-toolbar .close-x {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, transform 0.15s;
}
.article-toolbar .close-x:hover {
    color: var(--text-strong);
    transform: rotate(90deg);
}
.article-toolbar .close-x svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.4; fill: none; }

/* The white rounded card containing the tool icons */
.article-toolbar .tool-card {
    background: var(--bg);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}
body.theme-negative .article-toolbar .tool-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
    border: 1px solid var(--line);
}

.article-toolbar .tool-btn {
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.article-toolbar .tool-btn:hover {
    background: var(--bg-soft);
    color: var(--text-strong);
}
.article-toolbar .tool-btn.is-active {
    background: var(--bg-soft);
    color: var(--text-strong);
}
.article-toolbar .tool-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.article-toolbar .tool-btn.is-add {
    color: var(--text-faint);
    margin-top: 2px;
}

/* ============ GALLERY PANEL (slides in from the right, splits the article) ============ */
.article-gallery {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
    z-index: 10;
}
.article-gallery::-webkit-scrollbar { width: 6px; }
.article-gallery::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
.gallery-open .article-gallery {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.gallery-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 2;
}
.gallery-header .gallery-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.gallery-header .gallery-close:hover { color: var(--text-strong); }

.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 25px;
}
.gallery-item {
    cursor: pointer;
    overflow: hidden;
    background: #2a2a2a;
    aspect-ratio: 16 / 11;
    position: relative;
    border-radius: 4px;
    /* Grayscale by default, color on hover */
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.2s ease;
}
.gallery-item:hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}
.gallery-item svg.gallery-illustration {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============ COMMENTS SIDEBAR (slides in from the right, splits the article) ============ */
.article-comments {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.comments-open .article-comments {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.comments-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    flex: 0 0 auto;
}
.comments-header .header-info {
    display: flex; align-items: baseline; gap: 8px;
}
.comments-header .count {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.comments-header .comments-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.comments-header .comments-close:hover { color: var(--text-strong); }

.comments-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.comments-list::-webkit-scrollbar { width: 4px; }
.comments-list::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

.comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-family: "Inter", sans-serif;
}
.comment:last-child { border-bottom: none; }
.comment-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.comment-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--avatar-c1, #b89878), var(--avatar-c2, #6e573d));
    flex: 0 0 32px;
    overflow: hidden;
    position: relative;
}
.comment-avatar::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,0.4) 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 95%, rgba(0,0,0,0.5) 0 50%, transparent 51%);
}
/* color variants */
.comment[data-c="1"] { --avatar-c1: #d4a017; --avatar-c2: #7a5a0c; }
.comment[data-c="2"] { --avatar-c1: #1f8fff; --avatar-c2: #0d4f9c; }
.comment[data-c="3"] { --avatar-c1: #4caf50; --avatar-c2: #275d29; }
.comment[data-c="4"] { --avatar-c1: #ff3b6b; --avatar-c2: #9c1d3e; }
.comment[data-c="5"] { --avatar-c1: #b06ad9; --avatar-c2: #5d2a82; }
.comment[data-c="6"] { --avatar-c1: #f5a623; --avatar-c2: #8a5612; }

.comment-meta { line-height: 1.2; flex: 1; min-width: 0; }
.comment-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
}
.comment-time {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 2px;
}
.comment-body {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 10px;
}
.comment-actions {
    display: flex; align-items: center; gap: 16px;
    font-size: 11px;
    color: var(--text-muted);
}
.comment-actions button {
    background: transparent; border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    display: flex; align-items: center; gap: 4px;
    padding: 0;
    transition: color 0.15s;
}
.comment-actions button:hover { color: var(--text-strong); }
.comment-actions button.is-liked { color: #ff3b6b; }
.comment-actions svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.comment-actions svg.filled path,
.comment-actions svg.filled circle { fill: currentColor; }

/* New comment input row at the bottom */
.comments-input {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    background: var(--bg);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.comments-input * { box-sizing: border-box; }
.comments-input textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    min-height: 64px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.comments-input textarea:focus {
    border-color: var(--text-strong);
    background: var(--bg);
}
.comments-input textarea::placeholder { color: var(--text-faint); }
.comments-input-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.comments-input-row .hint {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: var(--text-faint);
}
.comments-submit {
    background: var(--text-strong);
    color: var(--bg);
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.comments-submit:hover { transform: scale(1.02); }
.comments-submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.comment-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-faint);
    font-size: 13px;
    font-family: "Inter", sans-serif;
}

/* ============ HASHTAGS SIDEBAR (slide-in from right, splits article) ============ */
.article-hashtags {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.hashtags-open .article-hashtags {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.hashtags-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    flex: 0 0 auto;
}
.hashtags-header .hashtags-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.hashtags-header .hashtags-close:hover { color: var(--text-strong); }

.hashtags-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.hashtags-body::-webkit-scrollbar { width: 4px; }
.hashtags-body::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

.hashtags-col-title {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--text-muted);
    padding: 6px 8px 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    letter-spacing: 0.02em;
}
.hashtags-col-title .num-label { font-weight: 600; }

.hashtags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
}
.hashtags-list li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
}
.hashtags-list li:hover { background: var(--bg-soft); }
.hashtags-list .ht-num {
    font-size: 12px;
    color: var(--text-faint);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.hashtags-list .ht-tag {
    font-size: 13px;
    color: var(--text-strong);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hashtags-list li:hover .ht-tag { color: #1f8fff; }
body.theme-negative .hashtags-list li:hover .ht-tag,
body.theme-low-contrast .hashtags-list li:hover .ht-tag { color: var(--link-accent); }

/* ============ RELEVANT DATA SIDEBAR (NBA standings demo) ============ */
.article-relevant {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.relevant-open .article-relevant {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.relevant-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    flex: 0 0 auto;
}
.relevant-header .relevant-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.relevant-header .relevant-close:hover { color: var(--text-strong); }

.relevant-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 22px 24px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.relevant-body::-webkit-scrollbar { width: 4px; }
.relevant-body::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

.relevant-section { padding-top: 18px; }
.relevant-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 14px;
    line-height: 1.1;
}

.relevant-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.rel-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 8px 12px 12px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    margin-right: 22px;
    text-transform: none;
    letter-spacing: 0;
}
.rel-tab:hover { color: var(--text-strong); }
.rel-tab.is-active {
    color: #00d97e;
    border-bottom-color: #00d97e;
}

.rel-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-strong);
    text-transform: none;
    margin: 22px 0 8px;
}

.rel-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    margin-bottom: 8px;
}
.rel-table thead th {
    color: var(--text-faint);
    font-weight: 500;
    text-align: right;
    padding: 6px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}
.rel-table thead th:first-child { text-align: left; }
.rel-table tbody td {
    padding: 7px 4px;
    color: var(--text);
    text-align: right;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.rel-table tbody td:first-child {
    text-align: left;
    color: var(--text-strong);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rel-table .rank {
    color: var(--text-faint);
    font-weight: 500;
    width: 16px;
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rel-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 18px; height: 18px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    flex: 0 0 18px;
    letter-spacing: 0;
}
.rel-table .badge.xyz   { background: #c084fc; }
.rel-table .badge.xy    { background: #60a5fa; }
.rel-table .badge.x     { background: #94a3b8; }

.rel-table tbody tr.is-active td {
    color: #00d97e;
}
.rel-table tbody tr.is-active .rank { color: #00d97e; }

.rel-table tbody tr.row-divider td {
    border-bottom: none;
    padding: 0;
    height: 14px;
}

/* "view full stats" CTA at the bottom */
.rel-view-full {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    padding: 18px 0 8px;
    margin: 12px auto 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--line);
    transition: color 0.15s;
}
.rel-view-full:hover { color: var(--text-strong); }
.rel-view-full svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ============ STORY TREE SIDEBAR ============ */
.article-tree {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.tree-open .article-tree {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.tree-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    flex: 0 0 auto;
}
.tree-header .tree-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.tree-header .tree-close:hover { color: var(--text-strong); }

.tree-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 30px;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
    font-family: "Inter", sans-serif;
}
.tree-body::-webkit-scrollbar { width: 4px; }
.tree-body::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

.tree-intro {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 18px;
    font-style: italic;
}

.tree-section { margin-bottom: 0; }

.tree-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    padding: 0 4px 6px;
}
.tree-label.is-current {
    color: #1f8fff;
}
body.theme-negative .tree-label.is-current,
body.theme-low-contrast .tree-label.is-current { color: var(--link-accent); }

.tree-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.tree-card:hover {
    background: var(--bg-card);
    border-color: var(--text-faint);
    transform: translateY(-1px);
}
.tree-card.is-current {
    background: var(--bg);
    border: 2px solid #1f8fff;
    cursor: default;
}
.tree-card.is-current:hover { transform: none; }
body.theme-negative .tree-card.is-current,
body.theme-low-contrast .tree-card.is-current { border-color: var(--link-accent); }

.tree-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tree-meta .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
    display: inline-block;
}
.tree-meta .dot.c-breaking { background: #ff3b6b; }
.tree-meta .dot.c-opinion  { background: #b06ad9; }
.tree-meta .dot.c-news     { background: #1f8fff; }
.tree-meta .dot.c-politics { background: #f5a623; }
.tree-meta .dot.c-analysis { background: #00d97e; }
.tree-meta .dot.c-archive  { background: #888; }

.tree-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-strong);
    margin-bottom: 4px;
}
.tree-author {
    font-size: 11px;
    color: var(--text-muted);
}

/* Vertical connector line between predecessor and current */
.tree-connector {
    height: 24px;
    display: flex;
    justify-content: center;
    margin: 4px 0;
}
.tree-connector span {
    width: 2px;
    background: var(--line);
    border-radius: 1px;
}

/* The 3 follow-up branches use a small horizontal line that connects them
   visually back to the current article. */
.tree-branches {
    margin-top: 18px;
    padding-left: 14px;
    border-left: 2px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tree-branch { position: relative; }
.tree-branch-line {
    position: absolute;
    top: 18px;
    left: -14px;
    width: 12px;
    height: 2px;
    background: var(--line);
}

.tree-divider {
    margin: 28px 0 14px;
    text-align: center;
    position: relative;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.tree-divider::before,
.tree-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--line);
}
.tree-divider::before { left: 0; }
.tree-divider::after  { right: 0; }
.tree-divider span {
    background: var(--bg);
    padding: 0 10px;
    position: relative;
}

.tree-card-flat {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

/* ============ MORE OPTIONS SIDEBAR ============ */
.article-more {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: var(--bg);
    border-left: 1px solid var(--line);
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.more-open .article-more {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.more-header {
    padding: 22px 24px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-strong);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    flex: 0 0 auto;
}
.more-header .more-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.more-header .more-close:hover { color: var(--text-strong); }

.more-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 24px;
    font-family: "Inter", sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.more-body::-webkit-scrollbar { width: 4px; }
.more-body::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

.more-group { margin-bottom: 18px; }
.more-group-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    padding: 8px 10px;
    margin-top: 4px;
}

.more-item {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-strong);
    cursor: pointer;
    padding: 10px 10px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.more-item:hover { background: var(--bg-soft); }
.more-item.is-feedback { color: #4caf50; }

.more-icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    flex: 0 0 24px;
}
.more-item:hover .more-icon { color: var(--text-strong); }
.more-item.is-feedback .more-icon { color: #4caf50; }
.more-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}

.more-label {
    font-size: 13px;
    font-weight: 500;
}
.more-shortcut {
    font-size: 10px;
    color: var(--text-faint);
    font-family: "Inter", sans-serif;
    background: var(--bg-soft);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--line);
}
.more-item:hover .more-shortcut { background: var(--bg); }

.more-meta {
    margin-top: 22px;
    padding: 14px 12px;
    background: var(--bg-soft);
    border-radius: 6px;
    font-size: 11px;
}
.more-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--text-muted);
}
.more-meta-row strong {
    color: var(--text-strong);
    font-weight: 600;
}

/* ============ TRANSLATE LANGUAGE PICKER ============ */
.more-item { position: relative; }
.translate-picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 10px;
    z-index: 30;
    animation: pickerIn 0.18s ease-out;
}
@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.translate-picker-title {
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    padding: 4px 6px 8px;
}
.translate-picker-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.translate-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    color: var(--text-strong);
    font-family: "Inter", sans-serif;
}
.translate-lang-btn:hover {
    background: var(--bg-soft);
}
.translate-lang-btn .lang-code {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-faint);
    background: var(--bg-soft);
    padding: 2px 5px;
    border-radius: 3px;
    flex: 0 0 auto;
    min-width: 32px;
    text-align: center;
    border: 1px solid var(--line);
}
.translate-lang-btn .lang-label {
    font-size: 12px;
    font-weight: 500;
}

/* ============ FORM MODALS (Report / Correction) ============ */
.form-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: formModalFade 0.2s ease;
}
.form-modal.is-open { display: flex; }

@keyframes formModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.form-modal-card {
    background: var(--bg);
    color: var(--text);
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 36px 32px 28px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
    animation: formCardIn 0.25s cubic-bezier(.2,.8,.2,1);
    font-family: "Inter", sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
}
.form-modal-card::-webkit-scrollbar { width: 4px; }
.form-modal-card::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 2px; }

@keyframes formCardIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.form-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.form-modal-close:hover {
    background: var(--bg-soft);
    color: var(--text-strong);
    transform: rotate(90deg);
}
.form-modal-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Icon at top of the modal */
.form-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.form-icon-wrap svg {
    width: 28px; height: 28px;
    stroke-width: 1.6;
    fill: none;
}
.form-icon-warn { background: rgba(245, 166, 35, 0.12); }
.form-icon-warn svg { stroke: #f5a623; }
.form-icon-info { background: rgba(31, 143, 255, 0.12); }
.form-icon-info svg { stroke: #1f8fff; }
.form-icon-ok   { background: rgba(76, 175, 80, 0.12); }
.form-icon-ok svg   { stroke: #4caf50; }

.form-modal-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-strong);
    text-align: center;
    margin: 0 0 8px;
    line-height: 1.2;
}
.form-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin: 0 0 24px;
}
.form-ref {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-faint);
}
.form-ref strong {
    color: var(--text-strong);
    font-family: "Inter", monospace;
    letter-spacing: 0.05em;
}

/* Form body */
.form-field {
    margin-bottom: 18px;
}
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 8px;
}
.form-required {
    color: #ff3b6b;
    font-weight: 700;
}
.form-optional {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 11px;
}

/* Inputs / textareas / selects */
.form-modal-card input[type="text"],
.form-modal-card input[type="email"],
.form-modal-card input[type="tel"],
.form-modal-card textarea,
.form-modal-card select {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--text);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.form-modal-card textarea {
    resize: vertical;
    min-height: 60px;
}
.form-modal-card select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><polyline points='1,1 6,6 11,1' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.form-modal-card input:focus,
.form-modal-card textarea:focus,
.form-modal-card select:focus {
    border-color: var(--text-strong);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(31, 143, 255, 0.12);
}
.form-modal-card input::placeholder,
.form-modal-card textarea::placeholder { color: var(--text-faint); }

.form-counter {
    text-align: right;
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 4px;
}

/* Two-column contact grid (email + whatsapp side by side) */
.form-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-contact-grid > div { min-width: 0; }
@media (max-width: 480px) {
    .form-contact-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Helper text below a field group */
.form-helper {
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 6px;
    line-height: 1.4;
    font-style: italic;
}

/* Phone input — visual hint that it's a phone field */
.form-modal-card input[type="tel"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Radio options as styled cards */
.form-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-option {
    cursor: pointer;
    display: block;
}
.form-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.form-option-box {
    display: block;
    border: 1.5px solid var(--line);
    background: var(--bg-soft);
    border-radius: 6px;
    padding: 10px 14px;
    transition: all 0.15s;
    position: relative;
    padding-left: 36px;
}
.form-option-box::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--text-faint);
    background: var(--bg);
    transition: all 0.15s;
}
.form-option:hover .form-option-box {
    border-color: var(--text-faint);
    background: var(--bg);
}
.form-option input[type="radio"]:checked + .form-option-box {
    border-color: #1f8fff;
    background: rgba(31, 143, 255, 0.05);
}
.form-option input[type="radio"]:checked + .form-option-box::before {
    border-color: #1f8fff;
    background: #1f8fff;
    box-shadow: inset 0 0 0 3px var(--bg);
}
.form-option input[type="radio"]:focus-visible + .form-option-box {
    box-shadow: 0 0 0 3px rgba(31, 143, 255, 0.18);
}
body.theme-negative .form-option input[type="radio"]:checked + .form-option-box,
body.theme-low-contrast .form-option input[type="radio"]:checked + .form-option-box {
    background: rgba(255,255,255,0.04);
}
.form-option-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.form-option-desc {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Action buttons */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.form-actions-center {
    justify-content: center;
    border-top: none;
    padding-top: 0;
    margin-top: 16px;
}
.form-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.form-btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.form-btn-ghost:hover {
    background: var(--bg-soft);
    color: var(--text-strong);
}
.form-btn-primary {
    background: var(--text-strong);
    color: var(--bg);
    min-width: 120px;
}
.form-btn-primary:hover:not(:disabled) {
    transform: scale(1.02);
}
.form-btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Field with validation error */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
    border-color: #ff3b6b;
    background: rgba(255, 59, 107, 0.04);
}
.form-field.has-error .form-options .form-option-box {
    border-color: #ff3b6b;
}
.form-error-msg {
    color: #ff3b6b;
    font-size: 11px;
    margin-top: 4px;
    display: none;
}
.form-field.has-error .form-error-msg { display: block; }

/* Mobile */
@media (max-width: 640px) {
    .form-modal { padding: 12px; align-items: flex-end; }
    .form-modal-card {
        max-width: 100%;
        max-height: 92vh;
        padding: 28px 22px 22px;
        border-radius: 12px 12px 0 0;
    }
    .form-modal-title { font-size: 20px; }
    .form-icon-wrap { width: 48px; height: 48px; margin-bottom: 14px; }
    .form-icon-wrap svg { width: 24px; height: 24px; }
}

/* ============ LIGHTBOX ============ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: lbFadeIn 0.2s ease;
}
.lightbox.is-open { display: flex; }

@keyframes lbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-image {
    max-width: 80vw;
    max-height: 70vh;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* Lightbox always shows the photo in full color */
    filter: grayscale(0%);
}
.lightbox-image svg {
    width: 80vw;
    max-width: 1100px;
    height: 70vh;
    max-height: 700px;
    display: block;
}

.lightbox-caption {
    color: #fff;
    font-family: "Inter", sans-serif;
    max-width: 700px;
    padding: 22px 30px;
    text-align: center;
}
.lightbox-caption .lb-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
}
.lightbox-caption .lb-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #c8c8c8;
}
.lightbox-counter {
    color: #888;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    margin-top: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lightbox-close {
    position: absolute;
    top: 22px; right: 22px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.lightbox-close:hover { transform: rotate(90deg); }
.lightbox-close svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 1.4; fill: none; }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) scale(1.05);
}
.lightbox-nav svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.6; fill: none; }
.lightbox-nav.prev { left: 30px; }
.lightbox-nav.next { right: 30px; }
.lightbox-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Main layout for the article page — only sidebar-left + main */
.layout.layout-article {
    grid-template-columns: 200px 1fr;
}

@media (max-width: 1280px) {
    .layout.layout-article { grid-template-columns: 180px 1fr; }
    .article-headline { font-size: 42px; }
    .article-deck { font-size: 21px; }
    .article-wrap { padding: 24px 90px 50px 50px; }
    /* Smaller side panels on compact desktop */
    .article-gallery   { width: 320px; }
    .article-comments  { width: 340px; }
    .article-hashtags,
    .article-relevant,
    .article-tree      { width: 380px; }
    .article-more      { width: 300px; }
    .main.article-main.gallery-open .article-scroll  { padding-right: 320px; }
    .main.article-main.comments-open .article-scroll { padding-right: 340px; }
    .main.article-main.hashtags-open .article-scroll,
    .main.article-main.relevant-open .article-scroll,
    .main.article-main.tree-open .article-scroll     { padding-right: 380px; }
    .main.article-main.more-open .article-scroll     { padding-right: 300px; }
    body.gallery-open .article-toolbar { right: calc(320px + 18px); }
    body.comments-open .article-toolbar { right: calc(340px + 18px); }
    body.hashtags-open .article-toolbar,
    body.relevant-open .article-toolbar,
    body.tree-open .article-toolbar { right: calc(380px + 18px); }
    body.more-open .article-toolbar { right: calc(300px + 18px); }
}

@media (max-width: 1024px) {
    .layout.layout-article {
        grid-template-columns: 1fr;
        height: auto;
    }
    .main.article-main {
        height: auto;
        overflow: visible;
    }
    /* On tablet/mobile, side panels become fullscreen overlays — no padding shift */
    .main.article-main.gallery-open .article-scroll,
    .main.article-main.comments-open .article-scroll {
        padding-right: 0;
    }
    .article-scroll {
        height: auto;
        overflow: visible;
    }
    /* On mobile, the headline doesn't need padding-right because the
       toolbar is small enough; we keep a smaller reserve for clarity. */
    .article-meta-top,
    .article-headline,
    .article-deck {
        padding-right: 60px;
    }
    .article-wrap {
        padding: 24px 24px 50px 80px;
        max-width: 100%;
    }
    .article-headline { font-size: 38px; }
    .article-deck { font-size: 20px; }

    /* Stack the body */
    .article-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .article-aside {
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }
    .article-actions {
        position: absolute;
        top: 28px;
        left: 18px;
        flex-direction: column;
        gap: 14px;
    }

    /* On tablet/mobile: side panels become fullscreen overlays sliding from right */
    .article-gallery,
    .article-comments,
    .article-hashtags,
    .article-relevant,
    .article-tree,
    .article-more {
        position: fixed;
        top: var(--topbar-h, 44px);
        right: 0;
        bottom: 0;
        width: min(100%, 420px);
        height: auto;
        z-index: 150;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    }
    /* On mobile/tablet, fullscreen sidebars cover the toolbar, so reset its right
       position back to the default (no shift left needed when there's no split). */
    body.gallery-open .article-toolbar,
    body.comments-open .article-toolbar,
    body.hashtags-open .article-toolbar,
    body.relevant-open .article-toolbar,
    body.tree-open .article-toolbar,
    body.more-open .article-toolbar {
        right: 14px;
    }
    .article-toolbar { right: 14px; top: calc(var(--topbar-h, 44px) + 14px); }
    /* Hide the toolbar entirely when any fullscreen sidebar is open on mobile,
       since it would just sit on top of the panel */
    body.gallery-open .article-toolbar,
    body.comments-open .article-toolbar,
    body.hashtags-open .article-toolbar,
    body.relevant-open .article-toolbar,
    body.tree-open .article-toolbar,
    body.more-open .article-toolbar {
        opacity: 0;
        pointer-events: none;
    }
    /* On tablet/mobile, the article scroll keeps full width — no padding-right */
    .main.article-main.gallery-open .article-scroll,
    .main.article-main.comments-open .article-scroll,
    .main.article-main.hashtags-open .article-scroll,
    .main.article-main.relevant-open .article-scroll,
    .main.article-main.tree-open .article-scroll,
    .main.article-main.more-open .article-scroll {
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .article-wrap {
        /* Reserve space on the right for the floating toolbar so prose
           and headlines never sit under it. The toolbar lives at
           `right: 14px` and is ~36px wide → ~50px reservation needed. */
        padding: 18px 60px 40px 60px;
    }
    .article-meta-top,
    .article-headline,
    .article-deck,
    .article-prose,
    .article-body,
    .article-byline,
    .article-listen,
    .article-hero-image,
    .article-inline-tags,
    .article-related,
    .article-author-bio {
        /* Defensive: anything full-width inside .article-wrap also
           respects max-width to avoid pushing past viewport edge. */
        max-width: 100%;
    }
    .article-headline { font-size: 30px; line-height: 1.08; }
    .article-deck { font-size: 17px; }
    .article-prose {
        font-size: 16px;
        line-height: 1.6;
    }
    /* Hero image gets a more compact ratio on phones (16:9) */
    .article-hero-image { aspect-ratio: 16 / 9; }
    .article-hero-caption {
        flex-direction: column;
        gap: 6px;
    }
    .article-actions {
        top: 18px;
        left: 14px;
    }
    .article-actions button { width: 28px; height: 28px; }
    .article-actions svg { width: 16px; height: 16px; }
    .lightbox-image svg { width: 92vw; height: 60vh; }
    .lightbox-nav { width: 40px; height: 40px; }
    .lightbox-nav.prev { left: 12px; }
    .lightbox-nav.next { right: 12px; }
}

/* Back-to-top */
.article-back-top {
    text-align: center;
    padding: 32px 0 18px;
    color: var(--text-muted);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid var(--line);
    margin-top: 36px;
}
.article-back-top:hover { color: var(--text-strong); }

/* ============ ARTICLE-PAGE ACCESSIBILITY OVERRIDES ============
   Make the Text Edit popover (font family + font size slider) actually
   apply to the article, side panels, and side-panel content. Mirrors the
   pattern used in shared.css for the homepage but covers article-specific
   selectors. Uses !important to beat the legacy hardcoded values above. */

/* --- Font family (Serif / Sans toggle) --- */
body.font-serif .article-headline,    body.font-sans .article-headline,
body.font-serif .article-deck,        body.font-sans .article-deck,
body.font-serif .article-byline .by,  body.font-sans .article-byline .by,
body.font-serif .article-prose,       body.font-sans .article-prose,
body.font-serif .article-prose p,     body.font-sans .article-prose p,
body.font-serif .article-aside,       body.font-sans .article-aside,
body.font-serif .article-aside .note-text, body.font-sans .article-aside .note-text,
body.font-serif .article-hero-image .caption, body.font-sans .article-hero-image .caption,
body.font-serif .gallery-header,      body.font-sans .gallery-header,
body.font-serif .comments-header,     body.font-sans .comments-header,
body.font-serif .comment-body,        body.font-sans .comment-body,
body.font-serif .hashtags-header,     body.font-sans .hashtags-header,
body.font-serif .relevant-header,     body.font-sans .relevant-header,
body.font-serif .relevant-title,      body.font-sans .relevant-title,
body.font-serif .tree-header,         body.font-sans .tree-header,
body.font-serif .tree-title,          body.font-sans .tree-title,
body.font-serif .more-header,         body.font-sans .more-header,
body.font-serif .lightbox-caption .lb-title, body.font-sans .lightbox-caption .lb-title {
    font-family: var(--font-display) !important;
}

/* --- Font size scale (slider) --- */
.article-headline   { font-size: calc(52px * var(--font-scale, 1)) !important; }
.article-deck       { font-size: calc(24px * var(--font-scale, 1)) !important; }
.article-meta-top   { font-size: calc(12px * var(--font-scale, 1)) !important; }
.article-byline .by { font-size: calc(13px * var(--font-scale, 1)) !important; }
.article-prose      { font-size: calc(17px * var(--font-scale, 1)) !important; }
.article-aside .note-text { font-size: calc(12px * var(--font-scale, 1)) !important; }
.article-hero-image .caption { font-size: calc(12px * var(--font-scale, 1)) !important; }
.article-hero-image .credit  { font-size: calc(10px * var(--font-scale, 1)) !important; }

/* Side-panel headers all share the same heading size */
.gallery-header,
.comments-header,
.hashtags-header,
.relevant-header,
.tree-header,
.more-header { font-size: calc(22px * var(--font-scale, 1)) !important; }

/* Comment body & inputs */
.comment-name      { font-size: calc(13px * var(--font-scale, 1)) !important; }
.comment-time      { font-size: calc(11px * var(--font-scale, 1)) !important; }
.comment-body      { font-size: calc(14px * var(--font-scale, 1)) !important; }
.comments-input textarea { font-size: calc(13px * var(--font-scale, 1)) !important; }

/* Hashtags */
.hashtags-list .ht-tag { font-size: calc(13px * var(--font-scale, 1)) !important; }
.hashtags-list .ht-num { font-size: calc(12px * var(--font-scale, 1)) !important; }

/* Relevant data */
.relevant-title    { font-size: calc(26px * var(--font-scale, 1)) !important; }
.rel-subtitle      { font-size: calc(12px * var(--font-scale, 1)) !important; }
.rel-table         { font-size: calc(11px * var(--font-scale, 1)) !important; }
.rel-tab           { font-size: calc(11px * var(--font-scale, 1)) !important; }

/* Story tree */
.tree-intro        { font-size: calc(12px * var(--font-scale, 1)) !important; }
.tree-title        { font-size: calc(14px * var(--font-scale, 1)) !important; }
.tree-author       { font-size: calc(11px * var(--font-scale, 1)) !important; }
.tree-meta         { font-size: calc(10px * var(--font-scale, 1)) !important; }
.tree-label        { font-size: calc(10px * var(--font-scale, 1)) !important; }

/* More options */
.more-label        { font-size: calc(13px * var(--font-scale, 1)) !important; }
.more-group-title  { font-size: calc(10px * var(--font-scale, 1)) !important; }
.more-meta         { font-size: calc(11px * var(--font-scale, 1)) !important; }

/* Lightbox */
.lightbox-caption .lb-title { font-size: calc(18px * var(--font-scale, 1)) !important; }
.lightbox-caption .lb-desc  { font-size: calc(13px * var(--font-scale, 1)) !important; }

/* Responsive base sizes — slider still scales them proportionally */
@media (max-width: 1280px) {
    .article-headline { font-size: calc(42px * var(--font-scale, 1)) !important; }
    .article-deck     { font-size: calc(21px * var(--font-scale, 1)) !important; }
}
@media (max-width: 1024px) {
    .article-headline { font-size: calc(38px * var(--font-scale, 1)) !important; }
    .article-deck     { font-size: calc(20px * var(--font-scale, 1)) !important; }
}
@media (max-width: 640px) {
    .article-headline { font-size: calc(30px * var(--font-scale, 1)) !important; }
    .article-deck     { font-size: calc(17px * var(--font-scale, 1)) !important; }
    .article-prose    { font-size: calc(16px * var(--font-scale, 1)) !important; }
}

/* =================================================================
   WP-SPECIFIC ELEMENTS — appended for the WordPress port.

   These wrappers are added by single.php / inc/article-features.php
   and don't exist in the static mockup. Each is styled to match the
   surrounding chrome rather than introduce a new visual language.
================================================================= */

/* ---- Inline tags row (sits between the body and the author bio) ---- */
.article-inline-tags {
    max-width: 720px;
    margin: 28px auto 32px;
    padding: 16px 0;
    border-top: 1px solid var(--line, #e5e5e5);
    border-bottom: 1px solid var(--line, #e5e5e5);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
}
.article-inline-tags-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #888;
    margin-right: 6px;
}
.article-inline-tag {
    color: #1f8fff;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 12px;
    background: #f5f7fb;
    transition: background 0.15s;
}
.article-inline-tag:hover { background: #e6efff; }

/* ---- Author bio card ---- */
.article-author-bio {
    max-width: 720px;
    margin: 32px auto;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #fafafa;
    border-left: 3px solid var(--text-strong, #111);
    border-radius: 0 4px 4px 0;
}
.article-author-bio-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.article-author-bio-info { flex: 1; min-width: 0; }
.article-author-bio-name {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}
.article-author-bio-text {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0 0 10px;
}
.article-author-bio-link {
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1f8fff;
    text-decoration: none;
}
.article-author-bio-link:hover { text-decoration: underline; }

/* ---- Related posts (More in [Category]) ---- */
.article-related {
    max-width: 920px;
    margin: 40px auto 24px;
    padding-top: 32px;
    border-top: 2px solid var(--line, #e5e5e5);
}
.article-related-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #111;
}
.article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 820px) {
    .article-related-grid { grid-template-columns: 1fr; }
}

/* ---- Comments — empty state + guest fields ---- */
.comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 22px 28px;
    color: var(--text-muted, #777);
    font-family: "Inter", "Helvetica Neue", sans-serif;
    text-align: center;
}
.comments-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #999;
    margin-bottom: 4px;
}
.comments-empty-title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-strong, #1a1a1a);
}
.comments-empty-sub {
    font-size: 13px;
    color: var(--text-muted, #777);
    line-height: 1.4;
    max-width: 260px;
}
.comments-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;  /* allow grid items to shrink below content size */
    width: 100%;
}
.comments-guest-fields input {
    width: 100%;
    box-sizing: border-box;  /* padding + border don't add to width */
    min-width: 0;            /* allow input to shrink inside grid cell */
    padding: 8px 10px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    background: #fff;
}
.comments-guest-fields input:focus {
    outline: none;
    border-color: #1f8fff;
}

/* ---- Side-panel empty states (gallery / relevant / tree) ---- */
.gallery-empty,
.relevant-empty,
.tree-empty {
    padding: 24px 18px;
    color: #888;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    text-align: center;
    line-height: 1.5;
}

/* ---- Form error strip (REST submission failures) ---- */
.form-error {
    margin: 10px 0;
    padding: 10px 12px;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    border-radius: 0 3px 3px 0;
}

/* =================================================================
   WP COMMENTS — variants for real avatars + notice strip + auth state

   The mockup's .comment-avatar is a coloured gradient with a stylised
   "face" ::after pseudo. When a real Gravatar is available, replace
   that with the image and hide the decorative layer.
================================================================= */

.comment-avatar--img {
    background: #eee;
}
.comment-avatar--img::after {
    display: none;
}
.comment-avatar--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ---- Notice strip inside the comments-input form (errors / pending / ok) ---- */
.comments-input .comments-notice {
    padding: 8px 12px;
    margin: 0 0 10px;
    border-radius: 4px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
.comments-input .comments-notice.is-error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
}
.comments-input .comments-notice.is-pending {
    background: #fffbeb;
    border-left: 3px solid #d97706;
    color: #92400e;
}
.comments-input .comments-notice.is-ok {
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
    color: #15803d;
}

/* Login required for comments (when WP option `comment_registration` is on) */
.comments-login-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 24px;
    background: var(--bg-soft, #fafafa);
    border-top: 1px solid var(--line, #e5e5e5);
    text-align: center;
    flex: 0 0 auto;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted, #555);
}
.comments-login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg, #fff);
    color: var(--text-muted, #777);
    border: 1px solid var(--line, #e5e5e5);
}
.comments-login-text {
    margin: 0;
    max-width: 280px;
}
.comments-login-note a {
    color: #1f8fff;
    font-weight: 600;
    text-decoration: none;
}
.comments-login-note a:hover { text-decoration: underline; }

.comments-closed-note {
    padding: 18px 22px;
    color: var(--text-muted, #555);
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid var(--line, #e5e5e5);
    background: var(--bg, #fff);
    flex: 0 0 auto;
}

/* =================================================================
   COMMENT ACTIONS — like + share visual feedback (WP integration)
================================================================= */

/* Share button "flash" state — when the user successfully copies the
   link or invokes the native share sheet, the label briefly switches
   to "Link copied" / "Shared!" before reverting. */
.comment-actions button.is-flashed {
    color: #1f8fff;
    transition: color 0.2s;
}
.comment-actions button.is-flashed svg {
    stroke: currentColor;
}

/* Liked state — heart icon fills in red (matches the article-level
   favourite heart styling). The mockup already toggles `.is-liked`
   and `.filled` on the SVG, but we make sure the colours pop. */
.comment-actions .like-btn.is-liked {
    color: #e0245e;
}
.comment-actions .like-btn.is-liked svg {
    fill: #e0245e;
    stroke: #e0245e;
}
.comment-actions .like-btn:hover {
    color: #1a1a1a;
    transition: color 0.15s;
}
.comment-actions button:hover {
    color: #1a1a1a;
}

/* =================================================================
   COMMENT THREADING — nested replies (WP threaded_comments)

   Each level of nesting gets an indent + a thin vertical "thread
   line" on the left so the visual hierarchy mirrors WP's
   `thread_comments_depth` setting. Capped via comment-depth-* class
   from JS, but at very deep levels the panel just stops indenting
   (we don't want it to spiral off-screen on a 380px panel).
================================================================= */

.comment-children {
    margin-left: 24px;
    padding-left: 14px;
    border-left: 2px solid #ececec;
    margin-top: 8px;
}
/* Limit visual indent depth on narrow panels — beyond level 3 the
   thread keeps the line but stops indenting so deep replies remain
   readable in the 380px side panel. */
.comment-depth-3 .comment-children,
.comment-depth-4 .comment-children,
.comment-depth-5 .comment-children {
    margin-left: 12px;
    padding-left: 10px;
}

/* Reply button "active" state — when the inline form is open for
   this comment, the button reads as "Cancel". */
.comment-actions button[data-action="reply"].is-active {
    color: #1f8fff;
    font-weight: 600;
}
.comment-actions button[data-action="reply"].is-active svg {
    stroke: currentColor;
}

/* =================================================================
   COMMENT REPLY — inline form anchored to a parent comment
================================================================= */
.comment-reply-slot:empty { display: none; }
.comment-reply-slot {
    margin: 10px 0 4px;
}
.comment-reply-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f7f7f8;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}
.reply-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.reply-guest-fields input,
.comment-reply-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}
.comment-reply-form textarea {
    resize: vertical;
    min-height: 60px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 14px;
    line-height: 1.45;
}
.reply-guest-fields input:focus,
.comment-reply-form textarea:focus {
    outline: none;
    border-color: #1f8fff;
}
.comment-reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.reply-cancel,
.reply-submit {
    padding: 7px 14px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}
.reply-cancel {
    background: transparent;
    border-color: #d8d8d8;
    color: #555;
}
.reply-cancel:hover { background: #efefef; }
.reply-submit {
    background: #1a1a1a;
    color: #fff;
}
.reply-submit:hover:not(:disabled) { background: #000; }
.reply-submit:disabled {
    background: #c8c8c8;
    cursor: not-allowed;
}
.comment-reply-notice {
    padding: 8px 10px;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
.comment-reply-notice.is-error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
}
.comment-reply-notice.is-pending {
    background: #fffbeb;
    border-left: 3px solid #d97706;
    color: #92400e;
}

/* =================================================================
   COOKIE CONSENT CHECKBOX — main comment form
================================================================= */
.comments-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 6px;
    font-family: "Inter", "Helvetica Neue", sans-serif;
    font-size: 11px;
    color: #777;
    line-height: 1.4;
    cursor: pointer;
}
.comments-cookies-consent input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #1f8fff;
    flex: 0 0 auto;
}
.comments-cookies-consent span { flex: 1; }

/* =================================================================
   COMMENTS FOOTER MOUNT — placeholder while JS initialises

   Always reserves a minimum strip at the bottom of the panel so the
   layout doesn't collapse if JS is slow / blocked. Once article-wp.js
   injects markup (form / login note / closed note), the placeholder
   styles step out of the way (real `.comments-input` / .comments-
   login-note / .comments-closed-note rules take over via their
   per-class declarations above).

   `is-late-mount` is set when the JS had to create this element
   manually (because the cached PHP template didn't include it). A
   subtle dashed top-border distinguishes it visually only when
   debugging — usually invisible.
================================================================= */
.comments-footer-mount {
    flex: 0 0 auto;
    min-height: 0;
    /* Defensive: when this element is created via document.createElement
       and inserted into an `.article-comments` aside that was set up
       BEFORE we knew this element would exist, we need to make sure
       it actually shows up at the bottom of the flex column. */
    width: 100%;
    box-sizing: border-box;
}
.comments-footer-mount[data-comments-state="form"] { background: var(--bg, #fff); }
.comments-footer-mount[data-comments-state="login"] { background: var(--bg-soft, #fafafa); }
.comments-footer-mount[data-comments-state="closed"] { background: var(--bg, #fff); }
.comments-footer-mount:empty::before {
    content: "";
    display: block;
    height: 1px;
}

/* =================================================================
   COMMENTS PANEL — defensive layout fixes

   Force the panel itself to be a true flex column with a max-height
   capped at the viewport (minus the topbar). This guarantees that the
   footer mount at the bottom always remains visible, even if the
   .layout grid above us is in some unexpected state (cached old
   header.php, missing layout-article class, etc).
================================================================= */
.article-comments {
    max-height: calc(100vh - var(--topbar-h, 48px));
}
.article-comments .comments-list {
    min-height: 60px;
}
/* Last-resort fallback: ensure the footer mount is always visible at
   the bottom of the panel even if the list above tries to expand. */
.article-comments > #comments-footer-mount,
.article-comments > .comments-footer-mount {
    flex-shrink: 0;
    border-top: 1px solid var(--line, #e5e5e5);
}

/* =================================================================
   ARTICLE GALLERY — empty state + noscript fallback
================================================================= */

/* Empty state pill inside the gallery panel. The flex column already
   takes care of vertical centering; we just need typography here. */
.gallery-grid .gallery-empty {
    padding: 32px 18px;
    color: #888;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    text-align: center;
}

/* No-JS fallback: simple stacked figures. The aspect-ratio frame
   becomes a regular static image with a caption underneath. */
.gallery-item.gallery-item-static {
    aspect-ratio: auto;
    background: transparent;
    filter: none;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gallery-item.gallery-item-static img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.gallery-item.gallery-item-static figcaption {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    color: #888;
    text-align: center;
}

/* =================================================================
   ARTICLE GALLERY — real WP photos (vs mockup SVG)

   .gallery-item-wp wraps a plain <img>. Same aspect-ratio frame as
   the mockup illustrations, but with object-fit:cover so the image
   fills the box without distortion.
================================================================= */
.gallery-item.gallery-item-wp {
    /* Inherits .gallery-item: aspect-ratio: 16/11, grayscale, hover scale */
    display: block;
}
.gallery-item.gallery-item-wp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =================================================================
   RELEVANT DATA — fact list (label + value pairs)

   Rendered as a <dl> with row groups so screen readers + assistive
   tech can navigate the pairs naturally. Each row has a slim divider
   between rows so visually it reads like a key-facts table without
   the heavy chrome of a real table.
================================================================= */
.relevant-list {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}
.relevant-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line, #eee);
}
.relevant-row:first-child { padding-top: 4px; }
.relevant-row:last-child  { border-bottom: none; }
.relevant-label {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
}
.relevant-value {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-strong, #111);
    text-align: right;
    flex: 0 0 auto;
    max-width: 60%;
    word-break: break-word;
}

/* =================================================================
   MOBILE FIXES — prevent horizontal overflow + full panel height

   On narrow viewports we were getting horizontal scroll because:
     • .article-hero-image and embedded media could exceed 100%
     • .wp-block-pullquote uses negative margins in some themes
     • <pre>, <table>, long URLs in content can blow out width
     • iframes (oEmbed) don't shrink by default

   We also need the side panels to take exactly the visible viewport
   height (no gap at the bottom). The fixed positioning with
   `bottom: 0` from the previous rules SHOULD work, but on iOS the
   address bar resize creates a gap unless we use dvh.
================================================================= */

/* Global no-overflow guard. We never want horizontal scroll on the body. */
html, body {
    max-width: 100%;
    overflow-x: clip;  /* Better than `hidden` — doesn't create a new scroll context */
}
/* Fallback for browsers without `overflow-x: clip` (Safari < 16). */
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* iOS Safari fix: 100vw can be slightly wider than the visible
   viewport because it includes the scrollbar gutter. Constrain
   everything to the inner area. */
body {
    position: relative;
    width: 100%;
    max-width: 100vw;
}

/* Top-level layout containers must never exceed viewport width.
   These are the usual suspects for horizontal scroll. */
/* Top-level layout containers must never exceed viewport width.
   These are the usual suspects for horizontal scroll.

   NOTE: .article-wrap is intentionally excluded here — it has its
   own max-width: 1060px for editorial column width on desktop. */
.layout,
.layout-article,
.main,
.main-news,
.article-main,
.article-scroll,
.site-footer {
    max-width: 100%;
}

/* Constrain everything inside .article-prose to the column width. */
.article-prose img,
.article-prose video,
.article-prose iframe,
.article-prose embed,
.article-prose object,
.article-prose figure,
.article-prose .wp-block-image,
.article-prose .wp-block-embed,
.article-prose .wp-block-video {
    max-width: 100%;
    height: auto;
}
.article-prose .wp-block-embed iframe,
.article-prose .wp-block-embed__wrapper iframe,
.article-prose iframe {
    width: 100%;
}

/* Tables and pre blocks: scroll within themselves rather than push
   the page wider. */
.article-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-prose pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Break long URLs / words instead of pushing the column wider. */
.article-prose,
.article-prose p,
.article-prose li,
.article-prose blockquote,
.article-prose h1,
.article-prose h2,
.article-prose h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Pullquotes can be a problem if the theme uses negative margins. */
.article-prose .wp-block-pullquote {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* On mobile specifically, force the side panels to use the dynamic
   viewport height (dvh) so iOS Safari's collapsing address bar
   doesn't leave a strip of background showing at the bottom. */
@media (max-width: 1024px) {
    .article-gallery,
    .article-comments,
    .article-hashtags,
    .article-relevant,
    .article-tree,
    .article-more {
        /* Use top + bottom positioning (without `height: auto`) so the
           panel always reaches the bottom of the viewport. The dvh
           below is a belt-and-braces fix for iOS Safari where 100vh
           reserves space for the retracting URL bar. */
        top: var(--topbar-h, 44px);
        bottom: 0;
        height: auto;
        /* Fallback for browsers without dvh */
        min-height: calc(100vh - var(--topbar-h, 44px));
        /* Modern: dvh = dynamic viewport height (matches the visible area) */
        min-height: calc(100dvh - var(--topbar-h, 44px));
        max-height: none;
        /* Become a flex column so the inner *-body fills the remaining
           space below the header — otherwise short panels (e.g. More
           options) leave a white gap below their content. */
        display: flex;
        flex-direction: column;
    }
    /* Each panel's header is fixed-height; the body grows. */
    .gallery-header,
    .comments-header,
    .hashtags-header,
    .relevant-header,
    .tree-header,
    .more-header {
        flex: 0 0 auto;
    }
    .gallery-grid,
    .comments-list,
    .hashtags-body,
    .relevant-body,
    .tree-body,
    .more-body {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }
    /* The horizontal scroll on the layout container needs to be
       killed at this breakpoint too. */
    .layout.layout-article {
        max-width: 100%;
        overflow-x: hidden;
    }
    .main.article-main {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Even tighter on phone-sized viewports — the floating left-action
   strip (favorite / share / comment) was eating ~80px of left
   padding before; pull it inline and use more compact paddings. */
@media (max-width: 520px) {
    .article-wrap {
        padding: 16px 16px 32px 56px;
    }
    .article-actions {
        left: 12px;
        gap: 10px;
    }
    .article-headline { font-size: 30px; line-height: 1.15; }
    .article-deck     { font-size: 17px; }
    .article-meta-top,
    .article-headline,
    .article-deck {
        padding-right: 50px;
    }
    /* Inline tags can wrap; the byline avatar shouldn't push width. */
    .article-byline { flex-wrap: wrap; }

    /* Listen-to-article player needs to shrink, not overflow. */
    .article-listen {
        flex-wrap: wrap;
        gap: 8px;
    }
    .article-listen .listen-info { min-width: 0; flex: 1 1 100%; }
}

/* =================================================================
   MOBILE NUCLEAR OPTION — iOS Chrome / iOS Safari hotfix

   On real iOS devices we've observed horizontal scroll and oversized
   typography even when DevTools mobile emulation looks fine. This
   block is the last word: maximum-specificity overrides applied at
   the very end of the stylesheet, with !important where needed, to
   guarantee correct behaviour on any real mobile browser.

   If you ever revisit this section: the goal isn't elegance, it's
   reliability across iOS WebKit's quirks. Tested on iPhone 12+/15.
================================================================= */
@media (max-width: 720px) {
    /* Layout grid — collapse to single column, kill all gutters. */
    body .layout,
    body .layout-article,
    body .layout.layout-article {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        margin-top: var(--topbar-h, 44px);
        overflow-x: hidden !important;
    }
    /* Sidebar left is a drawer on mobile (already hidden via header.php
       — make sure it doesn't take space). */
    body .layout > .sidebar-left {
        display: none !important;
    }
    /* Main article column — full width, no overflow allowed. */
    body .main.article-main {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        overflow: visible !important;
    }
    body .article-scroll {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        overflow: visible !important;
    }
    body .article-wrap {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        /* 56px right reserves space for the floating toolbar, 56px
           left for the floating actions column. */
        padding: 16px 56px 32px 56px !important;
        box-sizing: border-box !important;
    }
    /* Typography — force fluid sizes that ALWAYS fit. */
    body .article-headline {
        font-size: 28px !important;
        line-height: 1.1 !important;
        padding-right: 0 !important;
        margin-bottom: 16px !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    body .article-deck {
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding-right: 0 !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
    body .article-meta-top {
        padding-right: 0 !important;
        margin-bottom: 10px !important;
        font-size: 11px !important;
    }
    /* Author + listen player should never overflow. */
    body .article-byline { flex-wrap: wrap; max-width: 100%; }
    body .article-listen {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    body .article-listen .listen-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body .article-listen .listen-time,
    body .article-listen .listen-speed { display: none !important; }
    /* Hero image — full bleed within the wrap padding. */
    body .article-hero-image {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body .article-hero-image img,
    body .article-hero-image svg {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    /* Floating action column on the left — narrow it down. */
    body .article-actions {
        position: absolute !important;
        top: 18px !important;
        left: 8px !important;
        width: 36px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    body .article-actions button {
        width: 30px !important;
        height: 30px !important;
    }
    /* Floating tools toolbar on the right — narrow it too. */
    body .article-toolbar {
        right: 8px !important;
        top: calc(var(--topbar-h, 44px) + 10px) !important;
    }
    body .article-toolbar .tool-card,
    body .article-toolbar .close-x {
        width: 36px !important;
    }
    body .article-toolbar .tool-btn {
        width: 32px !important;
        height: 32px !important;
    }
    /* Body — prose should never overflow even with long URLs. */
    body .article-prose {
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    body .article-prose p,
    body .article-prose li,
    body .article-prose blockquote {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
    body .article-prose img,
    body .article-prose figure,
    body .article-prose iframe,
    body .article-prose video,
    body .article-prose .wp-block-image {
        max-width: 100% !important;
        height: auto !important;
    }
    body .article-prose pre,
    body .article-prose table {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Body grid → single column on mobile (no side notes column). */
    body .article-body {
        display: block !important;
        grid-template-columns: none !important;
    }
    body .article-aside {
        padding-top: 16px;
        border-top: 1px solid var(--line);
        max-width: 100% !important;
    }
    /* Inline tags + related grid should also fit. */
    body .article-inline-tags { flex-wrap: wrap; max-width: 100%; }
    body .article-related-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tighter rules on real phone-sized viewports. */
@media (max-width: 420px) {
    body .article-wrap {
        padding: 14px 48px 28px 48px !important;
    }
    body .article-headline { font-size: 26px !important; }
    body .article-deck     { font-size: 15px !important; }
    body .article-actions  { left: 6px !important; }
    body .article-toolbar  { right: 6px !important; }
}

/* =================================================================
   DESKTOP CONTENT WIDTH — final override to ensure centering

   `.article-wrap` is centered with max-width: 1060px on screens
   wider than 1024px (i.e. tablets in landscape and desktops). The
   high specificity + late position in the stylesheet guarantee
   this wins over any earlier rule.
================================================================= */
@media (min-width: 1025px) {
    body .article-scroll > .article-wrap,
    body .article-wrap {
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
}