/* Faith Journal · Vespers. Rules live in the style guide; keep this file in step with it. */
:root{
  color-scheme:dark;
  --bg:#101827; --panel:#172236; --ink:#ece4d2; --text:#f3ede0; --mute:#a9a596; --gold:#d0aa5a; --rule:#2a3750;
  --display:"Marcellus", Georgia, serif; --body:"Alegreya", Georgia, serif; --sc:"Alegreya SC", "Alegreya", Georgia, serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.65;padding:0 16px 56px;
  -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--panel);padding:6px 10px;z-index:10}
.wrap{max-width:1000px;margin:0 auto}

/* Masthead */
header.mast{padding:34px 0 22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 24px;border-bottom:1px solid var(--gold)}
.mast .name{font-family:var(--display);font-size:clamp(28px,5vw,38px);letter-spacing:.12em;text-transform:uppercase;margin:0;line-height:1.1}
.mast .name a{color:var(--ink);text-decoration:none}
.mast .tag{color:var(--mute);font-style:italic;margin:2px 0 0}
nav.sitenav{display:flex;gap:20px;font-family:var(--display);letter-spacing:.12em;font-size:13px;text-transform:uppercase}
nav.sitenav a{color:var(--gold);text-decoration:none}
nav.sitenav a:hover,nav.sitenav a[aria-current]{text-decoration:underline;text-underline-offset:5px}

/* Dates */
.date{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--gold)}
.date span{color:var(--mute)}

/* Arched frames */
.arch{border-radius:999px 999px 6px 6px;overflow:hidden;border:1px solid var(--gold);padding:5px}
.arch img{border-radius:999px 999px 3px 3px;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}

/* Index */
a.feature,a.card{color:inherit;text-decoration:none}
.feature{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px;align-items:center;padding:40px 0;border-bottom:1px solid var(--rule)}
.feature h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.5vw,42px);line-height:1.12;margin:8px 0 12px;text-wrap:balance}
.feature p{color:var(--mute);margin:0;font-size:20px;font-style:italic}
.label{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--mute);margin:34px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:34px 26px}
.card{min-width:0;display:block}
.card .arch{max-width:150px;padding:4px}
.card h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;margin:14px 0 6px;text-wrap:balance}
.card p{margin:6px 0 0;color:var(--mute);font-size:17px;font-style:italic}
.card:hover h3,.feature:hover h2{color:var(--gold)}
.empty{padding:60px 0;text-align:center;color:var(--mute);font-style:italic}

/* Entry */
article{max-width:720px;margin:0 auto;padding-top:40px}
.back{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:12.5px;color:var(--gold);text-decoration:none}
article .top{text-align:center;margin-top:22px}
article .top figure.lead{margin:0 auto 26px}
article .top .arch{max-width:300px;margin:0 auto}
article h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.5vw,48px);line-height:1.1;margin:10px 0 12px;text-wrap:balance}
article .dek{font-style:italic;color:var(--mute);font-size:21px;margin:0 auto 10px;max-width:40ch}
.orn{color:var(--gold);text-align:center;letter-spacing:.6em;margin:26px 0}
figcaption{font-size:14px;color:var(--mute);line-height:1.5;margin-top:10px}
figcaption a,footer.site .credits a{color:var(--mute)}
.body{max-width:62ch;margin:0 auto;font-size:21px;line-height:1.7}
.body > p,.body > ul,.body > ol,.body > .glossed > p,.body > .glossed > ul,.body > .glossed > ol,.ccc blockquote{font-weight:500;color:var(--text)}
.body p{margin:0 0 1.1em}
.body h2,.body h3{font-family:var(--display);font-weight:400;line-height:1.2;margin:1.6em 0 .6em;text-wrap:balance}
.body h2{font-size:28px}.body h3{font-size:23px}
.body hr{border:0;margin:2em 0;text-align:center}
.body hr::after{content:"✦ ✦ ✦";color:var(--gold);letter-spacing:.6em}
.body ul,.body ol{padding-left:1.3em;margin:0 0 1.1em}
figure{margin:30px 0}
figure.inline{background:var(--panel);padding:14px;border-radius:4px}
figure.inline img{width:100%}
/* Portrait art floats beside the text on wide screens and stacks on phones. */
figure.float{float:right;width:min(44%,300px);margin:8px 0 18px 28px;padding:10px}
figure.float.left{float:left;margin:8px 28px 18px 0}
.body .glossed,.body .scripture,.body .ccc,.body .father,.body figure.wide,.body h2,.body h3,.body hr,footer.site{clear:both}
.body::after{content:"";display:block;clear:both}
.body blockquote.plain{margin:1.4em 0;padding-left:18px;border-left:1px solid var(--rule)}

