/* Cinzel is the site's own display face. We ship our own copy under /bible/assets/ rather
   than pointing at the WordPress uploads folder: that file serves NO Access-Control-Allow-Origin
   header, so it cannot be loaded cross-origin at all, and a copy here also survives any future
   reorganisation of the WP media library.
   ⚠ It is a 122 KB variable TrueType. Converting it to woff2 would cut it to roughly a third,
   and is worth doing for the whole site rather than just these pages. */
  @font-face{font-family:"Cinzel";font-style:normal;font-weight:400 700;font-display:swap;
    src:url(/bible/assets/fonts/cinzel.ttf) format("truetype")}

  :root{
    /* Matched to the live site: ground #FFF, wordmark #141414, accent gold #978264 (its GO
       button and dividers). Red stays for the words of Christ — a scriptural convention, and
       the site's own chapter pages already set verse numbers in red. */
    --paper:#FFFFFF; --raise:#FAF9F6; --ink:#1A1A1A; --ink-soft:#55524B; --ink-faint:#8A857B;
    --rule:#E4E0D8; --woc:#A8232B; --gold:#978264;
    --display:"Cinzel",Georgia,"Times New Roman",serif;
    --mark-1:#F7E9A6; --mark-2:#C9E7CE; --mark-3:#DAD6F2; --mark-4:#F6D2C4;
    --focus:#1A1814; --readmark:#A8232B;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
    --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
    --fs:1.19rem; --lh:1.78; --measure:34rem;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#14130F; --raise:#1D1B16; --ink:#E8E4DA; --ink-soft:#A29B8C; --ink-faint:#6F6859;
      --rule:#2E2B24; --woc:#E4676F; --gold:#C4AE85;
      --mark-1:#585015; --mark-2:#1F4529; --mark-3:#332E56; --mark-4:#5A3324;
      --focus:#E8E4DA; --readmark:#E4676F;
    }
  }
  :root[data-theme="dark"]{
    --paper:#14130F; --raise:#1D1B16; --ink:#E8E4DA; --ink-soft:#A29B8C; --ink-faint:#6F6859;
    --rule:#2E2B24; --woc:#E4676F; --gold:#C4AE85;
    --mark-1:#585015; --mark-2:#1F4529; --mark-3:#332E56; --mark-4:#5A3324;
    --focus:#E8E4DA; --readmark:#E4676F;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
       -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

  .bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
       padding:.55rem clamp(.9rem,4vw,2rem);background:color-mix(in srgb,var(--paper) 90%,transparent);
       backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
  .site{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
        color:var(--ink-faint);white-space:nowrap}
  .spacer{flex:1}
  .btn{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);border:1px solid var(--rule);
       border-radius:2px;padding:.36rem .7rem;background:var(--raise);transition:color .15s,border-color .15s}
  .btn:hover{color:var(--ink);border-color:var(--ink-faint)}
  .btn[aria-pressed="true"]{color:var(--woc);border-color:var(--woc)}
  .btn:focus-visible,.vn:focus-visible,.bk:focus-visible,.sz:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

  /* text size — deliberately large hit targets, this is an accessibility control */
  .sizer{display:flex;align-items:center;gap:.2rem;border:1px solid var(--rule);border-radius:2px;
         background:var(--raise);padding:.12rem}
  .sz{font-family:var(--sans);color:var(--ink-soft);line-height:1;padding:.3rem .55rem;border-radius:2px}
  .sz:hover{color:var(--woc);background:color-mix(in srgb,var(--woc) 8%,transparent)}
  .sz[disabled]{opacity:.32;cursor:default}
  .sz-a{font-size:.72rem} .sz-b{font-size:1.02rem}
  .sz-val{font-family:var(--sans);font-size:.68rem;color:var(--ink-faint);min-width:2.6rem;text-align:center;
          font-variant-numeric:tabular-nums}
  .reading{font-family:var(--sans);font-size:.72rem;color:var(--ink-faint);white-space:nowrap}
  .reading b{color:var(--woc);font-weight:600}

  /* The side gutter was clamp(1.1rem,5vw,0) — the MAX was 0, below the min, so it collapsed
     to zero at every width and on a phone the text ran hard against both screen edges. */
  main{max-width:var(--measure);margin:0 auto;padding:clamp(2rem,7vw,4.5rem) clamp(1.1rem,5vw,2rem) 6rem}
  .ch-book{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
           color:var(--ink-faint);margin:0 0 .5rem}
  .ch-n{font-size:clamp(2.4rem,7vw,3.4rem);line-height:1;margin:0;font-weight:400;letter-spacing:-.02em}
  .ch-rule{height:1px;background:var(--rule);margin:1.6rem 0 2.2rem}

  .v{position:relative;margin:0 0 1.05rem;font-size:var(--fs);line-height:var(--lh);padding-left:2.4rem;
     transition:background .12s}
  .vn{position:absolute;left:0;top:calc(.38em * var(--lh));width:1.9rem;text-align:right;
      font-family:var(--sans);font-size:.62em;font-variant-numeric:tabular-nums;color:var(--ink-faint);
      text-decoration:none;transition:color .15s}
  .vn:hover{color:var(--woc)}
  .v--first .vn{display:none}
  .dropcap{float:left;font-size:2.95em;line-height:.82;padding:.06em .09em 0 0}
  em.supplied{font-style:italic}
  .woc{color:var(--woc)}
  body.no-red .woc{color:inherit}

  /* Three states, deliberately different in weight so they never read as the same thing:
     hover = faint neutral tint · selected = tint + marker · playing = red marker (see player).
     The tint is a neutral ink wash, not a colour, so it sits UNDER a reader's own highlight
     colours instead of competing with them. */
  .v{border-radius:3px;cursor:pointer}
  .v:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .v.is-sel{background:color-mix(in srgb,var(--ink) 7%,transparent)}
  .v::before{content:"";position:absolute;left:-.85rem;top:.35em;bottom:.35em;width:2px;
             background:var(--readmark);opacity:0;transition:opacity .14s}
  .v.is-reading::before,.v.is-sel::before{opacity:1}
  .v.is-last::before{opacity:.28}
  .v.is-sel{outline:none}
  .v:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

  mark.hl{background:var(--mark-1);color:inherit;padding:.06em 0;border-radius:1px}
  mark.hl.c2{background:var(--mark-2)} mark.hl.c3{background:var(--mark-3)} mark.hl.c4{background:var(--mark-4)}

  /* a note is anchored to the words it is about — the marker in the text and the card below
     carry the same number, the way a study Bible footnote does */
  .noted{border-bottom:1px dotted var(--woc)}
  /* where two or more notes cover the same words, thicken the rule so the overlap is visible */
  .noted.n2{border-bottom-style:solid;border-bottom-color:color-mix(in srgb,var(--woc) 55%,transparent)}
  .noted.n3{border-bottom-width:2px;border-bottom-style:solid}
  .nmark{font-family:var(--sans);font-size:.58em;font-weight:600;color:var(--woc);vertical-align:.42em;
         padding:0 .1em 0 .12em;cursor:pointer;line-height:1;border-bottom:0!important}
  .nmark:hover{text-decoration:underline}
  .noted.lit{background:color-mix(in srgb,var(--woc) 16%,transparent)}

  .note{margin:.45rem 0 1.2rem 2.4rem;padding:.7rem .85rem;background:var(--raise);border:1px solid var(--rule);
        border-left:2px solid var(--woc);border-radius:3px;font-family:var(--sans);font-size:.86rem;
        line-height:1.55;color:var(--ink-soft)}
  .note.lit{border-color:var(--woc);box-shadow:0 0 0 2px color-mix(in srgb,var(--woc) 18%,transparent)}
  .note-hd{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.35rem}
  .note b{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
  .note b i{font-style:normal;color:var(--woc)}
  .note-num{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;
            border-radius:50%;background:var(--woc);color:#fff;font-size:.62rem;font-weight:700;
            font-variant-numeric:tabular-nums;flex:none}
  .note-acts{margin-left:auto;display:flex;gap:.15rem}
  .na{font-family:var(--sans);font-size:.7rem;padding:.16rem .45rem;border-radius:2px;color:var(--ink-faint)}
  .na:hover{color:var(--woc);background:color-mix(in srgb,var(--woc) 9%,transparent)}
  /* the quoted phrase the note points at */
  .note q{display:block;font-family:var(--serif);font-size:.98rem;line-height:1.5;color:var(--ink);
          margin:0 0 .45rem;padding-left:.6rem;border-left:2px solid var(--rule);quotes:none}
  .note q::before,.note q::after{content:""}
  .note .body{white-space:pre-wrap}

  /* inline note editor — modal dialogs are blocked in sandboxed frames, and a prompt box is
     no way to write a study note anyway */
  .note-edit{margin:.45rem 0 1.2rem 2.4rem;padding:.75rem .85rem;background:var(--raise);
             border:1px solid var(--woc);border-radius:3px;font-family:var(--sans)}
  .note-edit b{display:block;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
               color:var(--ink-faint);margin-bottom:.45rem;font-weight:600}
  .note-edit textarea{width:100%;min-height:5.2rem;resize:vertical;font-family:var(--sans);
    font-size:.9rem;line-height:1.55;color:var(--ink);background:var(--paper);
    border:1px solid var(--rule);border-radius:2px;padding:.55rem .6rem}
  .note-edit textarea:focus{outline:2px solid var(--woc);outline-offset:1px;border-color:var(--woc)}
  .ne-row{display:flex;align-items:center;gap:.45rem;margin-top:.55rem}
  .ne-hint{font-size:.68rem;color:var(--ink-faint);margin-left:auto}
  .ne-save{font-size:.78rem;padding:.36rem .8rem;border-radius:2px;background:var(--woc);color:#fff;
           font-family:var(--sans)}
  .ne-save:hover{filter:brightness(1.08)}
  .ne-b{font-size:.78rem;padding:.36rem .7rem;border-radius:2px;border:1px solid var(--rule);
        color:var(--ink-soft);font-family:var(--sans);background:var(--paper)}
  .ne-b:hover{color:var(--ink);border-color:var(--ink-faint)}
  .ne-del{margin-left:0;color:var(--woc)}

  /* --- narration player --- */
  .player{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:.7rem;
          padding:.55rem clamp(.7rem,3vw,1.4rem);background:color-mix(in srgb,var(--raise) 96%,transparent);
          backdrop-filter:blur(10px);border-top:1px solid var(--rule);font-family:var(--sans)}
  .pbtn{width:2.3rem;height:2.3rem;border-radius:50%;background:var(--woc);color:#fff;display:flex;
        align-items:center;justify-content:center;flex:none}
  .pbtn:hover{filter:brightness(1.08)}
  .pbtn svg{width:1.05rem;height:1.05rem;fill:currentColor}
  .ptrack{flex:1;height:1.9rem;display:flex;align-items:center;cursor:pointer;position:relative;min-width:4rem}
  .ptrack::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--rule)}
  .pfill{position:absolute;left:0;height:3px;border-radius:2px;background:var(--woc);width:0}
  .pknob{position:absolute;width:.62rem;height:.62rem;border-radius:50%;background:var(--woc);
         transform:translateX(-50%);left:0}
  .pnow{font-size:.72rem;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:5.6rem}
  .pnow b{color:var(--woc);font-weight:600}
  .prate{font-size:.72rem;color:var(--ink-soft);border:1px solid var(--rule);border-radius:2px;
         padding:.24rem .45rem;background:var(--paper)}
  .prate:hover{color:var(--woc);border-color:var(--woc)}
  .pfollow{font-size:.72rem;color:var(--ink-faint);border:1px solid var(--rule);border-radius:2px;
           padding:.24rem .45rem;background:var(--paper)}
  .pfollow[aria-pressed="true"]{color:var(--woc);border-color:var(--woc)}
  body.has-player{padding-bottom:4rem}
  .v.is-playing{background:color-mix(in srgb,var(--woc) 7%,transparent);border-radius:3px}
  .v.is-playing::before{opacity:1;background:var(--woc)}
  .vn.seekable{cursor:pointer}
  .vn.seekable:hover::after{content:"\25B6";font-size:.7em;margin-left:.15em}
  @media (max-width:34rem){ .pnow{min-width:0;font-size:.68rem} .prate,.pfollow{display:none} }

  .toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:60;
         background:var(--raise);border:1px solid var(--rule);border-left:2px solid var(--woc);
         border-radius:3px;padding:.7rem .9rem;font-family:var(--sans);font-size:.82rem;
         color:var(--ink-soft);box-shadow:0 10px 30px rgba(0,0,0,.18);max-width:min(28rem,90vw);
         line-height:1.5;white-space:pre-line}

  .tools{position:absolute;z-index:30;display:flex;align-items:center;gap:.28rem;padding:.32rem;
         background:var(--raise);border:1px solid var(--rule);border-radius:3px;box-shadow:0 8px 26px rgba(0,0,0,.16)}
  .sw{width:1.4rem;height:1.4rem;border-radius:2px;border:1px solid var(--rule)}
  .sw.c1{background:var(--mark-1)} .sw.c2{background:var(--mark-2)}
  .sw.c3{background:var(--mark-3)} .sw.c4{background:var(--mark-4)}
  .sw.x{background:var(--raise);position:relative}
  .sw.x::after{content:"";position:absolute;inset:38% 14%;border-top:1px solid var(--ink-faint);transform:rotate(-20deg)}
  .tool-b{font-family:var(--sans);font-size:.72rem;padding:.2rem .5rem;color:var(--ink-soft);border-radius:2px}
  .tool-b:hover{color:var(--woc)}
  .tool-sep{width:1px;align-self:stretch;background:var(--rule);margin:0 .12rem}

  .nav{position:fixed;inset:0;z-index:40;background:var(--paper);overflow:auto;
       padding:1.2rem clamp(1rem,5vw,3rem) 4rem;display:none}
  .nav[open]{display:block}
  .nav-top{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
  .nav-t{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
  .jump{font-family:var(--sans);font-size:.9rem;padding:.5rem .7rem;border:1px solid var(--rule);
        border-radius:2px;background:var(--raise);color:var(--ink);width:min(20rem,60vw)}
  .bk-group{margin-bottom:2.2rem}
  .bk-h{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
        color:var(--ink-faint);margin:0 0 .8rem;font-weight:600}
  .bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.3rem}
  .bk{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;text-align:left;
      font-family:var(--sans);font-size:.85rem;padding:.42rem .6rem;border-radius:2px;color:var(--ink)}
  .bk:hover{background:var(--raise);color:var(--woc)}
  .bk-c{font-size:.68rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
  .ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.3rem;margin-top:.4rem}
  /* colour must be set explicitly: these are anchors, so without it they fall back to the
     browser's default link blue — which is exactly what they were doing on every book page. */
  .ch-b{font-family:var(--sans);font-size:.85rem;font-variant-numeric:tabular-nums;padding:.5rem 0;
        color:var(--ink);text-align:center;border:1px solid var(--rule);border-radius:2px;background:var(--raise)}
  .ch-b:hover{border-color:var(--woc);color:var(--woc)}

  .pager{display:flex;justify-content:space-between;margin-top:3.5rem;padding-top:1.4rem;
         border-top:1px solid var(--rule);font-family:var(--sans);font-size:.85rem}
  .pager a{color:var(--ink-soft);text-decoration:none} .pager a:hover{color:var(--woc)}
  /* Scoped to the reading note only. As a bare `footer` element selector it also caught the
     new site footer and squeezed the whole thing into the 34rem reading measure. */
  .note-ft{max-width:var(--measure);margin:2.5rem auto 0;padding:1.4rem clamp(1.1rem,5vw,2rem) 0;
         border-top:1px solid var(--rule);font-family:var(--sans);font-size:.76rem;line-height:1.65;color:var(--ink-faint)}
  .proto{margin-top:1rem;padding:.7rem .85rem;border:1px dashed var(--rule);border-radius:3px}
  kbd{font-family:var(--sans);font-size:.7rem;border:1px solid var(--rule);border-radius:2px;padding:.05em .3em}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
  @media (max-width:34rem){ .v{padding-left:1.9rem} .vn{width:1.45rem} .v::before{left:-.4rem} }

  main.wide{max-width:60rem}
  .lede{font-family:var(--sans);font-size:.92rem;color:var(--ink-soft);margin:0 0 1.6rem;line-height:1.6}
  .ch-book a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
  .ch-book a:hover{color:var(--woc);border-color:var(--woc)}
  a.site{text-decoration:none;color:var(--ink-faint)}
  a.site:hover{color:var(--woc)}
  a.btn{text-decoration:none;display:inline-block}
  .bk-group{margin-bottom:2.4rem}
  a.bk{text-decoration:none}
  a.ch-b{text-decoration:none;display:block}
  .pager a{padding:.2rem 0}
  /* ---------- search ---------- */
  /* Bar box: deliberately narrow so it never crowds the reading controls, and it is the
     first thing after the site name because searching is the second reason people arrive. */
  .qbox{display:flex;min-width:0;position:relative;align-items:center}
  .magi{position:absolute;left:.62rem;width:.82rem;height:.82rem;color:var(--ink-faint);pointer-events:none}
  .q{font-family:var(--sans);font-size:.78rem;color:var(--ink);background:var(--raise);
     border:1px solid var(--rule);border-radius:999px;padding:.34rem .75rem .34rem 1.95rem;
     width:clamp(9rem,18vw,14rem);min-width:0;-webkit-appearance:none;appearance:none;
     transition:border-color .15s}
  .q:hover{border-color:var(--ink-faint)}
  .qbox:focus-within .magi{color:var(--woc)}
  .q::-webkit-search-cancel-button{-webkit-appearance:none}
  .q:focus{outline:2px solid var(--focus);outline-offset:1px}
  .q::placeholder{color:var(--ink-faint)}

  .sform{display:flex;gap:.5rem;flex-wrap:wrap;align-items:stretch;margin:0 0 .7rem}
  .sq{flex:1 1 18rem;min-width:0;font-family:var(--serif);font-size:1.05rem;color:var(--ink);
      background:var(--raise);border:1px solid var(--rule);border-radius:6px;padding:.6rem .8rem;
      -webkit-appearance:none;appearance:none}
  .sq:focus,.sscope:focus{outline:2px solid var(--focus);outline-offset:1px}
  .sq::placeholder{color:var(--ink-faint)}
  .sscope{font-family:var(--sans);font-size:.85rem;color:var(--ink);background:var(--raise);
          border:1px solid var(--rule);border-radius:6px;padding:.6rem .7rem;max-width:100%}
  .sgo{font-family:var(--sans);font-size:.85rem;color:var(--paper);background:var(--ink);
       border-radius:6px;padding:.6rem 1.1rem;border:1px solid var(--ink)}
  .sgo:hover{opacity:.88}
  .shint{font-family:var(--sans);font-size:.78rem;color:var(--ink-faint);margin:0 0 1.1rem;line-height:1.6}
  .sstat{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin:0 0 .9rem}
  .schip{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .sjump{display:inline-block;font-family:var(--sans);font-size:.88rem;color:var(--ink);
         border:1px solid var(--rule);background:var(--raise);border-radius:6px;
         padding:.5rem .85rem;margin:0 0 1rem;text-decoration:none}
  .sjump:hover{border-color:var(--ink-faint)}

  /* Results are links, not cards with links inside — the whole row is the target, which is
     what a reader expects when scanning a list of references. */
  .sr{display:block;text-decoration:none;color:inherit;padding:.7rem .8rem;border-radius:6px;
      border-bottom:1px solid var(--rule)}
  .sr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .sr:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .sr-ref{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;
          text-transform:uppercase;color:var(--ink-faint);margin-bottom:.2rem}
  .sr-t{display:block;font-size:1.02rem;line-height:1.62}
  .sr mark{background:var(--mark-1);color:inherit;border-radius:2px;padding:0 .08em}
  .smore{margin:1.2rem 0 2rem}
  .smore-b{width:100%}
  @media (max-width:34rem){ .qbox{order:9;width:100%} .q{width:100%} .sscope,.sgo{flex:1 1 auto} }

  /* Prominent search block on the pages people actually arrive on. The bar box alone was far
     too quiet to tell a visitor the Bible was searchable at all. */
  .panel{margin:2.4rem 0 3rem;padding:1.3rem 1.4rem 1.4rem;background:var(--raise);
         border:1px solid var(--rule);border-radius:8px}
  .panel-h{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
           color:var(--ink-faint);font-weight:600;margin:0 0 .85rem}
  .sq-wrap{position:relative;display:flex;align-items:center;flex:1 1 18rem;min-width:0}
  .sq-wrap .magi{left:.85rem;width:1rem;height:1rem}
  .sq-wrap .sq{padding-left:2.5rem;width:100%}
  .eg{display:inline-block;font-family:var(--sans);font-size:.76rem;color:var(--ink);
      background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:999px;
      padding:.2rem .6rem;margin:.15rem .1rem;text-decoration:none;white-space:nowrap}
  .eg:hover{background:color-mix(in srgb,var(--woc) 14%,transparent);color:var(--woc)}
  .sempty{margin:.6rem 0 3rem}
  .eg-list{list-style:none;padding:0;margin:.6rem 0 0}
  .eg-list li{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);
              padding:.5rem 0;border-bottom:1px solid var(--rule);line-height:1.7}
  .lede{font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}

  /* ---------- site chrome: matches thealmightyjehovah.com ---------- */
  /* Cinzel sets the wordmark and page titles, as it does across the site. It does NOT set
     scripture: it is an inscriptional capital face, punishing to read a chapter in. The
     site's own chapter pages make the same split. */
  .site-hd{text-align:center;padding:1.8rem 1.1rem 1.3rem;border-bottom:1px solid var(--gold)}
  .wm{display:inline-block;text-decoration:none;color:inherit}
  .wm-1{display:block;font-family:var(--display);font-size:clamp(1.5rem,4.2vw,2rem);
        letter-spacing:.02em;color:var(--ink);line-height:1.15}
  .wm-2{display:block;font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);margin-top:.15rem}
  .ch-n{font-family:var(--display);letter-spacing:0}
  .bk-h,.panel-h{font-family:var(--sans)}

  .site-ft{border-top:1px solid var(--gold);background:var(--raise);margin-top:4rem;
           padding:2.4rem clamp(1.1rem,5vw,2rem) 2.6rem}
  .ft-in{max-width:60rem;margin:0 auto;display:grid;gap:1.8rem;
         grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
  .ft-h{font-family:var(--display);font-size:.92rem;color:var(--ink);margin:0 0 .6rem;font-weight:400}
  .ft-l{list-style:none;margin:0;padding:0}
  .ft-l li{margin:0 0 .35rem}
  .ft-l a{font-family:var(--sans);font-size:.84rem;color:var(--ink-soft);text-decoration:none}
  .ft-l a:hover{color:var(--woc);text-decoration:underline;text-underline-offset:2px}
  .ft-btm{max-width:60rem;margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid var(--rule);
          font-family:var(--sans);font-size:.76rem;color:var(--ink-faint);
          display:flex;gap:.8rem;flex-wrap:wrap;justify-content:space-between}
  .ft-btm a{color:var(--ink-faint);text-decoration:none}
  .ft-btm a:hover{color:var(--woc)}

  /* Psalm superscriptions and epistle subscriptions. Deliberately OUTSIDE the verse paragraph
     and visually distinct: they are part of the received text but are not read aloud, so they
     must never look like a verse the narration has skipped. */
  .vsuper{font-family:var(--sans);font-size:.82rem;font-style:italic;color:var(--ink-faint);
          line-height:1.6;margin:0 0 .7rem;padding-left:2.4rem;max-width:100%}
  .vsub{font-family:var(--sans);font-size:.8rem;font-style:italic;color:var(--ink-faint);
        line-height:1.6;margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule)}
  .vsuper em.supplied,.vsub em.supplied{font-style:normal}
  @media (max-width:34rem){ .vsuper{padding-left:1.9rem} }