/* ============================================================
   Palimpsest · Tier 1 system
   Under-layers, live leaves, glosses and folio marks.
   Depth is occlusion, blur, scale and differential scroll.
   There is no box-shadow anywhere in this system.
   ============================================================ */

/* ── The under-layers ── */
.pal-under {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    contain: layout paint;
    transition: opacity 1400ms ease;
}
html.pal-ready .pal-under { opacity: 1; }
.under {
    position: absolute;
    left: -6vw;
    width: 118vw;
    will-change: transform;
}
.under::before {
    /* the one sentence, repeated so it runs the length of the page */
    content: attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text) ' · ' attr(data-text);
    display: block;
    font-family: var(--serif);
    font-size: var(--t-under);
    line-height: 0.9;
    color: var(--reveal);
    word-spacing: 0.08em;
    transform-origin: left top;
}
.under-deep { top: 18vh; }
.under-deep::before {
    filter: blur(3px);
    opacity: 0.34;
    transform: rotate(-4deg);
    color: var(--reveal-deep);
}
.under-mid { top: 62vh; }
.under-mid::before {
    filter: blur(1px);
    opacity: 0.3;
    font-style: italic;
    transform: rotate(3deg);
}
@media (prefers-reduced-motion: reduce) {
    .pal-under { opacity: 1; transition: none; }
    .under { transform: none !important; }
    .under::before { transform: none; }
}

/* Everything in flow sits above the under-layers */
main, footer, header.article-header, .article-back, .scroll-progress { position: relative; z-index: 1; }
/* the body leaf overlaps the header leaf, so it must paint above it (its opening heading was being hidden) */
.pal-article .article-body { z-index: 2; }
footer { z-index: 2; }
body::before { display: none; }   /* the old fixed margin line */

/* ── The live leaf ── */
.leaf {
    position: relative;
    background: var(--ink-raised);
    border-left: 2px solid var(--rubric);
    padding: 3rem 3.2rem 3.2rem;
    max-width: 46rem;
}
.leaf.verso { border-left: none; border-right: 2px solid var(--reveal); }
.leaf.deep { background: var(--ink-deep); border-left-color: var(--oxide); }
/* folio mark in the outer track, drawn from data-folio */
.leaf::after {
    content: attr(data-folio);
    position: absolute;
    top: 3rem;
    left: calc(100% + 1.4rem);
    font-family: var(--mono);
    font-size: var(--t-1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--reveal-lit);
    writing-mode: vertical-rl;
    white-space: nowrap;
}
.leaf.verso::after { left: auto; right: calc(100% + 1.4rem); }
.leaf[data-folio=""]::after, .leaf:not([data-folio])::after { content: none; }

/* ── Article pages (Tier 1) ── */
.pal-article .article-header { padding-top: 7.5rem; text-align: left; }
.pal-article .article-header h1 { margin-left: 0; margin-right: 0; max-width: none; font-weight: 400; }
.pal-article .article-header .subtitle,
.pal-article .article-header .article-subtitle { margin-left: 0; color: var(--vellum-dim); }
.pal-article .article-meta, .pal-article .article-byline { color: var(--reveal-lit); font-size: var(--t-2); letter-spacing: 0.06em; }

