body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: a lapis band carries the timeline ribbon, which sticks to the top of every page.
   Six lanes, one per kind of source; every quotation on the site is one mark on the ribbon.
   Everything below the band lines up with the left edge of the ribbon (the --gut column holds lane labels and dates). */
:root{
  --lapis:#182a72; --lapis-deep:#101c55; --on-lapis:#f4f2e8; --on-lapis-muted:#aeb8e0; --gold:#e8b84a; --band-line:rgba(255,255,255,.14);
  --bg:#f7f8fb; --panel:#ffffff; --ink:#151a2d; --muted:#586180; --line:#d6dae6; --link:#1c3a9e; --rubric:#a8261c;
  --k-scripture:#8a6410; --k-father:#1c3a9e; --k-council:#a8261c; --k-doctor:#1d6b52; --k-magisterium:#6a2f96; --k-liturgy:#0d6c80; --k-saint:#ad2d68; --k-miracle:#5c7410; --k-note:#586180;
  --kb-scripture:#f0c350; --kb-father:#f4f2e8; --kb-council:#ff7d5c; --kb-doctor:#7ddcae; --kb-magisterium:#dba8ff; --kb-liturgy:#74d6ea; --kb-saint:#ff9ec4; --kb-miracle:#cfe56a; --kb-note:#aeb8e0;
  --serif:"Alegreya",Georgia,"Times New Roman",serif;
  --sans:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:112px; --lane:11px; --pad:max(20px,env(safe-area-inset-left,0px)); --rail-h:120px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --lapis:#14225f; --lapis-deep:#0d1745;
  --bg:#0b0f21; --panel:#131935; --ink:#e7e9f3; --muted:#9aa3c0; --line:#272f50; --link:#9db6ff; --rubric:#ff8f7d;
  --k-scripture:#f0c350; --k-father:#9db6ff; --k-council:#ff8f7d; --k-doctor:#7ddcae; --k-magisterium:#dba8ff; --k-liturgy:#74d6ea; --k-saint:#ff9ec4; --k-miracle:#cfe56a; --k-note:#9aa3c0;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --lapis:#14225f; --lapis-deep:#0d1745;
  --bg:#0b0f21; --panel:#131935; --ink:#e7e9f3; --muted:#9aa3c0; --line:#272f50; --link:#9db6ff; --rubric:#ff8f7d;
  --k-scripture:#f0c350; --k-father:#9db6ff; --k-council:#ff8f7d; --k-doctor:#7ddcae; --k-magisterium:#dba8ff; --k-liturgy:#74d6ea; --k-saint:#ff9ec4; --k-miracle:#cfe56a; --k-note:#9aa3c0;
  color-scheme:dark }
@media (max-width:879px){ :root{ --gut:0px; --lane:7px; --pad:max(16px,env(safe-area-inset-left,0px)) } }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.45}
a{color:var(--link)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:2px}
.band :focus-visible,.rail :focus-visible{outline-color:var(--gold)}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--pad)}
.in{padding-left:var(--gut)}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:50;background:var(--panel);padding:8px 12px}
.dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:currentColor;flex:none}

/* band: masthead and the lead of each page */
.band{background:var(--lapis);color:var(--on-lapis)}
.band a{color:inherit}
.mast .wrap{display:flex;align-items:center;gap:16px;padding-block:14px}
.brand{font-family:var(--serif);font-size:23px;font-weight:500;text-decoration:none;margin-right:auto;letter-spacing:.005em}
.sections{display:flex;gap:4px 20px;flex-wrap:wrap;font-size:16px}
.sections a{text-decoration:none;color:var(--on-lapis-muted);padding:4px 0;border-bottom:2px solid transparent}
.sections a:hover{color:var(--on-lapis)}
.sections a[aria-current]{color:var(--on-lapis);border-color:var(--gold)}
.btn{background:transparent;border:1px solid var(--band-line);color:var(--on-lapis);border-radius:4px;padding:6px 12px;font-size:15px;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--gold);color:var(--gold)}
h1{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance}
.lead-home{padding-block:26px 0}
.lead-home h1{font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.012em;max-width:17ch}
.lede{font-size:18.5px;line-height:1.45;color:var(--on-lapis-muted);max-width:56ch;margin:14px 0 0}
.keyline{display:none;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;margin:14px 0 0;padding:0;list-style:none}
.keyline li{display:inline-flex;align-items:center;gap:6px}
.keyline span{color:var(--on-lapis-muted)}

