@import url("/vendor/fontawesome/css/fontawesome.min-738ecf1f94230dc19ceea8a036f18831a85bf81f49503dc855e3ad8c5cccb82c.css");
@import url("/vendor/fontawesome/css/solid.min-738ecf1f94230dc19ceea8a036f18831a85bf81f49503dc855e3ad8c5cccb82c.css");

:root {
    --paper: #f3eedf;
    --paper-dark: #e7dfcb;
    --paper-raised: #faf6ea;
    --paper-inset: #ece4d2;
    --ink: #211f1a;
    --ink-soft: #5b574e;
    --ink-faint: #7b7467;
    --rule: #3a372f;
    --rule-light: #a59e8e;
    --rule-faint: #cdc5b4;
    --accent: #7a2f24;
    --accent-dark: #5f2119;
    --control-focus: var(--accent);
    --positive: #315f36;
    --positive-dark: #244a2a;
    --brand-font: Georgia, "Times New Roman", "Songti SC", STSong, serif;
    --regular-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    --ui-font: var(--regular-font);
    --title-font: var(--regular-font);
    --body-font: var(--regular-font);
    --form-control-height: 44px;
    --compact-control-height: 36px;
    --control-gap: 8px;
    --page-width: 1240px;
    --reading-width: 800px;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

img {
    object-fit: contain;
}

/* Phase 9 · server-sanitized advertising */
.ad-slot {
    min-height: 112px;
    margin: 30px 0;
    padding: 14px 18px 18px;
    border-top: 3px double var(--rule);
    border-bottom: 1px solid var(--rule);
    background: rgb(231 223 203 / 0.5);
    text-align: center;
}

.ad-slot-label {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font: 700 0.62rem/1.3 var(--ui-font);
    letter-spacing: 0.16em;
}

.ad-slot-content {
    display: grid;
    min-height: 58px;
    place-content: center;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-family: var(--ui-font);
    font-size: 0.84rem;
}

.ad-slot-content > :first-child {
    margin-top: 0;
}

.ad-slot-content > :last-child {
    margin-bottom: 0;
}

.ad-slot-content a {
    color: var(--accent);
    font-weight: 700;
    text-underline-offset: 3px;
}

.ad-slot-content img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 240px;
}

.device-detail-sidebar {
    display: grid;
    align-self: start;
    gap: 24px;
}

.device-detail-sidebar .ad-slot,
.resource-content-grid > aside .ad-slot {
    min-height: 180px;
    margin: 0;
}

/* Phase 5 · device archive */
.device-index,
.device-shell main {
    padding-bottom: 40px;
}

/* Phase 6 · resource archive and protected downloads */
.resource-list {
    border-top: 3px double var(--rule);
}

.resource-list > article {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--rule-light);
}

.resource-list img,
.resource-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border: 1px solid var(--rule-light);
}

.resource-list h2 {
    margin: 10px 0;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.resource-list p,
.resource-deck,
.download-panel > p,
.copyright-panel p {
    color: var(--ink-soft);
}

.resource-list time,
.resource-type-line {
    font-family: var(--ui-font);
}

.resource-list time {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.resource-type-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.resource-type-line span {
    padding: 3px 7px;
    border: 1px solid var(--rule-light);
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.resource-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: clamp(30px, 6vw, 72px);
    align-items: center;
    padding: clamp(34px, 6vw, 72px) 0;
    border-bottom: 3px double var(--rule);
}

.resource-hero h1 {
    margin: 14px 0 18px;
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    letter-spacing: -0.04em;
}

.resource-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.48fr);
    gap: clamp(30px, 6vw, 76px);
    padding: 48px 0;
}

.resource-content-grid > aside {
    display: grid;
    align-content: start;
    gap: 24px;
}

.download-panel,
.resource-metadata,
.copyright-panel {
    border-top: 4px double var(--rule);
    border-bottom: 1px solid var(--rule);
    background: rgb(231 223 203 / 0.45);
}

.download-panel,
.resource-metadata {
    padding: 18px;
}

.download-panel h2,
.resource-metadata h2,
.copyright-panel h2 {
    margin-bottom: 14px;
    font-size: 1.3rem;
}

.download-panel ol {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.download-panel li {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--rule-light);
    background: var(--paper);
    font-family: var(--ui-font);
}

.download-panel li > .download-title {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-weight: 750;
}

.download-panel li > .download-action {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--positive-dark);
    background: var(--positive);
    color: var(--paper-raised);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color 150ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.download-panel li > .download-action:hover {
    background: var(--positive-dark);
    color: var(--paper-raised);
}

.download-panel > .download-permission {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--ink-soft);
    font-family: var(--ui-font);
    font-size: 0.72rem;
    line-height: 1.5;
}

.download-panel li > .download-action.is-locked {
    border-color: var(--rule-light);
    background: var(--paper-raised);
    color: var(--ink);
    letter-spacing: normal;
}

.download-panel li > .download-action.is-locked:hover {
    border-color: var(--rule);
    background: var(--paper);
}

.download-panel li > .download-action:active {
    transform: scale(0.985);
}

.download-panel li > .download-action.is-authorizing {
    cursor: wait;
    opacity: 0.72;
    pointer-events: none;
}

.download-panel li > .download-action .fa-solid {
    font-size: 0.84rem;
}

.download-panel li span,
.download-panel li small,
.download-panel li code {
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: 0.67rem;
}

.download-panel li > .download-action span {
    color: inherit;
    font-size: inherit;
}

/* Phase 28 · calm local-download receipt */
.download-feedback-dialog {
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 3px double var(--rule);
    border-radius: 0;
    background: var(--paper-raised);
    color: var(--ink);
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    transition:
        opacity 200ms var(--ease-out),
        transform 200ms var(--ease-out);
}

.download-feedback-dialog[open]:not(.is-entering, .is-closing) {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.download-feedback-dialog.is-closing {
    pointer-events: none;
}

.download-feedback-dialog::backdrop {
    background-color: rgb(33 31 26 / 0%);
    transition: background-color 200ms var(--ease-out);
}

.download-feedback-dialog[open]:not(.is-entering, .is-closing)::backdrop {
    background-color: rgb(33 31 26 / 44%);
}

.download-feedback-content {
    position: relative;
    padding: 28px;
    font-family: var(--ui-font);
}

.download-feedback-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 40px;
    min-height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out),
        color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.download-feedback-close:hover {
    border-color: var(--rule-light);
    background: var(--paper-inset);
    color: var(--accent);
}

.download-feedback-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 44px;
}

.download-feedback-status > .fa-solid {
    flex: 0 0 auto;
    color: var(--positive);
    font-size: 2.2rem;
    line-height: 1;
}

.download-feedback-status h2 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}

.download-limit-status > .fa-solid {
    color: var(--accent);
}

.download-limit-copy {
    margin-top: 14px;
}

.download-limit-copy p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.download-limit-copy strong {
    margin: 0 3px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.download-limit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.download-limit-actions > a,
.download-limit-actions > button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 0;
    font: 750 0.75rem/1.2 var(--ui-font);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 140ms var(--ease-out),
        color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.download-limit-actions > a {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper-raised);
}

.download-limit-actions > a:hover {
    background: var(--accent-dark);
    color: var(--paper-raised);
}

.download-limit-actions > button {
    border: 1px solid var(--rule-light);
    background: var(--paper-inset);
    color: var(--ink);
}

.download-limit-actions > button:hover {
    border-color: var(--rule);
    background: var(--paper-dark);
}

.download-limit-actions > button {
    grid-column: 1 / -1;
}

.download-limit-actions.has-guide > button {
    grid-column: auto;
}

.download-limit-actions > a:active,
.download-limit-actions > button:active {
    transform: scale(0.97);
}

.download-limit-copy [hidden],
.download-limit-status [hidden],
.download-limit-actions [hidden] {
    display: none !important;
}

.download-feedback-content > p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.download-feedback-status + #download-feedback-body {
    margin-top: 14px;
}

.download-feedback-content > .download-feedback-support {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dotted var(--rule-light);
    color: var(--ink-faint);
    font-size: 0.72rem;
}

.download-feedback-confirm {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: var(--paper-raised);
    font: 750 0.76rem/1 var(--ui-font);
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.download-feedback-confirm:hover {
    background: var(--accent-dark);
}

.download-feedback-close:active,
.download-feedback-confirm:active {
    transform: scale(0.97);
}

@media (max-width: 520px) {
    .download-feedback-dialog {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
    }

    .download-feedback-content {
        padding: 24px 20px 20px;
    }

    .download-feedback-close {
        width: 44px;
        min-height: 44px;
    }

    .download-feedback-status {
        gap: 10px;
    }

    .download-feedback-status > .fa-solid {
        font-size: 2rem;
    }

    .download-feedback-status h2 {
        font-size: 1.45rem;
    }

    .download-limit-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .download-feedback-dialog {
        transform: none !important;
        transition: opacity 120ms linear;
    }

    .download-feedback-dialog::backdrop {
        transition: background-color 120ms linear;
    }

    .download-feedback-close,
    .download-feedback-confirm,
    .download-limit-actions > a,
    .download-limit-actions > button {
        transition:
            background-color 120ms linear,
            color 120ms linear;
    }
}

.resource-metadata dl {
    margin: 0;
    font-family: var(--ui-font);
}

.resource-metadata dl div {
    display: grid;
    grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
    border-top: 1px dotted var(--rule-light);
}

.resource-metadata dt,
.resource-metadata dd {
    padding: 8px 4px;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
}

.resource-metadata dd {
    margin: 0;
}

.copyright-panel {
    margin: 16px 0 48px;
    padding: 22px 24px;
}

@media (max-width: 820px) {
    .resource-hero,
    .resource-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .resource-list > article {
        grid-template-columns: 1fr;
    }
}

.device-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 2px solid var(--rule);
    border-left: 1px solid var(--rule-light);
}

.device-list > article {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr);
    gap: 22px;
    min-width: 0;
    padding: 24px;
    border-right: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
}

.device-card-image {
    display: grid;
    aspect-ratio: 4 / 3;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--rule-light);
    background: var(--paper-dark);
    color: var(--rule-light);
    font: 700 2rem/1 var(--title-font);
    text-decoration: none;
}

.device-card-image img,
.device-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.device-list h2 {
    margin-bottom: 8px;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.device-list h2 a,
.related-archive h2 a {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.device-list article > div > p:not(.section-kicker) {
    color: var(--ink-soft);
}

.device-card-meta,
.device-facts,
.device-specifications dl {
    margin: 0;
    font-family: var(--ui-font);
}

.device-card-meta div,
.device-facts div {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px dotted var(--rule-light);
    font-size: 0.72rem;
}

.device-card-meta dt,
.device-facts dt {
    min-width: 3.8em;
    color: var(--ink-soft);
    font-weight: 700;
}

.device-card-meta dd,
.device-facts dd {
    margin: 0;
}

.device-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    gap: clamp(30px, 6vw, 72px);
    align-items: center;
    padding: clamp(34px, 6vw, 72px) 0;
    border-bottom: 3px double var(--rule);
}

.device-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(2.6rem, 7vw, 6rem);
    letter-spacing: -0.045em;
}

.device-deck {
    color: var(--ink-soft);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.device-cover {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
    background: var(--paper-dark);
}

.device-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: clamp(30px, 6vw, 76px);
    padding: 48px 0;
}

.device-specifications {
    align-self: start;
    border-top: 4px double var(--rule);
    border-bottom: 1px solid var(--rule);
}

.device-specifications h2 {
    margin: 0;
    padding: 14px 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 1.25rem;
}

.device-specifications dl div {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
    border-bottom: 1px dotted var(--rule-light);
}

.device-specifications dt,
.device-specifications dd {
    padding: 10px 12px;
    overflow-wrap: anywhere;
}

.device-specifications dt {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
}

.device-specifications dd {
    margin: 0;
    font-size: 0.8rem;
}

.device-gallery,
.related-archive {
    margin: 36px 0 52px;
}

.device-gallery > div:last-child,
.related-archive > div:last-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border-top: 2px solid var(--rule);
    border-left: 1px solid var(--rule-light);
}

.device-gallery figure,
.related-archive article {
    min-width: 0;
    margin: 0;
    padding: 18px;
    border-right: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
}

.device-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border: 1px solid var(--rule-light);
}

.device-gallery figcaption {
    overflow-wrap: anywhere;
}

.device-gallery figcaption,
.related-archive time {
    margin-top: 8px;
    color: var(--ink-soft);
    font: 0.7rem/1.5 var(--ui-font);
}

.related-archive h2 {
    margin: 8px 0;
    font-size: 1.35rem;
}

.related-archive article > p:not(.section-kicker) {
    color: var(--ink-soft);
}

@media (max-width: 820px) {
    .device-list,
    .device-hero,
    .device-content-grid {
        grid-template-columns: 1fr;
    }

    .device-list > article {
        grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr);
    }

    .device-gallery > div:last-child,
    .related-archive > div:last-child {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .device-list > article,
    .device-gallery > div:last-child,
    .related-archive > div:last-child {
        grid-template-columns: 1fr;
    }
}

* {
    box-sizing: border-box;
}

html {
    color: var(--ink);
    background: #d8d0bd;
    font-family: var(--body-font);
    line-height: 1.72;
}

