/* learn.css: the Learn page. Loads after site.css and uses its colour variables. */
.learn{--serif:Newsreader,Georgia,"Times New Roman",serif}
.learn .ln-sec{scroll-margin-top:150px}
.learn section,.learn .sec{padding:112px 0}
[data-off]{display:none!important}

/* ---------- section headings ---------- */
.ln-head{display:flex;align-items:flex-start;gap:28px;margin-bottom:56px}
.ln-head .num{flex:none;font:300 clamp(3.4rem,7vw,5.6rem)/.8 var(--serif);color:var(--gold);letter-spacing:-.04em;opacity:.9;padding-top:4px}
.ln-head h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.045em}
.ln-head p{margin-top:14px;max-width:52ch;color:var(--mu);font-size:1.12rem}
.ln-head.dk .num{color:var(--gl)}.ln-head.dk p{color:#C9CCE6}

/* ---------- hero ---------- */
.ln-hero{position:relative;overflow:hidden;color:#fff;padding:92px 0 96px;
  background:radial-gradient(ellipse 60% 100% at 100% 0,rgba(227,197,110,.22),transparent 60%),radial-gradient(ellipse 70% 90% at 0 100%,#1B2160,transparent 65%),var(--navy)}
.ln-hero:before{content:"";position:absolute;right:-220px;top:50%;width:900px;height:900px;margin-top:-450px;border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 66px,rgba(227,197,110,.13) 66px 67px);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%)}
.ln-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:80px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font:700 .78rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gl)}
.eyebrow i{width:28px;height:1px;background:var(--gl)}
.eyebrow span{padding:3px 12px;border:1px solid rgba(227,197,110,.45);border-radius:999px;letter-spacing:.08em}
.ln-verse{position:relative;max-width:21em;font:500 clamp(1.24rem,2.4vw,2.02rem)/1.3 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.ln-verse:before{content:"\201C";position:absolute;left:-.55em;top:-.12em;font-size:1.5em;line-height:1;color:var(--gl);opacity:.45}
.ln-ref{margin:28px 0 34px;font-weight:700;color:var(--gl);font-size:1.05rem}
.ln-ref span{margin-left:12px;font-weight:400;color:#B9BCDC;font-size:.9rem}

.ln-doors{display:grid;gap:12px}
.ln-doors a{display:flex;align-items:center;gap:20px;padding:20px 24px;border:1px solid rgba(227,197,110,.22);border-radius:18px;background:rgba(255,255,255,.045);backdrop-filter:blur(8px);transition:transform .25s,background .25s,border-color .25s}
.ln-doors a:hover{transform:translateX(6px);background:rgba(227,197,110,.12);border-color:var(--gl)}
.ln-doors b{flex:none;font:400 1.5rem/1 var(--serif);color:var(--gl);min-width:1.7em}
.ln-doors strong{display:block;font-size:1.08rem;letter-spacing:-.02em;color:#fff}
.ln-doors small{display:block;margin-top:2px;color:#B9BCDC;font-size:.86rem}
.ln-doors a:after{content:"\2192";margin-left:auto;color:var(--gl);opacity:.6;transition:.25s}
.ln-doors a:hover:after{opacity:1;transform:translateX(4px)}

/* ---------- sticky index ---------- */
.ln-idx{position:sticky;top:92px;z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ln-idx .w{display:flex;justify-content:center;gap:8px;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none}
.ln-idx a{flex:none;padding:9px 22px;font-weight:600;font-size:.94rem;color:var(--mu);border-radius:999px;transition:.2s}
.ln-idx a:hover{color:var(--ink);background:var(--p)}
.ln-idx a[aria-current]{background:var(--navy);color:#fff}

/* ---------- teachings: cards ---------- */
.ln-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tc{position:relative;display:flex;flex-direction:column;grid-column:span 2;padding:32px 30px 28px;border:1px solid var(--line);border-radius:24px;background:var(--bg);transition:transform .3s,box-shadow .3s,border-color .3s}
.ln-cards.on .tc{cursor:pointer}
.ln-cards.on .tc:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 30px 50px -30px rgba(11,16,38,.35)}
.tc.feat{grid-column:span 4;color:#fff;border-color:var(--navy);padding:44px 46px 38px;
  background:radial-gradient(circle at 100% 0,rgba(227,197,110,.22),transparent 55%),repeating-radial-gradient(circle at 100% 0,transparent 0 56px,rgba(227,197,110,.13) 56px 57px),var(--navy)}
.tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.tn{font:300 2.4rem/1 var(--serif);color:var(--gold)}.feat .tn{color:var(--gl);font-size:3rem}
.tm{padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:600;color:var(--mu)}
.feat .tm{border-color:rgba(255,255,255,.28);color:#D5D8EE}
.tc h3{font:800 1.55rem/1.1 Inter,sans-serif;letter-spacing:-.04em}
.feat h3{font-size:clamp(2rem,3.4vw,2.9rem);max-width:12em}
.tsum{margin-top:12px;color:var(--mu);font-size:1.02rem;line-height:1.55}.feat .tsum{color:#D5D8EE;font-size:1.2rem;max-width:36ch}
.trefs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:22px 0 0;padding:0}
.trefs li{padding:4px 12px;border-radius:999px;background:var(--p);font-size:.8rem;font-weight:600;color:var(--gd)}
.feat .trefs li{background:rgba(255,255,255,.1);color:var(--gl)}
.tgo{align-self:flex-start;margin-top:auto;padding:26px 0 0;border:0;background:none;color:var(--ink);font:700 .95rem Inter,sans-serif;cursor:pointer}
.tgo span{display:inline-block;transition:transform .25s;color:var(--gold)}
.tc:hover .tgo span{transform:translateX(5px)}
.feat .tgo{color:#fff}.feat .tgo span{color:var(--gl)}
.tfull{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.feat .tfull{border-color:rgba(255,255,255,.2)}
.tfull .tx p{font:400 1.12rem/1.75 var(--serif);margin-top:1em}
.tq,.tfull .tq{margin-top:1.6em;padding:20px 24px;border-radius:16px;background:var(--p);font:italic 500 1.12rem/1.5 var(--serif)}
.tq b{display:block;margin-bottom:6px;font:700 .72rem Inter,sans-serif;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--gd)}
.feat .tfull .tq{background:rgba(255,255,255,.08)}.feat .tq b{color:var(--gl)}
.ln-cards.on .tfull{display:none}
.ln-cards.on .tc{min-height:340px}.ln-cards.on .feat{min-height:380px}

/* reader dialog */
.ln-reader{width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:28px;background:var(--bg);color:var(--ink);box-shadow:0 60px 120px -30px rgba(0,0,0,.6);overflow:hidden}
.ln-reader[open]{animation:rIn .35s cubic-bezier(.2,.8,.2,1)}
.ln-reader::backdrop{background:rgba(7,11,34,.72);backdrop-filter:blur(6px)}
.rin{position:relative;max-height:calc(100vh - 32px);overflow:auto;padding:56px 56px 40px}
.rin:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--gold),var(--gl))}
.rx{position:absolute;right:18px;top:20px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.rx:hover{border-color:var(--gold)}
.rk{font:700 .78rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gd)}
.ln-reader h2{margin-top:14px;font:800 clamp(2rem,4.4vw,3rem)/1.02 Inter,sans-serif;letter-spacing:-.045em;max-width:14em}
.rsum{margin-top:14px;font:italic 400 1.3rem/1.5 var(--serif);color:var(--mu)}
.rbody{margin-top:30px}
.rbody p{font:400 1.25rem/1.85 var(--serif)}.rbody p+p{margin-top:1.1em}
.rbody p:first-child:first-letter{float:left;margin:.08em .12em 0 0;font:500 4.1rem/.8 var(--serif);color:var(--gold)}
.rnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.rnav button{padding:11px 20px;border:1.5px solid var(--line);border-radius:999px;background:none;color:var(--ink);font:600 .92rem Inter,sans-serif;cursor:pointer;transition:.2s}
.rnav button:hover{border-color:var(--gold)}
.rnav .rh{color:var(--gd);font-weight:700;border-bottom:2px solid currentColor}
@keyframes rIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- devotionals: a journey ---------- */
.ln-devo .days-panes article{max-width:none}
.ln-devo.on{display:grid;grid-template-columns:290px minmax(0,1fr);gap:48px;align-items:start}
.days-tabs{position:relative;display:flex;flex-direction:column;gap:2px}
.days-tabs:before{content:"";position:absolute;left:25px;top:28px;bottom:28px;width:2px;background:var(--line)}
.days-tabs button{position:relative;display:flex;align-items:center;gap:16px;text-align:left;padding:12px 14px;border:0;border-radius:16px;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.days-tabs button b{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-left:0;border:2px solid var(--line);border-radius:50%;background:var(--p);font-size:.72rem;color:var(--mu);position:relative;z-index:1;transition:.25s}
.days-tabs button span{display:block;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.days-tabs button small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.days-tabs button:hover{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.days-tabs button.done b{background:var(--gold);border-color:var(--gold);color:#fff}
.days-tabs button[aria-selected=true]{background:var(--bg);box-shadow:0 14px 30px -20px rgba(11,16,38,.5),0 0 0 1px var(--line)}
.days-tabs button[aria-selected=true] b{background:var(--navy);border-color:var(--navy);color:var(--gl);transform:scale(1.2)}
.days-tabs button[aria-selected=true] small{color:var(--gd)}
.ln-devo article{position:relative;padding:4px 0}
.ln-devo.on article{padding:52px 56px 48px;border-radius:28px;background:var(--bg);box-shadow:0 40px 70px -50px rgba(11,16,38,.5),0 0 0 1px var(--line);overflow:hidden}
.ln-devo.on article:after{content:attr(id);display:none}
.ln-devo:not(.on) article{padding:36px 0;border-top:1px solid var(--line)}
.ln-devo .dn{font:700 .78rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gd)}
.ln-devo h3{margin:12px 0 30px;font:800 clamp(2rem,3.8vw,3.1rem)/1.02 Inter,sans-serif;letter-spacing:-.045em}
.ln-devo blockquote{margin:0 0 32px;padding:26px 30px;border-radius:18px;background:var(--p);border-left:4px solid var(--gold)}
.ln-devo blockquote p{font:italic 400 clamp(1.25rem,2vw,1.55rem)/1.5 var(--serif)}
.ln-devo blockquote footer{margin-top:12px;font:700 .92rem Inter,sans-serif;color:var(--gd)}
.ln-devo .body{font:400 1.22rem/1.85 var(--serif);max-width:62ch}
.ln-devo .pray{display:grid;gap:6px;margin-top:32px;padding:24px 28px;border-radius:18px;max-width:62ch;color:#E8E3D2;font:italic 400 1.15rem/1.65 var(--serif);
  background:radial-gradient(circle at 100% 0,rgba(227,197,110,.2),transparent 60%),var(--navy)}
.ln-devo .pray b{font:700 .72rem Inter,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--gl)}
.ln-devo .nxt{margin-top:32px;padding:13px 26px;border:1.5px solid var(--ink);border-radius:999px;background:none;color:var(--ink);font:600 .95rem Inter,sans-serif;cursor:pointer;transition:.2s}
.ln-devo .nxt:hover{background:var(--ink);color:var(--bg)}
.ln-devo:not(.on) .nxt{display:none}
.ln-devo article:focus-visible{outline-offset:6px;border-radius:28px}

/* ---------- verses: cards ---------- */
.ln-filter{margin-bottom:40px}
.ln-filter button{padding:10px 20px}
.ln-verses{columns:3 300px;column-gap:22px}
.ln-verses figure{position:relative;break-inside:avoid;margin:0 0 22px;padding:30px 28px 24px;border:1px solid var(--line);border-radius:22px;background:var(--p);transition:transform .25s,border-color .25s,box-shadow .25s}
.ln-verses figure:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 24px 40px -28px rgba(11,16,38,.4)}
.vt{display:inline-block;margin-bottom:16px;padding:3px 12px;border-radius:999px;background:var(--bg);font:700 .7rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gd)}
.ln-verses blockquote{margin:0;font:400 1.25rem/1.62 var(--serif)}
.ln-verses figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ln-verses figcaption span{font-weight:700;color:var(--gd);font-size:.95rem}
.ln-verses .cp{padding:6px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--mu);font:600 .82rem Inter,sans-serif;cursor:pointer;transition:.2s}
.ln-verses .cp:hover{border-color:var(--gold);color:var(--ink)}
.ln-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- declarations ---------- */
.ln-decl{position:relative;overflow:hidden;color:#fff;padding:112px 0 120px;
  background:radial-gradient(circle at 50% 120%,rgba(227,197,110,.24),transparent 55%),repeating-radial-gradient(circle at 50% 120%,transparent 0 90px,rgba(227,197,110,.12) 90px 91px),var(--navy)}
.ln-decl .w{position:relative}
.dstage{margin-top:8px}
.dlist{list-style:none;margin:0;padding:0}
.dlist li{padding:28px 0;border-top:1px solid #262C52}
.dlist p{font:500 1rem/1.35 var(--serif);max-width:28em}
.dlist cite{display:block;margin-top:10px;font-style:normal;font-weight:700;color:var(--gl);font-size:.95rem}
.dstage.on{min-height:440px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.dstage.on .dlist li{position:relative;padding:0;border:0;animation:dIn .5s ease both}
.dstage.on .dlist p{font-size:clamp(1.37rem,3.5vw,2.86rem);line-height:1.15;letter-spacing:-.02em;max-width:17em;text-wrap:balance}
.dstage.on .dlist cite{margin-top:28px;font-size:1.05rem}
@keyframes dIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dbar{display:flex;gap:6px;margin-bottom:22px}
.dbar button{position:relative;flex:1;height:4px;padding:0;border:0;border-radius:4px;background:#2E3568;cursor:pointer}
.dbar button:before{content:"";position:absolute;inset:-12px 0}
.dbar button:hover{background:#5A62A0}
.dbar button[aria-current]{background:var(--gl)}
.dbtn{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dbtn button{padding:12px 26px;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;background:none;color:#fff;font:600 .95rem Inter,sans-serif;cursor:pointer;transition:.2s}
.dbtn button:hover{background:#fff;color:var(--navy)}
.dbtn .nx{background:var(--gl);border-color:var(--gl);color:var(--navy)}
.dbtn .nx:hover{background:#fff;border-color:#fff}
.dbtn .cp2{margin-left:auto;border-color:#3A4078;color:#C9CCE6}
.dcount{min-width:5.5em;text-align:center;color:#C9CCE6;font-size:.9rem}
.dend{margin-top:64px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .ln-hero-in{grid-template-columns:1fr;gap:56px}
  .ln-cards{grid-template-columns:1fr 1fr}
  .tc{grid-column:span 1}
  .tc.feat{grid-column:span 2}
}
@media(max-width:860px){
  .learn section,.learn .sec{padding:72px 0}
  .ln-hero{padding:64px 0 64px}
  .ln-verse:before{display:none}
  .ln-head{flex-direction:column;gap:14px;margin-bottom:36px}
  .ln-idx{top:92px}.ln-idx .w{justify-content:flex-start}
  .ln-cards{grid-template-columns:1fr}
  .tc.feat{grid-column:span 1;padding:34px 28px 30px}
  .ln-cards.on .tc,.ln-cards.on .feat{min-height:0}
  .rin{padding:48px 24px 28px}
  .rbody p{font-size:1.15rem}
  .ln-devo.on{grid-template-columns:1fr;gap:24px}
  .days-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px;gap:8px}
  .days-tabs:before{display:none}
  .days-tabs button{flex:none;padding:10px 16px 10px 12px;border:1px solid var(--line);background:var(--bg)}
  .ln-devo.on article{padding:34px 24px 32px;border-radius:22px}
  .ln-devo blockquote{padding:20px 20px}
  .ln-decl{padding:72px 0 80px}
  .dstage.on{min-height:0}
  .dbtn .cp2{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.dstage.on .dlist li,.ln-reader[open]{animation:none}.tc,.ln-doors a,.ln-verses figure{transition:none}}

/* Verse of the day and declarations: 65% size (hardened so nothing else overrides it) */
body.learn .ln-hero .ln-verse{font-size:clamp(1.24rem,2.4vw,2.02rem)!important;line-height:1.3!important}
body.learn .dlist p,body.learn .dstage.on .dlist p{font-size:clamp(1.37rem,3.5vw,2.86rem)!important;line-height:1.15!important}
body.learn .dstage:not(.on) .dlist p{font-size:1rem!important}
/* Declarations span the full container width */
body.learn .dlist p,body.learn .dstage.on .dlist p{max-width:none!important;text-wrap:pretty}

/* Verse of the day: a little larger */
body.learn .ln-hero .ln-verse{font-size:clamp(1.5rem,3vw,2.5rem)!important;line-height:1.3!important;max-width:26em}
/* Declarations: fill the container width */
body.learn .dstage,body.learn .dstage .dlist,body.learn .dstage .dlist li{width:100%;max-width:none}
body.learn .dlist p,body.learn .dstage.on .dlist p{font-size:clamp(1.6rem,4.2vw,3.5rem)!important;line-height:1.18!important;max-width:none!important;width:100%;text-wrap:wrap}
body.learn .dstage:not(.on) .dlist p{font-size:1.1rem!important}