html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body) {
    --aura-panel: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary) 4%);
    --aura-panel-soft: color-mix(in srgb, var(--color-background) 90%, var(--color-primary) 10%);
    --aura-border: color-mix(in srgb, var(--color-border) 76%, var(--color-primary) 24%);
    --aura-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 9%, transparent);
    background:
        radial-gradient(
            circle at 12% 5%,
            color-mix(in srgb, var(--color-primary) 5%, transparent),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 12%,
            color-mix(in srgb, var(--color-accent) 4%, transparent),
            transparent 26%
        ),
        var(--color-background);
}

html[data-layout="public"]:not([data-theme])
body[data-visual-effect="soft_aura"]:not(.reader-body),
html[data-layout="public"][data-theme="light"]
body[data-visual-effect="soft_aura"]:not(.reader-body) {
    --aura-panel: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary) 6%);
    --aura-panel-soft: color-mix(in srgb, var(--color-background) 88%, var(--color-primary) 12%);
    --aura-border: color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
    --aura-shadow:
        0 0 0 1px
        color-mix(in srgb, var(--color-primary) 12%, transparent),
        0 10px 26px
        color-mix(in srgb, var(--color-primary) 11%, transparent);
    background:
        radial-gradient(
            circle at 12% 5%,
            color-mix(in srgb, var(--color-primary) 7%, transparent),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 12%,
            color-mix(in srgb, var(--color-accent) 5%, transparent),
            transparent 28%
        ),
        var(--color-background);
}

