/* ============================================================================
   ST. BERNARD FOUNDATION
   A complete, from-scratch design system. No framework, no template.

   Concept — "the bound volume":
   an institutional record, editorial and indexed. Navy ink ground, parchment
   reading panels, gold as the single sharp accent. Braille is the decorative
   system throughout: section indices carry real Unicode Braille numerals and a
   Braille dot field provides the page texture. The motif belongs to the
   mission rather than being applied to it.

   Palette is taken from public/branding:
       navy #00005a   green #3c8200   gold #ffc800
   ========================================================================= */

/* ---------------------------------------------------------------------------
   00 · RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-top: 120px; }

/* ---------------------------------------------------------------------------
   01 · TOKENS
   ------------------------------------------------------------------------ */
:root {
    /* --- Ink (navy) scale, built from the logo's #00005a --- */
    --ink-950: #04041f;
    --ink-900: #070734;
    --ink-800: #00005a;
    --ink-700: #14146e;
    --ink-600: #232388;
    --ink-400: #6a6ab0;
    --ink-200: #b9b9d8;
    --ink-100: #dcdcec;

    /* --- Parchment (the reading ground) --- */
    --paper-000: #ffffff;
    --paper-050: #faf8f3;
    --paper-100: #f4f1e8;
    --paper-200: #e9e4d6;
    --paper-300: #d8d2c0;

    /* --- Accents --- */
    --gold-600: #d9a900;
    --gold-500: #ffc800;
    --gold-300: #ffdd66;
    --gold-200: #ffeeab;

    --moss-800: #2b5f00;
    --moss-700: #3c8200;
    --moss-500: #57a80d;
    --moss-100: #e3efd4;

    /* --- Semantic --- */
    --bg: var(--paper-100);
    --fg: var(--ink-900);
    --muted: #5c5f78;
    --rule: rgba(7, 7, 52, .14);
    --rule-light: rgba(255, 255, 255, .16);

    /* --- Type --- */
    --font-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
    --font-body: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
    --step-0:  clamp(1.05rem, 1rem + 0.24vw, 1.19rem);
    --step-1:  clamp(1.27rem, 1.18rem + 0.44vw, 1.55rem);
    --step-2:  clamp(1.55rem, 1.38rem + 0.83vw, 2.06rem);
    --step-3:  clamp(1.88rem, 1.6rem + 1.4vw, 2.75rem);
    --step-4:  clamp(2.29rem, 1.83rem + 2.28vw, 3.66rem);
    --step-5:  clamp(2.78rem, 2.06rem + 3.6vw, 4.88rem);
    --step-6:  clamp(3.38rem, 2.25rem + 5.6vw, 6.5rem);

    /* --- Space --- */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --bay: clamp(4.5rem, 9vw, 9rem);
    --bay-sm: clamp(3rem, 5vw, 5rem);

    /* --- Measure --- */
    --page: 1440px;
    --measure: 68ch;

    /* --- Motion --- */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Braille dot field — the recurring page texture. Two offset dot grids read as
   the six-position Braille cell rather than as generic noise. */
:root {
    --braille-dark:
        radial-gradient(circle at 3px 3px, rgba(7, 7, 52, .09) 1.4px, transparent 1.5px),
        radial-gradient(circle at 3px 13px, rgba(7, 7, 52, .09) 1.4px, transparent 1.5px);
    --braille-light:
        radial-gradient(circle at 3px 3px, rgba(255, 255, 255, .10) 1.4px, transparent 1.5px),
        radial-gradient(circle at 3px 13px, rgba(255, 255, 255, .10) 1.4px, transparent 1.5px);
    --braille-size: 22px 22px;
}

/* ---------------------------------------------------------------------------
   02 · BASE
   ------------------------------------------------------------------------ */
body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.62;
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--gold-500); color: var(--ink-900); }

/* Focus is a designed element here, not a browser leftover. The audience makes
   keyboard and switch access a first-class concern. */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: 2px;
}

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

.skip-link {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -120%);
    z-index: 999;
    background: var(--gold-500);
    color: var(--ink-900);
    padding: .9rem 1.6rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   03 · LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */
.shell {
    width: min(100% - (var(--gutter) * 2), var(--page));
    margin-inline: auto;
}

.bay { padding-block: var(--bay); position: relative; }
.bay--sm { padding-block: var(--bay-sm); }
.bay--flush-top { padding-top: 0; }

/* Editorial 12-column grid */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
}
@media (max-width: 860px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
}

