/* ==========================================================================
   Cover By Grace — design system
   Every colour, size and component lives here. Change it once, it changes
   everywhere. Nothing else in the site should define a colour.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Palette — sampled from the original Blogger site, do not drift */
  --gold:#F7CB4D;
  --gold-deep:#E0A93B;
  --gold-dark:#B9832A;
  --gold-soft:#FDF3D4;
  --gold-mist:#FEFAEC;
  --cream:#FDFAF0;
  --white:#FFFFFF;
  --ink:#2C1D14;
  --ink-mid:#5A483A;
  --ink-soft:#7A6857;
  --ink-faint:#A3937F;
  --line:#EADFC6;
  --line-soft:#F2E9D6;
  --leaf:#3F6B4A;

  /* Type */
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --cjk:'Noto Serif TC','EB Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Space + shape */
  --gut:clamp(20px,5vw,40px);
  --maxw:1120px;
  --readw:68ch;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --shadow-1:0 1px 2px rgba(44,29,20,.05),0 2px 8px rgba(44,29,20,.05);
  --shadow-2:0 2px 6px rgba(44,29,20,.06),0 14px 36px rgba(44,29,20,.10);
  --shadow-3:0 30px 70px rgba(44,29,20,.18);
  --ease:cubic-bezier(.22,.68,.32,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;letter-spacing:-.012em}
p{margin:0 0 1.1em}
:focus-visible{outline:2.5px solid var(--gold-dark);outline-offset:3px;border-radius:4px}

/* ---------- 3. Bilingual switch ----------
   Mark any element with data-l="en" or data-l="zh".
   The toggle sets <html data-lang="…"> and the other language hides. */
html[data-lang="en"] [data-l="zh"]{display:none !important}
html[data-lang="zh"] [data-l="en"]{display:none !important}
html[data-lang="zh"] body{font-family:var(--cjk)}
html[data-lang="zh"] .u-serif,
html[data-lang="zh"] h1,html[data-lang="zh"] h2,
html[data-lang="zh"] h3,html[data-lang="zh"] h4{font-family:var(--cjk);letter-spacing:0}
:lang(zh),[data-l="zh"]{font-family:var(--cjk);letter-spacing:.01em}

/* ---------- 4. Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap--read{max-width:820px}
.stack>*+*{margin-top:var(--s,24px)}
.section{padding:clamp(48px,8vw,88px) 0}
.section--tight{padding:clamp(34px,5vw,54px) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 5. Site header ---------- */
.site-head{
  background:var(--cream);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(1.3) blur(8px);
  background:color-mix(in srgb,var(--cream) 90%,transparent);
}
.site-head__bar{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:18px;min-height:64px;
}
.wordmark{
  font-family:var(--serif);font-size:clamp(17px,2.4vw,21px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;color:var(--ink);
}
.wordmark:hover{color:var(--gold-dark)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site-nav a{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
  padding:22px 12px;border-bottom:3px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold-deep)}
html[data-lang="zh"] .site-nav a{letter-spacing:.04em;font-size:13.5px}

/* language toggle */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-left:14px;flex:none}
.lang button{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:6px 12px;color:var(--ink-soft);transition:background .18s var(--ease),color .18s var(--ease);
}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.lang button:not([aria-pressed="true"]):hover{background:var(--gold-soft)}

/* mobile */
.burger{display:none;margin-left:auto;padding:10px;border-radius:var(--r-sm);line-height:0}
.burger svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
@media (max-width:920px){
  .burger{display:block}
  .site-nav{
    position:fixed;inset:64px 0 auto 0;margin:0;flex-direction:column;align-items:stretch;
    background:var(--cream);border-bottom:1px solid var(--line);padding:6px 0 14px;
    box-shadow:var(--shadow-2);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .22s var(--ease),opacity .22s var(--ease);
  }
  .site-nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .site-nav a{padding:13px var(--gut);border-bottom:1px solid var(--line-soft);font-size:14px}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--line-soft);background:var(--gold-soft)}
  .lang{margin:12px var(--gut) 0;align-self:flex-start}
}

