/* ============================================================================
   ST. BERNARD FOUNDATION — interior page components
   Loads after sbf.css. Same tokens, same grid, same editorial logic — this file
   only adds the furniture the interior pages need beyond the home page.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   17 · PAGE HEAD (interior masthead + breadcrumb)
   ------------------------------------------------------------------------ */
.pagehead {
    position: relative;
    background: var(--ink-900);
    color: var(--paper-100);
    overflow: hidden;
    isolation: isolate;
}
.pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--braille-light);
    background-size: var(--braille-size);
    z-index: 1;
}
.pagehead::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 6% 108%, rgba(60, 130, 0, .38), transparent 64%),
        radial-gradient(620px 420px at 98% -14%, rgba(255, 200, 0, .14), transparent 62%);
    z-index: 1;
}
.pagehead__figure { position: absolute; inset: 0; z-index: 0; }
.pagehead__figure img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }

.pagehead__inner { position: relative; z-index: 2; padding-block: clamp(3.25rem, 7vw, 6.5rem); }

.pagehead__plate {
    position: absolute;
    right: -70px; top: 50%;
    transform: translateY(-50%);
    width: min(340px, 28vw);
    opacity: .09;
    z-index: 1;
    pointer-events: none;
}
@media (max-width: 900px) { .pagehead__plate { display: none; } }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244, 241, 232, .58);
    margin-bottom: 1.7rem;
}
.crumbs a { color: var(--gold-500); }
.crumbs a:hover { color: var(--paper-000); }
.crumbs i { opacity: .4; font-size: .6em; }

.pagehead__title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.04;
    font-size: clamp(2.3rem, 1.6rem + 3vw, 4.1rem);
    color: var(--paper-000);
    letter-spacing: -0.03em;
    max-width: 20ch;
}
.pagehead__title em { font-style: italic; color: var(--gold-500); }

.pagehead__standfirst {
    margin-top: 1.4rem;
    font-size: var(--step-1);
    line-height: 1.55;
    color: rgba(244, 241, 232, .74);
    max-width: 58ch;
}

/* ---------------------------------------------------------------------------
   18 · ARTICLE + CMS COPY
   ------------------------------------------------------------------------ */
.article { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.article__body { grid-column: 1 / span 8; }
.article__aside { grid-column: 10 / -1; }
@media (max-width: 1000px) {
    .article__body, .article__aside { grid-column: 1 / -1; }
    .article__aside { margin-top: 3rem; }
}

.copy { font-size: var(--step-0); line-height: 1.75; color: var(--muted); }
.copy > * + * { margin-top: 1.3rem; }
.copy h1, .copy h2, .copy h3, .copy h4 { color: var(--ink-900); margin-top: 2.6rem; }
.copy h2 { font-size: var(--step-3); }
.copy h3 { font-size: var(--step-2); }
.copy h4 { font-size: var(--step-1); }
.copy strong { color: var(--ink-900); font-weight: 600; }
.copy a { color: var(--moss-700); border-bottom: 1px solid var(--gold-500); }
.copy a:hover { color: var(--ink-900); }
.copy ul { list-style: none; padding-left: 0; display: grid; gap: .55rem; }
.copy ul li { position: relative; padding-left: 1.6rem; }
.copy ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--gold-500); }
.copy ol { padding-left: 1.3rem; display: grid; gap: .55rem; }
.copy ol li::marker { color: var(--moss-700); font-family: var(--font-mono); font-size: .85em; }
.copy blockquote {
    border-left: 3px solid var(--gold-500);
    padding: .3rem 0 .3rem 1.6rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.35;
    color: var(--ink-900);
}
.copy img { width: 100%; margin-block: 2rem; }
.copy hr { border: 0; height: 1px; background: var(--rule); margin-block: 2.6rem; }

.ground-ink .copy { color: rgba(244, 241, 232, .74); }
.ground-ink .copy h2, .ground-ink .copy h3, .ground-ink .copy h4, .ground-ink .copy strong { color: var(--paper-000); }
.ground-ink .copy blockquote { color: var(--paper-000); }

/* Aside panel */
.panel { background: var(--paper-050); border: 1px solid var(--rule); padding: 1.7rem; }
.panel + .panel { margin-top: 1.2rem; }
.panel__head {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss-700);
    padding-bottom: .8rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule);
}
.panel__list { display: grid; }
.panel__list a,
.panel__list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    font-size: .92rem;
    border-bottom: 1px solid var(--rule);
}
.panel__list > *:last-child { border-bottom: 0; }
.panel__list a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.panel__list a:hover { color: var(--moss-700); padding-left: .3rem; }
.panel__list .n { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-400); flex: none; }
.is-sticky { position: sticky; top: 118px; }