.col-full  { grid-column: 1 / -1; }
.col-half  { grid-column: span 6; }
.col-third { grid-column: span 4; }
.col-2-3   { grid-column: span 8; }
.col-5     { grid-column: span 5; }
.col-7     { grid-column: span 7; }

@media (max-width: 860px) {
    .col-half, .col-third, .col-2-3, .col-5, .col-7 { grid-column: 1 / -1; }
}

/* Grounds */
.ground-ink {
    background: var(--ink-900);
    color: var(--paper-100);
    background-image: var(--braille-light);
    background-size: var(--braille-size);
}
.ground-ink h1, .ground-ink h2, .ground-ink h3 { color: var(--paper-000); }

.ground-paper { background: var(--paper-100); background-image: var(--braille-dark); background-size: var(--braille-size); }
.ground-white { background: var(--paper-000); }

/* Hairline rule — the spine of the editorial grid */
.rule { height: 1px; background: var(--rule); border: 0; }
.ground-ink .rule { background: var(--rule-light); }

/* ---------------------------------------------------------------------------
   04 · SECTION MASTHEAD (index + braille + rule)
   ------------------------------------------------------------------------ */
.masthead { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.masthead__index {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--rule);
}
.ground-ink .masthead__index { border-bottom-color: var(--rule-light); }

.masthead__num {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--moss-700);
}
.ground-ink .masthead__num { color: var(--gold-500); }

/* Real Unicode Braille numerals — decorative, hidden from assistive tech
   because the Arabic numeral beside it already carries the meaning. */
.masthead__braille {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ink-400);
    opacity: .85;
}
.ground-ink .masthead__braille { color: var(--gold-500); opacity: .55; }

.masthead__label {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: auto;
}
.ground-ink .masthead__label { color: var(--ink-200); }

.masthead__title {
    font-size: var(--step-4);
    max-width: 24ch;
}
.masthead__title em { font-style: italic; color: var(--moss-700); }
.ground-ink .masthead__title em { color: var(--gold-500); }

.masthead__standfirst {
    margin-top: 1.4rem;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--muted);
    max-width: 54ch;
}
.ground-ink .masthead__standfirst { color: var(--ink-200); }

.masthead--center { text-align: center; }
.masthead--center .masthead__title,
.masthead--center .masthead__standfirst { margin-inline: auto; }
.masthead--center .masthead__label { margin-left: 0; }
.masthead--center .masthead__index { justify-content: center; }

/* ---------------------------------------------------------------------------
   05 · BUTTONS
   ------------------------------------------------------------------------ */
.btn {
    --btn-bg: var(--ink-800);
    --btn-fg: var(--paper-000);
    --btn-edge: var(--ink-800);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.9rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-edge);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    overflow: hidden;
    transition: color .4s var(--ease), border-color .4s var(--ease);
}
/* Wipe-fill on hover, drawn from the left */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
    z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: var(--ink-900); border-color: var(--gold-500); }

.btn__arrow { transition: transform .45s var(--ease-out); font-size: .9em; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--gold { --btn-bg: var(--gold-500); --btn-fg: var(--ink-900); --btn-edge: var(--gold-500); }
.btn--gold::before { background: var(--ink-900); }
.btn--gold:hover { color: var(--paper-000); border-color: var(--ink-900); }

.btn--moss { --btn-bg: var(--moss-700); --btn-fg: var(--paper-000); --btn-edge: var(--moss-700); }

.btn--hollow { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-edge: var(--ink-900); }
.btn--hollow-light { --btn-bg: transparent; --btn-fg: var(--paper-000); --btn-edge: rgba(255,255,255,.42); }

.btn-set { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Underline link with a sliding rule */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--moss-700);
    padding-bottom: .35rem;
    background-image: linear-gradient(var(--gold-500), var(--gold-500));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size .45s var(--ease-out), color .3s var(--ease);
}
.tlink:hover { background-size: 100% 2px; color: var(--ink-900); }
.ground-ink .tlink { color: var(--gold-500); }
.ground-ink .tlink:hover { color: var(--paper-000); }

/* ---------------------------------------------------------------------------
   06 · MASTHEAD BAR (site header)
   ------------------------------------------------------------------------ */
