/* ==========================================================================
   羅馬書 Romans — bilingual dark reading edition
   Palette + chrome inherited from the Atomic Habits reading edition.
   ========================================================================== */

:root{
  --bg:#0a0c0f;
  --bg-2:#0f1318;
  --surface:#151a21;
  --surface-2:#1b212a;
  --line:#262e39;
  --line-soft:#1e242d;

  --text:#dce2ea;
  --text-2:#aab4c1;
  --dim:#8590a0;

  --amber:#e3a857;
  --amber-hi:#f2c17e;
  --amber-dim:#8a6a38;
  --teal:#6fd3c7;
  --rose:#e08585;

  /* highlighter palette + the Old-Testament-quotation red */
  --hl-yellow:#f2d16b;
  --hl-green:#93d69a;
  --hl-rose:#f0919a;
  --hl-teal:#6fd3c7;
  --ot:#e08078;

  /* live-adjustable reading settings (the ↔ panel, bottom-right) */
  /* These six are the panel's defaults; app.js keeps the same numbers, so the
     first paint, a no-JS view and "Reset to defaults" all agree. */
  --measure:70rem;
  /* --tscale is the one text-size knob. Unlike the Atomic Habits edition it
     also drives the chapter and section headings, so the whole reading
     surface scales together instead of the body drifting away from its titles. */
  --tscale:1.22;
  --fs-base:clamp(1.02rem,.62rem + .55vw,1.17rem);
  --fs:calc(var(--fs-base) * var(--tscale));
  --lh:1.9;
  --zh-scale:1.08;   /* Chinese size relative to --fs */
  --en-scale:.92;    /* English size relative to --fs */
  --pairgap:.5em;    /* blank line between the Chinese and English of one verse */
  --vspace:3.6rem;   /* gap between verses — must stay clearly larger than --pairgap
                        so a verse reads as one block, not two loose lines */

  --toc-w:340px;

  --serif:'Spectral', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --display:'PlayfairDisplay', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Traditional-Chinese reading face, best-installed-wins */
  --cjk:'Noto Serif TC','Noto Serif CJK TC','Source Han Serif TC','Source Han Serif TW',
        'Songti TC','Songti SC','PMingLiU','MingLiU','SimSun',
        'Microsoft JhengHei','PingFang TC',serif;

  --r:14px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  font-size:var(--fs);
  line-height:var(--lh);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--amber-hi);text-decoration-color:rgba(227,168,87,.35);text-underline-offset:.18em}
a:hover{color:#fff}
::selection{background:rgba(227,168,87,.28);color:#fff}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------- chrome */

.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;background:rgba(255,255,255,.05)}
.progress-bar{
  height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber-dim),var(--amber),var(--amber-hi));
}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;height:56px;
  display:flex;align-items:center;gap:.7rem;
  padding:0 clamp(.7rem,3vw,1.3rem) 0 68px;
  background:rgba(10,12,15,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,background .25s;
}
.topbar.scrolled{border-bottom-color:var(--line-soft)}