/* Meta row */
.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.meta span { display: inline-flex; align-items: center; gap: .55rem; }
.meta i { color: var(--moss-700); }
.ground-ink .meta, .pagehead .meta { color: rgba(244, 241, 232, .66); }
.ground-ink .meta i, .pagehead .meta i { color: var(--gold-500); }

/* ---------------------------------------------------------------------------
   19 · TABS + CHIPS
   ------------------------------------------------------------------------ */
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 3rem; }
.tabs__btn {
    padding: 1rem 1.5rem;
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.tabs__btn:hover { color: var(--ink-900); }
.tabs__btn[aria-selected="true"] { color: var(--ink-900); border-bottom-color: var(--gold-500); }
.tabs__panel[hidden] { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.chip {
    padding: .55rem 1.1rem;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.chip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-000); }

/* ---------------------------------------------------------------------------
   20 · ACCORDION
   ------------------------------------------------------------------------ */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__btn {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.45rem 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.3;
    color: var(--ink-900);
    transition: color .3s var(--ease);
}
.accordion__btn:hover { color: var(--moss-700); }
.accordion__sign {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    color: var(--moss-700);
    font-size: .72rem;
    transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.accordion__btn[aria-expanded="true"] .accordion__sign {
    transform: rotate(45deg);
    background: var(--ink-900);
    color: var(--gold-500);
    border-color: var(--ink-900);
}
.accordion__panel { padding: 0 0 1.6rem; max-width: var(--measure); color: var(--muted); font-size: var(--step--1); }
.accordion__panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   21 · FORMS
   ------------------------------------------------------------------------ */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .5rem; }
.field__label {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.field__label span { color: var(--moss-700); }
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: .95rem 1.1rem;
    background: var(--paper-000);
    border: 1px solid var(--rule);
    font-size: .98rem;
    color: var(--ink-900);
    border-radius: 0;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #9a9db3; }
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--ink-800);
    box-shadow: 0 0 0 3px rgba(0, 0, 90, .09);
}
.field textarea { resize: vertical; min-height: 150px; }
.field__error { font-size: .82rem; color: #b3261e; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b3261e; }

.notice {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--moss-700);
    background: var(--moss-100);
    color: var(--ink-900);
    font-size: .94rem;
    margin-bottom: 2rem;
}
.notice--error { border-left-color: #b3261e; background: #fbe9e7; }
.notice i { margin-top: .3rem; color: var(--moss-700); }
.notice--error i { color: #b3261e; }
.notice ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---------------------------------------------------------------------------
   22 · ROSTER (board + staff)
   ------------------------------------------------------------------------ */
.roster { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .roster { grid-template-columns: 1fr; } }

.person { background: var(--paper-050); padding-bottom: 2rem; transition: background .4s var(--ease); }
.person:hover { background: var(--paper-000); }
.person__figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-200);
    background-image: var(--braille-dark);
    background-size: var(--braille-size);
    display: grid;
    place-items: center;
}
.person__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.person:hover .person__figure img { transform: scale(1.04); }
.person__initials { font-family: var(--font-display); font-size: var(--step-4); color: var(--ink-400); }
.person__body { padding: 1.7rem 1.9rem 0; }
.person__role {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss-700);
    margin-bottom: .65rem;
}
.person__name { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: .8rem; line-height: 1.15; }
.person__bio { font-size: .9rem; color: var(--muted); line-height: 1.6; white-space: pre-line; }

/* ---------------------------------------------------------------------------
   23 · DOCS (resources / publications)
   ------------------------------------------------------------------------ */
.docs { border-top: 1px solid var(--rule); }
.doc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.6rem;
    align-items: center;
    padding: 1.55rem 0;
    border-bottom: 1px solid var(--rule);
    transition: padding-left .4s var(--ease);
}
.doc:hover { padding-left: .8rem; }
.doc__idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--moss-700); }
.doc__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .3rem; line-height: 1.25; }
.doc__title a:hover { color: var(--moss-700); }
.doc__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc__go {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    color: var(--ink-900);
    transition: background .3s var(--ease), border-color .3s var(--ease);
}
.doc:hover .doc__go { background: var(--gold-500); border-color: var(--gold-500); }
@media (max-width: 640px) {
    .doc { grid-template-columns: auto 1fr; }
    .doc__go { display: none; }
}

