/**
 * /inc/custom.css
 * -----------------------------------------------------------------
 * Moved out of the inline <style> block in header.php (2026-09-11).
 *
 * NOTE: this is currently one unsplit file containing BOTH true
 * site-wide base styles (body/link resets, CSS variables, buttons)
 * AND styling built specifically for one editorial article template
 * (.panel, .report, .toc, .ledger, .scripture, .acc-ministry, etc).
 * Some live pages already depend on the editorial rules as-is, so
 * nothing was reorganised or removed in this move — only relocated.
 * Splitting site-wide vs template-specific rules into separate files
 * is a follow-up, not done here.
 * -----------------------------------------------------------------
 */

:root{
    /* ---- Fonts ---- */
    --font-heading: "Instrument Serif", Georgia, serif;
    --font-body:    "Open Sans", "Helvetica Neue", sans-serif;
    --font-mono:    "IBM Plex Mono", monospace;
    --font-nav:     "Roboto Condensed", Arial, sans-serif;

    /* ---- Colour ---- */
    --color-ink:        #14140F;  /* primary text */
    --color-paper:      #FCFBF7;  /* page background */
    --color-grey:       #6E6E66;  /* secondary text, labels */
    --color-line:       #DEDCD3;  /* borders, dividers */
    --color-link:       #4491f6;  /* link underline colour */
    --color-link-hover: #000000;  /* link underline on hover */

    /* ---- Type scale ---- */
    --text-base:    1.125rem;  /* body copy — fixed, rem so it respects the
                                   user's browser font-size setting */
    --leading-base: 1.75;      /* line-height — unitless, scales with
                                   font-size automatically */

    --text-h1: clamp(2.6rem, 5.6vw, 5.4rem);  /* fluid — matches .panel__title */
    --text-h2: clamp(1.9rem, 3.6vw, 3.1rem);  /* fluid — matches .report h2 */

    /* ---- Buttons ---- */
    --btn-radius: 4px;

    /* ---- Layout (editorial template only — not a design token) ---- */
    --panel: 40%;
}

*{ box-sizing:border-box; }


body{
    margin:0;
    background:var(--color-paper);
    color:var(--color-ink);
    font-family:var(--font-body);
    font-size:var(--text-base);
    font-weight:400;
    line-height:var(--leading-base);
    -webkit-font-smoothing:antialiased;
}

p{ margin:0 0 1.2em; }
a{ color:var(--color-ink);
    text-underline-offset: 6px;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--color-link);
}

a:hover {
    text-decoration-color: var(--color-link-hover);
}

/* ============ LEFT PANEL ============ */
.panel{
    position:fixed; inset:0 auto 0 0;
    width:var(--panel); height:100vh;
    overflow:hidden; background:var(--color-ink);
    z-index:10;
}
.panel__slides{ position:absolute; inset:0; }
.panel__slide{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    filter:contrast(1.02) brightness(.96);
    opacity:0;
    transition:opacity 1.2s ease;
}
.panel__slide.active{ opacity:1; }

.panel__timer{
    position:absolute; bottom:0; left:0; right:0;
    height:4px; background:rgba(255,255,255,.2); z-index:5;
}
.panel__timer-bar{
    height:100%; width:0; background:#fff;
}
.panel__timer-bar.running{
    transition:width var(--slide-dur) linear;
    width:100%;
}
.panel__scrim{
    position:absolute; inset:0;
    background:linear-gradient(to bottom,rgba(20,20,15,.35) 0%,rgba(20,20,15,0) 35%,rgba(20,20,15,.55) 100%);
}
.panel__logo-link{
    position:absolute; top:2.5rem; left:2.75rem; z-index:2;
    display:inline-block; padding:.5rem; margin:-.5rem;
}
.panel__logo{
    display:block;
    width:clamp(96px,20vw,250px); height:auto;
    filter:brightness(0) invert(1);
}
.panel__foot{
    position:absolute; bottom:2.75rem; left:2.75rem; right:2.75rem; z-index:2;
    color:var(--color-paper);
}
.panel__title{
    font-family:var(--font-heading); font-weight:400;
    font-size:clamp(2.6rem,5.6vw,5.4rem); line-height:.98;
    letter-spacing:.005em; margin:0;
}
.panel__issue{
    font-size:.66rem; font-weight:500; letter-spacing:.3em;
    text-transform:uppercase; margin:1.25rem 0 0;
    color:rgba(252,251,247,.82);
}