html[data-layout="public"][data-theme="dark"]
body[data-visual-effect="soft_aura"]:not(.reader-body) {
    --aura-panel: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary) 4%);
    --aura-panel-soft: color-mix(in srgb, var(--color-background) 90%, var(--color-primary) 10%);
    --aura-border: color-mix(in srgb, var(--color-border) 76%, var(--color-primary) 24%);
    --aura-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
    background:
        radial-gradient(
            circle at 12% 5%,
            color-mix(in srgb, var(--color-primary) 7%, transparent),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 12%,
            color-mix(in srgb, var(--color-accent) 6%, transparent),
            transparent 26%
        ),
        var(--color-background);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(
    .home-panel,
    .home-story-card,
    .page-hero,
    .request-podium-card,
    .tag-filter-panel,
    .info-post-content,
    .contact-card,
    .story-hero-content,
    .story-tag-strip-inner,
    .story-description-box,
    .story-chapter-card
) {
    background: var(--aura-panel);
    border: 1px solid var(--aura-border);
    border-radius: 16px;
    box-shadow: var(--aura-shadow);
}
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.info-post-content {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    box-sizing: border-box;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.info-post-content > :first-child {
    margin-top: 0;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.info-post-content > :last-child {
    margin-bottom: 0;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-hero-band {
    background:
        linear-gradient(
            135deg,
            var(--aura-panel-soft),
            color-mix(in srgb, var(--color-background) 94%, var(--color-accent) 6%)
        );
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-hero-inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-hero-content {
    padding: clamp(1.3rem, 2vw, 2rem);
    border-radius: 18px;
    color: var(--color-text);
    --story-hero-muted: var(--color-muted);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(.story-author-tag, .story-editor-tag, .story-status-pill, .story-progress-pill, .story-hero-character-pill) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(.story-author-tag, .story-editor-tag, .story-hero-character-pill):hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-cover-image,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-cover-placeholder {
    border-radius: 14px;
    box-shadow: var(--aura-shadow);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-strip {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-strip-inner,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-description-box,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-chapter-card {
    padding: 1.25rem 1.4rem;
    border-radius: 16px;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-row {
    grid-template-columns: minmax(165px, 190px) minmax(0, 1fr);
    gap: .65rem 1rem;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-label {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--color-text);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-pill {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-tag-pill:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.home-story-card {
    border: 2px solid var(--aura-border);
    border-radius: 16px;
    background: var(--aura-panel);
}

html[data-layout="public"]:not([data-theme])
body[data-visual-effect="soft_aura"]:not(.reader-body)
.home-story-card:hover,
html[data-layout="public"][data-theme="light"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.home-story-card:hover {
    transform: translateY(-2px);
    background: var(--aura-panel);
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px
        color-mix(in srgb, var(--color-primary) 18%, transparent),
        0 12px 28px
        color-mix(in srgb, var(--color-primary) 14%, transparent);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-row,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.home-panel-row,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-meta-line,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.tag-filter-chip {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-hero-title,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.page-heading__title,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-podium-card h2,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-podium-card h3 {
    color: var(--color-text);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-meta-line > span {
    background: color-mix(in srgb, var(--color-surface) 84%, var(--color-primary) 16%);
    border: 1px solid color-mix(in srgb, var(--color-border) 68%, var(--color-primary) 32%);
    color: var(--color-text);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-surface) 72%, transparent);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-meta-line,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.page-heading__lead,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-podium-card p,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-podium-card small {
    color: var(--color-muted);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-action-primary,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-page .button-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.story-action-secondary,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.request-page .button:not(.button-primary) {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(
    .home-story-tabs a.is-active,
    .tag-filter-chip.is-active,
    .tag-mode-button.is-active
) {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(
    .home-story-tabs a,
    .tag-filter-chip,
    .tag-mode-button
) {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
:is(
    .home-story-tabs a,
    .tag-filter-chip,
    .tag-mode-button
):hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.site-nav a.is-active,
html[data-layout="public"]
body[data-visual-effect="soft_aura"]:not(.reader-body)
.site-nav a[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--aura-border);
    box-shadow: none;
}

@media (max-width: 768px) {
    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .story-hero-content,
    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .story-tag-strip-inner,
    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .story-description-box,
    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .story-chapter-card,
    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .page-hero {
        padding: 1rem;
        border-radius: 14px;
    }

    html[data-layout="public"]
    body[data-visual-effect="soft_aura"]:not(.reader-body)
    .story-tag-row {
        grid-template-columns: 1fr;
    }
}

/* Editorial: typography-led, low-chrome public presentation. Colors remain palette-driven. */
html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body) {
    --editorial-paper: color-mix(in srgb, var(--color-background) 92%, var(--color-surface) 8%);
    --editorial-surface: color-mix(in srgb, var(--color-surface) 96%, var(--color-background) 4%);
    --editorial-rule: color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%);
    --editorial-accent-rule: color-mix(in srgb, var(--color-primary) 74%, var(--color-border) 26%);
    --editorial-soft: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
    --editorial-radius: 8px;
    background: var(--editorial-paper);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.site-header, .site-nav, .site-footer) {
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.site-header {
    background: color-mix(in srgb, var(--color-surface) 97%, var(--color-background) 3%);
    border-bottom: 1px solid var(--editorial-rule);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.site-nav {
    border-bottom-color: var(--editorial-rule);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.site-nav a {
    border-radius: 0;
    border-width: 0 0 2px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.site-nav a:is(.is-active, [aria-current="page"]) {
    background: transparent;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(
    .home-panel,
    .home-story-card,
    .page-hero,
    .request-podium-card,
    .tag-filter-panel,
    .info-post-content,
    .contact-card,
    .story-hero-content,
    .story-tag-strip-inner,
    .story-description-box,
    .story-chapter-card,
    .community-composer,
    .community-post,
    .community-empty,
    .community-view-heading,
    .community-sidebar
) {
    background: var(--editorial-surface);
    border: 1px solid var(--editorial-rule);
    border-radius: var(--editorial-radius);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.page-heading__title, .story-hero-title, .home-section-title, .home-panel__title, .info-page h1, .community-page h1) {
    letter-spacing: -0.025em;
    text-wrap: balance;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.page-heading__title, .story-hero-title)::after {
    content: "";
    display: block;
    width: clamp(42px, 8vw, 78px);
    height: 2px;
    margin-top: .55rem;
    background: var(--color-primary);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-hero-band {
    background: var(--editorial-paper);
    border-bottom: 1px solid var(--editorial-rule);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-hero-content {
    padding: clamp(1.2rem, 2.2vw, 2rem);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.story-author-tag, .story-editor-tag, .story-status-pill, .story-progress-pill, .story-hero-character-pill, .story-meta-line > span, .story-tag-pill) {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--editorial-rule);
    border-radius: 999px;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-meta-line {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: .45rem;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.story-action-primary, .button-primary, .request-page .button-primary) {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    border-radius: 6px;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.story-action-secondary, .button:not(.button-primary), .request-page .button:not(.button-primary)) {
    background: transparent;
    color: var(--color-text);
    border-color: var(--editorial-rule);
    border-radius: 6px;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.home-story-tabs a, .tag-filter-chip, .tag-mode-button) {
    background: transparent;
    border-color: var(--editorial-rule);
    border-radius: 999px;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.home-story-tabs a.is-active, .tag-filter-chip.is-active, .tag-mode-button.is-active) {
    background: var(--editorial-soft);
    color: var(--color-primary);
    border-color: var(--editorial-accent-rule);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.home-story-card {
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.home-story-card:hover {
    transform: none;
    background: var(--editorial-soft);
    border-color: var(--editorial-accent-rule);
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-tag-strip {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-tag-row {
    grid-template-columns: minmax(155px, 190px) minmax(0, 1fr);
    border-bottom: 1px solid color-mix(in srgb, var(--editorial-rule) 72%, transparent);
    padding-block: .55rem;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-tag-row:last-child {
    border-bottom: 0;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.story-tag-label {
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-weight: 700;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.request-row, .home-panel-row) {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
:is(.request-row, .home-panel-row):not(:last-child) {
    border-bottom: 1px solid var(--editorial-rule);
}

html[data-layout="public"]
body[data-visual-effect="editorial"]:not(.reader-body)
.site-footer {
    background: color-mix(in srgb, var(--color-footer-bg) 94%, var(--color-background) 6%);
    border-top: 1px solid var(--editorial-rule);
}

@media (max-width: 768px) {
    html[data-layout="public"]
    body[data-visual-effect="editorial"]:not(.reader-body)
    :is(.story-hero-content, .story-tag-strip-inner, .story-description-box, .story-chapter-card, .page-hero) {
        padding: 1rem;
        border-radius: 6px;
    }

    html[data-layout="public"]
    body[data-visual-effect="editorial"]:not(.reader-body)
    .story-tag-row {
        grid-template-columns: 1fr;
    }
}