/*
 * Reference-informed v4 shell.
 * This file intentionally loads after the legacy v3 layers so public content
 * keeps its existing markup while the homepage gets a calmer editorial frame.
 */
:root {
    --v4-ink: #10251f;
    --v4-forest: #075f4f;
    --v4-green: #0c8169;
    --v4-ivory: #f6f1e7;
    --v4-paper: #fffcf5;
    --v4-mint: #a8e6cf;
    --v4-yellow: #ffd454;
    --v4-coral: #ff8568;
    --v4-line: rgb(16 37 31 / 15%);
    --v4-muted: #50645e;
    --shell: min(1240px, calc(100% - 64px));
}

/* A page must remain readable when an observer is delayed, blocked, or skipped. */
html.js [data-reveal],
html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
}

body {
    background: var(--v4-ivory);
    color: var(--v4-ink);
}

.site-header {
    border-bottom: 1px solid var(--v4-line);
    background: rgb(246 241 231 / 92%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 60%);
}

.header-inner {
    min-height: 84px;
    gap: clamp(1.1rem, 2.2vw, 2.6rem);
}

.brand {
    gap: .8rem;
}

.brand-seal {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgb(255 255 255 / 45%);
    background: var(--v4-forest);
    box-shadow: 0 8px 22px rgb(7 95 79 / 16%);
}

.brand-logo-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.brand-copy b {
    color: var(--v4-ink);
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: 1.08rem;
    letter-spacing: -.025em;
}

.brand-copy small {
    max-width: 24rem;
    color: #667a73;
    font-size: .68rem;
    letter-spacing: .015em;
}

.primary-nav .menu {
    gap: clamp(.7rem, 1.6vw, 1.55rem);
    font-size: .88rem;
    font-weight: 700;
}

.primary-nav .menu a {
    color: #33473f;
}

.primary-nav .menu a:hover,
.primary-nav .current-menu-item > a {
    color: var(--v4-green);
}