body {
    margin: 0;
    background:
        repeating-linear-gradient(0deg, rgb(58 55 47 / 0.025) 0, rgb(58 55 47 / 0.025) 1px, transparent 1px, transparent 4px),
        var(--paper);
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.page-shell {
    width: min(1180px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px 0 36px;
}

.skip-link {
    position: absolute;
    top: -80px;
    left: 16px;
    z-index: 10;
    padding: 8px 12px;
    color: white;
    background: var(--accent);
    font-family: var(--ui-font);
}

.skip-link:focus {
    top: 12px;
}

.masthead {
    border-top: 5px double var(--rule);
    border-bottom: 3px double var(--rule);
    text-align: center;
}

.edition-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 2px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font: 600 0.72rem/1.3 var(--ui-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand {
    display: block;
    margin-top: 12px;
    font: 700 clamp(2.6rem, 8vw, 6rem)/0.95 var(--brand-font);
    letter-spacing: -0.045em;
    text-decoration: none;
}

.tagline {
    margin: 9px 0 13px;
    color: var(--ink-soft);
    font: 600 0.72rem/1.4 var(--ui-font);
    letter-spacing: 0.18em;
}

.main-nav {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--rule);
    font: 650 0.9rem/1.2 var(--ui-font);
}

.main-nav a {
    padding: 10px clamp(10px, 3vw, 28px);
    border-right: 1px solid var(--rule-light);
    text-decoration: none;
}

.main-nav a:first-child {
    border-left: 1px solid var(--rule-light);
}

.main-nav a:hover,
.text-link:hover {
    color: var(--accent);
}

.lead-story {
    max-width: 970px;
    margin: 0 auto;
    padding: clamp(42px, 8vw, 92px) 0 clamp(36px, 6vw, 70px);
    text-align: center;
}

.section-kicker {
    margin: 0 0 12px;
    color: var(--accent);
    font: 700 0.72rem/1.3 var(--ui-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1,
h2 {
    margin-top: 0;
    font-family: var(--title-font);
    line-height: 1.18;
}

.lead-story h1 {
    margin-bottom: 20px;
    font-size: clamp(2rem, 5vw, 4.7rem);
    letter-spacing: -0.035em;
}

.lead-summary {
    max-width: 760px;
    margin: 0 auto 22px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.text-link {
    color: var(--accent);
    font: 700 0.86rem/1.4 var(--ui-font);
    letter-spacing: 0.04em;
    text-underline-offset: 4px;
}

.rule-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-soft);
    font: 700 0.68rem/1.2 var(--ui-font);
    letter-spacing: 0.16em;
}

.rule-heading::before,
.rule-heading::after {
    height: 1px;
    flex: 1;
    background: var(--rule);
    content: "";
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    border-top: 2px solid var(--rule);
    border-bottom: 2px solid var(--rule);
}

.archive-grid article {
    min-width: 0;
    padding: 28px;
    border-right: 1px solid var(--rule);
}

.archive-grid article:last-child {
    border-right: 0;
}

.archive-grid h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 2.3vw, 2rem);
}

.archive-grid p:not(.section-kicker) {
    color: var(--ink-soft);
}

.notice-strip {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 44px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-dark);
    font: 0.78rem/1.4 var(--ui-font);
}

.home-latest {
    margin: 48px 0;
}

.home-latest > div:last-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
    border-top: 2px solid var(--rule);
}

.home-latest article {
    padding: 22px;
    border-right: 1px solid var(--rule-light);
    border-bottom: 1px solid var(--rule-light);
}

.home-latest article:nth-child(3n) {
    border-right: 0;
}

.home-latest time,
.breadcrumbs,
.article-byline,
.taxonomy-line,
.pagination,
.tag-list,
.article-footer {
    font-family: var(--ui-font);
}

.home-latest time {
    color: var(--ink-soft);
    font-size: 0.7rem;
}

.home-latest h2 {
    margin: 8px 0;
    font-size: 1.3rem;
}

.home-latest h2 a,
.article-list h2 a {
    text-decoration: none;
}

.home-latest h2 a:hover,
.article-list h2 a:hover {
    color: var(--accent);
}

.home-latest p {
    margin-bottom: 0;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.article-index,
.article-detail {
    max-width: 980px;
    margin: 0 auto;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 22px 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.archive-heading {
    padding: 28px 0 30px;
    border-top: 1px solid var(--rule-light);
    border-bottom: 3px double var(--rule);
}

.archive-heading h1 {
    margin-bottom: 12px;
    font-size: clamp(2.3rem, 6vw, 5.2rem);
    letter-spacing: -0.045em;
}

.archive-heading > p:last-child {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--ink-soft);
}

.search-page {
    max-width: 980px;
    margin: 0 auto;
}

.public-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: var(--control-gap);
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
    font: 0.76rem/1.4 var(--ui-font);
}

.public-search-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-search-actions {
    display: grid;
    grid-template-columns: 180px max-content;
    gap: var(--control-gap);
    align-items: end;
}

.public-search-select {
    position: relative;
    display: block;
    min-width: 0;
}

.public-search-select .fa-solid {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--ink);
    font-size: 0.72rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.public-search-form input,
.public-search-form select,
.public-search-form button {
    height: var(--form-control-height);
    min-width: 0;
    border: 1px solid var(--rule);
    border-radius: 0;
    font: 0.9rem var(--ui-font);
}

.public-search-form input {
    width: 100%;
    padding: 0 12px;
}

.public-search-form select {
    appearance: none;
    width: 100%;
    padding: 0 40px 0 16px;
    background: #fffdf6;
}

.public-search-form button {
    padding: 0 20px;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

.search-guidance {
    padding: 42px 0;
    color: var(--ink-soft);
    text-align: center;
}

.search-results {
    padding-top: 24px;
}

.search-results > article {
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
}

.search-results > article > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-soft);
    font: 0.72rem var(--ui-font);
}

.search-results h2 {
    margin: 8px 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.search-results h2 a {
    text-decoration: none;
}

.search-results h2 a:hover {
    color: var(--accent);
}

.search-results article > p {
    max-width: 800px;
    margin: 8px 0 0;
    color: var(--ink-soft);
}

.search-results .search-result-meta {
    color: var(--accent);
    font: 700 0.7rem var(--ui-font);
}

.article-list > article {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0;
    border-bottom: 1px solid var(--rule);
}

.article-list > article:not(:has(img)) {
    grid-template-columns: 1fr;
}

.article-list img,
.article-cover,
.markdown-body img {
    max-width: 100%;
    height: auto;
}

.article-list img {
    width: 240px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--rule-light);
    object-fit: contain;
}

.article-list h2 {
    margin: 8px 0 10px;
    font-size: clamp(1.5rem, 3.5vw, 2.35rem);
}

.article-list p {
    margin: 0 0 14px;
    color: var(--ink-soft);
}

.taxonomy-line,
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 18px;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.article-byline span {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 0 46px;
    font-size: 0.8rem;
}

.pagination span:only-child {
    margin: 0 auto;
}

.empty-archive {
    padding: 70px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    text-align: center;
}

.article-detail > header {
    padding: 32px 0 38px;
    border-top: 1px solid var(--rule-light);
    border-bottom: 3px double var(--rule);
}

.article-detail h1 {
    max-width: 900px;
    margin: 12px 0 16px;
    font-size: clamp(2.3rem, 6vw, 5rem);
    letter-spacing: -0.045em;
}

