/* ==========================================================================
   Cover By Grace — Panorama of the Old Testament
   Only /scripture/panorama-old-testament/ loads this. Class prefix: .pn-
   The green colours are local to this page; the rest come from site.css.
   ========================================================================== */

.pn-head{
  background:#4c6b2f;color:#fff;
  padding:clamp(34px,6vw,64px) 0 clamp(30px,5vw,50px);
}
.pn-head .eyebrow{color:#f7e9a8}
.pn-head h1{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,64px);line-height:1.02;letter-spacing:.01em;
  margin:0 0 20px;color:#fff;
}
.pn-h1__small{display:block;font-size:.42em;letter-spacing:.14em;color:#f7e9a8;margin-bottom:.2em}
html[data-lang="zh"] .pn-head h1{font-family:var(--cjk);text-transform:none;letter-spacing:.04em}
.pn-lede{font-size:clamp(16px,2vw,19px);line-height:1.7;max-width:62ch;margin:0;color:#f3f6e6}

.pn-body{background:#e4eac6;padding:clamp(34px,5vw,60px) 0}

/* the winding road: a white band down the middle, steps alternate left and right */
.pn-road{list-style:none;margin:0 auto;padding:0;max-width:960px;position:relative}
.pn-road::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:20px;
  transform:translateX(-50%);background:#fff;border-radius:10px;
}
.pn-step{position:relative;min-height:104px;margin:0 0 30px;padding:4px 0}
.pn-step:last-child{margin-bottom:0}

.pn-tile{position:absolute;top:0;left:50%;width:92px;height:92px;transform:translateX(-50%)}
.pn-ico{width:100%;height:100%;border-radius:14px;box-shadow:0 0 0 5px #fff,var(--shadow-1)}
.pn-num{
  position:absolute;top:-8px;left:-8px;min-width:26px;height:26px;padding:0 6px;
  border-radius:13px;background:#2f4a22;color:#fff;
  font:700 12px/26px var(--sans);text-align:center;
}

.pn-text{width:calc(50% - 76px)}
.pn-step:nth-child(odd) .pn-text{text-align:right}
.pn-step:nth-child(even) .pn-text{margin-left:calc(50% + 76px)}
.pn-text h3{font-size:clamp(18px,2.2vw,21px);margin:0 0 4px;color:#2f4a22}
.pn-text p{font-size:16px;line-height:1.55;margin:0 0 4px;color:var(--ink-mid)}
.pn-ref{
  display:block;font:700 11.5px/1.4 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:#6b5a1a;
}
html[data-lang="zh"] .pn-ref{font-family:var(--cjk);letter-spacing:.05em;font-size:13px}
html[data-lang="zh"] .pn-text p{font-size:16.5px;line-height:1.8}

/* phones: road moves to the left edge, everything reads top to bottom */
@media (max-width:720px){
  .pn-road::before{left:42px}
  .pn-tile{left:42px;width:76px;height:76px}
  .pn-step{min-height:88px}
  .pn-text,.pn-step:nth-child(even) .pn-text{width:auto;margin-left:100px;text-align:left}
  .pn-step:nth-child(odd) .pn-text{text-align:left}
}

/* ---------- verse box ---------- */
.pn-refs{display:block;font:700 11.5px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6b5a1a}
html[data-lang="zh"] .pn-refs{font-family:var(--cjk);letter-spacing:.05em;font-size:13px}
.pn-ref--link{
  display:inline;color:inherit;text-decoration:underline dotted;text-underline-offset:3px;
}
.pn-ref--link:hover,.pn-ref--link[aria-expanded="true"]{color:#2f4a22;text-decoration-style:solid}
.pn-step.is-open{z-index:20}
.pn-text{position:relative}
.pn-pop{
  position:absolute;top:100%;margin-top:6px;z-index:20;width:min(360px,calc(100vw - 2 * var(--gut)));
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-2);padding:16px 44px 16px 18px;text-align:left;max-height:70vh;overflow-y:auto;
}
.pn-pop[hidden]{display:none}
/* open toward the middle of the road so the box never leaves the page */
.pn-step:nth-child(odd) .pn-pop{left:0}
.pn-step:nth-child(even) .pn-pop{right:0}
.pn-pop__ref{font:700 11.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6b5a1a;margin:14px 0 6px}
.pn-pop__ref:first-of-type{margin-top:0}
html[data-lang="zh"] .pn-pop__ref{font-family:var(--cjk);letter-spacing:.05em;font-size:13px}
.pn-pop__v{font-size:16.5px;line-height:1.65;color:var(--ink);margin:0 0 .5em}
.pn-pop__v:last-child{margin-bottom:0}
html[data-lang="zh"] .pn-pop__v{font-size:17px;line-height:1.85}
.pn-pop__v .verse-n{font-size:10px;margin-right:4px}
.pn-pop__x{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  font:400 22px/28px var(--sans);color:var(--ink-mid);background:var(--gold-mist);
}
.pn-pop__x:hover{background:var(--gold-soft);color:var(--ink)}
@media (max-width:720px){
  .pn-pop,.pn-step:nth-child(odd) .pn-pop,.pn-step:nth-child(even) .pn-pop{left:0;right:auto;width:min(360px,calc(100vw - 2 * var(--gut) - 100px))}
}

.pn-pop__links{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px 16px}
.pn-pop__more{font:600 13px/1.5 var(--sans);color:var(--gold-dark);text-decoration:none}
.pn-pop__more:hover{text-decoration:underline}
html[data-lang="zh"] .pn-pop__more{font-family:var(--cjk);font-size:14px}