:root{
  --paper:#F3F6F1; --surface:#FFFFFF; --surface-2:#E9EDE6;
  --ink:#14264A; --ink-2:#43536B; --ink-3:#6E7C92;
  --line:#D6DBD3; --line-2:#C2CAC0;
  --green:#3E7A1E; --green-soft:#E7F0DC; --on-green:#FFFFFF;
  --marigold:#9C6708; --marigold-soft:#F9EFD7; --marigold-line:#E4C98A;
  --laterite:#A93E1D; --laterite-soft:#FAE3DA; --laterite-line:#E2AF98;
  --jerrican:#1E3B6D; --jerrican-soft:#E4EBF6;
  --shadow:0 1px 2px rgba(20,38,74,.05), 0 10px 30px rgba(20,38,74,.09);
  --maxw:1080px; --read:720px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C1524; --surface:#131F33; --surface-2:#1C2A42;
    --ink:#E8EDF5; --ink-2:#A9B7CB; --ink-3:#7D8CA3;
    --line:#25344C; --line-2:#324460;
    --green:#7CBF4F; --green-soft:#17290F; --on-green:#0A1803;
    --marigold:#E0A93E; --marigold-soft:#2C2211; --marigold-line:#4E3D18;
    --laterite:#E27A56; --laterite-soft:#31160E; --laterite-line:#573023;
    --jerrican:#82A9E2; --jerrican-soft:#152441;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Archivo,"Segoe UI",system-ui,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.022em; line-height:1.16}
a{color:var(--green)}
img,svg{max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
:focus-visible{outline:2.5px solid var(--green); outline-offset:3px; border-radius:5px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{font-family:"IBM Plex Mono"; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; display:block; margin-bottom:13px}

/* header */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:14px; padding:13px 22px; max-width:var(--maxw); margin:0 auto}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin-right:auto}
.logo svg{width:27px;height:27px;color:var(--jerrican);flex:none}
.logo .vet{color:var(--green)}
.logo b{font-family:Archivo; font-weight:700; font-size:19px; letter-spacing:-.025em}
.navlinks{display:flex; gap:22px}
.navlinks a{color:var(--ink-2); text-decoration:none; font-size:.94rem; font-weight:500}
.navlinks a:hover{color:var(--green)}
@media (max-width:760px){ .navlinks{display:none} }
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 24px; border-radius:11px;
  background:var(--green); color:var(--on-green); font-weight:600; font-size:1rem; text-decoration:none; border:0;
  cursor:pointer; min-height:52px}
.btn:hover{filter:brightness(1.09)}
.btn.sec{background:transparent; color:var(--ink); border:1.5px solid var(--line-2)}
.btn.sec:hover{border-color:var(--green); color:var(--green)}
.btn.sm{padding:10px 17px; min-height:44px; font-size:.92rem; border-radius:9px}

/* blog index */
.bloghero{padding:clamp(40px,6vw,72px) 0 8px}
.bloghero h1{font-size:clamp(2rem,5vw,3rem); font-weight:700; margin-bottom:14px}
.bloghero p{font-size:1.14rem; color:var(--ink-2); max-width:60ch}
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; padding:36px 0 70px}
.post{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s}
.post:hover{border-color:var(--green); transform:translateY(-2px)}
.post .thumb{height:8px}
.post .body{padding:22px 21px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.post .kicker{font-family:"IBM Plex Mono"; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); font-weight:500}
.post h2{font-size:1.24rem; font-weight:600; line-height:1.28}
.post p{font-size:.93rem; color:var(--ink-2); line-height:1.55; margin:0}
.post .meta{margin-top:auto; font-size:.82rem; color:var(--ink-3); padding-top:6px}

/* article */
article{max-width:var(--read); margin:0 auto; padding:clamp(30px,5vw,54px) 22px 30px}
.crumb{font-size:.9rem; color:var(--ink-3); margin-bottom:22px}
.crumb a{color:var(--ink-2); text-decoration:none}
.crumb a:hover{color:var(--green)}
.artkicker{font-family:"IBM Plex Mono"; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:500}
article h1{font-size:clamp(1.8rem,4.4vw,2.7rem); font-weight:700; margin:12px 0 16px; line-height:1.14}
.byline{font-size:.9rem; color:var(--ink-3); padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid var(--line)}
article h2{font-size:1.4rem; font-weight:700; margin:38px 0 12px}
article h3{font-size:1.1rem; font-weight:600; margin:26px 0 8px}
article p{margin:0 0 17px}
article ul,article ol{margin:0 0 20px; padding-left:22px}
article li{margin-bottom:9px}
article strong{color:var(--ink); font-weight:600}
.lead{font-size:1.16rem; color:var(--ink-2); line-height:1.6}
.callout{background:var(--marigold-soft); border:1px solid var(--marigold-line); border-radius:14px;
  padding:18px 20px; margin:26px 0; font-size:.97rem}
.callout b{font-family:Archivo; color:var(--marigold); display:block; margin-bottom:5px}
.callout.blue{background:var(--jerrican-soft); border-color:var(--jerrican)}
.callout.blue b{color:var(--jerrican)}
.callout.green{background:var(--green-soft); border-color:var(--green)}
.callout.green b{color:var(--green)}
.disclaimer{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-3); line-height:1.6}
.endcta{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; margin:40px 0 0; text-align:center}
.endcta h3{font-size:1.3rem; margin-bottom:8px}
.endcta p{color:var(--ink-2); margin:0 auto 18px; max-width:44ch}

/* footer */
footer{border-top:1px solid var(--line); padding:36px 0 44px; background:var(--surface); margin-top:30px}
.fbar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.fbar .small{font-size:.86rem; color:var(--ink-3)}
.fbar a{color:var(--ink-2); text-decoration:none; font-size:.92rem}
.fbar a:hover{color:var(--green)}
.flinks{display:flex; gap:20px; flex-wrap:wrap}