.article-deck {
    max-width: 780px;
    color: var(--ink-soft);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.article-cover {
    width: 100%;
    margin-top: 30px;
    border: 1px solid var(--rule-light);
    object-fit: contain;
}

/* Keep this block synchronized with Admin admin.css .markdown-content. */
.markdown-content {
    --markdown-paper-dark: #e7dfcb;
    --markdown-ink: #211f1a;
    --markdown-ink-soft: #5b574e;
    --markdown-rule: #3a372f;
    --markdown-rule-light: #a59e8e;
    --markdown-accent: #7a2f24;
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 0 56px;
    color: var(--markdown-ink);
    font-family: var(--body-font);
    font-size: 1.06rem;
    font-weight: 400;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.markdown-content > :first-child {
    margin-top: 0;
}

.markdown-content > :last-child {
    margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-family: var(--title-font);
    line-height: 1.2;
    text-wrap: balance;
}

.markdown-content h1 {
    margin: 1.8em 0 0.75em;
    font-size: clamp(2.15rem, 4.5vw, 3.25rem);
    letter-spacing: -0.04em;
}

.markdown-content h2 {
    margin: 2.5em 0 0.85em;
    padding: 9px 0 8px;
    border-top: 3px double var(--markdown-rule);
    border-bottom: 1px solid var(--markdown-rule-light);
    color: var(--markdown-accent);
    font-size: clamp(1.65rem, 3.5vw, 2.1rem);
}

.markdown-content h3 {
    margin: 2em 0 0.65em;
    font-size: 1.36rem;
}

.markdown-content h3::before {
    color: var(--markdown-accent);
    content: "◆ ";
    font-size: 0.72em;
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin: 1.8em 0 0.6em;
    color: var(--markdown-ink-soft);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
}

.markdown-content h5 {
    font-size: 0.8rem;
}

.markdown-content h6 {
    font-size: 0.74rem;
}

.markdown-content p {
    margin: 1.15em 0;
}

.markdown-content strong {
    color: #171510;
}

.markdown-content del {
    color: var(--markdown-ink-soft);
}

.markdown-content a {
    color: var(--markdown-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.markdown-content blockquote {
    position: relative;
    margin: 2em 0;
    padding: 18px 24px 18px 56px;
    border-top: 1px solid var(--markdown-rule-light);
    border-bottom: 1px solid var(--markdown-rule-light);
    background: var(--markdown-paper-dark);
    color: var(--markdown-ink-soft);
    font-size: 1.08em;
}

.markdown-content blockquote::before {
    position: absolute;
    top: 8px;
    left: 17px;
    color: var(--markdown-accent);
    content: "“";
    font-size: 3.5rem;
    line-height: 1;
}

.markdown-content blockquote p {
    margin: 0;
}

.markdown-content hr {
    height: 11px;
    margin: 42px 0;
    border: 0;
    border-top: 1px solid var(--markdown-rule);
    border-bottom: 3px double var(--markdown-rule);
}

.markdown-content ul,
.markdown-content ol {
    margin: 1.2em 0;
    padding-left: 1.45em;
}

.markdown-content li {
    margin: 0.45em 0;
    padding-left: 0.25em;
}

.markdown-content li::marker {
    color: var(--markdown-accent);
    font-weight: 800;
}

.markdown-content code {
    padding: 0.12em 0.32em;
    border: 1px solid #c9bea8;
    background: #e7deca;
    font: 0.84em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.markdown-content pre {
    max-width: 100%;
    overflow-x: auto;
    margin: 1.8em 0;
    padding: 22px;
    border-left: 5px solid var(--markdown-accent);
    background: #26251f;
    color: #f0eadc;
    box-shadow: 7px 7px 0 #d7ceba;
    white-space: pre;
}

.markdown-content pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

.markdown-content table {
    display: table;
    width: 100%;
    max-width: 100%;
    margin: 1.7em 0;
    border-top: 3px double var(--markdown-rule);
    border-bottom: 3px double var(--markdown-rule);
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 0.83rem;
    line-height: 1.55;
}

.markdown-content th,
.markdown-content td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--markdown-rule-light);
    text-align: left;
}

.markdown-content th {
    color: var(--markdown-accent);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.markdown-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--markdown-rule);
}

.markdown-content p:has(> img),
.markdown-content p:has(> .image-preview-trigger) {
    margin: 2em 0 0.65em;
    text-align: center;
}

.markdown-content p:has(> img) + p > em:only-child,
.markdown-content p:has(> .image-preview-trigger) + p > em:only-child {
    display: block;
    color: var(--markdown-ink-soft);
    font-size: 0.82rem;
    text-align: center;
}

.article-footer {
    display: grid;
    gap: 18px;
    padding: 24px 0 50px;
    border-top: 3px double var(--rule);
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.article-footer p {
    margin: 0;
}

.tag-list strong {
    color: var(--ink-soft);
}

.site-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 15px;
    border-top: 3px double var(--rule);
    color: var(--ink-soft);
    font: 0.75rem/1.5 var(--ui-font);
}

.site-footer p {
    margin: 0;
}

.site-footer-main {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.site-registration {
    text-align: left;
    overflow-wrap: anywhere;
}

.empty-state,
.auth-panel,
.account-panel {
    max-width: 680px;
    min-height: 52vh;
    margin: 0 auto;
    padding: 80px 0;
}

.empty-state h1,
.auth-panel h1,
.account-panel h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 5vw, 4rem);
}

.narrow-shell {
    width: min(900px, calc(100% - 32px));
}

.auth-panel form {
    display: grid;
    gap: 8px;
    padding: 24px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.auth-panel label,
.auth-panel input,
.auth-panel button,
.fine-print,
.form-message {
    font-family: var(--ui-font);
}

.auth-panel input {
    width: 100%;
    height: var(--form-control-height);
    margin-bottom: 10px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: #fffdf6;
    color: var(--ink);
    font-size: 1rem;
}

.auth-panel button {
    width: max-content;
    height: var(--form-control-height);
    padding: 0 28px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.auth-panel button:disabled {
    border-color: var(--rule-light);
    background: var(--paper-dark);
    color: var(--ink-soft);
    cursor: not-allowed;
}

[data-verification-code-submit] {
    min-width: 172px;
}

.verification-code-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.verification-code-feedback {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}

.form-message.error {
    color: var(--accent);
}

.fine-print {
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.auth-step {
    margin-top: 30px;
}

.auth-step h2 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.field-help {
    margin: -3px 0 10px;
    color: var(--ink-soft);
    font: 0.75rem/1.55 var(--ui-font);
}

@media (max-width: 560px) {
    .verification-code-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .verification-code-feedback {
        flex-basis: auto;
    }
}

.account-panel {
    padding-top: 70px;
}

.account-panel h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
}

.account-details {
    margin: 28px 0;
    border-top: 2px solid var(--rule);
}

.account-details div {
    display: grid;
    grid-template-columns: 130px 1fr;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-light);
}

.account-details dt,
.account-details dd,
.account-actions,
.logout-form {
    font-family: var(--ui-font);
}

.account-details dt {
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.account-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.logout-form button {
    height: var(--compact-control-height);
    padding: 0 20px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.form-message.success {
    color: #315f36;
}

.site-notification-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 120;
    display: flex;
    width: min(380px, calc(100vw - 32px));
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.site-notification {
    --notification-color: #45637a;
    --notification-bg: #e9eff2;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 11px;
    min-height: 72px;
    padding: 14px 10px 14px 16px;
    border: 1px solid color-mix(in srgb, var(--notification-color) 42%, var(--rule-light));
    border-left: 4px solid var(--notification-color);
    background: var(--notification-bg);
    color: var(--ink);
    box-shadow: 0 14px 34px rgb(33 31 26 / 20%);
    font-family: var(--ui-font);
    pointer-events: auto;
    transform: translateX(0);
    opacity: 1;
    transition:
        transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
        opacity 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.site-notification.is-success {
    --notification-color: #3f7446;
    --notification-bg: #edf4ec;
}

.site-notification.is-error {
    --notification-color: #a3473a;
    --notification-bg: #f6e9e6;
}

.site-notification.is-warning {
    --notification-color: #9a6d22;
    --notification-bg: #f5efdf;
}

.site-notification-marker {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--notification-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--notification-color) 14%, transparent);
}

.site-notification div {
    min-width: 0;
}

.site-notification strong {
    display: block;
    margin-bottom: 3px;
    color: var(--notification-color);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.site-notification p {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    line-height: 1.5;
}

.site-notification button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    font: 1.05rem/1 var(--ui-font);
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.site-notification button:active {
    transform: scale(0.94);
}

.site-notification.is-entering,
.site-notification.is-leaving {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
}

@media (max-width: 540px) {
    .site-notification-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }
}

.favorite-action {
    margin: 16px 0;
    font-family: var(--ui-font);
}

.favorite-action form,
.favorite-list form {
    margin: 0;
}

.favorite-button {
    height: var(--compact-control-height);
    padding: 0 14px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink);
    font: 0.78rem/1.2 var(--ui-font);
    letter-spacing: 0.04em;
    cursor: pointer;
}

.favorite-button:hover,
.favorite-button:focus-visible,
.favorite-button.active {
    background: var(--ink);
    color: var(--paper);
}

.favorite-login {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.favorite-list {
    margin: 30px 0;
    border-top: 2px solid var(--rule);
}

.favorite-list > article {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0;
    border-bottom: 1px solid var(--rule-light);
}

.favorite-list img {
    width: 160px;
    height: 110px;
    object-fit: contain;
    filter: saturate(0.8);
}

.favorite-list h2 {
    margin: 2px 0 8px;
    font-size: 1.5rem;
}

.favorite-list time {
    display: block;
    margin: 10px 0;
    color: var(--ink-soft);
    font: 0.72rem/1.4 var(--ui-font);
}

.comment-section {
    width: min(850px, 100%);
    margin: 18px auto 80px;
    padding-top: 30px;
    border-top: 4px double var(--rule);
}

.comment-section > header {
    margin-bottom: 28px;
}

.comment-section > header h2 {
    margin: 4px 0 8px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.comment-section > header p:last-child,
.comment-login-note {
    color: var(--ink-soft);
    font: 0.82rem/1.6 var(--ui-font);
}

.comment-compose,
.reply-compose {
    background: var(--paper-dark);
    border: 1px solid var(--rule-light);
    font-family: var(--ui-font);
}

.comment-compose {
    margin-bottom: 30px;
    padding: 20px;
}

.comment-compose h3 {
    margin: 0 0 14px;
    font-size: 1rem;
}

.comment-compose form,
.reply-compose form {
    display: grid;
    gap: 8px;
}

.comment-compose textarea,
.reply-compose textarea {
    width: 100%;
    padding: 11px;
    resize: vertical;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: #fffdf6;
    color: var(--ink);
    font: 0.9rem/1.55 var(--ui-font);
}

.comment-field-meta {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.comment-field-meta .field-help {
    margin: 0;
}

.comment-field-meta.compact .field-help,
.comment-character-count {
    color: var(--ink-soft);
    font: 0.72rem/1.5 var(--ui-font);
}

.comment-character-count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.comment-character-count.is-near-limit {
    color: var(--accent);
    font-weight: 750;
}

.comment-compose button,
.reply-compose button {
    width: max-content;
    height: var(--compact-control-height);
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: #fff;
    font: 700 0.78rem var(--ui-font);
    cursor: pointer;
}

.comment-threads {
    border-top: 1px solid var(--rule);
}

.comment-thread {
    padding: 25px 0;
    border-bottom: 1px solid var(--rule-light);
}

.comment-thread > header,
.comment-replies article > header,
.own-comment-list article > header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px 12px;
    color: var(--ink-soft);
    font: 0.72rem/1.4 var(--ui-font);
}

.comment-thread > header strong,
.comment-replies article > header strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.comment-thread > header a,
.comment-replies article > header a {
    margin-left: auto;
}

.comment-content {
    overflow-wrap: anywhere;
    margin: 12px 0;
    line-height: 1.7;
}

.comment-content.is-collapsible:not(.is-expanded) {
    position: relative;
    max-height: 12.75rem;
    overflow: hidden;
}

.comment-content.is-collapsible:not(.is-expanded)::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3.6rem;
    background: linear-gradient(to bottom, transparent, var(--paper) 88%);
    content: "";
    pointer-events: none;
}

.comment-expand-button {
    min-height: var(--compact-control-height);
    margin: -4px 0 10px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentcolor;
    background: transparent;
    color: var(--accent);
    font: 750 0.75rem/1 var(--ui-font);
    cursor: pointer;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

.comment-expand-button:active {
    transform: scale(0.97);
}

.comment-expand-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.comment-content p,
.comment-content blockquote,
.comment-content pre {
    margin: 9px 0;
}

.comment-content blockquote {
    padding-left: 14px;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
}

.comment-content pre {
    max-width: 100%;
    padding: 12px;
    overflow-x: auto;
    background: #24231f;
    color: #f4efdf;
}

.comment-content code {
    padding: 1px 4px;
    background: var(--paper-dark);
    font: 0.84em ui-monospace, SFMono-Regular, Menlo, monospace;
}

.comment-content pre code {
    padding: 0;
    background: transparent;
}

.reply-compose {
    margin-top: 12px;
    padding: 10px 12px;
}

.reply-compose summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
}

.reply-compose form {
    margin-top: 12px;
}

.comment-replies {
    margin: 20px 0 0 clamp(12px, 5vw, 52px);
    border-left: 3px double var(--rule-light);
}

.comment-replies > article {
    padding: 17px 0 17px 20px;
    border-top: 1px solid var(--rule-light);
}

.comment-replies > article:first-child {
    border-top: 0;
}

.comment-history {
    max-width: 760px;
}

.own-comment-list {
    margin: 28px 0;
    border-top: 2px solid var(--rule);
}

.own-comment-list > article {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-light);
}

.own-comment-list h2 {
    margin: 10px 0 0;
    font-size: 1.05rem;
}

.comment-status {
    padding: 2px 7px;
    border: 1px solid currentColor;
    color: var(--ink-soft);
    font-weight: 700;
}

.comment-status.status-approved {
    color: #315f36;
}

.comment-status.status-rejected,
.comment-status.status-deleted,
.reject-reason {
    color: var(--accent);
}

.reply-context,
.reject-reason {
    font: 0.78rem/1.6 var(--ui-font);
}

@media (max-width: 760px) {
    .favorite-list > article {
        grid-template-columns: 1fr;
    }

    .favorite-list img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .page-shell {
        width: min(100% - 22px, 1180px);
        padding-top: 10px;
    }

    .edition-line span:first-child {
        display: none;
    }

    .edition-line {
        justify-content: flex-end;
    }

    .main-nav {
        flex-wrap: wrap;
    }

    .main-nav a {
        flex: 1 1 33%;
        border-bottom: 1px solid var(--rule-light);
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .home-latest > div:last-child {
        grid-template-columns: 1fr;
    }

    .home-latest article,
    .home-latest article:nth-child(3n) {
        border-right: 0;
    }

    .article-list > article,
    .article-list > article:not(:has(img)) {
        grid-template-columns: 1fr;
    }

    .article-list img {
        width: 100%;
    }

    .public-search-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .public-search-form button {
        width: 100%;
    }

    .markdown-content {
        padding: 38px 0 44px;
        font-size: 1rem;
    }

    .markdown-content h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .markdown-content h2 {
        font-size: clamp(1.55rem, 8vw, 1.9rem);
    }

    .markdown-content blockquote {
        margin: 1.6em 0;
        padding: 16px 18px 16px 48px;
    }

    .markdown-content blockquote::before {
        left: 14px;
    }

    .markdown-content pre {
        padding: 18px;
        box-shadow: 5px 5px 0 #d7ceba;
    }

    .markdown-content th,
    .markdown-content td {
        padding: 9px 8px;
    }

    .comment-replies {
        margin-left: 7px;
    }

    .comment-field-meta {
        align-items: flex-end;
    }

    .archive-grid article,
    .archive-grid article:last-child {
        padding: 24px 4px;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .archive-grid article:last-child {
        border-bottom: 0;
    }

    .notice-strip,
    .site-footer-main {
        flex-direction: column;
        gap: 6px;
    }
}

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

    .site-notification.is-entering,
    .site-notification.is-leaving {
        transform: none;
    }
}

/* Phase 14 · unified archival interface */
html {
    background: #d5ccba;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--ink);
    background:
        linear-gradient(90deg, rgb(122 47 36 / 0.018), transparent 18%, transparent 82%, rgb(122 47 36 / 0.018)),
        repeating-linear-gradient(0deg, rgb(58 55 47 / 0.022) 0, rgb(58 55 47 / 0.022) 1px, transparent 1px, transparent 4px),
        var(--paper);
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent);
    color: var(--paper-raised);
}

.page-shell {
    width: min(var(--page-width), calc(100% - 48px));
    padding-top: 16px;
}

.masthead {
    border-top-width: 4px;
    background: linear-gradient(to bottom, rgb(250 246 234 / 0.64), transparent 72%);
}

.edition-line {
    padding: 7px 8px;
    border-bottom-color: var(--rule-faint);
    color: var(--ink-faint);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.brand {
    margin-top: 16px;
    font-size: clamp(2.8rem, 7vw, 5.25rem);
    text-wrap: balance;
}

.tagline {
    margin: 8px 0 16px;
    color: var(--ink-faint);
    font-size: 0.68rem;
}

.main-nav {
    overflow-x: auto;
    border-top-color: var(--rule-faint);
    scrollbar-width: thin;
}

.main-nav a {
    position: relative;
    flex: 0 0 auto;
    min-width: 122px;
    padding: 12px clamp(14px, 2.7vw, 28px);
    border-color: var(--rule-faint);
    color: var(--ink-soft);
    transition:
        color 150ms var(--ease-out),
        background-color 150ms var(--ease-out);
}

.main-nav a[aria-current="page"] {
    background: var(--paper-inset);
    color: var(--accent);
    font-weight: 750;
}

.main-nav a[aria-current="page"]::after {
    position: absolute;
    right: 16px;
    bottom: -2px;
    left: 16px;
    height: 3px;
    background: var(--accent);
    content: "";
}

@media (hover: hover) and (pointer: fine) {
    .main-nav a:hover {
        background: rgb(231 223 203 / 0.66);
        color: var(--accent);
    }

    .archive-grid article:hover,
    .home-latest article:hover,
    .device-list > article:hover {
        background: rgb(250 246 234 / 0.7);
    }

    .article-list > article:hover,
    .resource-list > article:hover,
    .search-results > article:hover {
        padding-right: 12px;
        padding-left: 12px;
        background: rgb(250 246 234 / 0.64);
    }
}

.lead-story {
    position: relative;
    max-width: 1020px;
    padding: clamp(54px, 8vw, 96px) clamp(0px, 3vw, 34px) clamp(46px, 6vw, 72px);
    text-align: left;
}

.lead-story::after {
    position: absolute;
    top: 28px;
    right: 0;
    color: var(--ink-faint);
    content: attr(data-lead-marker);
    font: 700 0.62rem/1 var(--ui-font);
    letter-spacing: 0.14em;
}

.lead-story h1 {
    max-width: 940px;
    margin-bottom: 24px;
    font-size: clamp(2.35rem, 5.4vw, 4.8rem);
    line-height: 1.08;
    text-wrap: balance;
}

.lead-summary {
    max-width: 730px;
    margin: 0 0 24px;
    color: var(--ink-soft);
    line-height: 1.78;
    text-wrap: pretty;
}

.rule-heading {
    color: var(--ink-faint);
}

.rule-heading::before,
.rule-heading::after {
    background: var(--rule-light);
}

.archive-grid {
    grid-template-columns: 1.12fr 1fr 1fr;
    border-top: 3px double var(--rule);
    border-bottom: 1px solid var(--rule);
    counter-reset: archive-column;
}

.archive-grid article {
    position: relative;
    padding: 34px 28px 30px;
    border-right-color: var(--rule-faint);
    counter-increment: archive-column;
    transition: background-color 150ms var(--ease-out);
}

.archive-grid article::before {
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--ink-faint);
    content: "0" counter(archive-column);
    font: 700 0.62rem/1 var(--ui-font);
    font-variant-numeric: tabular-nums;
}

.archive-grid h2 {
    font-size: clamp(1.45rem, 2.35vw, 2.05rem);
    text-wrap: balance;
}

.archive-grid p:not(.section-kicker) {
    font-size: 0.94rem;
    line-height: 1.72;
}

.home-latest {
    margin: clamp(52px, 7vw, 76px) 0;
}

.home-latest > div:last-child {
    border-top: 3px double var(--rule);
}

.home-latest article {
    position: relative;
    min-height: 220px;
    padding: 26px 24px;
    border-color: var(--rule-faint);
    transition: background-color 150ms var(--ease-out);
}

.home-latest h2 {
    margin: 10px 0;
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    text-wrap: balance;
}

.home-latest p {
    color: var(--ink-soft);
    line-height: 1.68;
}

.notice-strip {
    align-items: center;
    margin-bottom: 54px;
    padding: 14px 16px;
    border-color: var(--rule-light);
    background: var(--paper-inset);
    color: var(--ink-soft);
}

.notice-strip strong {
    color: var(--accent);
    letter-spacing: 0.04em;
}

.article-index,
.article-detail,
.device-index,
.resource-index,
.search-page {
    max-width: 1060px;
}

.breadcrumbs {
    padding: 24px 0 16px;
    color: var(--ink-faint);
}

.breadcrumbs a {
    text-underline-offset: 3px;
}

.archive-heading {
    display: grid;
    grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1.65fr);
    column-gap: clamp(28px, 5vw, 68px);
    padding: clamp(38px, 6vw, 64px) 0;
    border-top-color: var(--rule-faint);
}

.archive-heading .section-kicker {
    grid-row: 1 / span 2;
    padding-top: 9px;
}

.archive-heading h1 {
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 5.5vw, 4.65rem);
    line-height: 1.04;
    text-wrap: balance;
}