.topbar {
    background: var(--ink-950);
    color: var(--ink-200);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .7rem;
    flex-wrap: wrap;
}
.topbar a:hover { color: var(--gold-500); }
.topbar__set { display: flex; align-items: center; gap: 1.6rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .55rem; }
.topbar__item i { color: var(--gold-500); font-size: .85em; }
.topbar__social { display: flex; gap: .9rem; }
.topbar__social a { transition: color .25s var(--ease), transform .25s var(--ease); }
.topbar__social a:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
    .topbar__set--meta { display: none; }
    .topbar__inner { justify-content: center; }
}

.masthead-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--paper-050);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.masthead-bar.is-stuck { box-shadow: 0 14px 40px rgba(4, 4, 31, .09); background: rgba(250, 248, 243, .94); backdrop-filter: blur(12px); }

.masthead-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1rem;
}
.brand { display: flex; align-items: center; }
.brand img { height: clamp(40px, 4vw, 54px); width: auto; }

/* Primary navigation */
.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav__item { position: relative; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-900);
    padding-block: .6rem;
    position: relative;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--ease-out);
}
.nav__item:hover > .nav__link::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__link i { font-size: .6em; opacity: .5; transition: transform .3s var(--ease); }
.nav__item:hover > .nav__link i { transform: rotate(180deg); }

.nav__sub {
    position: absolute;
    top: calc(100% + .6rem);
    left: -1.2rem;
    min-width: 250px;
    background: var(--ink-900);
    padding: .7rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    box-shadow: 0 24px 60px rgba(4, 4, 31, .28);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
    display: block;
    padding: .72rem 1.5rem;
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .07em;
    color: var(--ink-200);
    border-left: 2px solid transparent;
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.nav__sub a:hover { color: var(--paper-000); border-left-color: var(--gold-500); background: rgba(255, 255, 255, .05); }

.masthead-bar__actions { display: flex; align-items: center; gap: 1rem; }

@media (max-width: 1100px) {
    .nav, .masthead-bar__actions .btn { display: none; }
}

/* Menu toggle — three rules that fold into a cross */
.burger {
    display: none;
    width: 48px; height: 48px;
    place-items: center;
    border: 1px solid var(--rule);
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink-900); transition: transform .4s var(--ease), opacity .3s var(--ease); }
.burger span + span { margin-top: 5px; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1100px) { .burger { display: grid; } }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--ink-900);
    background-image: var(--braille-light);
    background-size: var(--braille-size);
    padding: 2rem var(--gutter) 3rem;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform .6s var(--ease-out);
}
.drawer.is-open { transform: translateY(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; }
.drawer__close { width: 48px; height: 48px; display: grid; place-items: center; color: var(--paper-000); border: 1px solid var(--rule-light); font-size: 1.1rem; }
.drawer__close:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }
.drawer__list { display: grid; }
.drawer__list > li { border-bottom: 1px solid var(--rule-light); }
.drawer__list > li > a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: var(--paper-000);
    transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer__list > li > a:hover { color: var(--gold-500); padding-left: .7rem; }
.drawer__list .idx { font-family: var(--font-mono); font-size: .7rem; color: var(--gold-500); letter-spacing: .1em; }
.drawer__sub { padding: 0 0 1rem 2.4rem; display: grid; gap: .55rem; }
.drawer__sub a { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--ink-200); }
.drawer__sub a:hover { color: var(--gold-500); }
.drawer__foot { margin-top: 2.5rem; display: grid; gap: 1rem; }

/* ---------------------------------------------------------------------------
   07 · HERO
   ------------------------------------------------------------------------ */
.hero {
    position: relative;
    background: var(--ink-900);
    color: var(--paper-100);
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--braille-light);
    background-size: var(--braille-size);
    z-index: 1;
}
/* Atmospheric wash — moss rising from the lower left, gold from upper right */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 620px at 8% 104%, rgba(60, 130, 0, .42), transparent 62%),
        radial-gradient(760px 520px at 96% -8%, rgba(255, 200, 0, .16), transparent 62%);
    z-index: 1;
    pointer-events: none;
}

/* All slides occupy the same grid cell, so the hero is always as tall as the
   tallest slide and does not jump as the carousel advances. Only the active one
   is visible; visibility:hidden also removes the rest from the a11y tree, and
   the JS adds `inert` so they cannot be tabbed into. */
.hero__slides { position: relative; z-index: 2; display: grid; }

/* The slide is full-bleed so its photograph can reach the viewport edges; the
   gutter is applied by the .shell wrapper on the inner grid instead. */
