/* Range's Blog — a Korean technical journal with a restrained editorial frame. */

:root {
    --blog-bg: #f4f3ee;
    --blog-surface: #fcfbf7;
    --blog-ink: #20292d;
    --blog-muted: #5c686b;
    /* Keep secondary metadata above the WCAG AA 4.5:1 threshold on paper. */
    --blog-faint: #5c686b;
    --blog-rule: #d2d5d0;
    --blog-accent: #285f78;
    --blog-accent-strong: #1d4a60;
    --blog-accent-soft: #e6eef0;
    --blog-code-bg: #17252d;
    --blog-code-ink: #eef4f2;
    --blog-focus: #b75b42;
    --blog-content: 760px;
    --blog-wide: 1120px;
    --blog-gutter: clamp(1rem, 3vw, 2rem);
    --blog-radius: 2px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-blog-theme="light"]) {
        --blog-bg: #182228;
        --blog-surface: #202d34;
        --blog-ink: #eef2ef;
        --blog-muted: #bec9c9;
        --blog-faint: #aebcbe;
        --blog-rule: #3c4b52;
        --blog-accent: #8fc4d1;
        --blog-accent-strong: #b3dbe1;
        --blog-accent-soft: #263e47;
        --blog-focus: #f1a27f;
        color-scheme: dark;
    }
}

:root[data-blog-theme="dark"] {
    --blog-bg: #182228;
    --blog-surface: #202d34;
    --blog-ink: #eef2ef;
    --blog-muted: #bec9c9;
    --blog-faint: #aebcbe;
    --blog-rule: #3c4b52;
    --blog-accent: #8fc4d1;
    --blog-accent-strong: #b3dbe1;
    --blog-accent-soft: #263e47;
    --blog-focus: #f1a27f;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--blog-bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--blog-bg);
    color: var(--blog-ink);
    font-family: "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.76;
    text-rendering: optimizeLegibility;
    overflow-wrap: anywhere;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button,
input,
textarea,
select {
    color: inherit;
}

a {
    color: var(--blog-accent);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--blog-accent-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 3px solid var(--blog-focus);
    outline-offset: 3px;
}

button {
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    left: 1rem;
    margin: 0;
    padding: .65rem .85rem;
    position: fixed;
    top: 1rem;
    width: auto;
    z-index: 1000;
    background: var(--blog-surface);
    color: var(--blog-ink);
    box-shadow: 0 0 0 3px var(--blog-focus);
}

.wp-site-blocks {
    min-height: 100vh;
}

.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--blog-wide);
}

.blog-site-header {
    border-bottom: 1px solid var(--blog-rule);
    padding: .75rem var(--blog-gutter) !important;
}

.blog-site-header__inner,
.blog-footer-inner {
    width: min(100%, var(--blog-wide));
    margin-inline: auto;
}

.blog-site-header__inner {
    align-items: center;
    gap: 1.25rem;
}

.blog-site-header .wp-block-site-title,
.blog-footer-intro .wp-block-site-title {
    margin: 0;
    line-height: 1;
}

.blog-site-header .wp-block-site-title a,
.blog-footer-intro .wp-block-site-title a {
    color: var(--blog-ink);
    font-size: 1.06rem;
    font-weight: 760;
    letter-spacing: -.02em;
    text-decoration: none;
}

.blog-site-header__actions {
    align-items: center;
    gap: .7rem;
}

.blog-menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--blog-radius);
    color: var(--blog-muted);
    display: none;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.blog-menu-toggle:hover,
.blog-menu-toggle:focus-visible {
    background: var(--blog-accent-soft);
    color: var(--blog-accent-strong);
}

.blog-menu-toggle svg {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.6;
    width: 22px;
}

.blog-primary-navigation ul {
    align-items: center;
    display: flex;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-primary-navigation a {
    border-radius: var(--blog-radius);
    color: var(--blog-muted);
    font-size: .88rem;
    padding: .45rem .58rem;
    text-decoration: none;
}

.blog-primary-navigation a:hover,
.blog-primary-navigation a:focus-visible {
    background: var(--blog-accent-soft);
    color: var(--blog-accent-strong);
}

.blog-theme-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--blog-muted);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
}

.blog-theme-toggle:hover {
    background: var(--blog-accent-soft);
    color: var(--blog-accent-strong);
}