.crumb{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.crumb b{color:var(--amber);font-weight:600}
.spacer{flex:1}

/* segmented language switch */
.modes{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(21,26,33,.7)}
.modes button{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  padding:.34em .8em;border-radius:999px;color:var(--dim);
  transition:background .18s,color .18s;white-space:nowrap;
}
.modes button:hover{color:var(--text)}
.modes button[aria-pressed="true"]{background:rgba(227,168,87,.14);color:var(--amber-hi)}

.iconbtn{
  width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-content:center;color:var(--text-2);
  font-family:var(--sans);font-size:.8rem;font-weight:600;
  transition:border-color .2s,color .2s,background .2s;
}
.iconbtn:hover{border-color:var(--amber-dim);color:var(--amber-hi);background:var(--surface)}
.iconbtn[aria-expanded="true"]{border-color:var(--amber-dim);color:var(--amber-hi);background:var(--surface)}

/* ------------------------------------------------------------------ toc */

.navtoggle{position:absolute;left:-9999px;opacity:0}
.navbtn{
  position:fixed;top:10px;left:14px;z-index:70;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:rgba(12,15,19,.72);backdrop-filter:blur(10px);
  display:grid;place-content:center;gap:4px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.navbtn:hover{border-color:var(--amber-dim);background:rgba(20,25,32,.9)}
.navbtn span{display:block;width:15px;height:1.5px;background:var(--text-2);transition:transform .28s,opacity .2s}
.navtoggle:checked ~ .navbtn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle:checked ~ .navbtn span:nth-child(2){opacity:0}
.navtoggle:checked ~ .navbtn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.navtoggle:focus-visible ~ .navbtn{outline:2px solid var(--amber);outline-offset:3px}

.scrim{
  position:fixed;inset:0;z-index:62;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.navtoggle:checked ~ .scrim{opacity:1;pointer-events:auto}

.toc{
  position:fixed;top:0;left:0;bottom:0;z-index:65;
  width:min(var(--toc-w),86vw);
  background:linear-gradient(180deg,#0d1116,#0a0c0f);
  border-right:1px solid var(--line);
  transform:translateX(-102%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.navtoggle:checked ~ .toc{transform:none}
/* VS-Code-style drag handle on the sidebar's right edge */
.toc-resize{
  position:absolute;top:0;right:-3px;bottom:0;width:7px;z-index:2;
  cursor:col-resize;touch-action:none;background:transparent;
  border:0;padding:0;
}
.toc-resize::after{
  content:'';position:absolute;top:0;bottom:0;left:3px;width:1px;
  background:var(--amber);opacity:0;transition:opacity .18s;
}
.toc-resize:hover::after,.toc-resize:focus-visible::after{opacity:.65}
body.resizing .toc-resize::after{opacity:1}
/* while dragging, don't let the pointer select text or hover-highlight rows */
body.resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}
body.resizing .toc,body.resizing .toc *{transition:none!important;pointer-events:none}
body.resizing .toc-resize{pointer-events:auto}

.toc-head{padding:64px 22px 16px;border-bottom:1px solid var(--line-soft)}
.toc-title{font-family:var(--cjk);font-size:1.5rem;font-weight:600;color:#fff;line-height:1.2}
.toc-sub{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.toc-list{overflow-y:auto;padding:10px 10px 40px;flex:1;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.toc-list::-webkit-scrollbar{width:8px}
.toc-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* a chapter row = link + caret, with its sections nested underneath */
.toc-rowwrap{display:flex;align-items:center;gap:2px}
.toc-rowwrap > .toc-ch{flex:1;min-width:0}

.toc-ch{
  display:flex;gap:10px;align-items:baseline;text-decoration:none;
  padding:7px 11px;border-radius:9px;color:var(--text-2);
  transition:background .18s,color .18s;
}
.toc-ch:hover{background:var(--surface);color:#fff}
.toc-ch.here{background:rgba(227,168,87,.1);color:#fff}
.toc-n{font-family:var(--sans);font-size:.68rem;font-weight:700;color:var(--dim);min-width:1.6em;text-align:right;flex:none}
.toc-ch.here .toc-n{color:var(--amber)}
.toc-ch .zhn{font-family:var(--cjk);font-size:.95rem}
.toc-ch .enn{font-family:var(--sans);font-size:.66rem;color:var(--dim);letter-spacing:.06em;margin-left:auto;flex:none}
.toc-ch:hover .enn,.toc-ch.here .enn{color:var(--amber-dim)}

.toc-caret{
  flex:none;width:24px;align-self:stretch;min-height:28px;
  color:#5f6875;display:grid;place-items:center;border-radius:8px;
  transition:color .18s,background .18s;
}
.toc-caret::before{
  content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .24s;
}
.toc-caret:hover{color:var(--amber-hi);background:var(--surface)}
.toc-caret[aria-expanded="true"]::before{transform:rotate(45deg) translate(-1px,-1px)}

.toc-subs{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;
}
.toc-subs > div{overflow:hidden;min-height:0}
.toc-node.open > .toc-subs{grid-template-rows:1fr}

.toc-sec{
  display:block;text-decoration:none;font-family:var(--cjk);font-size:.82rem;
  color:#77808d;padding:4px 11px 4px 40px;border-radius:8px;line-height:1.5;
  transition:color .18s,background .18s;
}
.toc-sec:hover{color:var(--amber-hi);background:var(--surface)}
.toc-sec.here{color:var(--amber-hi)}
body[data-mode="en"] .toc-sec{font-family:var(--sans);font-size:.75rem}

/* --------------------------------------------------------------- panels */

.panel{
  position:fixed;top:60px;right:clamp(.7rem,3vw,1.3rem);z-index:75;
  width:min(310px,88vw);padding:16px 18px 18px;
  background:rgba(19,24,31,.96);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.panel.open{opacity:1;transform:none;pointer-events:auto}
.panel h3{
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 12px;
}
/* ------------------------------------------- floating reading control (↔) */

.rctl{position:fixed;right:18px;bottom:22px;z-index:56;display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.rctl-btn{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(12,15,19,.8);backdrop-filter:blur(10px);
  color:var(--text-2);display:grid;place-items:center;
  transition:border-color .2s,color .2s,background .2s;
}
.rctl-btn:hover{border-color:var(--amber-dim);color:var(--amber-hi)}
.rctl-btn.open{border-color:var(--amber-dim);color:var(--amber-hi);background:rgba(20,25,32,.92)}
.rctl-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.rctl-panel{
  order:-1;width:264px;
  background:rgba(14,18,23,.94);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px 13px;box-shadow:var(--shadow);
  max-height:calc(100vh - 120px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  opacity:0;pointer-events:none;transform:translateY(8px) scale(.97);transform-origin:100% 100%;
  transition:opacity .22s,transform .22s;
}
.rctl-panel.open{opacity:1;pointer-events:auto;transform:none}

.rctl-field + .rctl-field{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.rctl-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem;gap:.6rem}
.rctl-label{
  font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.rctl-label i{font-style:normal;font-family:var(--cjk);letter-spacing:.06em}
.rctl-val{
  font-family:var(--sans);font-size:.76rem;font-weight:600;color:var(--amber-hi);
  font-variant-numeric:tabular-nums;flex:none;
}

.rctl-reset{
  display:block;width:100%;margin-top:1rem;cursor:pointer;
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  background:transparent;border:1px solid var(--line);border-radius:8px;padding:.5rem;
  transition:border-color .2s,color .2s,background .2s;
}
.rctl-reset:hover{border-color:var(--amber-dim);color:var(--amber-hi);background:rgba(227,168,87,.06)}

.rctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;cursor:ew-resize;display:block;margin:0;
}
.rctl input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) var(--fill,50%),
             rgba(255,255,255,.13) var(--fill,50%),rgba(255,255,255,.13) 100%);
}
.rctl input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.13)}
.rctl input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--amber)}
.rctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-7px;
  width:18px;height:18px;border-radius:50%;
  background:var(--amber-hi);border:2px solid #10141a;
  box-shadow:0 2px 8px rgba(0,0,0,.6);transition:transform .15s;
}
.rctl input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--amber-hi);border:2px solid #10141a;box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.rctl input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.rctl input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:99px}

/* a checkbox styled as a small pill switch */
.rctl-toggle{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.rctl-toggle input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:36px;height:20px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.13);border:1px solid var(--line);position:relative;
  transition:background .2s,border-color .2s;
}
.rctl-toggle input::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:transform .2s,background .2s;
}
.rctl-toggle input:checked{background:rgba(227,168,87,.28);border-color:var(--amber-dim)}
.rctl-toggle input:checked::after{transform:translateX(16px);background:var(--amber-hi)}

#search-input{
  width:100%;padding:.6em .8em;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);
  font-family:var(--cjk);font-size:.92rem;outline:none;
}
#search-input:focus{border-color:var(--amber-dim)}
.hint{font-family:var(--sans);font-size:.68rem;color:var(--dim);margin-top:9px;line-height:1.6}
.hint kbd{
  font-family:var(--sans);font-size:.9em;border:1px solid var(--line);
  border-radius:4px;padding:.05em .35em;background:var(--bg);color:var(--text-2);
}

