:root{
  --obsidian:#0a0605;
  --char:#1a0d08;
  --ember:#ff7a1a;
  --molten:#ffb347;
  --gold:#f4c765;
  --ash:#c9a982;
  --smoke:#6a4a2a;
  --paper:#e8dcc2;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--obsidian);color:var(--ash);font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;line-height:1.7;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}

.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;
  background:linear-gradient(180deg,#1a0a06 0%,rgba(10,6,5,0) 100%);
  border-bottom:1px solid #2a1408;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold)}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(255,120,20,.6))}
.brand-name{font-size:22px;letter-spacing:6px;color:var(--gold);text-shadow:0 0 12px rgba(255,120,20,.4)}
.brand-name em{font-style:normal;color:var(--molten)}
.nav{display:flex;gap:26px}
.nav a{color:var(--smoke);text-decoration:none;font-size:13px;letter-spacing:2px;text-transform:lowercase;transition:color .15s}
.nav a:hover,.nav a.on{color:var(--gold)}

main{flex:1;padding:56px 24px 80px;max-width:760px;margin:0 auto;width:100%}
main .kicker{font-size:11px;letter-spacing:8px;color:var(--smoke);text-transform:uppercase;margin-bottom:12px}
main h1{
  font-size:44px;font-weight:400;letter-spacing:4px;color:var(--gold);
  text-shadow:0 0 25px rgba(255,120,20,.35);margin-bottom:8px;line-height:1.1;
}
main .updated{font-size:12px;color:var(--smoke);margin-bottom:40px;letter-spacing:2px}
main h2{
  font-size:20px;font-weight:400;letter-spacing:2px;color:var(--molten);
  margin:36px 0 12px;padding-bottom:6px;border-bottom:1px solid #2a1408;
}
main h3{font-size:15px;color:var(--gold);margin:20px 0 6px;font-weight:400;letter-spacing:1px}
main p{margin-bottom:14px;color:#b8a482;font-size:15px;max-width:70ch}
main ul{margin:8px 0 16px 22px;color:#b8a482}
main li{margin-bottom:6px;font-size:15px}
main a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--smoke)}
main a:hover{color:var(--molten);border-bottom-color:var(--molten)}
main strong{color:var(--ash);font-weight:600}

.base{
  padding:14px 22px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--smoke);letter-spacing:2px;
  background:#050202;border-top:1px solid #1a0a06;
}
.base a{color:var(--smoke);text-decoration:none;margin-left:18px}
.base a:hover{color:var(--gold)}

@media(max-width:640px){
  .top{padding:10px 14px}
  .brand-name{font-size:16px;letter-spacing:4px}
  .brand svg{width:28px;height:28px}
  .nav{gap:14px}
  .nav a{font-size:12px;letter-spacing:1px}
  main{padding:32px 18px 60px}
  main h1{font-size:30px;letter-spacing:2px}
  main h2{font-size:17px}
  main p,main li{font-size:14px}
  .base{font-size:10px;padding:10px 14px;flex-direction:column;gap:6px}
  .base .links a{margin:0 8px}
}