:root {
    --paper: #faf9f6;
    --ink: #20211e;
    --muted: #73736d;
    --line: #d8d7d1;
    --soft-line: #e9e7e1;
    --dark: #242621;
    --cyan: #45b8bd;
    --lime: #c8d92f;
    --accent: #e63b2e;
    --shell: min(1180px, calc(100vw - 48px));
    --shell-wide: min(1320px, calc(100vw - 32px));
    --article: 720px;
    --sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--gh-font-body, var(--sans));
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--gh-font-heading, var(--sans)); }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.shell { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }
.band { padding-block: 92px; }
.band-rule { border-bottom: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; color: #fff; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.micro-label, .section-caption {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-header {
    position: relative;
    z-index: 20;
    box-shadow: 0 1px 0 rgba(32, 33, 30, .06);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(12px);
}
.header-inner { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; min-height: 84px; }
.wordmark { display: inline-flex; width: max-content; align-items: baseline; font-weight: 900; line-height: .8; }
.wordmark img { max-width: 150px; max-height: 44px; }
.wordmark-main { font-size: 32px; font-weight: 780; }
.wordmark-index { margin-left: 8px; padding: 4px 5px 3px; color: var(--paper); background: var(--accent); font-family: var(--mono); font-size: 14px; }
.desktop-nav .nav, .mobile-menu .nav, .footer-nav .nav { margin: 0; padding: 0; list-style: none; }
.desktop-nav .nav { display: flex; justify-content: center; gap: 30px; }
.desktop-nav a, .member-link { font-size: 13px; font-weight: 600; }
.desktop-nav a { position: relative; padding-block: 28px; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 21px; left: 0; height: 2px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.desktop-nav a:hover::after, .desktop-nav .nav-current a::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.icon-button { display: inline-grid; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; place-items: center; }
.icon-button:hover { background: #e7e4dc; }
.icon-button svg { width: 20px; height: 20px; }
.menu-button { display: none; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 10px 19px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; transition: color .18s ease, background .18s ease; }
.button:hover { color: var(--ink); background: transparent; }
.button-compact { min-height: 38px; padding: 7px 14px; }
.text-link { padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 4px; cursor: pointer; }
.mobile-menu { background: #f4f3ef; }
.mobile-menu[hidden] { display: none; }
.mobile-menu .nav { padding-block: 18px; }
.mobile-menu li + li { margin-top: 2px; }
.mobile-menu a { display: block; padding-block: 13px; font-weight: 750; }

.home-intro { padding-block: 104px 112px; }
.intro-grid { display: block; }
.intro-grid h1 { max-width: 860px; margin: 24px 0 0; font-size: clamp(38px, 4vw, 58px); font-weight: 670; line-height: 1.18; text-wrap: balance; }
.intro-note { display: none; }
.intro-note p { margin: 14px 0 28px; color: var(--muted); font-size: 14px; }
.status-dot { display: block; width: 10px; height: 10px; background: var(--lime); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lime) 20%, transparent); }
.inline-search { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; }
.inline-search span { font-size: 13px; font-weight: 750; }
.inline-search kbd { padding: 2px 5px; border: 1px solid var(--line); background: transparent; font-family: var(--mono); font-size: 10px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 54px; padding-bottom: 0; }
.section-heading > div { display: flex; align-items: baseline; gap: 0; }
.section-heading h2 { margin: 0; font-size: 24px; font-weight: 650; line-height: 1.1; }
.section-number { display: none; }
.section-action { font-size: 13px; font-weight: 800; }
.featured-band { padding-top: 92px; }
.featured-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .65fr); gap: 72px; }
.lead-story { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); }
.lead-story-image { min-height: 440px; overflow: hidden; background: #efede7; }
.lead-story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.lead-story-image:hover img { transform: scale(1.015); }
.lead-story-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px 0 20px 52px; }
.lead-story-copy h2 { margin: 24px 0 18px; font-size: clamp(27px, 2.7vw, 39px); font-weight: 680; line-height: 1.2; }
.lead-story-copy p { margin: 0 0 28px; color: var(--muted); font-size: 15px; }
.post-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.post-row-meta a { color: var(--accent); }
.side-stories { display: flex; flex-direction: column; gap: 52px; padding-top: 8px; }
.side-story { display: block; padding: 0; }
.story-index { display: none; }
.side-story h3 { margin: 14px 0 10px; font-size: 20px; font-weight: 620; line-height: 1.32; }
.side-story p { margin: 0; color: var(--muted); font-size: 13px; }

