:root{
  --ink:#0D1522; --ink-2:#131E31; --line:#27344C; --paper:#F3EFE6;
  --muted:#97A1B5; --brass:#C9A24B; --brass-2:#E6C880; --mint:#5FBFA8; --danger:#E2916F;
  --maxw:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--paper); line-height:1.6;
  font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 560px at 82% -12%, rgba(201,162,75,.08), transparent 60%);}
a{color:var(--brass-2)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* nav */
nav.site{display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:34px}
.brand{display:flex; align-items:baseline; gap:9px; font-weight:600; text-decoration:none; color:var(--paper)}
.brand .fv{font-family:"Fraunces",serif; font-size:1.12rem}
.brand .ph{color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
.navlinks{display:flex; gap:8px; flex-wrap:wrap}
.navlinks a{font-size:.85rem; color:var(--paper); text-decoration:none; padding:7px 13px;
  border:1px solid var(--line); border-radius:9px; transition:border-color .2s}
.navlinks a:hover,.navlinks a.on{border-color:var(--brass); color:var(--brass-2)}

/* content */
.content{padding-bottom:60px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass)}
h1{font-family:"Fraunces",serif; font-weight:500; font-size:clamp(2rem,5vw,3rem); line-height:1.08; margin:.3em 0 .2em}
h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; margin:2em 0 .5em; color:var(--brass-2)}
h3{font-size:1.05rem; font-weight:600; margin:1.6em 0 .4em}
p,li{color:#d4dae4}
ul{padding-left:1.2em} li{margin:5px 0}
.lede{font-size:1.1rem; color:#cfd5e0; max-width:60ch}
code{font-family:"IBM Plex Mono",monospace; font-size:.86em; background:var(--ink-2);
  border:1px solid var(--line); border-radius:6px; padding:1px 6px}
pre{background:var(--ink-2); border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:#c7d0de; line-height:1.5}
pre code{background:none; border:0; padding:0}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.9rem}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.note,.warn{border-radius:11px; padding:13px 16px; margin:18px 0; font-size:.92rem}
.note{background:rgba(31,111,191,.08); border:1px solid rgba(80,140,200,.35)}
.warn{background:rgba(201,162,75,.08); border:1px solid var(--brass); color:#f0e2c2}
.note strong,.warn strong{color:var(--paper)}

/* forms */
.field{margin:14px 0}
label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px}
input,textarea{width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--ink); color:var(--paper); font-size:.95rem; font-family:inherit}
textarea{min-height:130px; resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:transparent}
.btn{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:10px; cursor:pointer;
  background:var(--brass); color:#231a06; font-weight:600; font-size:.95rem; font-family:inherit; padding:12px 20px; text-decoration:none}
.btn:hover{background:var(--brass-2)}
.btn[disabled]{opacity:.6; cursor:default}
.msg{margin-top:14px; font-size:.9rem; min-height:1.1em}
.msg.err{color:var(--danger)} .msg.ok{color:var(--mint)}

/* footer */
footer.site{border-top:1px solid var(--line); padding:26px 0 50px; color:var(--muted); font-size:.82rem; margin-top:20px}
footer.site a{color:var(--muted); text-decoration:none; margin-right:14px}
footer.site a:hover{color:var(--brass-2)}
footer.site .legal{margin-top:10px; font-size:.76rem}