/* Salty Logic: white cards on very light grey, grey text and lines, blue-grey highlights, deep red contrast, Arial */
:root {
  --bg: #f3f4f5; --card: #fff; --text: #3f4448; --muted: #767b80; --border: #d7dadd; --hover: #e9ecef;
  --accent: #3d6a9c; --contrast: #9b2226; --quote: #f6f7f8; --think: #7d9a85;
  --font: Arial, Helvetica, sans-serif;
  /* Blue title sizes on every page, Complexity of you included (the "salty logic" logo in the header is separate):
     page titles (h1), card and section titles (h2), smaller headings (h3) */
  --title-size: clamp(1.3rem, 4.5vw, 1.45rem);
  --heading-size: 1.2rem;
  --subheading-size: 1rem;
  /* Fixed height of the pinned site header (its content measures 70.77px; it wraps to two lines below 320px),
     so pinned page titles can sit exactly under it */
  --head-h: 71px;
}
@media (max-width: 319px) { :root { --head-h: 102px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--font); }
a { color: var(--muted); text-decoration: none; }
a:hover { color: var(--text); }
/* Arrows (→ ↓ ←) are always the title blue, wherever they appear in links and buttons */
.arrow { color: var(--accent); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.wide .wrap { max-width: 1240px; }

/* Header: pinned to the top of the window on every page */
.site-head { position: sticky; top: 0; z-index: 10; height: var(--head-h); border-bottom: 1px solid var(--border); background: var(--bg); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 18px; padding-bottom: 14px; }
.brand { color: var(--accent); text-decoration: none; font: 700 1.6rem/1.2 var(--font); }
/* The site name inside body text: header blue and bold, at the text's own size */
.site-name { color: var(--accent); font-weight: 700; }
.tagline { display: block; color: var(--muted); font: 400 0.85rem/1.4 var(--font); }
.site-nav { display: flex; gap: 6px; }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 4px 10px; border-radius: 6px; border-bottom: 2px solid transparent; }
.site-nav a:hover { background: var(--hover); color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); border-radius: 6px 6px 0 0; }

main.wrap { padding-top: 30px; padding-bottom: 48px; }
h1, h2, h3 { color: var(--accent); font-weight: 700; line-height: 1.3; text-wrap: balance; }
h1 { font-size: var(--title-size); margin: 0 0 8px; }
h2 { font-size: var(--heading-size); margin: 2em 0 0.5em; }
h3 { font-size: var(--subheading-size); margin: 1.6em 0 0.4em; }
strong { color: var(--contrast); }

/* Home: intro and one card per topic */
/* 20px under the header and 20px above the first topic card (main's 30px top padding, less 10) */
.intro { color: var(--muted); margin: -10px 0 20px; }
.topics { display: grid; gap: 16px; }
.topic { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.topic h2 { margin: 0 0 10px; }
.topic-links { list-style: none; margin: 0; padding: 0 0 0 24px; display: grid; gap: 12px; }
.topic-links a { font-weight: 700; }
.topic-links a::after { content: "\2192"; display: inline-block; margin-left: 6px; color: var(--accent); transition: transform .15s; }
.topic-links a:hover::after { transform: translateX(3px); }
.topic-links p { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; }
/* Local copy only: a grey rule with "Drafts" in it, between a topic's published links and its unreleased ones
   (tools/package.py strips it from the published site) */
.topic-links .drafts-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.topic-links .drafts-divider::before, .topic-links .drafts-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.topic-empty { margin: 0; color: var(--muted); font-style: italic; }
[hidden] { display: none !important; }
/* A drawing you can drag to turn: sideways drags turn it, up/down swipes still scroll the page on phones
   (never touch-action: none, which traps scrolling on an iPhone) */
.drag-turn { touch-action: pan-y; cursor: grab; }
.drag-turn:active { cursor: grabbing; }

/* Expand bar: a grey rule with the expand bar text and a blue ↓ in the middle; clicking it reveals the
   hidden content named by its aria-controls; the bar stays with its ↓ turned to ↑ and clicking again hides it
   (js/expand-bar.js) */
.expand-bar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 0; background: none; border: 0; font: 700 1.05rem var(--font); color: var(--muted); cursor: pointer; }
/* The rules keep at least 24px each so long expand bar text wraps between them on phones */
.expand-bar::before, .expand-bar::after { content: ""; flex: 1 0 24px; height: 1px; background: var(--border); }
.expand-bar-text { display: inline-flex; align-items: center; }
.expand-bar .arrow { display: inline-block; margin-left: -6px; font-size: 0.935em; -webkit-text-stroke: 0.35px currentColor; line-height: 1; position: relative; top: -3px; transition: transform .15s; }
.expand-bar:hover { color: var(--text); }
.expand-bar:hover .arrow { transform: translateY(3px); }
.expand-bar[aria-expanded="true"] .arrow { transform: translateY(4px) rotate(180deg); }
.expand-bar[aria-expanded="true"]:hover .arrow { transform: translateY(1px) rotate(180deg); }
.expand-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.expand-opening { animation: expand-open .5s ease-out; }
@keyframes expand-open { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .expand-opening { animation: none; } }

