@font-face {
    font-family: 'Pinyon Script';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/assets/fonts/pinyon-script-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: block;
    src: url('/assets/fonts/lora-normal-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: block;
    src: url('/assets/fonts/lora-italic-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/assets/fonts/courier-prime-latin.woff2') format('woff2');
}

:root {
    color-scheme: light;
    --paper: #f7f2e8;
    --paper-deep: #efe3cf;
    --ink: #15374a;
    --ink-soft: #2f6074;
    --green: #8ccf3f;
    --cyan: #59b8c9;
    --orange: #f5a23b;
    --yellow: #ffd85a;
    --line: #1d485c;
    --white: #fffaf0;
    --shadow: 10px 10px 0 #1d485c;
    --max: 1180px;
    /* Text colour guaranteed to read on any accent background (yellow/orange/green/cyan).
       These colours stay bright in dark mode, so --ink (which flips to near-white) cannot
       be used directly on them. --on-accent is always the original dark ink value. */
    --on-accent: #15374a;
    /* .form-status notice backgrounds. Defined per-theme (not hardcoded on the
       class itself) because --ink flips from dark to near-white in dark mode —
       a background that stays light there puts light text on a light surface. */
    --notice-success-bg: #e9f7f2;
    --notice-error-bg: #fff1cd;
    --notice-draft-bg: #fff4dd;
    --notice-archived-bg: #eef0f2;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0d1f2d;
        --paper-deep: #162a3a;
        --ink: #dde8ef;
        --ink-soft: #82afc8;
        --line: #3d7a9b;
        --shadow: 10px 10px 0 #3d7a9b;
        --white: #162a3a;
        --notice-success-bg: #16332c;
        --notice-error-bg: #3a2f12;
        --notice-draft-bg: #3a2c12;
        --notice-archived-bg: #22303a;
    }

    :root:not([data-theme="light"]) body {
        background:
            linear-gradient(90deg, rgba(200, 220, 235, 0.04) 1px, transparent 1px),
            linear-gradient(rgba(200, 220, 235, 0.04) 1px, transparent 1px),
            var(--paper);
        background-size: 32px 32px;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0d1f2d;
    --paper-deep: #162a3a;
    --ink: #dde8ef;
    --ink-soft: #82afc8;
    --line: #3d7a9b;
    --shadow: 10px 10px 0 #3d7a9b;
    --white: #162a3a;
    --notice-success-bg: #16332c;
    --notice-error-bg: #3a2f12;
    --notice-draft-bg: #3a2c12;
    --notice-archived-bg: #22303a;
}

html[data-theme="dark"] body {
    background:
        linear-gradient(90deg, rgba(200, 220, 235, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(200, 220, 235, 0.04) 1px, transparent 1px),
        var(--paper);
    background-size: 32px 32px;
}

/* ── Dark-mode overrides for hardcoded light-background elements ─────────
   These elements use literal colour values (not CSS vars) so the --white
   remap alone cannot fix them. We force dark surfaces + explicit text
   colour so content is always legible regardless of how dark mode is
   triggered (OS preference or the toggle button).
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .service-card:nth-child(2) {
        background: #0e2a22;
        color: var(--ink);
    }
    :root:not([data-theme="light"]) .service-card:nth-child(3) {
        background: #1f1a08;
        color: var(--ink);
    }
    :root:not([data-theme="light"]) .method-list li,
    :root:not([data-theme="light"]) .deliverable-list li {
        background: rgba(61, 122, 155, 0.15);
        color: var(--ink);
    }
    :root:not([data-theme="light"]) .note-card-accent {
        background: #2a2000;
        color: var(--ink);
    }
    :root:not([data-theme="light"]) .guide-card {
        background: var(--paper-deep);
        color: var(--ink);
    }
    :root:not([data-theme="light"]) .guide-card .guide-caption {
        color: var(--ink-soft);
    }
    /* Mission band / callout — hardcoded rgba warm-white background */
    :root:not([data-theme="light"]) .mission-band,
    :root:not([data-theme="light"]) .callout {
        background: var(--paper-deep);
        color: var(--ink);
    }
    /* Yellow chips — keep dark ink so text reads on bright yellow */
    :root:not([data-theme="light"]) .blog-category-strip a,
    :root:not([data-theme="light"]) .blog-chips a {
        color: #15374a;
    }
    /* ── Accent-background elements: force dark ink so text always reads ── */
    /* --orange backgrounds */
    :root:not([data-theme="light"]) .site-nav a:hover,
    :root:not([data-theme="light"]) .site-nav a[aria-current="page"],
    :root:not([data-theme="light"]) .button-primary {
        color: var(--on-accent);
    }
    /* --yellow backgrounds */
    :root:not([data-theme="light"]) .guide-panel::before,
    :root:not([data-theme="light"]) .post-action-btn[aria-expanded="true"] {
        color: var(--on-accent);
    }
    /* --green backgrounds */
    :root:not([data-theme="light"]) .brand-mark {
        color: var(--on-accent);
    }
}

[data-theme="dark"] .service-card:nth-child(2) {
    background: #0e2a22;
    color: var(--ink);
}
[data-theme="dark"] .service-card:nth-child(3) {
    background: #1f1a08;
    color: var(--ink);
}
[data-theme="dark"] .method-list li,
[data-theme="dark"] .deliverable-list li {
    background: rgba(61, 122, 155, 0.15);
    color: var(--ink);
}
[data-theme="dark"] .note-card-accent {
    background: #2a2000;
    color: var(--ink);
}
[data-theme="dark"] .guide-card {
    background: var(--paper-deep);
    color: var(--ink);
}
[data-theme="dark"] .guide-card .guide-caption {
    color: var(--ink-soft);
}
/* Mission band / callout — hardcoded rgba warm-white background */
[data-theme="dark"] .mission-band,
[data-theme="dark"] .callout {
    background: var(--paper-deep);
    color: var(--ink);
}
/* Yellow chips — keep dark ink so text reads on bright yellow */
[data-theme="dark"] .blog-category-strip a,
[data-theme="dark"] .blog-chips a {
    color: #15374a;
}
/* ── Accent-background elements: force dark ink so text always reads ── */
/* --orange backgrounds */
[data-theme="dark"] .site-nav a:hover,
[data-theme="dark"] .site-nav a[aria-current="page"],
[data-theme="dark"] .button-primary {
    color: var(--on-accent);
}
/* --yellow backgrounds */
[data-theme="dark"] .guide-panel::before,
[data-theme="dark"] .post-action-btn[aria-expanded="true"] {
    color: var(--on-accent);
}
/* --green backgrounds */
[data-theme="dark"] .brand-mark {
    color: var(--on-accent);
}

[data-theme="light"] {
    color-scheme: light;
}

.theme-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 var(--line);
    transition: background 0.15s;
}