.archive-heading > p:last-child {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.75;
    text-wrap: pretty;
}

.article-list > article,
.resource-list > article,
.search-results > article {
    border-bottom-color: var(--rule-faint);
    transition:
        padding 180ms var(--ease-out),
        background-color 150ms var(--ease-out);
}

.article-list > article {
    grid-template-columns: minmax(0, 228px) minmax(0, 1fr);
    gap: 34px;
    padding: 34px 0;
}

.article-list img,
.resource-list img,
.device-card-image,
.article-cover,
.resource-cover,
.device-cover,
.device-gallery img {
    border-color: var(--rule-light);
    outline: 1px solid rgb(255 253 246 / 0.8);
    outline-offset: -4px;
    filter: saturate(0.88) contrast(1.02);
}

.article-list h2,
.resource-list h2 {
    line-height: 1.15;
    text-wrap: balance;
}

.article-list p,
.resource-list p {
    line-height: 1.72;
    text-wrap: pretty;
}

.resource-list {
    border-top-width: 3px;
}

.resource-list > article {
    grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
    padding: 32px 0;
}

.resource-type-line span {
    padding: 4px 8px;
    border-color: var(--rule-faint);
    background: rgb(250 246 234 / 0.52);
}

.device-list {
    gap: 0;
    border-top: 3px double var(--rule);
    border-left-color: var(--rule-faint);
}

.device-list > article {
    position: relative;
    padding: 28px;
    border-color: var(--rule-faint);
    transition: background-color 150ms var(--ease-out);
}

.device-card-meta div,
.device-facts div,
.device-specifications dl div {
    border-color: var(--rule-faint);
}

.device-card-meta dt,
.device-facts dt,
.article-byline,
.resource-list time {
    color: var(--ink-faint);
}

.pagination {
    align-items: center;
    padding: 32px 0 52px;
    color: var(--ink-faint);
}

.pagination a {
    min-height: var(--compact-control-height);
    padding: 7px 10px;
    color: var(--accent);
    font-weight: 700;
    text-underline-offset: 4px;
}

.public-search-form,
.auth-panel form {
    border-color: var(--rule-faint);
}

.public-search-form input,
.public-search-form select,
.auth-panel input,
.comment-compose textarea,
.reply-compose textarea {
    border-color: var(--rule-light);
    background: var(--paper-raised);
    box-shadow: inset 0 1px 0 rgb(58 55 47 / 0.04);
}

.public-search-form button,
.auth-panel button,
.comment-compose button,
.reply-compose button {
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.public-search-form button:hover,
.auth-panel button:hover,
.comment-compose button:hover,
.reply-compose button:hover {
    border-color: var(--accent-dark);
    background: var(--accent-dark);
}

.public-search-form button:active,
.auth-panel button:active,
.comment-compose button:active,
.reply-compose button:active {
    transform: scale(0.98);
}

.site-footer {
    padding: 18px 4px 0;
    border-top-color: var(--rule);
    color: var(--ink-faint);
}

.site-footer a {
    color: var(--ink-soft);
    text-underline-offset: 3px;
}

@media (max-width: 820px) {
    .page-shell {
        width: min(100% - 28px, var(--page-width));
    }

    .archive-heading {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .archive-heading .section-kicker {
        grid-row: auto;
        padding-top: 0;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-shell {
        width: min(100% - 22px, var(--page-width));
    }

    .edition-line span:first-child {
        display: inline;
    }

    .edition-line {
        justify-content: space-between;
    }

    .brand {
        font-size: clamp(2.65rem, 16vw, 4rem);
    }

    .main-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        min-width: auto;
        flex: 0 0 auto;
        padding: 11px 16px;
        border-bottom: 0;
        font-size: 0.82rem;
    }

    .lead-story {
        padding-right: 4px;
        padding-left: 4px;
    }

    .lead-story::after {
        top: 22px;
        right: 4px;
    }

    .archive-grid article,
    .archive-grid article:last-child {
        padding: 30px 12px 26px;
        border-right: 0;
        border-bottom-color: var(--rule-faint);
    }

    .home-latest article {
        min-height: 0;
        padding: 24px 12px;
    }

    .article-list > article,
    .resource-list > article {
        gap: 20px;
        padding: 28px 0;
    }

    .article-list > article:hover,
    .resource-list > article:hover,
    .search-results > article:hover {
        padding-right: 0;
        padding-left: 0;
        background: transparent;
    }
}

@media (max-width: 520px) {
    .edition-line span:first-child {
        max-width: 58%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lead-story::after {
        display: none;
    }

    .lead-story h1,
    .archive-heading h1,
    .article-detail h1,
    .device-hero h1,
    .resource-hero h1 {
        overflow-wrap: anywhere;
    }
}

/* Phase 15 · dense technical magazine index */
:root {
    --paper: #f1ead8;
    --paper-dark: #e6dcc5;
    --paper-raised: #f8f3e7;
    --paper-inset: #e9dfca;
    --ink: #1f1d18;
    --ink-soft: #565148;
    --ink-faint: #777064;
    --rule: #34312a;
    --rule-light: #9f9685;
    --rule-faint: #c9bfac;
    --accent: #7c2d22;
    --accent-dark: #5f2119;
    --page-width: 1360px;
    --reading-width: 760px;
}

html {
    font-size: 16px;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        repeating-linear-gradient(0deg, rgb(52 49 42 / 0.018) 0, rgb(52 49 42 / 0.018) 1px, transparent 1px, transparent 4px),
        var(--paper);
}

.page-shell,
.narrow-shell {
    width: min(var(--page-width), calc(100% - 32px));
    padding: 8px 0 24px;
}

.masthead {
    border-top: 3px double var(--rule);
    border-bottom: 3px double var(--rule);
    background: transparent;
    text-align: left;
}

.edition-line {
    min-height: 25px;
    padding: 4px 0;
    color: var(--ink-faint);
    font-size: 0.61rem;
    letter-spacing: 0.09em;
}

.edition-line b {
    color: var(--ink-soft);
}

.edition-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.language-switch {
    padding-left: 7px;
    border-left: 1px solid var(--rule-light);
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.masthead-core {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
    gap: 32px;
    align-items: center;
    min-height: 86px;
    padding: 10px 0 9px;
}

.masthead-identity {
    min-width: 0;
}

.brand {
    display: inline-block;
    margin: 0;
    font-size: clamp(2.45rem, 4.8vw, 4rem);
    line-height: 0.86;
    letter-spacing: -0.055em;
}

.tagline {
    margin: 7px 0 0 2px;
    color: var(--ink-faint);
    font-size: 0.59rem;
    letter-spacing: 0.17em;
}

.masthead-search {
    display: grid;
    gap: 4px;
    margin: 0;
    font-family: var(--ui-font);
}

.masthead-search label {
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.masthead-search > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--control-gap);
}

.masthead-search input,
.masthead-search button {
    min-width: 0;
    height: 40px;
    border: 1px solid var(--rule-light);
    border-radius: 0;
    font: 0.78rem/1 var(--ui-font);
}

.masthead-search input {
    width: 100%;
    padding: 0 10px;
    background: var(--paper-raised);
    color: var(--ink);
}

.masthead-search button {
    padding: 0 16px;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--paper-raised);
    font-weight: 750;
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.masthead-search button:hover {
    background: var(--accent-dark);
}

.masthead-search button:active {
    transform: scale(0.97);
}

.masthead-search p {
    margin: 0;
    color: var(--ink-faint);
    font-size: 0.51rem;
    letter-spacing: 0.1em;
}

.main-nav {
    justify-content: stretch;
    overflow-x: auto;
    border-top: 1px solid var(--rule-light);
    font-size: 0.78rem;
    scrollbar-width: thin;
}

.main-nav a {
    display: flex;
    min-width: 140px;
    min-height: 40px;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 7px 14px 6px;
    border-color: var(--rule-faint);
    color: var(--ink-soft);
}

.main-nav a span {
    color: var(--ink-faint);
    font-size: 0.57rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.main-nav a[aria-current="page"] {
    background: var(--paper-inset);
    color: var(--accent);
}

.main-nav a[aria-current="page"]::after {
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
}

.section-kicker {
    margin-bottom: 7px;
    font-size: 0.63rem;
    letter-spacing: 0.11em;
}

.frontpage-top {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.75fr);
    border-bottom: 3px double var(--rule);
}

.lead-story {
    max-width: none;
    margin: 0;
    padding: 24px 38px 26px 8px;
    text-align: left;
}

.lead-story::after {
    display: none;
}

.lead-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    max-width: 880px;
    margin-bottom: 10px;
    font-family: var(--ui-font);
}

.lead-meta .section-kicker {
    margin: 0;
}

.lead-meta time {
    color: var(--ink-faint);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.lead-story h1 {
    max-width: 900px;
    margin: 0 0 12px;
    font-size: clamp(2.1rem, 4vw, 3.75rem);
    line-height: 1.07;
    letter-spacing: -0.035em;
}

.lead-summary {
    display: -webkit-box;
    max-width: 800px;
    margin: 0 0 14px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.93rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.text-link {
    font-size: 0.76rem;
    text-decoration-thickness: 1px;
}

.quick-index {
    padding: 20px 0 18px 24px;
    border-left: 1px solid var(--rule-light);
}

.quick-index header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px 9px 0;
    border-bottom: 2px solid var(--rule);
}

.quick-index header .section-kicker {
    margin: 0;
}

.quick-index h2 {
    margin: 0;
    font: 700 0.92rem/1.2 var(--ui-font);
}

.quick-index nav a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 8px;
    border-bottom: 1px solid var(--rule-faint);
    text-decoration: none;
    transition:
        background-color 140ms var(--ease-out),
        color 140ms var(--ease-out);
}

.quick-index nav a:hover {
    background: var(--paper-raised);
    color: var(--accent);
}

.quick-index nav b,
.quick-index nav i,
.quick-index nav small {
    font-family: var(--ui-font);
}

.quick-index nav b {
    color: var(--accent);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
}

.quick-index nav span {
    display: grid;
    gap: 1px;
}

.quick-index nav strong {
    font: 750 0.87rem/1.3 var(--ui-font);
}

.quick-index nav small {
    color: var(--ink-faint);
    font-size: 0.65rem;
}

.quick-index nav i {
    color: var(--accent);
    font-size: 0.8rem;
    font-style: normal;
}

.quick-index-note {
    margin: 10px 8px 0 0;
    color: var(--ink-faint);
    font: 0.65rem/1.55 var(--ui-font);
}

.quick-index-note strong {
    color: var(--ink-soft);
}

.product-catalog {
    margin: 26px 0 24px;
    scroll-margin-top: 24px;
}

.product-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule-light);
}

.home-product {
    min-width: 0;
    border-right: 1px solid var(--rule-faint);
}

.home-product:last-child {
    border-right: 0;
}

.home-product-link {
    display: grid;
    height: 100%;
    grid-template-rows: auto auto 1fr auto;
    gap: 14px;
    padding: 20px 18px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 160ms var(--ease-out);
}

.home-product-link:hover,
.home-product-link:focus-visible {
    background: rgb(122 47 36 / 4%);
}

.home-product-category {
    display: flex;
    gap: 8px;
    margin: 0;
    color: var(--ink-soft);
    font: 600 0.66rem/1.5 var(--ui-font);
}

.home-product-category > :first-child {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.home-product-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.home-product-identity img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
    border-radius: 14px;
}

.home-product-identity h3 {
    margin: 0;
    font: 750 1.05rem/1.3 var(--title-font);
}

.home-product-description {
    margin: 0;
    color: var(--ink-soft);
    font: 400 0.8rem/1.65 var(--body-font);
}

.home-product-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font: 700 0.74rem/1.5 var(--ui-font);
}

