/* ==========================================================================
   Cover By Grace — Beliefs and Resources
   Only these two pages load this file. Every colour, font and radius below
   comes from a token in site.css — nothing new is invented here.
   ========================================================================== */

/* ---------- 1. Shared page opening ---------- */
.p-head{padding:clamp(38px,6.5vw,72px) 0 clamp(22px,3.5vw,34px)}
.p-head h1{font-size:clamp(33px,5.8vw,56px);margin:0 0 18px;max-width:22em}
.p-lede{font-size:clamp(17.5px,2.1vw,21px);line-height:1.62;color:var(--ink-mid);max-width:34em;margin:0}
.p-note{
  font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--ink-faint);
  max-width:46em;margin:20px 0 0;
}
.p-note strong{color:var(--ink-soft);font-weight:600}

/* Chinese text on these pages carries book titles, preacher names and a few
   English words. Put the Latin face first so an apostrophe or a full stop
   inside them is not drawn as wide CJK punctuation; the Chinese characters
   still fall through to Noto Serif TC. */
html[data-lang="zh"] .p-lede,
html[data-lang="zh"] .vsec h2,
html[data-lang="zh"] .rsec h2,
html[data-lang="zh"] .vsec__intro,
html[data-lang="zh"] .rsec__intro,
html[data-lang="zh"] .book__t,
html[data-lang="zh"] .book__d,
html[data-lang="zh"] .panel__t,
html[data-lang="zh"] .vid__t,
html[data-lang="zh"] .book__t [data-l="zh"]{font-family:'EB Garamond','Noto Serif TC',Georgia,serif}

/* ---------- 2. Jump links ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0 0 clamp(28px,4.5vw,44px)}
.jump a{
  display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-mid);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:9px 17px;
  transition:border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.jump a:hover{border-color:var(--gold-deep);color:var(--ink);box-shadow:var(--shadow-1)}
.jump em{font-style:normal;color:var(--gold-dark);letter-spacing:.04em}
html[data-lang="zh"] .jump a{letter-spacing:.03em;font-size:13.5px}

/* every anchored block clears the sticky header */
.vsec[id],.rsec[id]{scroll-margin-top:86px}

/* ---------- 3. Section heads (both pages) ---------- */
.vsec,.rsec{padding:0 0 clamp(42px,6.5vw,78px)}
.vsec__head,.rsec__head{border-top:2px solid var(--ink);padding-top:17px;margin:0 0 clamp(24px,3.5vw,34px);max-width:820px}
.vsec__n,.rsec__n{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dark);margin:0;
}
.vsec h2,.rsec h2{font-size:clamp(25px,4.2vw,38px);margin:9px 0 12px}
.vsec__intro,.rsec__intro{font-size:18px;line-height:1.68;color:var(--ink-mid);max-width:38em;margin:0}

/* ---------- 4. Beliefs: a verse as one readable unit ---------- */
.vlist{display:grid;gap:clamp(16px,2.4vw,24px);max-width:760px}
.v{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:19px 24px 21px;box-shadow:var(--shadow-1);
}
.v__ref{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 9px;
}
html[data-lang="zh"] .v__ref{font-family:var(--sans);font-size:12.5px;letter-spacing:.05em}
.v__t{font-size:18px;line-height:1.82;margin:0 0 .8em}
.v__t:last-child{margin-bottom:0}
.v__t .verse-n{font-size:10px}

/* the banner verse — Galatians 6:17, the one at the foot of every page */
.v--banner{
  background:linear-gradient(170deg,var(--gold-soft),var(--gold-mist));
  border-left-color:var(--gold-deep);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:clamp(26px,4.5vw,42px) clamp(22px,4vw,44px);box-shadow:var(--shadow-2);
}
.v--banner .v__t{
  font-size:clamp(20px,3.1vw,28px);line-height:1.5;font-style:italic;color:var(--ink);
}
.v--banner .v__t .verse-n{display:none}
.v__foot{
  font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  margin:16px 0 0;font-style:normal;
}

/* ---------- 5. Page footnote ---------- */
.p-foot{border-top:1px solid var(--line);padding:22px 0 clamp(20px,4vw,40px);max-width:820px}
.p-foot p{font-family:var(--sans);font-size:13px;line-height:1.75;color:var(--ink-faint);margin:0}

/* ---------- 6. Resources: the reading list ---------- */
.books{list-style:none;margin:0;padding:0;max-width:760px}
.book{display:grid;grid-template-columns:46px 1fr;gap:0 18px;padding:22px 0;border-top:1px solid var(--line)}
.book:first-child{border-top:0;padding-top:2px}
.book__n{font-family:var(--serif);font-size:31px;font-weight:600;line-height:1;color:var(--gold-deep);padding-top:5px}
.book__body>*{margin:0}
.book__t{font-size:22px;line-height:1.3}
.book__by{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-dark);margin:6px 0 0;
}
html[data-lang="zh"] .book__by{letter-spacing:.03em;font-size:12.5px}
.book__d{font-size:17px;line-height:1.66;color:var(--ink-mid);margin:9px 0 0;max-width:40em}
@media (max-width:430px){
  .book{grid-template-columns:30px 1fr;gap:0 12px}
  .book__n{font-size:24px;padding-top:4px}
  .book__t{font-size:20px}
}

/* ---------- 7. Resources: preachers and quotes ---------- */
.names{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 clamp(24px,3.5vw,32px);padding:0}
.names li{
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-mid);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
}
.qset{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin:0 0 clamp(24px,3.5vw,32px);max-width:960px}
.q{
  background:var(--gold-soft);border-left:4px solid var(--gold-deep);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:19px 22px;margin:0;
}
.q p{font-size:17px;line-height:1.7;font-style:italic;margin:0}
.q .ref{margin-top:12px}

/* ---------- 8. Resources: giving panel ---------- */
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-1);max-width:760px;
}
.panel__v{font-size:clamp(18px,2.4vw,22px);line-height:1.6;font-style:italic;margin:0}
.panel__v p{margin:0}
.panel__v .ref{font-style:normal}
.panel__t{font-size:17px;line-height:1.66;color:var(--ink-mid);margin:18px 0 0;max-width:40em}
.panel .btn{margin-top:22px}
.out-note{font-family:var(--sans);font-size:12.5px;color:var(--ink-faint);margin:12px 0 0}

/* ---------- 9. Resources: click-to-play video ---------- */
.vid{max-width:820px}
.vid__frame{
  position:relative;aspect-ratio:16/9;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);
}
.vid__poster{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;padding:22px;text-align:center;text-decoration:none;color:#F3E6CB;
  background:
    radial-gradient(120% 90% at 50% 12%,rgba(247,203,77,.22),transparent 62%),
    linear-gradient(160deg,#3A2718,#201409);
}
.vid__btn{
  width:64px;height:64px;border-radius:50%;background:var(--gold-deep);
  display:grid;place-items:center;box-shadow:var(--shadow-2);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.vid__btn svg{width:24px;height:24px;fill:var(--ink);margin-left:4px}
.vid__poster:hover .vid__btn,.vid__poster:focus-visible .vid__btn{transform:scale(1.07);background:var(--gold)}
.vid__t{font-family:var(--serif);font-size:clamp(19px,2.9vw,26px);font-weight:600;letter-spacing:.05em;margin:0}
.vid__hint{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#C4AC85;margin:0;
}
html[data-lang="zh"] .vid__hint{letter-spacing:.05em;font-size:12.5px}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__cap{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--ink-soft);margin:14px 0 0;max-width:46em}
@media (max-width:430px){.vid__btn{width:54px;height:54px}.vid__btn svg{width:20px;height:20px}}