/* Subtitle under a page title: always 30px above and 30px below */
.subtitle { margin: 30px 0; color: var(--muted); font-size: 1.2rem; }
.meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 6px; }

/* Post body */
.post { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 24px clamp(16px, 4vw, 36px) 28px; }
.post p, .post li { max-width: 68ch; }
/* Quotes: the red bar is only for Scripture; other people's words use blockquote.plain (grey bar) */
.post blockquote, .card blockquote { margin: 1.4em 0; padding: 12px 16px; background: var(--quote); border-left: 3px solid var(--contrast); border-radius: 0 10px 10px 0; font-size: 1.02rem; font-style: italic; }
.post blockquote.plain, .card blockquote.plain { border-left-color: var(--border); }
/* 50px of white space where someone's words (grey bar) are followed by Scripture (red bar) */
.post blockquote.plain + blockquote:not(.plain), .card blockquote.plain + blockquote:not(.plain) { margin-top: 50px; }
.post blockquote p, .card blockquote p { margin: 0; }
.post blockquote p + p, .card blockquote p + p { margin-top: 0.8em; }
/* Thinking box: shaped like a quote box but with a grey-green bar and upright text, for a prompt that asks the
   reader to stop and think; its bold title sits on the first line */
.think { margin: 50px 0 1.4em; padding: 12px 16px; background: var(--quote); border-left: 3px solid var(--think); border-radius: 0 10px 10px 0; }
.think > :first-child { margin-top: 0; }
.think > :last-child { margin-bottom: 0; }
.think p { margin: 0; }
.think p + p { margin-top: 0.8em; }
.think p.think-title + p { margin-top: 6px; }
.think-title { font-weight: 700; color: var(--think); }
.card > .think:first-child { margin-top: 0; }
.card > .think:last-child { margin-bottom: 0; }
.post blockquote cite, .card blockquote cite { display: block; margin-top: 6px; font-style: normal; font-size: 0.8rem; color: var(--muted); }
.post .try { margin: 1.6em 0 0; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 10px; background: var(--quote); }
.post .try h3 { margin-top: 0; }
/* Card pages laid out like Complexity of you: wide layout, the title alone on the grey background, then
   white cards 20px apart, lined up with the site name; 30px from the title to the first card */
.page { display: flex; flex-direction: column; gap: 20px; }
/* A group of cards inside .page (e.g. revealed by an expand bar), kept 20px apart */
.stack { display: flex; flex-direction: column; gap: 20px; }
/* The page title stays pinned just under the site header while the cards scroll beneath it. Its box carries
   20px of space above (starting right under the header: the margin takes back main's 30px top padding) and 20px
   below (the margin takes back the 20px gap), so it already sits exactly where it pins and doesn't jump when
   scrolling starts */
.page-head { position: sticky; top: var(--head-h); z-index: 5; background: var(--bg); padding: 20px 0; margin: -30px 0 -20px; }
.page-head h1 { margin: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; min-width: 0; }
.card h2 { margin: 0 0 12px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.red { color: var(--contrast); font-weight: 700; }
/* Inline line-art heart that sits in a line of text (titles, links) in the text's own color */
.heart { width: 0.8em; height: 0.8em; vertical-align: -0.06em; margin: 0 0.06em; }
/* A card's text beside its line art (the Complexity of you style: grey strokes, no fill); stacks on phones */
.art-row { display: flex; align-items: center; gap: 28px; }
.art-row > div { flex: 1; min-width: 0; }
.art-row p { margin: 0 0 0.8em; font-size: 1.1rem; }
.art-row p:last-child { margin-bottom: 0; }
.line-art { flex: none; width: 220px; height: auto; color: var(--text); }
@media (max-width: 560px) { .art-row { flex-direction: column; align-items: flex-start; } .line-art { width: 180px; } }
/* References card: starts collapsed to its title and a blue ↓ inside the card; clicking the title opens the list
   and turns the arrow up (a <details> card, no script) */
.refs-card > summary { list-style: none; cursor: pointer; }
.refs-card > summary::-webkit-details-marker { display: none; }
.refs-card > summary h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.refs-card[open] > summary h2 { margin-bottom: 12px; }
/* The arrow is nudged so its ends line up with the capital letters, closed and open (checked at 3x zoom) */
.refs-card > summary .arrow { display: inline-block; font-size: 0.9em; line-height: 1; -webkit-text-stroke: 0.35px currentColor; transform: translateY(-2px); transition: transform .15s; }
.refs-card:not([open]) > summary:hover .arrow { transform: translateY(1px); }
.refs-card[open] > summary .arrow { transform: translateY(2.5px) rotate(180deg); }
.refs-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* References: one clickable source per line, no footnote numbers */
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.refs a { font-weight: 700; }
.refs span { display: block; color: var(--muted); font-size: 0.85rem; }
/* A refs-style list with bullets (e.g. resources in a card); a name without a link is bold in the link grey */
.refs.bullets { list-style: disc; padding-left: 1.2em; }
.refs.bullets li::marker { color: var(--muted); }
.refs b { color: var(--muted); }
.back { display: inline-block; margin-top: 24px; font-size: 0.9rem; }

.site-foot { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
.site-foot .wrap { padding-top: 16px; padding-bottom: 24px; }
.site-foot .esv { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; }