/* ---------- 6. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--gold-soft)}
.hero__art{position:absolute;inset:0}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
/* warm scrim so the words stay readable over the artwork */
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(253,250,240,.97) 0%,rgba(253,250,240,.92) 30%,rgba(253,250,240,.55) 52%,rgba(253,250,240,.08) 72%),
    linear-gradient(to top,rgba(253,250,240,.9),transparent 42%);
}
@media (max-width:860px){
  .hero__art img{object-position:70% 40%}
  .hero__art::after{background:linear-gradient(to bottom,rgba(253,250,240,.72) 0%,rgba(253,250,240,.93) 46%,var(--cream) 100%)}
}
.hero__inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,10vw,120px) var(--gut) clamp(52px,9vw,110px)}
.hero__copy{max-width:19em}
.hero__eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 18px;
}
.hero h1{font-size:clamp(38px,6.6vw,66px);line-height:1.04;margin:0 0 20px}
.hero__sub{font-size:clamp(18px,2.2vw,21px);color:var(--ink-mid);max-width:26em;margin:0 0 30px;line-height:1.6}
.hero__verse{
  font-style:italic;color:var(--ink-soft);font-size:16px;line-height:1.6;
  border-left:3px solid var(--gold-deep);padding-left:16px;margin:32px 0 0;max-width:28em;
}
.hero__verse cite{display:block;font-style:normal;font-family:var(--sans);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-top:9px}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;border-radius:999px;padding:13px 26px;
  border:1.5px solid var(--ink);color:var(--ink);background:transparent;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn:active{transform:none}