.hero__slide {
    position: relative;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s var(--ease-out), visibility .8s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Without JS the first slide still shows: Blade renders `is-active` on it
   server-side, so no extra no-js hook is needed. */

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-items: center;
    min-height: clamp(600px, 84vh, 860px);
    padding-block: clamp(4rem, 8vw, 7rem);
}

.hero__body { grid-column: 1 / span 7; }
@media (max-width: 1000px) { .hero__body { grid-column: 1 / -1; } }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-bottom: 2rem;
}
.hero__eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--gold-500); }

.hero__title {
    font-size: clamp(2.9rem, 1.9rem + 4.6vw, 5.1rem);
    line-height: 1.0;
    color: var(--paper-000);
    letter-spacing: -0.035em;
    max-width: 15ch;
}
.hero__title em { font-style: italic; color: var(--gold-500); }

.hero__lede {
    margin-top: 2rem;
    font-size: var(--step-1);
    line-height: 1.55;
    color: rgba(244, 241, 232, .76);
    max-width: 48ch;
}
.hero__actions { margin-top: 2.8rem; }

/* Staggered entrance for the active slide */
.hero__slide.is-active .hero__eyebrow,
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__lede,
.hero__slide.is-active .hero__actions {
    animation: rise .95s var(--ease-out) backwards;
}
.hero__slide.is-active .hero__title { animation-delay: .08s; }
.hero__slide.is-active .hero__lede { animation-delay: .18s; }
.hero__slide.is-active .hero__actions { animation-delay: .26s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shield plate — the logo mark, oversized and cropped by the viewport edge */
.hero__plate {
    grid-column: 9 / -1;
    position: relative;
    align-self: center;
}
.hero__plate img {
    width: 100%;
    opacity: .14;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .4));
    animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.02); }
}
@media (max-width: 1000px) { .hero__plate { display: none; } }

/* Hero photography, when uploaded.
   Full-bleed within the slide, with its own scrim so the headline keeps a
   reliable contrast ratio regardless of what the photograph contains. */
.hero__figure { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg, rgba(4, 4, 31, .96) 0%, rgba(7, 7, 52, .9) 34%, rgba(7, 7, 52, .58) 62%, rgba(7, 7, 52, .38) 100%),
        linear-gradient(to top, rgba(4, 4, 31, .72) 0%, transparent 42%);
}
/* Below the split point the copy sits over the middle of the photo, so the
   scrim has to cover the full width rather than fading out to the right. */
@media (max-width: 1000px) {
    .hero__figure::after {
        background:
            linear-gradient(180deg, rgba(4, 4, 31, .88) 0%, rgba(7, 7, 52, .82) 55%, rgba(4, 4, 31, .92) 100%);
    }
}

/* Slide controls, set on the baseline rule */
.hero__controls {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.4rem;
    border-top: 1px solid var(--rule-light);
}
.hero__dots { display: flex; gap: .7rem; }
.hero__dot {
    width: 34px; height: 3px;
    background: rgba(255, 255, 255, .22);
    transition: background .35s var(--ease), width .35s var(--ease);
}
.hero__dot[aria-current="true"] { background: var(--gold-500); width: 54px; }
.hero__arrows { display: flex; gap: .5rem; }
.hero__arrow {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--rule-light);
    color: var(--paper-000);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.hero__arrow:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }

/* ---------------------------------------------------------------------------
   08 · CREED (the guiding reflection)
   ------------------------------------------------------------------------ */
.creed { background: var(--gold-500); color: var(--ink-900); position: relative; overflow: hidden; }
.creed__inner { padding-block: clamp(3.5rem, 7vw, 6rem); }

.creed__quote {
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1.14;
    letter-spacing: -0.025em;
    max-width: 24ch;
}
.creed__quote em { font-style: italic; position: relative; white-space: nowrap; }
/* Each clause of the creed is underscored, like a marked-up manuscript */
.creed__quote em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -.1em;
    height: 2px;
    background: var(--ink-900);
    opacity: .34;
}
.creed__attrib {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    align-self: end;
    text-align: right;
    opacity: .7;
}
@media (max-width: 860px) { .creed__attrib { text-align: left; margin-top: 2rem; } }

/* ---------------------------------------------------------------------------
   09 · CARD (indexed editorial card)
   ------------------------------------------------------------------------ */
.cards { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cards--3, .cards--2 { grid-template-columns: 1fr; } }

/* Hairline-separated cells: the grid gap is the rule */
.card {
    position: relative;
    background: var(--paper-050);
    padding: clamp(2rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    transition: background .45s var(--ease);
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease-out);
}
.card:hover { background: var(--paper-000); }
.card:hover::before { transform: scaleX(1); }

