/* The Bible Restored — design system (prototype)
   Palette: parchment, cream, sandstone, charcoal, dark olive, muted bronze, restrained gold.
   Two type families: serif for titles & sacred reading, sans for UI/metadata/AI.
   Three reading themes: light, parchment, dark. WCAG 2.2 AA contrast targets. */

:root {
  /* Core palette */
  --parchment:  #f4ecdd;
  --cream:      #faf6ec;
  --sandstone:  #e7d9bf;
  --charcoal:   #2b2823;
  --ink:        #322d25;
  --olive:      #4f5436;
  --olive-deep: #383c25;
  --bronze:     #8a6d3b;
  --bronze-dim: #a98a52;
  --gold:       #b08642;
  --line:       #d8c7a6;
  --muted:      #6b6253;

  /* Layer accent colours — the 4 layers must read as visibly distinct */
  --layer-teaching: #6b5b95;   /* author teaching  */
  --layer-bible:    #4f5436;   /* restored scripture (olive) */
  --layer-fullword: #8a6d3b;   /* full word of god (bronze)  */
  --layer-archive:  #7a5236;   /* wider archive (burnt sienna) */

  /* Semantic tokens (default = light reading theme) */
  --bg:        var(--cream);
  --bg-raised: #ffffff;
  --bg-sunken: #f0e9d9;
  --text:      var(--ink);
  --text-dim:  var(--muted);
  --border:    var(--line);
  --accent:    var(--bronze);
  --accent-strong: var(--gold);

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --reading-size: 1.2rem;
  --reading-leading: 1.85;
  --reading-width: 38rem;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(43,40,35,.06), 0 8px 24px rgba(43,40,35,.06);
}

/* Reading themes ---------------------------------------------------------- */
[data-theme="parchment"] {
  --bg: var(--parchment); --bg-raised:#fbf4e6; --bg-sunken:#ece0c8;
  --text:#352f25; --text-dim:#6a5f49; --border:#d6c4a1;
}
[data-theme="dark"] {
  --bg:#1d1b17; --bg-raised:#262320; --bg-sunken:#161310;
  --text:#ece3d2; --text-dim:#a59c89; --border:#3a3530;
  --accent:#c79a57; --accent-strong:#d9b06a;
  --layer-teaching:#a99bd0; --layer-bible:#9aa06f; --layer-fullword:#c79a57; --layer-archive:#c08a5f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); line-height: 1.55;
  font-size: 16px;
  transition: background .25s ease, color .25s ease;
}
[data-dyslexia="on"] body { font-family: "Comic Sans MS", "Atkinson Hyperlegible", var(--font-sans); letter-spacing:.02em; }

h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; color: var(--text); }
a { color: var(--bronze); text-underline-offset: 2px; }
[data-theme="dark"] a { color: var(--accent-strong); }
a:hover { color: var(--accent-strong); }

/* Accessibility utilities */
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius) 0; }
.skip-link:focus { left:0; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior:auto !important; } }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* Header / nav ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header .row { display:flex; align-items:center; gap:1rem; height:64px; }
.brand { font-family: var(--font-serif); font-size: 1.35rem; font-weight:600; letter-spacing:.01em; text-decoration:none; color:var(--text); white-space:nowrap; }
.brand .mark { color: var(--accent); }
.mainnav { display:flex; gap:.25rem; margin-left:.5rem; flex-wrap:wrap; }
.mainnav a { font-size:.95rem; text-decoration:none; color:var(--text); padding:.45rem .7rem; border-radius:8px; }
.mainnav a:hover, .mainnav a[aria-current] { background: var(--bg-sunken); color:var(--text); }
.header-tools { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
.searchbox { display:flex; align-items:center; gap:.4rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:999px; padding:.4rem .8rem; min-width: 180px; }
.searchbox input { border:0; background:transparent; color:var(--text); width:100%; font-size:.9rem; outline:none; }
.btn { font-family:var(--font-sans); font-size:.95rem; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); padding:.55rem .95rem; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--olive); color:#fbf6ea; border-color: var(--olive-deep); }
.btn-primary:hover { background: var(--olive-deep); color:#fff; }
.btn-gold { background: var(--gold); color:#241b08; border-color:#9a722f; }

/* Layer chips ------------------------------------------------------------- */
.chip { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; border:1px solid var(--border); color:var(--text-dim); background:var(--bg-raised); }
.chip .dot { width:.55rem;height:.55rem;border-radius:50%; }
.chip-teaching .dot{background:var(--layer-teaching)} .chip-teaching{border-color:color-mix(in srgb,var(--layer-teaching) 45%,var(--border))}
.chip-bible .dot{background:var(--layer-bible)} .chip-bible{border-color:color-mix(in srgb,var(--layer-bible) 45%,var(--border))}
.chip-fullword .dot{background:var(--layer-fullword)} .chip-fullword{border-color:color-mix(in srgb,var(--layer-fullword) 45%,var(--border))}
.chip-archive .dot{background:var(--layer-archive)} .chip-archive{border-color:color-mix(in srgb,var(--layer-archive) 45%,var(--border))}

/* Hero -------------------------------------------------------------------- */
.hero { padding: 4.5rem 0 3rem; text-align:center; border-bottom:1px solid var(--border);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--sandstone) 55%, transparent), transparent 60%); }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin:.2rem 0 .6rem; letter-spacing:.005em; }
.hero .lede { font-family:var(--font-serif); font-size: clamp(1.05rem,2.2vw,1.4rem); color:var(--text-dim); max-width:42rem; margin:0 auto 1.6rem; line-height:1.5; }
.hero .cta { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.eyebrow { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--accent); font-weight:600; }