/* ------------------------------------------------------------------ hero */

.hero{
  min-height:min(88vh,720px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:96px 1.2rem 60px;position:relative;
}
.hero::after{
  content:'';position:absolute;left:50%;bottom:34px;width:1px;height:46px;
  background:linear-gradient(180deg,transparent,var(--amber-dim));
}
.hero .eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--amber);margin-bottom:1.6rem;
}
.hero h1{
  font-family:var(--cjk);font-size:calc(clamp(3rem,13vw,5.6rem) * var(--tscale));font-weight:600;
  color:#fff;margin:0;line-height:1.05;letter-spacing:.06em;
}
.hero .h1-en{
  font-family:var(--display);font-size:calc(clamp(1.1rem,4vw,1.7rem) * var(--tscale));font-weight:500;
  color:var(--text-2);letter-spacing:.3em;text-transform:uppercase;margin-top:1rem;
}
.hero .rule{width:56px;height:1px;background:var(--amber-dim);margin:2.1rem auto}
.hero .blurb{
  font-family:var(--cjk);font-size:calc(1rem * var(--tscale));color:var(--dim);max-width:30rem;
  line-height:2;margin:0 auto;
}
.hero .meta{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:#5f6875;margin-top:2.4rem;
}

/* -------------------------------------------------------------- chapters */

