/* Remembera — a quiet room at first light.
   Deep slate, off-white paper, soft gold. No framework. */
:root{
  --slate:#141e28;
  --slate-2:#1e2c3a;
  --ink:#1d2a36;
  --ink-soft:#48586a;
  --paper:#f8f6ef;
  --paper-2:#f0ebdd;
  --gold:#a87f24;
  --gold-bright:#c9a227;
  --gold-wash:#f3ead0;
  --line:#ddd2b8;
  --serif:"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.125rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration-color:rgba(168,127,36,.45); text-underline-offset:3px}
a:hover{color:var(--ink)}

/* ---------- masthead: the dark before dawn ---------- */
.masthead{
  background:linear-gradient(180deg,var(--slate) 0%,var(--slate-2) 100%);
  color:#efe9d8; border-bottom:3px solid var(--gold);
}
.masthead .in{
  max-width:64rem; margin:0 auto; padding:1.1rem 1.25rem 1rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 2rem;
}
.wordmark{
  font-size:1.9rem; letter-spacing:.04em; color:#f4efe0; text-decoration:none; line-height:1;
}
.wordmark:hover{color:#fff}
.wordmark .dot{color:var(--gold-bright)}
.masthead nav{display:flex; flex-wrap:wrap; gap:.2rem 1.3rem; margin-left:auto}
.masthead nav a{
  font-family:var(--sans); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  color:#cfd6cf; text-decoration:none; padding:.55rem .1rem;
}
.masthead nav a:hover{color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:64rem; margin:0 auto; padding:2.2rem 1.25rem 3.5rem}
.wrap.reading{max-width:45rem}
.eyebrow{
  font-family:var(--sans); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .8rem;
}
h1{
  font-size:clamp(2.1rem,5.2vw,3.2rem); font-weight:500; line-height:1.12; margin:.1rem 0 .6rem; color:var(--ink);
}
h2.group{
  font-size:1.35rem; font-weight:500; margin:2.6rem 0 .4rem; color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:.45rem;
}
.lede{font-size:1.22rem; color:var(--ink-soft); max-width:38em; margin:.4rem 0 1rem}
.sub{font-size:1.15rem; color:var(--ink-soft); margin:.15rem 0 1rem}
.small{font-size:.98rem; color:var(--ink-soft)}
.crumb{
  font-family:var(--sans); font-size:.85rem; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 1.2rem;
}
.crumb a{color:var(--gold); text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- hero (home) ---------- */
.hero{
  background:linear-gradient(180deg,var(--slate) 0%,var(--slate-2) 78%,#31435a 130%);
  color:#efe9d8; border-bottom:3px solid var(--gold);
}
.hero .in{max-width:64rem; margin:0 auto; padding:4.2rem 1.25rem 3.4rem}
.hero .eyebrow{color:var(--gold-bright)}
.hero h1{color:#f7f3e6; font-size:clamp(3.2rem,9vw,5.6rem); letter-spacing:.015em; margin:0}
.hero .horizon{
  height:2px; margin:1.4rem 0 1.3rem; max-width:34rem;
  background:linear-gradient(90deg,var(--gold-bright),rgba(201,162,39,0));
}
.hero .position{font-size:clamp(1.35rem,3.4vw,1.8rem); font-style:italic; color:#efe9d8; margin:0 0 .9rem}
.hero p{max-width:36em; color:#c8d0d4; font-size:1.12rem; margin:0}

/* ---------- shelf & piece rows: big quiet targets ---------- */
.rows{margin:1.4rem 0 0; border-top:1px solid var(--line)}
a.row{
  display:block; padding:1.25rem .9rem 1.2rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); min-height:4.5rem;
}
a.row:hover{background:var(--paper-2)}
a.row .t{display:block; font-size:1.5rem; line-height:1.25; color:var(--ink)}
a.row .m{
  display:block; font-family:var(--sans); font-size:.88rem; letter-spacing:.04em;
  color:var(--gold); margin:.25rem 0 .3rem;
}
a.row .d{display:block; color:var(--ink-soft); font-size:1.05rem; max-width:40em}
a.row .n{
  float:right; font-family:var(--sans); font-size:.85rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2rem; padding:.15rem .7rem; margin-left:1rem;
}
@media (max-width:560px){ a.row .n{float:none; display:inline-block; margin:.3rem 0 0} }

/* ---------- the room strip ---------- */
.room{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.6rem;
  margin:2.8rem 0 .4rem; border-top:1px solid var(--line); padding-top:1.8rem;
}
.room h3{font-size:1.12rem; font-weight:500; margin:0 0 .35rem}
.room p{margin:0; color:var(--ink-soft); font-size:1rem}

/* ---------- player card ---------- */
.player{
  background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--gold);
  padding:1.1rem 1.1rem .9rem; margin:1.4rem 0 1.2rem;
}
.player .meta{
  font-family:var(--sans); font-size:.88rem; letter-spacing:.05em; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin-bottom:.7rem; text-transform:uppercase;
}
.player audio{width:100%; height:52px; display:block}
.followtoggle{
  display:flex; align-items:center; gap:.6rem; min-height:48px; cursor:pointer;
  font-family:var(--sans); font-size:.95rem; color:var(--ink); padding:.4rem 0 0;
}
.followtoggle input{width:1.35rem; height:1.35rem; accent-color:var(--gold); flex:none}
.rootnote{
  text-align:center; color:var(--ink-soft); font-size:1.05rem; font-style:italic;
  max-width:36em; margin:0 auto 1.2rem;
}
.desc{font-size:1.12rem; color:var(--ink)}

/* ---------- the reading itself ---------- */
.followtext{margin-top:1.6rem}
.followtext p{
  font-size:1.3rem; line-height:1.95; margin:0 0 .35rem; padding:.3rem .8rem .3rem 1rem;
  border-left:3px solid transparent; border-radius:0 .4rem .4rem 0;
  transition:background-color .45s ease, border-color .45s ease; cursor:pointer;
}
.followtext p.center{
  text-align:center; font-size:1rem; color:var(--ink-soft); font-style:italic;
  border-left:none; padding-left:.8rem; cursor:default;
}
.followtext p.now{background:var(--gold-wash); border-left-color:var(--gold)}
@media (prefers-reduced-motion: reduce){ .followtext p{transition:none} }
.credit{font-size:.98rem; color:var(--ink-soft); text-align:center; max-width:38em; margin:1.6rem auto 0}
.endmark{text-align:center; color:var(--ink-soft); letter-spacing:.3em; margin:2rem 0 0; font-size:.9rem}
.backlinks{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:2.2rem; padding-top:1.1rem;
  font-family:var(--sans); font-size:.95rem;
}
.backlinks a{text-decoration:none}
.backlinks a:hover{text-decoration:underline}

/* ---------- footer ---------- */
footer{
  background:var(--slate); color:#b9c2c6; border-top:3px solid var(--gold);
  font-size:.98rem;
}
footer .in{max-width:64rem; margin:0 auto; padding:2rem 1.25rem 2.4rem}
footer .fm{font-family:var(--serif); font-size:1.3rem; color:#f0ead6; letter-spacing:.03em}
footer a{color:#d8c98f}
footer p{margin:.45rem 0; max-width:42em}
footer .fine{font-size:.85rem; color:#8d99a0; font-family:var(--sans)}