/* Generic sections */
section.band { padding: 3.25rem 0; border-bottom:1px solid var(--border); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.section-head h2 { font-size: clamp(1.5rem,3vw,2rem); margin:0; }
.section-head .more { font-size:.9rem; }
.muted { color: var(--text-dim); }
.lead { font-family:var(--font-serif); font-size:1.15rem; color:var(--text-dim); }

/* Four-layer cards -------------------------------------------------------- */
.grid { display:grid; gap:1rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 620px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr} .mainnav{display:none} }

.layer-card { display:block; text-decoration:none; color:var(--text); background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.2rem; box-shadow:var(--shadow); border-top:4px solid var(--c, var(--accent)); transition: transform .15s ease, border-color .15s; }
.layer-card:hover { transform: translateY(-3px); }
.layer-card .num { font-family:var(--font-serif); font-size:.85rem; color:var(--text-dim); }
.layer-card h3 { margin:.35rem 0 .5rem; font-size:1.3rem; }
.layer-card p { margin:0; font-size:.95rem; color:var(--text-dim); line-height:1.5; }
.lc-teaching{--c:var(--layer-teaching)} .lc-bible{--c:var(--layer-bible)} .lc-fullword{--c:var(--layer-fullword)} .lc-archive{--c:var(--layer-archive)}

/* Ask the Library entry --------------------------------------------------- */
.ask { background: var(--bg-sunken); border:1px solid var(--border); border-radius:16px; padding:1.6rem; }
.ask form { display:flex; gap:.6rem; margin:.4rem 0 1rem; }
.ask input[type=text]{ flex:1; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text); font-size:1rem; }
.prompts { display:flex; gap:.5rem; flex-wrap:wrap; }
.prompt { font-size:.85rem; background:var(--bg-raised); border:1px solid var(--border); border-radius:999px; padding:.45rem .8rem; cursor:pointer; color:var(--text); }
.prompt:hover{ border-color:var(--accent); }

/* Generic list cards */
.card { background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow); }
.card h3 { margin:.2rem 0 .5rem; }
.meta { font-family:var(--font-sans); font-size:.8rem; color:var(--text-dim); display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* Footer */
.site-footer { padding:2.5rem 0 3rem; color:var(--text-dim); font-size:.9rem; }
.site-footer .cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:760px){ .site-footer .cols{grid-template-columns:1fr 1fr} }
.site-footer a{ color:var(--text-dim); text-decoration:none; display:block; padding:.2rem 0; }
.site-footer a:hover{ color:var(--accent); }
.site-footer h4{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--text); margin:0 0 .5rem; }

/* ---- Reader layout ------------------------------------------------------ */
.reader-shell { display:grid; grid-template-columns: 280px 1fr; gap:0; min-height: calc(100vh - 64px); }
@media(max-width: 900px){ .reader-shell{ grid-template-columns:1fr; } .reader-aside{ display:none; } }
.reader-aside { border-right:1px solid var(--border); background:var(--bg-sunken); padding:1.2rem; position:sticky; top:64px; height:calc(100vh - 64px); overflow:auto; }
.reader-aside h2 { font-size:1rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); }
.book-list a{ display:block; padding:.4rem .5rem; border-radius:8px; text-decoration:none; color:var(--text); font-size:.95rem; }
.book-list a:hover, .book-list a[aria-current]{ background:var(--bg-raised); }