.theme-toggle:hover {
    background: var(--paper-deep);
}

.post-comment-signin {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.post-comment-signin a {
    color: var(--ink);
    font-weight: 700;
}

.user-nav-link {
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(21, 55, 74, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(21, 55, 74, 0.05) 1px, transparent 1px),
        var(--paper);
    background-size: 32px 32px;
}

a {
    color: currentColor;
}

img {
    display: block;
    max-width: 100%;
}

iframe,
embed,
object,
video {
    max-width: 100%;
}

.skip-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    padding: 0.65rem 0.85rem;
    background: var(--ink);
    color: var(--white);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 4px solid var(--line);
    outline-offset: 4px;
}

.site-header,
.site-footer,
main > section {
    width: min(calc(100% - 2rem), var(--max));
    margin-inline: auto;
}

.site-header {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
}

.brand,
.site-nav,
.site-footer nav,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand {
    min-width: 12rem;
    text-decoration: none;
    font-weight: 900;
}

.brand-mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 3px solid var(--line);
    background: var(--green);
    color: var(--ink);
    box-shadow: 5px 5px 0 var(--line);
    font-size: 0.9rem;
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.2rem;
}

.brand-logo-dark {
    display: none;
}

[data-theme="dark"] .brand-logo-light {
    display: none;
}
[data-theme="dark"] .brand-logo-dark {
    display: block;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo-light {
        display: none;
    }
    :root:not([data-theme="light"]) .brand-logo-dark {
        display: block;
    }
}

.brand-text {
    max-width: 9rem;
    line-height: 1.05;
}

.site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.account-menu {
    position: relative;
}

.account-menu summary {
    list-style: none;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 4px 4px 0 var(--line);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
}

.account-menu-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.account-menu-icon {
    font-size: 1.3rem;
    font-weight: 900;
}

.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    z-index: 90;
    min-width: 14rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

