body.editorial-page {
    --editorial-bg: transparent;
    --editorial-surface: color-mix(in srgb, var(--theme-surface) 74%, transparent);
    --editorial-surface-strong: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-bg-1) 8%);
    --editorial-ink: var(--theme-ink);
    --editorial-muted: var(--theme-muted);
    --editorial-rule: var(--theme-border);
    --editorial-accent: var(--theme-accent);
    --editorial-title-alpha: 0.5;
    --editorial-rule-thin: 1px solid var(--editorial-rule);
    --editorial-rule-thick: 2px solid var(--editorial-rule);
    --editorial-shell-width: min(1280px, calc(100% - (var(--outer-margin, 1rem) * 2)));
    margin: 0;
    min-height: 100vh;
    display: block;
    background: var(--editorial-bg);
    color: var(--editorial-ink);
    font-family: "Barlow", system-ui, sans-serif;
    font-size: var(--font-body, 1rem);
    line-height: var(--line-height-body, 1.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.editorial-page::before,
body.editorial-page::after {
    display: none;
}

.editorial-page
    :is(
        main,
        section,
        article,
        aside,
        header,
        footer,
        div,
        p,
        li,
        dt,
        dd,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        blockquote,
        cite,
        a,
        span
    ) {
    color: inherit;
}

.editorial-shell {
    width: var(--editorial-shell-width);
    margin: 0 auto;
    padding-block: calc(var(--rhythm, 1.25rem) * 2.5);
}

.editorial-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--gutter, 2rem);
    margin-bottom: calc(var(--rhythm, 1.25rem) * 2);
    padding-block: calc(var(--rhythm, 1.25rem) * 1.1) calc(var(--rhythm, 1.25rem) * 0.85);
    border-top: var(--editorial-rule-thick);
    border-bottom: var(--editorial-rule-thin);
}

.editorial-kicker,
.editorial-meta,
.editorial-subtitle,
.editorial-label,
.editorial-eyebrow,
.editorial-caption,
.editorial-anchor-list a {
    font-family: "Noto Sans Mono", monospace;
    font-size: var(--font-small, 0.875rem);
    line-height: var(--line-height-small, 1.4);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.editorial-kicker,
.editorial-subtitle,
.editorial-caption {
    color: var(--editorial-muted);
}

.styleguide-kicker {
    font-weight: 300;
}

.site-logotype {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: "Barlow", system-ui, sans-serif;
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.footer-logotype {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: "Barlow", system-ui, sans-serif;
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.footer-logotype__first,
.footer-logotype__last {
    display: inline-block;
    transition: all 220ms ease;
}

.footer-logotype__first {
    font-weight: 400;
    letter-spacing: 0.04em;
}

.footer-logotype__last {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.site-logotype__first,
.site-logotype__last {
    display: inline-block;
    transition: all 220ms ease;
}

.site-logotype__first {
    font-weight: 400;
    letter-spacing: 0.04em;
}

.site-logotype__last {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.editorial-kicker,
.editorial-title,
.editorial-subtitle,
.editorial-lead,
.editorial-meta {
    margin: 0;
}

.editorial-page .editorial-title {
    max-width: 12ch;
    font-size: clamp(2.8rem, 8vw, 5.8rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    font-weight: 700;
    color: color-mix(
        in srgb,
        var(--editorial-ink) calc(var(--editorial-title-alpha) * 100%),
        transparent
    );
    text-transform: uppercase;
    text-wrap: balance;
}

.editorial-subtitle {
    margin-top: 0.45rem;
}

.editorial-lead {
    max-width: 44rem;
    margin-top: calc(var(--rhythm, 1.25rem) * 1.35);
    color: var(--editorial-muted);
    font-size: var(--font-h5, 1.125rem);
    line-height: var(--line-height-h5, 1.4);
}

.editorial-meta {
    text-align: right;
    white-space: nowrap;
    color: var(--editorial-muted);
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter, 2rem);
    align-items: start;
}

.editorial-grid > * {
    grid-column: span 12;
}

.editorial-main {
    grid-column: span 8;
}

.editorial-aside {
    grid-column: span 4;
}

.editorial-panel {
    padding-block: calc(var(--rhythm, 1.25rem) * 1.1);
    border-top: var(--editorial-rule-thick);
    border-bottom: var(--editorial-rule-thin);
}

/* .editorial-panel + .editorial-panel {
    border-top: 0;
} */

.editorial-panel--boxed {
    padding: calc(var(--rhythm, 1.25rem) * 1.1);
    border: var(--editorial-rule-thick);
    background: var(--editorial-surface-strong);
    /* box-shadow: var(--theme-shadow); */
}

.editorial-panel--soft {
    padding: calc(var(--rhythm, 1.25rem) * 1.1);
    border: var(--editorial-rule-thin);
    background: var(--editorial-surface);
}

.editorial-section-title {
    margin: 0 0 calc(var(--rhythm, 1.25rem) * 0.5);
    font-size: var(--font-h3, 1.6rem);
    line-height: var(--line-height-h3, 1.2);
    text-wrap: balance;
}

.editorial-body > :first-child,
.editorial-richtext > :first-child,
.editorial-list > :first-child {
    margin-top: 0;
}

.editorial-body > :last-child,
.editorial-richtext > :last-child,
.editorial-list > :last-child {
    margin-bottom: 0;
}

.editorial-richtext {
    max-width: 72ch;
}

.editorial-richtext p,
.editorial-richtext ul,
.editorial-richtext ol,
.editorial-richtext dl {
    margin-block: calc(var(--rhythm, 1.25rem) * 0.6);
}

.editorial-richtext p,
.editorial-richtext li,
.editorial-richtext dd {
    color: var(--editorial-muted);
}

.editorial-richtext strong,
.editorial-richtext h1,
.editorial-richtext h2,
.editorial-richtext h3,
.editorial-richtext dt {
    color: var(--editorial-ink);
}

.editorial-richtext a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, var(--editorial-accent) 55%, currentColor);
}

.editorial-list {
    display: grid;
    gap: calc(var(--rhythm, 1.25rem) * 0.75);
}

.editorial-list-item {
    display: grid;
    gap: 0.25rem;
    padding-top: calc(var(--rhythm, 1.25rem) * 0.75);
    border-top: var(--editorial-rule-thin);
}

.editorial-list-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.editorial-anchor-list {
    display: grid;
    gap: 0.5rem;
}

.editorial-anchor-list a {
    text-decoration: none;
}

.editorial-anchor-list a:hover,
.editorial-anchor-list a:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--editorial-accent);
}

.editorial-note {
    color: var(--editorial-muted);
    font-size: var(--font-small, 0.875rem);
    line-height: var(--line-height-small, 1.4);
}

.editorial-footer {
    margin-top: calc(var(--rhythm, 1.25rem) * 2.25);
    padding-block: calc(var(--rhythm, 1.25rem) * 0.8) calc(var(--rhythm, 1.25rem) * 1.4);
    border-top: var(--editorial-rule-thick);
    color: var(--editorial-muted);
}

.editorial-footer__inner {
    width: var(--editorial-shell-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
}

.quote-specimen {
    display: grid;
    gap: calc(var(--rhythm, 1.25rem) * 1);
}

.quote-specimen__rule {
    height: 0;
    border-top: var(--editorial-rule-thin);
}

.quote-specimen__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter, 2rem);
}