.blog-theme-toggle svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
    width: 20px;
}

main#blog-main {
    margin-inline: auto;
    padding: clamp(2.5rem, 7vw, 5.5rem) var(--blog-gutter) clamp(4rem, 8vw, 7rem);
    width: min(100%, var(--blog-wide));
}

.blog-home-main,
.blog-archive-page,
.blog-search-page,
.blog-article-body {
    margin-inline: auto !important;
    max-width: var(--blog-wide) !important;
}

.blog-home-masthead {
    align-items: end;
    border-bottom: 1px solid var(--blog-rule);
    display: grid;
    gap: clamp(2rem, 7vw, 7rem);
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr);
    margin-bottom: clamp(2.8rem, 6vw, 4.8rem);
    padding-bottom: clamp(2rem, 4vw, 3.2rem);
}

.blog-home-masthead__copy,
.blog-home-masthead__search {
    min-width: 0;
}

.blog-home-masthead__copy h1,
.blog-view-heading h1,
.blog-about-surface h1,
.blog-policy-surface h1 {
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    letter-spacing: -.06em;
    line-height: 1.12;
    margin: .55rem 0 .85rem;
    max-width: 20ch;
    overflow-wrap: normal;
    word-break: keep-all;
}

.blog-home-masthead__copy > p:last-child,
.blog-view-heading > p:last-child,
.blog-archive-description {
    color: var(--blog-muted);
    font-size: 1.02rem;
    margin: 0;
    max-width: 48rem;
}

.blog-kicker {
    color: var(--blog-accent-strong);
    font-size: .78rem;
    font-weight: 760;
    letter-spacing: .08em;
    line-height: 1.4;
    margin: 0;
}

