/* The Rowena Method — shared book design system */
:root {
  --serif: "Hoefler Text", "Baskerville", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ground: #EFE9DB;
  --paper: #FAF6EE;
  --ink: #403B32;
  --ink-strong: #2B2822;
  --muted: #97907F;
  --faint: #B7AF9E;
  --line: #DBD3C2;
  --accent: #AC6249;
  --tint: #EEE8D9;
  --tint-line: #E0D8C6;
  --shadow: 0 1px 2px rgba(60,50,35,.04), 0 24px 48px -32px rgba(60,50,35,.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#17140F; --paper:#211D17; --ink:#DDD5C6; --ink-strong:#EFE8DA;
    --muted:#948C7B; --faint:#6E6656; --line:#37312A; --accent:#C9805F;
    --tint:#26211A; --tint-line:#383127;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 28px 56px -32px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"] {
  --ground:#EFE9DB; --paper:#FAF6EE; --ink:#403B32; --ink-strong:#2B2822;
  --muted:#97907F; --faint:#B7AF9E; --line:#DBD3C2; --accent:#AC6249;
  --tint:#EEE8D9; --tint-line:#E0D8C6;
  --shadow: 0 1px 2px rgba(60,50,35,.04), 0 24px 48px -32px rgba(60,50,35,.28);
}
:root[data-theme="dark"] {
  --ground:#17140F; --paper:#211D17; --ink:#DDD5C6; --ink-strong:#EFE8DA;
  --muted:#948C7B; --faint:#6E6656; --line:#37312A; --accent:#C9805F;
  --tint:#26211A; --tint-line:#383127;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 28px 56px -32px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--ground);
  /* subtle grain — the "uncoated paper" tactility from the brief */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.9;
  font-size: 17px;
}

/* ---- block styles (shared by viewer + admin preview) ---- */
.blocks { display: flex; flex-direction: column; gap: 1.55rem; }

.eyebrow { font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.rule { width:34px; height:1px; background:var(--line); border:0; margin:0; }
.rule.accent { background:var(--accent); opacity:.5; }

.b-prose { display:flex; flex-direction:column; gap:1.4rem; max-width:34em; }
.b-prose p { margin:0; }
.b-prose em, .em { font-family:var(--serif); font-style:italic; color:var(--ink-strong); }

.b-titlepage { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.8rem; padding-block:clamp(2rem,8vh,6rem); }
.b-titlepage .kicker { font-size:.7rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); }
.b-titlepage h1 { font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,8vw,4.4rem); line-height:1.04; color:var(--ink-strong); margin:0; text-wrap:balance; }
.b-titlepage .subtitle { font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,3vw,1.6rem); color:var(--accent); }
.b-titlepage .tagline { color:var(--muted); max-width:24em; }
.b-titlepage .author { font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink); }

.b-chapter { display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.5rem; }
.b-chapter .n { font-family:var(--serif); font-size:2.4rem; color:var(--faint); line-height:1; }
.b-chapter .part-tag { font-size:.66rem; letter-spacing:.36em; text-transform:uppercase; color:var(--muted); }
.b-chapter h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,4.5vw,2.6rem); color:var(--ink-strong); margin:0; letter-spacing:.01em; text-wrap:balance; }

.b-subhead { font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,3.4vw,1.9rem); color:var(--ink-strong); margin:1.2rem 0 -.4rem; letter-spacing:.01em; text-wrap:balance; }

.b-lead { font-family:var(--serif); font-style:italic; font-size:1.28rem; line-height:1.6; color:var(--ink-strong); max-width:26em; }

.b-quote { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding-block:clamp(2rem,10vh,5rem); }
.b-quote blockquote { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,5.4vw,3.1rem); line-height:1.3; color:var(--ink-strong); max-width:16em; text-wrap:balance; }
.b-quote blockquote span { display:block; }
.b-quote blockquote span + span { color:var(--muted); margin-top:.5rem; }

