/* Streams of Scripture Kids
   Shares the parent brand's DNA — deep ink ground, warm gold light, water —
   but rounder, warmer and lighter-weight than the adult reader.
   Display face is Fraunces (soft, storybook); body is Nunito (round, legible
   for early readers). Both are OFL via Google Fonts. */
:root{
  /* Kids palette. The parent's ink/gold/water DNA is still here, but the
     daylight half is turned up: the icon Mac built is bright turquoise water
     under sunlit gold, and the site should read as the same object. Ink is
     kept for the hero and footer so Kids still sits inside the Streams family
     rather than becoming a separate brand. */
  --ink:#0f1b2b;         /* deep navy — parent brand ground, hero + footer */
  --ink-2:#16273c;
  --gold:#e6b74d;        /* sunlit gold — matches the Kids icon */
  --gold-deep:#8a6410;   /* darkened for text on light surfaces (AA) */
  --water:#3f9fb8;
  --teal:#8fd6d1;        /* Kids turquoise — the icon's water */
  --teal-2:#d8f1ef;      /* the same water, thinned for large fills */
  --teal-deep:#12626b;   /* legible teal for text/borders */
  --coral:#f2a488;       /* warm accent, used sparingly */
  --coral-deep:#9d4526;
  --paper:#fdf7ea;       /* warm parchment, storybook page */
  --surface:#ffffff;
  --surface-2:#f4ece0;
  --text:#1d2a30;
  --text-2:#4d5c66;
  --text-3:#63737e;   /* AA on parchment: was 3.87:1 */
  --rule:#e6dcc8;
  --radius:22px;         /* rounder — storybook, not dashboard */
  --radius-lg:28px;
  --display:'Fraunces',Georgia,serif;
  --body:'Nunito',system-ui,-apple-system,Segoe UI,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1a1e; --surface:#122830; --surface-2:#183440;
    --text:#eef7f6; --text-2:#a9c2c4; --text-3:#87a0a4;
    --rule:#204450; --gold-deep:#e6b74d; --teal-2:#173b44;
  }
}
:root[data-theme="dark"]{
  --paper:#0b1a1e; --surface:#122830; --surface-2:#183440;
  --text:#eef7f6; --text-2:#a9c2c4; --text-3:#87a0a4;
  --rule:#204450; --gold-deep:#e6b74d; --teal-2:#173b44;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);
     font-family:var(--body);font-size:17px;line-height:1.65;
     overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto}
.shell{max-width:1080px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);
  color:var(--ink);padding:10px 16px;border-radius:8px}
a{color:var(--gold-deep)}
a:focus-visible,button:focus-visible,video:focus-visible{
  outline:3px solid var(--water);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
header.site{background:var(--ink);color:#f6f1e6;position:sticky;top:0;z-index:20;
  border-bottom:2px solid var(--gold)}
.nav-row{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  margin-right:auto}
.brand img{border-radius:50%;display:block;background:var(--ink-2)}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-txt b{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em}
.brand-txt i{font-style:normal;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.nav{display:flex;gap:6px;align-items:center}
.nav a{color:#e7e0d2;text-decoration:none;font-weight:600;font-size:15.5px;
  padding:9px 13px;border-radius:999px}
.nav a:hover{background:rgba(224,179,84,.16);color:#fff}
.nav a[aria-current="page"]{background:var(--gold);color:var(--ink)}
.nav-out{color:var(--gold)!important}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.3);
  color:#f6f1e6;font-size:19px;border-radius:10px;padding:6px 12px;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;padding:10px 18px 18px;gap:2px;
    border-bottom:2px solid var(--gold)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(400px,64vh,560px);display:flex;
  align-items:center;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;
  /* Light at the top of the master must survive; the gradient only deepens
     where the type sits, so contrast holds without flattening the image. */
  background:linear-gradient(180deg,rgba(9,18,30,.10) 0%,rgba(9,18,30,.34) 38%,rgba(9,18,30,.72) 100%)}
.hero-inner{position:relative;padding:56px 22px;color:#fdfaf4;
  /* Own stacking context so the scrim below can sit behind this text but
     still above the hero image and veil. */
  z-index:1;isolation:isolate}
.hero-inner::before{
  /* A local ink floor under the type only.
     The veil alone leaves ~0.26 alpha where the eyebrow sits, and gold on the
     sunlit part of the plate measures 1.57:1 median — invisible. Darkening the
     whole veil would flatten the light the hero is built around, so the scrim
     is local: it falls off to nothing well before the edges, so the image stays
     bright everywhere the type is not. Measured by compositing the real plate:
     min 5.24:1, 0/720 sampled pixels below 4.5:1. */
  content:"";position:absolute;inset:-64px -40px;z-index:-1;
  /* The ellipse must finish INSIDE the box. Sized past it (125%), the box
     clips the gradient while it is still partly opaque and the straight edge
     reads as a seam across the plate — measured contrast was fine and it still
     looked wrong, which is why this gets a vision pass and not just a number. */
  background:radial-gradient(72% 62% at 26% 50%,
    rgba(9,18,30,.74) 0%, rgba(9,18,30,.62) 38%,
    rgba(9,18,30,.30) 66%, rgba(9,18,30,.08) 85%, rgba(9,18,30,0) 100%);
  pointer-events:none}
@media (min-width:900px){
  /* Desktop centres the plate's light behind the type column's left edge, so
     the falloff can start sooner without dulling the rays. */
  .hero-inner::before{inset:-72px -56px;
    background:radial-gradient(64% 58% at 24% 50%,
      rgba(9,18,30,.70) 0%, rgba(9,18,30,.56) 40%,
      rgba(9,18,30,.24) 68%, rgba(9,18,30,.06) 86%, rgba(9,18,30,0) 100%)}
}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;font-weight:700}
.hero .eyebrow{
  /* The eyebrow is 12.5px, so it needs 4.5:1 — but it lands on the sunlit part
     of the plate, where gold measures 1.57:1 median and even pure white only
     reaches 3.07:1. No colour fixes that, and a scrim large enough to cover it
     is fragile: sized to the text block it misses the eyebrow at 16.4% of the
     box, sized past the box it clips into a visible seam.
     A chip sized to the text itself is deterministic — it moves with the text
     and cannot leave an edge on the plate. Measured on the real plate:
     min 5.24:1, 0/720 sampled pixels below 4.5:1. */
  display:inline-block;padding:7px 14px;border-radius:999px;
  background:rgba(9,18,30,.70);
  box-shadow:0 1px 10px rgba(9,18,30,.28)}