.chapter{padding-top:2rem}
.ch-head{
  display:flex;align-items:center;gap:1.1rem;
  margin:4.5rem 0 2.2rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--line-soft);scroll-margin-top:70px;
}
.ch-num{
  font-family:var(--display);font-size:calc(3.1rem * var(--tscale));font-weight:700;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--amber-dim);flex:none;
}
.ch-titles{display:flex;flex-direction:column;gap:.15rem}
.ch-zh{font-family:var(--cjk);font-size:calc(1.5rem * var(--tscale));font-weight:600;color:#fff;line-height:1.2}
.ch-en{font-family:var(--sans);font-size:calc(.68rem * var(--tscale));font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}

.sec-head{margin:3rem 0 1.4rem;scroll-margin-top:70px}
.sec-head .s-zh{
  font-family:var(--cjk);font-size:calc(1.12rem * var(--tscale));font-weight:600;color:var(--amber-hi);
  margin:0;line-height:1.5;letter-spacing:.03em;
}
.sec-head .s-en{
  font-family:var(--sans);font-size:calc(.67rem * var(--tscale));font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:.4rem 0 0;
}
.sec-head::before{
  content:'';display:block;width:26px;height:1px;background:var(--amber-dim);margin-bottom:.9rem;
}

/* ---------------------------------------------------------------- photos

   Three idioms, ported from the Atomic Habits edition:

   .plate   a photo bound to one or more verses. It bleeds into the outer
            margin, dissolves at every edge, and sits *behind* the column —
            .verses isolates the stacking context, so a plate can only ever
            land under text, never over it. Geometry and grade arrive as
            --plate-* custom properties on the wrapper.
   .fig     the photo shown outright, with a caption bar under it.
   .banner  a full-bleed image behind a chapter opening, under a scrim.
   ------------------------------------------------------------------------ */

.plate{position:relative}

/* Type sitting over a photo needs its own separation — the same halo the
   chapter banner uses. Costs nothing on the dark page, and lets the plate be
   graded a stop brighter without the dimmer English line breaking up.
   --plate-halo scales it: a plate deliberately run bright (a sunrise, say)
   sets it above 1 so the glyphs still carry their own pool of shadow. */
.plate{--plate-halo:1}
/* A plate run bright enough to matter also washes out the English line, which
   is deliberately dimmer than the Chinese. --plate-en lifts just that line,
   for just that plate, rather than dulling the photo back down. */
.plate .en{color:var(--plate-en,var(--text-2))}
.plate .zh,.plate .en,.plate .en-n{
  text-shadow:
    0 1px calc(12px * var(--plate-halo)) rgba(10,12,15,.92),
    0 0   calc(24px * var(--plate-halo)) rgba(10,12,15,.85),
    0 0   calc(44px * var(--plate-halo)) rgba(10,12,15,.7);
}

.plate-img{
  position:absolute;z-index:-1;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  top:var(--plate-top,-3.5rem);
  width:var(--plate-w,26rem);max-width:none;
  height:calc(var(--plate-w,26rem) * var(--plate-ar,.6));
  object-fit:cover;object-position:var(--plate-pos,50% 42%);
  opacity:var(--plate-o,.6);
  /* the white balance: desaturate so a busy photo cannot compete with the
     type, and dim slightly. A photo whose whole point is one coloured glow
     wants --plate-gray:0; a night shot on a near-black page needs
     --plate-bright well above 1. */
  filter:grayscale(var(--plate-gray,.32)) contrast(1.02) brightness(var(--plate-bright,.95));
}

/* Radii deliberately smaller than the offset to each edge, so the gradient
   reaches zero before any side — it dissolves on all four, never cuts. */
.plate-left .plate-img{
  left:calc(-1 * var(--plate-bleed,11rem));
  -webkit-mask-image:radial-gradient(40% 54% at 38% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
          mask-image:radial-gradient(40% 54% at 38% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
}
.plate-right .plate-img{
  right:calc(-1 * var(--plate-bleed,11rem));
  -webkit-mask-image:radial-gradient(40% 54% at 62% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
          mask-image:radial-gradient(40% 54% at 62% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
}
/* Centred plates size off the text, not in fixed units: width follows the
   line-width slider, height follows however tall the spanned verses render —
   so it moves with every slider at once. --plate-pad is the only fixed part. */
/* "whole": let the height follow the image's own aspect instead of the span's,
   so object-fit has nothing to crop. The mask still dissolves all four edges
   because the element now *is* the photo's box. Centred on the verses it
   spans, so it sits behind them rather than starting at the top. */
.plate-center.plate-whole .plate-img{
  left:50%;top:50%;translate:-50% -50%;
  width:calc(100% + 2 * var(--plate-bleed,2rem));
  height:auto;
}
.plate-center .plate-img{
  left:50%;translate:-50% 0;
  top:calc(-1 * var(--plate-pad,1.4em));
  width:calc(100% + 2 * var(--plate-bleed,2rem));
  height:calc(100% + 2 * var(--plate-pad,1.4em));
  -webkit-mask-image:radial-gradient(52% 52% at 50% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
          mask-image:radial-gradient(52% 52% at 50% 50%,#000 0%,rgba(0,0,0,.95) 30%,transparent 100%);
}

.platecred{
  display:block;margin:.2rem 0 1rem;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.05em;
  color:rgba(255,255,255,.26);text-decoration:none;transition:color .2s;
}
.platecred:hover{color:rgba(255,255,255,.72)}
.plate-center .platecred{position:absolute;right:0;bottom:calc(100% + .25em);margin:0;font-size:.56rem}

/* ------ figures: the photo shown outright ------ */

.fig{
  margin:2.6rem 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
}
.fig img{display:block;width:100%;height:auto;margin:0}
.fig[style*="--fig-ar"] img{height:calc(100% * 1);aspect-ratio:1 / var(--fig-ar);object-fit:cover;
  object-position:var(--fig-pos,50% 42%)}
.figcap{
  font-family:var(--sans);font-size:.8rem;line-height:1.6;color:var(--dim);
  border-top:1px solid var(--line);padding:.9rem clamp(.9rem,3vw,1.2rem);
}
.figcap b{color:var(--amber);font-weight:700;letter-spacing:.12em;font-size:.72rem;margin-right:.5rem}
/* a photo carries more than type does, so it edges just past the measure */
.fig.wide{
  --fig-bleed:0rem;
  width:calc(100% + 2 * var(--fig-bleed));max-width:none;
  margin-left:50%;transform:translateX(-50%);
}
@media (min-width:1000px){.fig.wide{--fig-bleed:1rem}}
@media (min-width:1240px){.fig.wide{--fig-bleed:2rem}}
@media (min-width:1800px){.fig.wide{--fig-bleed:2.75rem}}
.fig.aside{float:right;clear:right;width:min(var(--fig-w,22rem),48%);margin:.3rem 0 1.4rem 1.8rem}
.sec-head,.ch-head{clear:both}

/* ------ chapter banner ------ */

.banner{
  position:relative;isolation:isolate;overflow:hidden;
  background-size:cover;background-position:var(--banner-pos,center);
  display:grid;align-items:end;min-height:min(46svh,420px);
  margin:4.5rem 0 2.2rem;border-radius:var(--r);
}
.banner::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,12,15,.80) 0%,rgba(10,12,15,.40) 34%,rgba(10,12,15,.80) 74%,var(--bg) 100%),
    linear-gradient(90deg,rgba(10,12,15,.70),rgba(10,12,15,.16) 62%);
}
.banner .ch-head{margin:0;padding:0 clamp(1.1rem,4vw,2rem) clamp(1.4rem,4vw,2.2rem);border:0}
.banner .ch-zh,.banner .ch-en{text-shadow:0 3px 26px rgba(0,0,0,.75)}
.photocred{
  position:absolute;right:10px;bottom:8px;z-index:2;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.05em;
  color:rgba(255,255,255,.34);text-decoration:none;
  background:rgba(0,0,0,.3);padding:3px 8px;border-radius:6px;transition:color .2s,background .2s;
}
.photocred:hover{color:rgba(255,255,255,.85);background:rgba(0,0,0,.6)}

/* No outer margin left to bleed into below this, so a side plate would fall
   off the screen — centre it on the column and fade it further instead. */
@media (max-width:1080px){
  /* The bleed assumes an outer margin to grow into. On a phone there is none,
     so it would push the document wider than the viewport and let the whole
     page scroll sideways — pin the plate to the column instead. The radial
     mask still dissolves well inside the edges, so nothing is cut. */
  .plate-center .plate-img{width:100%;opacity:calc(var(--plate-o,.6) * .62)}
  .plate-left .plate-img,.plate-right .plate-img{
    left:50%;right:auto;translate:-50% 0;
    width:min(var(--plate-w,26rem),112%);height:auto;
    opacity:calc(var(--plate-o,.6) * .55);
    -webkit-mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.7) 44%,transparent 86%);
            mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.7) 44%,transparent 86%);
  }
  .fig.aside{float:none;width:auto;margin:2rem 0}
}