.b-reflection { display:flex; flex-direction:column; gap:1.1rem; max-width:34em; padding:clamp(1.5rem,4vw,2.5rem) 0; }
.b-reflection .k { font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.b-reflection p { margin:0; }
.b-reflection .questions { display:flex; flex-direction:column; gap:.7rem; margin:.4rem 0 0; padding:0; list-style:none; }
.b-reflection .questions li { font-family:var(--serif); font-style:italic; color:var(--ink-strong); padding-left:1rem; border-left:2px solid var(--tint-line); }

.b-list { display:flex; flex-direction:column; gap:.6rem; max-width:34em; }
.b-list .intro { color:var(--muted); }
.b-list ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.b-list li { position:relative; padding-left:1.3rem; }
.b-list li::before { content:""; position:absolute; left:0; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6; }

.b-divider { display:flex; justify-content:center; padding:.5rem 0; }
.b-divider::before { content:"⸻"; color:var(--faint); letter-spacing:.3em; }

.b-image { display:flex; flex-direction:column; gap:1rem; }
.photo { position:relative; overflow:hidden; border-radius:6px; box-shadow:var(--shadow); background:var(--tint); }
.photo img { display:block; width:100%; height:100%; object-fit:cover; }
.b-image.plate .photo { aspect-ratio:16/9; }
.b-image.figure .photo { aspect-ratio:3/2; }
/* clearly-marked empty placeholder so it's obvious where images go */
.photo.empty { box-shadow:none; border:1.5px dashed var(--tint-line); background:var(--tint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  text-align:center; padding:1rem; color:var(--muted); }
.photo.empty .ph-icon { color:var(--faint); }
.photo.empty .ph-label { font-size:.82rem; letter-spacing:.02em; color:var(--muted); max-width:24em; }
.photo.empty .ph-hint { font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.b-image figcaption { color:var(--muted); font-size:.9rem; }
.b-image figcaption strong { color:var(--ink); }

.b-part { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.3rem; padding-block:clamp(2rem,10vh,5rem); }
.b-part .label { font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); }
.b-part h2 { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,6vw,3.2rem); color:var(--ink-strong); margin:0; text-wrap:balance; }
.b-part p { color:var(--muted); font-family:var(--serif); font-style:italic; font-size:1.15rem; max-width:26em; margin:0; }

/* exercise / body check-in */
.b-exercise { background:var(--tint); border:1px solid var(--tint-line); border-radius:14px; padding:clamp(1.75rem,4vw,2.75rem); display:flex; flex-direction:column; gap:1.5rem; }
.b-exercise .x-top { display:flex; align-items:center; gap:.85rem; }
.b-exercise .x-label { font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.b-exercise h3 { font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--ink-strong); margin:.1rem 0 0; }
.b-exercise .move-grid { display:grid; grid-template-columns:minmax(0,.82fr) 1fr; gap:clamp(1.5rem,4vw,2.5rem); align-items:start; }
.b-exercise .move-main { aspect-ratio:4/5; }
.b-exercise .thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.8rem; }
.b-exercise .thumb .sq { aspect-ratio:1/1; }
.b-exercise .thumb .lbl { font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.4rem; }
.b-exercise .x-meta { display:flex; flex-wrap:wrap; gap:1rem 2.5rem; border-block:1px solid var(--tint-line); padding-block:1.1rem; }
.b-exercise .x-meta .k { font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:block; }
.b-exercise .steps { display:flex; flex-direction:column; gap:1rem; }
.b-exercise .steps .step { display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; align-items:baseline; }
.b-exercise .steps .step i { font-style:normal; font-family:var(--serif); color:var(--accent); }
@media (max-width:620px){ .b-exercise .move-grid{ grid-template-columns:1fr; } .b-exercise .move-main{ aspect-ratio:3/2; } }
/* images-only movement component (no steps/meta) */
.b-exercise .move-solo .move-main { aspect-ratio:3/2; }
.b-exercise .move-solo .thumbs { grid-template-columns:repeat(3,1fr); margin-top:.7rem; }
@media (min-width:720px){ .b-exercise .move-solo .thumbs { grid-template-columns:repeat(4,1fr); } }

/* blank page (honours the manuscript's "turn the page — a blank page" beat) */
.b-blank { min-height:55vh; }

/* socials (shared: landing footer + book end + admin) */
.socials { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; }
.social { display:inline-flex; align-items:center; gap:.45rem; color:var(--muted); text-decoration:none; transition:color .2s ease; }
.social:hover { color:var(--accent); }
.social svg { width:22px; height:22px; display:block; }
.social .s-handle { font-size:.9rem; letter-spacing:.01em; }