/* recto: leaf on the left */
.recto { margin-left: max(2rem, 9vw); margin-right: auto; }
/* verso: leaf on the right */
.verso { margin-left: auto; margin-right: max(2rem, 9vw); }
/* leaves overlap the one above */
.pal-article .article-body { padding-top: 0; }
.pal-article .article-body > .leaf, .pal-article .article-body.leaf { margin-top: -2.6rem; }
.pal-article .article-body p { color: #C6C1B2; }
.pal-article .article-body h2 { font-weight: 400; }
.pal-article .article-body h2:first-child { margin-top: 0; }
.pal-article .pull-quote { color: var(--vellum); }
.pal-article .accent-rule { margin: 2.2rem 0; }
.pal-article .bp-contents-item, .pal-article .cycle-step { border-bottom-color: var(--reveal-deep); }
.pal-article .cycle-step::before {
    border: none; border-radius: 0; width: auto; height: auto;
    font-family: var(--mono); font-size: var(--t-2); color: var(--reveal-lit); top: 1.45rem;
}
.pal-article .callout { background: var(--ink-deep); border: 1px solid var(--reveal-deep); border-left: 2px solid var(--reveal-deep); }
.pal-article .evidence-item { background: transparent; border: 1px solid var(--reveal-deep); border-radius: 0; }
.pal-article .article-body .evidence-num { color: var(--vellum); font-weight: 400; font-size: 1.7rem; margin-bottom: 0.4rem; }
.pal-article .article-body .evidence-src { font-size: var(--t-1); color: var(--vellum-dim); }
.pal-article .article-body .evidence-text { font-size: var(--t-3); }

/* the deepest well on the site: the authority panel */
.pal-article .article-body .authority-panel {
    background: var(--ink-deep);
    border-top: none;
    border-left: 3px solid var(--oxide);
    border-radius: 0;
    margin-left: -3.2rem;
    margin-right: -7rem;
    padding: 3.4rem 3.8rem 3.2rem;
}
.pal-article .article-body .authority-panel h2 { color: var(--reveal-lit); font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; margin-bottom: 1.6rem; }
.pal-article .article-body .authority-panel .authority-statement { color: var(--vellum); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.pal-article .article-body .authority-panel .authority-statement span { color: var(--oxide); }
.pal-article .article-body .authority-panel .authority-body { color: var(--vellum-dim); }

/* related reading: a stagger, not a grid */
.pal-article .related-reading, .pal-article .related { border-top: none; padding-top: 3rem; }
.pal-article .related-reading-links, .pal-article .related-grid { display: block; }
.pal-article .related-reading-links a, .pal-article .related-card {
    display: block; max-width: 34rem; min-width: 0; flex: none;
    background: var(--ink-raised); border: 1px solid var(--reveal-deep); border-left: 2px solid var(--reveal-deep);
    border-top: 1px solid var(--reveal-deep); border-radius: 0; padding: 1.4rem 1.8rem;
}
.pal-article .related-reading-links a + a, .pal-article .related-card + .related-card { margin-left: 4rem; margin-top: -0.6rem; }
.pal-article .related-reading-links a:hover, .pal-article .related-card:hover { border-left-color: var(--oxide); background: var(--ink-raised); }
.pal-article .related-card h4, .pal-article .related-reading-links a span { font-weight: 400; }

/* closing call */
.pal-article .article-cta { border-top: none; background: transparent; text-align: left; padding-top: 4rem; }
.pal-article .article-cta::before { content: none; }
.pal-article .article-cta h2, .pal-article .article-cta p { margin-left: 0; padding-left: 0; }
.pal-article .article-cta p { color: var(--vellum-dim); }
.pal-article .article-cta a[style*="display: block"] { color: var(--reveal-lit) !important; font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.06em; }

@media (max-width: 1100px) {
    .leaf { max-width: min(46rem, calc(100vw - 7rem)); }
    .recto { margin-left: max(1.5rem, 4vw); }
    .verso { margin-right: max(1.5rem, 4vw); }
    .pal-article .article-body .authority-panel { margin-right: -3.2rem; }
}
@media (max-width: 760px) {
    /* Phones: the 7.5rem desktop header inset left a dead band under the back link. 3.4rem keeps clearance for the handwritten title, which overhangs the h1 by about 40px. Added 6 September 2026. */
    .pal-article .article-header { padding-top: 3.4rem; }
    .leaf { padding: 2rem 1.4rem 2.2rem; max-width: none; }
    .leaf::after { content: none; }
    .recto, .verso { margin-left: 0; margin-right: 0; }
    .pal-article .article-body > .leaf, .pal-article .article-body.leaf { margin-top: -1.2rem; margin-left: 1rem; }
    .pal-article .article-body .authority-panel { margin-left: -1.4rem; margin-right: -1.4rem; padding: 2.2rem 1.6rem 2rem; }
    .pal-article .related-reading-links a + a, .pal-article .related-card + .related-card { margin-left: 1.2rem; }
    .under { left: -10vw; width: 140vw; }
    /* Phones: lighter blur so Android browsers (Firefox included) never have to repaint a heavy filtered layer on scroll */
    .under-deep::before { filter: blur(2px); }
    .under-mid::before { filter: none; opacity: 0.24; }
}

/* ── Handwritten title (the Partnership page) ── */
/* Handwritten title (the Partnership page). The words stay in the h1 as set type; the SVG writes
   them by hand first, then the hand sinks beneath the type, the way the under-layers sit beneath the page. */
.hw-h1 { position: relative; }
.hw-h1 .hw-text { position: relative; z-index: 1; display: inline-block; opacity: 0; animation: hwType 1.1s ease 2.5s forwards; }
.hw-title { position: absolute; left: -2%; top: 50%; width: 104%; height: auto; overflow: visible; z-index: 0; pointer-events: none;
    transform: translateY(-52%) rotate(-2deg); transform-origin: left center;
    animation: hwSink 1.4s ease 2.5s forwards; }
.hw-ink { fill: var(--vellum); animation: hwSinkInk 1.4s ease 2.5s forwards; }
.hw-r { animation: hwWrite var(--d) linear forwards; animation-delay: calc(var(--t) + 0.35s); }
@keyframes hwWrite { to { width: var(--w); } }
@keyframes hwType { to { opacity: 1; } }
@keyframes hwSink { to { transform: translateY(-62%) rotate(-3deg); opacity: 0.34; } }
@keyframes hwSinkInk { to { fill: var(--vellum-dim); } }
@media (prefers-reduced-motion: reduce) {
    .hw-r { animation: none; width: var(--w); }
    .hw-h1 .hw-text { opacity: 1; animation: none; }
    .hw-title { animation: none; opacity: 0.34; transform: translateY(-62%) rotate(-3deg); }
    .hw-ink { animation: none; fill: var(--vellum-dim); }
}