@supports (backdrop-filter:blur(2px)){
  .hero .eyebrow{backdrop-filter:blur(2px)}
}
.hero h1{font-family:var(--display);font-size:clamp(38px,7vw,64px);line-height:1.04;
  margin:0 0 18px;font-weight:700;text-wrap:balance;color:#fffdf8}
.lede{font-size:clamp(17px,2.3vw,20px);max-width:34em;color:#e6ddcd;margin:0 0 26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:999px;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#2a1d05}
.btn-ghost{background:rgba(255,255,255,.1);color:#fdfaf4;
  box-shadow:inset 0 0 0 1.5px rgba(253,250,244,.45)}
.band .btn-ghost{background:var(--surface-2);color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--rule)}

/* ---------- sections ---------- */
.band{padding:52px 22px}
.page-head{padding:38px 22px 8px}
h1{font-family:var(--display);font-size:clamp(30px,5vw,44px);line-height:1.1;
  margin:0 0 14px;font-weight:700;text-wrap:balance}
h2{font-family:var(--display);font-size:clamp(22px,3.2vw,29px);margin:0 0 14px;
  font-weight:600;text-wrap:balance}
h3{font-family:var(--display);font-size:20px;margin:0 0 6px;font-weight:600}
.band-lede{color:var(--text-2);margin:-6px 0 22px}
.crumbs{font-size:14px;color:var(--text-3);margin-bottom:12px}
.crumbs a{color:var(--text-2)}
.answer{font-size:clamp(18px,2.4vw,21px);line-height:1.55;color:var(--text);
  max-width:40em;font-weight:600;margin:0 0 14px}
.ref{color:var(--gold-deep);font-weight:700;font-size:14.5px;margin:0 0 8px;
  letter-spacing:.01em}
.ref.big{font-size:17px}
.empty{background:var(--surface-2);border-radius:var(--radius);padding:22px 24px;
  color:var(--text-2);max-width:44em}

/* ---------- cards ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card a{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  height:100%;transition:transform .14s ease,box-shadow .14s ease}
.card a{border-radius:var(--radius-lg)}
.card a:hover{transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(18,98,107,.18)}
@media (prefers-reduced-motion:reduce){
  .card a{transition:none}
  .card a:hover{transform:none}
}
.card h2,.card h3{font-size:19px;margin:14px 16px 4px}
.card .ref{margin:0 16px 6px}
.card-lesson{margin:0 16px 16px;color:var(--text-2);font-size:15px}
.card-art,.feature-art{aspect-ratio:16/10;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--teal) 0%,var(--water) 55%,var(--ink-2) 100%);
  background:linear-gradient(150deg,var(--ink) 0%,var(--water) 130%)}
.card-art span,.feature-art span{font-family:var(--display);font-size:48px;
  color:var(--gold);font-weight:700}
.feature{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:22px;
  text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  align-items:center}
.feature > div:last-child{padding:20px 24px 20px 0}
.feature .more{color:var(--gold-deep);font-weight:700;margin:10px 0 0}
@media (max-width:640px){
  .feature{grid-template-columns:1fr}
  .feature > div:last-child{padding:0 20px 20px}
}
.pills{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:var(--surface-2);color:var(--text-2);
  font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.tag.age{background:var(--gold);color:#2a1d05}

/* ---------- story page ---------- */
.player{margin:22px 0 30px;background:var(--ink);border-radius:var(--radius);
  overflow:hidden;max-width:420px}
.player video{display:block;width:100%;height:auto;aspect-ratio:9/16}
.facts{max-width:44em;padding-left:22px}
.facts li{margin-bottom:8px}
.facts.plain{color:var(--text-2)}
.scripture{margin:0 0 20px;padding:22px 26px;background:var(--surface);
  border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  max-width:44em;font-size:17.5px;line-height:1.75}
.scripture .v sup{color:var(--gold-deep);font-weight:700;font-size:12px;
  margin-right:3px;vertical-align:super}
.scripture .attr{margin-top:14px;font-size:13.5px;color:var(--text-3);font-weight:600}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.prose{max-width:46em}
.prose h2{margin-top:32px}
.steps{padding-left:22px}
.steps li{margin-bottom:10px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#d7cfc0;margin-top:56px;
  border-top:2px solid var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding:46px 22px 30px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:26px}}