@media (max-width: 1000px) {
    .product-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-product:nth-child(even) {
        border-right: 0;
    }

    .home-product:nth-child(n + 3) {
        border-top: 1px solid var(--rule-faint);
    }
}

@media (max-width: 560px) {
    .product-catalog-grid {
        grid-template-columns: 1fr;
    }

    .home-product {
        border-right: 0;
    }

    .home-product + .home-product {
        border-top: 1px solid var(--rule-faint);
    }

    .home-product-link {
        gap: 12px;
        padding: 18px 8px;
    }
}

.frontpage-ledger {
    margin: 22px 0 18px;
}

.ledger-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 8px 9px;
    border-bottom: 3px double var(--rule);
}

.ledger-heading .section-kicker {
    margin-bottom: 2px;
}

.ledger-heading h2 {
    margin: 0;
    font-size: 1.5rem;
}

.ledger-heading > p {
    margin: 0;
    color: var(--ink-faint);
    font: 0.62rem/1.4 var(--ui-font);
}

.ledger-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule-light);
}

.ledger-column {
    min-width: 0;
    padding: 0 16px 4px;
    border-right: 1px solid var(--rule-faint);
    counter-reset: ledger-row;
}

.ledger-column:first-child {
    padding-left: 8px;
}

.ledger-column:last-child {
    padding-right: 8px;
    border-right: 0;
}

.ledger-column > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 0 7px;
    border-bottom: 2px solid var(--rule);
    font-family: var(--ui-font);
}

.ledger-column h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.ledger-column > header a {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 700;
    text-underline-offset: 3px;
}

.ledger-column ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ledger-column li {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 9px 2px 9px 24px;
    border-bottom: 1px dotted var(--rule-faint);
    counter-increment: ledger-row;
}

.ledger-column li::before {
    position: absolute;
    top: 11px;
    left: 1px;
    color: var(--ink-faint);
    content: counter(ledger-row, decimal-leading-zero);
    font: 700 0.54rem/1 var(--ui-font);
    font-variant-numeric: tabular-nums;
}

