.article-page {
    width: 100%;
    max-width: none;
    margin: 34px auto 64px;
}

.article-story { min-width: 0; }
.article-header {
    max-width: none;
    margin: 0;
    padding: 4px 0 22px;
}
.article-category {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 8px;
    border: 1px solid var(--blue);
    color: var(--bright);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.article-header .article-title {
    max-width: 19ch;
    margin: 8px 0 14px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .98;
}
.article-header .dek {
    max-width: 66ch;
    margin: 0 0 18px;
    color: #d0dce4;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.6;
}
.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.article-hero {
    position: relative;
    width: 100%;
    margin: 12px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #050b10;
}
.article-hero img {
    display: block;
    width: 100%;
    max-height: 590px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.article-hero figcaption {
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 75ch) minmax(300px, 1fr);
    justify-content: start;
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
    margin: 36px 0 0;
    padding: 0;
}
.article-rail {
    grid-column: 2;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--blue);
}
.article-column { grid-column: 1; grid-row: 1; }

.article-rail-profile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.article-rail-profile > .article-rail-label { grid-column: 1 / -1; }
.article-rail-profile img { width: 48px; height: 48px; }
.article-rail-profile a { color: var(--bright); font-size: 12px; }
.article-rail-profile p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.article-rail-label { color: var(--blue); font-size: 9px; letter-spacing: .1em; }
.article-latest { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.article-latest h2 { margin: 0 0 8px; color: var(--bright); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.article-latest ol { margin: 0; padding: 0; list-style: none; }
.article-latest li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #123248; }
.article-latest li > time { color: var(--blue); font-size: 9px; font-variant-numeric: tabular-nums; }
.article-latest li > div { display: grid; gap: 4px; }
.article-latest small { color: var(--dim); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.article-latest li a { color: var(--white); font-size: 12px; line-height: 1.45; }
.article-latest li a:hover { color: var(--bright); }
.article-related { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.article-related h2 { margin: 0 0 8px; color: var(--bright); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.article-related ol { margin: 0; padding: 0; list-style: none; }
.article-related li { border-top: 1px solid #123248; }
.article-related-link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; }
.article-related-link:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.article-related-link img { display: block; width: 96px; height: 68px; object-fit: cover; }
.article-related-link span { display: grid; gap: 4px; }
.article-related-link small { color: var(--blue); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.article-related-link strong { color: var(--white); font-size: 11px; line-height: 1.45; }
.article-related-link time { color: var(--dim); font-size: 9px; text-transform: uppercase; }
.article-related-link:hover strong { color: var(--bright); }
.article-column { min-width: 0; }
.article-page .entry-content {
    max-width: none;
    margin: 0;
    color: #d5e0e7;
    font-size: 16px;
    line-height: 1.9;
}
.article-column .entry-content > p { margin: 0 0 1.35em; }
.article-column .entry-content > p:first-child {
    color: var(--white);
    font-size: 18px;
    line-height: 1.75;
}
.article-column .entry-content h2 {
    margin: 1.8em 0 .65em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--white);
    font-size: 25px;
    line-height: 1.25;
}
.article-column .entry-content h3 {
    margin: 1.5em 0 .5em;
    color: var(--white);
    font-size: 19px;
    line-height: 1.4;
}
.article-column .entry-content a,
.source-list a {
    color: var(--bright);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.article-column .entry-content ul,
.article-column .entry-content ol { padding-left: 1.5em; }
.article-column .entry-content li { margin: .45em 0; padding-left: .25em; }
.article-column .entry-content blockquote {
    margin: 1.7em 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--blue);
    color: var(--white);
    font-size: 19px;
}
.article-column .entry-content img { display: block; margin: 1.5em auto; }
.article-column .entry-content figure { margin: 1.8em 0; }
.article-column .entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-column .source-list { max-width: none; margin: 30px 0 0; }
.article-column .author-box { margin-top: 28px; }

.article-page #respond {
    max-width: 860px;
    margin: 56px auto 0;
    padding: 20px 24px;
    border-top: 1px solid var(--line);
}
.article-page #respond h3 {
    margin: 0 0 8px;
    color: var(--white);
    font: 400 28px/1.1 var(--pixel);
}
.article-page #respond .comment-notes { color: var(--muted); font-size: 11px; }
.article-page #respond .comment-form { display: grid; gap: 12px; }
.article-page #respond .comment-form > p { display: grid; gap: 6px; margin: 0; color: var(--muted); font-size: 11px; }
.article-page #respond textarea,
.article-page #respond input[type="text"],
.article-page #respond input[type="email"],
.article-page #respond input[type="url"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    padding: 9px 11px;
    background: #04090e;
    color: var(--white);
}
.article-page #respond textarea { min-height: 150px; resize: vertical; }
.article-page #respond .comment-form-cookies-consent { display: flex!important; align-items: flex-start; gap: 8px!important; }
.article-page #respond .comment-form-cookies-consent input { margin-top: 3px; }
.article-page #respond .form-submit input {
    min-height: 42px;
    border: 1px solid var(--blue);
    padding: 8px 12px;
    background: transparent;
    color: var(--bright);
    font: 11px var(--mono);
    cursor: pointer;
}
.article-page #respond .form-submit input:hover { background: var(--blue); color: #00101a; }

@media (max-width: 720px) {
    .article-page { width: 100%; margin: 24px auto 48px; }
    .article-header { padding: 4px 16px 18px; }
    .article-header .article-title { font-size: clamp(38px, 9vw, 54px); }
    .article-hero { width: calc(100% - 32px); margin: 8px 16px 0; }
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-top: 24px;
        padding: 0 16px;
    }
    .article-rail {
        grid-column: 1;
        grid-row: 2;
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding-top: 10px;
    }
    .article-column { grid-column: 1; grid-row: 1; }
    
    .article-rail-profile { display: grid; }
    .article-page .entry-content { font-size: 15px; line-height: 1.8; }
    .article-column .entry-content > p:first-child { font-size: 17px; }
}

@media (max-width: 420px) {
    .article-header { padding-right: 12px; padding-left: 12px; }
    .article-hero { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; }
    .article-layout { padding-right: 12px; padding-left: 12px; }
    .article-byline { gap: 5px 12px; font-size: 10px; }
    .article-rail { align-items: flex-start; }
}