.header-action {
    min-height: 46px;
    padding: .48rem .6rem .48rem 1.08rem;
    border: 1px solid var(--v4-forest);
    border-radius: 999px;
    background: transparent;
    color: var(--v4-ink);
    font-weight: 800;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.header-action b {
    display: grid;
    width: 30px;
    height: 30px;
    margin-left: .6rem;
    border-radius: 50%;
    place-items: center;
    background: var(--v4-coral);
    color: var(--v4-ink);
}

.header-action span {
    color: inherit;
}

.header-action:hover {
    background: var(--v4-forest);
    color: #fff;
    transform: translateY(-1px);
}

.atlas-hero {
    min-height: min(720px, calc(100svh - 84px));
    padding: clamp(5rem, 8.3vw, 8.4rem) 0 clamp(5.5rem, 7vw, 7.4rem);
    background:
        radial-gradient(circle at 82% 26%, rgb(168 230 207 / 53%), transparent 17rem),
        radial-gradient(circle at 8% 100%, rgb(255 212 84 / 18%), transparent 21rem),
        linear-gradient(120deg, #edf5eb 0%, var(--v4-ivory) 54%, #f8f5ec 100%);
}

.hero-grid-pattern {
    opacity: .42;
    background-image: linear-gradient(rgb(7 95 79 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(7 95 79 / 9%) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.atlas-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(370px, 5fr);
    gap: clamp(2.75rem, 7vw, 7.8rem);
}

.hero-copy .kicker,
.section-heading .kicker,
.evidence-copy .kicker {
    color: #a84832;
    font-size: .73rem;
    letter-spacing: .16em;
}

.hero-copy h1 {
    max-width: 9.8ch;
    margin: .35rem 0 1.5rem;
    color: var(--v4-ink);
    font-size: clamp(3.9rem, 6.35vw, 6.65rem);
    line-height: .99;
}

.hero-copy .title-accent {
    color: #a84832;
    text-decoration-color: rgb(168 72 50 / 28%);
}

.hero-summary {
    max-width: 34rem;
    color: #435b53;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
    line-height: 1.82;
}

.health-search {
    min-height: 64px;
    margin-top: 2.25rem;
    border: 1px solid var(--v4-forest);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgb(16 37 31 / 9%);
}

.health-search input {
    padding: 1rem 1.15rem;
    color: var(--v4-ink);
}

.health-search button {
    min-width: 144px;
    padding: .65rem .7rem .65rem 1.1rem;
    background: var(--v4-forest);
    font-weight: 800;
    transition: background .2s ease;
}

.health-search button:hover {
    background: var(--v4-green);
}

.health-search .button-arrow {
    display: grid;
    width: 32px;
    height: 32px;
    margin-left: .6rem;
    border-radius: 50%;
    place-items: center;
    background: var(--v4-mint);
    color: var(--v4-ink);
}

.hero-quick-links a {
    border-color: rgb(7 95 79 / 22%);
    background: rgb(255 252 245 / 58%);
}

.hero-quick-links a:hover {
    border-color: var(--v4-forest);
    background: var(--v4-paper);
}

.atlas-art {
    min-height: 500px;
}

.atlas-frame {
    width: min(100%, 465px);
    height: 465px;
    border: 1px solid rgb(7 95 79 / 16%);
    border-radius: 50% 50% 43% 43%;
    background: rgb(255 252 245 / 38%);
}

.atlas-image,
.atlas-fallback {
    width: min(395px, 84%);
    border-radius: 47% 47% 38% 38%;
    box-shadow: 20px 24px 0 rgb(7 95 79 / 12%), 0 24px 42px rgb(16 37 31 / 16%);
}

.atlas-chip {
    border-color: rgb(7 95 79 / 16%);
    background: rgb(255 252 245 / 92%);
    box-shadow: 0 10px 22px rgb(16 37 31 / 10%);
}

.chip-energy {
    color: var(--v4-forest);
}

.chip-rest b {
    color: #a84832;
}

.atlas-caption {
    color: #3f5850;
}

.question-stage,
.daily-compass-section,
.signal-hub,
.journal-section {
    padding-block: clamp(5.8rem, 8.4vw, 9.6rem);
}

.question-stage {
    background: var(--v4-paper);
}

.section-heading h2,
.evidence-copy h2,
.reading-boundary h2 {
    color: var(--v4-ink);
    letter-spacing: -.06em;
}

.question-heading .question-intro,
.compass-heading > p,
.row-heading > p {
    color: var(--v4-muted);
    line-height: 1.8;
}

.topic-pills a {
    border-color: rgb(7 95 79 / 19%);
    border-radius: 999px;
    background: #fffdf8;
    color: var(--v4-forest);
    font-weight: 800;
}

.topic-pills a:hover {
    border-color: var(--v4-forest);
    background: var(--v4-mint);
}

.popular-question-grid {
    gap: 1.35rem;
}

.popular-question-card,
.popular-question-card.is-featured {
    border: 1px solid var(--v4-line);
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 10px 24px rgb(16 37 31 / 5%);
}

.popular-question-card > a {
    min-height: 300px;
    padding: 1.55rem;
}

.popular-question-card.is-featured {
    background: linear-gradient(145deg, var(--v4-forest), #06473d);
}

.popular-question-card:hover {
    border-color: rgb(7 95 79 / 45%);
    box-shadow: 0 18px 34px rgb(16 37 31 / 12%);
    transform: translateY(-5px);
}

.popular-question-card h3 {
    color: var(--v4-ink);
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: clamp(1.25rem, 1.65vw, 1.55rem);
    line-height: 1.35;
}

.popular-question-card.is-featured h3,
.popular-question-card.is-featured .question-card-copy,
.popular-question-card.is-featured .question-category {
    color: #fff;
}

.question-card-link b {
    background: var(--v4-mint);
    color: var(--v4-ink);
}

.daily-compass-section {
    background:
        linear-gradient(90deg, transparent 0 49.95%, rgb(7 95 79 / 6%) 50%, transparent 50.05%),
        #eef3e9;
}

.daily-compass-visual {
    border: 1px solid rgb(7 95 79 / 12%);
    border-radius: 26px;
    box-shadow: 0 22px 42px rgb(16 37 31 / 12%);
}

.observation-grid {
    border-color: rgb(7 95 79 / 17%);
    border-radius: 18px;
    background: rgb(255 252 245 / 94%);
    box-shadow: 0 16px 30px rgb(16 37 31 / 9%);
}

.observation-grid article {
    border-color: rgb(7 95 79 / 13%);
}

.evidence-section {
    padding-block: clamp(6rem, 9vw, 10rem);
    background:
        radial-gradient(circle at 8% 18%, rgb(168 230 207 / 20%), transparent 21rem),
        radial-gradient(circle at 93% 80%, rgb(255 133 104 / 14%), transparent 23rem),
        linear-gradient(130deg, #06483d, #032f29);
}

.evidence-copy h2 {
    color: #fffdf8;
}

.evidence-ladder {
    border-top-color: rgb(255 255 255 / 28%);
}

.evidence-ladder > div {
    border-bottom-color: rgb(255 255 255 / 20%);
}

.evidence-ladder > div:hover {
    padding-inline: .8rem;
    background: rgb(255 255 255 / 6%);
}

.signal-hub {
    background: var(--v4-paper);
}

.signal-grid {
    gap: 1.25rem;
}

.signal-card {
    min-height: 405px;
    border: 1px solid var(--v4-line);
    border-radius: 20px;
    background: #fffdf8;
    box-shadow: 0 9px 20px rgb(16 37 31 / 5%);
}

.signal-card:hover {
    box-shadow: 0 20px 34px rgb(16 37 31 / 12%);
}

.signal-card-visual {
    background: linear-gradient(140deg, #e5f2e9, #f7f1e3);
}

.journal-section {
    background:
        radial-gradient(circle at 95% 10%, rgb(168 230 207 / 42%), transparent 19rem),
        linear-gradient(135deg, #e8f0e6, #f5f0e4 65%);
}

.journal-card {
    border-color: rgb(7 95 79 / 13%);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgb(16 37 31 / 8%);
}

.reading-boundary {
    border-color: rgb(7 95 79 / 16%);
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 13%, rgb(168 230 207 / 55%), transparent 15rem),
        linear-gradient(135deg, #fffdf5, #eaf2e9);
}

.text-link,
.boundary-link {
    background: var(--v4-forest);
    box-shadow: 0 10px 22px rgb(7 95 79 / 16%);
}

.text-link b,
.boundary-link b {
    background: var(--v4-mint);
    color: var(--v4-ink);
}

.site-footer {
    background:
        radial-gradient(circle at 10% 0, rgb(168 230 207 / 14%), transparent 19rem),
        linear-gradient(135deg, #043e35, #022d27);
}

.footer-cta {
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
    border-bottom-color: rgb(255 255 255 / 20%);
}

.footer-kicker,
.footer-label {
    color: var(--v4-mint);
}

.footer-cta h2 {
    font-family: Georgia, "Noto Serif KR", serif;
}

.footer-search button {
    background: var(--v4-coral);
    color: var(--v4-ink);
}

.footer-search button b {
    color: var(--v4-ink);
    background: var(--v4-yellow);
}

.footer-grid {
    grid-template-columns: 1.3fr .95fr .8fr 1.1fr;
}

.footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 16%);
    padding-top: 1.25rem;
}

@media (max-width: 1020px) {
    :root { --shell: min(100% - 48px, 1240px); }
    .primary-nav .menu { gap: .75rem; font-size: .8rem; }
    .atlas-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr); gap: 2.5rem; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .atlas-hero { min-height: 0; }
    .atlas-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
    .hero-copy { max-width: 42rem; }
    .atlas-art { width: min(100%, 570px); margin-inline: auto; }
    .footer-cta { grid-template-columns: 1fr; gap: 2.3rem; }
}

@media (max-width: 620px) {
    :root { --shell: min(100% - 32px, 1240px); }
    .header-inner { min-height: 72px; }
    .brand-seal { width: 40px; height: 40px; flex-basis: 40px; }
    .brand-copy small { display: none; }
    .primary-nav { background: var(--v4-paper); }
    .hero-copy h1 { max-width: 100%; font-size: clamp(3.15rem, 14vw, 4.25rem); }
    .atlas-hero { padding-block: 3.75rem 4.35rem; }
    .health-search { min-height: 60px; }
    .health-search button { min-width: auto; }
    .health-search .button-label { display: none; }
    .atlas-art { min-height: 390px; }
    .atlas-frame { width: min(100%, 360px); height: 360px; }
    .atlas-image, .atlas-fallback { width: min(305px, 84%); }
    .question-stage, .daily-compass-section, .signal-hub, .journal-section { padding-block: 4.8rem; }
    .popular-question-card > a { min-height: 280px; }
    .daily-compass-visual { border-radius: 18px; }
    .signal-card { min-height: 365px; }
    .reading-boundary { margin-block: 4.8rem; padding: 1.65rem; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .popular-question-card, .signal-card, .header-action { transition: none; }
}

/* Category and search hubs: an editorial starting point, not a generic archive. */
.category-hub,
.search-results {
    padding-block: clamp(4.8rem, 8vw, 8.5rem);
}

.category-hub__intro,
.search-results > .listing-head {
    max-width: 880px;
    margin-bottom: clamp(2.8rem, 5vw, 4.75rem);
}

.category-hub__intro {
    position: relative;
    padding: clamp(2rem, 4vw, 3.4rem);
    border: 1px solid var(--v4-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at 93% 17%, rgb(168 230 207 / 54%), transparent 13rem),
        linear-gradient(135deg, #fffdf6, #edf4eb);
    box-shadow: 0 20px 46px rgb(16 37 31 / 8%);
    overflow: hidden;
}

.category-hub__intro::after {
    position: absolute;
    right: -4rem;
    bottom: -7rem;
    width: 17rem;
    height: 17rem;
    border: 1px solid rgb(7 95 79 / 13%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.category-hub__intro h1,
.search-results > .listing-head h1 {
    max-width: 15ch;
    margin: 0;
    color: var(--v4-ink);
    font-size: clamp(2.9rem, 5.4vw, 5.3rem);
    line-height: 1.04;
    text-wrap: balance;
}

.category-hub__intro > p:not(.kicker),
.search-results > .listing-head > p:not(.kicker) {
    position: relative;
    z-index: 1;
    max-width: 47rem;
    margin: 1.25rem 0 0;
    color: var(--v4-muted);
    font-size: clamp(.98rem, 1.35vw, 1.1rem);
    line-height: 1.8;
}

.category-hub__keywords {
    position: relative;
    z-index: 1;
    width: auto;
    margin-top: 2rem;
    padding: .95rem 0 0;
    border-top: 1px solid var(--v4-line);
}

.category-hub__keywords a {
    min-height: 42px;
    padding-inline: .9rem;
    font-size: .78rem;
}

.category-hub__featured,
.category-hub__latest,
.search-results__route,
.search-results__matches {
    margin-top: clamp(4.7rem, 8vw, 8.5rem);
}

.category-hub__featured {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid rgb(7 95 79 / 14%);
    border-radius: 28px;
    background: linear-gradient(135deg, #e8f1e7, #f9f4e9 70%);
}

.category-hub__featured .row-heading,
.search-results__route > .kicker + h2 {
    max-width: 1120px;
}

.category-hub__featured .journal-grid {
    margin-top: 2rem;
}

.category-hub__featured .journal-card:first-child {
    border-color: transparent;
    background: var(--v4-forest);
}

.category-hub__featured .journal-card:first-child .card-body,
.category-hub__featured .journal-card:first-child .card-body h3,
.category-hub__featured .journal-card:first-child .card-meta {
    color: #fffdf7;
}

.category-hub__featured .journal-card:first-child .card-body > p:not(.card-category),
.category-hub__featured .journal-card:first-child .card-meta {
    color: #d4e5de;
}

.category-hub__featured .journal-card:first-child .card-meta {
    border-top-color: rgb(255 255 255 / 24%);
}

.category-hub__featured .journal-card:first-child .card-category {
    color: var(--v4-mint);
}

.category-hub__latest .row-heading,
.search-results__matches .row-heading {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--v4-line);
}

.category-hub .journal-grid,
.search-results .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-hub .journal-card,
.search-results .journal-card {
    min-width: 0;
    background: var(--v4-paper);
}

.category-hub .journal-card:focus-within,
.search-results .journal-card:focus-within {
    outline: 3px solid var(--v4-coral);
    outline-offset: 4px;
}

.category-hub .card-image,
.search-results .card-image {
    background: #e2eee3;
}

.category-hub__boundary {
    margin-bottom: clamp(4.7rem, 8vw, 8.5rem);
}

.category-hub__related {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--v4-line);
    border-left: 1px solid var(--v4-line);
    background: var(--v4-line);
    gap: 1px;
}

.category-hub__related > .kicker,
.category-hub__related > a {
    min-height: 132px;
    margin: 0;
    padding: 1.35rem;
    background: var(--v4-paper);
}

.category-hub__related > .kicker {
    display: flex;
    align-items: flex-start;
    color: #a84832;
}

.category-hub__related > a {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    color: var(--v4-ink);
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    font-weight: 700;
    transition: background .2s ease, color .2s ease;
}

.category-hub__related > a span {
    color: var(--v4-green);
    font-family: system-ui, sans-serif;
}

.category-hub__related > a:hover {
    background: var(--v4-forest);
    color: #fff;
}

.category-hub__related > a:hover span {
    color: var(--v4-mint);
}

.search-results > .listing-head {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--v4-line);
}

.search-results__route {
    max-width: 1100px;
    padding: clamp(1.65rem, 3.5vw, 3rem);
    border-radius: 26px;
    background:
        radial-gradient(circle at 94% 12%, rgb(255 212 84 / 36%), transparent 14rem),
        var(--v4-forest);
    color: #fffdf7;
}

.search-results__route .kicker {
    color: var(--v4-mint);
}

.search-results__route h2 {
    max-width: 16ch;
    margin: 0;
    color: #fffdf7;
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: clamp(2rem, 3.65vw, 3.8rem);
    line-height: 1.12;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.search-results__route > p:not(.kicker) {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: #d5e8e0;
    line-height: 1.8;
}

.search-results__route .journal-grid {
    margin-top: 2.2rem;
}

.search-results__route .journal-card {
    box-shadow: none;
}

.search-results__route .text-link {
    margin-top: 1.8rem;
    background: var(--v4-paper);
    color: var(--v4-ink);
    box-shadow: none;
}

.search-results .empty-state {
    max-width: 760px;
    margin: clamp(4rem, 8vw, 7rem) auto;
    padding: clamp(2rem, 6vw, 4.5rem) 1.5rem;
    border: 1px solid var(--v4-line);
    border-radius: 22px;
    background: #edf3e9;
}

.search-results .pagination,
.category-hub .pagination {
    margin: 3.5rem 0 0;
}

.search-results .pagination .nav-links,
.category-hub .pagination .nav-links {
    flex-wrap: wrap;
}

.search-results .pagination a,
.search-results .pagination span,
.category-hub .pagination a,
.category-hub .pagination span {
    min-width: 42px;
    border-radius: 999px;
    text-align: center;
}

.search-results .pagination .current,
.category-hub .pagination .current,
.search-results .pagination a:hover,
.category-hub .pagination a:hover {
    border-color: var(--v4-forest);
    background: var(--v4-forest);
    color: #fff;
}

@media (max-width: 1020px) {
    .category-hub .journal-grid,
    .search-results .journal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .category-hub__related > .kicker {
        grid-column: 1 / -1;
        min-height: auto;
        padding-block: 1rem;
    }
}

@media (max-width: 620px) {
    .category-hub,
    .search-results {
        padding-block: 3.8rem 4.8rem;
    }

    .category-hub__intro {
        padding: 1.5rem;
        border-radius: 20px;
    }

    .category-hub__intro h1,
    .search-results > .listing-head h1 {
        font-size: clamp(2.45rem, 11vw, 3.4rem);
    }

    .category-hub__keywords {
        width: calc(100% + 1.5rem);
        margin-right: -1.5rem;
        padding-right: 1.5rem;
    }

    .category-hub__featured,
    .search-results__route {
        padding: 1.35rem;
        border-radius: 20px;
    }

    .category-hub .journal-grid,
    .search-results .journal-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.7rem;
    }

    .category-hub__related {
        grid-template-columns: 1fr;
    }

    .category-hub__related > a {
        min-height: 90px;
        padding: 1rem;
    }

    .search-results__route h2 {
        font-size: clamp(1.85rem, 9vw, 2.65rem);
    }
}