.card__index {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--moss-700);
    margin-bottom: 1.6rem;
}
.card__braille { font-size: .95rem; color: var(--ink-400); opacity: .8; }

.card__glyph {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    color: var(--moss-700);
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.card:hover .card__glyph { background: var(--ink-900); color: var(--gold-500); border-color: var(--ink-900); }

.card__title { font-size: var(--step-2); margin-bottom: .9rem; }
.card__title a { transition: color .3s var(--ease); }
.card__title a:hover { color: var(--moss-700); }
.card__text { color: var(--muted); font-size: var(--step--1); line-height: 1.65; margin-bottom: 1.8rem; }
.card__foot { margin-top: auto; }

.card__figure { margin: -1px -1px 1.8rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-200); }
.card__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.card:hover .card__figure img { transform: scale(1.05); }

/* Dark variant */
.cards--ink { background: var(--rule-light); border-color: var(--rule-light); }
.cards--ink .card { background: var(--ink-900); color: var(--ink-200); }
.cards--ink .card:hover { background: var(--ink-800); }
.cards--ink .card__title { color: var(--paper-000); }
.cards--ink .card__text { color: rgba(244, 241, 232, .66); }
.cards--ink .card__index { color: var(--gold-500); }
.cards--ink .card__glyph { border-color: var(--rule-light); color: var(--gold-500); }
.cards--ink .card:hover .card__glyph { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }

/* ---------------------------------------------------------------------------
   10 · LEDGER (the child → institutions pathway)
   ------------------------------------------------------------------------ */
.ledger { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule-light); }
@media (max-width: 980px) { .ledger { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ledger { grid-template-columns: 1fr; } }

.ledger__cell {
    background: var(--ink-900);
    padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2vw, 1.8rem);
    position: relative;
    transition: background .45s var(--ease);
}
.ledger__cell:hover { background: var(--ink-800); }
.ledger__step {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    color: var(--gold-500);
    opacity: .7;
    margin-bottom: 1.4rem;
}
.ledger__glyph { font-size: 1.5rem; color: var(--gold-500); margin-bottom: 1.1rem; }
.ledger__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--paper-000); margin-bottom: .45rem; }
.ledger__note { font-size: .84rem; line-height: 1.5; color: rgba(244, 241, 232, .6); }

/* ---------------------------------------------------------------------------
   11 · FIGURES (stats)
   ------------------------------------------------------------------------ */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (max-width: 760px) { .figures { grid-template-columns: 1fr; } }
