/* Dragon — shared stylesheet for new pages (about, faq, blog)
   Matches the dark, discreet tone of the existing landing page. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --bg: #0b0b10;
  --bg-raised: #131319;
  --line: #232330;
  --text: #ece9e4;
  --text-dim: #9c98a3;
  --brass: #c9a24a;
  --brass-dim: #8a7132;
  --ember: #7a3324;
  --radius: 3px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  font-size:16px;
}

a{color:var(--brass); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

header.site{
  border-bottom:1px solid var(--line);
  padding:20px 0;
  position:sticky; top:0; background:rgba(11,11,16,0.92); backdrop-filter:blur(6px);
  z-index:10;
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{font-family:var(--serif); font-weight:600; font-size:1.25rem; letter-spacing:0.02em; color:var(--text);}
.brand:hover{text-decoration:none; color:var(--brass);}
nav.main a{margin-left:20px; color:var(--text-dim); font-size:0.95rem;}
nav.main a:hover{color:var(--text);}
.badge{
  display:inline-block; font-size:0.75rem; color:var(--text-dim);
  border:1px solid var(--line); padding:2px 8px; border-radius:var(--radius);
}

main{padding:48px 0 80px;}

h1{
  font-family:var(--serif); font-weight:500; font-size:2.1rem; line-height:1.2;
  margin:0 0 12px; color:var(--text);
}
h2{
  font-family:var(--serif); font-weight:500; font-size:1.45rem; line-height:1.3;
  margin:40px 0 12px; color:var(--text);
}
h3{font-family:var(--serif); font-weight:500; font-size:1.15rem; margin:24px 0 8px;}

p{color:var(--text); max-width:68ch;}
p.lede{color:var(--text-dim); font-size:1.05rem; max-width:60ch;}
.meta{color:var(--text-dim); font-size:0.85rem; margin-bottom:32px;}

ul.plain{padding-left:1.2em; color:var(--text);}
ul.plain li{margin-bottom:6px;}

.card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin:18px 0;
}

.notice{
  border-left:2px solid var(--brass-dim); padding:10px 16px; color:var(--text-dim);
  font-size:0.9rem; margin:28px 0;
}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0;}
.btn{
  display:inline-block; padding:12px 22px; border-radius:var(--radius);
  font-size:0.95rem; font-weight:500;
}
.btn.primary{background:var(--brass); color:#141018;}
.btn.primary:hover{background:#dab65c; text-decoration:none;}
.btn.ghost{border:1px solid var(--line); color:var(--text);}
.btn.ghost:hover{border-color:var(--brass); color:var(--brass); text-decoration:none;}

.post-list{list-style:none; padding:0; margin:24px 0;}
.post-list li{border-bottom:1px solid var(--line); padding:20px 0;}
.post-list li:first-child{padding-top:0;}
.post-list a.title{font-family:var(--serif); font-size:1.2rem; color:var(--text);}
.post-list a.title:hover{color:var(--brass); text-decoration:none;}
.post-list .excerpt{color:var(--text-dim); margin-top:6px; font-size:0.95rem;}
.post-list .date{color:var(--text-dim); font-size:0.8rem;}

details{border-bottom:1px solid var(--line); padding:16px 0;}
details summary{cursor:pointer; font-weight:500; color:var(--text); list-style:none;}
details summary::-webkit-details-marker{display:none;}
details summary::before{content:"+ "; color:var(--brass);}
details[open] summary::before{content:"– ";}
details p{margin-top:10px; color:var(--text-dim);}

footer.site{
  border-top:1px solid var(--line); padding:32px 0; color:var(--text-dim); font-size:0.85rem;
}
footer.site a{color:var(--text-dim);}
footer.site a:hover{color:var(--brass);}

@media (max-width:600px){
  h1{font-size:1.7rem;}
  nav.main a{margin-left:12px; font-size:0.85rem;}
}