/* signal.contact - shared reading styles */
:root{ --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Newsreader",Georgia,"Times New Roman",serif; }
*{box-sizing:border-box}
html,body{margin:0}
/* DARK (default) - warm, not pure black */
body{
  --bg:#15110c; --bg2:#1d1812; --ink:#ece3d1; --ink-strong:#fbf4e4; --muted:#9a9082; --accent:#dca64a; --rule:rgba(236,227,209,.16);
  background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.36rem; line-height:1.86;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%;
  transition:background .5s ease,color .5s ease;
}
/* LIGHT - warm paper */
body[data-theme="light"]{
  --bg:#f4ebd6; --bg2:#efe5cd; --ink:#2a2117; --ink-strong:#171008; --muted:#8a7e66; --accent:#a9701a; --rule:rgba(42,33,23,.18);
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 75% at 50% 0%, var(--bg2), transparent 60%)}

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);opacity:.85;z-index:50;transition:width .1s linear}

.topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;z-index:40}
.topbar a{color:var(--muted);font-family:var(--display);font-size:.86rem;letter-spacing:.26em;text-decoration:none;transition:color .3s}
.topbar button{background:none;border:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;transition:color .3s;padding:.45rem .55rem;margin:-.3rem -.2rem}
.topbar a:hover,.topbar button:hover{color:var(--ink)}

.edgefade{position:fixed;left:0;right:0;pointer-events:none;z-index:30}
.edgefade.t{top:0;height:16vh;background:linear-gradient(to bottom, var(--bg) 38%, transparent)}
.edgefade.b{bottom:0;height:13vh;background:linear-gradient(to top, var(--bg) 14%, transparent)}

/* generous top space - text never runs into the top of the browser */
main{position:relative;z-index:1;max-width:41rem;margin:0 auto;padding:13rem 1.7rem 12rem}

p{margin:0 0 1.55rem;color:var(--ink)}
em{font-style:italic}
.lead::first-letter{font-family:var(--display);font-weight:500;font-size:4.1em;line-height:.78;float:left;padding:.02em .1em 0 0;color:var(--ink-strong)}
.nudge{text-align:center;font-family:var(--display);font-style:italic;color:var(--ink-strong);font-size:1.5rem;margin:2.6rem 0;letter-spacing:.01em}
.brk{text-align:center;color:var(--muted);letter-spacing:.7em;margin:2.9rem 0;font-size:1rem}
.broadcast{margin:2.4rem auto;max-width:33rem;padding:.2rem 0 .2rem 1.3rem;border-left:2px solid var(--rule);color:var(--muted);font-style:italic}
/* the narrator turning to you - the same gold voice you met at the door */
.narrator{max-width:28rem;margin:3.4rem auto;text-align:center;font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.3rem;line-height:1.66}
.narrator::before,.narrator::after{content:"";display:block;width:3rem;height:1px;background:var(--rule);margin:1.5rem auto}
.final{text-align:center;font-family:var(--display);font-style:italic;font-weight:500;font-size:2rem;line-height:1.3;color:var(--ink-strong);margin:3.2rem 0 0}

.chapnav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:5rem;border-top:1px solid var(--rule);padding-top:2rem}
.chapnav a,.chapnav span{font-family:var(--display);font-size:.86rem;letter-spacing:.12em;color:var(--muted);text-decoration:none;transition:color .3s}
.chapnav a:hover{color:var(--ink)}
.chapnav .disabled{opacity:.4}
.chapnav .next{color:var(--accent)}

@media(max-width:560px){
  body{font-size:1.22rem;line-height:1.8}
  main{padding:10rem 1.3rem 8rem}
  .nudge{font-size:1.3rem}.final{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){ body{transition:none} #progress{transition:none} }