/* ---------------------------------------------------------------------------
   24 · DIARY (events)
   ------------------------------------------------------------------------ */
.diary { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.entry {
    background: var(--paper-050);
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 1.7rem 1.9rem;
    transition: background .4s var(--ease);
}
.entry:hover { background: var(--paper-000); }
.entry__date { text-align: center; border-right: 1px solid var(--rule); padding-right: 1.5rem; }
.entry__day { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--ink-800); }
.entry__mon { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--moss-700); margin-top: .3rem; }
.entry__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .6rem; line-height: 1.25; }
.entry__title a:hover { color: var(--moss-700); }
@media (max-width: 760px) {
    .entry { grid-template-columns: 1fr; gap: 1.1rem; }
    .entry__date { text-align: left; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 .9rem; display: flex; align-items: baseline; gap: .7rem; }
    .entry__mon { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   25 · MARKS (partners)
   ------------------------------------------------------------------------ */
.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mark {
    background: var(--paper-050);
    padding: 2rem 1.5rem;
    display: grid;
    gap: .8rem;
    align-content: center;
    justify-items: center;
    text-align: center;
    min-height: 168px;
    transition: background .4s var(--ease);
}
.mark:hover { background: var(--paper-000); }
.mark img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .72; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.mark:hover img { filter: none; opacity: 1; }
.mark__name { font-size: .92rem; font-weight: 500; color: var(--ink-900); line-height: 1.35; }
.mark__glyph { font-size: 1.35rem; color: var(--ink-400); }

/* ---------------------------------------------------------------------------
   26 · QUOTES
   ------------------------------------------------------------------------ */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.quote {
    background: var(--paper-050);
    border: 1px solid var(--rule);
    padding: 2.1rem;
    display: flex;
    flex-direction: column;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
.quote:hover { background: var(--paper-000); border-color: var(--gold-500); }
.quote__mark { font-size: 1.5rem; color: var(--gold-500); margin-bottom: 1.1rem; }
.quote__text { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink-900); margin-bottom: 1.7rem; flex: 1; }
.quote__who { display: flex; align-items: center; gap: 1rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.quote__avatar { width: 48px; height: 48px; object-fit: cover; flex: none; }
.quote__avatar--blank { display: grid; place-items: center; background: var(--ink-900); color: var(--gold-500); font-family: var(--font-mono); font-size: .78rem; }
.quote__name { font-weight: 600; font-size: .95rem; }
.quote__role { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------------------
   27 · EMPTY STATE
   ------------------------------------------------------------------------ */
.blank {
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) 2rem;
    border: 1px dashed var(--rule);
    background: var(--paper-050);
}
.blank img { width: 80px; margin: 0 auto 1.5rem; opacity: .34; }
.blank h3 { font-size: var(--step-2); margin-bottom: .7rem; }
.blank p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   28 · FURNITURE
   ------------------------------------------------------------------------ */
.map-frame { border: 1px solid var(--rule); aspect-ratio: 16 / 9; background: var(--paper-200); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.detail-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 2.4rem;
    margin-top: 3rem;
    border-top: 1px solid var(--rule);
}

.tagset { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
    padding: .4rem .9rem;
    background: var(--ink-900);
    color: var(--paper-100);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tag--soft { background: var(--moss-100); color: var(--moss-800); }

/* Video embed */
.embed { position: relative; aspect-ratio: 16 / 9; background: var(--ink-900); border: 1px solid var(--rule); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Two-column feature list used on Get Involved / Contact */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.path { background: var(--paper-050); padding: 2.1rem; transition: background .4s var(--ease); }
.path:hover { background: var(--paper-000); }
.path__glyph {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    color: var(--moss-700);
    font-size: 1.2rem;
    margin-bottom: 1.4rem;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.path:hover .path__glyph { background: var(--ink-900); color: var(--gold-500); border-color: var(--ink-900); }
.path__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .7rem; }
.path__text { font-size: .93rem; color: var(--muted); margin-bottom: 1.2rem; }
.path__list { display: grid; gap: .55rem; }
.path__list li { display: flex; gap: .7rem; font-size: .88rem; color: var(--muted); }
.path__list i { color: var(--moss-700); font-size: .7rem; margin-top: .45rem; }

/* Key-value strip (contact details, donation info) */
.kv { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.kv__row { background: var(--paper-050); display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 1.15rem 1.6rem; }
.kv__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss-700); }
.kv__v { font-size: .96rem; }
@media (max-width: 640px) { .kv__row { grid-template-columns: 1fr; gap: .4rem; } }