/* /Components/BookQuillMark.razor.rz.scp.css */
.book-quill--large[b-p1i3r60npp] {
    width: 4rem;
    height: 4rem;
}

.book-quill--small[b-p1i3r60npp] {
    width: 1.75rem;
    height: 1.75rem;
}

.book-quill__book[b-p1i3r60npp] {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}

.book-quill__spine[b-p1i3r60npp],
.book-quill__lines[b-p1i3r60npp] {
    stroke: var(--ink-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
}

.book-quill__plume[b-p1i3r60npp] {
    fill: var(--rule);
    stroke: var(--ink-soft);
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.book-quill__rachis[b-p1i3r60npp] {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1;
    stroke-linecap: round;
}

.book-quill__nib[b-p1i3r60npp] {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
}
/* /Components/Breadcrumb.razor.rz.scp.css */
.breadcrumb[b-v8q0lf4mtj] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--paper);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.breadcrumb__list[b-v8q0lf4mtj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.breadcrumb__item[b-v8q0lf4mtj] {
    display: flex;
    align-items: center;
}

.breadcrumb__sep[b-v8q0lf4mtj] {
    margin: 0 0.5rem;
    color: var(--rule);
}

/* Keep individual crumbs from sprawling: cap width and ellipsize long titles. The full title remains available via the title attribute on hover. */
.breadcrumb__link[b-v8q0lf4mtj],
.breadcrumb__articles[b-v8q0lf4mtj],
.breadcrumb__current[b-v8q0lf4mtj] {
    display: inline-block;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.breadcrumb__current[b-v8q0lf4mtj] {
    color: var(--ink);
}
/* /Components/Card.razor.rz.scp.css */
.card[b-ppjpifodwp] {
    display: flex;
    flex-direction: column;
    background: var(--parchment);
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 1.25rem 1.35rem;
    color: var(--ink);
    box-shadow: 0 1px 0 var(--shadow);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.card:hover[b-ppjpifodwp] {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--shadow);
    background: var(--parchment-hover);
}

.card__title[b-ppjpifodwp] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.card__summary[b-ppjpifodwp] {
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: 0.98rem;
    flex: 1 1 auto;
}

.card__cta[b-ppjpifodwp] {
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
/* /Components/CardGrid.razor.rz.scp.css */
.card-grid[b-9uavj7vvxn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem;
    margin: 1.5rem 0;
}
/* /Components/Loading.razor.rz.scp.css */
.loading[b-4evs3q4bjd] {
    text-align: center;
    padding: 3rem 0;
}

.loading__mark[b-4evs3q4bjd] {
    display: flex;
    justify-content: center;
    animation: loading-pulse-b-4evs3q4bjd 1.8s ease-in-out infinite;
}

.loading__text[b-4evs3q4bjd] {
    margin: 0.75rem 0 0 0;
    font-style: italic;
    color: var(--ink-soft);
}

@keyframes loading-pulse-b-4evs3q4bjd {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading__mark[b-4evs3q4bjd] {
        animation: none;
    }
}
/* /Components/MastheadNav.razor.rz.scp.css */
.mastnav[b-0qsio3kx8k] {
    background: var(--masthead-bg);
    padding: 0 0.5rem;
    border-bottom: 4px double var(--masthead-rule);
}

/* Toggle button is hidden on wide screens; the list is always shown there. */
.mastnav__toggle[b-0qsio3kx8k] {
    display: none;
}

.mastnav__list[b-0qsio3kx8k] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 60rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.1rem;
}

.mastnav__item[b-0qsio3kx8k] {
    display: flex;
}

.mastnav[b-0qsio3kx8k]  .mastnav__link {
    display: inline-block;
    padding: 0.7rem 0.25rem;
    color: var(--masthead-fg-soft);
    font-family: var(--display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mastnav[b-0qsio3kx8k]  .mastnav__link:hover {
    color: var(--masthead-fg);
    text-decoration: none;
}

.mastnav[b-0qsio3kx8k]  .mastnav__link.active {
    color: var(--masthead-fg);
    border-bottom-color: var(--accent);
}

/* Narrow desktop / tablet: tighten spacing so all stage tabs stay on one line
   right down to the collapse breakpoint below. */
@media (max-width: 900px) {
    .mastnav__list[b-0qsio3kx8k] {
        gap: 0 0.85rem;
    }

    .mastnav[b-0qsio3kx8k]  .mastnav__link {
        font-size: 0.82rem;
        letter-spacing: 0.03em;
    }
}

/* Collapse behind a toggle button before the tabs are forced to wrap. */
@media (max-width: 800px) {
    .mastnav[b-0qsio3kx8k] {
        padding: 0;
    }

    .mastnav__toggle[b-0qsio3kx8k] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.85rem 1rem;
        background: none;
        border: none;
        color: var(--masthead-fg);
        font-family: var(--display);
        font-size: 0.9rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .mastnav__toggle-icon[b-0qsio3kx8k] {
        position: relative;
        width: 1.1rem;
        height: 2px;
        background: currentColor;
    }

    .mastnav__toggle-icon[b-0qsio3kx8k]::before,
    .mastnav__toggle-icon[b-0qsio3kx8k]::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
    }

    .mastnav__toggle-icon[b-0qsio3kx8k]::before {
        top: -6px;
    }

    .mastnav__toggle-icon[b-0qsio3kx8k]::after {
        top: 6px;
    }

    .mastnav__list[b-0qsio3kx8k] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: none;
        display: none;
    }

    .mastnav__list--open[b-0qsio3kx8k] {
        display: flex;
    }

    .mastnav__item[b-0qsio3kx8k] {
        border-top: 1px solid var(--masthead-rule);
    }

    .mastnav[b-0qsio3kx8k]  .mastnav__link {
        display: block;
        width: 100%;
        padding: 0.85rem 1.25rem;
        font-size: 0.9rem;
        letter-spacing: 0.06em;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .mastnav[b-0qsio3kx8k]  .mastnav__link.active {
        border-bottom: none;
        border-left-color: var(--accent);
    }
}
/* /Components/NodeArticle.razor.rz.scp.css */
/* ---------- Node article ---------- */
.node[b-0oiusvn407] {
    /* Gentle fade + rise when a new node's content is shown, so switching between
       nodes feels like a deliberate page turn rather than a hard swap. Keyed on the
       node id in the markup so each navigation re-mounts and re-runs the animation. */
    animation: node-enter-b-0oiusvn407 0.45s ease both;
}

@keyframes node-enter-b-0oiusvn407 {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .node[b-0oiusvn407] {
        animation: none;
    }
}

.node__header[b-0oiusvn407] {
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 3px double var(--ink);
}

.node__title[b-0oiusvn407] {
    font-size: 2rem;
    margin: 0 0 0.5rem;
}

.node__summary[b-0oiusvn407] {
    font-style: italic;
    color: var(--ink-soft);
    margin: 0;
}

.node__body[b-0oiusvn407] {
    font-size: 1.15rem;
}

/* Body content is rendered via @((MarkupString)…), so its children are not scoped. ::deep cascades these rules into that runtime-injected HTML. */
.node__body[b-0oiusvn407]  h2 {
    margin-top: 2rem;
    font-size: 1.4rem;
}

.node__body[b-0oiusvn407]  blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 4px solid var(--accent);
    background: var(--parchment);
    font-style: italic;
    color: var(--ink-soft);
}

.node__body[b-0oiusvn407]  code {
    background: var(--code-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    font-size: 0.9em;
}

.node__body[b-0oiusvn407]  ol,
.node__body[b-0oiusvn407]  ul {
    padding-left: 1.4rem;
}

.node__body[b-0oiusvn407]  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border: 1px solid var(--rule);
}

/* Embedded media directives (youtube / pdf / button) are rendered into the body HTML, so they are reached via ::deep as well. */
.node__body[b-0oiusvn407]  .video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border: 1px solid var(--rule);
    background: #000;
}

.node__body[b-0oiusvn407]  .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Click-to-load façade: full-bleed thumbnail button with a centered play glyph. */
.node__body[b-0oiusvn407]  .video-facade__play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #000;
}

.node__body[b-0oiusvn407]  .video-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.node__body[b-0oiusvn407]  .video-facade__play:hover .video-facade__thumb,
.node__body[b-0oiusvn407]  .video-facade__play:focus-visible .video-facade__thumb {
    opacity: 1;
}

.node__body[b-0oiusvn407]  .video-facade__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 2.8rem;
    border-radius: 0.6rem;
    background: var(--accent);
    opacity: 0.92;
}