.account-menu-link {
    display: block;
    padding: 0.55rem 0.7rem;
    border: 2px solid transparent;
    text-decoration: none;
    font-weight: 800;
}

.account-menu-link:hover {
    border-color: var(--line);
    background: var(--paper);
}

.account-menu-divider {
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 2px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-footer a {
    border-bottom: 2px solid transparent;
    font-weight: 800;
    text-decoration: none;
}

.site-footer a:hover {
    border-color: var(--orange);
}

.site-nav a {
    padding: 0.5rem 0.9rem;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--line);
    font-weight: 900;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: var(--orange);
    box-shadow: 2px 2px 0 var(--line);
    transform: translate(2px, 2px);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0.6rem 0.7rem;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--line);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--line);
}

.menu-toggle:hover {
    box-shadow: 2px 2px 0 var(--line);
    transform: translate(2px, 2px);
}

main {
    position: relative;
    z-index: 1;
}

.section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.75fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

.hero {
    min-height: calc(100svh - 7rem);
    padding: clamp(2rem, 6vw, 5rem) 0;
}

.eyebrow {
    margin: 0 0 0.8rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
    word-break: normal;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 0.95;
}

h1 {
    font-size: clamp(4rem, 8vw, 6.75rem);
    font-weight: 950;
}

h2 {
    font-size: clamp(2.1rem, 5vw, 5rem);
    font-weight: 950;
}