/* book "stay connected" end section */
.b-connect { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.4rem; padding-block:clamp(2rem,8vh,4rem); }
.b-connect .eyebrow { font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.b-connect h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4.5vw,2.4rem); color:var(--ink-strong); margin:0; }
.b-connect p { color:var(--muted); max-width:26em; margin:0; }
.b-connect .socials { flex-direction:column; gap:.7rem; }
.b-connect .social .s-handle { font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.b-connect .social:hover .s-handle { color:var(--accent); }

/* gratitude bits */
.b-category { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; padding:clamp(2rem,6vw,4rem) 0 clamp(1rem,3vw,2rem); border-bottom:1px solid var(--line); }
.b-category h2 { font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4.5vw,2.5rem); color:var(--ink-strong); margin:0; }
.b-category p { font-family:var(--serif); font-style:italic; color:var(--muted); max-width:28em; margin:0; }
.b-tribute { display:flex; flex-direction:column; gap:1.1rem; max-width:34em; padding-block:clamp(1.5rem,4vw,2.5rem); }
.b-tribute .kicker { font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); }
.b-tribute h3 { font-family:var(--serif); font-weight:400; font-size:clamp(1.45rem,3.4vw,1.95rem); color:var(--ink-strong); margin:0; }
.b-tribute p { margin:0; }
.b-signature { display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; padding-block:clamp(2rem,8vh,4rem); }
.b-signature .with { color:var(--muted); }
.b-signature .name { font-family:var(--serif); font-size:1.7rem; color:var(--ink-strong); }

/* ============================================================= reader themes
   Named palettes for the reading experience (set on <html data-reader-theme>).
   These fully define the tokens, so they win over OS light/dark on the reader. */
html[data-reader-theme="ivory"] {
  --ground:#EFE9DB; --paper:#FAF6EE; --ink:#403B32; --ink-strong:#2B2822; --muted:#97907F; --faint:#B7AF9E;
  --line:#DBD3C2; --accent:#AC6249; --tint:#EEE8D9; --tint-line:#E0D8C6;
  --shadow:0 1px 2px rgba(60,50,35,.04), 0 24px 48px -32px rgba(60,50,35,.28);
}
html[data-reader-theme="sepia"] {
  --ground:#E7DCC4; --paper:#F6EEDB; --ink:#4A4030; --ink-strong:#33291B; --muted:#8C7E64; --faint:#B3A488;
  --line:#D9CBAE; --accent:#A25A36; --tint:#EFE6CE; --tint-line:#DED0B3;
  --shadow:0 1px 2px rgba(70,55,30,.05), 0 24px 48px -32px rgba(70,55,30,.3);
}
html[data-reader-theme="linen"] {
  --ground:#E9E7E0; --paper:#F7F6F2; --ink:#3C3A34; --ink-strong:#25241E; --muted:#8A897E; --faint:#B4B2A7;
  --line:#DAD7CE; --accent:#8A6F52; --tint:#EDEBE3; --tint-line:#DDDAD0;
  --shadow:0 1px 2px rgba(50,48,40,.05), 0 24px 48px -32px rgba(50,48,40,.26);
}
html[data-reader-theme="candlelight"] {
  --ground:#17140F; --paper:#211D17; --ink:#DDD5C6; --ink-strong:#EFE8DA; --muted:#948C7B; --faint:#6E6656;
  --line:#37312A; --accent:#C9805F; --tint:#26211A; --tint-line:#383127;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 28px 56px -32px rgba(0,0,0,.6);
}
html[data-reader-theme="ink"] {
  --ground:#14161A; --paper:#1C1F24; --ink:#CDD2D6; --ink-strong:#E9EDF0; --muted:#8A9099; --faint:#5B626B;
  --line:#2C3138; --accent:#C58C6A; --tint:#20242A; --tint-line:#333941;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 28px 56px -32px rgba(0,0,0,.7);
}

/* ============================================================= reading style */
html { --reader-scale:1; }
html[data-reader-size="s"] { --reader-scale:.92; }
html[data-reader-size="l"] { --reader-scale:1.14; }

/* flowing: sentences grouped into paragraphs (done in JS), novel-like spacing + indents */
html[data-reader-style="flowing"] .b-prose { gap:0; }
html[data-reader-style="flowing"] .b-prose p { line-height:1.78; text-indent:1.4em; }
html[data-reader-style="flowing"] .b-prose p:first-child { text-indent:0; }
html[data-reader-style="flowing"] .b-tribute p + p { text-indent:1.4em; }

/* spacious: one sentence per line, generous air (the original meditative rhythm) */
html[data-reader-style="spacious"] .b-prose { gap:1.45rem; }
html[data-reader-style="spacious"] .b-prose p { text-indent:0; line-height:1.9; }
