@font-face{font-family:Anton;src:url("assets/anton.ttf") format("truetype");font-display:swap}
:root{--navy:#082337;--navy-2:#102e50;--cream:#f8f2df;--paper:#fbf7e9;--gold:#e7b844;--gold-dark:#a97819;--ink:#111d30;--muted:#51606b}
*{box-sizing:border-box}
html{font-size:clamp(16px,.833333vw,32px)}
html,body{height:100%;margin:0;overflow:hidden;background:#03131f;color:var(--ink)}
body{font-family:Arial,Helvetica,sans-serif}
#deck{position:absolute;inset:0;display:grid;place-items:center}
.slide{display:none;position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));overflow:hidden;background:var(--paper);flex-direction:column;padding:1.5% 6.2% 6%}
.slide.active{display:flex}
.thread ol{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);margin:0;padding:.2rem 1% 0;position:relative}
.thread ol:before{content:"";position:absolute;left:7%;right:7%;top:1.55vh;height:.28vh;background:var(--gold);z-index:0}
.thread button{appearance:none;background:none;border:0;width:100%;padding:0;cursor:pointer;color:var(--muted);font:700 1.35vh/1.15 Arial,Helvetica,sans-serif;text-align:center}
.thread button:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px}
.thread .dot{display:block;width:1.55vh;height:1.55vh;margin:.55vh auto .7vh;border: .28vh solid var(--gold);border-radius:50%;background:var(--paper);position:relative;z-index:1}
.thread .is-past{color:var(--navy)}
.thread .is-past .dot,.thread .is-now .dot{background:var(--gold)}
.thread .is-now{color:var(--gold-dark)}
.thread .is-now .dot{width:2.15vh;height:2.15vh;margin:.25vh auto .45vh;box-shadow:0 0 0 .45vh #e7b84455}
.thread .book,.thread .cv{display:block}
.thread .cv{margin-top:.15rem;font-weight:700}
.scripture-slide header,.connect-slide .thread{flex:none}
.scripture-slide h2{margin:.7rem 0 0;padding:0 0 .65rem;border-bottom:2px solid var(--gold);color:var(--navy);font:400 clamp(2.4rem,4vw,4.5rem)/.95 Anton,Impact,sans-serif}
.scripture{flex:1;min-height:0;margin:1.15rem 0 0;font-size:2.4vh}
.scripture p{margin:0;color:#243348;font-family:Georgia,"Times New Roman",serif;font-size:1em;line-height:1.3}
.scripture p+p{margin-top:.5em}
.scripture p.quote{margin:.45em 0 .45em 1.6em;padding-left:.75em;border-left:.22em solid var(--gold);font-size:.94em;line-height:1.3}
.scripture .superscription{margin:0 0 .45em;font-style:italic;color:var(--navy)}
.scripture b{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.62em;color:var(--navy);margin-right:.35em;vertical-align:.12em}
.gold{color:var(--gold-dark)}
.connect-slide{padding-bottom:0}
.connect{--sh:1080px;position:absolute;left:4%;right:4%;top:13%;bottom:12%}
.connect .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.connect .wire{fill:none;stroke:var(--gold);stroke-width:calc(var(--sh) * .0034);stroke-linecap:round;opacity:0;transition:opacity .25s}
.connect .wire.on{opacity:.95}
.connect .wire.final{stroke:var(--gold-dark);stroke-width:calc(var(--sh) * .0052);stroke-dasharray:calc(var(--sh) * .012) calc(var(--sh) * .008);transition:opacity .6s}
.connect .wire-end{fill:var(--gold-dark);opacity:0;transition:opacity .25s}
.connect .wire-end.on{opacity:1}
.connect .box{position:absolute;z-index:1;width:27%;background:var(--cream);border:1px solid #e3d6ad;border-top:calc(var(--sh) * .006) solid var(--gold);padding:calc(var(--sh) * .008) calc(var(--sh) * .014) calc(var(--sh) * .01);opacity:0;transform:translateY(calc(var(--sh) * .012));transition:opacity .35s ease,transform .35s ease;box-shadow:0 calc(var(--sh) * .004) calc(var(--sh) * .014) #08233722}
.connect .box.on{opacity:1;transform:none}
.connect .box[data-col="L"]{left:0}
.connect .box[data-col="M"]{left:36.5%}
.connect .box[data-col="R"]{right:0}
.connect .box[data-row="1"]{top:0}
.connect .box[data-row="2"]{top:21%}
.connect .box[data-row="3"]{top:45%}
.connect .box[data-row="4"]{top:64.5%}
.connect .box[data-row="5"]{top:84%}
.connect .box[data-col="M"][data-row="3"]{top:53%}
.connect .box[data-col="M"][data-row="4"]{top:71.5%}
.connect cite{display:block;font:700 calc(var(--sh) * .0165)/1.1 Arial,Helvetica,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:calc(var(--sh) * .004)}
.connect .box p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:calc(var(--sh) * .0215);line-height:1.22;color:var(--navy)}
.connect .box p span{display:block}
.connect .box p span+span{margin-top:calc(var(--sh) * .004)}
.connect.complete .box[data-box="B"],.connect.complete .box[data-box="J"]{border-color:var(--gold-dark);box-shadow:0 0 0 calc(var(--sh) * .003) var(--gold),0 calc(var(--sh) * .004) calc(var(--sh) * .014) #08233733}
.presentation-ui{position:fixed;z-index:20;left:50%;bottom:1rem;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;padding:.35rem;background:#00101dcc;border:1px solid #ffffff26;border-radius:2rem;opacity:.2;transition:opacity .2s}
.presentation-ui:hover,.presentation-ui:focus-within{opacity:1}
.presentation-ui button{border:0;background:transparent;color:white;min-width:2.25rem;height:2.25rem;border-radius:1.2rem;font:700 1rem Arial,sans-serif;cursor:pointer}
.presentation-ui button:hover{background:#ffffff1b}
.presentation-ui button:first-child,.presentation-ui button:nth-child(3){font-size:1.65rem}
.presentation-ui span{min-width:4.2rem;color:white;text-align:center;font:700 .75rem Arial,sans-serif}
.progress{position:fixed;z-index:21;left:0;right:0;bottom:0;height:4px;background:#ffffff18}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.phone{display:none}

@media (max-width:820px){
  html{font-size:16px}
  html,body{width:100%;max-width:100%;height:auto;overflow:visible;background:var(--paper)}
  body{overflow-x:clip}
  #deck,.presentation-ui,.progress{display:none !important}
  .phone{display:block;width:100%;max-width:100vw;padding-bottom:2.5rem}
  .phone-kicker{margin:0;padding:1rem 1rem .35rem;color:var(--gold-dark);font:700 .78rem/1 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
  .phone-sub{margin:0;padding:0 1rem .6rem;color:var(--navy);font:italic 1rem/1.3 Georgia,serif}
  .phone-thread{position:sticky;top:0;z-index:5;background:var(--paper);padding:.45rem .1rem .4rem;border-bottom:2px solid var(--gold)}
  .phone-thread .thread ol{width:100%;grid-template-columns:repeat(7,minmax(0,1fr))}
  .phone-thread .thread ol:before{top:11px;height:3px;left:4%;right:4%}
  .phone-thread .thread li,.phone-thread .thread button{min-width:0}
  .phone-thread .thread button{font-size:8px;line-height:1.15;letter-spacing:-.02em;color:var(--muted)}
  .phone-thread .thread .dot{width:12px;height:12px;margin:5px auto 5px;border-width:2px}
  .phone-thread .thread .is-now .dot{width:16px;height:16px;margin:3px auto 3px;box-shadow:0 0 0 3px #e7b84455}
  .phone-thread .thread .is-past{color:var(--navy)}
  .phone-thread .thread .is-now{color:var(--gold-dark)}
  .phone-passage{padding:1.35rem 1.05rem .35rem;scroll-margin-top:5.4rem}
  .phone-passage h2{margin:0 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid var(--gold);color:var(--navy);font:400 1.85rem/1.05 Anton,Impact,sans-serif}
  .phone-panel+.phone-panel{margin-top:1.1rem}
  .phone-panel h3{margin:0 0 .4rem;color:var(--gold-dark);font:700 .8rem/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
  .phone-passage p{margin:0;color:#243348;font-family:Georgia,"Times New Roman",serif;font-size:1.125rem;line-height:1.5}
  .phone-passage p+p{margin-top:.6rem}
  .phone-passage p.quote{margin:.55rem 0 .55rem .9rem;padding-left:.7rem;border-left:3px solid var(--gold)}
  .phone-passage b{font-family:Arial,Helvetica,sans-serif;font-size:.7em;color:var(--navy);margin-right:.3em}
  .phone-passage .superscription{margin:0 0 .4rem;font-style:italic;color:var(--navy)}
  .phone-close{margin:1.6rem 0 0;padding:1.2rem .9rem 1.4rem;border-top:2px solid var(--gold);scroll-margin-top:5.4rem}
  .phone-links{list-style:none;margin:0;padding:0}
  .phone-links li+li{margin-top:1.3rem}
  .phone-links .box{background:var(--cream);border:1px solid #e3d6ad;border-top:.35rem solid var(--gold);padding:.65rem .8rem .75rem}
  .phone-links cite{display:block;font:700 .72rem/1.1 Arial,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:.3rem}
  .phone-links .box p{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1.06rem;line-height:1.4;color:var(--navy)}
  .phone-links .box p span{display:block}
  .phone-links .box p span+span{margin-top:.2rem}
  .phone-links .joint{display:block;width:3px;height:1.4rem;margin:0 auto;background:var(--gold)}
  .phone-links .final .joint{width:4px;height:2rem;background:repeating-linear-gradient(var(--gold-dark) 0 6px,transparent 6px 10px)}
  .phone-links .final .box{border-color:var(--gold-dark)}
}
@media (prefers-reduced-motion:reduce){.progress span,.connect .box,.connect .wire,.connect .wire-end{transition:none}}