.node__body[b-0oiusvn407]  .video-facade__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.1rem;
    border-color: transparent transparent transparent #fff;
}

.node__body[b-0oiusvn407]  .video-facade__play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.node__body[b-0oiusvn407]  .pdf-embed {
    margin: 1.5rem 0;
    border: 1px solid var(--rule);
    background: var(--parchment);
}

.node__body[b-0oiusvn407]  .pdf-embed iframe {
    display: block;
    width: 100%;
    height: 32rem;
    border: 0;
}

.node__body[b-0oiusvn407]  .test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

/* ---------- Branches section ---------- */
.branches[b-0oiusvn407] {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.branches__heading[b-0oiusvn407] {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* ---------- Next stage transition ---------- */
/* A culminating, ceremonial call to action carrying the reader from the end of one
   stage to the beginning of the next. Styled as a gilded manuscript plate: warm
   parchment framed by a gold gradient edge, opened by an illuminated drop-cap
   initial. Red stays reserved for the arrow; gold does the ornamental work. */
.next-stage[b-0oiusvn407] {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
    text-align: center;
}

.next-stage__eyebrow[b-0oiusvn407] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 1rem;
}

.next-stage__eyebrow[b-0oiusvn407]::before,
.next-stage__eyebrow[b-0oiusvn407]::after {
    content: "";
    height: 1px;
    width: clamp(1.5rem, 12vw, 5rem);
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.next-stage__eyebrow span[b-0oiusvn407] {
    padding-left: 0.32em;
}

/* Constrain the shared stage card to the manuscript column width. */
.next-stage__plate[b-0oiusvn407] {
    max-width: 42rem;
    margin: 0 auto;
}
/* /Components/ScrollAffordances.razor.rz.scp.css */
.scroll-progress[b-th4ax5z9yy] {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--accent);
    z-index: 1000;
    transition: width 0.05s linear;
}

.back-to-top[b-th4ax5z9yy] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--float-btn-bg);
    color: var(--float-btn-fg);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s ease, color 0.12s ease;
    z-index: 1000;
}

.back-to-top.is-visible[b-th4ax5z9yy] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover[b-th4ax5z9yy] {
    background: var(--float-btn-bg-hover);
    color: var(--float-btn-fg-hover);
}

.back-to-top:focus-visible[b-th4ax5z9yy] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion: drop the reveal transition. */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress[b-th4ax5z9yy],
    .back-to-top[b-th4ax5z9yy] {
        transition: none;
    }
}
/* /Components/SectionAccordion.razor.rz.scp.css */
.accordion[b-5sqwvbwhed] {
    margin: 2rem 0;
    border-top: 1px solid var(--rule);
}

.accordion__item[b-5sqwvbwhed] {
    border-bottom: 1px solid var(--rule);
}

.accordion__heading[b-5sqwvbwhed] {
    margin: 0;
    font-family: var(--serif);
}

.accordion__trigger[b-5sqwvbwhed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 0.25rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.15rem;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.accordion__trigger:hover[b-5sqwvbwhed] {
    color: var(--accent);
}

.accordion__trigger:focus-visible[b-5sqwvbwhed] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.accordion__item--open .accordion__trigger[b-5sqwvbwhed] {
    color: var(--accent);
}

.accordion__marker[b-5sqwvbwhed] {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-soft);
}

.accordion__label[b-5sqwvbwhed] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.accordion__summary[b-5sqwvbwhed] {
    font-family: var(--serif);
    font-size: 0.9rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: normal;
}

.accordion__panel[b-5sqwvbwhed] {
    padding: 0.25rem 0.25rem 1.5rem;
    font-size: 1.1rem;
}