/* ---------------------------------------------------------------- verses */

/* isolate the stacking context so a .plate-img (z-index:-1) can never rise
   above the type, only sit behind it */
.verses{margin:0;position:relative;isolation:isolate}

.v{
  position:relative;padding:calc(var(--vspace)/2) .7rem calc(var(--vspace)/2) 3.5rem;
  margin-left:-.7rem;border-radius:10px;scroll-margin-top:78px;
  transition:background .2s;
}
.v::before{
  content:'';position:absolute;left:2.6rem;top:.55rem;bottom:.55rem;width:1px;
  background:var(--amber-dim);opacity:0;transition:opacity .2s;
}
.v:hover{background:rgba(255,255,255,.022)}
.v:hover::before{opacity:.5}
.v:target,.v.flash{background:rgba(227,168,87,.09)}
.v:target::before,.v.flash::before{opacity:1}

.vn{
  position:absolute;left:0;top:calc(var(--vspace)/2 + .25em);width:2.1rem;text-align:right;
  font-family:var(--sans);font-size:.66rem;font-weight:700;
  color:var(--amber-dim);text-decoration:none;letter-spacing:.03em;
  transition:color .18s;
}
.v:hover .vn{color:var(--amber)}

.zh{
  font-family:var(--cjk);font-size:calc(var(--fs) * var(--zh-scale));
  line-height:var(--lh);color:#e7ecf3;margin:0;letter-spacing:.02em;
  text-wrap:pretty;
}
.en{
  font-family:var(--serif);font-weight:300;
  font-size:calc(var(--fs) * var(--en-scale));
  line-height:calc(var(--lh) - .18);color:var(--text-2);
  margin:var(--pairgap) 0 0;text-wrap:pretty;
}
.zh.gap{color:#5f6875;font-style:normal;font-size:calc(var(--fs) * var(--zh-scale) * .84)}


/* merged verses: the Chinese runs 16–17 as one sentence, so the English keeps
   its own numbering underneath rather than being forced to match */
.en-split .en + .en{margin-top:.55em}
.en-n{
  font-family:var(--sans);font-size:calc(.62rem * var(--tscale));font-weight:700;
  color:var(--amber-dim);margin-right:.5em;vertical-align:.14em;letter-spacing:.03em;
}
.v-span .vn{letter-spacing:-.02em;font-size:calc(.6rem * var(--tscale))}
.vanchor{display:inline;scroll-margin-top:78px}
body[data-mode="zh"] .en-split{display:none}

/* language modes */
body[data-mode="zh"] .en{display:none}
body[data-mode="en"] .zh{display:none}
body[data-mode="en"] .en{color:var(--text);font-size:calc(var(--fs) * var(--zh-scale))}
body[data-mode="en"] .zh.gap{display:none}
body[data-mode="zh"] .sec-head .s-en,
body[data-mode="en"] .sec-head .s-zh{display:none}
body[data-mode="en"] .sec-head .s-en{font-size:calc(1rem * var(--tscale));color:var(--amber-hi);letter-spacing:.1em;margin-top:0}
body[data-mode="zh"] .ch-en,
body[data-mode="en"] .ch-zh{display:none}
body[data-mode="en"] .ch-en{font-size:calc(1.4rem * var(--tscale));letter-spacing:.04em;text-transform:none;color:#fff;font-weight:700;font-family:var(--display)}

/* ------------------------------------------- highlighting & OT quotations */

/* Old-Testament citations are tagged at build time but stay the normal text
   colour until the reader switches them on. */
body.ot-on .ot{color:var(--ot)}

/* An emphasised phrase, set in the same red but on its own account — it is not
   a Scripture citation, so it does not follow the OT-quotes toggle. */
.em{color:var(--ot)}
/* Emphasis outranks a verse highlight. The highlight marks a whole verse you
   want to find again; the red marks particular words. Letting the highlight
   repaint them would erase the finer mark with the coarser one, so red wins —
   including over the highlight applied to an OT span. */
.v[class*="hl-"] .em,
body.ot-on .v[class*="hl-"] .em,
.v[class*="hl-"] .ot .em,
.v[class*="hl-"] .em .ot{color:var(--ot)}

/* per-verse highlight: recolours the type, which is what reads as
   "highlighted" on a dark ground (a yellow block would blind you) */
.v.hl-yellow{--hlc:var(--hl-yellow)}
.v.hl-green {--hlc:var(--hl-green)}
.v.hl-rose  {--hlc:var(--hl-rose)}
.v.hl-teal  {--hlc:var(--hl-teal)}

.v[class*="hl-"] .zh,
.v[class*="hl-"] .en,
body.ot-on .v[class*="hl-"] .ot{color:var(--hlc)}
.v[class*="hl-"] .en{opacity:.86}
.v[class*="hl-"]::before{opacity:1;background:var(--hlc)}
.v[class*="hl-"] .vn{color:var(--hlc)}

/* the toolbar swatch button */
.hl-dot{
  width:15px;height:15px;border-radius:50%;display:block;
  background:var(--hl-current,transparent);
  border:1.5px solid var(--hl-current,var(--dim));
  transition:background .2s,border-color .2s;
}
.swatches{display:flex;gap:9px;margin-bottom:11px}
.sw{
  width:30px;height:30px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--c);border:2px solid transparent;outline-offset:2px;
  transition:transform .15s,border-color .18s;
}
.sw:hover{transform:scale(1.1)}
.sw[aria-pressed="true"]{border-color:#fff}
.sw-off{
  background:transparent;border:1.5px solid var(--line);position:relative;
}
.sw-off::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:15px;height:1.5px;background:var(--dim);transform:rotate(-45deg);
}
.sw-off[aria-pressed="true"]{border-color:#fff}
.hint b{color:var(--text-2);font-weight:600}

/* focus mode — dim everything but the verse under the cursor */
body.focus .v{opacity:.32;transition:opacity .25s}
body.focus .v:hover,body.focus .v:focus-within,body.focus .v[class*="hl-"]{opacity:1}

/* search */
body.searching .v.hide,body.searching .sec-head.hide,body.searching .ch-head.hide{display:none}
mark{background:rgba(227,168,87,.26);color:#fff;border-radius:3px;padding:0 .12em}
.noresult{
  font-family:var(--sans);font-size:.86rem;color:var(--dim);
  text-align:center;padding:3rem 0;
}

/* copy toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);z-index:90;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.04em;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:999px;padding:.55em 1.2em;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* chapter pager */
.pager{
  display:flex;justify-content:space-between;gap:1rem;
  margin:4rem 0 1rem;padding-top:1.6rem;border-top:1px solid var(--line-soft);
}
.pager a{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;text-decoration:none;
  color:var(--dim);padding:.5em .9em;border:1px solid var(--line);border-radius:999px;
  transition:color .18s,border-color .18s;
}
.pager a:hover{color:var(--amber-hi);border-color:var(--amber-dim)}
.pager a.ghost{visibility:hidden}

footer{
  padding:5rem 0 6rem;text-align:center;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#525b67;line-height:2.2;
}

/* ------------------------------------------------------------- responsive */

/* Wide screens: the drawer stops being a drawer and simply docks, exactly as
   the Atomic Habits edition does — no toggle, no scrim, body sits beside it. */
@media (min-width:1280px){
  .toc{transform:none;width:var(--toc-w);background:transparent;border-right:1px solid var(--line-soft)}
  .scrim{display:none}
  .navbtn{display:none}
  body{padding-left:var(--toc-w)}
  .toc-head{padding-top:30px}
  .topbar{left:var(--toc-w);padding-left:clamp(.7rem,3vw,1.3rem)}
  .panel{top:64px}
}

@media (max-width:720px){
  /* no --vspace override here: app.js writes it inline on <html>, which would
     beat this rule anyway — leaving one would only look like it still applied */
  .topbar{padding-left:58px;gap:.45rem}
  .crumb{font-size:.68rem}
  .modes button{padding:.32em .62em;font-size:.68rem}
  .v{padding-left:0;margin-left:0;padding-right:0}
  .v::before{display:none}
  .vn{
    position:static;float:left;width:auto;
    margin:.15em .6em 0 0;text-align:left;
  }
  .ch-num{font-size:2.3rem}
  .ch-zh{font-size:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

@media print{
  .topbar,.navbtn,.toc,.scrim,.progress,.panel,.toast,.pager{display:none!important}
  body{background:#fff;color:#000}
  .zh{color:#000}.en{color:#333}
}

/* ===================================================== iPhone edition ==== */

:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}

/* keep the chrome clear of the Dynamic Island and the home indicator */
.topbar{
  height:calc(56px + var(--safe-t));
  padding-top:var(--safe-t);
  padding-left:calc(58px + var(--safe-l));
  padding-right:calc(clamp(.7rem,3vw,1.3rem) + var(--safe-r));
}
.navbtn{top:calc(10px + var(--safe-t));left:calc(14px + var(--safe-l))}
.toc{padding-left:var(--safe-l)}
.toc-head{padding-top:calc(64px + var(--safe-t))}
.toc-list{-webkit-overflow-scrolling:touch;padding-bottom:calc(40px + var(--safe-b))}
.rctl{right:calc(18px + var(--safe-r));bottom:calc(22px + var(--safe-b))}
.panel{top:calc(60px + var(--safe-t))}
.hero{padding-top:calc(96px + var(--safe-t))}
footer{padding-bottom:calc(6rem + var(--safe-b))}
.toast{bottom:calc(28px + var(--safe-b))}

/* svh, not vh - Safari's collapsing bars must not resize the drawer or cover */
.toc{height:100svh}
.hero{min-height:min(86svh,720px)}

/* Double-tap is Safari's zoom gesture; without this the highlight never fires.
   manipulation keeps normal scrolling and pinch-zoom, only the double-tap
   zoom shortcut goes. */
.v{touch-action:manipulation}

/* thumb-sized hit targets */
.iconbtn{width:42px;height:42px}
.modes button{padding:.42em .8em}
.rctl-btn{width:48px;height:48px}
.rctl-panel{width:min(300px,calc(100vw - 2.4rem))}
.toc-ch{padding-top:10px;padding-bottom:10px}
.toc-sec{padding-top:8px;padding-bottom:8px}
.toc-caret{width:34px}
.vn{padding:.25em .45em;margin-left:-.45em}

/* a drag handle needs a mouse, and here it would only eat the edge swipe */
.toc-resize{display:none}

/* sliders are fiddly at 4px on glass */
.rctl input[type=range]{height:30px}
.rctl input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px}

/* iOS zooms any input whose text is under 16px when it takes focus */
#search-input{font-size:16px}

/* ------------------------------------------------- web edition only ---- */
/* Served, not opened from Files: there is a hub page to go back to. The
   button rides in the topbar's flex row rather than floating over it — the
   right-hand corner is already taken by the highlight and search buttons. */
.homebtn{margin-right:.15rem;text-decoration:none}
.homebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}