/* ============ RIGHT COLUMN ============ */
.content{
    margin-left:var(--panel);
    min-height:100vh;
    padding:0 clamp(1.5rem,4.5vw,4.5rem);
}
.content__inner{ max-width:64rem; padding:3.5rem 0 6rem; }

/* top strip, mirrors Otello's tagline + menu */
.topbar{
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    padding-bottom:2.5rem;
}
.topbar__tag{
    font-family:var(--font-heading); font-style:italic; font-weight:400;
    font-size:1.05rem; color:var(--color-grey);
}
.menu-btn{
    width:46px; height:46px; flex:0 0 46px;
    border:1px solid var(--color-ink); border-radius:50%;
    background:transparent; display:grid; place-content:center; gap:4px; padding:0;
}
.menu-btn span{ display:block; width:15px; height:1px; background:var(--color-ink); }
.menu-btn:hover{ background:var(--color-ink); }
.menu-btn:hover span{ background:var(--color-paper); }

/* ============ TAG CHIPS (the Otello device) ============ */
.tag{
    display:inline-block; background:#663c60; color:var(--color-paper);
    font-size:1rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    padding:.42rem 1rem; line-height:1;
}

/* ============ ARTICLES ============ */
article.report{ padding:3.5rem 0; border-top:1px solid var(--color-line); }
article.report:first-of-type{ border-top:0; padding-top:0; }

.report h2{
    font-family:var(--font-heading); font-weight:400;
    font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.28;
    margin:1.1rem 0 1.75rem; max-width:26ch;
}
.report h3{
    font-family:var(--font-heading); font-weight:400;
    font-size:2.2rem; line-height:1.2; margin:2.5rem 0 .85rem; margin-bottom:30px;
}
.report h4{
    font-size:1rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    margin:2rem 0 .7rem; color:var(--color-grey); margin-bottom:25px;
}
.prose{ max-width:40rem; color:#33332C; }
.prose ul{ list-style:none; padding-left:1.3rem; }
.prose li{ position:relative; margin-bottom:.6rem; }
.prose li::before{
    content:""; position:absolute; left:-1.3rem; top:.85em;
    width:.45rem; height:1px; background:var(--color-ink);
}
.prose .ledger li::before{ display:none; }
.prose .toc li::before{ display:none; }
.prose .toc li{ position:static; padding-left:0; }

/* Table of Contents: keep normal numbering and remove prose dash markers */
.prose .toc-list li::before{ display:none; content:none; }
.prose .toc-list li{ position:static; padding-left:0; }

/* table of contents */
.toc{ margin:0 0 2.5rem; padding:1.75rem 0; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.toc h3{
    font-family:var(--font-body); font-size:.66rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--color-grey);
    margin:0 0 1rem;
}
.toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.toc li{
    counter-increment:toc;
    padding:.55rem 0;
    border-bottom:1px solid rgba(222,220,211,.5);
}
.toc li:last-child{ border-bottom:0; }
.toc a{
    display:flex; align-items:baseline; gap:1rem;
    text-decoration:none; color:var(--color-ink);
    font-family:var(--font-heading);
    font-size:clamp(1.4rem,3vw,2rem); line-height:1.15;
    transition:color .2s ease;
}
.toc a::before{
    content:counter(toc, decimal-leading-zero);
    font-family:var(--font-body); font-size:.66rem; font-weight:600;
    letter-spacing:.14em; color:var(--color-grey);
    flex:0 0 1.8em;
}
.toc a:hover{ color:var(--color-grey); }
.lead{
    font-family:var(--font-heading); font-size:1.35rem; font-weight:400;
    line-height:1.45; color:var(--color-ink); max-width:36rem;
}

.byline{
    margin-top:2rem; padding-top:1rem; border-top:1px solid var(--color-line);
    font-size:1 rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--color-grey);
}
.byline strong{ color:var(--color-ink); font-weight:600; }

