:root{
  --navy:#1B2A4A; --navy-deep:#131f38; --gold:#E8C547; --gold-dark:#C9A832;
  --ink:#0E1626; --paper:#F7F5EF; --muted:#5d6472; --line:#E3DFD4;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.68;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

header{background:var(--navy);color:#fff;padding:0 0 44px}
header nav{display:flex;align-items:center;gap:14px;padding:18px 0}
header nav img{width:38px;height:38px;border-radius:9px;display:block}
header nav .name{font-weight:700}
header nav .spacer{flex:1}
header nav a{color:#cfd7e6;text-decoration:none;font-size:15px}
header nav a:hover{color:var(--gold)}
header h1{font-size:clamp(28px,4.5vw,40px);line-height:1.15;letter-spacing:-.02em;margin-top:26px}
header .updated{color:#9fb0cc;margin-top:10px;font-size:15px}

main{padding:52px 0 72px}
main h2{font-size:22px;margin:40px 0 12px;letter-spacing:-.01em;padding-top:8px;border-top:1px solid var(--line)}
main h2:first-of-type{border-top:none;margin-top:0;padding-top:0}
main h3{font-size:17px;margin:26px 0 8px}
main p{margin:12px 0;color:#2b3444}
main ul,main ol{margin:12px 0 12px 22px;color:#2b3444}
main li{margin:7px 0}
main strong{color:var(--ink)}
main a{color:#8a6f12}
main code{background:#EFEBE0;padding:2px 6px;border-radius:5px;font-size:.92em}

.lede{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
      border-radius:10px;padding:20px 22px;margin:0 0 30px}
.lede ul{margin-left:20px}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#EFEBE0;font-weight:600}

.callout{background:#FFF8E5;border:1px solid #E9D9A6;border-radius:10px;padding:18px 20px;
         color:#6b5a1f;margin:26px 0}

footer{background:var(--navy-deep);color:#93a2bb;padding:34px 0;font-size:15px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:#cfd7e6;text-decoration:none}
footer a:hover{color:var(--gold)}
footer .spacer{flex:1}

@media(max-width:620px){
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  td{border:none;padding:4px 0}
  tr{border-bottom:1px solid var(--line);padding:12px 0}
  td::before{content:attr(data-l);display:block;font-weight:600;color:var(--muted);font-size:13px}
}