@charset "UTF-8";
/* ==========================================================================
   Introduction to Bible Basics
   Launceston Christadelphians

   Direction 2, Parchment. Warm ground, scripture set as the largest thing on
   the screen, prose stepping back to support it.

   Every text colour here passes WCAG 2.2 AA for body text against every light
   ground in the system. Lowest pairing is brass on sage at 4.8:1. Figures are
   recorded in 03-brand/brand-system.json.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --paper:#F7F1E4;
  --parchment:#EDE3CE;
  --sage:#CEE3A0;
  --ink:#16211C;
  --green:#2F4A34;
  --deep:#25382A;
  --slate:#4B6370;
  --teal:#25686A;
  --brass:#78561D;
  --plum:#6B2F3A;
  --line:#DED2BB;
  --line-soft:#E6DCC7;

  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --disp:'Prompt',var(--sans);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --measure:36rem;          /* ~68 characters, comfortable for long reading */
  --bar-h:3.5rem;
  --nav-h:4.5rem;
  --r:3px;
  --r-lg:6px;
  --pad-x:clamp(1.15rem,5vw,2.5rem);
  --step:clamp(1.6rem,4vw,2.4rem);
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:1.0625rem/1.68 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img,svg,picture{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; line-height:1.16; font-weight:600; text-wrap:balance}
/* The last two words of a heading stay together. */
.nw{white-space:nowrap}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
button{font:inherit; color:inherit}
a{color:var(--teal)}
:focus-visible{outline:2.5px solid var(--teal); outline-offset:3px; border-radius:2px}
::selection{background:var(--sage); color:var(--ink)}