.btn--primary{background:var(--gold);border-color:var(--ink)}
.btn--primary:hover{background:var(--gold-deep)}
.btn--ghost{border-color:var(--line);color:var(--ink-mid)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--white)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 8. Section headings ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dark);margin:0 0 12px;
}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(27px,4vw,40px)}
.sec-head p{margin:8px 0 0;color:var(--ink-soft);font-size:17px;max-width:46ch}
.more-link{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;color:var(--gold-dark);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.more-link:hover{color:var(--ink)}
.more-link span{transition:transform .18s var(--ease)}
.more-link:hover span{transform:translateX(4px)}

/* ---------- 9. Cards ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 22px;box-shadow:var(--shadow-1);text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--gold-deep)}
.card__cat{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-dark);margin-bottom:9px}
.card h3{font-size:23px;margin:0 0 9px;line-height:1.25}
.card p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.card__foot{
  margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--sans);font-size:11.5px;color:var(--ink-faint);
}
.chip{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  background:var(--gold-soft);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;color:var(--ink-mid);
}
.chip--video{background:#EFE4F5;border-color:#DCCAE6;color:#6B4A82}

/* ---------- 10. Prose ---------- */
.prose{max-width:var(--readw);font-size:19px;line-height:1.78}
.prose h2{font-size:29px;margin:2em 0 .5em}
.prose h3{font-size:22px;margin:1.7em 0 .4em}
.prose a{color:var(--gold-dark);text-underline-offset:3px}
.prose blockquote{
  margin:1.6em 0;padding:18px 24px;background:var(--gold-soft);
  border-left:4px solid var(--gold-deep);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.prose blockquote p:last-child{margin:0}
.verse-n{font-family:var(--sans);font-size:10px;font-weight:700;color:var(--gold-dark);
  vertical-align:super;margin-right:3px;letter-spacing:0}
.ref{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dark);margin-top:12px}

/* ---------- 11. Footer ---------- */
.site-foot{background:var(--ink);color:#CBBBA4;padding:52px 0 36px;margin-top:clamp(50px,8vw,90px)}
.site-foot a{color:#E7D7BC;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot__grid{display:grid;gap:34px;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:760px){.site-foot__grid{grid-template-columns:1fr}}
.site-foot__mark{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.site-foot h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9A8A75;margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:14px;line-height:2.1}
.site-foot__verse{font-style:italic;font-size:15.5px;line-height:1.65;max-width:34ch;margin:0}
.site-foot__base{
  border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
  font-family:var(--sans);font-size:12.5px;color:#8E7E6B;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ---------- 12. Utilities ---------- */
.u-center{text-align:center}
.u-muted{color:var(--ink-soft)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--gold);color:var(--ink);
  padding:11px 18px;font-family:var(--sans);font-size:14px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* placeholder pages, until each tab is built */
.soon{text-align:center;padding:clamp(60px,12vw,130px) 0}
.soon h1{font-size:clamp(32px,5.5vw,50px);margin-bottom:14px}
.soon p{color:var(--ink-soft);max-width:44ch;margin:0 auto 26px;font-size:18px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ==========================================================================
   Touch targets on phones
   Measured at 360px: footer links were 17px tall, the "more" links 21px and
   the language buttons 32px. Apple and Google both ask for ~44px, and a
   17px-tall link is genuinely hard to hit with a thumb. This gives every
   tappable thing room without changing how anything looks on desktop.
   ========================================================================== */
@media (max-width:920px), (hover:none) and (pointer:coarse){
  .site-foot ul{line-height:1.4}
  .site-foot ul li{margin:0}
  .site-foot ul a{
    display:inline-block;padding:12px 0;min-height:44px;
    display:flex;align-items:center;
  }
  .more-link{padding:11px 0;min-height:44px;align-items:center}
  .lang button{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
  .wordmark{padding:9px 0;min-height:44px;display:inline-flex;align-items:center}
  .burger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .site-foot__base{line-height:1.6}
  /* Checkbox and radio inputs are small by nature. Grow the control itself,
     and give whatever label wraps it a full-height target, however deeply the
     input is nested. */
  input[type="checkbox"],input[type="radio"]{
    width:22px;height:22px;flex:none;margin:0;
  }
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]){
    min-height:44px;display:flex;align-items:center;gap:10px;
  }
  /* File inputs: the browser draws its own button, so pad the row instead. */
  input[type="file"]{min-height:44px;padding:10px 0}

  /* Inline text links that sit inside prose are only as tall as their line.
     Give the small ones a thumb-sized box without moving the text. */
  .f-callout__link a,
  .t-invite a:not(.btn),
  .t-invite__inline,
  .r-back,
  .r-next__lbl a,
  .sh-back a,
  a.back-link{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* The section stylesheets load after this one, so their radio and checkbox
     sizes win on specificity. A 15px-tall radio is not a real target on a
     phone, so this floor is enforced rather than suggested. It is a minimum,
     not a look -- nothing here changes on desktop. */
  input[type="checkbox"],
  input[type="radio"]{
    width:22px !important;height:22px !important;flex:none;
  }
}

/* ---------- Hero verse that opens out ----------
   Revelation 5:5 is on the page; the rest of the passage, 5:6-10, appears on
   hover, on tap, or from the keyboard.

   Deliberately a plain show/hide, not a height animation. Three animated
   versions were tried and all rendered at zero height, because the
   hidden-language sibling leaves the wrapper with nothing to size against.
   This is the version that works. */
.hero__verse--more{cursor:pointer;position:relative}
.hero__verse--more:focus{outline:none}
.hero__verse--more:focus-visible{outline:2.5px solid var(--gold-dark);outline-offset:6px;border-radius:4px}

.hero__verse__cue{
  display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);
  margin-top:10px;
}
.hero__verse--more:hover .hero__verse__cue,
.hero__verse--more.is-open .hero__verse__cue{display:none}

.hero__verse__rest{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.hero__verse--more:hover .hero__verse__rest,
.hero__verse--more:focus-within .hero__verse__rest,
.hero__verse--more.is-open .hero__verse__rest{display:block}

/* ==========================================================================
   PRINT / SAVE AS PDF
   A testimony should come out looking like an essay someone typed, not like
   a web page that has been screenshotted across nine sheets. So: one column,
   serif, sensible margins, everything that only makes sense on screen taken
   out, and page breaks that never split a verse or strand a heading.
   Only the language currently on screen prints.
   ========================================================================== */
@media print {
  @page { margin: 20mm 18mm; }

  html, body {
    background:#fff !important; color:#000 !important;
    font-family:'EB Garamond', Georgia, serif;
    font-size:11.5pt; line-height:1.55;
  }
  html[data-lang="zh"] body { font-family:'Noto Serif TC', serif; font-size:11pt; line-height:1.75; }

  /* Screen furniture that means nothing on paper. */
  .site-head, .site-foot, .r-progress, .skip, .lang, .burger, .site-nav,
  .r-next, .f-videos, .f-video, .sh-videos, .s-videos, .m-videos,
  .print-btn, .t-filters, .t-search, .t-invite, .hero__verse__cue,
  .f-vnote, .vid, video, iframe, .btn, .more-link, .t-card__read {
    display:none !important;
  }

  /* One clean column. */
  main, .wrap, .r-solo, .r-article, .r-head, .prose, .r-prose, .m-body {
    max-width:100% !important; width:auto !important;
    margin:0 !important; padding:0 !important; box-shadow:none !important;
  }

  /* Title block reads like the head of an essay. */
  .r-title, h1 { font-size:20pt; line-height:1.2; margin:0 0 6pt; }
  .r-kicker { font-size:8pt; letter-spacing:.14em; text-transform:uppercase; color:#555 !important; margin:0 0 4pt; }
  .r-meta, .f-dates {
    font-size:9pt; color:#555 !important; margin:0 0 14pt;
    padding-bottom:8pt; border-bottom:.5pt solid #bbb;
  }

  p { margin:0 0 7pt; orphans:3; widows:3; }
  .r-lead { font-size:inherit; }
  .r-lead::first-letter { font-size:inherit; float:none; margin:0; color:inherit; }

  /* Scripture stays visibly set apart, but cheaply. */
  blockquote, .m-verse, .f-callout {
    border:0 !important; border-left:1.5pt solid #999 !important;
    background:none !important; padding:2pt 0 2pt 10pt !important;
    margin:9pt 0 !important; break-inside:avoid; page-break-inside:avoid;
  }
  cite, .ref { display:block; font-style:normal; font-size:8.5pt; color:#555 !important; margin-top:3pt; }
  .verse-n { font-size:7pt; vertical-align:super; color:#777 !important; }

  /* Section markers, if a page has them. */
  .m-part, .f-part {
    font-size:9pt; letter-spacing:.12em; text-transform:uppercase; color:#444 !important;
    margin:14pt 0 5pt; break-after:avoid; page-break-after:avoid;
  }
  .m-part::after, .f-part::after { display:none; }

  /* Photographs: keep them, but never let one eat a whole sheet. */
  figure { margin:9pt 0; break-inside:avoid; page-break-inside:avoid; text-align:center; }
  figure img { max-width:70% !important; max-height:70mm !important; width:auto !important; }
  figcaption { font-size:8.5pt; color:#555 !important; margin-top:3pt; }

  a { color:#000 !important; text-decoration:none; }
  /* Spell out any link that is not just internal navigation. */
  .prose a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#555; }

  .m-hero, .hero { background:none !important; padding:0 !important; border:0 !important; }
  .m-hero__name { font-size:20pt; }
  .m-close p, .f-last { font-style:italic; }
}

/* ---------- Print button ----------
   Sits under the article on every testimony. Added by site.js, so a new
   testimony page gets one without anybody remembering to add it. */
.print-btn{
  display:flex;align-items:center;gap:9px;margin:0 auto;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:transparent;
  border:1.5px solid var(--line);border-radius:999px;
  padding:12px 22px;min-height:44px;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.print-btn:hover{border-color:var(--ink);background:var(--gold-soft)}
.print-btn svg{width:17px;height:17px;fill:none;stroke:var(--gold-dark);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}