.accordion__panel[b-5sqwvbwhed]  p:first-child {
    margin-top: 0;
}

.accordion__panel[b-5sqwvbwhed]  blockquote {
    margin: 1.25rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 4px solid var(--accent);
    background: var(--parchment);
    font-style: italic;
    color: var(--ink-soft);
}

.accordion__panel[b-5sqwvbwhed]  ol,
.accordion__panel[b-5sqwvbwhed]  ul {
    padding-left: 1.4rem;
}

/* Embedded media directives (youtube / pdf) render into the section body HTML,
   so they are reached via ::deep just like on the node page. */
.accordion__panel[b-5sqwvbwhed]  .video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border: 1px solid var(--rule);
    background: #000;
}

.accordion__panel[b-5sqwvbwhed]  .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Click-to-load façade: full-bleed thumbnail button with a centered play glyph. */
.accordion__panel[b-5sqwvbwhed]  .video-facade__play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #000;
}

.accordion__panel[b-5sqwvbwhed]  .video-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.accordion__panel[b-5sqwvbwhed]  .video-facade__play:hover .video-facade__thumb,
.accordion__panel[b-5sqwvbwhed]  .video-facade__play:focus-visible .video-facade__thumb {
    opacity: 1;
}

.accordion__panel[b-5sqwvbwhed]  .video-facade__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 2.8rem;
    border-radius: 0.6rem;
    background: var(--accent);
    opacity: 0.92;
}

.accordion__panel[b-5sqwvbwhed]  .video-facade__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.1rem;
    border-color: transparent transparent transparent #fff;
}

.accordion__panel[b-5sqwvbwhed]  .video-facade__play:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.accordion__panel[b-5sqwvbwhed]  .pdf-embed {
    margin: 1.5rem 0;
    border: 1px solid var(--rule);
    background: var(--parchment);
}