h3 {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.hero-statement,
.page-hero > p,
.mission-band > p,
.callout > p {
    max-width: 48rem;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.hero-statement {
    margin: 1.3rem 0 0;
}

.hero-actions {
    flex-wrap: wrap;
    margin-top: 2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 3px solid var(--line);
    box-shadow: 5px 5px 0 var(--line);
    font-weight: 950;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
    box-shadow: 2px 2px 0 var(--line);
    transform: translate(3px, 3px);
}

.button-primary {
    background: var(--orange);
    color: var(--ink);
}

.button-secondary {
    background: var(--white);
}

.guide-panel {
    position: relative;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    border: 4px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
    transform: rotate(1deg);
}

.guide-panel::before {
    position: absolute;
    top: -1rem;
    right: 1.25rem;
    padding: 0.25rem 0.7rem;
    border: 3px solid var(--line);
    background: var(--yellow);
    content: "guide";
    font-size: 0.85rem;
    font-weight: 950;
}

.guide-panel img {
    width: min(100%, 26rem);
    margin-inline: auto;
}

.guide-panel p {
    margin: 0.75rem 0 0;
    font-weight: 900;
    text-align: center;
}

.mission-band,
.callout {
    margin-block: 2rem;
    padding: clamp(1.5rem, 5vw, 4rem);
    border-block: 4px solid var(--line);
    background: rgba(255, 250, 240, 0.74);
}

.mission-band h2,
.section-heading h2 {
    max-width: 14ch;
}

.mission-band p:last-child,
.callout p {
    margin-bottom: 0;
}

.service-preview,
.proof-grid,
.page-hero,
.services-detail,
.notes-empty,
.contact-brief {
    padding: clamp(2.5rem, 6vw, 5.5rem) 0;
}

.managed-section {
    margin-block: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

.managed-section h2 {
    margin-top: 0;
}

.managed-section-body :last-child {
    margin-bottom: 0;
}

.content-cards {
    padding: clamp(2.5rem, 6vw, 5.5rem) 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

/* headings, CTAs, and anything else that isn't a card spans the full row */
.content-cards > :not(.content-card) {
    grid-column: 1 / -1;
}

.content-cards > h1,
.content-cards > h2,
.content-cards > h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.content-cards > p {
    margin-top: 1rem;
}

.content-card {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 3px solid var(--line);
    background: var(--paper-deep);
    box-shadow: 6px 6px 0 var(--line);
}

.content-card h3 {
    margin-top: 0;
}

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

.section-heading {
    display: grid;
    grid-template-columns: 0.45fr 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2rem;
}

.service-strip,
.services-detail,
.notes-empty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.service-card,
.service-detail,
.note-card {
    min-width: 0;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

.service-card {
    min-height: 19rem;
    padding: 1.25rem;
}

.service-card:nth-child(2) {
    background: #e9f7f2;
    transform: translateY(1.5rem);
}

.service-card:nth-child(3) {
    background: #fff1cd;
}

.service-number {
    display: inline-block;
    margin-bottom: 2.5rem;
    color: var(--ink-soft);
    font-weight: 950;
}

.text-link {
    display: inline-block;
    margin-top: 3rem;
    font-weight: 950;
    text-decoration-thickness: 0.18rem;
    text-underline-offset: 0.24rem;
}

.proof-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
}

.method-list,
.deliverable-list {
    display: grid;
    gap: 1rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.method-list li,
.deliverable-list li {
    padding: 1rem;
    border-left: 0.45rem solid var(--orange);
    background: rgba(255, 250, 240, 0.8);
}

.page-hero {
    min-height: 0;
}

.page-hero h1 {
    font-size: clamp(3.2rem, 8vw, 7rem);
}

.services-detail {
    grid-template-columns: 1fr;
}

.service-detail {
    display: grid;
    grid-template-columns: 0.85fr 1fr 0.9fr;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.service-kicker span {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 950;
}

.service-kicker h2 {
    font-size: clamp(2rem, 4vw, 4.2rem);
}

.service-summary {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 750;
}

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

.deliverable-list li {
    border-left-color: var(--cyan);
}

.notes-empty {
    grid-template-columns: 1.1fr 0.9fr;
}

.note-card {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.note-card h2 {
    font-size: clamp(2rem, 4vw, 4rem);
}

.note-card-accent {
    background: var(--yellow);
}

.contact-brief {
    max-width: 50rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
}

.contact-form-panel {
    min-width: 0;
}

.contact-heading {
    margin-bottom: 1.5rem;
}

.contact-heading h2 {
    font-size: clamp(2rem, 4vw, 4rem);
}

.contact-form {
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

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

.field {
    display: grid;
    gap: 0.4rem;
}

.field label {
    font-weight: 950;
}

.field label span,
.privacy-note {
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3rem;
    border: 3px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 0.75rem;
}

.field textarea {
    min-height: 12rem;
    resize: vertical;
}

.field-honeypot {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 5px 5px 0 var(--line);
}

.form-status h3 {
    margin-bottom: 0.5rem;
}

.form-status p,
.form-status ul {
    margin: 0;
}

.form-status ul {
    padding-left: 1.2rem;
}

.form-status-success {
    background: var(--notice-success-bg);
}

.form-status-error {
    background: var(--notice-error-bg);
}

.form-status-draft {
    background: var(--notice-draft-bg);
}

.form-status-archived {
    background: var(--notice-archived-bg);
}

.contact-form .button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 0 3rem;
    border-top: 3px solid var(--line);
}

.site-footer p,
.site-footer-text {
    max-width: 34rem;
    margin: 0;
}

.site-footer-text p {
    margin: 0 0 0.5rem;
}

.site-footer-text p:last-child {
    margin-bottom: 0;
}

.site-footer nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    align-self: flex-start;
    row-gap: 0.5rem;
}

@media (max-width: 860px) {
    .section-grid,
    .section-heading,
    .proof-grid,
    .service-detail,
    .contact-layout,
    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer {
        display: grid;
        align-items: start;
    }

    .site-header {
        position: relative;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }

    .brand {
        margin-inline-end: auto;
    }

    .menu-toggle {
        display: flex;
        order: 2;
    }

    .account-menu {
        order: 3;
    }

    .site-nav {
        display: none;
        order: 4;
        width: 100%;
    }

    .site-header.nav-open .site-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: -1rem;
        width: 100vw;
        max-width: 100vw;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 1rem;
        background: var(--paper);
        border-top: 3px solid var(--line);
        border-bottom: 3px solid var(--line);
        box-shadow: 0 4px 0 var(--line);
        z-index: 90;
    }

    .site-header.nav-open {
        z-index: 80;
    }

    .site-header.nav-open .site-nav a {
        width: 100%;
    }

    .site-footer nav {
        justify-content: flex-start;
    }

    .page-hero,
    .service-preview,
    .content-cards,
    .contact-brief {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .hero {
        min-height: auto;
        padding-top: 2rem;
    }

    .service-strip,
    .notes-empty,
    .content-cards {
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card:nth-child(2) {
        min-height: 0;
        transform: none;
    }

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

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

@media (max-width: 520px) {
    .site-header,
    .site-footer,
    main > section {
        width: min(calc(100% - 1rem), var(--max));
    }

    .brand {
        min-width: 0;
    }

    .site-header.nav-open .site-nav {
        left: -0.5rem;
    }

    .site-nav {
        gap: 0.55rem;
    }

    .site-nav a {
        font-size: 0.95rem;
    }

    h1 {
        font-size: clamp(3.4rem, 16vw, 4rem);
    }

    .page-hero h1 {
        font-size: clamp(2.55rem, 13vw, 4rem);
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        justify-content: center;
        width: 100%;
    }

    .guide-panel {
        box-shadow: 6px 6px 0 var(--line);
    }

    .blog-list {
        margin-bottom: 2rem;
    }

    .blog-category-grid {
        margin-bottom: 2rem;
    }

    .blog-post-footer {
        margin-bottom: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .button:hover,
    .guide-panel,
    .site-nav a,
    .site-nav a:hover,
    .menu-toggle,
    .menu-toggle:hover {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   Portfolio
   ============================================================ */

.gallery-page,
.collection-page,
.collection-detail-page,
.work-page {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 6rem);
}

.gallery-intro,
.collection-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.gallery-empty {
    padding: 1.5rem;
    border: 3px dashed var(--line);
    background: var(--white);
    font-weight: 700;
}

.gallery-section {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.gallery-section-header {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gallery-section-header .category-name {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.gallery-section-copy {
    margin: 0.35rem 0 0;
    color: var(--ink-soft);
    font-weight: 700;
    max-width: 52ch;
}

.gallery-section-link {
    font-weight: 950;
    text-decoration: underline;
    text-decoration-thickness: 0.18rem;
    text-underline-offset: 0.22rem;
    white-space: nowrap;
}

.section-rule {
    flex: 1;
    height: 4px;
    background: var(--line);
    min-width: 4rem;
}

.work-back {
    display: inline-block;
    font-weight: 950;
    text-decoration: underline;
    text-decoration-thickness: 0.18rem;
    text-underline-offset: 0.24rem;
}

/* Cards shared by gallery exhibits, "see more" works, and collections */
.artwork-card,
.exhibit-card,
.collection-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.artwork-card:hover,
.exhibit-card:hover,
.collection-card:hover {
    box-shadow: 3px 3px 0 var(--line);
    transform: translate(3px, 3px);
}

.artwork-thumb-wrap,
.collection-thumb-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 3px solid var(--line);
    background: var(--paper-deep);
}

.artwork-thumb-wrap img,
.collection-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collection-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--paper-deep) 0 12px, var(--paper) 12px 24px);
}

.exhibit-artwork-check.drag-over {
    outline: 2px dashed var(--line);
    outline-offset: 2px;
}

.artwork-meta,
.collection-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
}

.artwork-title,
.collection-card-name {
    font-weight: 950;
    font-size: 1.05rem;
}

.artwork-year {
    color: var(--ink-soft);
    font-weight: 800;
    font-size: 0.9rem;
}

.collection-card-desc {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.artwork-type {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Card grids */
.artwork-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

.artwork-card.size-large  { grid-column: span 6; }
.artwork-card.size-medium { grid-column: span 4; }
.artwork-card.size-wide   { grid-column: span 8; }
.artwork-card.size-small  { grid-column: span 3; }

.exhibits-grid,
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.portfolio-archive-listing {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.portfolio-listing-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.portfolio-listing-status {
    margin: 0;
    color: var(--ink-soft);
    font-weight: 800;
}

.portfolio-listing-sentinel {
    width: 100%;
    min-height: 1px;
}

.portfolio-listing-sentinel.is-hidden {
    display: none;
}

.gallery-see-more-btn {
    margin-top: 0.25rem;
}

.gallery-see-more-btn[hidden] {
    display: none;
}

/* Collection / exhibit detail header */
.collection-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.collection-detail-thumb {
    overflow: hidden;
    border: 3px solid var(--line);
    box-shadow: 6px 6px 0 var(--line);
}

.collection-detail-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.collection-detail-title {
    margin-bottom: 1rem;
}

.collection-detail-desc :last-child,
.work-description :last-child,
.work-placard-notes :last-child {
    margin-bottom: 0;
}

.collection-detail-desc iframe,
.work-description iframe {
    max-width: 100%;
}

/* Work detail */
.work-page .work-back {
    margin-bottom: 1.5rem;
}

.work-detail {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}

.work-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.work-title {
    max-width: none;
}

.work-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-weight: 800;
}

.work-cat-sep {
    opacity: 0.5;
}

.work-category {
    text-decoration: underline;
    text-decoration-thickness: 0.14rem;
    text-underline-offset: 0.2rem;
}

.work-piece-wrap {
    border: 4px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.work-piece-fallback {
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
}

.work-piece-fallback-title {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.work-image,
.work-video {
    display: block;
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background: var(--paper-deep);
}

.work-carousel {
    display: grid;
    gap: 0.75rem;
    padding: clamp(1rem, 3vw, 1.5rem);
}

.work-carousel-stage {
    position: relative;
    min-height: 16rem;
    border: 3px solid var(--line);
    background: var(--paper-deep);
}

.work-carousel-slide {
    display: none;
}

.work-carousel-slide.is-active {
    display: block;
}

.work-embed {
    position: relative;
    aspect-ratio: 16 / 9;
}

.work-embed iframe,
.work-embed > * {
    width: 100%;
    height: 100%;
    border: 0;
}

.work-slide-placeholder {
    display: grid;
    min-height: 16rem;
    place-items: center;
    color: var(--ink-soft);
    font-weight: 800;
}

.work-carousel-title {
    font-weight: 950;
    font-size: 1.1rem;
}

.work-carousel-title:empty,
.work-carousel-caption:empty {
    display: none;
}

.work-carousel-caption {
    color: var(--ink-soft);
}

.work-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--line);
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: 950;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.work-carousel-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.work-carousel-next { right: clamp(0.5rem, 2vw, 1.5rem); }

.work-carousel-nav:hover {
    box-shadow: 2px 2px 0 var(--line);
    transform: translate(2px, calc(-50% + 2px));
}

.work-carousel-nav:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.work-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.work-carousel-dot {
    width: 0.85rem;
    height: 0.85rem;
    padding: 0;
    border: 2px solid var(--line);
    background: var(--white);
    cursor: pointer;
}

.work-carousel-dot.is-active {
    background: var(--orange);
}

.work-info {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.work-placard {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

.work-placard-fields {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.work-placard-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
}

.work-placard-row dt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.work-placard-row dd {
    margin: 0;
    font-weight: 700;
}

.work-placard-fields + .work-placard-notes {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 3px solid var(--line);
}

/* Piece detail */

.piece-page-embed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block: 1rem;
}

.piece-page-embed-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.piece-page-embed-button:hover,
.piece-page-embed-button:focus-visible {
    border-color: var(--accent);
}

.piece-page-embed-status {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.piece-page-embed-manual {
    flex: 1 1 100%;
    width: 100%;
    min-height: 6rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--surface, transparent);
    color: inherit;
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
}

.piece-page-embed-manual[hidden] {
    display: none;
}

.piece-prompt pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.piece-immersive-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 950;
    text-decoration: underline;
    text-decoration-thickness: 0.18rem;
    text-underline-offset: 0.24rem;
}


@media (max-width: 860px) {
    .artwork-card.size-large  { grid-column: span 8; }
    .artwork-card.size-medium { grid-column: span 6; }
    .artwork-card.size-wide   { grid-column: span 12; }
    .artwork-card.size-small  { grid-column: span 6; }

    .portfolio-grid-3,
    .exhibits-grid,
    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-detail-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .artwork-grid .artwork-card {
        grid-column: 1 / -1;
    }

    .portfolio-grid-3,
    .exhibits-grid,
    .collection-grid {
        grid-template-columns: 1fr;
    }

    .work-placard-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .work-carousel-nav {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .artwork-grid,
    .exhibits-grid,
    .collection-grid,
    .portfolio-grid-3 {
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artwork-card,
    .exhibit-card,
    .collection-card,
    .work-carousel-nav {
        transition: none;
        transform: none;
    }
}

.blog-hero {
    gap: 1rem;
}

.blog-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: min(100%, 48rem);
}

.blog-search input {
    flex: 1 1 18rem;
    min-height: 3rem;
    border: 3px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 0.75rem 1rem;
}

.blog-category-strip,
.blog-list,
.blog-category-grid,
.blog-post,
.blog-post-footer {
    width: min(100% - 2rem, 74rem);
    margin-inline: auto;
}

.blog-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-block: 1.5rem;
}

.blog-category-strip a,
.blog-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 2px solid var(--line);
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
}

.blog-list {
    display: grid;
    gap: 1.25rem;
    margin-block: 2rem 4rem;
}

.blog-card,
.blog-category-card {
    display: grid;
    gap: 1rem;
    border: 3px solid var(--line);
    background: var(--white);
    box-shadow: 6px 6px 0 var(--line);
}

.blog-card {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
}

.blog-card-body:first-child {
    grid-column: 1 / -1;
}

.blog-card-image {
    display: block;
    min-height: 100%;
    background: var(--paper);
}

.blog-card-image img,
.blog-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-body,
.blog-category-card {
    padding: clamp(1rem, 2vw, 1.5rem);
}

.blog-card h2,
.blog-category-card h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2.35rem);
}

.blog-card h2 a,
.blog-category-card h2 a {
    color: inherit;
    text-decoration-thickness: 0.12em;
}

.blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 1rem;
}

.blog-meta,
.blog-post-footer {
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-weight: 800;
}

.blog-card-header,
.blog-hero-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 0.75rem;
}

.blog-card-header-left,
.blog-hero-header-left {
    flex: 1;
    min-width: 0;
}

.blog-card-header-left h2,
.blog-hero-header-left h1 {
    margin-bottom: 0;
}

.blog-card-header-right,
.blog-hero-header-right {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.blog-card-preview.is-hidden {
    display: none;
}

.post-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.post-actions-top {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-actions-bottom {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.post-actions-left,
.post-actions-right {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-actions-show {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block: 1rem;
}

.post-action-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: 3px 3px 0 var(--line);
}

.post-action-btn svg {
    flex-shrink: 0;
}

.post-action-btn:hover {
    box-shadow: 1px 1px 0 var(--line);
    transform: translate(2px, 2px);
}

.post-action-btn[aria-expanded="true"] {
    background: var(--yellow);
}

@media (max-width: 520px) {
    .btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .post-action-btn {
        padding: 0.4rem 0.5rem;
    }
}

.post-expand-panel,
.post-comments-panel {
    margin-top: 1rem;
    padding: 1rem;
    border-top: 2px solid var(--line);
}

.post-expand-panel[hidden],
.post-comments-panel[hidden] {
    display: none;
}

.post-expand-panel .post-content-body {
    max-height: 32rem;
    overflow-y: auto;
    line-height: 1.7;
}

.post-comment-form {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--line);
}

.post-comment-form input[type="text"],
.post-comment-form textarea {
    width: 100%;
    border: 2px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 0.6rem;
}

.post-comment-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.field-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    tabindex: -1;
}

.post-comment-item {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.post-comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.post-comment-item strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.post-comment-date {
    font-weight: 700;
    color: var(--ink-soft);
}

.post-comment-content {
    margin: 0;
}

.post-comment-actions,
.post-comment-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-comment-icon-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--line);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.post-comment-icon-btn:hover {
    box-shadow: 1px 1px 0 var(--line);
    transform: translate(1px, 1px);
}

.post-comment-icon-btn-danger {
    background: var(--orange);
    color: var(--on-accent, #15374a);
}

.post-comment-edit-form {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.post-comment-edit-form[hidden] {
    display: none !important;
}

.post-comment-edit-form textarea {
    width: 100%;
    min-height: 6rem;
    border: 2px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 0.6rem;
    resize: vertical;
}

#share-dialog {
    border: 3px solid var(--line);
    background: var(--paper);
    padding: 1.5rem;
    box-shadow: 6px 6px 0 var(--line);
    max-width: min(28rem, calc(100vw - 2rem));
}

#share-dialog h2 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}

#share-dialog .share-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#share-dialog::backdrop {
    background: rgba(21, 55, 74, 0.5);
}

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

.blog-featured-image {
    width: min(100% - 2rem, 74rem);
    max-height: 34rem;
    margin: 0 auto 2rem;
    border: 3px solid var(--line);
    background: var(--paper);
    overflow: hidden;
}

.blog-post-content {
    width: calc(100% - 2rem);
    margin-inline: auto;
}

.blog-post-footer {
    margin-block: 2rem 4rem;
    padding-top: 1rem;
    border-top: 3px solid var(--line);
}

.blog-comments {
    width: calc(100% - 2rem);
    margin: 0 auto 4rem;
}

.blog-comments h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.blog-comment {
    border-top: 3px solid var(--line);
    padding-block: 1rem;
}

.blog-comment header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.blog-comment strong {
    color: var(--ink);
}

@media (max-width: 760px) {
    .blog-card,
    .blog-category-grid {
        grid-template-columns: 1fr;
    }

    .blog-card-image {
        aspect-ratio: 16 / 9;
    }
}

/* ── Content filter bar (pieces, collections public pages) ── */
.content-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.filter-bar-primary {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.filter-search-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.95rem;
    border-radius: 3px;
}

.filter-submit {
    white-space: nowrap;
}

.filter-reset {
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-decoration: underline;
    white-space: nowrap;
}

.filter-bar-secondary {
    width: 100%;
}

.filter-toggle {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--ink-soft);
    user-select: none;
    list-style: none;
    padding: 0.25rem 0;
}
.filter-toggle::-webkit-details-marker { display: none; }

.filter-bar-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0 0.25rem;
    align-items: flex-start;
}

.filter-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.filter-fieldset legend {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--paper);
    color: var(--ink);
    transition: background 0.1s, border-color 0.1s;
    user-select: none;
}

.filter-chip:hover {
    border-color: var(--ink-soft);
}

.filter-chip-active,
.filter-chip:has(input:checked) {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ── Blog sort row ── */
.blog-sort-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.blog-sort-label {
    color: var(--ink-soft);
}

.blog-sort-link {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    border: 1px solid transparent;
}

.blog-sort-link:hover {
    border-color: var(--line);
    color: var(--ink);
}

.blog-sort-active {
    border-color: var(--line);
    color: var(--ink);
    font-weight: 600;
}

/* ── Site-wide search results ── */
.search-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}

.search-type-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1 1 auto;
}

.search-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    transition: background 0.1s;
}

.search-type-chip:hover {
    background: var(--paper-alt, var(--paper));
    border-color: var(--ink-soft);
}

.search-type-chip-active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.search-sort-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.search-result-section {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.search-result-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result-count {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-soft);
    background: var(--line);
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
}

.search-result-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--ink);
    text-decoration: none;
}