[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ================================================================= shell */
.shell{min-height:100dvh; display:flex; flex-direction:column}

.bar{
  position:sticky; top:0; z-index:40; flex:0 0 auto;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.bar__in{
  height:var(--bar-h); max-width:72rem; margin:0 auto;
  padding:0 var(--pad-x); display:flex; align-items:center; gap:.7rem;
}
.bar__logo{width:27px; height:auto; flex:0 0 auto}
.bar__t{
  font:600 .8rem/1.2 var(--disp); color:var(--green); letter-spacing:.005em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bar__part{
  margin-left:auto; font-size:.72rem; color:var(--slate);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* ------------------------------------------------ banner menu and tutor
   The menu holds the lesson list, so it can be reached from any screen and
   not only from the index. The tutor button stands in the banner the whole
   way through rather than waiting for the last screens of a lesson. */
.bar__ask,.bar__menu{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem;
  min-height:38px; padding:.35rem .8rem; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); color:var(--green);
  font:600 .76rem/1 var(--sans); cursor:pointer; text-decoration:none;
  white-space:nowrap; transition:background .14s, border-color .14s, color .14s;
}
.bar__ask{margin-left:.15rem}
.bar__ask:hover,.bar__menu:hover{background:var(--parchment); border-color:var(--slate)}
.bar__ask:focus-visible,.bar__menu:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}
.bar__menu[aria-expanded=true]{background:var(--green); color:#fff; border-color:var(--green)}
.bar__bars{display:block; position:relative; width:14px; height:2px; background:currentColor}
.bar__bars::before,.bar__bars::after{
  content:''; position:absolute; left:0; width:14px; height:2px; background:currentColor;
}
.bar__bars::before{top:-5px}
.bar__bars::after{top:5px}

.menu{
  position:absolute; left:0; right:0; top:100%; z-index:60;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:0 14px 30px -18px rgba(22,33,28,.5);
}
.menu[hidden]{display:none}
.menu__in{max-width:72rem; margin:0 auto; padding:1.15rem var(--pad-x) 1.35rem}
.menu__h{
  font:600 .7rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .65rem;
}
.menu__l{list-style:none; margin:0 0 1.1rem; padding:0; columns:2; column-gap:1.8rem}
.menu__l li{break-inside:avoid}
.menu__l a{
  display:flex; gap:.6rem; align-items:baseline; padding:.4rem .5rem;
  border-radius:var(--r); color:var(--ink); text-decoration:none; font-size:.92rem;
}
.menu__l a:hover{background:var(--parchment)}
.menu__l a[aria-current]{background:var(--parchment); color:var(--green); font-weight:600}
.menu__l b{
  color:var(--green); font-variant-numeric:tabular-nums;
  min-width:1.15rem; font-weight:600;
}
.menu__foot{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.05rem;
}
.menu__home{color:var(--slate); font-size:.88rem}
@media (max-width:40rem){ .menu__l{columns:1} }
@media (max-width:34rem){ .bar__part{display:none} }
@media (max-width:27rem){ .bar__menu-t{display:none} .bar__menu{padding-inline:.7rem} }

.track{height:3px; background:var(--line-soft)}
.track__i{
  display:block; height:100%; width:0; background:var(--sage);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

.deck{flex:1 1 auto; position:relative}
.scr{max-width:72rem; margin:0 auto; padding:var(--step) var(--pad-x) 2.5rem}
.scr[hidden]{display:none}
.wrap{max-width:var(--measure); margin:0 auto}
.wrap--wide{max-width:48rem; margin:0 auto}

@media (prefers-reduced-motion:no-preference){
  .scr:not([hidden]){animation:rise .34s cubic-bezier(.2,0,.15,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
}

/* ================================================================= nav */
.nav{
  position:sticky; bottom:0; z-index:40; flex:0 0 auto;
  background:var(--paper); border-top:1px solid var(--line);
}
.nav__in{
  min-height:var(--nav-h); max-width:72rem; margin:0 auto;
  padding:.7rem var(--pad-x); display:flex; align-items:center; gap:.8rem;
}
.nav__count{
  margin:0 auto; font-size:.76rem; color:var(--slate);
  font-variant-numeric:tabular-nums; text-align:center;
}
.nav__hint{display:block; font-size:.7rem; color:var(--brass); margin-top:.15rem}
.nav__hint:empty{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.72rem 1.5rem; border:0; border-radius:999px;
  font:600 .93rem/1 var(--sans); cursor:pointer; text-decoration:none;
  background:var(--green); color:#fff;
  transition:background .14s, opacity .14s;
}
.btn:hover{background:var(--deep)}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn[disabled]:hover{background:var(--green)}
.btn--ghost{background:transparent; color:var(--slate); padding-inline:1rem}
.btn--ghost:hover{background:var(--parchment); color:var(--ink)}
.btn--brass{background:var(--brass)}
.btn--brass:hover{background:#5C4318}
.btn--lg{padding:.95rem 1.9rem; font-size:1rem}

/* ================================================================= cover */
.cover{position:relative; min-height:min(76dvh,40rem); display:grid; overflow:hidden}
.cover__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cover__img--pos{object-position:72% 55%}
.cover__veil{
  position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(247,241,228,.55) 0%,rgba(247,241,228,.18) 46%,rgba(37,56,42,.30) 100%);
}
/* Lesson 2's cover is a night sky. Lightening it would undo the photograph, so
   it gets a deepening scrim instead. */
body[data-lesson="2"] .cover__veil{
  background:linear-gradient(105deg,rgba(22,33,28,.55) 0%,rgba(22,33,28,.15) 50%,rgba(22,33,28,.45) 100%);
}
/* Lesson 3's is a pale cliff, so the scrim goes the other way to let the
   panel separate from it. */
body[data-lesson="3"] .cover__veil{
  background:linear-gradient(105deg,rgba(37,56,42,.34) 0%,rgba(37,56,42,.10) 48%,rgba(37,56,42,.30) 100%);
}
/* Lesson 9's cover is a standing figure, and a cover frame crops top and
   bottom. The picture is cut wider than the others so that on an ordinary
   window nothing is lost vertically at all, and the frame is deepened to
   match it. On a short window the remaining loss is taken from the desk
   rather than from the head, which is the half that carries the meaning. */
body[data-lesson="9"] .cover{min-height:min(88dvh,52rem)}
body[data-lesson="9"] .cover__img--pos{object-position:50% 28%}
/* Lesson 10 is cut a little wider than 14:9 as well, to keep the window and
   the open book in one frame. It sits low so the book survives a short
   window, since the view above it can spare the sky. */
body[data-lesson="10"] .cover__img--pos{object-position:50% 68%}
/* Lesson 8's sunrise bursts up from the bottom edge of the photograph, so a
   short window takes its crop from the clouds rather than from the sun. */
body[data-lesson="8"] .cover__img--pos{object-position:72% 100%}
.cover__in{
  position:relative; align-self:center; width:100%;
  max-width:72rem; margin:0 auto; padding:var(--step) var(--pad-x);
}
/* Text never sits directly on the photograph. The panel is required. */
.panel{
  background:var(--paper); border-left:4px solid var(--brass);
  padding:clamp(1.5rem,4vw,2.4rem); max-width:34rem;
  box-shadow:0 2px 30px -12px rgba(22,33,28,.4);
}
.eyebrow{
  font:600 .7rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.85rem;
}
.cover h1{
  font:600 clamp(2rem,6vw,3.1rem)/1.04 var(--serif);
  color:var(--green); letter-spacing:-.018em; margin-bottom:.65rem;
}
.cover__sub{font:400 1.1rem/1.5 var(--serif); color:var(--ink); margin-bottom:1.5rem}
.meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-bottom:1.7rem;
  font-size:.8rem; color:var(--slate);
}
.meta span{display:inline-flex; align-items:center; gap:.4rem}
.meta span::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--sage)}

/* ================================================================= divider */
.divider{background:var(--sage); position:relative; overflow:hidden}
.divider__in{
  max-width:72rem; margin:0 auto; padding:clamp(2.6rem,7vw,4.2rem) var(--pad-x);
  position:relative;
}
.divider__n{
  position:absolute; right:var(--pad-x); top:50%; transform:translateY(-50%);
  font:600 clamp(6rem,16vw,11rem)/1 var(--serif); color:var(--green);
  opacity:.17; pointer-events:none; user-select:none;
}
.divider .eyebrow{color:var(--green); opacity:.85}
.divider h2{
  font:600 clamp(1.7rem,4.6vw,2.5rem)/1.1 var(--serif);
  color:var(--green); letter-spacing:-.015em; margin-bottom:.7rem; max-width:26rem;
}
.divider p{color:var(--ink); max-width:30rem; margin:0; font-size:1.02rem}

/* ================================================================= prose */
.part{
  font:600 .7rem/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.7rem;
}
h2.head{
  font:600 clamp(1.55rem,4vw,2.15rem)/1.14 var(--serif);
  color:var(--brass); letter-spacing:-.014em; margin-bottom:1rem;
}
h3.sub{font:600 1.12rem/1.3 var(--disp); color:var(--green); margin:2rem 0 .6rem}
.lede{font:400 1.16rem/1.58 var(--serif); color:var(--ink); margin-bottom:1.7rem}
.said{color:var(--slate); font-size:1rem}
.big{
  font:600 clamp(1.3rem,3.4vw,1.75rem)/1.3 var(--serif);
  color:var(--green); margin:1.8rem 0;
}
.rule{border:0; border-top:1px solid var(--line); margin:2.2rem 0}

/* What the course says in its own voice, rather than the studies'. Every word
   of the studies is set in ink. Anything we add, which is the instructions for
   working a screen, is set in the dark green and a little heavier, so colour is
   not the only thing carrying the difference. 8.6:1 on the paper ground. */
.ours{color:var(--green); font-weight:600}
/* A scripture reference never breaks across a line. Wrapped at build
   time, so it holds wherever the text reflows. */
.psg{white-space:nowrap}
/* A line of references set under the sentence that sends you to them. */
.refs{font-size:.96rem; color:var(--slate); margin-bottom:1.1rem}
.said .ours,.lede .ours{color:var(--green)}

ul.list,ol.list{margin:0 0 1.3rem; padding-left:0; list-style:none}
ul.list li,ol.list li{position:relative; padding-left:1.5rem; margin-bottom:.7rem}
ul.list li::before{
  content:''; position:absolute; left:.15rem; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--sage);
}
ol.list{counter-reset:n}
ol.list li{counter-increment:n; padding-left:2rem}
ol.list li::before{
  content:counter(n); position:absolute; left:0; top:.05em;
  font:600 .8rem/1.55 var(--sans); color:var(--brass);
  width:1.3rem; height:1.3rem; text-align:center;
  border:1px solid var(--brass); border-radius:50%;
}

/* Reading-task panel: something the learner is asked to go and do. */
.task{
  background:var(--parchment); border-radius:var(--r);
  padding:1.15rem 1.3rem; margin:1.6rem 0;
}
.task h4{
  font:600 .7rem/1.3 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.6rem;
}
.task ul{margin:0; padding-left:0; list-style:none; columns:2; column-gap:1.6rem}
.task li{margin-bottom:.35rem; font:400 1rem/1.5 var(--serif); break-inside:avoid}
@media (max-width:30rem){ .task ul{columns:1} }

/* ============================================================== scripture
   The hero of this direction. Rules above and below, centred, serif, large.
   No italics: long italic passages are harder to read, and the treatment
   already sets the quotation apart.                                       */
.verse{
  margin:2rem 0; padding:1.7rem 0 1.5rem; text-align:center;
  border-top:1px solid var(--brass); border-bottom:1px solid var(--brass);
}
.verse p{
  font:400 clamp(1.24rem,3.1vw,1.6rem)/1.48 var(--serif);
  color:var(--ink); margin:0 0 .85rem; letter-spacing:-.005em;
}
.verse p + p{margin-top:1.1rem}
.verse cite{
  display:block; font:600 .7rem/1.3 var(--sans); letter-spacing:.13em;
  text-transform:uppercase; color:var(--brass); font-style:normal;
}
.verse--inline{
  text-align:left; border:0; border-left:3px solid var(--brass);
  padding:.2rem 0 .2rem 1.4rem; margin:1.4rem 0;
}
.verse--inline p{font-size:clamp(1.1rem,2.6vw,1.28rem)}
.verse--sm p{font-size:clamp(1.02rem,2.2vw,1.14rem); line-height:1.55}
.caps{letter-spacing:.06em}

/* ================================================================= stats */
.stats{
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin:1.8rem 0; border:1px solid var(--line);
}
.stat{background:var(--parchment); padding:1.2rem 1rem; text-align:center}
.stat b{
  display:block; font:600 clamp(1.7rem,4.5vw,2.3rem)/1 var(--serif);
  color:var(--green); font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:.3rem; font-size:.79rem; color:var(--slate);
  letter-spacing:.02em;
}
/* Two things set side by side, for a contrast the prose would otherwise carry
   in one long sentence. The first cell is the darker side of it. Plum on the
   clay tint reads 8.9, green on sage 6.5, ink on either above 10. */
.stats--pair{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.stats--pair .stat{padding:1.3rem 1.1rem}
.stats--pair .stat b{font:600 1.15rem/1.3 var(--disp); color:var(--ink)}
.stats--pair .stat span{margin-top:.55rem; font-size:.92rem; line-height:1.45; color:var(--ink); letter-spacing:0}
.stats--pair .stat--a{background:#F1E6E4}
.stats--pair .stat--a b{color:var(--plum)}
.stats--pair .stat--b{background:var(--sage)}
.stats--pair .stat--b b{color:var(--green)}

/* ============================================================== accordion */
.acc{border-top:1px solid var(--line); margin:1.6rem 0}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%; display:flex; align-items:flex-start; gap:.85rem;
  padding:1.1rem .2rem; background:none; border:0; cursor:pointer; text-align:left;
  font:600 1.06rem/1.4 var(--disp); color:var(--green);
}
.acc__btn:hover{color:var(--deep)}
.acc__btn::after{
  content:''; margin-left:auto; flex:0 0 auto; width:.62rem; height:.62rem;
  margin-top:.42rem; border-right:2px solid var(--brass); border-bottom:2px solid var(--brass);
  transform:rotate(45deg); transition:transform .2s;
}
.acc__btn[aria-expanded=true]::after{transform:rotate(-135deg)}
.acc__done{
  flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.3rem; border-radius:50%;
  border:1.5px solid var(--line); position:relative;
}
.acc__btn[data-seen] .acc__done{background:var(--sage); border-color:var(--sage)}
.acc__btn[data-seen] .acc__done::after{
  content:''; position:absolute; left:.28rem; top:.12rem; width:.28rem; height:.52rem;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(42deg);
}
.acc__p{padding:0 .2rem 1.35rem; max-width:var(--measure)}
.acc__p[hidden]{display:none}

/* =================================================================== tabs */
.tabs{margin:1.6rem 0}
.tabs__list{display:flex; flex-wrap:wrap; gap:.35rem; border-bottom:1px solid var(--line)}
.tabs__t{
  padding:.75rem 1.05rem; min-height:44px; background:none; border:0; cursor:pointer;
  font:600 .93rem/1.2 var(--sans); color:var(--slate);
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tabs__t:hover{color:var(--ink)}
.tabs__t[aria-selected=true]{color:var(--green); border-bottom-color:var(--green)}
.tabs__t[data-seen]::after{content:' ✓'; color:var(--brass); font-size:.8em}
.tabs__p{padding:1.5rem 0 .3rem}
.tabs__p[hidden]{display:none}

/* ============================================================== flip cards */
.flips{
  display:grid; gap:.9rem; margin:1.7rem 0;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.flip{
  display:block; position:relative; border:0; padding:0; cursor:pointer;
  background:none; perspective:900px;
}
/* The faces are absolutely positioned, so the inner wrapper needs a real box
   to sit in. It is a span (a button may only contain phrasing content), which
   means display:block has to be set explicitly. */
.flip__in{
  display:block; position:relative; width:100%; height:11.5rem;
  transition:transform .38s cubic-bezier(.3,0,.2,1); transform-style:preserve-3d;
}
.flip[aria-pressed=true] .flip__in{transform:rotateY(180deg)}
/* Room for a sentence or two more on the back. */
.flips--tall .flip__in{height:14rem}
.flip__f,.flip__b{
  position:absolute; inset:0; display:grid; place-content:center; gap:.45rem;
  padding:1.1rem; backface-visibility:hidden; border-radius:var(--r); text-align:center;
  overflow:hidden;
}
.flip__f{background:var(--parchment); border:1px solid var(--line)}
.flip__f b{font:600 1.18rem/1.25 var(--disp); color:var(--green)}
.flip__f i{
  font-style:normal; font-size:.68rem; color:var(--slate);
  letter-spacing:.08em; text-transform:uppercase; text-wrap:nowrap;
}
.flip__b{
  background:var(--sage); transform:rotateY(180deg);
  font-size:.92rem; line-height:1.45; color:var(--ink);
}
/* The passage a card's line comes from, on a line of its own. */
.flip__r{
  display:block; margin-top:.5rem; font-style:normal;
  font:600 .7rem/1.35 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--green);
}
@media (prefers-reduced-motion:reduce){
  .flip__in{transition:none}
  .flip[aria-pressed=true] .flip__in{transform:none}
  .flip__f,.flip__b{backface-visibility:visible}
  .flip__b{transform:none}
  .flip[aria-pressed=false] .flip__b{display:none}
  .flip[aria-pressed=true] .flip__f{display:none}
}

/* ================================================================ stepper */
.step{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--parchment); margin:1.7rem 0;
}
.step__body{padding:1.5rem 1.4rem; min-height:12rem}
.step__n{
  font:600 .7rem/1.3 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.6rem;
}
.step__body h4{font:600 1.14rem/1.3 var(--disp); color:var(--green); margin-bottom:.55rem}
.step__foot{
  display:flex; align-items:center; gap:.8rem; padding:.75rem 1.4rem;
  border-top:1px solid var(--line);
}
.step__dots{display:flex; gap:.4rem; margin:0 auto}
.step__dots i{
  width:.55rem; height:.55rem; border-radius:50%; background:var(--line);
  border:1px solid var(--line);
}
.step__dots i[data-on]{background:var(--brass); border-color:var(--brass)}
.step__pos{font-size:.76rem; color:var(--slate); font-variant-numeric:tabular-nums}

/* =============================================================== timeline */
.tl{margin:1.8rem 0}
.tl__rail{
  display:flex; gap:.4rem; position:relative; padding-top:1.6rem;
  border-top:2px solid var(--line); margin-top:.6rem;
}
.tl__pt{
  flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer; padding:.5rem .3rem;
  text-align:center; position:relative; min-height:44px;
}
.tl__pt::before{
  content:''; position:absolute; top:-1.95rem; left:50%; transform:translateX(-50%);
  width:.85rem; height:.85rem; border-radius:50%;
  background:var(--paper); border:2px solid var(--line);
}
.tl__pt[data-seen]::before{background:var(--sage); border-color:var(--green)}
.tl__pt[aria-current=true]::before{background:var(--green); border-color:var(--green)}
.tl__pt b{display:block; font:600 .92rem/1.2 var(--disp); color:var(--green)}
.tl__pt span{display:block; font-size:.74rem; color:var(--slate); margin-top:.15rem}
.tl__pt[aria-current=true] span{color:var(--ink)}
.tl__panel{
  background:var(--parchment); border-radius:var(--r); padding:1.35rem 1.4rem;
  margin-top:1.2rem; min-height:8rem;
}
.tl__panel h4{font:600 1.1rem/1.3 var(--disp); color:var(--green); margin-bottom:.5rem}
.tl__swatch{
  display:inline-block; width:.85rem; height:.85rem; border-radius:2px;
  vertical-align:-1px; margin-right:.45rem; border:1px solid rgba(22,33,28,.25);
}

/* ================================================================ hotspots */
.hs{margin:1.8rem 0}
.hs__stage{
  display:grid; gap:1.5rem; align-items:start;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
}
@media (max-width:38rem){ .hs__stage{grid-template-columns:1fr} }
.hs__fig{margin:0; background:var(--parchment); border-radius:var(--r); padding:1.1rem}
.hs__fig svg{width:100%; height:auto}
/* A standing figure is far taller than it is wide. Capping its height
   keeps the buttons beside it on a laptop and under it on a phone
   within reach, instead of a screen of picture before the first one. */
.hs__fig--tall{display:flex; justify-content:center}
.hs__fig--tall svg{width:auto; max-width:100%; max-height:60svh}
.hs__list{display:flex; flex-direction:column; gap:.45rem}
.hs__b{
  display:flex; align-items:center; gap:.7rem; width:100%; min-height:44px;
  padding:.7rem .9rem; cursor:pointer; text-align:left;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r);
  font:600 .95rem/1.3 var(--sans); color:var(--ink);
}
.hs__b:hover{border-color:var(--slate)}
.hs__b[aria-current=true]{border-color:var(--green); background:var(--parchment)}
.hs__b[data-seen] b{color:var(--brass)}
.hs__b i{
  font-style:normal; margin-left:auto; font-size:.72rem; color:var(--slate);
  letter-spacing:.03em;
}
.hs__out{
  background:var(--parchment); border-left:3px solid var(--green);
  border-radius:0 var(--r) var(--r) 0; padding:1.15rem 1.25rem; margin-top:1.1rem;
  min-height:5.5rem;
}
.hs__out h4{font:600 1.05rem/1.3 var(--disp); color:var(--green); margin-bottom:.4rem}
/* Every band is labelled in text inside the diagram, so its colour is never
   the only thing identifying it. */
.dg-lbl{font:600 11px/1 var(--sans); letter-spacing:.04em}
.dg-num{font:600 13px/1 var(--sans); font-variant-numeric:tabular-nums}

/* ================================================================ reveal */
.reveal{
  background:var(--parchment); border-radius:var(--r);
  padding:1.4rem; margin:1.7rem 0;
}
.reveal__q{font:400 1.14rem/1.5 var(--serif); color:var(--ink); margin-bottom:1.1rem}
.reveal__out[hidden]{display:none}
.reveal__two{
  display:flex; gap:1.6rem; justify-content:center; margin-top:1.2rem;
  font:600 clamp(1.5rem,4vw,2.1rem)/1 var(--serif); color:var(--brass);
}
/* The same treatment for a single phrase, where a screen turns on one line
   rather than on two words. */
.key{
  text-align:center; margin:1.3rem 0 .2rem;
  font:600 clamp(1.5rem,4vw,2.1rem)/1.25 var(--serif); color:var(--brass);
}

/* ===================================== place: cloze, sort, match. And order.
   Four ways of doing something with the words other than ticking a box.
   All of them are select-then-select: a token, then the place it belongs,
   so they work the same with a finger, a mouse and a keyboard. Colours are
   the check's own: sage for right, the clay tint for wrong. */
.pl,.ord{
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  margin:1.8rem 0; overflow:hidden;
}
.pl__h{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:0; padding:.85rem 1.25rem; background:var(--parchment);
  font:600 .74rem/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.pl__n{font:400 .8rem/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--slate)}
.pl__b{padding:1.25rem}
.pl__q{font:400 1.05rem/1.55 var(--serif); color:var(--ink); margin:0 0 1rem}

/* the verse with holes in it */
.pl__text{font:400 1.22rem/1.85 var(--serif); color:var(--ink); margin:0 0 1rem}
.pl__text cite{
  display:block; margin-top:.5rem; font:600 .68rem/1.3 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate); font-style:normal;
}
.pl__slot{
  display:inline-block; min-width:5.5rem; vertical-align:baseline; margin:0 .1em;
  border:0; border-bottom:2px dashed var(--slate); border-radius:3px 3px 0 0;
  background:var(--parchment); padding:0 .5em; font:inherit; color:var(--ink);
  cursor:pointer; text-align:center; line-height:1.55; min-height:1.6em;
  transition:background .13s, border-color .13s;
}
.pl__slot:empty::after{content:'\00a0'}
.pl--picking .pl__slot:not(.pl__slot--ok){border-bottom-style:solid; border-bottom-color:var(--accent); background:var(--paper)}
.pl__slot--full{border-bottom-style:solid}
.pl__slot--ok{border-bottom-color:var(--green); background:var(--sage); cursor:default}
.pl__slot--no{border-bottom-color:var(--plum); background:#F1E6E4}

/* the words waiting to be placed */
.pl__pool{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem}
.pl__tok{
  border:1.5px solid var(--line); background:var(--paper); border-radius:999px;
  padding:.5rem 1rem; min-height:40px; font:500 .95rem/1.25 var(--sans); color:var(--ink);
  cursor:pointer; text-align:left; transition:background .13s, border-color .13s, color .13s;
}
.pl__tok:hover{border-color:var(--slate); background:var(--parchment)}
.pl__tok[aria-pressed=true]{border-color:var(--accent); background:var(--accent); color:#fff}
.pl__tok--ok{border-color:var(--green); background:var(--sage); cursor:default}
.pl__tok--ok:hover{border-color:var(--green); background:var(--sage)}
.pl__tok--no{border-color:var(--plum); background:#F1E6E4}
.pl__tok[disabled]{cursor:default}
.pl__foot{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.1rem}

/* sort: two bins */
.pl__bins{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-top:1rem}
.pl__bin{
  border:1.5px dashed var(--line); border-radius:var(--r); padding:.9rem; min-height:7.5rem;
  background:var(--parchment); transition:border-color .13s, background .13s;
}
.pl__bin h4{font:600 .98rem/1.3 var(--disp); color:var(--green); margin:0 0 .55rem}
.pl--picking .pl__bin{border-color:var(--accent); background:var(--paper); cursor:pointer}
.pl__drop{display:flex; flex-wrap:wrap; gap:.4rem; min-height:2.6rem}
.pl__drop .pl__tok{font-size:.88rem; padding:.4rem .8rem; min-height:36px}
.pl__here{
  display:none; margin-top:.5rem; border:0; background:none; color:var(--accent);
  font:600 .8rem/1 var(--sans); cursor:pointer; padding:.35rem 0; text-decoration:underline;
  text-underline-offset:3px;
}
.pl--picking .pl__here{display:inline-block}

/* match: two columns */
.pl__cols{display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-top:.4rem}
.pl--match .pl__pool{flex-direction:column; align-items:stretch; align-content:start}
.pl--match .pl__tok{border-radius:var(--r); min-height:44px}
.pl__targets{display:flex; flex-direction:column; gap:.5rem}
.pl--match .pl__slot{
  display:block; width:100%; min-height:44px; text-align:left; margin:0;
  border:1.5px dashed var(--slate); border-radius:var(--r); padding:.55rem .85rem;
  background:var(--parchment); font:500 .92rem/1.35 var(--sans);
}
.pl--match .pl__slot small{display:block; font-size:.76rem; font-weight:600; color:var(--slate); letter-spacing:.02em}
.pl--match .pl__slot b{display:block; font-weight:500; color:var(--ink); min-height:1.2em}
.pl--match .pl__slot--full{border-style:solid}
.pl--match .pl--picking .pl__slot{border-style:solid}
@media (max-width:34rem){.pl__cols{grid-template-columns:1fr}}

/* order: arrows, not dragging */
.ord__list{list-style:none; margin:0; padding:0; counter-reset:o}
.ord__item{
  display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem;
  border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); padding:.6rem .8rem;
  transition:border-color .13s, background .13s;
}
.ord__item::before{
  counter-increment:o; content:counter(o); flex:0 0 1.6rem; height:1.6rem; border-radius:50%;
  display:grid; place-items:center; background:var(--parchment);
  font:600 .78rem/1 var(--sans); color:var(--slate);
}
.ord__txt{flex:1; font-size:.98rem; line-height:1.35}
.ord__ctl{display:flex; gap:.3rem}
.ord__ctl button{
  width:38px; height:38px; border:1.5px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--ink); cursor:pointer; font-size:1rem; line-height:1;
}
.ord__ctl button:hover:not(:disabled){border-color:var(--slate); background:var(--parchment)}
.ord__ctl button:disabled{opacity:.3; cursor:default}
.ord__item--ok{border-color:var(--green); background:var(--sage)}
.ord__item--no{border-color:var(--plum); background:#F1E6E4}
.ord__item--ok::before{background:var(--green); color:#fff}

/* ======================================================= knowledge check */
.kc,
.reflect{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); margin:1.8rem 0; overflow:hidden;
}
.kc__h,
.reflect__h{
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1.3rem; background:var(--parchment); border-bottom:1px solid var(--line);
  font:600 .7rem/1.3 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass);
}
.kc__n{margin-left:auto; letter-spacing:.02em; text-transform:none; color:var(--slate); font-weight:400}
.kc__b,
.reflect__b{padding:1.5rem 1.3rem}
.kc fieldset,
.reflect fieldset{border:0; margin:0; padding:0}
.kc legend,
.reflect legend{
  font:600 clamp(1.1rem,2.7vw,1.28rem)/1.38 var(--serif);
  color:var(--ink); margin-bottom:1.15rem; padding:0;
}
.kc__note{font-size:.82rem; color:var(--slate); margin:-.7rem 0 1.1rem}

.opt{display:block; margin-bottom:.6rem}
.opt:last-child{margin-bottom:0}
.opt input{position:absolute; width:1px; height:1px; opacity:0}
.opt > span{
  position:relative;
  display:flex; gap:.85rem; align-items:flex-start; min-height:44px;
  padding:.85rem 1.05rem; cursor:pointer; font-size:1rem; line-height:1.45;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .13s, background .13s;
}
.opt > span::before{
  content:''; flex:0 0 auto; width:1.1rem; height:1.1rem; margin-top:.26rem;
  border:1.5px solid var(--slate); border-radius:50%; background:var(--paper);
}
.opt--multi > span::before{border-radius:3px}
/* Sixteen short options is a very tall stack on one screen. Two columns fit
   it in view without reordering anything: CSS columns fill the first column
   before the second, so it still reads top to bottom. One column on a phone,
   where two would make each option too narrow to read. */
.opts--grid{columns:2; column-gap:.9rem}
.opts--grid .opt{break-inside:avoid}
@media (max-width:40rem){.opts--grid{columns:1}}
.opt > span:hover{border-color:var(--slate); background:var(--parchment)}
.opt input:focus-visible + span{outline:2.5px solid var(--teal); outline-offset:2px}
.opt input:checked + span{border-color:var(--green); background:var(--parchment)}
.opt input:checked + span::before{
  border-color:var(--green); background:var(--green);
  box-shadow:inset 0 0 0 3px var(--parchment);
}
.opt--multi input:checked + span::before{
  box-shadow:none; position:relative;
}
.opt--multi input:checked + span::after{
  content:''; position:absolute; left:1.4rem; top:1.15rem;
  width:.3rem; height:.55rem; border-right:2px solid var(--parchment);
  border-bottom:2px solid var(--parchment); transform:rotate(42deg);
}
.opt__tag{
  margin-left:auto; align-self:center; flex:0 0 auto;
  font:600 .68rem/1.2 var(--sans); letter-spacing:.09em; text-transform:uppercase;
}

.kc[data-done] .opt > span{cursor:default}
.kc[data-done] .opt > span:hover{border-color:var(--line); background:var(--paper)}
.kc[data-done] .opt input:checked + span:hover{background:var(--parchment)}
.kc[data-done] .opt:not([data-right]) input:not(:checked) + span{opacity:.72}

/* An answered check leaves the other options open to read. They take a
   pointer again, and a small mark on the right says there is more under
   them. */
.opt[data-explore] > span{cursor:pointer; padding-right:2.4rem}
.opt[data-explore] > span:hover{border-color:var(--slate); background:var(--parchment)}
.opt[data-explore] > span:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}
.opt[data-explore] > span::after{
  content:''; position:absolute; right:1rem; top:1.15rem;
  width:8px; height:8px; border-right:2px solid var(--slate);
  border-bottom:2px solid var(--slate); transform:rotate(45deg);
  transition:transform .16s;
}
.opt[data-explore] > span[aria-expanded=true]{opacity:1; border-color:var(--slate)}
.opt[data-explore] > span[aria-expanded=true]::after{transform:rotate(-135deg); top:1.4rem}
.opt__why{
  margin:.45rem 0 0; padding:.7rem .95rem; border-left:3px solid var(--line);
  background:var(--parchment); border-radius:0 var(--r) var(--r) 0;
  font-size:.92rem; line-height:1.5; color:var(--ink);
}
.opt__why[hidden]{display:none}
.kc__tip{margin:.9rem 0 0; font-size:.88rem}
/* Colour never marks correctness on its own: each state also carries a word. */
.kc[data-done=ok] .opt input:checked + span{border-color:var(--green)}
.kc[data-done=ok] .opt input:checked .opt__tag,
.kc[data-done=ok] .opt input:checked + span .opt__tag{color:var(--green)}
.kc[data-done=no] .opt:not([data-right]) input:checked + span{border-color:var(--plum); background:#FAF0F1}
.kc[data-done=no] .opt:not([data-right]) input:checked + span::before{border-color:var(--plum); background:var(--plum)}
.kc[data-done=no] .opt:not([data-right]) input:checked + span .opt__tag{color:var(--plum)}
.kc[data-done] .opt[data-right] > span{border-color:var(--green); opacity:1}
.kc[data-done] .opt[data-right] > span .opt__tag{color:var(--green)}
.kc[data-done] .opt[data-right] input:checked + span::before{border-color:var(--green); background:var(--green)}

.fb{margin-top:1.2rem; padding:1.1rem 1.25rem; border-radius:var(--r); font-size:.98rem}
.fb:empty{display:none}
.fb__t{display:flex; align-items:center; gap:.55rem; font-weight:600; margin-bottom:.45rem}
.fb__t::before{
  flex:0 0 auto; width:1.35rem; height:1.35rem; border-radius:50%;
  display:grid; place-items:center; color:#fff; font:700 .8rem/1 var(--sans);
}
.fb--ok{background:#EEF4E2; border-left:3px solid var(--green)}
.fb--ok .fb__t{color:var(--green)}
.fb--ok .fb__t::before{content:'✓'; background:var(--green)}
.fb--no{background:#FAF0F1; border-left:3px solid var(--plum)}
.fb--no .fb__t{color:var(--plum)}
.fb--no .fb__t::before{content:'✕'; background:var(--plum)}
.fb p{margin:0 0 .6rem}
.fb p:last-child{margin-bottom:0}
.fb ul{margin:.5rem 0 0; padding-left:1.1rem}
.fb li{margin-bottom:.35rem}

/* ================================================================== tutor */
.tutor{background:var(--parchment); border-radius:var(--r); padding:1.35rem 1.4rem; margin:1.9rem 0 0}
.tutor h3{font:600 1.1rem/1.3 var(--disp); color:var(--green); margin-bottom:.45rem}
.tutor p{color:var(--slate); font-size:.97rem; margin-bottom:.9rem}
.link{
  display:inline-flex; align-items:center; min-height:44px;
  font:600 .93rem/1 var(--sans); color:var(--teal); text-decoration:none;
}
.link span{border-bottom:1.5px solid currentColor; padding-bottom:3px}
.link:hover{color:var(--green)}

/* ================================================================== close */
.close{text-align:center; padding:var(--step) 0}
.close__logo{width:82px; margin:0 auto 1.6rem}
.close h2{font:600 clamp(1.6rem,4.2vw,2.2rem)/1.14 var(--serif); color:var(--green); margin-bottom:.9rem}
.close__done{
  display:inline-block; margin:1.4rem 0; padding:.5rem 1.1rem;
  background:var(--sage); border-radius:999px;
  font:600 .82rem/1.3 var(--sans); color:var(--green); letter-spacing:.02em;
}
.next{
  text-align:left; background:var(--parchment); border-radius:var(--r);
  padding:1.4rem 1.5rem; margin:1.6rem 0 1.8rem;
}
.next h3{font:600 1.15rem/1.3 var(--disp); color:var(--green); margin-bottom:.4rem}
.next p{color:var(--slate); font-size:.97rem; margin-bottom:1.1rem}

/* ================================================================= resume */
.resume{
  position:fixed; inset-inline:0; bottom:calc(var(--nav-h) + .8rem); z-index:45;
  display:flex; justify-content:center; padding:0 var(--pad-x); pointer-events:none;
}
.resume[hidden]{display:none}
.resume__in{
  pointer-events:auto; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--deep); color:#fff; border-radius:999px;
  padding:.6rem .7rem .6rem 1.3rem; box-shadow:0 6px 24px -10px rgba(22,33,28,.55);
  font-size:.9rem;
}
.resume__in .btn{background:var(--sage); color:var(--ink); min-height:38px; padding:.45rem 1.1rem}
.resume__in .btn:hover{background:#DCEBB6}
.resume__x{
  background:none; border:0; color:#CFE0C6; cursor:pointer; font-size:1.1rem;
  min-height:38px; min-width:38px; border-radius:50%;
}
.resume__x:hover{background:rgba(255,255,255,.12); color:#fff}

/* ============================================================== printing */
@media print{
  .bar,.nav,.resume,.track{display:none}
  .scr[hidden]{display:block!important}
  .acc__p[hidden],.tabs__p[hidden]{display:block!important}
  body{background:#fff}
}

/* ------------------------------------------------- full-bleed screen mode
   Covers and section dividers run edge to edge. Everything else keeps the
   reading measure. */
.scr--bleed{max-width:none; padding:0}
/* The opening cover fills the viewport between the header and the nav, so the
   first thing a learner sees is a full frame rather than a band of paper. */
.scr--bleed:first-child .cover{
  min-height:calc(100dvh - var(--bar-h) - var(--nav-h) - 3px);
}

/* ------------------------------------------------------- diagram wrapper
   Wide figures scroll inside their own container so the page body never
   scrolls sideways. */
.fig{margin:1.9rem 0}
.fig__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fig figcaption{
  margin-top:.7rem; font-size:.82rem; color:var(--slate); text-align:center;
}
.fig svg{display:block; margin:0 auto; height:auto; max-width:100%}

/* ==========================================================================
   UPGRADE PASS
   Per-lesson accent, paper grain, drop caps, the book grid and the empire map.
   Every accent pairing below is contrast tested. Figures in the comments.
   ========================================================================== */

/* ------------------------------------------------- per-lesson accent
   Same palette in all three lessons, but each one leans on a different
   member of it, so a learner knows which lesson they are in at a glance.
   Contrast on the paper ground: brass 5.93, teal 5.71, green 8.68.
   Ink on the three bands: 11.92, 11.66, 10.49. */
body{--accent:var(--brass); --band:var(--sage);}
body[data-lesson="2"]{--accent:var(--teal);  --band:#C3DEDB;}
body[data-lesson="3"]{--accent:var(--green); --band:#DFCCA4;}
/* Lesson 4 is death, so it takes the plum. The band is a muted clay chosen to
   clear AA for both the green heading and the ink body text that every divider
   sets regardless of accent: 6.49 and 11.00, in the same range as the other
   three bands. */
body[data-lesson="4"]{--accent:var(--plum);  --band:#E4CEC7;}
body[data-lesson="5"]{--accent:var(--slate); --band:#D4DFE2;}
/* Lesson 6 is the centre of the course, so it takes a colour of its own
   rather than starting the cycle again. Sienna reads 6.74 on paper and 5.96
   on parchment, and its band clears 6.70 for the green heading and 11.36 for the
   ink body. Lesson 7 should not be brass, which sits too close to this. */
body[data-lesson="6"]{--accent:#7E4526; --band:#E8D2C0;}
/* Lesson 7 deliberately repeats lesson 5's slate. Both carry the title "The
   Promises of God" on the congregation's own site and 7 continues what 5 begins, so
   colour pairs them rather than running out of palette. */
body[data-lesson="7"]{--accent:var(--slate); --band:#D4DFE2;}
body[data-lesson="8"]{--accent:var(--teal);  --band:#C3DEDB;}
/* Lesson 9 takes lesson 3's green for the same reason 7 takes 5's slate.
   The study's own text sends the reader back ("Study 3 dealt fully with
   this dream"), the cover is that dream, and the third of the five signs
   is its last stage. The pairing is the point, not a shortage of colour. */
body[data-lesson="9"]{--accent:var(--green); --band:#DFCCA4;}
/* Lesson 10 returns to the brass the course opens on. It is the warmest
   colour in the palette and this is the lesson about good news, and lesson 1
   is nine lessons back, which is far enough that nothing reads as a repeat.
   Brass on paper is 5.93, ink on sage 11.92, both measured in lesson 1. */
body[data-lesson="10"]{--accent:var(--brass); --band:var(--sage);}
/* Lesson 11 is baptism, so it takes the teal. It is the water colour in this
   palette and there is no other candidate for this lesson. Teal on paper is
   5.71, ink on its band 11.66, both measured for lesson 2. */
body[data-lesson="11"]{--accent:var(--teal); --band:#C3DEDB;}
/* Lesson 12 has no rule of its own on purpose. It takes the brass and the
   sage that the body sets, which is what lesson 1 uses, because it opens on
   lesson 1's own cover. The course ends in the room it started in, and in
   the same colour. */

.divider{background:var(--band)}
h2.head{color:var(--accent)}
.part{color:var(--accent)}
.eyebrow{color:var(--accent)}
.divider .eyebrow{color:var(--green); opacity:.85}
.marker b{color:var(--accent); opacity:.42}
/* The fill now uses the lesson accent rather than a pale tint, so the bar
   reads as a bar. Sage on the track measured about 1.3:1, which is too
   little for a progress indicator. */
.track__i{background:var(--accent)}
.task h4{color:var(--accent)}
.kc__h{color:var(--accent)}
.step__n{color:var(--accent)}
.acc__btn::after{border-color:var(--accent)}
ol.list li::before{color:var(--accent); border-color:var(--accent)}
.verse{border-color:var(--accent)}
.verse cite{color:var(--accent)}
.verse--inline{border-left-color:var(--accent)}
.panel{border-left-color:var(--accent)}
.btn--brass{background:var(--accent)}

/* --------------------------------------------------------- paper grain
   Fractal noise as a data URI, so it costs no request and no bytes worth
   counting. It sits on the body background, behind everything, and every
   panel that has its own fill covers it. */
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ drop cap
   On the opening paragraph of each part only, so it reads as a chapter
   opening rather than a tic. The letter is the same text either way, so
   a screen reader is unaffected. */
.lede--cap::first-letter{
  float:left; font:600 3.5em/.8 var(--serif); color:var(--accent);
  padding:.02em .1em 0 0;
}
@media (max-width:26rem){
  .lede--cap::first-letter{font-size:3em}
}

/* --------------------------------------------- textured divider bands
   One paper texture, tinted by the lesson band colour, so the six
   dividers in a lesson feel of a piece without six separate images. */
.divider{position:relative; isolation:isolate; overflow:hidden}
/* No grain on the divider band. The text container is inset to the reading
   width, so a grain scoped to it drew visible vertical seams across the
   colour field. The photographic plate above supplies the texture instead. */
.divider__in{position:relative; z-index:1}

/* The photographic plate. It sits above the band, full bleed, and the text
   below it stays on solid colour, so the picture can never affect contrast. */
.divider__pic{display:block; width:100%; overflow:hidden; line-height:0}
.divider__pic img{
  width:100%; height:clamp(9rem,26vh,15rem); object-fit:cover; display:block;
}
@media (max-width:34rem){
  .divider__pic img{height:clamp(7.5rem,20vh,11rem)}
}
.divider__in{padding-block:clamp(2rem,5vw,3rem)}

/* -------------------------------------------------- full-bleed texture band
   Atmosphere behind a panel, used where a lesson turns to a subject with a
   material of its own: stone, vellum, clay. Text always sits on the panel,
   never on the texture. */
.band{position:relative; overflow:hidden; margin:1.9rem 0; border-radius:var(--r)}
.band__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* The text sits on an opaque panel, so the veil only has to stop the
   texture competing around the edges. At .55 it washed the texture out
   to almost nothing, which is part of why the bands did not read as
   pictures. */
.band__veil{position:absolute; inset:0; background:rgba(247,241,228,.26)}
.band__in{position:relative; padding:clamp(1.3rem,4vw,2rem)}
.band__in .panel{
  background:var(--paper); max-width:none; box-shadow:0 1px 18px -10px rgba(22,33,28,.35);
  padding:clamp(1.2rem,3.5vw,1.8rem);
}

/* ============================================================== book grid */
.bg{margin:1.7rem 0}
.bg__filters{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem}
.bg__f{
  display:inline-flex; align-items:center; gap:.45rem; min-height:40px;
  padding:.5rem .85rem; cursor:pointer; border-radius:999px;
  font:600 .82rem/1.2 var(--sans); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line);
}
.bg__f:hover{border-color:var(--slate)}
.bg__f[aria-pressed=true]{background:var(--green); border-color:var(--green); color:#fff}
.bg__f[data-nt][aria-pressed=true]{background:var(--brass); border-color:var(--brass)}
.bg__f i{font-style:normal; font-size:.75rem; opacity:.75; font-variant-numeric:tabular-nums}
.bg__f[data-seen]::before{content:'✓'; font-size:.72rem; color:var(--brass)}
.bg__f[aria-pressed=true][data-seen]::before{color:#fff}

.bg__half{margin-bottom:1rem}
.bg__half h4{
  font:600 .7rem/1.3 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--slate); margin-bottom:.5rem;
}
.bg__grid{display:flex; flex-wrap:wrap; gap:.3rem}
.bk{
  font:400 .78rem/1.2 var(--sans); padding:.36rem .5rem; border-radius:3px;
  background:#E9EFDD; color:var(--ink); border:1px solid transparent;
  transition:background .12s, color .12s, opacity .12s;
}
.bk[data-t=nt]{background:#EFE3CC}
.bg[data-picked] .bk{opacity:.42}
.bg[data-picked] .bk[data-on]{opacity:1; background:var(--green); color:#fff; font-weight:600}
.bg[data-picked] .bk[data-on][data-t=nt]{background:var(--brass)}
.bg__out{
  background:var(--parchment); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:1.1rem 1.25rem; margin-top:1.1rem;
  min-height:5rem;
}
.bg__out h4{font:600 1.05rem/1.3 var(--disp); color:var(--green); margin-bottom:.4rem}
.bg__out p:last-child{margin-bottom:0}

/* ================================================================ the map */
.map{margin:1.8rem 0}
.map__pick{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem}
.map__b{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.6rem .9rem; cursor:pointer; border-radius:var(--r);
  font:600 .88rem/1.2 var(--sans); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line);
}
.map__b:hover{border-color:var(--slate)}
.map__b[aria-current=true]{border-color:var(--green); background:var(--parchment)}
.map__b em{
  font-style:normal; width:.85rem; height:.85rem; border-radius:2px; flex:0 0 auto;
  border:1px solid rgba(22,33,28,.3);
}
.map__b[data-seen] b::after{content:' ✓'; color:var(--brass); font-size:.8em}
.map__fig{margin:0; background:var(--parchment); border-radius:var(--r); padding:.8rem}
.map__fig svg{width:100%; height:auto}
.map__out{
  background:var(--parchment); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; padding:1.1rem 1.25rem; margin-top:1.1rem;
  min-height:5.5rem;
}
.map__out h4{font:600 1.05rem/1.3 var(--disp); color:var(--green); margin-bottom:.4rem}
.rg{opacity:0; transition:opacity .3s}
.rg[data-on]{opacity:1}
@media (prefers-reduced-motion:reduce){ .rg{transition:none} }


/* ================================================= photographic shot
   An editorial photograph in the flow of a content screen. Decorative:
   it supports the words rather than carrying information of its own, so
   the alt text is empty and any caption is visible to everyone. */
.shot{margin:1.9rem 0}
.shot picture, .shot img{display:block; width:100%}
.shot img{
  height:auto; border-radius:var(--r);
  aspect-ratio:16/9; object-fit:cover; background:var(--parchment);
}
.shot figcaption{
  margin-top:.6rem; font-size:.83rem; line-height:1.5; color:var(--slate);
  padding-left:.9rem; border-left:2px solid var(--accent);
}
.shot--tall img{aspect-ratio:3/2}
/* For a picture already cut to hold its subject, where a second crop by
   the stylesheet would take off the part it was cut for. */
.shot--whole img{aspect-ratio:auto; max-height:34rem; object-fit:contain;
  background:none; margin-inline:auto; width:auto; max-width:100%}

/* =========================================================== photographic set
   The supplied library is deliberately mixed resolution: four full-size
   scenes, three medium, and twenty-three small contact-sheet crops between
   210 and 325 pixels wide. Nothing is upscaled, so each class of image gets a
   component sized to what its own pixels can carry. The small crops are never
   shown wider than about three quarters of their native width, which holds
   them at 1.25x or better on a 2x screen. Stretching one of them across a
   full-width band would be the one thing that makes the whole set look cheap. */

.pf{
  background:var(--paper); padding:.5rem; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 3px 16px -11px rgba(22,33,28,.55);
}
.pf img{
  display:block; width:100%; height:auto;
  border-radius:1px; background:var(--parchment);
}

/* A small photograph set beside its own caption, in the margin of the text. */
.snap{
  display:grid; grid-template-columns:10.5rem 1fr;
  gap:1.2rem; align-items:center; margin:1.9rem 0;
}
.snap figcaption{
  font-size:.86rem; line-height:1.55; color:var(--slate);
  padding-left:.95rem; border-left:2px solid var(--accent);
}
.snap--right{grid-template-columns:1fr 10.5rem}
.snap--right .pf{order:2}
.snap--right figcaption{
  order:1; text-align:right;
  padding:0 .95rem 0 0; border-left:0; border-right:2px solid var(--accent);
}
@media (max-width:34rem){
  .snap,.snap--right{grid-template-columns:1fr; gap:.85rem}
  .snap .pf,.snap--right .pf{order:0; max-width:14rem}
  .snap--right figcaption{
    order:0; text-align:left;
    padding:0 0 0 .95rem; border-left:2px solid var(--accent); border-right:0;
  }
}

/* Two or three small photographs read as one figure. auto-fit drops to two
   across on a narrow screen rather than shrinking all three below their
   native size. */
.strip{margin:2rem 0}
.strip__row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.6rem;
}
.strip .pf{padding:.35rem}
.strip img{aspect-ratio:4/3; object-fit:cover}
.strip figcaption{
  margin-top:.7rem; font-size:.86rem; line-height:1.55; color:var(--slate);
  padding-left:.95rem; border-left:2px solid var(--accent);
}

/* A section divider carrying a small photograph where the big numeral would
   otherwise sit. The eyebrow already gives the part number, so the numeral is
   dropped rather than crowded. The card is positioned rather than gridded, so
   the existing divider markup does not have to be rewrapped. */
.divider--card .divider__in{padding-right:calc(var(--pad-x) + 13rem)}
.divider--card .divider__n{display:none}
.divider__card{
  position:absolute; right:var(--pad-x); top:50%; transform:translateY(-50%);
  width:11rem; margin:0;
}
@media (max-width:44rem){
  .divider--card .divider__in{padding-right:var(--pad-x)}
  .divider__card{
    position:static; transform:none; width:10rem; margin-top:1.6rem;
  }
}

/* ============================================================ course index
   The home page. It uses the same shell, cover and panel as a lesson, so it
   reads as the front of one thing rather than a separate site, and adds only
   the list of lessons. */

.home{max-width:none; margin:0; padding-bottom:3rem}
.home .scr{padding-bottom:1rem}
.cover--home{min-height:min(72dvh,36rem)}
.wrap--wide{max-width:52rem; margin:0 auto}

.lessons{display:grid; gap:.55rem; margin:1.6rem 0 1.2rem}

.lesson{
  display:grid; grid-template-columns:2.6rem 1fr auto; gap:1rem;
  align-items:center; padding:.95rem 1.15rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  color:inherit; text-decoration:none;
  transition:border-color .15s, transform .15s;
}
a.lesson:hover,a.lesson:focus-visible{
  border-color:var(--green); transform:translateY(-1px);
}
.lesson__n{
  font:600 1.45rem/1 var(--serif); color:var(--green); opacity:.42; text-align:center;
}
.lesson__b{display:block}
.lesson__t{display:block; font:600 1.02rem/1.3 var(--disp); color:var(--green)}
.lesson__d{display:block; margin-top:.18rem; font-size:.87rem; line-height:1.5; color:var(--slate)}
.lesson__s{
  font:600 .72rem/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap; align-self:center;
}

/* A finished lesson gets a tick and the green. Colour is never the only
   signal: the word changes too. */
.lesson[data-state="done"]{border-color:var(--sage)}
.lesson[data-state="done"] .lesson__s{color:var(--green)}
.lesson[data-state="done"] .lesson__s::before{content:"✓ "}
.lesson[data-state="part"] .lesson__s{color:var(--brass)}

/* Not built yet. Dimmed, not hidden, because the congregation's own page lists all
   twelve and a course that quietly dropped the rest would misrepresent it. */
.lesson--soon{background:transparent; border-style:dashed}
.lesson--soon .lesson__t,.lesson--soon .lesson__n{color:var(--slate); opacity:.75}
.lesson--soon .lesson__d{opacity:.8}

.home__note{margin-top:1.4rem; font-size:.82rem; color:var(--slate)}

@media (max-width:34rem){
  .lesson{grid-template-columns:2rem 1fr; row-gap:.4rem; padding:.85rem 1rem}
  .lesson__s{grid-column:2; justify-self:start}
}

/* The masthead doubles as the way back to the lesson list once the lessons
   are one site. It has to stay looking like the masthead, not like a link. */
a.bar__t--home{color:inherit; text-decoration:none}
a.bar__t--home:hover,a.bar__t--home:focus-visible{text-decoration:underline; text-underline-offset:3px}

.next__soon{
  margin:0 0 .9rem; font-size:.9rem; color:var(--slate);
}

/* The end of the course rather than the end of a lesson. Two buttons, because
   at that point there is no next lesson and the two useful things are the
   lesson list and the tutor. */
.next--final{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem}
.next--final h3,.next--final p{flex:1 1 100%; margin-bottom:0}
.next--final p{margin-bottom:.4rem}

/* ------------------------------------------------------- a question not marked
   Lesson 8 ends on the study's own question, "Do you want to learn more".
   That is an invitation, not a test, so it is answered rather than marked.
   Telling somebody their honest "I am not sure" is the wrong answer would be
   both untrue and a good way to lose them. */
.reflect__n{
  margin-left:auto; letter-spacing:.02em; text-transform:none;
  color:var(--slate); font-weight:400;
}
.reflect .opt input:checked + span{border-color:var(--accent); background:var(--parchment)}
.reflect .opt input:checked + span::before{border-color:var(--accent); background:var(--accent)}
.reflect .fb{
  margin-top:1.2rem; padding:1rem 1.1rem; border-left:3px solid var(--accent);
  background:var(--parchment); border-radius:var(--r); font-size:.95rem; line-height:1.6;
}
.reflect .fb:empty{display:none}