/* the callout: one quotation, tied to its mark on the ribbon */
.stage{position:relative;margin-top:26px}
.call{width:min(620px,100%);margin-left:clamp(0px,calc(var(--x,10)*1% - 250px),calc(100% - min(620px,100%)))}
.call-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.call-when{font-family:var(--serif);font-size:40px;line-height:1;color:var(--gold);font-variant-numeric:lining-nums}
.call-kind{font-size:14.5px;display:inline-flex;align-items:center;gap:7px}
.call-kind span{color:var(--on-lapis)}
.call-who{margin:8px 0 0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-who b{font-weight:700}
.call-who span{color:var(--on-lapis-muted)}
.call-q{font-family:var(--serif);font-size:21px;line-height:1.36;margin:8px 0 0;height:calc(1.36em*4);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4}
.call-foot{display:flex;align-items:center;gap:8px;margin-top:12px}
.call-foot a{font-size:15.5px;font-weight:500;color:var(--gold);text-underline-offset:3px;margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step{background:transparent;border:1px solid var(--band-line);color:var(--on-lapis);border-radius:4px;padding:4px 10px;font-size:14.5px}
.step:hover{border-color:var(--gold);color:var(--gold)}
.drop{position:relative;height:26px}
.drop::before{content:"";position:absolute;left:calc(var(--x,10)*1%);top:6px;bottom:-12px;border-left:1px solid var(--gold);z-index:21}
.fade{animation:fade .28s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lead-obj{padding-block:10px 26px}
.crumb{font-size:15px;color:var(--on-lapis-muted);margin:0 0 14px}
.crumb a{color:var(--on-lapis)}
.lead-obj h1{font-size:clamp(26px,3.9vw,42px);line-height:1.12;max-width:30ch}
.lead-obj .verses{font-size:15px;color:var(--on-lapis-muted);margin:14px 0 0;max-width:72ch}
.lead-obj .verses b{color:var(--on-lapis);font-weight:500}

/* the ribbon: sticks to the top of every page */
.rail{position:sticky;top:0;z-index:20;background:var(--lapis-deep);color:var(--on-lapis);box-shadow:0 1px 0 rgba(232,184,74,.5)}
.rail .wrap{padding-block:10px 6px}
.score{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);cursor:crosshair;touch-action:pan-y;outline-offset:4px;-webkit-user-select:none;user-select:none}
.labels{display:grid;grid-auto-rows:var(--lane);font-size:11px;line-height:var(--lane);font-weight:500;white-space:nowrap;overflow:hidden}
.field{position:relative;height:calc(var(--lane)*var(--lanes,8));background:repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0 var(--lane),transparent var(--lane) calc(var(--lane)*2));border-radius:2px}
.grid{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.07)}
.grid.major{border-color:rgba(255,255,255,.2)}
.tick{position:absolute;width:2px;margin-left:-1px;height:calc(var(--lane) - 2px);margin-top:1px;border-radius:1px;opacity:.9;z-index:1}
.tick.dim{opacity:.13;z-index:0}
.sel .tick:not(.dim){width:3px;margin-left:-1.5px;height:var(--lane);margin-top:0;opacity:1}
.tick.cur{width:5px!important;margin-left:-2.5px!important;height:calc(var(--lane) + 4px)!important;margin-top:-2px!important;opacity:1!important;z-index:3;box-shadow:0 0 0 1.5px var(--lapis-deep),0 0 9px 1px currentColor}
.head{position:absolute;top:-10px;bottom:-3px;border-left:1px solid var(--gold);z-index:2;pointer-events:none}
.axis{grid-column:2;position:relative;height:17px;font-size:11.5px;color:var(--on-lapis-muted);font-variant-numeric:lining-nums tabular-nums}
.axis span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.read{display:flex;align-items:center;gap:8px;padding-left:var(--gut);margin-top:3px;min-height:32px}
.readout{flex:1;min-width:0;font-size:15px}
.readout .hint{color:var(--on-lapis-muted);display:none}
.tid{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--on-lapis);min-width:0}
.tid:hover .r-q{color:var(--on-lapis)}
.r-when{color:var(--gold);font-family:var(--serif);font-size:17px;white-space:nowrap;font-variant-numeric:lining-nums}
.r-who{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:4ch}
.r-q{font-family:var(--serif);font-style:italic;color:var(--on-lapis-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0}
.r-n{color:var(--on-lapis-muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 3 auto;min-width:3ch}
.home:not(.stuck) .readout .hint{display:block}
.home:not(.stuck) .readout .tid{display:none}
.home:not(.stuck) .read .step{visibility:hidden}
.read .step{padding:2px 9px;line-height:1.3}
.read .btn{padding:3px 10px;font-size:14.5px}

/* home: subjects as dropdowns */
main{padding-block:34px 0}
.sub-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 14px;max-width:880px}
h2{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.15;margin:0}
.sub-head p{margin:0;color:var(--muted);font-size:15.5px}
.cats{border-bottom:1px solid var(--line);max-width:880px}
.cat{border-top:1px solid var(--line)}
.cat summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:baseline;gap:4px 16px;padding:16px 4px;cursor:pointer;list-style:none}
.cat summary::-webkit-details-marker{display:none}
.cat-name{font-family:var(--serif);font-size:25px;line-height:1.15}
.cat-meta{font-size:14.5px;color:var(--muted);font-variant-numeric:lining-nums}
.chev{width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);align-self:center;margin-top:-5px}
.cat[open] .chev{transform:rotate(-135deg);margin-top:4px}
.cat summary:hover .cat-name,.cat[open] .cat-name{color:var(--link)}
.cat-body{padding:0 4px 14px}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:13px 14px;margin-inline:-14px;border-radius:6px;text-decoration:none;color:var(--ink)}
.row + .row{margin-top:2px}
a.row:hover{background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.topic{font-size:14.5px;font-weight:700;color:var(--link)}
.claim{font-family:var(--serif);font-size:20px;line-height:1.3}
.mini{position:relative;height:9px;margin-top:6px;border-bottom:1px solid var(--line)}
.mini i{position:absolute;bottom:0;width:2px;margin-left:-1px;height:8px;border-radius:1px 1px 0 0}
.meta{font-size:14px;color:var(--muted);font-variant-numeric:lining-nums}
.row.todo .claim{font-size:17px;color:var(--muted)}
.secs{max-width:880px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:6px}
.sec-name{font-family:var(--serif);font-size:25px;line-height:1.15;color:var(--link)}
.sec-blurb{font-size:16.5px}
.secs .claim{font-size:18px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.sub-head.second{margin-top:44px}

/* objection page */
.answer{max-width:760px;border-left:3px solid var(--gold);padding:2px 0 2px 20px}
.label{font-size:14.5px;font-weight:700;color:var(--rubric);margin:0 0 4px}
.answer p.txt{margin:0;font-family:var(--serif);font-size:21px;line-height:1.42}
.note{font-size:14.5px;color:var(--muted);margin:14px 0 0;max-width:760px}
.list-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:38px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:transparent;border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:14px;display:inline-flex;align-items:center;gap:7px}
.chip span:last-child{color:var(--ink);font-variant-numeric:lining-nums}
.chip[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.entries{margin-left:calc(var(--gut)*-1)}
.era{display:flex;align-items:baseline;gap:12px;padding:30px 0 4px var(--gut)}
.era b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px}
.era span{font-size:14px;color:var(--muted);font-variant-numeric:lining-nums}
.era::after{content:"";flex:1;border-top:1px solid var(--line)}
.entry{display:grid;grid-template-columns:calc(var(--gut) - 30px) 18px minmax(0,1fr);gap:0 12px;padding-block:16px;scroll-margin-top:calc(var(--rail-h) + 10px)}
.when{font-family:var(--serif);font-size:20px;text-align:right;font-variant-numeric:lining-nums;line-height:1.15;padding-top:1px}
.spine{position:relative}
.spine::before{content:"";position:absolute;left:8px;top:0;bottom:-32px;border-left:1px solid var(--line)}
.spine i{position:absolute;left:3px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid currentColor}
.entry.now .spine i{background:currentColor}
.body{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:720px}
.kind{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.eh{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:0}
.who{font-weight:700;font-size:17.5px;line-height:1.3}
.cite{color:var(--muted);font-weight:400}
.text{font-family:var(--serif);font-size:20px;line-height:1.45;margin:2px 0;overflow-wrap:anywhere;padding-left:16px;border-left:2px solid currentColor}
.text span{color:var(--ink)}
.text.orig{font-size:16.5px;font-style:italic;line-height:1.4}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:4px 0;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:15.5px}
.facts dt{font-weight:700;color:var(--muted)}
.facts dd{margin:0}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:0}.facts dd{margin-bottom:6px}}
.why{font-size:16px;margin:0}
.why b{color:var(--rubric);font-weight:700}
.flag{font-size:14.5px;color:var(--muted);margin:0}
.srcline{font-size:14.5px;margin:0}
.srcline a{text-underline-offset:3px}
.nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;max-width:880px}
.nav a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);background:var(--panel)}
.nav a:hover{border-color:var(--link)}
.nav a:last-child{text-align:right}
.nav small{font-size:13.5px;color:var(--muted)}
.nav b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--link)}
.foot{font-size:14px;color:var(--muted);padding-block:44px 64px}
.foot p{max-width:78ch;margin:0;border-top:1px solid var(--line);padding-top:18px}

