/* ============ Healthy Happy Hair — reader styles ============ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-ui: 'Jost', system-ui, -apple-system, sans-serif;
  --accent-base: #4E6B54;
  --reading-size: 19px;
  --measure: 39rem;
  --topbar-h: 60px;
}

/* themes */
[data-theme="day"] {
  --paper:#F2EBDD; --page:#FCF9F1; --ink:#2B2620; --ink-2:#5F564B; --ink-3:#988E7C;
  --line:#E4DBC9; --line-2:#EFE8D9; --callout:#EFE7D5; --card:#FBF6EB;
  --shadow: 28px 28px 60px rgba(70,52,28,.10);
  --accent: var(--accent-base);
}
[data-theme="sepia"] {
  --paper:#E9DEC8; --page:#F5ECD8; --ink:#3A3122; --ink-2:#6B5D45; --ink-3:#9E8C6C;
  --line:#DBCDAF; --line-2:#E6DAC0; --callout:#EADDC0; --card:#F2E8D1;
  --shadow: 28px 28px 60px rgba(90,66,25,.13);
  --accent: color-mix(in srgb, var(--accent-base) 92%, #3a2f12);
}
[data-theme="night"] {
  --paper:#14120E; --page:#1C1914; --ink:#E9E0D0; --ink-2:#ADA391; --ink-3:#7A7262;
  --line:#2D2920; --line-2:#252118; --callout:#221E17; --card:#211D16;
  --shadow: 28px 28px 70px rgba(0,0,0,.5);
  --accent: color-mix(in srgb, var(--accent-base) 58%, #ffffff);
}
--accent-soft { }

html, body { margin:0; padding:0; height:100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* ---------- app shell ---------- */
.app { height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); }

.progress-top { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:transparent; }
.progress-top > i { display:block; height:100%; background:var(--accent); width:0%; transition:width .25s ease; }

.topbar {
  height:var(--topbar-h); flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:0 clamp(14px,3vw,30px); border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:blur(10px);
  position:relative; z-index:40;
}
.tb-title { font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.tb-title b { color:var(--accent); font-weight:600; }
.tb-title .wm-heal { color:#5d7a5c; }
.tb-title .wm-thy { color:#db6640; }
.tb-title .wm-happy { color:#f2951e; }
.tb-title .wm-hair { color:#a53a3b; }
.tb-center { flex:1; text-align:center; overflow:hidden; }
.tb-chapter { font-family:var(--font-ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-actions { display:flex; align-items:center; gap:4px; }

.iconbtn {
  width:40px; height:40px; border:none; background:transparent; color:var(--ink-2); border-radius:11px;
  display:grid; place-items:center; transition:background .18s, color .18s;
}
.iconbtn:hover { background:var(--line-2); color:var(--ink); }
.iconbtn.on { color:var(--accent); }
.iconbtn svg { width:21px; height:21px; }

/* ---------- scene / reader ---------- */
.scene { flex:1; position:relative; overflow:hidden; }
.reader { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.reader::-webkit-scrollbar { width:11px; }
.reader::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--ink-3) 45%, transparent); border-radius:20px; border:3px solid var(--paper); }

.page-wrap { min-height:100%; display:flex; justify-content:center; padding:0 clamp(18px,5vw,40px); }
.page { width:100%; max-width:var(--measure); padding:clamp(40px,7vw,84px) 0 200px; }

/* ---------- prose ---------- */
.prose { font-size:var(--reading-size); line-height:1.75; color:var(--ink); }
.prose p { margin:0 0 1.15em; text-wrap:pretty; }
.prose p.lead {
  font-size:1.18em; line-height:1.6; color:var(--ink-2); font-weight:300;
  border-left:2px solid var(--accent); padding-left:1.1em; margin-bottom:1.6em;
}
.prose .drop::first-letter {
  font-family:var(--font-display); font-weight:600; float:left; font-size:4.1em; line-height:.78;
  padding:.06em .12em 0 0; color:var(--accent);
}
body.no-dropcaps .prose .drop::first-letter { font-family:inherit; font-weight:inherit; float:none; font-size:inherit; line-height:inherit; padding:0; color:inherit; }
.prose h2.sec {
  font-family:var(--font-display); font-weight:600; font-size:2.05em; line-height:1.12; letter-spacing:.005em;
  margin:2.4em 0 .2em; color:var(--ink);
}
.prose h3.sub {
  font-family:var(--font-ui); font-weight:600; font-size:.95em; letter-spacing:.13em; text-transform:uppercase;
  margin:1.9em 0 .55em; color:var(--accent); display:flex; align-items:center; gap:.7em;
}
.prose h3.sub::after { content:""; flex:1; height:1px; background:var(--line); }
.prose h4.tag {
  font-family:var(--font-ui); font-weight:600; font-size:.74em; letter-spacing:.13em; text-transform:uppercase;
  margin:1.9em 0 .55em; color:var(--accent); display:flex; align-items:center; gap:.7em;
}
.prose h4.tag::after { content:""; flex:1; height:1px; background:var(--line); }
.prose .range-label { font-family:var(--font-ui); font-weight:600; font-size:.78em; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:1.1em 0 .2em; }
.prose b.lede { font-weight:600; color:var(--ink); }

/* section ornament */
.ornament { display:flex; align-items:center; justify-content:center; gap:16px; margin:2.6em 0; color:var(--accent); }
.ornament i { height:1px; width:64px; background:linear-gradient(90deg,transparent,var(--line)); }
.ornament i:last-child { background:linear-gradient(270deg,transparent,var(--line)); }
.ornament svg { width:26px; height:26px; opacity:.85; }

/* lists */
.prose ul.bul { list-style:none; margin:1.1em 0 1.5em; padding:0; }
.prose ul.bul li { position:relative; padding-left:1.7em; margin:.62em 0; }
.prose ul.bul li::before {
  content:""; position:absolute; left:.15em; top:.62em; width:7px; height:7px; transform:rotate(45deg);
  border:1.4px solid var(--accent); background:transparent;
}
.prose ul.bul li b { font-weight:600; color:var(--ink); }

/* callouts */
.callout {
  position:relative; margin:1.9em 0; padding:1.35em 1.5em 1.4em; border-radius:4px;
  background:var(--callout); border:1px solid var(--line);
}
.callout::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-radius:4px 0 0 4px; }
.callout .clabel {
  font-family:var(--font-ui); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:.55em; margin-bottom:.5em;
}
.callout .clabel svg { width:15px; height:15px; }
.callout p { margin:0; font-size:.98em; line-height:1.66; color:var(--ink-2); }
.callout.tip { --c-ico:1; }

/* figure placeholder */
.figure {
  margin:2.2em 0; border:1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius:6px; background:var(--card); padding:2.4em 1.5em; text-align:center; color:var(--ink-3);
}
.figure svg { width:64px; height:64px; color:var(--accent); opacity:.7; margin-bottom:.7em; }
.figure .fcap { font-family:var(--font-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.figure .fnote { font-size:.86rem; font-style:italic; margin-top:.3em; color:var(--ink-3); }

/* figure with a real illustration */
.figure--img { border:none; background:transparent; padding:0; margin:2.6em 0; }
.figure-plate {
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  display:flex; justify-content:center;
}
.figure-plate img { display:block; width:100%; max-width:680px; height:auto; mix-blend-mode:multiply; }
.figure--wide { width:max-content; max-width:min(1400px, 96vw); margin-left:50%; transform:translateX(-50%); }
.figure--wide .figure-plate img { max-width:none !important; width:auto; }
.figure--img .fcap { margin-top:1.05em; font-size:.74rem; color:var(--ink-2); }
[data-theme="night"] .figure-plate { background:#F4EEE2; border-color:rgba(0,0,0,.12); }

/* ---------- chapter opener ---------- */
.opener { margin-bottom:2.6em; }
.opener .eyebrow { font-family:var(--font-ui); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:1.1em; display:flex; align-items:center; gap:.8em; }
.opener .eyebrow .dot { width:4px; height:4px; border-radius:50%; background:var(--ink-3); }
.opener .chno { font-family:var(--font-display); font-size:clamp(58px,12vw,104px); line-height:.8; font-weight:300; color:color-mix(in srgb, var(--accent) 32%, transparent); margin-bottom:.05em; }
.opener h1 {
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.04;
  letter-spacing:.004em; margin:.1em 0 .4em; color:var(--ink); text-wrap:balance;
}
.opener .sub { font-family:var(--font-body); font-style:italic; font-weight:300; font-size:1.28rem; line-height:1.4; color:var(--ink-2); max-width:30em; }
.opener .rule { height:1px; width:90px; background:var(--accent); margin-top:1.7em; }

/* ---------- cover ---------- */
.cover { min-height:100%; display:flex; align-items:center; justify-content:center; padding:40px 22px; }
.cover-card {
  width:100%; max-width:470px; text-align:left; position:relative;
  padding:clamp(38px,5vw,56px) clamp(32px,5vw,52px) clamp(32px,4vw,44px);
  border:1px solid var(--line); border-radius:4px; background:var(--page); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:min(80vh,700px);
}
.cover-kick { font-family:var(--font-ui); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-3); }
.cover-wm {
  font-family:'Spectral', Georgia, serif; font-weight:600; line-height:.97; letter-spacing:.004em;
  font-size:clamp(3.3rem,15vw,5.4rem); margin:.5em 0 0;
}
.cover-wm .l1, .cover-wm .l2 { display:block; white-space:nowrap; }
.cover-wm .wm-heal { color:#5d7a5c; }
.cover-wm .wm-thy { color:#db6640; }
.cover-wm .wm-happy { color:#f2951e; }
.cover-wm .wm-hair { color:#a53a3b; }
.cover-tag { font-family:var(--font-ui); font-weight:400; font-size:1.05rem; line-height:1.5; color:var(--ink-2); margin:1.15em 0 0; max-width:20em; }
.cover-foot { margin-top:auto; padding-top:2.2em; display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; }
.cover-author { font-family:'Spectral', Georgia, serif; font-size:1.4rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.btn-begin {
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  background:var(--accent); color:var(--page); border:none; padding:15px 32px; border-radius:40px; transition:transform .2s, box-shadow .2s;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}
.btn-begin:hover { transform:translateY(-2px); box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn-backsite {
  display:inline-block; margin-top:1.7em; font-family:var(--font-ui); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none; transition:color .2s; align-self:flex-start;
}
.btn-backsite:hover { color:var(--accent); }

/* ---------- part divider ---------- */
.partview { min-height:100%; display:flex; align-items:center; justify-content:center; padding:60px 26px; }
.partview .inner { max-width:620px; width:100%; text-align:center; }
.partview .plabel { font-family:var(--font-ui); font-size:.8rem; letter-spacing:.4em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4em; }
.partview .pnum { font-family:var(--font-display); font-style:italic; font-size:clamp(70px,16vw,150px); line-height:.85; font-weight:300; color:color-mix(in srgb, var(--accent) 26%, transparent); }
.partview h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,7vw,4rem); line-height:1.04; margin:.1em 0 0; text-wrap:balance; }
.partview .motif { color:var(--accent); margin:1.6em auto; width:46px; }
.partview .chips { display:flex; flex-direction:column; gap:2px; max-width:420px; margin:1.4em auto 0; }
.partview .chip { display:flex; align-items:baseline; gap:14px; padding:13px 6px; border-top:1px solid var(--line); text-align:left; color:var(--ink-2); transition:color .15s; background:none; border-left:0; border-right:0; border-bottom:0; width:100%; }
.partview .chip:last-child { border-bottom:1px solid var(--line); }
.partview .chip:hover { color:var(--accent); }
.partview .chip .cn { font-family:var(--font-ui); font-size:.7rem; letter-spacing:.14em; color:var(--ink-3); width:42px; flex:0 0 auto; }
.partview .chip .ct { font-family:var(--font-display); font-size:1.18rem; font-weight:500; line-height:1.15; }

/* ---------- colophon ---------- */
.colo { max-width:34rem; margin:0 auto; padding:clamp(40px,8vw,90px) 0 160px; }
.colo h2 { font-family:var(--font-display); font-size:2rem; font-weight:600; margin:0 0 .2em; }
.colo .ck { font-family:var(--font-ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4em; }
.colo p { font-size:.96rem; line-height:1.7; color:var(--ink-2); margin:0 0 1em; }
.colo p.tight { color:var(--ink-3); font-size:.86rem; }
.colo hr { border:0; border-top:1px solid var(--line); margin:2em 0; }

/* ---------- bottom nav ---------- */
.botnav {
  position:absolute; bottom:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,4vw,36px); gap:10px; pointer-events:none; z-index:30;
}
.botnav .nav-btn {
  pointer-events:auto; display:flex; align-items:center; gap:9px; background:color-mix(in srgb, var(--page) 92%, transparent);
  border:1px solid var(--line); color:var(--ink-2); padding:11px 17px; border-radius:40px; font-family:var(--font-ui);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(8px); box-shadow:0 6px 20px var(--shadow); transition:all .18s; max-width:46%; overflow:hidden;
}
.botnav .nav-btn:hover { color:var(--ink); border-color:var(--accent); }
.botnav .nav-btn:disabled { opacity:0; pointer-events:none; }
.botnav .nav-btn .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.botnav .nav-btn svg { width:17px; height:17px; flex:0 0 auto; }
.botnav .pill { pointer-events:auto; font-family:var(--font-ui); font-size:.68rem; letter-spacing:.12em; color:var(--ink-3); background:color-mix(in srgb,var(--page) 80%, transparent); padding:7px 14px; border-radius:30px; backdrop-filter:blur(8px); white-space:nowrap; }

/* ---------- TOC drawer ---------- */
.scrim { position:fixed; inset:0; background:rgba(20,14,6,.34); backdrop-filter:blur(2px); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.show { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; left:0; bottom:0; width:min(380px,86vw); background:var(--page); z-index:80; border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .34s cubic-bezier(.4,0,.1,1); display:flex; flex-direction:column; box-shadow:30px 0 60px rgba(20,14,6,.16);
}
.drawer.show { transform:translateX(0); }
.drawer-head { padding:22px 24px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-head .dt { font-family:var(--font-display); font-size:1.5rem; font-weight:600; }
.drawer-head .dt span { display:block; font-family:var(--font-ui); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
.drawer-body { flex:1; overflow-y:auto; padding:8px 0 30px; }
.toc-item { display:flex; align-items:baseline; gap:13px; width:100%; text-align:left; background:none; border:0; padding:11px 24px; color:var(--ink-2); transition:background .14s, color .14s; position:relative; }
.toc-item:hover { background:var(--line-2); color:var(--ink); }
.toc-item.active { color:var(--accent); }
.toc-item.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--accent); border-radius:3px; }
.toc-item .tn { font-family:var(--font-ui); font-size:.68rem; letter-spacing:.1em; color:var(--ink-3); width:30px; flex:0 0 auto; padding-top:2px; }
.toc-item.active .tn { color:var(--accent); }
.toc-item .tt { font-family:var(--font-display); font-size:1.08rem; font-weight:500; line-height:1.18; }
.toc-item .bm { margin-left:auto; color:var(--accent); width:14px; height:14px; flex:0 0 auto; align-self:center; }
.toc-part { font-family:var(--font-ui); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding:20px 24px 7px; display:flex; align-items:center; gap:10px; }
.toc-part i { height:1px; flex:1; background:var(--line); }
.toc-special .tt { font-style:italic; }

/* ---------- settings popover ---------- */
.pop { position:absolute; top:calc(var(--topbar-h) - 6px); right:clamp(8px,2vw,22px); width:296px; background:var(--page); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(20,14,6,.22); z-index:50; padding:18px; transform-origin:top right; }
.pop h4 { font-family:var(--font-ui); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 11px; }
.pop .seg { display:flex; gap:7px; margin-bottom:18px; }
.pop .seg button { flex:1; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:10px; padding:11px 6px; font-family:var(--font-ui); font-size:.72rem; letter-spacing:.04em; display:flex; flex-direction:column; align-items:center; gap:6px; transition:all .16s; }
.pop .seg button.on { border-color:var(--accent); color:var(--ink); background:var(--callout); }
.pop .seg button .sw { width:20px; height:20px; border-radius:50%; border:1px solid var(--line); }
.pop .size-row { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.pop .size-row button { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:var(--font-display); transition:all .16s; }
.pop .size-row button:hover { border-color:var(--accent); }
.pop .size-row .sval { flex:1; text-align:center; font-family:var(--font-ui); font-size:.78rem; color:var(--ink-2); }
.pop .size-row .s1 { font-size:15px; } .pop .size-row .s2 { font-size:24px; }
.pop .widerow { display:flex; gap:7px; margin-top:4px; }
.pop .widerow button { flex:1; border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:10px; padding:9px; font-family:var(--font-ui); font-size:.7rem; transition:all .16s; }
.pop .widerow button.on { border-color:var(--accent); color:var(--ink); background:var(--callout); }

/* fade-in for view switches */
.fade-enter { animation:fadeUp .5s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (max-width:600px) {
  .tb-title { font-size:18px; }
  .botnav .nav-btn .lbl { display:none; }
  .botnav .nav-btn { padding:11px 14px; }
  .prose { line-height:1.7; }
}