@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. This course carries its own palette, steel and teal
   blues, greys and tans, so a learner can tell it from Introduction to Bible
   Basics at a glance. Lowest pairing is tan on the pale steel highlight at
   4.64:1.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* God's Master Plan. The first course's tokens, recoloured into steel and
     teal blues, greys and tans. The names are kept so every rule below still
     reads the same: --green is the course's primary, which here is a steel
     blue, and --sage is its pale highlight, which here is a pale steel. */
  --paper:#F3F1EC;
  --parchment:#E6E1D6;
  --sage:#C8DAE2;
  --ink:#17222A;
  --green:#2A4A5E;
  --deep:#1D3645;
  --slate:#4C5862;
  --teal:#1C6470;
  --brass:#76562F;
  --plum:#6B2F3A;
  --line:#D3CDC1;
  --line-soft:#DDD8CD;
  /* A mid steel for the small marks, bullets and the cover's dots, which
     vanish in the pale highlight at five pixels across. */
  --dot:#7F9DAE;
  /* The per-page accents and their divider bands. */
  --steel:#2E5670;   --steel-band:#D2DEE5;
  --teal-band:#C8DEDF;
  --grey-band:#D9DCDE;
  --denim:#334E7B;   --denim-band:#D4DBE9;
  --tan-band:#E2D5C0;

  --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(23,34,42,.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:var(--deep)}
.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(243,241,236,.55) 0%,rgba(243,241,236,.18) 46%,rgba(29,54,69,.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(23,34,42,.55) 0%,rgba(23,34,42,.15) 50%,rgba(23,34,42,.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(29,54,69,.34) 0%,rgba(29,54,69,.10) 48%,rgba(29,54,69,.30) 100%);
}
/* Two rules came across from the first course keyed to its lesson numbers,
   a deeper frame for its standing figure on lesson 9 and a low crop for its
   lesson 10 window. In this course page 9 is the Conclusion, which opens on
   the Introduction's own study group, and there is no page 10, so both are
   gone. Lesson 5 opens on a sunrise that bursts up from the bottom edge, so
   a short window takes its crop from the clouds instead. */
body[data-lesson="5"] .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(23,34,42,.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(--dot)}

/* ================================================================= 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(--dot);
}
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. Tan on its
   tint reads 5.26, steel on the pale steel 6.51, ink on either above 11. */
.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:#ECE3D6}
.stats--pair .stat--a b{color:var(--brass)}
.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(23,34,42,.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}
/* A diagram wider than it is tall cannot live in a fifteen rem column, and
   shrinking it there takes its labels below reading size. This variant runs
   it across the top with its buttons in a row underneath. */
.hs--wide .hs__stage{grid-template-columns:1fr}
/* A square diagram whose labels have to be read, which fifteen rem shrinks
   below reading size. Buttons stay beside it on a laptop, under it on a
   phone. */
.hs--mid .hs__stage{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}
@media (max-width:38rem){ .hs--mid .hs__stage{grid-template-columns:1fr} }
.hs--wide .hs__list{flex-direction:row; flex-wrap:wrap}
.hs--wide .hs__b{flex:1 1 11rem}
@media (max-width:30rem){ .hs--wide .hs__b{flex:1 1 100%} }
.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}
/* Added for this course's own diagrams: a diagram head, a body line, a small
   note and a jigsaw piece label. Same family and weights as the two above,
   so a diagram built here and one carried over look like one set. */
.dg-ttl{font:600 17px/1 var(--disp); letter-spacing:.08em}
.dg-hd{font:600 14px/1 var(--disp)}
.dg-bd{font:400 13px/1 var(--sans)}
.dg-sm{font:400 11px/1 var(--sans)}
.dg-pc{font:600 26px/1 var(--disp)}
.dg-eq{font:600 15px/1 var(--sans); letter-spacing:.03em}
.dg-op{font:600 17px/1 var(--sans)}

/* ================================================================ 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:#E3ECF0; 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(23,34,42,.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:#D6E4EA}
.resume__x{
  background:none; border:0; color:#C9D7DE; 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 */
/* Module 2's pages, by page id: 0 the Introduction, 1 to 8 the lessons, 9
   the Conclusion. Five accents from the one family, steel, teal, grey,
   denim and tan, so neighbours always differ and a learner can tell which
   lesson they are in. The Introduction, lesson 5 and the Conclusion share
   the steel: the course opens and closes on it, and lesson 5 is the key the
   whole plan turns on. Tested on paper, parchment and each band: accent text
   at 5.92 or above, white on every accent button at 6.68 or above, ink on
   every band at 11.17 or above, and the steel heading on every band at 6.48
   or above. */
body{--accent:var(--steel); --band:var(--steel-band);}
body[data-lesson="1"]{--accent:var(--teal);  --band:var(--teal-band);}
body[data-lesson="2"]{--accent:var(--brass); --band:var(--tan-band);}
body[data-lesson="3"]{--accent:var(--slate); --band:var(--grey-band);}
body[data-lesson="4"]{--accent:var(--denim); --band:var(--denim-band);}
body[data-lesson="6"]{--accent:var(--brass); --band:var(--tan-band);}
body[data-lesson="7"]{--accent:var(--teal);  --band:var(--teal-band);}
body[data-lesson="8"]{--accent:var(--denim); --band:var(--denim-band);}

.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(243,241,236,.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(23,34,42,.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:#DFE7EB; color:var(--ink); border:1px solid transparent;
  transition:background .12s, color .12s, opacity .12s;
}
.bk[data-t=nt]{background:#EBE2D3}
.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(23,34,42,.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(23,34,42,.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}

/* ------------------------------------------------------------------ table
   Source material that is a table stays a table. One page of the study is
   three columns of parallel references, and the point of it is reading
   across the row, which prose and an accordion both destroy. Narrow screens
   scroll it sideways rather than crushing the columns. */
.tbl{margin:1.7rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse; width:100%; min-width:26rem; font-size:.95rem}
.tbl caption{
  caption-side:top; text-align:left; padding:0 0 .6rem;
  font:400 .9rem/1.45 var(--sans); color:var(--slate)}
.tbl th,
.tbl td{padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--line)}
.tbl th{
  font:600 .82rem/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); border-bottom:2px solid var(--green); white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(odd){background:var(--parchment)}

/* ==========================================================================
   The answer each lesson ends on
   Every lesson ends on its own question and the study's one line answer to
   it, and that line style is used about fifty times elsewhere, so the answer
   gets a card of its own, the same on all eight: the course's steel for the
   border, the icon and the heading whatever the lesson's accent, and the
   answer set large in the deep steel. Steel on the card 6.84, deep 9.20.
   ========================================================================== */
.summ{
  position:relative; margin:3rem 0 1.8rem;
  padding:2.7rem clamp(1.3rem,4.5vw,2.6rem) 2.1rem;
  background:var(--steel-band); border:1px solid #BACAD4; border-top:6px solid var(--green);
  border-radius:var(--r-lg); text-align:center;
}
.summ__icon{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:3.3rem; height:3.3rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green); color:#fff; box-shadow:0 0 0 6px var(--paper);
}
.summ__icon svg{display:block}
.summ .part{color:var(--green); margin-bottom:.55rem}
.summ .head{color:var(--green); margin:0 auto 1.1rem; max-width:30rem}
.summ .key{color:var(--deep); margin:0 auto; max-width:34rem; font-size:clamp(1.4rem,3.8vw,1.95rem)}

/* Small print under the sentence it belongs to: the NIV's copyright notice. */
.credit{margin-top:1.3rem; font-size:.8rem; line-height:1.55; color:var(--slate)}