/* reader feedback */
.fb-wrap{scroll-margin-top:calc(var(--rail-h) + 10px);margin-top:48px;padding-top:26px;border-top:1px solid var(--line);max-width:880px}
.fb{max-width:760px}
.fb-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.act{display:inline-block;background:var(--link);color:var(--bg);border:1px solid var(--link);border-radius:4px;padding:8px 16px;font-size:16px;font-weight:700;text-decoration:none}
.act:hover{filter:brightness(1.12)}
.act:disabled{opacity:.55;cursor:default}
.act.ghost,.act.small{background:transparent;color:var(--link)}
.act.small{padding:4px 12px;font-size:14.5px}
.fb-form{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.fb-form h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0}
.fb-form .note{margin:0}
.fb-field{display:flex;flex-direction:column;gap:4px;font-size:15px;font-weight:700}
.fb-field small{font-size:14px;font-weight:400;color:var(--muted)}
.fb-field textarea,.fb-field input{font:inherit;font-weight:400;font-size:17px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px 10px;width:100%}
.fb-field textarea{font-family:var(--serif);font-size:18.5px;line-height:1.4;resize:vertical;min-height:7em}
.fb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-msg{margin:12px 0 0;font-size:15.5px;font-weight:700;color:var(--rubric)}
.fb-msg:empty{display:none}
.fb-form .fb-msg{margin:0}
.fb-h{font-size:14.5px;font-weight:700;color:var(--muted);margin:30px 0 0}
.fb-thread{padding-block:18px;border-bottom:1px solid var(--line)}
.fb-post{display:flex;flex-direction:column;gap:5px}
.fb-post p{margin:0}
.fb-by{font-size:14.5px;color:var(--muted)}
.fb-by b{color:var(--rubric)}
.fb-answer .fb-by b{color:var(--k-doctor)}
.fb-on,.fb-src{font-size:14.5px;color:var(--muted);overflow-wrap:anywhere}
.fb-text{font-family:var(--serif);font-size:19px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-replies{display:flex;flex-direction:column;gap:14px;margin:14px 0 0 4px;padding-left:16px;border-left:2px solid var(--line)}
.fb-admin{display:inline-flex;gap:8px;margin-left:10px;align-items:baseline}
.fb-admin button{background:transparent;border:1px solid var(--line);border-radius:4px;padding:0 8px;font-size:13.5px}
main > .in > .fb-acts{margin-top:4px}

/* browse drawer */
dialog.menu{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(440px,100%);max-width:100%;border:0;padding:0;background:var(--bg);color:var(--ink)}
dialog.menu::backdrop{background:rgba(8,12,40,.6)}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--lapis);color:var(--on-lapis);position:sticky;top:0;z-index:1}
.menu-top h2{font-size:23px}
.menu-body{padding:6px 20px 32px}
.menu-body .cats{border-bottom:0}
.menu-body .cat-name{font-size:21px}
.menu-body .claim{font-size:16.5px;color:var(--muted)}
.menu-body .row{padding:9px 14px}
.menu-secs{display:flex;flex-direction:column;padding-block:10px 6px}
.menu-secs a{font-family:var(--serif);font-size:22px;text-decoration:none;color:var(--ink);padding:7px 0;border-bottom:1px solid var(--line)}
.menu-secs a[aria-current]{color:var(--link)}
.menu-h{font-size:14.5px;font-weight:700;color:var(--muted);margin:22px 0 2px}

@media (max-width:879px){
  .sections{display:none}
  .keyline{display:flex}
  .lede{font-size:17px}
  .call-when{font-size:32px}
  .call-q{font-size:19px;height:calc(1.36em*6);-webkit-line-clamp:6;line-clamp:6}
  .rail .wrap{padding-block:8px 4px}
  .r-q{display:none}
  .axis span:nth-child(2){display:none}
  .r-who{flex:1 1 0}
  .cat-name{font-size:22px}
  .cat summary{grid-template-columns:minmax(0,1fr) 18px}
  .cat-meta{grid-column:1;grid-row:2}
  .chev{grid-row:1/3}
  .entries{margin-left:0}
  .era{padding-left:0}
  .entry{grid-template-columns:18px minmax(0,1fr);gap:0 10px}
  .when{grid-column:2;grid-row:1;text-align:left;font-size:18px;color:var(--muted)}
  .spine{grid-column:1;grid-row:1/3}
  .body{grid-column:2;grid-row:2}
  .text{font-size:19px;padding-left:12px}
  .answer p.txt{font-size:19.5px}
  .nav{grid-template-columns:1fr}
  .nav a:last-child{text-align:left}
}
@media (prefers-reduced-motion:reduce){ .fade{animation:none} }