.ledger-column li > time,
.ledger-type {
    align-self: baseline;
    overflow: hidden;
    color: var(--ink-faint);
    font: 0.58rem/1.4 var(--ui-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-column li > a {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font: 700 0.78rem/1.4 var(--ui-font);
    text-decoration-color: rgb(124 45 34 / 48%);
    text-underline-offset: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-column li > a:hover {
    color: var(--accent);
    text-decoration-color: currentcolor;
}

.ledger-column li p {
    display: -webkit-box;
    grid-column: 2;
    margin: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ledger-column .ledger-empty {
    display: block;
    padding: 18px 4px;
    color: var(--ink-faint);
    font: 0.72rem/1.4 var(--ui-font);
}

.notice-strip {
    min-height: 36px;
    margin: 0 0 20px;
    padding: 7px 9px;
    border: 0;
    border-bottom: 1px solid var(--rule-light);
    background: var(--paper-inset);
    font-size: 0.66rem;
}

.ad-slot {
    min-height: 88px;
    margin: 16px 0;
    padding: 9px 12px 12px;
}

.ad-slot-label {
    margin-bottom: 7px;
    font-size: 0.56rem;
}

.ad-slot-content {
    min-height: 48px;
    font-size: 0.75rem;
}

.article-index,
.article-detail,
.device-index,
.device-shell main,
.resource-index,
.resource-shell main,
.search-page {
    max-width: 1180px;
    margin: 0 auto;
}

.breadcrumbs {
    gap: 5px;
    padding: 10px 0 8px;
    font-size: 0.65rem;
}

.breadcrumbs a {
    color: var(--accent);
}

.archive-heading {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 0 26px;
    padding: 17px 0 19px;
    border-top: 1px solid var(--rule-faint);
    border-bottom: 3px double var(--rule);
}

.archive-heading .section-kicker {
    grid-row: 1 / span 2;
    padding-top: 5px;
}

.archive-heading h1 {
    margin: 0 0 6px;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.archive-heading > p:last-child {
    max-width: 800px;
    font-size: 0.88rem;
    line-height: 1.58;
}

.list-toolbar {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule-light);
    background: var(--paper-inset);
    color: var(--ink-faint);
    font: 0.61rem/1.4 var(--ui-font);
    letter-spacing: 0.04em;
}

.list-toolbar span:first-child {
    color: var(--ink-soft);
    font-weight: 750;
}

.article-list,
.resource-list {
    border-top: 0;
    counter-reset: archive-entry;
}

.article-list > article,
.resource-list > article,
.search-results > article {
    position: relative;
    border-bottom: 1px solid var(--rule-faint);
    counter-increment: archive-entry;
}

.article-list > article,
.article-list > article:not(:has(img)) {
    grid-template-columns: minmax(0, 138px) minmax(0, 1fr);
    gap: 18px;
    padding: 14px 10px 14px 44px;
}

.article-list > article:not(:has(img)) {
    grid-template-columns: 1fr;
}

.resource-list > article {
    grid-template-columns: minmax(0, 126px) minmax(0, 1fr);
    gap: 18px;
    padding: 14px 10px 14px 44px;
}

.resource-list > article:not(:has(img)) {
    grid-template-columns: 1fr;
}

.article-list > article::before,
.resource-list > article::before,
.search-results > article::before {
    position: absolute;
    top: 19px;
    left: 8px;
    color: var(--ink-faint);
    content: counter(archive-entry, decimal-leading-zero);
    font: 700 0.58rem/1 var(--ui-font);
    font-variant-numeric: tabular-nums;
}

.entry-image-link {
    display: block;
    align-self: start;
    text-decoration: none;
}

.article-list img,
.resource-list img {
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.article-list h2,
.resource-list h2,
.search-results h2 {
    margin: 4px 0 5px;
    font-size: clamp(1.22rem, 2.2vw, 1.65rem);
    line-height: 1.18;
}

.article-list h2 a,
.resource-list h2 a,
.search-results h2 a,
.device-list h2 a,
.related-archive h2 a,
.favorite-list h2 a,
.own-comment-list h2 a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: rgb(124 45 34 / 42%);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.article-list h2 a:hover,
.resource-list h2 a:hover,
.search-results h2 a:hover,
.device-list h2 a:hover,
.related-archive h2 a:hover,
.favorite-list h2 a:hover,
.own-comment-list h2 a:hover {
    color: var(--accent);
    text-decoration-color: currentcolor;
}

.article-list p,
.resource-list p,
.search-results article > p {
    display: -webkit-box;
    max-width: 860px;
    margin: 0 0 7px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.84rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.taxonomy-line,
.tag-list,
.article-byline,
.resource-type-line {
    gap: 5px 10px;
    font-size: 0.62rem;
}

.taxonomy-line a,
.tag-list a,
.article-byline a {
    color: var(--accent);
    text-underline-offset: 3px;
}

.resource-type-line span {
    padding: 2px 5px;
    background: transparent;
    font-size: 0.57rem;
}

.resource-list time {
    font-size: 0.62rem;
}

.device-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
    counter-reset: device-entry;
}

.device-list > article {
    grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1.58fr);
    gap: 14px;
    padding: 14px 14px 14px 38px;
    counter-increment: device-entry;
}

.device-list > article::before {
    position: absolute;
    top: 18px;
    left: 10px;
    color: var(--ink-faint);
    content: counter(device-entry, decimal-leading-zero);
    font: 700 0.56rem/1 var(--ui-font);
}

.device-list h2 {
    margin: 1px 0 5px;
    font-size: clamp(1.1rem, 1.9vw, 1.42rem);
    line-height: 1.2;
}

.device-list article > div > p:not(.section-kicker) {
    display: -webkit-box;
    margin: 0 0 7px;
    overflow: hidden;
    font-size: 0.79rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.device-card-meta div,
.device-facts div {
    gap: 6px;
    padding: 3px 0;
    font-size: 0.64rem;
}

.pagination {
    padding: 16px 0 24px;
    font-size: 0.7rem;
}

.pagination a {
    min-height: 40px;
    padding: 9px 10px;
}

.empty-archive {
    padding: 34px 8px;
    font: 0.82rem/1.5 var(--ui-font);
}

.public-search-form {
    gap: var(--control-gap);
    padding: 14px 0;
}

.public-search-actions {
    grid-template-columns: minmax(148px, 168px) max-content;
}

.public-search-field {
    gap: 4px;
}

.public-search-form input,
.public-search-form select,
.public-search-form button {
    font-size: 0.82rem;
}

.search-guidance {
    padding: 28px 0;
    font-size: 0.84rem;
}

.search-results {
    padding-top: 12px;
    counter-reset: archive-entry;
}

.search-results .rule-heading {
    margin-bottom: 0;
    padding: 7px 0;
}

.search-results > article {
    padding: 13px 10px 13px 44px;
}

.search-results > article > header {
    font-size: 0.62rem;
}

.search-results .search-result-meta {
    font-size: 0.62rem;
}

.article-detail > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 0 32px;
    align-items: start;
    padding: 17px 0 20px;
}

.article-detail > header:not(:has(.article-cover)) {
    grid-template-columns: 1fr;
}

.article-detail > header > :not(.article-cover) {
    grid-column: 1;
}

.article-detail h1 {
    max-width: none;
    margin: 8px 0 10px;
    font-size: clamp(2.15rem, 4vw, 3.2rem);
    line-height: 1.08;
}

.article-deck,
.device-deck,
.resource-deck {
    max-width: 800px;
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.62;
}

.favorite-action {
    margin: 9px 0;
}

.favorite-button {
    min-height: 40px;
}

.article-cover {
    grid-row: 1 / span 8;
    grid-column: 2;
    width: 100%;
    max-height: 300px;
    margin: 0;
    object-fit: contain;
}

.markdown-content {
    max-width: var(--reading-width);
    padding: 26px 0 32px;
    font-size: 1rem;
    line-height: 1.78;
}

.markdown-content p {
    margin: 0.82em 0;
}

.markdown-content h1 {
    margin: 1.45em 0 0.58em;
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
}

.markdown-content h2 {
    margin: 1.8em 0 0.62em;
    padding: 7px 0 6px;
    font-size: clamp(1.42rem, 2.8vw, 1.85rem);
}

.markdown-content h3 {
    margin: 1.45em 0 0.52em;
    font-size: 1.22rem;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0.85em 0;
}

.markdown-content li {
    margin: 0.25em 0;
}

.markdown-content blockquote {
    margin: 1.25em 0;
    padding: 13px 18px 13px 46px;
    font-size: 1em;
}

.markdown-content pre {
    margin: 1.25em 0;
    padding: 16px;
    border-left-width: 4px;
    box-shadow: 4px 4px 0 #d7ceba;
    font-size: 0.86rem;
    line-height: 1.58;
}

.markdown-content table {
    margin: 1.15em 0;
    font-size: 0.76rem;
}

.markdown-content th,
.markdown-content td {
    padding: 7px 8px;
}

.article-footer {
    gap: 10px;
    padding: 14px 0 24px;
    font-size: 0.66rem;
}

.device-hero,
.resource-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 32px;
    align-items: start;
    padding: 20px 0 22px;
}

.device-hero h1,
.resource-hero h1 {
    margin: 6px 0 10px;
    font-size: clamp(2.15rem, 4.5vw, 3.7rem);
    line-height: 1.05;
}

.device-cover,
.resource-cover {
    max-height: 270px;
}

.device-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
}

.device-facts div {
    padding-right: 12px;
}

.device-content-grid,
.resource-content-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    gap: 34px;
    padding: 24px 0;
}

.device-content-grid .markdown-content,
.resource-content-grid .markdown-content {
    margin: 0;
    padding: 0;
}

.device-detail-sidebar,
.resource-content-grid > aside {
    gap: 14px;
}

.device-specifications h2,
.download-panel h2,
.resource-metadata h2,
.copyright-panel h2 {
    margin: 0 0 8px;
    font-size: 1.04rem;
}

.device-specifications h2 {
    padding: 9px;
}

.device-specifications dt,
.device-specifications dd,
.resource-metadata dt,
.resource-metadata dd {
    padding: 6px 8px;
    font-size: 0.68rem;
}

.download-panel,
.resource-metadata {
    padding: 12px;
}

.download-panel ol {
    gap: 7px;
    margin-bottom: 10px;
}

.download-panel li {
    gap: 2px;
    padding: 8px;
}

.copyright-panel {
    margin: 8px 0 24px;
    padding: 14px 16px;
}

.copyright-panel p {
    margin: 6px 0;
    font-size: 0.84rem;
}

.device-gallery,
.related-archive {
    margin: 22px 0 28px;
}

.device-gallery > div:last-child,
.related-archive > div:last-child {
    margin-top: 9px;
}

.device-gallery figure,
.related-archive article {
    padding: 11px;
}

.related-archive h2 {
    margin: 4px 0;
    font-size: 1.04rem;
}

.related-archive article > p:not(.section-kicker) {
    display: -webkit-box;
    margin: 4px 0 0;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.comment-section {
    width: min(800px, 100%);
    margin: 12px auto 38px;
    padding-top: 18px;
}

.comment-section > header {
    margin-bottom: 16px;
}

.comment-section > header h2 {
    margin: 2px 0 4px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.comment-compose {
    margin-bottom: 18px;
    padding: 14px;
}

.comment-thread {
    padding: 16px 0;
}

.comment-content {
    margin: 8px 0;
    font-size: 0.9rem;
    line-height: 1.62;
}

.empty-state,
.auth-panel,
.account-panel {
    max-width: 680px;
    min-height: auto;
    padding: 34px 0 42px;
}

.empty-state h1,
.auth-panel h1,
.account-panel h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.copyright-page {
    max-width: 800px;
}

.copyright-page > p:not(.section-kicker) {
    font-size: 0.92rem;
    line-height: 1.72;
}

.auth-panel form {
    gap: 5px;
    padding: 15px 0;
}

.auth-panel input {
    margin-bottom: 7px;
    font-size: 0.9rem;
}

.auth-step {
    margin-top: 18px;
}

.account-panel {
    padding-top: 32px;
}

.account-details {
    margin: 18px 0;
}

.account-details div {
    padding: 8px 0;
}

.account-actions {
    margin-bottom: 18px;
}

.favorite-list,
.own-comment-list {
    margin: 18px 0;
}

.favorite-list > article,
.own-comment-list > article {
    padding: 14px 0;
}

.favorite-list h2 {
    font-size: 1.25rem;
}

.site-footer {
    padding: 10px 0 0;
    font-size: 0.64rem;
}

@media (hover: hover) and (pointer: fine) {
    .article-list > article:hover,
    .resource-list > article:hover {
        padding: 14px 10px 14px 44px;
        background: rgb(248 243 231 / 0.74);
    }

    .search-results > article:hover {
        padding: 13px 10px 13px 44px;
        background: rgb(248 243 231 / 0.74);
    }

    .device-list > article:hover {
        background: rgb(248 243 231 / 0.74);
    }
}

@media (max-width: 900px) {
    .frontpage-top {
        grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr);
    }

    .lead-story {
        padding-right: 24px;
    }

    .ledger-columns {
        grid-template-columns: 1fr 1fr;
    }

    .ledger-column:nth-child(2) {
        border-right: 0;
    }

    .ledger-column:last-child {
        grid-column: 1 / -1;
        padding: 0 8px 4px;
        border-top: 3px double var(--rule);
    }

    .ledger-column:last-child ol {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
    }

    .device-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-shell,
    .narrow-shell {
        width: min(100% - 20px, var(--page-width));
        padding-top: 6px;
    }

    .edition-line {
        justify-content: space-between;
    }

    .edition-line span:first-child {
        display: inline;
        max-width: 52%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .masthead-core {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0;
    }

    .brand {
        font-size: clamp(2.45rem, 14vw, 3.5rem);
    }

    .masthead-search p {
        display: none;
    }

    .masthead-search label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .main-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        min-width: auto;
        min-height: 40px;
        padding: 7px 13px 6px;
        font-size: 0.75rem;
    }

    .frontpage-top {
        grid-template-columns: 1fr;
    }

    .lead-story {
        padding: 20px 7px 22px;
    }

    .lead-story h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .quick-index {
        padding: 16px 7px 17px;
        border-top: 1px solid var(--rule-light);
        border-left: 0;
    }

    .quick-index header {
        padding-right: 0;
    }

    .ledger-heading {
        align-items: start;
        flex-direction: column;
        gap: 5px;
    }

    .ledger-columns {
        grid-template-columns: 1fr;
    }

    .ledger-column,
    .ledger-column:first-child,
    .ledger-column:last-child {
        grid-column: auto;
        padding: 0 7px 4px;
        border-top: 3px double var(--rule);
        border-right: 0;
    }

    .ledger-column:first-child {
        border-top: 0;
    }

    .ledger-column:last-child ol {
        display: block;
    }

    .archive-heading {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 14px 0 16px;
    }

    .archive-heading .section-kicker {
        grid-row: auto;
        padding-top: 0;
    }

    .archive-heading h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .article-list > article,
    .article-list > article:not(:has(img)),
    .resource-list > article,
    .resource-list > article:not(:has(img)) {
        gap: 12px;
        padding: 13px 4px 13px 36px;
    }

    .article-list > article {
        grid-template-columns: minmax(84px, 112px) minmax(0, 1fr);
    }

    .article-list > article:not(:has(img)),
    .resource-list > article:not(:has(img)) {
        grid-template-columns: 1fr;
    }

    .resource-list > article {
        grid-template-columns: minmax(80px, 104px) minmax(0, 1fr);
    }

    .article-list > article::before,
    .resource-list > article::before,
    .search-results > article::before {
        left: 4px;
    }

    .article-list h2,
    .resource-list h2 {
        font-size: clamp(1.08rem, 4.8vw, 1.35rem);
    }

    .article-list p,
    .resource-list p {
        font-size: 0.76rem;
        -webkit-line-clamp: 2;
    }

    .article-byline span {
        display: none;
    }

    .public-search-form {
        grid-template-columns: 1fr;
    }

    .public-search-actions {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .article-detail h1,
    .device-hero h1,
    .resource-hero h1 {
        font-size: clamp(2rem, 9.5vw, 3rem);
    }

    .device-hero,
    .resource-hero,
    .device-content-grid,
    .resource-content-grid {
        grid-template-columns: 1fr;
    }

    .article-detail > header,
    .article-detail > header:not(:has(.article-cover)) {
        grid-template-columns: 1fr;
    }

    .article-detail > header > :not(.article-cover),
    .article-cover {
        grid-column: 1;
    }

    .article-cover {
        grid-row: auto;
        width: min(100%, 620px);
        max-height: 240px;
        margin-top: 12px;
    }

    .device-cover,
    .resource-cover {
        width: min(100%, 420px);
    }

    .device-content-grid,
    .resource-content-grid {
        gap: 22px;
    }

    .markdown-content {
        padding: 22px 0 28px;
        font-size: 0.97rem;
        line-height: 1.75;
    }

    .device-content-grid .markdown-content,
    .resource-content-grid .markdown-content {
        padding: 0;
    }

    .device-gallery > div:last-child,
    .related-archive > div:last-child {
        grid-template-columns: 1fr 1fr;
    }

    .notice-strip,
    .site-footer-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (max-width: 520px) {
    .edition-line {
        font-size: 0.55rem;
    }

    .masthead-core {
        min-height: 0;
    }

    .tagline {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lead-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .ledger-column li {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .list-toolbar {
        padding-right: 5px;
        padding-left: 5px;
    }

    .device-list > article {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 11px;
        padding: 12px 4px 12px 32px;
    }

    .device-list > article::before {
        left: 4px;
    }

    .device-card-meta div:nth-child(n + 3) {
        display: none;
    }

    .device-facts {
        grid-template-columns: 1fr;
    }

    .device-gallery > div:last-child,
    .related-archive > div:last-child {
        grid-template-columns: 1fr;
    }

    .markdown-content table {
        display: block;
        overflow-x: auto;
    }

    .comment-field-meta {
        align-items: flex-end;
        flex-direction: column;
        gap: 4px;
    }

    .favorite-list > article {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
    }

    .favorite-list img {
        width: 96px;
        height: 72px;
    }
}

/* Phase 16 · shared public alignment grid */
.article-index,
.article-detail,
.device-index,
.device-shell main,
.resource-index,
.resource-shell main,
.search-page {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.device-list {
    grid-template-columns: 1fr;
}

.markdown-content,
.comment-section {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.related-archive > div:last-child {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Phase 17 · balanced archive bands and empty ledgers */
.archive-heading {
    grid-template-columns: 170px minmax(260px, 1fr) minmax(240px, 0.85fr);
    align-items: stretch;
    gap: 0 24px;
    padding: 14px 0 16px;
}

.archive-heading .section-kicker {
    display: flex;
    grid-row: auto;
    align-items: center;
    min-height: 64px;
    margin: 0;
    padding: 0 22px 0 0;
    border-right: 1px solid var(--rule-faint);
}

.archive-heading h1 {
    align-self: center;
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    line-height: 1.08;
}

.archive-heading > p:last-child {
    display: flex;
    align-items: center;
    max-width: none;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--rule-faint);
    font-size: 0.78rem;
    line-height: 1.6;
}

.empty-archive.empty-archive {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 72px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-bottom: 1px solid var(--rule-light);
    color: var(--ink-soft);
    text-align: left;
    -webkit-line-clamp: unset;
}

.empty-archive > span {
    display: flex;
    align-items: center;
}

.empty-archive > span:first-child {
    padding: 0 10px;
    border-right: 1px solid var(--rule-faint);
    color: var(--accent);
    font: 750 0.62rem/1 var(--ui-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

.empty-archive > span:last-child {
    padding: 0 24px;
}

@media (max-width: 760px) {
    .archive-heading {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 12px 0 14px;
    }

    .archive-heading .section-kicker {
        display: block;
        min-height: 0;
        padding: 0;
        border-right: 0;
    }

    .archive-heading h1 {
        margin: 3px 0 6px;
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .archive-heading > p:last-child {
        display: block;
        padding: 0;
        border-left: 0;
    }

    .empty-archive.empty-archive {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 64px;
    }

    .empty-archive > span:first-child {
        justify-content: center;
        padding: 0 6px;
    }

    .empty-archive > span:last-child {
        padding: 0 12px;
    }
}

/* Phase 18 · consistent entry hit areas and populated homepage ledgers */
.lead-title-link {
    color: inherit;
    text-decoration-color: rgb(124 45 34 / 46%);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition:
        color 140ms var(--ease-out),
        text-decoration-color 140ms var(--ease-out);
}

.lead-title-link:hover,
.lead-title-link:focus-visible {
    color: var(--accent);
    text-decoration-color: currentcolor;
}

.ledger-columns {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.clickable-entry {
    position: relative;
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out),
        color 140ms var(--ease-out);
}

.entry-hit-link::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
}

.clickable-entry a:not(.entry-hit-link),
.clickable-entry form,
.clickable-entry button {
    position: relative;
    z-index: 2;
}

.clickable-entry:has(.entry-hit-link:focus-visible) {
    background: var(--paper-raised);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.entry-hit-link:focus-visible {
    outline: 0;
}

@media (hover: hover) and (pointer: fine) {
    .clickable-entry:hover {
        background: var(--paper-raised);
    }

    .clickable-entry:hover .entry-hit-link {
        color: var(--accent);
        text-decoration-color: currentcolor;
    }
}

@media (max-width: 900px) and (min-width: 761px) {
    .ledger-columns {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    }

    .ledger-column,
    .ledger-column:nth-child(2),
    .ledger-column:last-child {
        grid-column: auto;
        padding: 0 16px 4px;
        border-top: 0;
        border-right: 1px solid var(--rule-faint);
    }

    .ledger-column:first-child {
        padding-left: 8px;
    }

    .ledger-column:last-child {
        padding-right: 8px;
        border-right: 0;
    }

    .ledger-column:last-child ol {
        display: block;
    }
}

/* Phase 20 · shared archive quick filters and dense device contact sheet */
.archive-quick-filters {
    border-bottom: 1px solid var(--rule-light);
    background: rgb(250 246 234 / 42%);
    font-family: var(--ui-font);
}

.archive-quick-filters > header {
    display: flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    border-bottom: 1px solid var(--rule-faint);
}

.archive-quick-filters h2 {
    display: flex;
    min-width: 0;
    align-items: baseline;
    margin: 0;
    white-space: nowrap;
    font: 750 0.75rem/1.2 var(--ui-font);
    letter-spacing: 0.04em;
}

.archive-quick-filters h2 span {
    margin-right: 10px;
    color: var(--accent);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
}

.archive-quick-filters > header > a {
    display: inline-flex;
    min-width: max-content;
    min-height: 36px;
    align-items: center;
    margin-left: auto;
    padding: 0 6px;
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 700;
    text-underline-offset: 3px;
}

.archive-quick-filters dl {
    margin: 0;
    padding: 0;
}

.archive-quick-filters dl > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    min-width: 0;
    min-height: 32px;
    align-items: start;
}

.archive-quick-filters dl > div + div {
    border-top: 1px dotted var(--rule-faint);
}

.archive-quick-filters dt {
    display: flex;
    min-height: 32px;
    align-items: center;
    padding: 0 8px 0 12px;
    color: var(--ink-soft);
    font-size: 0.61rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.archive-quick-filters dt::after {
    margin-left: 3px;
    color: var(--ink-faint);
    content: ":";
}

.archive-quick-filters dd {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 2px;
    margin: 0;
    padding-right: 8px;
}

.archive-filter-option {
    display: inline-flex;
    min-width: max-content;
    min-height: 32px;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 650;
    text-decoration: none;
    text-underline-offset: 4px;
    transition:
        background-color 140ms var(--ease-out),
        color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.archive-filter-option small {
    color: var(--ink-faint);
    font-size: 0.55rem;
    font-variant-numeric: tabular-nums;
}

.archive-filter-option small::before {
    content: "(";
}

.archive-filter-option small::after {
    content: ")";
}

.archive-filter-option.is-active {
    background: var(--accent);
    color: var(--paper-raised);
    text-decoration: none;
}

.archive-filter-option.is-active small {
    color: inherit;
}

.archive-filter-option:focus-visible {
    outline-offset: -2px;
}

.archive-filter-option:active,
.archive-quick-filters > header > a:active {
    transform: scale(0.98);
}

.device-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    border-top: 0;
    counter-reset: device-entry;
}

.device-list > .list-toolbar,
.device-list > .empty-archive {
    grid-column: 1 / -1;
}

.device-list > article {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    min-width: 0;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    counter-increment: device-entry;
}

.device-list > article::before {
    top: 8px;
    left: 8px;
    z-index: 3;
    display: grid;
    min-width: 24px;
    min-height: 20px;
    place-items: center;
    padding: 0 4px;
    border: 1px solid rgb(58 55 47 / 28%);
    background: rgb(250 246 234 / 90%);
    color: var(--accent);
    line-height: 1;
    pointer-events: none;
}

.device-card-image {
    position: relative;
    z-index: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    background: var(--paper-dark);
}

.device-card-image img {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.device-card-content {
    position: static;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 9px 7px;
    background: rgb(31 29 25 / 88%);
    color: var(--paper-raised);
    pointer-events: none;
}

.device-card-content > .section-kicker {
    max-width: 100%;
    margin: 0 0 2px;
    overflow: hidden;
    color: rgb(239 185 170);
    font-size: 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-list .device-card-content h2 {
    display: -webkit-box;
    margin: 0 0 3px;
    overflow: hidden;
    font-size: clamp(0.88rem, 1.35vw, 1.08rem);
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.device-list .device-card-content h2 a {
    color: var(--paper-raised);
    text-decoration-color: rgb(250 246 234 / 55%);
    text-underline-offset: 3px;
    pointer-events: auto;
}

.device-list .device-card-content > .device-card-summary {
    display: none;
}

.device-card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0;
    margin-top: 0;
    overflow: hidden;
    color: rgb(250 246 234 / 78%);
}

.device-card-meta div {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    gap: 3px;
    padding: 0 5px;
    border: 0;
    border-left: 1px solid rgb(250 246 234 / 24%);
    font-size: 0.48rem;
    line-height: 1.35;
    white-space: nowrap;
}

.device-card-meta div:first-child {
    padding-left: 0;
    border-left: 0;
}

.device-card-meta dt {
    min-width: 0;
    color: rgb(250 246 234 / 58%);
}

.device-card-meta dd {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
    .archive-filter-option:hover {
        background: var(--paper-dark);
        color: var(--accent);
    }

    .archive-filter-option.is-active:hover {
        background: var(--accent-dark);
        color: var(--paper-raised);
    }

    .device-list > article:hover {
        padding: 0;
    }

    .device-list > article:hover .entry-hit-link {
        color: #fffdf6;
        text-decoration-color: currentcolor;
    }

    .device-list > article:hover .device-card-image {
        filter: saturate(0.96) contrast(1.04);
    }
}

@media (max-width: 760px) {
    .archive-quick-filters > header,
    .archive-quick-filters > header > a,
    .archive-quick-filters dl > div,
    .archive-quick-filters dt,
    .archive-filter-option {
        min-height: 40px;
    }

    .archive-quick-filters dl > div {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .archive-quick-filters dt {
        padding: 0 8px;
    }

    .device-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .archive-quick-filters > header {
        padding-left: 8px;
    }

    .archive-quick-filters h2 span {
        display: none;
    }

    .archive-filter-option {
        padding: 0 8px;
    }

    .device-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .device-card-content {
        padding: 7px 8px 6px;
    }

    .device-list .device-card-content h2 {
        font-size: clamp(0.84rem, 4.4vw, 1rem);
    }

    .device-list .device-card-meta div:nth-child(n + 3) {
        display: none;
    }
}

/* Phase 21 · locally hosted typographic icon system */
.fa-solid {
    flex: 0 0 auto;
}

.masthead-search button,
.public-search-form button,
.favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.masthead-search button,
.public-search-form button {
    gap: 8px;
}

.favorite-button {
    gap: 6px;
}

.masthead-search button .fa-solid,
.public-search-form button .fa-solid,
.favorite-button .fa-solid {
    color: inherit;
    font-size: 0.78em;
}

.main-nav a {
    gap: 8px;
}

.main-nav a .nav-index {
    color: var(--ink-faint);
    font-size: 0.57rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.main-nav a .nav-icon {
    width: 1.15em;
    color: var(--accent);
    font-size: 0.72rem;
    text-align: center;
}

.main-nav a .nav-label {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.main-nav a[aria-current="page"] .nav-index {
    color: var(--accent);
}

.site-footer a .fa-solid {
    margin-right: 4px;
    color: var(--accent);
    font-size: 0.82em;
}

.quick-index nav a {
    grid-template-columns: 24px 28px minmax(0, 1fr) 16px;
    gap: 8px;
}

.quick-index nav .quick-index-icon,
.quick-index nav .quick-index-arrow {
    font-family: var(--fa-style-family, "Font Awesome 7 Free");
    font-style: normal;
    font-weight: 900;
}

.quick-index nav .quick-index-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--rule-faint);
    background: var(--paper-inset);
    color: var(--accent);
    font-size: 0.68rem;
}

.quick-index nav .quick-index-arrow {
    justify-self: end;
    color: var(--ink-faint);
    font-size: 0.58rem;
}

.quick-index nav a:hover .quick-index-icon {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--paper-raised);
}

.quick-index nav a:hover .quick-index-arrow {
    color: var(--accent);
}

.quick-index-note .fa-solid {
    margin-right: 6px;
    color: var(--accent);
}

.ledger-column header h3,
.ledger-column header a,
.notice-strip strong,
.icon-label,
.list-toolbar > span,
.archive-quick-filters > header > a,
.device-specifications h2,
.download-panel h2,
.resource-metadata h2,
.copyright-panel h2,
.comment-section > header h2 {
    display: inline-flex;
    align-items: center;
}

.ledger-column header h3,
.ledger-column header a,
.notice-strip strong,
.icon-label,
.list-toolbar > span,
.archive-quick-filters > header > a,
.device-specifications h2,
.download-panel h2,
.resource-metadata h2,
.copyright-panel h2,
.comment-section > header h2 {
    gap: 6px;
}

.ledger-column header h3 .fa-solid,
.notice-strip strong .fa-solid,
.icon-label .fa-solid,
.list-toolbar .fa-solid,
.device-specifications h2 .fa-solid,
.download-panel h2 .fa-solid,
.resource-metadata h2 .fa-solid,
.copyright-panel h2 .fa-solid,
.comment-section > header h2 .fa-solid {
    color: var(--accent);
    font-size: 0.82em;
}

.ledger-column header a .fa-solid {
    font-size: 0.72em;
}

.archive-quick-filters h2 {
    align-items: center;
}

.archive-quick-filters h2 > .fa-solid {
    margin-right: 7px;
    color: var(--accent);
    font-size: 0.7rem;
}

.archive-quick-filters > header > a .fa-solid {
    font-size: 0.72rem;
}

.list-toolbar > span:first-child {
    color: var(--ink-soft);
    font-weight: 750;
}

@media (max-width: 520px) {
    .main-nav a {
        min-width: 132px;
        gap: 7px;
        padding-inline: 10px;
    }

    .quick-index nav a {
        grid-template-columns: 22px 26px minmax(0, 1fr) 14px;
        gap: 7px;
    }

    .quick-index nav .quick-index-icon {
        width: 26px;
        height: 26px;
    }

    .list-toolbar > span:last-child .fa-solid {
        display: none;
    }
}

/* Phase 22 · unified article metadata and readable summaries */
.article-list .article-summary {
    max-width: none;
    margin-bottom: 8px;
    line-height: 1.62;
    text-wrap: pretty;
    -webkit-line-clamp: 3;
}

.article-basic-meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 18px;
    color: var(--ink-faint);
    font: 0.62rem/1.45 var(--ui-font);
}

.article-meta-item,
.article-meta-links {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
}

.article-meta-item {
    gap: 5px;
}

.article-meta-links {
    gap: 4px 8px;
}

.article-basic-meta .fa-solid {
    width: 1.08em;
    color: var(--accent);
    font-size: 0.9em;
    text-align: center;
}

.article-meta-label {
    color: var(--ink-soft);
    font-weight: 750;
}

.article-basic-meta a {
    color: var(--accent);
    font-weight: 650;
    text-underline-offset: 3px;
}

.article-basic-meta time {
    font-variant-numeric: tabular-nums;
}

.article-detail .article-deck {
    max-width: none;
    margin-bottom: 12px;
    line-height: 1.68;
    text-wrap: pretty;
}

.article-basic-meta-detail {
    max-width: 1080px;
    margin: 0 0 9px;
    padding: 8px 0;
    border-top: 1px dotted var(--rule-faint);
    border-bottom: 1px dotted var(--rule-faint);
}

.comment-compose h3,
.comment-compose button,
.reply-compose summary,
.reply-compose button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comment-compose h3 .fa-solid,
.reply-compose summary .fa-solid {
    color: var(--accent);
    font-size: 0.78em;
}

.comment-compose button .fa-solid,
.reply-compose button .fa-solid {
    color: inherit;
    font-size: 0.76em;
}

@media (max-width: 760px) {
    .article-list .article-summary {
        -webkit-line-clamp: 2;
    }

    .article-basic-meta {
        gap: 4px 12px;
        font-size: 0.58rem;
    }

    .article-basic-meta-detail {
        padding: 7px 0;
    }
}

/* I18N · compact archive-language selector */
.language-selector {
    display: inline-flex;
    min-height: 30px;
    align-items: stretch;
    margin-left: 3px;
    border-left: 1px solid var(--rule-light);
    font-family: var(--ui-font);
    letter-spacing: 0.06em;
    line-height: 1;
}

.language-selector-label,
.language-option {
    display: inline-grid;
    min-width: 34px;
    place-items: center;
    padding: 0 7px;
}

.language-selector-label {
    min-width: 38px;
    color: var(--ink-faint);
    font-size: 0.52rem;
    font-weight: 700;
}

.language-option {
    border-left: 1px solid var(--rule-faint);
    color: var(--accent);
    font-size: 0.59rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 140ms ease-out, background-color 140ms ease-out;
}

a.language-option:hover {
    background: var(--paper-inset);
    color: var(--accent-dark);
}

a.language-option:active {
    background: var(--paper-inset);
}

a.language-option:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.language-option.current {
    box-shadow: inset 0 -2px var(--accent);
    background: var(--paper-inset);
    color: var(--ink);
}

.language-option.fallback {
    color: var(--ink-faint);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

a.language-option.fallback:hover,
a.language-option.fallback:focus-visible {
    color: var(--accent);
}

@media (max-width: 520px) {
    .language-selector > .language-selector-label:first-child {
        display: none;
    }

    .language-selector {
        margin-left: 1px;
    }

    .language-option {
        min-width: 32px;
        padding-inline: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .language-option {
        transition: none;
    }
}

/* Phase 25 · compact public form focus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--control-focus);
    outline: 2px solid var(--control-focus);
    outline-offset: -2px;
}

/* Phase 26 · support register and review handoff */
.masthead-support-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-right: 1px solid var(--rule-light);
    border-left: 1px solid var(--rule-light);
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.masthead-support-link:hover {
    background: var(--paper-inset);
    color: var(--accent-dark);
}

.masthead-support-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.masthead-support-link .fa-solid {
    font-size: 0.82em;
}

.support-page {
    padding-bottom: 36px;
}

.support-submit-page h1,
.support-submitted-page h1 {
    max-width: 960px;
    margin: 3px 0 10px;
    font-size: clamp(2.25rem, 5.8vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.support-submit-page > header > p:last-child,
.support-submitted-page > p {
    max-width: 760px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
    line-height: 1.7;
}

.support-content {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-top: 34px;
    padding-bottom: 42px;
}

.support-content h2:first-child {
    margin-top: 0;
}

.support-ledger-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    margin: 0;
    padding: 22px 0;
    border-top: 3px double var(--rule);
    border-bottom: 1px solid var(--rule-light);
}

.support-ledger-action h2 {
    margin: 2px 0 5px;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}

.support-ledger-action p:not(.section-kicker) {
    max-width: 680px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.65;
}

.support-action-links {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    font: 700 0.76rem/1.3 var(--ui-font);
}

.support-primary-action,
.support-order-form button {
    display: inline-flex;
    min-height: var(--form-control-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: white;
    font: 800 0.78rem/1 var(--ui-font);
    text-decoration: none;
}

.support-primary-action:hover,
.support-order-form button:hover {
    border-color: var(--accent-dark);
    background: var(--accent-dark);
    color: white;
}

.support-primary-action:focus-visible,
.support-order-form button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.support-updated {
    margin: 10px 0 0;
    color: var(--ink-faint);
    font: 0.62rem/1.5 var(--ui-font);
}

.support-updated span {
    margin-right: 8px;
    color: var(--ink-soft);
    font-weight: 700;
}

.support-submit-page,
.support-submitted-page {
    max-width: 760px;
    min-height: 52vh;
    margin: 0 auto;
    padding: 24px 0 42px;
}

.support-submit-page > header {
    padding: 30px 0 20px;
}

.support-order-form {
    display: grid;
    gap: 16px;
    margin: 18px 0 12px;
    padding: 20px 0;
    border-top: 3px double var(--rule);
    border-bottom: 1px solid var(--rule-light);
}

.support-order-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font: 750 0.76rem/1.4 var(--ui-font);
}

.support-order-field input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: #fffdf6;
    color: var(--ink);
    font: 0.98rem/1 var(--ui-font);
    letter-spacing: 0.035em;
}

.support-order-field .field-help {
    margin: 7px 0 2px;
}

.support-order-rules,
.support-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 4px 0 0;
    color: var(--ink-faint);
    font: 0.7rem/1.55 var(--ui-font);
}

.support-order-rules .fa-solid,
.support-privacy-note .fa-solid {
    margin-top: 0.26em;
    color: var(--accent);
}

.support-order-form button {
    width: max-content;
    cursor: pointer;
}

.support-submitted-page {
    padding-top: 58px;
    text-align: center;
}

.support-submitted-page > p {
    margin-right: auto;
    margin-left: auto;
}

.support-status-mark {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    margin: 0 auto 14px;
    border: 3px double var(--accent);
    color: var(--accent);
    font-size: 1.35rem;
}

.support-receipt {
    max-width: 560px;
    margin: 24px auto;
    border-top: 3px double var(--rule);
    font-family: var(--ui-font);
    text-align: left;
}

.support-receipt div {
    display: grid;
    grid-template-columns: 120px 1fr;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-light);
}

.support-receipt dt {
    color: var(--ink-faint);
    font-size: 0.7rem;
}

.support-receipt dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.support-countdown {
    padding-top: 2px;
    font-family: var(--ui-font);
}

.support-countdown strong {
    display: inline-block;
    min-width: 1.4em;
    color: var(--accent);
    font-size: 1.25em;
    font-variant-numeric: tabular-nums;
}

.support-browse-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 22px;
    font: 750 0.76rem/1.5 var(--ui-font);
}

.donation-history-list {
    margin: 20px 0;
    border-top: 3px double var(--rule);
}

.donation-history-list > article {
    padding: 14px 0;
    border-bottom: 1px dotted var(--rule-light);
}

.donation-history-list > article > header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font: 0.72rem/1.4 var(--ui-font);
}

.donation-history-list > article > header strong {
    color: var(--accent);
}

.donation-status-approved > header strong {
    color: #315f36;
}

.donation-history-list > article > header time,
.donation-history-id {
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.donation-history-list dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 18px;
    margin: 10px 0 0 62px;
    font: 0.72rem/1.55 var(--ui-font);
}

.donation-history-list dl div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
}

.donation-history-list dt {
    color: var(--ink-faint);
}

.donation-history-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.donation-order-number {
    font-weight: 700;
    letter-spacing: 0.025em;
}

@media (max-width: 760px) {
    .support-ledger-action {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .support-action-links {
        align-items: flex-start;
    }

    .support-submitted-page {
        padding-top: 38px;
    }

    .donation-history-list dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .edition-meta > time {
        display: none;
    }

    .masthead-support-link {
        min-height: 30px;
        padding-inline: 8px;
    }

    .support-submit-page h1,
    .support-submitted-page h1 {
        font-size: clamp(2.1rem, 11vw, 3.15rem);
    }

    .support-content {
        padding-top: 26px;
        padding-bottom: 34px;
    }

    .support-receipt div {
        grid-template-columns: 92px 1fr;
    }

    .donation-history-list > article > header {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .donation-history-list > article > header time {
        grid-column: 2;
    }

    .donation-history-list dl {
        margin-left: 56px;
    }

    .donation-history-list dl div {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Phase 30 · homepage community ledger and daily check-in */
.frontpage-community {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin: 24px 0 18px;
}

.recent-comments,
.daily-check-in {
    min-width: 0;
    margin: 0;
    border-top: 3px double var(--rule);
    border-bottom: 1px solid var(--rule-light);
    background: rgb(250 246 234 / 42%);
}

.recent-comments-heading,
.daily-check-in-heading {
    min-height: 96px;
    padding: 12px 10px 10px;
    border-bottom: 2px solid var(--rule);
}

.recent-comments-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.daily-check-in-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.recent-comments-heading h2,
.daily-check-in-heading h2 {
    margin: 1px 0 0;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.recent-comments-heading > p,
.daily-check-in-heading > div:first-child > p:last-child {
    margin: 3px 0 0;
    color: var(--ink-faint);
    font: 0.66rem/1.45 var(--ui-font);
}

.recent-comments-heading > p {
    flex: 0 0 auto;
    padding-bottom: 2px;
    text-align: right;
}

.recent-comments-list {
    display: grid;
    height: 246px;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.recent-comment-entry {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 2px 8px;
    align-items: center;
    min-width: 0;
    padding: 5px 8px 5px 6px;
    border-bottom: 1px dotted var(--rule-faint);
    font-family: var(--ui-font);
}

.recent-comments-list.has-columns .recent-comment-entry:nth-child(odd) {
    border-right: 1px solid var(--rule-faint);
}

.recent-comment-entry > div {
    min-width: 0;
}

.recent-comment-folio,
.recent-comment-entry > time {
    color: var(--ink-faint);
    font-size: 0.56rem;
    font-variant-numeric: tabular-nums;
}

.recent-comment-folio {
    align-self: start;
    padding-top: 2px;
    color: var(--accent);
    font-weight: 750;
}

.recent-comment-entry > time {
    align-self: start;
    padding-top: 2px;
    white-space: nowrap;
}

.recent-comment-meta {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    color: var(--ink-faint);
    font-size: 0.61rem;
    line-height: 1.35;
    white-space: nowrap;
}

.recent-comment-meta strong {
    max-width: 76px;
    flex: 0 1 auto;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.65rem;
    text-overflow: ellipsis;
}

.recent-comment-meta > span {
    flex: 0 0 auto;
}

.recent-comment-target {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    color: var(--accent);
    font-weight: 700;
    text-decoration-color: rgb(122 47 36 / 42%);
    text-underline-offset: 2px;
}

.recent-comment-target span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-comment-target-icon {
    flex: 0 0 auto;
    font-size: 0.55rem;
}

.recent-comment-excerpt {
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-comments-empty {
    display: grid;
    height: 246px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    padding: 14px 8px;
    color: var(--ink-faint);
    font-family: var(--ui-font);
}

.recent-comments-empty span {
    color: var(--accent);
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

.recent-comments-empty p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.55;
}

.daily-check-in-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--ui-font);
}

.daily-check-in-summary > span {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.daily-check-in-summary form {
    margin: 0;
}

.daily-check-in-button,
.check-in-dialog-login,
.check-in-dialog-actions button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: var(--accent);
    color: var(--paper-raised);
    font: 750 0.76rem/1 var(--ui-font);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 140ms var(--ease-out),
        transform 120ms var(--ease-out);
}

.daily-check-in-button:hover,
.check-in-dialog-login:hover {
    background: var(--accent-dark);
}

.daily-check-in-button:active,
.check-in-dialog-login:active,
.check-in-dialog-actions button:active {
    transform: scale(0.97);
}

.daily-check-in-button.is-complete,
.daily-check-in-button:disabled {
    border-color: var(--positive);
    background: transparent;
    color: var(--positive);
    cursor: default;
}

.daily-check-in-roster {
    height: 246px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--rule-light) transparent;
    scrollbar-width: thin;
}

.daily-check-in-roster:focus-visible {
    outline: 2px solid var(--control-focus);
    outline-offset: -2px;
}

.daily-check-in-roster ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.daily-check-in-roster li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 41px;
    padding: 7px 12px 7px 8px;
    border-bottom: 1px dotted var(--rule-faint);
    font-family: var(--ui-font);
}

.daily-check-in-folio,
.daily-check-in-roster time {
    color: var(--ink-faint);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
}

.daily-check-in-roster strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-check-in-empty {
    display: grid;
    min-height: 100%;
    place-items: center;
    margin: 0;
    padding: 20px;
    color: var(--ink-faint);
    font: 0.74rem/1.6 var(--ui-font);
    text-align: center;
}

.check-in-login-dialog {
    width: min(430px, calc(100% - 32px));
    padding: 0;
    border: 3px double var(--rule);
    border-radius: 0;
    background: var(--paper-raised);
    color: var(--ink);
}

.check-in-login-dialog::backdrop {
    background: rgb(33 31 26 / 58%);
}

.check-in-login-dialog form {
    margin: 0;
    padding: 24px;
}

.check-in-login-dialog h2 {
    margin: 3px 0 8px;
    font-size: 1.55rem;
    letter-spacing: -0.025em;
}

.check-in-login-dialog form > p:not(.section-kicker) {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.65;
}

.check-in-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid var(--rule-light);
}

.check-in-dialog-actions button {
    border-color: var(--rule);
    background: transparent;
    color: var(--ink);
}

.check-in-dialog-actions button:hover {
    background: var(--paper-inset);
}

.account-check-in-count {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

@media (max-width: 760px) {
    .daily-check-in-heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
    }

    .daily-check-in-summary {
        justify-content: space-between;
    }
}

@media (max-width: 900px) {
    .frontpage-community {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 620px) {
    .recent-comments-heading {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    .recent-comments-heading > p {
        padding-bottom: 0;
        text-align: left;
    }

    .recent-comments-list {
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        overflow: visible;
    }

    .recent-comment-entry {
        min-height: 49px;
    }

    .recent-comments-list.has-columns .recent-comment-entry:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 520px) {
    .daily-check-in-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .daily-check-in-button {
        min-height: 44px;
    }

    .daily-check-in-roster {
        height: 232px;
    }

    .check-in-dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .check-in-dialog-login,
    .check-in-dialog-actions button {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-check-in-button,
    .check-in-dialog-login,
    .check-in-dialog-actions button {
        transition: background-color 140ms var(--ease-out);
    }
}

/* Quiet metadata beneath the complete navigation frame. */
.announcement-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 4px 0 8px;
  padding: 0 8px;
  border: 1px dashed color-mix(in srgb, var(--rule-faint) 60%, transparent);
  background: color-mix(in srgb, var(--paper-raised) 45%, transparent);
  color: var(--ink-faint);
  font-size: 12px;
}
.announcement-label {
  flex: none;
  font-size: 11px;
  font-weight: 400;
}
.announcement-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.announcement-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
}
.announcement-items li {
  flex: none;
  max-width: 100%;
}
.announcement-items a {
  display: block;
  line-height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}
.announcement-strip.is-enhanced .announcement-items {
  display: block;
  overflow: hidden;
}
.announcement-strip.is-enhanced li:not([hidden]) {
  animation: announcement-enter 180ms var(--ease-out);
}
.announcement-items a:hover,
.announcement-items a:focus-visible {
  color: var(--ink-soft);
  text-decoration: underline;
}
.announcement-strip button {
  flex: none;
  min-width: 28px;
  min-height: 26px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.announcement-strip button:hover {
  color: var(--ink-soft);
}
.announcement-strip [hidden],
.announcement-dialog [hidden] {
  display: none;
}
.announcement-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px;
  border: 3px double var(--rule);
  border-radius: 0;
  background: var(--paper-raised);
  color: var(--ink);
  overflow: auto;
}
.announcement-dialog::backdrop {
  background: rgb(33 31 26 / 50%);
}
.announcement-dialog-heading,
.announcement-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.announcement-dialog-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-faint);
}
.announcement-dialog .section-kicker,
.announcement-dialog form {
  margin: 0;
}
.announcement-dialog h2 {
  font-size: 24px;
  line-height: 1.4;
  margin: 20px 0 8px;
  overflow-wrap: anywhere;
}
.announcement-dialog time,
.announcement-detail time {
  font-size: 12px;
  color: var(--ink-faint);
}
.announcement-dialog .markdown-content {
  margin: 20px 0;
  overflow-wrap: anywhere;
}
.announcement-dialog .markdown-content img {
  max-width: 100%;
  height: auto;
}
.announcement-dialog-actions {
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-faint);
  flex-wrap: wrap;
}
.announcement-dialog button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rule-light);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.announcement-dialog button:hover {
  background: var(--paper-inset);
  border-color: var(--accent);
}
.announcement-dialog-actions form button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-raised);
}
.announcement-dialog-actions form button:hover {
  background: var(--accent-dark);
}
.announcement-detail {
  margin: 24px 0;
  overflow-wrap: anywhere;
}
.announcement-detail > header {
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.announcement-detail h1 {
  margin: 8px 0 12px;
  font-size: clamp(26px, 4vw, 40px);
}
@media (max-width: 520px) {
  .announcement-dialog {
    padding: 16px;
  }
}

.announcement-dialog #announcement-popup-title:focus {
  outline: none;
}

@keyframes announcement-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-strip.is-enhanced li:not([hidden]) {
    animation: none;
  }
}

/* Complete archive images, with one shared native-dialog detail preview. */
.image-preview-trigger {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: zoom-in;
}

.image-preview-trigger > img {
    display: block;
}

.image-preview-trigger:is(.article-cover, .device-cover, .resource-cover) {
    width: 100%;
    border: 1px solid var(--rule-light);
    background: var(--paper-raised);
}

.image-preview-trigger:is(.article-cover, .device-cover, .resource-cover) > img {
    width: 100%;
    height: 100%;
    max-height: inherit;
    aspect-ratio: inherit;
    object-fit: contain;
}

.device-gallery .image-preview-trigger {
    width: 100%;
}

.image-preview-trigger:hover,
.image-preview-trigger:active {
    background: var(--paper-raised);
    color: inherit;
}

.image-preview-link {
    cursor: zoom-in;
}

html.image-preview-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.image-preview-dialog {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: hidden;
    border: 0;
    background: var(--ink);
    color: var(--paper-raised);
    cursor: zoom-out;
}

.image-preview-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
}

.image-preview-dialog::backdrop {
    background: var(--ink);
}

.image-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.image-preview-toolbar p {
    display: -webkit-box;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    font: 500 0.875rem/1.5 var(--ui-font);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.image-preview-close {
    display: grid;
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--paper-raised) 40%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--paper-raised) 8%, transparent);
    color: var(--paper-raised);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 120ms var(--ease-out);
}

.image-preview-close:hover,
.image-preview-close:active {
    background: color-mix(in srgb, var(--paper-raised) 20%, transparent);
    color: var(--paper-raised);
}

.image-preview-close:focus-visible {
    outline: 2px solid var(--paper-raised);
    outline-offset: 4px;
}

.image-preview-stage {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
}

.image-preview-media {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.image-preview-media[hidden],
.image-preview-error[hidden] {
    display: none;
}

.image-preview-error,
.image-preview-hint {
    margin: 0;
    color: color-mix(in srgb, var(--paper-raised) 80%, transparent);
    font: 400 0.75rem/1.5 var(--ui-font);
    text-align: center;
}

@media (max-width: 760px) {
    .image-preview-trigger:is(.device-cover, .resource-cover) {
        width: min(100%, 420px);
    }

    .image-preview-trigger.article-cover {
        width: min(100%, 620px);
    }
}