.tracks-band { color: var(--ink); background: #f4f5f1; }
.section-heading-light { color: var(--ink); }
.section-heading-light .section-caption { color: var(--muted); }
.track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.track { position: relative; min-height: 0; padding: 20px 0 26px; }
.track:hover { color: var(--ink); }
.track-code { font-family: var(--mono); font-size: 10px; }
.track h3 { margin: 50px 0 15px; font-size: 23px; font-weight: 630; line-height: 1.2; }
.track p { max-width: 220px; margin: 0; color: var(--muted); font-size: 13px; }
.track:hover p { color: var(--muted); }
.track-arrow { position: absolute; top: 20px; right: 0; color: var(--muted); font-size: 18px; }

.latest-band { padding-bottom: 124px; }
.post-feed { display: flex; flex-direction: column; gap: 72px; }
.post-row { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 52px; padding-block: 0; }
.post-row-image { overflow: hidden; aspect-ratio: 16 / 9; background: #dedbd2; }
.post-row-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-row-image:hover img { transform: scale(1.02); }
.image-fallback { display: grid; height: 100%; padding: 20px; color: var(--paper); background: var(--ink); font-size: 32px; font-weight: 900; line-height: .9; place-items: end start; }
.post-row-body { display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-content: start; column-gap: 32px; }
.post-row-meta { grid-column: 1 / -1; }
.post-row-title { max-width: 700px; margin: 17px 0 12px; font-size: 25px; font-weight: 640; line-height: 1.28; }
.post-row-excerpt { max-width: 700px; margin: 0; color: var(--muted); font-size: 14px; }
.arrow-link { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; font-size: 12px; font-weight: 650; }

.signup-band { color: var(--ink); background: #f1f2ee; }
.signup-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 110px; align-items: end; }
.signup-grid .micro-label { color: var(--muted); }
.signup-grid h2 { max-width: 640px; margin: 24px 0 0; font-size: clamp(32px, 3.5vw, 46px); font-weight: 640; line-height: 1.2; }
.signup-grid p { margin: 0 0 26px; font-size: 14px; }
.button-light { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.button-light:hover { color: var(--ink); background: transparent; }

.site-footer { padding-block: 56px 46px; color: var(--paper); background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 80px; }
.wordmark-footer .wordmark-index { color: var(--ink); background: var(--lime); }
.footer-description, .footer-meta p { max-width: 320px; margin: 20px 0 0; color: #a9aaa3; font-size: 13px; }
.footer-grid .micro-label { color: #7f817c; }
.footer-nav .nav { margin-top: 18px; }
.footer-nav li + li { margin-top: 7px; }
.footer-nav a { color: #d3d4ce; font-size: 13px; }

.archive-header, .taxonomy-header { padding-block: 96px; }
.archive-heading h1, .taxonomy-header h1, .page-header h1 { margin: 22px 0 16px; font-size: clamp(46px, 6vw, 74px); font-weight: 680; line-height: 1.05; }
.archive-heading p, .taxonomy-header p { max-width: 580px; margin: 0; color: var(--muted); }
.taxonomy-grid, .author-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.taxonomy-count { display: inline-block; margin-top: 24px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.author-identity { display: flex; align-items: center; gap: 28px; }
.author-image { width: 110px; height: 110px; object-fit: cover; filter: grayscale(1); }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 30px; }
.pagination > div:last-child { text-align: right; }
.pagination-link { font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.pagination-status { color: var(--muted); font-family: var(--mono); font-size: 11px; }

.reading-progress { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.article-header { padding-block: 96px 82px; }
.article-header-grid { display: block; max-width: 980px; }
.article-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; padding-top: 0; font-family: var(--mono); font-size: 10px; font-weight: 650; }
.article-kicker span { display: none; }
.article-kicker a { color: var(--accent); }
.article-title-wrap { max-width: 900px; }
.article-title-wrap h1 { margin: 0; font-size: clamp(38px, 4.6vw, 62px); font-weight: 660; line-height: 1.16; text-wrap: balance; }
.article-deck { max-width: 760px; margin: 36px 0; color: var(--muted); font-family: var(--serif); font-size: 19px; line-height: 1.85; }
.article-byline { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 38px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.article-byline > div { display: flex; gap: 20px; }
.article-cover { margin-top: 56px; }
.article-cover img { width: 100%; max-height: 760px; object-fit: cover; }
.article-cover figcaption { padding-top: 8px; color: var(--muted); font-size: 11px; }
.article-layout { display: grid; grid-template-columns: minmax(0, var(--article)); justify-content: center; padding-block: 96px 128px; }
.article-layout.has-rail { grid-template-columns: 190px minmax(0, var(--article)); gap: 76px; }
.article-rail { min-width: 0; }
.toc { position: sticky; top: 30px; padding-top: 0; }
.toc nav { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }
.toc a { color: var(--muted); font-size: 11px; line-height: 1.4; }
.toc a:hover, .toc a.is-active { color: var(--accent); }
.toc a.toc-h3 { padding-left: 12px; }
.article-content-wrap { min-width: 0; }
.article-narrow { max-width: var(--article); }
.gh-content { font-family: var(--serif); font-size: 18px; line-height: 2; }
.gh-content > * { margin-inline: auto; }
.gh-content p { margin-block: 0 1.65em; }
.gh-content h2, .gh-content h3, .gh-content h4 { font-family: var(--sans); scroll-margin-top: 28px; }
.gh-content h2 { margin: 3em 0 .9em; padding-top: 0; font-size: 29px; font-weight: 650; line-height: 1.3; }
.gh-content h3 { margin: 2.1em 0 .75em; font-size: 22px; font-weight: 640; line-height: 1.4; }
.gh-content h4 { margin: 1.7em 0 .6em; font-size: 18px; }
.gh-content a { color: color-mix(in srgb, var(--accent) 82%, var(--ink)); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.gh-content strong { font-weight: 800; }
.gh-content blockquote { margin: 2.4em 0; padding: 26px 30px; background: #f0eee8; font-size: 20px; line-height: 1.75; }
.gh-content blockquote p:last-child { margin-bottom: 0; }
.gh-content ul, .gh-content ol { margin: 0 0 1.6em; padding-left: 1.35em; }
.gh-content li { margin-bottom: .45em; }
.gh-content hr { width: 36px; height: 4px; margin: 4em auto; border: 0; background: var(--soft-line); }
.gh-content code { padding: .15em .35em; background: #e4e1d8; font-family: var(--mono); font-size: .83em; }
.gh-content pre { overflow-x: auto; margin: 2em 0; padding: 22px; color: #e9ebe6; background: #20241f; font-family: var(--mono); font-size: 13px; line-height: 1.65; }
.gh-content pre code { padding: 0; background: transparent; }
.gh-content table { display: block; overflow-x: auto; width: 100%; margin: 2em 0; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.gh-content th, .gh-content td { min-width: 130px; padding: 12px; border: 1px solid var(--line); text-align: left; }
.gh-content th { background: #e5e2d9; }
.gh-content figure { margin: 2.4em 0; }
.gh-content figcaption { margin-top: 8px; color: var(--muted); font-family: var(--sans); font-size: 11px; text-align: center; }
.gh-content .kg-width-wide { width: min(960px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-image-card img, .gh-content .kg-gallery-image img { width: 100%; }
.gh-content .kg-callout-card { display: flex; gap: 16px; padding: 24px; background: #eeece6; }
.gh-content .kg-callout-emoji { flex: 0 0 auto; }
.gh-content .kg-bookmark-card a { display: grid; grid-template-columns: 1fr 180px; overflow: hidden; border: 0; background: #f1f0eb; }
.gh-content .kg-bookmark-content { padding: 20px; }
.gh-content .kg-bookmark-title { font-family: var(--sans); font-weight: 800; }
.gh-content .kg-bookmark-description, .gh-content .kg-bookmark-metadata { margin-top: 8px; color: var(--muted); font-family: var(--sans); font-size: 12px; }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.gh-content .kg-button-card .kg-btn { display: inline-flex; padding: 10px 18px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 800; }
.article-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 72px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.article-tags a { padding: 6px 9px; background: #f0efea; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.copy-link { display: flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }
.copy-link svg { width: 17px; height: 17px; }
.content-cta { margin: 48px 0; padding: 36px; background: #e9ebe5; font-family: var(--sans); }
.content-cta h2 { margin: 15px 0 8px; font-size: 28px; }
.content-cta p { color: var(--muted); }
.cta-actions { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.post-subscribe { padding-block: 42px; background: #f4f5f1; }
.post-subscribe-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.post-subscribe p { margin: 0; font-family: var(--serif); font-size: 17px; }
.post-subscribe a { flex: none; font-size: 12px; font-weight: 650; }
.related-band { background: var(--paper); }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 72px; max-width: 900px; }
.related-story { min-height: 0; padding: 12px 0 20px; }
.related-story h3 { margin: 24px 0 0; font-size: 21px; font-weight: 630; line-height: 1.32; }
.comments-band { padding-top: 0; }
.post-template .site-footer { color: var(--ink); background: #f4f3ef; }
.post-template .site-footer .footer-grid { grid-template-columns: 1fr auto; align-items: end; }
.post-template .site-footer .wordmark-index { color: var(--paper); background: var(--accent); }
.post-template .site-footer .footer-description,
.post-template .site-footer .footer-nav { display: none; }
.post-template .site-footer .footer-meta { text-align: right; }
.post-template .site-footer .footer-meta .micro-label { color: var(--muted); }
.post-template .site-footer .footer-meta p { color: var(--muted); }
.page-header { max-width: 920px; }
.page-article .article-narrow { padding-block: 72px 110px; }

.error-page { min-height: 70vh; display: grid; align-items: center; }
.error-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.error-code { color: var(--accent); font-family: var(--mono); font-size: clamp(120px, 20vw, 280px); font-weight: 900; line-height: .8; }
.error-grid h1 { margin: 18px 0 12px; font-size: 56px; line-height: 1.05; }
.error-grid p { max-width: 460px; color: var(--muted); }

@media (max-width: 1020px) {
    .desktop-nav { display: none; }
    .header-inner { grid-template-columns: 1fr auto; }
    .menu-button { display: inline-grid; }
    .intro-grid { display: block; }
    .intro-note { display: none; }
    .intro-note p { margin: 0; }
    .featured-layout { grid-template-columns: 1fr; }
    .side-stories { display: grid; grid-template-columns: 1fr 1fr; }
    .side-story + .side-story { padding-left: 24px; }
    .track-grid { grid-template-columns: 1fr 1fr; }
    .track { min-height: 0; }
    .track h3 { margin-top: 48px; }
    .article-layout.has-rail { grid-template-columns: 160px minmax(0, var(--article)); gap: 36px; }
    .footer-grid { gap: 42px; }
}

@media (max-width: 760px) {
    :root { --shell: min(100% - 32px, 680px); --shell-wide: 100%; }
    .band { padding-block: 70px; }
    .header-inner { min-height: 64px; }
    .wordmark-main { font-size: 29px; }
    .member-link { display: none; }
    .header-actions { gap: 5px; }
    .home-intro { padding-block: 58px 64px; }
    .intro-grid h1 { margin-top: 20px; font-size: 39px; line-height: 1.16; }
    .intro-note { grid-template-columns: auto 1fr; }
    .inline-search { grid-column: 1 / -1; }
    .section-heading { margin-bottom: 26px; }
    .section-heading h2 { font-size: 23px; }
    .section-caption { display: none; }
    .featured-layout { width: 100%; }
    .featured-band .section-heading { width: var(--shell); }
    .lead-story { grid-template-columns: 1fr; }
    .lead-story-image { min-height: 0; aspect-ratio: 16 / 9; }
    .lead-story-copy { padding: 34px 16px 38px; border-top: 0; border-right: 0; }
    .lead-story-copy h2 { font-size: 28px; }
    .side-stories { display: block; width: var(--shell); margin-inline: auto; }
    .side-story + .side-story { padding-left: 0; border-left: 0; }
    .track-grid { grid-template-columns: 1fr; }
    .track { min-height: 0; }
    .track h3 { margin-top: 44px; }
    .post-row { grid-template-columns: 1fr; gap: 22px; }
    .post-row-body { display: block; }
    .post-row-title { font-size: 23px; }
    .arrow-link { display: inline-block; margin-top: 18px; }
    .signup-grid { grid-template-columns: 1fr; gap: 30px; }
    .signup-grid h2 { font-size: 36px; line-height: 1.18; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-nav { padding-top: 24px; }
    .taxonomy-grid, .author-grid { grid-template-columns: 1fr; gap: 28px; }
    .archive-heading h1, .taxonomy-header h1, .page-header h1 { font-size: 52px; }
    .article-header { padding-block: 64px; }
    .article-header-grid { display: block; }
    .article-kicker { flex-direction: row; margin-bottom: 24px; }
    .article-title-wrap h1 { font-size: 38px; line-height: 1.16; }
    .article-deck { margin-block: 28px; font-size: 17px; line-height: 1.85; }
    .article-byline { align-items: flex-start; flex-direction: column; }
    .article-cover { margin-top: 0; }
    .article-layout { display: block; padding-block: 64px 88px; }
    .article-rail { display: none; }
    .gh-content { font-size: 17px; line-height: 1.85; }
    .gh-content h2 { font-size: 27px; }
    .gh-content h3 { font-size: 21px; }
    .gh-content .kg-width-wide { width: calc(100vw - 24px); }
    .gh-content .kg-bookmark-card a { grid-template-columns: 1fr; }
    .gh-content .kg-bookmark-thumbnail { aspect-ratio: 16 / 9; }
    .article-footer { align-items: flex-start; flex-direction: column; }
    .related-grid { grid-template-columns: 1fr; }
    .related-story { min-height: 0; }
    .post-subscribe-inner { align-items: flex-start; flex-direction: column; }
    .post-template .site-footer .footer-grid { grid-template-columns: 1fr; }
    .post-template .site-footer .footer-meta { text-align: left; }
    .error-grid { grid-template-columns: 1fr; gap: 40px; }
    .error-code { font-size: 120px; }
    .error-grid h1 { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
    .site-header, .site-footer, .reading-progress, .article-rail, .signup-band, .related-band, .comments-band { display: none !important; }
    body { background: #fff; }
    .article-layout { display: block; padding-top: 20px; }
    .article-header { padding-bottom: 20px; }
}