.blog-eyebrow {
    color: var(--blog-accent-strong);
    font-size: .76rem;
    font-weight: 760;
    letter-spacing: .1em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.blog-home-masthead__search {
    border-top: 2px solid var(--blog-ink);
    padding-top: 1rem;
}

.blog-search-form {
    margin: 0;
}

.blog-search-form label {
    color: var(--blog-muted);
    display: block;
    font-size: .84rem;
    margin: .65rem 0 .45rem;
}

.blog-search-form__row {
    align-items: stretch;
    display: flex;
    gap: .5rem;
}

.blog-search-form input[type="search"] {
    background: var(--blog-surface);
    border: 1px solid var(--blog-rule);
    border-radius: var(--blog-radius);
    min-height: 46px;
    min-width: 0;
    padding: .65rem .78rem;
    width: 100%;
}

.blog-search-form input[type="search"]::placeholder {
    color: var(--blog-faint);
}

.blog-search-form button,
.blog-button {
    align-items: center;
    background: var(--blog-accent-strong);
    border: 1px solid var(--blog-accent-strong);
    border-radius: var(--blog-radius);
    color: #fffdf8;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
    padding: .65rem 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.blog-search-form button:hover,
.blog-button:hover {
    background: var(--blog-accent);
    border-color: var(--blog-accent);
    color: #fffdf8;
}

.blog-button--secondary {
    background: transparent;
    border-color: var(--blog-rule);
    color: var(--blog-ink);
}

.blog-button--secondary:hover {
    background: var(--blog-accent-soft);
    border-color: var(--blog-accent);
    color: var(--blog-accent-strong);
}

.blog-home-section,
.blog-search-surface,
.blog-archive-surface {
    min-width: 0;
}

.blog-section-heading,
.blog-view-heading {
    margin-bottom: 1.25rem;
}

.blog-home-section-heading {
    align-items: end;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.blog-home-section-heading h2 {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -.05em;
    line-height: 1.2;
    margin: .35rem 0 0;
}

.blog-home-section-heading a {
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .2rem;
    text-decoration: none;
}

.blog-section-heading h2 {
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    letter-spacing: -.04em;
    line-height: 1.25;
    margin: .35rem 0 0;
}

.blog-section-heading > p:last-child {
    color: var(--blog-muted);
    margin: .4rem 0 0;
}

.blog-editorial-feed {
    border-top: 1px solid var(--blog-rule);
}

.blog-feed-item {
    align-items: start;
    border-bottom: 1px solid var(--blog-rule);
    display: grid;
    gap: clamp(1rem, 3vw, 2.25rem);
    grid-template-columns: minmax(0, 1fr);
    padding: 1.45rem 0 1.6rem;
}

.blog-feed-item--has-image {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem);
}

.blog-feed-item--feature {
    padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3.25rem);
}

.blog-feed-item--feature.blog-feed-item--has-image {
    grid-template-columns: minmax(0, 1.08fr) minmax(16rem, .92fr);
}

.blog-feed-item__image {
    aspect-ratio: 4 / 3;
    margin: 0;
    order: 2;
    overflow: hidden;
}

.blog-feed-item--feature .blog-feed-item__image {
    aspect-ratio: 5 / 3;
}

.blog-feed-item__image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.blog-feed-item__body {
    min-width: 0;
}

.blog-feed-item__category {
    color: var(--blog-accent-strong);
    font-size: .78rem;
    font-weight: 700;
    margin: 0 0 .42rem;
}

.blog-feed-item__category a {
    color: inherit;
}

.blog-feed-item__title {
    font-size: clamp(1.3rem, 2.8vw, 1.85rem);
    letter-spacing: -.045em;
    line-height: 1.32;
    margin: 0;
    overflow-wrap: normal;
    word-break: keep-all;
}

.blog-feed-item--feature .blog-feed-item__title {
    font-size: clamp(1.7rem, 3.5vw, 2.75rem);
    line-height: 1.2;
    max-width: 19ch;
}

.blog-feed-item__title a {
    color: var(--blog-ink);
    text-decoration: none;
}

.blog-feed-item__title a:hover {
    color: var(--blog-accent-strong);
}

.blog-feed-item__excerpt {
    color: var(--blog-muted);
    margin: .65rem 0 0;
    max-width: 62ch;
}

.blog-feed-item__meta,
.blog-result-count {
    align-items: center;
    color: var(--blog-faint);
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    gap: .45rem .8rem;
    margin: .85rem 0 0;
}

.blog-feed-item__meta span + span::before,
.blog-feed-item__meta time + span::before {
    color: var(--blog-rule);
    content: "·";
    margin-right: .8rem;
}

.blog-home-more {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.15rem;
    margin-top: 1.35rem;
    padding-top: .15rem;
}

.blog-home-more a,
.blog-footer-links a {
    font-size: .88rem;
    font-weight: 650;
}

.blog-view-heading {
    max-width: 58rem;
}

.blog-view-heading h1 {
    max-width: none;
}

.blog-view-heading + .blog-search-form,
.blog-archive-surface > .blog-search-form {
    margin: 2rem 0 2.25rem;
    max-width: 34rem;
}

.blog-directory,
.blog-archive-list,
.blog-policy-links {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}

.blog-directory {
    border-top: 1px solid var(--blog-rule);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-directory li,
.blog-archive-list li {
    border-bottom: 1px solid var(--blog-rule);
}

.blog-directory a,
.blog-archive-list a {
    align-items: baseline;
    color: var(--blog-ink);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem .15rem;
    text-decoration: none;
}

.blog-directory a:hover,
.blog-archive-list a:hover {
    color: var(--blog-accent-strong);
}

.blog-directory small,
.blog-archive-list small {
    color: var(--blog-faint);
    font-size: .78rem;
    white-space: nowrap;
}

.blog-archive-list {
    max-width: 44rem;
}

.blog-empty-state {
    border-top: 1px solid var(--blog-rule);
    border-bottom: 1px solid var(--blog-rule);
    padding: 2rem 0;
}

.blog-empty-state h2 {
    font-size: 1.35rem;
    letter-spacing: -.03em;
    margin: 0;
}

.blog-empty-state p {
    color: var(--blog-muted);
    margin: .45rem 0 0;
}

.blog-about-surface,
.blog-policy-surface {
    max-width: var(--blog-content);
}

.blog-about-surface h1,
.blog-policy-surface h1 {
    max-width: 18ch;
}

.blog-about-lead {
    color: var(--blog-muted);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.65;
    margin: 0 0 3rem;
}

.blog-about-grid,
.blog-policy-sections {
    border-top: 1px solid var(--blog-rule);
    display: grid;
    gap: 0 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-about-grid section,
.blog-policy-sections section {
    border-bottom: 1px solid var(--blog-rule);
    padding: 1.35rem 0 1.5rem;
}

.blog-about-grid h2,
.blog-policy-sections h2 {
    font-size: 1rem;
    margin: 0 0 .4rem;
}

.blog-about-grid p,
.blog-policy-sections p {
    color: var(--blog-muted);
    font-size: .94rem;
    margin: 0;
}

.blog-about-surface > h2 {
    font-size: 1.25rem;
    margin: 3rem 0 0;
}

.blog-policy-links {
    border-top: 1px solid var(--blog-rule);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-policy-links li {
    border-bottom: 1px solid var(--blog-rule);
    padding: .85rem .1rem;
}

.blog-policy-back {
    margin-top: 2rem;
}

.blog-article-body {
    --article-measure: var(--blog-content);
}

.blog-article-header,
.blog-article-body > .wp-block-post-content,
.blog-article-body > .blog-toc,
.blog-article-body > .blog-article-actions,
.blog-article-body > .blog-article-navigation,
.blog-article-body > .blog-article-feedback,
.blog-article-body > .blog-related-posts,
.blog-article-body > .wp-block-pattern,
.blog-article-body > .wp-block-template-part {
    margin-inline: auto;
    max-width: var(--article-measure);
}

.blog-article-header {
    margin-bottom: 2.5rem;
}

.blog-article-header h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    letter-spacing: -.045em;
    line-height: 1.18;
    margin: .55rem 0 1.35rem;
    overflow-wrap: normal;
    word-break: keep-all;
}

.blog-article-lead {
    color: var(--blog-muted);
    font-size: clamp(1.06rem, 2vw, 1.24rem);
    line-height: 1.7;
    margin: 1.2rem 0 0;
}

.blog-article-meta {
    align-items: baseline;
    border-bottom: 1px solid var(--blog-rule);
    border-top: 1px solid var(--blog-rule);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.3rem;
    margin: 0;
    padding: .8rem 0;
}

.blog-article-meta > div {
    display: flex;
    gap: .35rem;
}

.blog-article-meta dt {
    color: var(--blog-faint);
    font-size: .78rem;
}

.blog-article-meta dd {
    font-size: .84rem;
    margin: 0;
}

.blog-article-featured-image {
    margin: 2rem 0 0;
}

.blog-article-featured-image img {
    display: block;
    max-height: 38rem;
    object-fit: cover;
    width: 100%;
}

.blog-toc {
    border-bottom: 1px solid var(--blog-rule);
    border-top: 1px solid var(--blog-rule);
    margin-bottom: 2.5rem !important;
    padding: .9rem 0;
}

.blog-toc summary {
    color: var(--blog-accent-strong);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 700;
    list-style-position: outside;
}

.blog-toc ol {
    margin: .8rem 0 .2rem 1.2rem;
    padding: 0;
}

.blog-toc li {
    margin: .25rem 0;
    padding-left: .2rem;
}

.blog-toc-level-3 {
    margin-left: .8rem !important;
}

.blog-toc-level-4 {
    margin-left: 1.6rem !important;
}

.wp-block-post-content {
    font-size: 1.03rem;
    line-height: 1.86;
}

.wp-block-post-content > * {
    max-width: var(--article-measure);
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    letter-spacing: -.04em;
    line-height: 1.34;
    margin-bottom: .8rem;
    margin-top: 2.8rem;
}

.wp-block-post-content h2 {
    font-size: clamp(1.55rem, 3vw, 2.05rem);
}

.wp-block-post-content h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}

.wp-block-post-content h4 {
    font-size: 1.15rem;
}

.wp-block-post-content p,
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-post-content blockquote {
    margin-bottom: 1.25rem;
    margin-top: 1.25rem;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
    padding-left: 1.35rem;
}

.wp-block-post-content li + li {
    margin-top: .35rem;
}

.wp-block-post-content blockquote {
    border-left: 3px solid var(--blog-accent);
    color: var(--blog-muted);
    padding-left: 1rem;
}

.wp-block-post-content code,
.wp-block-post-content pre,
.wp-block-post-content kbd {
    font-family: ui-monospace, SFMono-Regular, "D2Coding", "Nanum Gothic Coding", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .9em;
}

.wp-block-post-content :not(pre) > code,
.wp-block-post-content kbd {
    background: var(--blog-accent-soft);
    border-radius: 3px;
    padding: .12em .3em;
}

.wp-block-post-content pre,
.wp-block-code {
    background: var(--blog-code-bg) !important;
    border-radius: var(--blog-radius);
    color: var(--blog-code-ink) !important;
    margin-bottom: 1.6rem;
    margin-top: 1.6rem;
    max-width: none;
    overflow-x: auto;
    padding: 1rem 1.1rem;
    tab-size: 4;
    white-space: pre;
}

.wp-block-post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.blog-code-shell,
.blog-code-block {
    margin-bottom: 1.6rem;
    margin-top: 1.6rem;
}

.blog-code-shell .wp-block-code,
.blog-code-block .wp-block-code {
    margin-bottom: 0;
    margin-top: .45rem;
}

.blog-copy-button {
    background: var(--blog-code-bg);
    border: 1px solid var(--blog-code-bg);
    border-radius: 999px;
    color: var(--blog-code-ink);
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    min-height: 32px;
    padding: .35rem .75rem;
}

.blog-copy-button:hover {
    background: var(--blog-accent-strong);
    border-color: var(--blog-accent-strong);
}

.wp-block-post-content .wp-block-table {
    margin: 1.6rem 0;
    max-width: 100%;
    overflow-x: auto;
}

.wp-block-post-content table {
    border-collapse: collapse;
    min-width: 34rem;
    width: 100%;
}

.wp-block-post-content th,
.wp-block-post-content td {
    border: 1px solid var(--blog-rule);
    padding: .65rem .75rem;
    text-align: left;
    vertical-align: top;
}

.wp-block-post-content th {
    background: var(--blog-accent-soft);
    font-weight: 700;
}

.blog-article-actions {
    align-items: center;
    border-bottom: 1px solid var(--blog-rule);
    border-top: 1px solid var(--blog-rule);
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 3rem;
    padding: .9rem 0;
}

.blog-article-actions .blog-button {
    min-height: 40px;
    padding: .5rem .8rem;
}

.blog-action-status {
    color: var(--blog-muted);
    font-size: .84rem;
    margin: 0;
}

.blog-article-navigation {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 3rem;
}

.blog-article-navigation__item {
    border-top: 1px solid var(--blog-rule);
    color: var(--blog-ink);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .9rem 0;
    text-decoration: none;
}

.blog-article-navigation__item--next {
    text-align: right;
}

.blog-article-navigation__item span {
    color: var(--blog-faint);
    font-size: .78rem;
}

.blog-article-navigation__item strong {
    font-size: 1rem;
    line-height: 1.45;
}

.blog-article-feedback {
    align-items: center;
    background: var(--blog-surface);
    border: 1px solid var(--blog-rule);
    border-radius: var(--blog-radius);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-top: 3rem;
    padding: 1.2rem 1.25rem;
}

.blog-article-feedback h2 {
    font-size: 1.05rem;
    letter-spacing: -.025em;
    margin: .25rem 0;
}

.blog-article-feedback p:not(.blog-eyebrow):not(.blog-action-status) {
    color: var(--blog-muted);
    font-size: .84rem;
    margin: 0;
}

.blog-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.blog-feedback-actions button {
    background: transparent;
    border: 1px solid var(--blog-rule);
    border-radius: var(--blog-radius);
    font-size: .82rem;
    min-height: 40px;
    padding: .45rem .7rem;
}

.blog-feedback-actions button:hover,
.blog-feedback-actions button[aria-pressed="true"] {
    background: var(--blog-accent-soft);
    border-color: var(--blog-accent);
    color: var(--blog-accent-strong);
}

.blog-related-posts {
    margin-top: 4rem;
}

.blog-related-posts .blog-feed-item__title {
    font-size: 1.2rem;
}

.blog-related-posts .blog-feed-item__excerpt {
    display: none;
}

.blog-footer {
    border-top: 1px solid var(--blog-rule);
}

.blog-site-footer {
    margin-top: 0;
    padding: 2.5rem var(--blog-gutter) 3rem !important;
}

.blog-footer-inner {
    display: grid;
    gap: 1.2rem 3rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.blog-footer-intro p,
.blog-footer-trust,
.blog-footer-copyright {
    color: var(--blog-muted);
    font-size: .84rem;
    margin: .45rem 0 0;
    max-width: 35rem;
}

.blog-footer-links {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    justify-content: flex-end;
}

.blog-footer-links a {
    color: var(--blog-muted);
    text-decoration: none;
}

.blog-footer-links a:hover {
    color: var(--blog-accent-strong);
}

.blog-footer-trust,
.blog-footer-copyright {
    grid-column: 1 / -1;
}

.blog-footer-copyright {
    border-top: 1px solid var(--blog-rule);
    padding-top: 1rem;
}

.blog-pagination {
    margin-top: 2rem;
}

.blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-pagination a,
.blog-pagination span {
    align-items: center;
    border: 1px solid var(--blog-rule);
    border-radius: var(--blog-radius);
    display: inline-flex;
    min-height: 40px;
    padding: .35rem .7rem;
    text-decoration: none;
}

.blog-pagination .current {
    background: var(--blog-accent-soft);
    border-color: var(--blog-accent);
    color: var(--blog-accent-strong);
}

.blog-ad-slot,
.blog-affiliate-disclosure {
    border-top: 1px solid var(--blog-rule);
    color: var(--blog-faint);
    font-size: .8rem;
    margin: 3rem auto 0;
    max-width: var(--blog-content);
    padding-top: 1rem;
}

.blog-ad-slot {
    min-height: 122px;
    position: relative;
}

.blog-ad-slot[data-slot="article-sidebar"] {
    min-height: 280px;
}

.blog-ad-slot__label {
    display: block;
    font-size: .68rem;
    letter-spacing: .08em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.blog-ad-slot .adsbygoogle {
    display: block;
    min-height: 90px;
    width: 100%;
}

@media (max-width: 767px) {
    .blog-site-header__inner,
    .blog-site-header__actions {
        align-items: flex-start;
    }

    .blog-site-header__inner {
        gap: .7rem;
    }

    .blog-site-header__actions {
        gap: .25rem;
    }

    .blog-menu-toggle {
        display: inline-flex;
    }

    .blog-primary-navigation {
        position: relative;
    }

    .blog-primary-navigation ul {
        background: var(--blog-surface);
        border: 1px solid var(--blog-rule);
        display: none;
        gap: .15rem;
        min-width: 10rem;
        padding: .4rem;
        position: absolute;
        right: 0;
        top: calc(100% + .45rem);
        z-index: 20;
    }

    .blog-primary-navigation.is-open ul {
        display: block;
    }

    .blog-primary-navigation a {
        display: block;
        font-size: .9rem;
        padding: .55rem .7rem;
    }

    .blog-home-masthead {
        display: block;
        margin-bottom: 3.25rem;
    }

    .blog-home-masthead__search {
        margin-top: 2rem;
    }

    .blog-home-section-heading {
        align-items: start;
        display: block;
    }

    .blog-home-section-heading a {
        display: inline-block;
        margin-top: .7rem;
    }

    .blog-about-grid,
    .blog-policy-sections {
        display: block;
    }

    .blog-directory,
    .blog-policy-links {
        grid-template-columns: 1fr;
    }

    .blog-feed-item--has-image {
        grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem);
    }

    .blog-feed-item--feature.blog-feed-item--has-image {
        grid-template-columns: minmax(0, 1fr) minmax(9rem, .72fr);
    }

    .blog-feed-item__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .blog-article-feedback,
    .blog-footer-inner {
        display: block;
    }

    .blog-feedback-actions {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .blog-footer-links {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .blog-footer-trust {
        margin-top: 1.25rem;
    }
}

@media (max-width: 420px) {
    main#blog-main {
        padding-top: 2.25rem;
    }

    .blog-site-header__inner {
        align-items: center;
        display: flex;
    }

    .blog-site-header__actions {
        margin-top: 0;
        width: auto;
    }

    .blog-primary-navigation {
        min-width: 0;
    }

    .blog-feed-item--has-image {
        align-items: start;
        display: block;
    }

    .blog-feed-item--has-image .blog-feed-item__image {
        float: right;
        margin: .15rem 0 .5rem 1rem;
        width: 7.25rem;
    }

    .blog-feed-item__title {
        font-size: 1.28rem;
    }

    .blog-feed-item--feature .blog-feed-item__title {
        font-size: 1.62rem;
    }

    .blog-search-form__row {
        display: block;
    }

    .blog-search-form button {
        margin-top: .5rem;
        width: 100%;
    }

    .blog-article-header h1,
    .blog-home-masthead__copy h1,
    .blog-view-heading h1 {
        font-size: 2rem;
    }

    .blog-article-navigation {
        display: block;
    }

    .blog-article-navigation__item--next {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}