.accordion__panel[b-5sqwvbwhed]  .pdf-embed iframe {
    display: block;
    width: 100%;
    height: 32rem;
    border: 0;
}
/* /Components/StageCard.razor.rz.scp.css */
/* Gold gradient edge: a padded gradient border framing the parchment plate. */
.stage-card[b-mrcu4rvx4g] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    width: 100%;
    padding: 1.75rem 2.25rem;
    background:
        linear-gradient(var(--parchment), var(--parchment)) padding-box,
        linear-gradient(135deg, var(--gold), var(--gold-bright) 50%, var(--gold)) border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 26px var(--shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Faint inner keyline for that engraved, illuminated-page feel. */
.stage-card[b-mrcu4rvx4g]::after {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border: 1px solid var(--gold);
    opacity: 0.18;
    border-radius: 2px;
    pointer-events: none;
}

.stage-card:hover[b-mrcu4rvx4g],
.stage-card:focus-visible[b-mrcu4rvx4g] {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px var(--shadow);
    outline: none;
}

.stage-card:focus-visible[b-mrcu4rvx4g] {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Gilded emblem plate on the left (muted gold). */
.stage-card__emblem[b-mrcu4rvx4g] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    background: linear-gradient(160deg, rgba(232, 200, 116, 0.12), rgba(176, 141, 52, 0.06));
    border: 1px solid var(--gold);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.stage-card__emblem svg[b-mrcu4rvx4g] {
    width: 1.85rem;
    height: 1.85rem;
    fill: var(--accent);
}

/* Text column: optional eyebrow, label with arrow, then the prompt lines. */
.stage-card__body[b-mrcu4rvx4g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.stage-card__eyebrow[b-mrcu4rvx4g] {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--ink-soft);
}

.stage-card__label[b-mrcu4rvx4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.stage-card__prompt[b-mrcu4rvx4g] {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.stage-card__prompt-line[b-mrcu4rvx4g] {
    display: block;
}

.stage-card__arrow[b-mrcu4rvx4g] {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.18s ease;
}

.stage-card:hover .stage-card__arrow[b-mrcu4rvx4g],
.stage-card:focus-visible .stage-card__arrow[b-mrcu4rvx4g] {
    transform: translateX(0.35rem);
}

/* The "Begin ->" call-to-action line is mobile-only; hidden on desktop where the
   label already carries an inline arrow. */
.stage-card__cta[b-mrcu4rvx4g] {
    display: none;
}

@media (max-width: 640px) {
    .stage-card[b-mrcu4rvx4g] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .stage-card__label[b-mrcu4rvx4g] {
        justify-content: center;
    }

    /* Drop the inline label arrow and use a dedicated centred "Begin ->" line instead,
       so a long stage name never shares a line with (and off-centres) the arrow. */
    .stage-card__label .stage-card__arrow[b-mrcu4rvx4g] {
        display: none;
    }

    .stage-card__cta[b-mrcu4rvx4g] {
        display: inline-flex;
        position: relative;
        align-self: center;
        width: fit-content;
        align-items: center;
        justify-content: center;
        font-family: var(--display);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--accent);
    }

    /* Position the arrow just past the end of "Begin" so the word stays optically centred;
       the arrow no longer contributes to the group's width/centring. */
    .stage-card__cta .stage-card__arrow[b-mrcu4rvx4g] {
        position: absolute;
        left: 100%;
        margin-left: 0.4rem;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage-card[b-mrcu4rvx4g],
    .stage-card__arrow[b-mrcu4rvx4g] {
        transition: none;
    }

    .stage-card:hover[b-mrcu4rvx4g],
    .stage-card:focus-visible[b-mrcu4rvx4g] {
        transform: none;
    }

    .stage-card:hover .stage-card__arrow[b-mrcu4rvx4g],
    .stage-card:focus-visible .stage-card__arrow[b-mrcu4rvx4g] {
        transform: none;
    }
}
/* /Components/StageReel.razor.rz.scp.css */
/* ---------- Journey reel ----------
   A horizontal scroll-snap "reel": one stage is centred at a time while its
   neighbours peek left and right. Stage 1 sits at the LEFT and the final stage at
   the RIGHT, so scrolling the journey walks forward along the path. As you flick /
   drag / scroll, each card turns toward centre using a scroll-driven animation (view
   timeline), with an IntersectionObserver fallback where that isn't supported. */
.reel-wrap[b-vrgtx3cxm6] {
    position: relative;
    margin: 1.5rem auto 0;
    max-width: 52rem;
    /* Room below for the progress-dot rail. */
    padding-bottom: 1.75rem;
}

/* A faint horizontal "thread" the stages are strung along, hinting at one continuous
   path walking forward. It sits behind the cards and fades at both ends. */
.reel-wrap[b-vrgtx3cxm6]::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: calc(50% - 0.875rem);
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(to right, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.reel[b-vrgtx3cxm6] {
    position: relative;
    z-index: 1;
    /* The reel pans horizontally within this viewport; vertical scrolling belongs to the page. */
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Room left/right so the first and last cards can still centre. */
    padding: 0.5rem 40%;
    scrollbar-width: none;
    /* Let vertical swipes scroll the page; the reel only pans horizontally. */
    touch-action: pan-y;
}

/* Edge vignette: fade peeking neighbours by painting the page background over the left and
   right edges. This replaces a mask on the reel itself, which would make the cards translucent
   and let the thread behind them bleed through. Cards stay fully opaque; only the empty gutters
   and off-centre neighbours dissolve toward the page colour. */
.reel-wrap[b-vrgtx3cxm6]::after {
    content: "";
    position: absolute;
    inset: 0 0 1.75rem 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(to right, var(--paper), transparent 22%),
        linear-gradient(to left, var(--paper), transparent 22%);
}

.reel:focus-visible[b-vrgtx3cxm6] {
    outline: none;
}

/* Highlight the centred card whenever keyboard focus is anywhere in the reel:
   on the reel container itself (initial Tab), or on a card's inner link (after
   arrow-key navigation moves focus to the centred card). The outline sits on the
   card (not the full-width step) so its edges aren't clipped by the reel's overflow. */
.reel:focus-visible .reel__step.is-centered[b-vrgtx3cxm6]  .stage-card,
.reel:has(:focus-visible) .reel__step.is-centered[b-vrgtx3cxm6]  .stage-card {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
}

/* Suppress the browser's default ring on the focused card link so only the
   single centred-card outline above shows (no double ring). */
.reel__step[b-vrgtx3cxm6]  .stage-card:focus-visible {
    outline: none;
}

.reel[b-vrgtx3cxm6]::-webkit-scrollbar {
    display: none;
}

.reel__step[b-vrgtx3cxm6] {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: 0 0 auto;
    width: 30rem;
    max-width: 80vw;
    display: flex;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    transform-origin: center center;
    cursor: pointer;
}

/* The centred card behaves as a normal link; only peeking neighbours are "tap to centre". */
.reel__step.is-centered[b-vrgtx3cxm6] {
    cursor: default;
}

/* Entrance: cards drift gently into place once the reel is positioned on load. */
.reel.is-ready .reel__step[b-vrgtx3cxm6] {
    animation: reel-enter-b-vrgtx3cxm6 0.5s ease both;
}

@keyframes reel-enter-b-vrgtx3cxm6 {
    from {
        opacity: 0;
        transform: translateX(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Native scroll-driven turn: each card leans as it enters and settles at centre. */
.reel--native .reel__step[b-vrgtx3cxm6] {
    animation: reel-turn-b-vrgtx3cxm6 linear both;
    animation-timeline: view(inline);
    animation-range: cover;
}

@keyframes reel-turn-b-vrgtx3cxm6 {
    0% {
        opacity: 0.25;
        transform: perspective(50rem) rotateY(24deg) scale(0.86);
    }
    50% {
        opacity: 1;
        transform: perspective(50rem) rotateY(0deg) scale(1);
    }
    100% {
        opacity: 0.25;
        transform: perspective(50rem) rotateY(-24deg) scale(0.86);
    }
}

/* JS fallback: dim every step, then emphasise whichever is centred. */
.reel--js .reel__step[b-vrgtx3cxm6] {
    opacity: 0.3;
    transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.reel--js .reel__step.is-in-view[b-vrgtx3cxm6] {
    opacity: 1;
    transform: scale(1);
}

/* Emblem glow: the centred stage's gilded plate warms up to draw the eye. Works in
   both native and fallback modes since `is-centered` is always kept in sync by JS. */
.reel__step.is-centered[b-vrgtx3cxm6]  .stage-card__emblem {
    box-shadow: 0 6px 18px var(--shadow);
    transition: box-shadow 0.35s ease;
}

/* ---------- Progress dots ----------
   A slim rail below the reel: one dot per stage, filling from the left.
   Click a dot to jump straight to that stage. */
.reel-dots[b-vrgtx3cxm6] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    z-index: 2;
}

/* The dots are created in reel.js, so they do NOT carry this component's scoped-CSS
   attribute. We must reach them with ::deep from the (scoped) .reel-dots container,
   otherwise none of these rules apply and they render as unstyled buttons. */
.reel-dots[b-vrgtx3cxm6]  .reel-dots__dot {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    line-height: 0;
    aspect-ratio: 1;
    border: 1px solid var(--ink-soft);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.reel-dots[b-vrgtx3cxm6]  .reel-dots__dot:hover,
.reel-dots[b-vrgtx3cxm6]  .reel-dots__dot:focus-visible {
    opacity: 1;
}

.reel-dots[b-vrgtx3cxm6]  .reel-dots__dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.reel-dots[b-vrgtx3cxm6]  .reel-dots__dot.is-active {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 1;
    transform: scale(1.4);
}

/* ---------- Scroll affordance ----------
   Chevrons at the left and right of the reel signal there is more to scroll. */
.reel__hint[b-vrgtx3cxm6] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink);
    background: var(--parchment);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    box-shadow: 0 4px 14px var(--shadow);
    cursor: pointer;
    font: inherit;
    opacity: 1;
    transition: opacity 0.3s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.reel__hint:hover[b-vrgtx3cxm6],
.reel__hint:focus-visible[b-vrgtx3cxm6] {
    color: var(--accent);
    box-shadow: 0 6px 18px var(--shadow);
}

.reel__hint:focus-visible[b-vrgtx3cxm6] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.4rem;
}

/* Fade out and disable the control when there is nothing more in that direction. */
.reel__hint.is-hidden[b-vrgtx3cxm6] {
    opacity: 0;
    pointer-events: none;
}

/* Anchor each hint's INNER edge a fixed gap outside the centred card and grow it OUTWARD toward
   the reel edge. This guarantees the pill never touches the focal card and fills the gap toward its
   neighbour. The card is 30rem and centred, so its edge sits (100% - 30rem)/2 from the reel edge;
   we place the pill's near edge 0.75rem before that. Overflow past the reel edge is prevented by
   only showing the labelled pills at wide viewports (see the collapse rule below). */
.reel__hint[b-vrgtx3cxm6] {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.reel__hint--prev[b-vrgtx3cxm6] {
    left: calc((100% - 30rem) / 2 - 0.75rem);
    right: auto;
    transform: translate(-100%, -50%);
}

.reel__hint--next[b-vrgtx3cxm6] {
    left: auto;
    right: calc((100% - 30rem) / 2 - 0.75rem);
    transform: translate(100%, -50%);
}

.reel__hint-label[b-vrgtx3cxm6] {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink);
    opacity: 1;
}

.reel__chevron[b-vrgtx3cxm6] {
    width: 0.75rem;
    height: 0.75rem;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}

/* Prev chevron nudges leftward; next chevron nudges rightward — a gentle "more here" cue. */
.reel__hint--prev .reel__chevron[b-vrgtx3cxm6] {
    transform: rotate(135deg);
    animation: reel-bob-prev-b-vrgtx3cxm6 1.8s ease-in-out infinite;
}

.reel__hint--next .reel__chevron[b-vrgtx3cxm6] {
    transform: rotate(-45deg);
    animation: reel-bob-next-b-vrgtx3cxm6 1.8s ease-in-out infinite;
}

@keyframes reel-bob-prev-b-vrgtx3cxm6 {
    0%, 100% { transform: rotate(135deg) translate(0, 0); }
    50%      { transform: rotate(135deg) translate(-0.15rem, -0.15rem); }
}

@keyframes reel-bob-next-b-vrgtx3cxm6 {
    0%, 100% { transform: rotate(-45deg) translate(0, 0); }
    50%      { transform: rotate(-45deg) translate(-0.15rem, -0.15rem); }
}

/* Honour reduced-motion: drop the turning, bobbing, entrance and glow transitions,
   keep the snap reel + affordances so navigation still works. */
@media (prefers-reduced-motion: reduce) {
    .reel--native .reel__step[b-vrgtx3cxm6] {
        animation: none;
    }

    .reel.is-ready .reel__step[b-vrgtx3cxm6] {
        animation: none;
    }

    .reel__step.is-centered[b-vrgtx3cxm6]  .stage-card__emblem {
        transition: none;
    }

    .reel-dots[b-vrgtx3cxm6]  .reel-dots__dot {
        transition: none;
    }

    .reel__hint--prev .reel__chevron[b-vrgtx3cxm6],
    .reel__hint--next .reel__chevron[b-vrgtx3cxm6] {
        animation: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .reel-wrap[b-vrgtx3cxm6] {
        padding-bottom: 1.5rem;
    }

    .reel[b-vrgtx3cxm6] {
        /* Centre the fixed-width card exactly: half the viewport minus half the card.
           A percentage here drifts out of sync with the fixed card width and lets it
           touch the edge in the 481-640px range. */
        padding: 0.5rem max(1rem, calc(50% - 9rem));
    }

    .reel__step[b-vrgtx3cxm6] {
        width: 18rem;
    }

    /* Icon circles at ≤640px: pin to the reel edges, well clear of the 18rem card. */
    .reel__hint--prev[b-vrgtx3cxm6] {
        left: 0.5rem;
        transform: translateY(-50%);
    }

    .reel__hint--next[b-vrgtx3cxm6] {
        right: 0.5rem;
        transform: translateY(-50%);
    }

    .reel-dots[b-vrgtx3cxm6] {
        gap: 0.45rem;
    }
}

/* Collapse the hint pills to compact chevron-only buttons until the viewport is wide enough that a
   full labelled pill (grown outward from the card edge) still stops short of the reel edge. The
   labelled pill needs roughly a 9.75rem gutter, i.e. a wrap of ~49.5rem; since the wrap is the
   viewport minus page padding, we collapse below 58rem to keep a safe margin and avoid both card
   overlap and a horizontal scrollbar. The aria-label keeps the icon buttons accessible. */
@media (max-width: 58rem) {
    .reel__hint[b-vrgtx3cxm6] {
        padding: 0;
        width: 2.5rem;
        height: 2.5rem;
        justify-content: center;
        border-radius: 50%;
    }

    /* Pin the collapsed circles to the reel edges. They are small enough to never overflow, which
       avoids the horizontal scrollbar in the tight gutter just above the 640px card breakpoint. */
    .reel__hint--prev[b-vrgtx3cxm6] {
        left: 0.5rem;
        right: auto;
        transform: translateY(-50%);
    }

    .reel__hint--next[b-vrgtx3cxm6] {
        left: auto;
        right: 0.5rem;
        transform: translateY(-50%);
    }

    .reel__hint-label[b-vrgtx3cxm6] {
        display: none;
    }
}
/* /Components/SummaAttribution.razor.rz.scp.css */
/* ---------- Summa source credit (shared) ---------- */
.summa__source[b-p4fq32tepp] {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.summa__source a[b-p4fq32tepp] {
    color: inherit;
    text-decoration: underline;
}
/* /Components/SummaGuide.razor.rz.scp.css */
/* ---------- Trigger button ---------- */
/* A circular control matching .back-to-top. When the back-to-top arrow is hidden (near the top of
   the page) this occupies the bottom-right slot; once the arrow appears it slides up to stack above
   it, keeping the two as a tidy vertical pair. */
.summa-guide__trigger[b-inis2jrcto] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--float-btn-bg);
    color: var(--float-btn-fg);
    cursor: pointer;
    box-shadow: 0 0.35rem 0.9rem var(--shadow);
    transition: bottom 0.15s ease, background 0.12s ease, color 0.12s ease;
}

.summa-guide__trigger.is-stacked[b-inis2jrcto] {
    bottom: 4.75rem;
}

.summa-guide__trigger:hover[b-inis2jrcto] {
    background: var(--float-btn-bg-hover);
    color: var(--float-btn-fg-hover);
}

.summa-guide__trigger:focus-visible[b-inis2jrcto] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.summa-guide__trigger-mark[b-inis2jrcto] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .summa-guide__trigger[b-inis2jrcto] {
        transition: background 0.12s ease, color 0.12s ease;
    }
}

/* ---------- Dialog ---------- */
.summa-guide[b-inis2jrcto] {
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    background: var(--paper);
    color: var(--ink);
    max-width: min(52rem, 100vw - 2rem);
    width: 100%;
    box-shadow: 0 1.5rem 3rem var(--shadow);
}

.summa-guide[b-inis2jrcto]::backdrop {
    background: rgba(17, 17, 17, 0.55);
}

.summa-guide__panel[b-inis2jrcto] {
    display: flex;
    flex-direction: column;
    max-height: min(85vh, 48rem);
}

.summa-guide__head[b-inis2jrcto] {
    position: relative;
    padding: 1.5rem 1.75rem 1rem;
    border-bottom: 1px solid var(--rule);
}

.summa-guide__eyebrow[b-inis2jrcto] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin: 0 0 0.3rem;
}

.summa-guide__title[b-inis2jrcto] {
    font-family: var(--display);
    font-size: 1.6rem;
    margin: 0;
}

.summa-guide__close[b-inis2jrcto] {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
}

.summa-guide__close:hover[b-inis2jrcto] {
    color: var(--accent);
}

.summa-guide__close:focus-visible[b-inis2jrcto] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.summa-guide__body[b-inis2jrcto] {
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
    line-height: 1.6;
}

.summa-guide__body p[b-inis2jrcto] {
    margin: 0 0 1rem;
}

.summa-guide__note[b-inis2jrcto] {
    font-size: 0.9rem;
    opacity: 0.8;
}

.summa-guide__subhead[b-inis2jrcto] {
    font-family: var(--display);
    font-size: 1.05rem;
    margin: 1.5rem 0 0.6rem;
    color: var(--accent);
}

.summa-guide__structure[b-inis2jrcto],
.summa-guide__tips[b-inis2jrcto],
.summa-guide__refkey[b-inis2jrcto],
.summa-guide__who[b-inis2jrcto],
.summa-guide__books[b-inis2jrcto] {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.summa-guide__refkey li[b-inis2jrcto],
.summa-guide__who li[b-inis2jrcto],
.summa-guide__books li[b-inis2jrcto] {
    margin-bottom: 0.35rem;
}

.summa-guide__structure li[b-inis2jrcto],
.summa-guide__tips li[b-inis2jrcto] {
    margin-bottom: 0.35rem;
}

.summa-guide__steps[b-inis2jrcto] {
    list-style: none;
    counter-reset: guide-step;
    margin: 0;
    padding: 0;
}

.summa-guide__steps > li[b-inis2jrcto] {
    counter-increment: guide-step;
    position: relative;
    padding: 0 0 1rem 2.2rem;
}

.summa-guide__steps > li[b-inis2jrcto]::before {
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--parchment);
    border: 1px solid var(--rule);
    font-size: 0.8rem;
    font-weight: 700;
}

.summa-guide__cue[b-inis2jrcto] {
    display: block;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.15rem;
}

.summa-guide__latin[b-inis2jrcto] {
    font-weight: 400;
    font-style: italic;
    color: var(--ink-soft);
    margin-left: 0.4rem;
}

.summa-guide__latin[b-inis2jrcto]::before {
    content: "\00b7";
    margin-right: 0.4rem;
}

.summa-guide__ref[b-inis2jrcto] {
    color: var(--accent);
    white-space: nowrap;
}

.summa-guide__foot[b-inis2jrcto] {
    padding: 1rem 1.75rem 1.5rem;
    border-top: 1px solid var(--rule);
    text-align: right;
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-ht0zy0zw0l] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--masthead-fg-soft);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.theme-toggle:hover[b-ht0zy0zw0l] {
    color: var(--masthead-fg);
    border-color: var(--masthead-rule);
    background: rgba(255, 255, 255, 0.06);
}

.theme-toggle:focus-visible[b-ht0zy0zw0l] {
    outline: 2px solid var(--masthead-fg);
    outline-offset: 2px;
}

.theme-toggle__glyph[b-ht0zy0zw0l] {
    font-size: 1.1rem;
}

@media (max-width: 640px) {
    .theme-toggle[b-ht0zy0zw0l] {
        top: 0.6rem;
        right: 0.6rem;
    }
}
/* /Components/TopicFilter.razor.rz.scp.css */
.topic-filter[b-x103zsuo9y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.topic-filter__item[b-x103zsuo9y] {
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.topic-filter__item:hover[b-x103zsuo9y] {
    background: var(--rule);
}

.topic-filter__item--active[b-x103zsuo9y] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.topic-filter__clear[b-x103zsuo9y] {
    margin-top: 0.75rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-decoration: underline;
    cursor: pointer;
}

.topic-filter__clear:hover[b-x103zsuo9y] {
    color: var(--ink);
}

.topic-filter__empty[b-x103zsuo9y] {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .topic-filter[b-x103zsuo9y] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .topic-filter__item[b-x103zsuo9y] {
        width: auto;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-lesevdq618] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Masthead ---------- */
.masthead[b-lesevdq618] {
    position: relative;
    background: var(--masthead-bg);
    color: var(--masthead-fg);
    text-align: center;
    padding: 1.75rem 1rem 1.25rem;
}

.masthead__brand[b-lesevdq618] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--masthead-fg);
    font-family: var(--display);
    font-size: 1.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.masthead__brand:hover[b-lesevdq618] {
    text-decoration: none;
    color: var(--masthead-fg);
}

.masthead__mark[b-lesevdq618] {
    font-size: 1.5rem;
    line-height: 1;
}

.masthead__tag[b-lesevdq618] {
    margin: 0.35rem 0 0;
    font-style: italic;
    color: var(--masthead-fg-soft);
    letter-spacing: 0.05em;
}

/* ---------- Main content ---------- */
.content[b-lesevdq618] {
    flex: 1 1 auto;
}

.content__inner[b-lesevdq618] {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

/* ---------- Colophon / footer ---------- */
.colophon[b-lesevdq618] {
    background: var(--masthead-bg);
    color: var(--masthead-fg-soft);
    text-align: center;
    font-size: 0.82rem;
    padding: 1.5rem 1.25rem;
    line-height: 1.5;
}

.colophon p[b-lesevdq618] {
    max-width: 40rem;
    margin: 0 auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .masthead__brand[b-lesevdq618] {
        font-size: 1.5rem;
    }

    .content__inner[b-lesevdq618] {
        padding: 1.75rem 1rem 2.5rem;
    }
}
/* /Pages/Articles.razor.rz.scp.css */
/* ---------- Articles index ---------- */
.articles[b-s8dbiehdwr] {
    /* Break out of the global narrow content column so the sidebar plus a
       multi-column card grid can breathe. Stays centered on the viewport. */
    width: min(72rem, 100vw - 2.5rem);
    margin-inline: calc(50% - min(72rem, 100vw - 2.5rem) / 2);
}

.articles__header[b-s8dbiehdwr] {
    text-align: center;
    padding: 1rem 0 2.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.5rem;
}

.articles__title[b-s8dbiehdwr] {
    font-size: 2.15rem;
    margin: 0 0 1rem;
}

.articles__lede[b-s8dbiehdwr] {
    max-width: 34rem;
    margin: 0 auto;
    color: var(--ink-soft);
}

.articles__empty[b-s8dbiehdwr] {
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Layout: sidebar + results ---------- */
.articles__layout[b-s8dbiehdwr] {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: 2.5rem;
    align-items: start;
}

.articles__sidebar[b-s8dbiehdwr] {
    position: sticky;
    top: 5rem;
}

.articles__sidebar-title[b-s8dbiehdwr] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

.articles__sidebar-empty[b-s8dbiehdwr] {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .articles__title[b-s8dbiehdwr] {
        font-size: 1.7rem;
    }

    .articles__layout[b-s8dbiehdwr] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .articles__sidebar[b-s8dbiehdwr] {
        position: static;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* ---------- Hero ---------- */
.hero[b-fgfllltvkq] {
    text-align: center;
    padding: 1rem 0 2.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.5rem;
}

.hero__motto[b-fgfllltvkq] {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--accent);
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.hero__title[b-fgfllltvkq] {
    font-size: 2.15rem;
    margin: 0 0 1rem;
}

.hero__lede[b-fgfllltvkq] {
    max-width: 34rem;
    margin: 0 auto;
    color: var(--ink-soft);
}

/* ---------- Browse all ---------- */
.home__browse[b-fgfllltvkq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .hero__title[b-fgfllltvkq] {
        font-size: 1.7rem;
    }

    /* Stack the browse buttons and give them a consistent width so the differing
       label lengths ("Browse all articles" vs "Summa Theologiae") line up. */
    .home__browse[b-fgfllltvkq] {
        flex-direction: column;
        align-items: stretch;
    }

    .home__browse .btn[b-fgfllltvkq] {
        text-align: center;
    }
}
/* /Pages/Summa.razor.rz.scp.css */
/* ---------- Summa index & search ---------- */
.summa[b-hx6c0fnawg] {
    width: min(60rem, 100vw - 2.5rem);
    margin-inline: calc(50% - min(60rem, 100vw - 2.5rem) / 2);
}

.summa__header[b-hx6c0fnawg] {
    text-align: center;
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2rem;
}

.summa__eyebrow[b-hx6c0fnawg] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    margin: 0 0 0.35rem;
}

.summa__title[b-hx6c0fnawg] {
    font-size: 2.3rem;
    margin: 0 0 1rem;
}

.summa__lede[b-hx6c0fnawg] {
    max-width: 38rem;
    margin: 0 auto;
    color: var(--ink-soft);
}

/* ---------- Search ---------- */
.summa__search[b-hx6c0fnawg] {
    margin: 0 auto 2rem;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.summa__search-label[b-hx6c0fnawg] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

.summa__search-input[b-hx6c0fnawg] {
    font: inherit;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    background: var(--paper);
    color: var(--ink);
}

.summa__search-input:focus-visible[b-hx6c0fnawg] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ---------- Search results ---------- */
.summa__results-count[b-hx6c0fnawg] {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.summa__empty[b-hx6c0fnawg] {
    text-align: center;
    color: var(--ink-soft);
}

.summa__match-list[b-hx6c0fnawg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summa__match-link[b-hx6c0fnawg] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    background: var(--parchment);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.summa__match-link:hover[b-hx6c0fnawg],
.summa__match-link:focus-visible[b-hx6c0fnawg] {
    border-color: var(--accent);
    box-shadow: 0 2px 10px var(--shadow);
}

.summa__match-ref[b-hx6c0fnawg] {
    grid-column: 1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.summa__match-title[b-hx6c0fnawg] {
    grid-column: 1;
}

.summa__match-kind[b-hx6c0fnawg] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ---------- Browse (parts & questions) ---------- */
.summa__browse[b-hx6c0fnawg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summa__part[b-hx6c0fnawg] {
    border: 1px solid var(--rule);
    border-radius: 0.6rem;
    background: var(--parchment);
    overflow: hidden;
}

.summa__part-summary[b-hx6c0fnawg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    font-family: var(--display);
    list-style: none;
}

.summa__part-summary[b-hx6c0fnawg]::-webkit-details-marker {
    display: none;
}

.summa__part-heading[b-hx6c0fnawg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.summa__part-title[b-hx6c0fnawg] {
    font-size: 1.15rem;
    font-weight: 700;
}

.summa__part-latin[b-hx6c0fnawg] {
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 400;
    color: var(--ink-soft);
}

.summa__part-count[b-hx6c0fnawg] {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.summa__part-description[b-hx6c0fnawg] {
    margin: 0;
    padding: 0 1.1rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
}

/* ---------- Treatise sub-accordion ---------- */
.summa__treatise[b-hx6c0fnawg] {
    border-top: 1px solid var(--rule);
}

.summa__treatise-summary[b-hx6c0fnawg] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    cursor: pointer;
    list-style: none;
    text-align: left;
    font-family: var(--display);
    background: var(--paper);
    transition: background 0.15s ease;
}

.summa__treatise-summary:hover[b-hx6c0fnawg] {
    background: var(--parchment);
}

.summa__treatise-summary[b-hx6c0fnawg]::-webkit-details-marker {
    display: none;
}

.summa__treatise-marker[b-hx6c0fnawg] {
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.summa__treatise[open] > .summa__treatise-summary .summa__treatise-marker[b-hx6c0fnawg] {
    transform: rotate(45deg);
}

.summa__treatise-title[b-hx6c0fnawg] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.summa__treatise-count[b-hx6c0fnawg] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.summa__question-list[b-hx6c0fnawg] {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
}

.summa__question-link[b-hx6c0fnawg] {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 1.1rem;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid var(--rule);
}

.summa__question-link:hover[b-hx6c0fnawg],
.summa__question-link:focus-visible[b-hx6c0fnawg] {
    background: var(--paper);
    color: var(--accent);
}

.summa__question-number[b-hx6c0fnawg] {
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.summa__question-articles[b-hx6c0fnawg] {
    font-size: 0.75rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .summa__title[b-hx6c0fnawg] {
        font-size: 1.8rem;
    }

    .summa__question-link[b-hx6c0fnawg] {
        grid-template-columns: 2.5rem 1fr;
    }

    .summa__question-articles[b-hx6c0fnawg] {
        display: none;
    }
}
/* /Pages/SummaQuestion.razor.rz.scp.css */
/* ---------- Summa question page ---------- */
.summa-question[b-ebqo8ni8za] {
    width: min(46rem, 100vw - 2.5rem);
    margin-inline: auto;
}

.summa-question__header[b-ebqo8ni8za] {
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}

.summa-question__eyebrow[b-ebqo8ni8za] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin: 0 0 0.4rem;
}

.summa-question__title[b-ebqo8ni8za] {
    font-size: 2rem;
    margin: 0;
}

.summa-question__missing[b-ebqo8ni8za] {
    color: var(--ink-soft);
}

.summa-question__prologue[b-ebqo8ni8za] {
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* ---------- Table of contents ---------- */
.summa-question__toc[b-ebqo8ni8za] {
    background: var(--parchment);
    border: 1px solid var(--rule);
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.summa-question__toc-list[b-ebqo8ni8za] {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.summa-question__toc-item a[b-ebqo8ni8za] {
    color: inherit;
    text-decoration: none;
}

.summa-question__toc-item a:hover[b-ebqo8ni8za],
.summa-question__toc-item a:focus-visible[b-ebqo8ni8za] {
    color: var(--accent);
    text-decoration: underline;
}

/* ---------- Article (collapsible panel) ---------- */
.summa-article[b-ebqo8ni8za] {
    border-top: 1px solid var(--rule);
    scroll-margin-top: 5rem;
}

/* Hide the native disclosure triangle; we render our own +/- marker. */
.summa-article > summary[b-ebqo8ni8za] {
    list-style: none;
}

.summa-article > summary[b-ebqo8ni8za]::-webkit-details-marker {
    display: none;
}

.summa-article__summary[b-ebqo8ni8za] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.25rem;
    cursor: pointer;
    font-family: var(--display);
    color: var(--ink);
    transition: color 0.15s ease;
}

.summa-article__summary:hover[b-ebqo8ni8za],
.summa-article__summary:focus-visible[b-ebqo8ni8za],
.summa-article[open] > .summa-article__summary[b-ebqo8ni8za] {
    color: var(--accent);
}

.summa-article__label[b-ebqo8ni8za] {
    display: block;
    min-width: 0;
}

.summa-article__title[b-ebqo8ni8za] {
    display: block;
    font-size: 1.15rem;
    line-height: 1.3;
}

.summa-article__number[b-ebqo8ni8za] {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 0.2rem;
}

.summa-article__marker[b-ebqo8ni8za] {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-soft);
}

.summa-article__body[b-ebqo8ni8za] {
    line-height: 1.7;
    padding-bottom: 1.5rem;
}

.summa-article__body p[b-ebqo8ni8za] {
    margin: 0 0 1rem;
}

/* ---------- Pager ---------- */
.summa-question__pager[b-ebqo8ni8za] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.summa-question__back[b-ebqo8ni8za] {
    color: var(--ink-soft);
    text-decoration: none;
}

.summa-question__back:hover[b-ebqo8ni8za],
.summa-question__back:focus-visible[b-ebqo8ni8za] {
    color: var(--accent);
}

/* ---------- Cross-reference links (injected via MarkupString, so target with ::deep) ---------- */
.summa-question__body[b-ebqo8ni8za]  .summa-ref,
.summa-article__body[b-ebqo8ni8za]  .summa-ref,
.summa-question__prologue[b-ebqo8ni8za]  .summa-ref {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
}

.summa-question__prologue[b-ebqo8ni8za]  .summa-ref {
    font-style: normal;
}

.summa-article__body[b-ebqo8ni8za]  .summa-ref:hover,
.summa-article__body[b-ebqo8ni8za]  .summa-ref:focus-visible,
.summa-question__prologue[b-ebqo8ni8za]  .summa-ref:hover,
.summa-question__prologue[b-ebqo8ni8za]  .summa-ref:focus-visible {
    border-bottom-color: var(--accent);
}

/* ---------- Section cues (Objection / Reply / On the contrary / I answer that) ---------- */
/* Rendered from neutral tokens at read time, so restyling never needs a corpus regen. */
.summa-article__body[b-ebqo8ni8za]  .summa-cue {
    font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .summa-question__title[b-ebqo8ni8za] {
        font-size: 1.6rem;
    }
}