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

:root{
  --ivory:#F7F3E8;
  --paper:#FDFBF4;
  --emerald:#0B3D3A;
  --emerald-deep:#072926;
  --gold:#B08D3E;
  --gold-light:#D9BE7C;
  --ink:#1E2420;
  --ink-soft:#5B6560;
  --line:#E3DDC8;
  --line-strong:#CFC7A8;
  --danger:#9A3324;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--emerald);}
img{max-width:100%;}

/* ---------- top bar ---------- */
.topbar{
  background:var(--emerald);
  color:#F3EFDD;
  padding:0 2.4rem;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:3px solid var(--gold);
}
.topbar .brand{display:flex;align-items:center;gap:.75rem;}
.topbar .brand-mark{
  width:34px;height:34px;border:1.5px solid var(--gold-light);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:600;color:var(--gold-light);font-size:15px;
}
.topbar .brand-text{font-family:'Fraunces',serif;font-size:19px;font-weight:500;letter-spacing:.2px;color:#F3EFDD;}
.topbar .brand-sub{font-size:11px;color:#B9C9C4;letter-spacing:.14em;text-transform:uppercase;margin-top:1px;}
.topbar .authority{font-size:12.5px;color:#C7D6D1;text-align:right;line-height:1.5;}
.topbar .authority strong{color:#F3EFDD;font-weight:500;}
.topbar a.back{color:#E7DEC0;text-decoration:none;font-size:14px;display:flex;align-items:center;gap:6px;}
.topbar a.back:hover{color:var(--gold-light);}

/* ---------- shell ---------- */
.shell{max-width:1080px;margin:0 auto;padding:2.6rem 2.4rem 4rem;}
.hero{margin-bottom:2.4rem;}
.hero .eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.6rem;}
.hero h1{font-size:34px;font-weight:500;margin:0 0 .5rem;color:var(--emerald-deep);}
.hero p{color:var(--ink-soft);font-size:15.5px;max-width:640px;margin:0;}

/* ---------- ledger index/cards ---------- */
.ledger{border-top:1px solid var(--line-strong);}
.card{
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:1.6rem;
  align-items:center;
  padding:1.5rem .5rem;
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:background .15s ease;
}
.card:hover{background:var(--paper);}
.card .num{
  font-family:'Fraunces',serif;font-weight:500;font-size:28px;color:var(--gold);
  text-align:right;font-variant-numeric:tabular-nums;
}
.card .meta h2{font-size:19px;font-weight:500;margin:0 0 .3rem;color:var(--emerald-deep);}
.card .meta .sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 .5rem;font-style:italic;}
.card .meta .desc{font-size:14px;color:var(--ink);margin:0;max-width:560px;}
.card .actions{display:flex;gap:.6rem;white-space:nowrap;}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;
  padding:.55rem 1rem;border-radius:6px;text-decoration:none;
  border:1px solid var(--line-strong);cursor:pointer;
  background:var(--paper);color:var(--emerald-deep);
}
.btn:hover{border-color:var(--emerald);}
.btn.primary{background:var(--emerald);color:#F3EFDD;border-color:var(--emerald);}
.btn.primary:hover{background:var(--emerald-deep);}
.btn svg{width:14px;height:14px;}

/* ---------- reader ---------- */
.reader-head{border-bottom:2px solid var(--gold);padding-bottom:1.4rem;margin-bottom:2.2rem;}
.reader-head .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.reader-head h1{font-size:32px;font-weight:500;color:var(--emerald-deep);margin:.4rem 0 .3rem;}
.reader-head .sub{font-style:italic;color:var(--ink-soft);font-size:15.5px;}
.doc-body{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:2.6rem 3rem;}
.doc-body h1.doc-h1{font-size:22px;font-weight:600;color:var(--emerald-deep);border-bottom:1px solid var(--line-strong);padding-bottom:.5rem;margin:2.2rem 0 1rem;}
.doc-body h1.doc-h1:first-child{margin-top:0;}
.doc-body h2.doc-h2{font-size:18.5px;font-weight:600;color:var(--emerald-deep);margin:1.8rem 0 .7rem;}
.doc-body h3.doc-h3{font-size:16.5px;font-weight:600;color:var(--ink);margin:1.4rem 0 .5rem;}
.doc-body p{margin:0 0 .9rem;text-align:justify;font-size:15.5px;}
.doc-body p.list-item{margin-left:1.1rem;font-size:15px;color:var(--ink);}
.doc-body .attribution{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line-strong);font-size:13.5px;color:var(--ink-soft);}
.reader-nav{display:flex;justify-content:space-between;margin-top:2rem;font-size:14px;}
.reader-nav a{text-decoration:none;color:var(--emerald);}

/* ---------- footer ---------- */
.sitefoot{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:2rem 0 1rem;}

/* ---------- not found ---------- */
.notfound{text-align:center;padding:5rem 1rem;}
.notfound h1{font-size:26px;color:var(--emerald-deep);}
.notfound p{color:var(--ink-soft);}

@media (max-width:640px){
  .shell{padding:1.6rem 1.2rem 3rem;}
  .card{grid-template-columns:40px 1fr;}
  .card .actions{grid-column:1/-1;justify-content:flex-start;margin-top:.6rem;}
  .doc-body{padding:1.6rem 1.4rem;}
  .topbar{padding:0 1.2rem;}
  .topbar .authority{display:none;}
}