.reader-main { padding: 1.2rem 1.25rem 5rem; }
.reader-toolbar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.5rem 0 1rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; position:sticky; top:64px; background:color-mix(in srgb,var(--bg) 90%, transparent); backdrop-filter: blur(6px); z-index:5; }
.reader-toolbar .spacer{ flex:1; }
.iconbtn{ border:1px solid var(--border); background:var(--bg-raised); color:var(--text); border-radius:8px; padding:.45rem .7rem; cursor:pointer; font-size:.85rem; }
.iconbtn:hover{ border-color:var(--accent); }
.seg{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg button{ border:0; background:var(--bg-raised); color:var(--text); padding:.45rem .6rem; cursor:pointer; font-size:.85rem; border-right:1px solid var(--border); }
.seg button:last-child{ border-right:0; }
.seg button[aria-pressed=true]{ background:var(--olive); color:#fbf6ea; }

.reading { max-width: var(--reading-width); margin: 0 auto; }
.reading .crumbs{ font-family:var(--font-sans); font-size:.8rem; color:var(--text-dim); margin-bottom:.4rem; }
.reading h1.title { font-size: clamp(1.8rem,4vw,2.6rem); margin:.1rem 0 .2rem; }
.reading .chapter-no{ font-family:var(--font-serif); color:var(--accent); font-size:1.1rem; }
.scripture { font-family: var(--font-serif); font-size: var(--reading-size); line-height: var(--reading-leading); color:var(--text); }
.scripture p { margin: 0 0 1.1rem; }
.scripture .vno { font-family:var(--font-sans); font-size:.7rem; color:var(--accent); vertical-align: super; margin-right:.35rem; user-select:none; font-weight:600; }
.scripture .pnum { font-family:var(--font-sans); font-size:.72rem; color:var(--text-dim); vertical-align: super; margin-right:.35rem; }

/* placeholder + restoration markers */
.placeholder-note { font-family:var(--font-sans); font-size:.85rem; background:var(--bg-sunken); border:1px dashed var(--accent); border-radius:10px; padding:.7rem .9rem; color:var(--text-dim); margin-bottom:1.4rem; }
.marker { font-family:var(--font-sans); font-size:.82em; color:var(--bronze); background:color-mix(in srgb,var(--bronze) 12%, transparent); border-radius:4px; padding:0 .25em; white-space:nowrap; }
[data-theme="dark"] .marker{ color:var(--accent-strong); }

/* AI-generated text must never look like an ancient quotation */
.ai-text { font-family: var(--font-sans); border-left:3px solid var(--layer-teaching); background:color-mix(in srgb,var(--layer-teaching) 8%, transparent); padding:.6rem .9rem; border-radius:0 8px 8px 0; }

/* Notices ---------------------------------------------------------------- */
.notice { display:flex; gap:.7rem; align-items:flex-start; border-radius:12px; padding:.9rem 1.1rem; font-size:.92rem; line-height:1.5; }
.notice .ico{ font-size:1.1rem; line-height:1; margin-top:.1rem; }
.notice-archive { background:color-mix(in srgb,var(--layer-archive) 12%, var(--bg)); border:1px solid color-mix(in srgb,var(--layer-archive) 40%, var(--border)); color:var(--text); }
.notice-teaching { background:color-mix(in srgb,var(--layer-teaching) 10%, var(--bg)); border:1px solid color-mix(in srgb,var(--layer-teaching) 35%, var(--border)); }
.notice-ritual { background:color-mix(in srgb,#9a3b2f 12%, var(--bg)); border:1px solid color-mix(in srgb,#9a3b2f 40%, var(--border)); }

/* Metadata header for ancient text pages */
.text-header{ border-bottom:1px solid var(--border); padding-bottom:1.2rem; margin-bottom:1.4rem; }
.metagrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem 1.4rem; margin-top:1rem; }
@media(max-width:700px){ .metagrid{grid-template-columns:1fr 1fr} }
.metagrid .k{ font-family:var(--font-sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }
.metagrid .v{ font-family:var(--font-serif); font-size:1rem; }

/* Intro accordion (commentary collapsed by default) */
details.intro{ border:1px solid var(--border); border-radius:10px; padding:.4rem .9rem; margin-bottom:.6rem; background:var(--bg-raised); }
details.intro summary{ cursor:pointer; font-family:var(--font-sans); font-weight:600; padding:.4rem 0; }
details.intro[open] summary{ border-bottom:1px solid var(--border); margin-bottom:.6rem; }

/* Related panel */
.related h3{ font-size:1rem; }
.taglist{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font-size:.82rem; background:var(--bg-sunken); border:1px solid var(--border); border-radius:999px; padding:.3rem .65rem; text-decoration:none; color:var(--text); }
.tag:hover{ border-color:var(--accent); }

.callout-strip{ display:flex; gap:.6rem; flex-wrap:wrap; }
.pill{ font-size:.8rem; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-raised); color:var(--text-dim); }