/* Quotations: Scripture */
.scripture{margin:2em auto;max-width:34ch;text-align:center;font-family:var(--display);font-size:clamp(23px,3.6vw,27px);line-height:1.42;color:var(--gold)}
.scripture::before,.scripture::after{content:"";display:block;width:56px;height:1px;background:var(--gold);opacity:.55;margin:0 auto 20px}
.scripture::after{margin:20px auto 0}
.scripture p{margin:0}
.scripture cite{display:block;font-style:normal;font-family:var(--display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:14px}
.scripture cite span{color:var(--mute)}
.ref{font-style:italic;font-weight:400}
/* Only Scripture is gold inside a sentence, quote and reference, like the set-apart Scripture blocks; Catechism references stay in the text colour */
.scripture-ref,.body em:has(+ .scripture-ref){color:var(--gold)}
/* Only Scripture quoted inside a sentence is italic; Catechism words quoted in a sentence are upright (Nial, 2026-10-12) */
.body em:has(+ .ccc-ref){font-style:normal}

/* Quotations: Catechism */
.ccc{margin:1.6em 0;display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start}
.ccc .num{font-family:var(--display);font-size:13px;letter-spacing:.08em;color:var(--bg);background:var(--gold);padding:4px 8px 3px;border-radius:2px;margin-top:5px;font-variant-numeric:tabular-nums}
.ccc .txt{min-width:0;border-left:1px solid var(--rule);padding-left:18px}
.ccc blockquote{margin:0}
.ccc blockquote p{margin:0 0 .6em}
.ccc cite{display:block;font-style:normal;font-family:var(--sc);font-size:15px;letter-spacing:.04em;color:var(--mute);margin-top:6px}

/* Quotations: Fathers and Doctors */
.father{margin:1.6em 0;background:var(--panel);border-radius:4px;padding:22px 24px;display:grid;gap:14px}
.father blockquote{margin:0;font-style:italic;font-size:20px}
.father blockquote p{margin:0 0 .6em}
.father blockquote p:last-child{margin:0}
.father .who{display:grid;gap:2px;border-top:1px solid var(--rule);padding-top:12px}
.father .name{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--gold)}
.father .work{font-size:15.5px;color:var(--mute)}

/* Footer */
footer.site{border-top:1px solid var(--rule);margin-top:44px;padding-top:20px;font-size:16px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
/* An entry's source and copyright credits, set at the footer's full width. */
footer.site .credits{flex:1 1 100%;font-size:13.5px;line-height:1.55}
footer.site .credits p{margin:0 0 .7em}
footer.site .credits p:last-child{margin:0}

/* Margin gloss: on wide screens, Fathers and Catechism quotes that follow a Scripture block sit
   in the right margin beside it; elsewhere they sit beside the block before them. The text column itself never moves; the gloss sits outside it.
   The gloss is out of the flow, so a long one runs down the margin beside the following text
   (Nial doesn't want the text pushed down). Two glossed passages close together can overlap. */
@media (min-width:1300px){
  .glossed{position:relative}
  .gloss{position:absolute;top:2em;left:calc(100% + 44px);width:250px;display:grid;gap:18px}
  .glossed > :first-child:not(.scripture) ~ .gloss{top:.35em}
  .gloss > .father,.gloss > .ccc{margin:0;padding:18px 18px 16px;background:transparent;border-left:1px solid var(--gold);border-radius:0}
  .gloss .father blockquote{font-size:17px;line-height:1.55;color:var(--ink)}
  .gloss .father .name{font-size:11.5px}
  .gloss .father .work{font-size:14px}
  .gloss > .ccc{display:block}
  .gloss .ccc .num{display:inline-block;margin:0 0 10px}
  .gloss .ccc .txt{border-left:0;padding-left:0}
  .gloss .ccc blockquote{font-size:17px;line-height:1.55;font-weight:400;color:var(--ink)}
  .gloss .ccc cite{font-size:13.5px}
}

@media (max-width:640px){
  .feature{grid-template-columns:1fr;gap:22px}
  .feature .arch{max-width:240px}
  .ccc{grid-template-columns:1fr;gap:8px}
  .ccc .num{justify-self:start}
  figure.float,figure.float.left{float:none;width:auto;max-width:360px;margin:30px auto;padding:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}