.quote-specimen__text {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, var(--font-h3, 1.6rem));
    line-height: var(--line-height-h3, 1.25);
}

.quote-specimen__text--translation,
.quote-specimen__meta,
.quote-specimen__meta a {
    color: var(--editorial-muted);
}

.quote-specimen__meta {
    max-width: 40rem;
    font-size: var(--font-small, 0.875rem);
    line-height: var(--line-height-small, 1.4);
}

.quote-specimen__meta cite {
    font-style: normal;
}

.editorial-page .mono {
    font-family: "Noto Sans Mono", monospace;
}

/* Navigation System Demo */
.site-nav {
    display: flex;
    gap: 0.25rem;
    padding: var(--rhythm, 1.25rem) 0;
    border-bottom: var(--editorial-rule-thin);
}

.site-nav--minimal {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.site-nav__theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border: 1px solid var(--editorial-rule);
    border-radius: 0.3rem;
    background: transparent;
    color: var(--editorial-muted);
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 200ms ease;
}

.site-nav__theme-btn:hover {
    color: var(--editorial-ink);
    border-color: var(--editorial-ink);
    background: var(--editorial-surface-strong);
}

.site-nav__theme-btn:active {
    transform: scale(0.95);
}

.site-nav__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--editorial-ink);
    text-transform: lowercase;
    letter-spacing: 0.01em;
}

.site-nav__brand .site-logotype__first {
    font-weight: 400;
    letter-spacing: 0.04em;
}

.site-nav__brand .site-logotype__last {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.site-nav__meta {
    font-family: "Noto Sans Mono", monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--editorial-muted);
    margin: 0;
    white-space: nowrap;
}

.site-nav__list {
    display: flex;
    gap: var(--rhythm, 1.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    font-family: "Noto Sans Mono", monospace;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--editorial-muted);
    transition: color 200ms ease;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.site-nav__link:hover {
    color: var(--editorial-ink);
}

.site-nav__link[aria-current="page"] {
    color: var(--editorial-ink);
    border-bottom-color: var(--editorial-ink);
}

@media (max-width: 72rem) {
    .editorial-header {
        grid-template-columns: 1fr;
    }

    .editorial-meta {
        text-align: left;
        white-space: normal;
    }

    .editorial-main,
    .editorial-aside {
        grid-column: span 12;
    }
}

@media (max-width: 56rem) {
    .editorial-shell {
        width: min(calc(100% - 1.5rem), 1280px);
        padding-block: calc(var(--rhythm, 1.25rem) * 1.75);
    }

    .quote-specimen__body {
        grid-template-columns: 1fr;
        gap: calc(var(--rhythm, 1.25rem) * 0.85);
    }

    .editorial-title {
        max-width: 100%;
    }

    .logotype-style-switcher {
        top: auto;
        bottom: 1rem;
        right: 1rem;
    }
}