.search-result-title:hover {
    text-decoration: underline;
}

.search-result-excerpt {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 0.3rem;
}

/* Highlighted match terms inside search snippets. Theme-aware: uses the
   accent variable instead of the browser's default yellow. */
.search-result-excerpt mark {
    background: color-mix(in srgb, var(--accent, #b8860b) 25%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 0.1em;
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

/* ── Accessibility utility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Hide lazy-load status text visually on archive pages ── */
[data-listing-status] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Style preview panel (user settings + admin site identity) ── */
.style-preview {
    border: 2px solid var(--line);
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
}
.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: hsl(var(--sp-paper, var(--paper-hsl, 40 49% 94%)));
    color: hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
    border-bottom: 2px solid hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
}
.sp-brand {
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
}
.sp-nav-links {
    font-size: 0.8rem;
    opacity: 0.75;
}
.sp-body {
    padding: 1rem;
    background: hsl(var(--sp-paper, var(--paper-hsl, 40 49% 94%)));
    color: hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
}
.sp-heading {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 900;
    color: hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
}
.sp-text {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
}
.sp-muted {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    background: hsl(var(--sp-paper-deep, var(--sp-paper, 40 49% 94%)));
    color: hsl(var(--sp-ink-soft, var(--sp-ink, 201 56% 19%)));
    border: 1px solid hsl(var(--sp-ink, var(--ink-hsl, 201 56% 19%)));
    opacity: 0.75;
}
.sp-btn {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: default;
    border: 2px solid transparent;
}
.sp-btn-primary {
    background: hsl(var(--sp-primary, 88 60% 53%));
    color: hsl(var(--sp-primary-fg, 0 0% 100%));
    border-color: hsl(var(--sp-primary, 88 60% 53%));
}
.sp-btn-secondary {
    background: hsl(var(--sp-secondary, 189 51% 57%));
    color: hsl(var(--sp-secondary-fg, 0 0% 100%));
    border-color: hsl(var(--sp-secondary, 189 51% 57%));
}
.sp-btn-accent {
    background: hsl(var(--sp-accent, 33 90% 60%));
    color: hsl(var(--sp-accent-fg, 0 0% 0%));
    border-color: hsl(var(--sp-accent, 33 90% 60%));
}

/* ─── Celestial layout theme ──────────────────────────────────────────────── */
/* Celestial theme CSS, JS, and HTML are stored in site_settings (custom_css,  */
/* custom_js, custom_html_body) and injected at runtime from the DB.           */
/* Edit them from the admin Design tab → Theme Code section.                   */
/* The @font-face declarations above remain here so fonts load for all themes. */