:root{
  --paper:#FAF3E3;--ink:#13273F;--ink-soft:#4B5668;--teal:#1F3A5C;--red:#93252E;--red-dark:#751C24;
  --mist:#EFE5D0;--deep:#13273F;--line:#DDD2BB;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;z-index:100;font-family:var(--display)}
.skip:focus{left:8px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.narrow{width:min(740px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.35rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand img{height:44px;width:auto;display:block}
.brand span{font-weight:500;color:var(--teal)}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){font:500 15px var(--display);color:var(--ink);text-decoration:none}
.nav a:not(.btn):hover{color:var(--teal);text-decoration:underline;text-underline-offset:5px}
.nav a[aria-current="page"]{color:var(--red);font-weight:600}
.btn{display:inline-block;font:600 16px/1.2 var(--display);padding:14px 22px;border-radius:8px;border:2px solid transparent;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--deep)}
.btn-light:hover{background:#fff}
.btn-sm{padding:10px 16px;font-size:15px}

/* Blog index */
.blog-hero{padding:64px 0 36px}
.blog-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.024em;font-weight:700;max-width:18ch}
.blog-hero p{font-size:1.2rem;color:var(--ink-soft);max-width:56ch;margin:18px 0 0}
.post-list{list-style:none;margin:0;padding:0 0 72px}
.post-item{border-top:1px solid var(--ink);padding:28px 0}
.post-item:last-child{border-bottom:1px solid var(--ink)}
.post-item a.title{font:700 1.6rem/1.2 var(--display);letter-spacing:-.012em;color:var(--ink);text-decoration:none}
.post-item a.title:hover{color:var(--teal);text-decoration:underline;text-underline-offset:5px}
.post-item p{margin:10px 0 0;color:var(--ink-soft);max-width:62ch}
.meta{font-size:.92rem;color:var(--ink-soft);margin-top:12px}
.tag{display:inline-block;font:600 13px/1 var(--display);color:#fff;background:var(--teal);padding:6px 10px;border-radius:6px;margin:0 10px 12px 0}
.tag--rest{background:var(--red)}
.tools-strip{background:var(--mist);padding:40px 0;margin-bottom:0}
.tools-strip .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.tools-strip h2{font-size:1.5rem;max-width:28ch}

/* Article */
.post-head{padding:56px 0 8px}
.post-head h1{font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.022em;font-weight:700}
.standfirst{font-size:1.25rem;color:var(--ink-soft);margin:18px 0 22px}
.byline{display:flex;gap:14px;align-items:center;font-size:.95rem;color:var(--ink-soft);line-height:1.4}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.byline strong{font-family:var(--display);color:var(--ink);font-weight:600}
.crumbs{font-size:.92rem;color:var(--ink-soft);margin:0 0 18px}
article{padding-bottom:16px}
article h2{font-size:1.7rem;line-height:1.15;letter-spacing:-.014em;margin:46px 0 12px}
article h3{font-size:1.25rem;line-height:1.25;margin:34px 0 10px}
article p{margin:0 0 1.1em}
article ul,article ol{margin:0 0 1.2em;padding-left:1.3em}
article li{margin-bottom:.5em}
.toc{background:var(--mist);border-radius:12px;padding:18px 24px;margin:30px 0}
.toc strong{font-family:var(--display);display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.2em;font-size:1rem}
.toc li{margin-bottom:.25em}
.steps5{list-style:none;padding:0;counter-reset:s}
.steps5 li{position:relative;padding-left:46px;margin-bottom:16px;counter-increment:s}
.steps5 li::before{content:counter(s);position:absolute;left:0;top:.05em;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);font:700 15px/32px var(--display);text-align:center}
.example{margin:12px 0 26px;border-left:4px solid var(--red);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px}
.example .lab{display:block;font:600 13px/1.3 var(--display);color:var(--red);margin-bottom:4px}
.example .rv{font-style:italic;color:var(--ink-soft);margin:0 0 16px}
.example .rp{margin:0}
.note{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:24px 0;font-size:1rem}
.cta{background:var(--deep);color:#fff;border-radius:14px;padding:32px;margin:52px 0 32px}
.cta h2{color:#fff;font-size:1.6rem;margin:0 0 10px}
.cta p{color:#D9DEE6;margin:0 0 20px}
.cta .row{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn-ghost{border-color:#fff;color:#fff}
.cta .btn-ghost:hover{background:#fff;color:var(--deep)}
.author{display:flex;gap:18px;align-items:flex-start;border-top:1px solid var(--line);padding:28px 0 8px;margin-top:8px}
.author img{width:72px;height:90px;border-radius:12px;object-fit:cover;flex:none}
.author p{margin:0 0 6px;font-size:1rem}
.author strong{font-family:var(--display)}
.back{display:inline-block;margin:24px 0 64px;font-family:var(--display);font-weight:600}

/* Footer */
.site-footer{background:var(--deep);color:#D9DEE6;padding:40px 0;font-size:.95rem}
.site-footer a{color:#fff}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
.foot strong{font-family:var(--display);color:#fff}
.foot p{margin:0}

@media (max-width:640px){
  .nav a:not(.btn){display:none}
  .post-head{padding-top:40px}
  .cta{padding:24px}
  .author{flex-direction:column}
}