/* Echoes of Regret : reading site */
:root{
  --paper:#f7f2e8;
  --ink:#2a2520;
  --muted:#8c8172;
  --rule:#e3dacb;
  --accent:#9c5a3c;
  --note:#786d5b;
  --sel:#ece0c8;
  --maxw:34rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16140f;--ink:#e8e1d3;--muted:#9a8f7c;--rule:#2c281f;
    --accent:#dd9c77;--note:#b6aa93;--sel:#3a3324;
  }
}
:root[data-theme="dark"]{
  --paper:#16140f;--ink:#e8e1d3;--muted:#9a8f7c;--rule:#2c281f;
  --accent:#dd9c77;--note:#b6aa93;--sel:#3a3324;
}
:root[data-theme="light"]{
  --paper:#f7f2e8;--ink:#2a2520;--muted:#8c8172;--rule:#e3dacb;
  --accent:#9c5a3c;--note:#786d5b;--sel:#ece0c8;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.19rem;line-height:1.72;
  font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
a{color:inherit}

/* top bar */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2rem);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);
}
.brand{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  letter-spacing:.01em;text-decoration:none;color:var(--ink);opacity:.85;
}
.brand:hover{opacity:1}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topnav-link{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.02em;
  color:var(--muted);text-decoration:none;transition:.2s;
}
.topnav-link:hover{color:var(--accent)}
.theme{
  background:none;border:1px solid var(--rule);color:var(--muted);
  border-radius:50%;width:2.1rem;height:2.1rem;font-size:1rem;cursor:pointer;
  line-height:1;transition:.2s;
}
.theme:hover{color:var(--ink);border-color:var(--muted)}

main{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,7vw,4.5rem) clamp(1.15rem,5vw,1.5rem) 5rem}

/* chapter */
.kicker{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.4rem;
}
.ch-title{
  font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.12;font-weight:600;
  margin:0 0 2.2rem;letter-spacing:-.01em;
}
/* audiobook player */
.audiobar{
  margin:0 0 2.4rem;padding:1rem 1.1rem;border:1px solid var(--rule);
  border-radius:.6rem;background:color-mix(in srgb,var(--accent) 6%,transparent);
  display:flex;flex-direction:column;gap:.55rem;
}
.audiobar audio{width:100%;height:40px}
.audiometa{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--muted);
}

.prose p{margin:0 0 1.25rem}
.prose p:first-of-type::first-letter{
  font-size:3.1rem;line-height:.8;float:left;padding:.08em .09em 0 0;
  font-weight:600;color:var(--accent);
}
.prose .note::first-letter{font-size:inherit;float:none;padding:0;color:inherit;font-weight:inherit}
.prose strong{font-weight:700}
.prose em{font-style:italic}

/* the notebook jottings (italic frame-notes) */
.note{
  font-style:italic;color:var(--note);
  font-size:.97rem;line-height:1.6;
  border-left:2px solid var(--rule);
  padding:.15rem 0 .15rem 1.1rem;margin:0 0 1.8rem;
}

/* section break */
hr.brk{border:0;margin:2.4rem 0;text-align:center}
hr.brk::before{content:"❦";color:var(--muted);font-size:1.1rem;letter-spacing:.4em}

/* chapter footer nav */
.chapnav{
  max-width:var(--maxw);margin:3.5rem auto 0;padding-top:1.6rem;
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--sans);font-size:.82rem;
}
.chapnav .nav{color:var(--muted);text-decoration:none;transition:.2s;max-width:42%}
.chapnav .nav:hover{color:var(--accent)}
.chapnav .toc{color:var(--ink);opacity:.7}
.chapnav .next{text-align:right}
.chapnav .disabled{visibility:hidden}

/* cover / index */
.home main{padding-top:clamp(3rem,12vw,7rem)}
.cover{text-align:center;margin-bottom:3.5rem}
.cover .kicker{margin-bottom:1rem}
.book-title{
  font-size:clamp(2.6rem,11vw,4.4rem);line-height:1.02;font-weight:600;
  letter-spacing:-.02em;margin:.2rem 0 .8rem;
}
.byline{font-style:italic;color:var(--muted);margin:.2rem 0 2rem;font-size:1.05rem}
.draft-tag{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:2rem;
  display:inline-block;padding:.35rem .9rem;margin:0 0 2.4rem;
}
.cta{
  display:inline-block;font-family:var(--sans);font-size:.9rem;letter-spacing:.02em;
  text-decoration:none;color:var(--paper);background:var(--accent);
  padding:.7rem 1.4rem;border-radius:2rem;transition:.2s;
}
.cta:hover{filter:brightness(1.08)}
.audio-note{
  font-family:var(--sans);font-size:.8rem;color:var(--muted);
  margin:1.4rem 0 0;letter-spacing:.01em;
}

.toc h2{
  font-family:var(--sans);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 1.4rem;font-weight:600;
}
.toc-list{list-style:none;margin:0 auto;padding:0;max-width:26rem;counter-reset:none}
.toc-list li{border-bottom:1px solid var(--rule)}
.toc-list a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  padding:.85rem .2rem;transition:.2s;
}
.toc-list a:hover{background:color-mix(in srgb,var(--sel) 55%,transparent);padding-left:.55rem}
.toc-list .num{font-family:var(--sans);font-size:.72rem;color:var(--muted);letter-spacing:.05em;min-width:1.6rem}
.toc-list .ttl{font-size:1.08rem}

.colophon{
  text-align:center;color:var(--muted);font-size:.82rem;font-style:italic;
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
}

/* cast page */
.cast-link{text-align:center;margin:1.6rem 0 0}
.cast-link a{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.02em;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px;transition:.2s;
}
.cast-link a:hover{border-bottom-color:var(--accent)}
.cast-page .cast-intro{
  font-style:italic;color:var(--muted);font-size:1rem;line-height:1.6;
  margin:0 0 2.3rem;max-width:30rem;
}
.cast-list{display:flex;flex-direction:column;gap:1.7rem}
.cast-entry{border-left:2px solid var(--rule);padding:.05rem 0 .05rem 1.1rem}
.cast-entry .cast-name{
  font-family:var(--serif);font-size:1.26rem;font-weight:600;color:var(--accent);
  letter-spacing:-.01em;margin:0 0 .3rem;
}
.cast-entry .cast-desc{margin:0;font-size:1.02rem;line-height:1.56}
.cast-entry .cast-desc em{font-style:italic}

@media (max-width:480px){
  body{font-size:1.12rem}
  .prose p:first-of-type::first-letter{font-size:2.7rem}
}