.figure {
    background: var(--paper-050);
    padding: clamp(2.2rem, 4vw, 3.4rem);
    text-align: center;
}
.figure__glyph { font-size: 1.3rem; color: var(--moss-700); margin-bottom: 1.4rem; }
.figure__num {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: 1;
    color: var(--ink-800);
    letter-spacing: -0.04em;
    margin-bottom: .7rem;
}
.figure__name { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.figure__note { font-size: .86rem; color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------------------------
   12 · SPREAD (asymmetric image + copy)
   ------------------------------------------------------------------------ */
.spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.spread__figure { grid-column: 1 / span 6; position: relative; isolation: isolate; }
.spread__body { grid-column: 8 / -1; }
.spread--flip .spread__figure { grid-column: 7 / -1; order: 2; }
.spread--flip .spread__body { grid-column: 1 / span 5; }

@media (max-width: 900px) {
    .spread__figure, .spread__body,
    .spread--flip .spread__figure, .spread--flip .spread__body { grid-column: 1 / -1; }
    .spread--flip .spread__figure { order: 0; }
    /* The offset register mark reaches 2rem past the figure on both sides. Once
       the spread stacks there is no gutter left to absorb it, so it pushed the
       document wider than the viewport — pull it inside the figure instead. */
    .spread__figure::after,
    .spread--flip .spread__figure::after { inset: 1.2rem -1.2rem -1.2rem 1.2rem; }
}
@media (max-width: 560px) {
    .spread__figure::after,
    .spread--flip .spread__figure::after { display: none; }
}

.spread__figure > img,
.spread__figure > .plate-empty { position: relative; z-index: 1; }
.spread__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* A thin gold register mark offset behind the image */
.spread__figure::after {
    content: "";
    position: absolute;
    inset: 2rem -2rem -2rem 2rem;
    border: 1px solid var(--gold-500);
    z-index: 0;
}
.spread--flip .spread__figure::after { inset: -2rem 2rem 2rem -2rem; }

.prose > * + * { margin-top: 1.2rem; }
.prose p { color: var(--muted); max-width: var(--measure); }
.ground-ink .prose p { color: rgba(244, 241, 232, .72); }

/* Manifest — a checked list rendered as a record */
.manifest { display: grid; margin-top: 2.4rem; border-top: 1px solid var(--rule); }
.ground-ink .manifest, .ground-ink .manifest li { border-color: var(--rule-light); }
.manifest li {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--1);
}
.manifest i { color: var(--moss-700); font-size: .78rem; margin-top: .45rem; }
.ground-ink .manifest i { color: var(--gold-500); }

/* Placeholder plate while photography is outstanding */
.plate-empty {
    aspect-ratio: 4 / 5;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.2rem;
    background: var(--paper-200);
    background-image: var(--braille-dark);
    background-size: var(--braille-size);
    border: 1px solid var(--rule);
}
.plate-empty img { width: 110px; opacity: .38; }
.plate-empty span {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.plate-empty--wide { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------------------
   13 · TENETS (why us)
   ------------------------------------------------------------------------ */
.tenets { display: grid; border-top: 1px solid var(--rule); }
.tenet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--rule);
    transition: padding-left .45s var(--ease);
}
.tenet:hover { padding-left: .8rem; }
.tenet__glyph { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; color: var(--moss-700); padding-top: .45rem; }
.tenet__name { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .35rem; }
.tenet__note { font-size: var(--step--1); color: var(--muted); }

/* ---------------------------------------------------------------------------
   14 · SUMMONS (closing CTA)
   ------------------------------------------------------------------------ */
.summons { position: relative; overflow: hidden; background: var(--ink-950); color: var(--paper-100); }
.summons::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(760px 460px at 88% 112%, rgba(255, 200, 0, .2), transparent 64%),
        radial-gradient(680px 420px at 4% -12%, rgba(60, 130, 0, .3), transparent 64%);
}
.summons__inner { position: relative; z-index: 1; padding-block: clamp(4.5rem, 9vw, 8rem); text-align: center; }
.summons__title { font-size: var(--step-5); color: var(--paper-000); max-width: 18ch; margin-inline: auto; }
.summons__title em { font-style: italic; color: var(--gold-500); }
.summons__note { margin: 1.8rem auto 2.8rem; color: rgba(244, 241, 232, .74); max-width: 56ch; }
.summons .btn-set { justify-content: center; }

/* ---------------------------------------------------------------------------
   15 · COLOPHON (footer)
   ------------------------------------------------------------------------ */
.colophon { background: var(--ink-950); color: var(--ink-200); }
.colophon__top { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.colophon__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 980px) { .colophon__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .colophon__grid { grid-template-columns: 1fr; } }

.colophon__brand img { height: 54px; width: auto; margin-bottom: 1.6rem; }
.colophon__blurb { font-size: .9rem; line-height: 1.65; color: rgba(244, 241, 232, .62); max-width: 40ch; }

.colophon__head {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-bottom: 1.6rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--rule-light);
}
.colophon__list { display: grid; gap: .8rem; }
.colophon__list a, .colophon__list li { font-size: .89rem; color: rgba(244, 241, 232, .68); }
.colophon__list a { transition: color .25s var(--ease), padding-left .25s var(--ease); }
.colophon__list a:hover { color: var(--gold-500); padding-left: .3rem; }
.colophon__list i { color: var(--gold-500); width: 1.1rem; font-size: .82rem; }
.colophon__list li { display: flex; gap: .7rem; align-items: flex-start; }

.colophon__social { display: flex; gap: .7rem; margin-top: 1.8rem; }
.colophon__social a {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--rule-light);
    color: var(--paper-100);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.colophon__social a:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }

.colophon__base {
    border-top: 1px solid var(--rule-light);
    padding-block: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    color: rgba(244, 241, 232, .52);
}
.colophon__base a:hover { color: var(--gold-500); }
.colophon__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   16 · UTILITIES + MOTION
   ------------------------------------------------------------------------ */
.stack-sm > * + * { margin-top: .8rem; }
.stack > * + * { margin-top: 1.6rem; }
.stack-lg > * + * { margin-top: 3rem; }
.text-center { text-align: center; }

/* Scroll reveal — driven by JS adding .is-in */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }

/* Reading-progress hairline pinned under the masthead */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--gold-500);
    z-index: 200;
    transition: width .12s linear;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}