/* author block (photo + name under heading) */
.author-block{
    display:flex; align-items:center; gap:1.15rem;
    margin:0 0 2rem; padding:0;
}
.author-block img{
    width:100px; height:100px; border-radius:50%; flex-shrink:0;
    object-fit:cover;
}
.author-block .author-info{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    line-height:1.6;
}
.author-block .author-name{
    font-weight:700; color:var(--color-ink); display:block;
}
.author-block .author-role{
    color:var(--color-grey); display:block;
}

/* ============ FIGURES ============ */
figure.plate{ margin:2.5rem 0; max-width:40rem; }
figure.plate img{ width:100%; display:block; filter:grayscale(1); }
figure.plate.colour img{ filter:none; }
figure.plate figcaption{
    font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--color-grey); margin-top:.85rem;
}

/* zoomable images — lightbox on click */
.zoomable{ cursor:zoom-in; position:relative; }
.zoomable img{ transition:opacity .2s ease; }
.zoomable:hover img{ opacity:.88; }
.expand-hint{
    display:inline-block; margin-left:.5rem;
    font-weight:600; color:var(--color-ink); opacity:.45;
    transition:opacity .2s ease;
}
.zoomable:hover .expand-hint{ opacity:1; }

/* lightbox modal */
.modal-lightbox .modal-dialog{ max-width:92vw; margin:2vh auto; }
.modal-lightbox .modal-content{
    background:rgba(20,20,15,.96); border:0; border-radius:0;
    padding:0;
}
.modal-lightbox .modal-body{ padding:clamp(1rem,3vw,2.5rem); text-align:center; }
.modal-lightbox .modal-body img{
    max-width:100%; max-height:82vh; object-fit:contain;
    display:inline-block;
}
.modal-lightbox .lb-caption{
    font-family:var(--font-body); font-size:.72rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
    color:rgba(252,251,247,.6); margin-top:1.25rem;
}
.modal-lightbox .btn-close{ filter:invert(1); position:absolute; top:1rem; right:1rem; z-index:2; }

/* ============ FIGURES / NUMBERS ============ */
.ledger{ margin:2.5rem 0; padding:0; list-style:none; max-width:none; width:100vw; max-width:100%; }
.prose .ledger{ max-width:none; width:auto; margin-left:0; margin-right:0; }
.ledger li{
    display:flex; align-items:baseline; gap:1.5rem;
    padding:1rem 0; border-bottom:1px solid var(--color-line);
}
.ledger li:first-child{ border-top:1px solid var(--color-line); }
.ledger .n{
    font-family:var(--font-heading); font-weight:400;
    font-size:2.4rem; line-height:1; flex:0 0 6em; text-align:right;
}
.ledger .lbl{
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    line-height:1.6; color:var(--color-grey);
}

/* ============ SCRIPTURE ============ */
.scripture{
    margin:2.5rem 0; max-width:36rem;
    font-family:var(--font-heading); font-style:italic; font-weight:400;
    font-size:1.45rem; line-height:1.4;
}
.scripture cite{
    display:block; margin-top:1rem; font-style:normal; font-family:var(--font-body);
    font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:var(--color-grey);
}

/* ============ MINISTRY ACCORDION ============ */
.acc-ministry .accordion-item{
    background:transparent; border:0;
    border-top:1px solid var(--color-line);
}
.acc-ministry .accordion-item:last-child{ border-bottom:1px solid var(--color-line); }
.acc-ministry .accordion-button{
    background:transparent; padding:1.35rem 0; box-shadow:none;
    font-family:var(--font-heading); font-weight:400;
    font-size:clamp(1.4rem,3vw,2rem); line-height:1.15;
    color:var(--color-ink); letter-spacing:.005em;
    display:flex; align-items:baseline; gap:1rem;
}
.acc-ministry .accordion-button::after{ display:none; }
.acc-ministry .accordion-button .acc-arrow{
    margin-left:auto; flex-shrink:0;
    width:1.1rem; height:1.1rem;
    transition:transform .35s ease;
}
.acc-ministry .accordion-button:not(.collapsed) .acc-arrow{
    transform:rotate(180deg);
}
.acc-ministry .accordion-button .acc-author{
    font-family:var(--font-body); font-size:.64rem; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--color-grey);
    white-space:nowrap;
}
.acc-ministry .accordion-button:not(.collapsed){
    color:var(--color-ink);
}
.acc-ministry .accordion-button:hover{
    color:var(--color-grey);
}
.acc-ministry .accordion-body{
    padding:0 0 2.5rem;
}
.acc-ministry .accordion-body .prose{ max-width:none; }

