:root{
  color-scheme:light;
  --bg:#F3F5F9; --surface:#FFFFFF; --text:#0A1F44; --muted:#5A6B85;
  --line:#D6DDE9; --line-strong:#BAC5D6;
  --ink-bg:#071426; --ink-text:#EDF1F7; --ink-muted:#93A7C4; --ink-line:#1B3252;
  --gold:#F0B429; --gold-ink:#7E5905;
  --f-display:"Archivo",Helvetica,Arial,sans-serif;
  --f-body:"Literata",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--f-body);
  font-size:1.0625rem; line-height:1.72; -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--f-display); font-weight:600; margin:0;
  line-height:1.06; letter-spacing:-.042em; text-wrap:balance;}
h1{font-size:clamp(2.1rem,5vw,3.2rem);}
h2{font-size:clamp(1.35rem,2.6vw,1.7rem); margin-top:2.4em;}
h3{font-size:1.1rem; letter-spacing:-.028em; margin-top:1.8em;}
p,li{margin:0 0 1.05em;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
mark{background:linear-gradient(180deg,transparent 12%,var(--gold) 12%,var(--gold) 92%,transparent 92%);
  color:inherit; padding:0 .1em; border-radius:2px;}

.hdr{background:var(--ink-bg); border-bottom:1px solid var(--ink-line); position:sticky; top:0; z-index:60;}
.hdr__in{display:flex; align-items:center; gap:24px; height:92px; color:var(--ink-text);}
.logo{display:flex; align-items:center; text-decoration:none; margin-right:auto;}
.logo img{display:block; height:58px; width:auto;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:600; font-size:1rem; padding:13px 22px;
  border-radius:3px; border:1px solid transparent; text-decoration:none; white-space:nowrap;
  cursor:pointer; transition:background .16s ease, transform .16s ease;}
.btn:active{transform:translateY(1px);}
.btn--gold{background:var(--gold); color:#12213A; border-color:var(--gold);}
.btn--gold:hover{background:#ffc84a;}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--gold);}
.btn--wa{background:#1FA855; color:#fff; border-color:#1FA855;}
.btn--wa:hover{background:#17974a;}
@media (max-width:600px){ .hdr__in{height:72px;} .logo img{height:42px;} .hdr .btn{padding:10px 15px; font-size:.83rem;} }

.page{padding:clamp(48px,7vw,92px) 0 clamp(56px,8vw,104px);}
.page .lede{font-size:1.16rem; color:var(--muted); max-width:62ch; margin-top:22px;}
.prose{max-width:68ch; margin-top:34px;}
.prose h2{color:var(--text);} .prose ul{padding-left:1.15em;}
.meta{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:20px;}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}

.ftr{background:var(--ink-bg); color:var(--ink-muted); border-top:1px solid var(--ink-line);
  padding:52px 0 28px; font-size:.93rem;}
.ftr__cols{display:grid; gap:30px;}
@media (min-width:760px){ .ftr__cols{grid-template-columns:1.6fr 1fr 1.2fr;} }
.ftr h4{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-text); font-weight:500; margin:0 0 14px;}
.ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.ftr li{margin:0;} .ftr a{text-decoration:none;} .ftr a:hover{color:var(--gold);}
.ftr img{height:52px; width:auto; display:block;}
.disclaimer{margin-top:40px; padding:20px 22px; border:1px solid var(--ink-line);
  border-radius:4px; font-size:.79rem; line-height:1.7; color:#7E94B4;}
.disclaimer b{color:var(--ink-text); font-family:var(--f-display);}
.ftr__bar{margin-top:24px; padding-top:20px; border-top:1px solid var(--ink-line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;}

/* .ftr ul sets flex-direction:column and outranks a bare .social,
   so the row direction has to be stated at the same specificity. */
.ftr .social, .social{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap; gap:8px;
}
.social li{margin:0;}
.social a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 11px; border-radius:100px;
  color:var(--ink-text); border:1px solid var(--ink-line); text-decoration:none;
  font-family:var(--f-display); font-weight:500; font-size:.85rem; line-height:1;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.social a svg{color:var(--gold); flex:none;}
.social__name{white-space:nowrap;}
.ftr__social{margin-top:34px; padding-top:26px; border-top:1px solid var(--ink-line);}
.ftr__social h4{margin-bottom:12px;}
.ftr__social .social{margin-top:0;}
.social a:hover{background:rgba(240,180,41,.12); border-color:var(--gold); transform:translateY(-2px);}
.social a:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

.callout{
  margin:22px 0 26px; padding:20px 22px; border-radius:6px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
}
.callout p{margin:0;}
.callout p + p{margin-top:.8em;}
.callout--strong{border-left-width:4px; background:#FFFBF0;}
.prose ul{padding-left:1.15em;}
.prose li{margin-bottom:.5em;}