/* The Shepherd King · what this piece needs beyond shared/site.css */

/* life at a glance: passages in place of years, so the first column is wider */
.life.refs li{grid-template-columns:108px minmax(0,1fr)}
.life.refs .y{font-size:13px;line-height:1.75}
.life .when{display:block;font:400 13px/1.5 var(--sans);color:var(--ink-2)}
.life-note{margin-top:14px;font:400 14px/1.5 var(--sans);color:var(--ink-2);max-width:68ch}

/* the map beside the story (phones: after the story, before Keep exploring) */
.story .where{order:4}.story .explore{order:5}
.where{margin:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--map-land)}
.where svg{display:block;width:100%;height:auto}
.where figcaption{padding:10px 14px 14px;font:400 13px/1.5 var(--sans);color:var(--ink-2)}
.where .lab{font:400 11.5px 'Hanken Grotesk',sans-serif;fill:var(--ink)}
.where .lab.b{font-weight:600}
.where .lab.s{font-size:10.5px;fill:var(--ink-2)}
.where .lab.v{font-style:italic;fill:var(--accent)}
.where .hills{fill:var(--map-other);stroke:var(--map-line);stroke-width:.8}
.where .brook{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.where .dot{fill:var(--card);stroke:var(--ink);stroke-width:1.2}
.where .dot.k{fill:var(--gold)}

/* a passage to read, in Keep exploring */
.explore a.read .tr{font:600 11px var(--sans);letter-spacing:.1em;margin-left:6px;padding:2px 6px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}

/* literal renderings in the cards: the Hebrew transliterated */
.card .heb{font-style:normal;font-family:var(--sans);font-size:.85em}

/* the hero's one movement: the brook's ripples drift downstream (Part 2); stars brighten (entrance) */
@keyframes dd-flow{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.hero .dd-flow{animation:dd-flow 9s linear infinite}
@keyframes dd-twinkle{0%,100%{opacity:.9}50%{opacity:.25}}
.hero .dd-tw{animation:dd-twinkle 4s ease-in-out infinite}
.hero .dd-tw.t2{animation-delay:-1.3s}
.hero .dd-tw.t3{animation-delay:-2.6s}
@media (prefers-reduced-motion:reduce){.hero .dd-flow,.hero .dd-tw{animation:none}}

/* who adds "the brother of" (2 · The valley of Elah, the King James card) */
.split{margin:0;display:grid;gap:10px;font:400 14px/1.45 var(--sans)}
.split div{display:grid;gap:2px}
.split dt{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.split dd{margin:0}
@media (min-width:700px){.split{grid-template-columns:1fr 1fr;column-gap:24px}}

/* the King James card: its verse in full, the translators' added words marked (upright, underlined),
   and any spare height below the text */
.card .say .added{font-style:normal;text-decoration:underline dotted var(--accent);text-underline-offset:4px}
.cards.five .card.wide .say{flex-grow:0}
.cards.five .card.wide .cite{margin-top:auto}