:root{
  --night-950:#080A1F;--night-900:#0C0F2C;--night-700:#181C48;
  --gold:#E9B44C;--gold-soft:#F5D48A;--parchment:#F3EAD8;
  --smoke:#9A92C4;--smoke-dim:#6A639A;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Karla',sans-serif;
  background:linear-gradient(180deg,var(--night-950),var(--night-900) 60%,var(--night-700));
  color:var(--parchment);min-height:100vh;line-height:1.7;
}
header{padding:1.4rem clamp(1.2rem,5vw,4rem)}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;color:var(--gold-soft);text-decoration:none}
.brand span{color:var(--smoke);font-weight:400}
main{max-width:760px;margin:0 auto;padding:2rem 1.4rem 5rem}
h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:1.6rem}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.35rem;margin:2.2rem 0 .7rem;color:var(--gold-soft)}
p,li{color:var(--smoke);margin-bottom:.8rem}
ul{padding-left:1.4rem}
strong{color:var(--parchment)}
a{color:var(--gold-soft)}
.todo{
  background:rgba(233,180,76,.08);border:1px dashed rgba(233,180,76,.5);
  border-radius:12px;padding:.7rem 1rem;color:var(--gold-soft);font-size:.92rem;
  margin:.4rem 0 1rem;
}
footer{border-top:1px solid rgba(154,146,196,.15);padding:2rem 1.4rem;text-align:center;color:var(--smoke-dim);font-size:.85rem}
footer a{color:var(--smoke);text-decoration:none;margin:0 .6rem}