/*
 * The Rituals of Laamu — static reader
 * Light, unhurried reading theme (warm sand · ink · ocean-gold), cinematic cover.
 */
:root {
  --r-sand-050:#faf6ec; --r-sand-100:#f4ecdb; --r-sand-200:#e8dcc3;
  --r-ink-900:#1c2530; --r-ink-700:#2c3a4d; --r-ink-500:#5a6a7d;
  --r-ocean-900:#081426; --r-ocean-700:#10395c; --r-gold-600:#a8842f; --r-gold-500:#b3924a; --r-aqua:#2f8f86;
  --r-display:'Playfair Display',Georgia,serif;
  --r-serif:'Libre Baskerville',Georgia,serif;
  --r-sans:'Inter',system-ui,sans-serif;
  --r-max:40rem;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--r-sand-100); color:var(--r-ink-700); font-family:var(--r-serif); line-height:1.8; -webkit-font-smoothing:antialiased; }
a { color:var(--r-gold-600); }
img { max-width:100%; display:block; }

/* ---- cover ---- */
#cover {
  min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2rem,7vw,5rem); position:relative; color:#faf6ec; isolation:isolate;
}
#cover::before {
  content:''; position:absolute; inset:0; z-index:-2;
  background:center/cover no-repeat var(--cover-url);
}
#cover::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,13,26,.25) 0%, rgba(5,13,26,.55) 55%, rgba(5,13,26,.9) 100%);
}
#cover .eyebrow { font-family:var(--r-sans); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:#e3cb8f; margin:0 0 1rem; }
#cover h1 { font-family:var(--r-display); font-weight:600; font-size:clamp(2.6rem,8vw,5rem); line-height:1.05; margin:0; color:#fff; }
#cover .sub { font-family:var(--r-serif); font-size:clamp(1rem,2.4vw,1.25rem); color:#e8dcc3; margin:1.2rem 0 2rem; max-width:32ch; }
.cover-actions { display:flex; gap:.8rem; flex-wrap:wrap; }

.btn {
  font-family:var(--r-sans); cursor:pointer; border:1px solid #d4b46a; background:transparent; color:#e3cb8f;
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; padding:.85rem 1.8rem; border-radius:2px;
  transition:.25s; text-decoration:none; display:inline-block;
}
.btn:hover { background:#d4b46a; color:#050d1a; }
.btn.solid { background:#d4b46a; color:#050d1a; } .btn.solid:hover { background:#e3cb8f; }
.btn.small { padding:.5rem 1rem; font-size:.66rem; }

/* ---- reading views ---- */
.view { display:none; }
.view.active { display:block; }
#cover.view.active { display:flex; }

.topbar {
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem); background:rgba(250,246,236,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(44,58,77,.12);
}
.topbar .tb-title { font-family:var(--r-display); font-size:1rem; color:var(--r-ink-900); }
.topbar .tb-right { font-family:var(--r-sans); font-size:.72rem; color:var(--r-ink-500); letter-spacing:.05em; }
.tb-link { font-family:var(--r-sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--r-gold-600); cursor:pointer; background:none; border:none; padding:0; }
.progress { position:fixed; top:0; left:0; height:2px; background:var(--r-gold-500); z-index:20; width:0; transition:width .2s; }

.wrap { max-width:var(--r-max); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) clamp(1.25rem,5vw,2rem) 5rem; }

/* ---- contents ---- */
#contents .lead { font-family:var(--r-sans); color:var(--r-ink-500); font-size:.95rem; margin-bottom:2.4rem; }
.toc-part { font-family:var(--r-sans); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--r-gold-600); margin:2rem 0 .6rem; }
.toc-item { display:flex; gap:1rem; align-items:baseline; padding:.7rem 0; border-bottom:1px solid rgba(44,58,77,.1); cursor:pointer; }
.toc-item:hover .toc-title { color:var(--r-gold-600); }
.toc-num { font-family:var(--r-sans); font-size:.78rem; color:var(--r-ink-500); min-width:1.6rem; }
.toc-title { font-family:var(--r-display); font-size:1.15rem; color:var(--r-ink-900); }
.toc-sub { font-family:var(--r-serif); font-style:italic; font-size:.9rem; color:var(--r-ink-500); }

/* ---- chapter ---- */
.ch-part { font-family:var(--r-sans); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--r-gold-600); margin:0 0 1rem; }
.ch-title { font-family:var(--r-display); font-weight:600; font-size:clamp(2rem,5vw,2.9rem); line-height:1.12; color:var(--r-ink-900); margin:0; }
.ch-sub { font-family:var(--r-serif); font-style:italic; font-size:1.15rem; color:var(--r-ink-500); margin:.8rem 0 0; }
.ch-rule { width:64px; height:1px; background:linear-gradient(90deg,var(--r-gold-500),transparent); border:0; margin:2rem 0 2.4rem; }
.ch-body p { font-size:1.075rem; margin:0 0 1.5rem; }
.ch-body p:first-of-type::first-letter {
  font-family:var(--r-display); font-weight:600; float:left; font-size:3.6rem; line-height:.82; padding:.35rem .6rem 0 0; color:var(--r-gold-600);
}
.ch-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(44,58,77,.14); }
.ch-nav button { text-align:left; }
.ch-nav .nav-btn { background:none; border:none; cursor:pointer; font-family:var(--r-sans); color:var(--r-ink-700); max-width:45%; }
.ch-nav .nav-btn:disabled { opacity:.3; cursor:default; }
.ch-nav .nav-dir { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--r-gold-600); display:block; margin-bottom:.2rem; }
.ch-nav .nav-name { font-family:var(--r-display); font-size:1rem; color:var(--r-ink-900); }
.ch-nav .nav-btn.next { text-align:right; margin-left:auto; }

/* ---- references (bookable experiences) ---- */
#refs .ref-card { border:1px solid rgba(44,58,77,.14); background:var(--r-sand-050); border-radius:3px; padding:1.6rem 1.7rem; margin-bottom:1.4rem; }
#refs .ref-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
#refs .ref-title { font-family:var(--r-display); font-size:1.5rem; color:var(--r-ink-900); margin:0; }
#refs .ref-price { font-family:var(--r-sans); font-weight:600; color:var(--r-gold-600); white-space:nowrap; }
#refs .ref-meta { font-family:var(--r-sans); font-size:.82rem; color:var(--r-ink-500); margin:.5rem 0 1rem; }
#refs .ref-list { font-family:var(--r-sans); font-size:.9rem; color:var(--r-ink-700); margin:.4rem 0 0; padding-left:1.1rem; }
#refs .ref-list li { margin:.2rem 0; }
#refs .ref-sub { font-family:var(--r-sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--r-gold-600); margin:1rem 0 .2rem; }

footer.r-foot { text-align:center; padding:2.5rem 1.5rem 3.5rem; font-family:var(--r-sans); font-size:.78rem; color:var(--r-ink-500); border-top:1px solid rgba(44,58,77,.12); }
footer.r-foot a { color:var(--r-gold-600); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .progress { transition:none; } }