/* ============ STAFF ============ */
.staff-name{
    font-family:var(--font-heading); font-weight:400;
    font-size:clamp(1.9rem,3.5vw,2.7rem); line-height:1.05; margin:1rem 0 .5rem;
}
.staff-role{
    font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
    color:var(--color-grey); margin-bottom:1.5rem;
}
.staff-photo{ width:100%; display:block; filter:grayscale(1); transition:filter .5s ease; }
.staff-photo:hover{ filter:none; }

/* ============ SECTION TITLES (stacked-section library) ============ */
/* Shared heading style for /sections/*.php templates. Uses the token
   in :root rather than a raw size, and is deliberately a dedicated
   class (not a bare h2 rule) so it can't collide with .report h2,
   which belongs to the editorial template. */
.section-title{
    font-size: var(--text-h2);
    line-height: 1.28;
}

/* ============ BUTTONS ============ */
.btn-ink,.btn-line{
    border-radius:0; font-size:1rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; padding:.95rem 1.9rem;
    border:1px solid var(--color-ink);
    border-radius: var(--btn-radius);
    min-width:200px;
}
.btn-ink{ background:var(--color-ink); color:var(--color-paper); }
.btn-ink:hover{ background:transparent; color:var(--color-ink); border-color:var(--color-ink); }
.btn-line{ background:transparent; color:var(--color-ink); }
.btn-line:hover{ background:var(--color-ink); color:var(--color-paper); }

.colophon{
    border-top:1px solid var(--color-line); margin-top:4rem; padding-top:2rem;
    font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-grey);
}
.colophon a{ border-bottom:1px solid var(--color-line); }

/* ============ CONTENTS DRAWER ============ */
.offcanvas{ background:var(--color-paper); }
.offcanvas a{
    display:block; padding:.65rem 0; border-bottom:1px solid var(--color-line);
    font-family:var(--font-heading); font-size:1.35rem; font-weight:400;
}
.offcanvas a:hover{ padding-left:.5rem; transition:padding .25s ease; }

section[id]{ scroll-margin-top:2rem; }

/* ============ BACK TO TOP ============ */
.to-top{
    position:fixed; right:2.25rem; bottom:2.25rem; z-index:30;
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; padding:0;
    border:1px solid rgba(252,251,247,.18); border-radius:50%;
    background:var(--color-ink); color:var(--color-paper);
    cursor:pointer;
    box-shadow:0 6px 24px rgba(20,20,15,.22);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:#2b2b22; }
.to-top:focus-visible{ outline:2px solid #4491f6; outline-offset:3px; }
.to-top svg{ width:18px; height:18px; display:block; }

/* ============ RESPONSIVE ============ */
@media (max-width:991.98px){
    .panel{ position:relative; width:100%; height:72vh; }
    .panel__logo-link{ top:1.75rem; left:1.75rem; }
    .panel__logo{ width:clamp(220px,34vw,240px); }
    .panel__foot{ bottom:1.75rem; left:1.75rem; right:1.75rem; }
    .content{ margin-left:0; }
    .content__inner{ padding-top:2.5rem; }
    .ledger .n{ font-size:1.9rem; flex-basis:4.5em; }
    .to-top{ right:1.25rem; bottom:1.25rem; width:46px; height:46px; }
}

@media (prefers-reduced-motion:reduce){
    *{ transition:none!important; animation:none!important; }
}

.report[id]{ scroll-margin-top:5rem; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
}