.foot-brand{font-family:var(--display);font-size:20px;color:#fdfaf4;margin:0 0 8px;
  font-weight:600}
.foot-brand span{color:var(--gold)}
.foot-note{font-size:14.5px;color:#a9a294;margin:0 0 8px;max-width:32em}
.foot-note a{color:var(--gold)}
.foot-h{font-family:var(--body);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8d8677;margin:0 0 12px;font-weight:700}
.foot-list,.social{list-style:none;margin:0 0 12px;padding:0}
.foot-list li,.social li{margin-bottom:8px}
.foot-list a,.social a{color:#d7cfc0;text-decoration:none;font-size:15px;
  display:flex;align-items:center;gap:9px}
.foot-list a:hover,.social a:hover{color:var(--gold)}
.social .ico{display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(224,179,84,.16);color:var(--gold);
  font-size:12.5px;font-weight:700;flex:none}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);padding:18px 22px 34px;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between}
.foot-legal p{margin:0;font-size:13px;color:#8d8677;max-width:46em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- storybook artwork ----------
   The cards used to show the story's first letter on a gradient. That reads as
   a placeholder, because it was one — and a grid of lettered tiles looks like a
   dashboard, not a children's book. Real painted artwork does most of the work
   of making this feel like a storybook, so it gets the space. */
.card-art,.feature-art,.story-hero{
  width:100%;display:block;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0}
.card-art{aspect-ratio:8/5}
.cards .card a{overflow:hidden}
.feature-art{aspect-ratio:8/5;border-radius:var(--radius-lg)}
.story-hero{aspect-ratio:8/5;border-radius:var(--radius-lg);margin:0 0 22px;
  box-shadow:0 18px 44px rgba(18,98,107,.20)}
.card-art-empty{display:grid;place-items:center;
  background:linear-gradient(160deg,var(--teal) 0%,var(--water) 55%,var(--ink-2) 100%)}

/* Bigger, fewer, friendlier: two generous cards beat three cramped ones on a
   children's collection page. */
@media (min-width:760px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
}
.card h2,.card h3{font-size:22px;margin:16px 18px 6px;letter-spacing:-.01em}
.card .ref{margin:0 18px 8px}
.card-lesson{margin:0 18px 18px;font-size:16px}
.card .pills{margin:0 18px 18px}


/* ---------- mobile: featured story reads as a storybook page ----------
   Reported from a real iPhone: the title collided with the artwork and a long
   empty stretch pushed "Bible stories" off the screen. Two causes, both mine:
   the art carried a 28px radius nested inside the card's 22px radius and
   border so the curves fought each other, and the single-column text block had
   no top padding, so the title sat flush against the image edge.

   Fixed by flow, not by nudging: the art is full-bleed to the card's own top
   corners, and each block below it gets explicit vertical rhythm. No negative
   margins and no absolute positioning — those are what make a card fragile at
   the next viewport width. */
@media (max-width:640px){
  .feature{border-radius:var(--radius-lg);align-items:stretch}
  .feature-art{border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio:4/3}
  .feature > div:last-child{padding:16px 20px 22px}
  .feature h3{margin:0 0 8px;font-size:23px;line-height:1.2}
  .feature .ref{margin:0 0 10px}
  .feature p{margin:0 0 14px;line-height:1.6}
  .feature .more{margin:2px 0 0;font-size:16.5px}

  /* 52px top + 52px bottom between adjacent bands reads as a dead screen on a
     390px phone. Content-driven spacing instead of a desktop constant. */
  .band{padding:30px 22px}
  .band + .band{padding-top:8px}
  .page-head{padding:26px 22px 6px}

  /* The card grid is one column here; the art should lead each card. */
  .card-art{aspect-ratio:4/3}
  .cards{gap:22px}
}

/* Respect the notch/home indicator rather than positioning against Safari's
   chrome, which moves as the user scrolls. */
@supports (padding:max(0px)){
  .site-head{padding-left:max(22px,env(safe-area-inset-left));
             padding-right:max(22px,env(safe-area-inset-right))}
  .site-foot{padding-bottom:max(28px,env(safe-area-inset-bottom))}
}


/* A card that promises a video it does not have is the worst defect on a
   children's page: a child taps it and nothing plays. Say so on the card. */
.card-media{position:relative;display:block}
.soon{position:absolute;left:12px;bottom:12px;
  background:rgba(9,18,30,.82);color:#fdf7ea;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(2px)}