/* Shared shell for the blog index and the posts. Same tokens as the landing
   page so the two never drift apart visually. */
:root{
  --navy:#1A3A75;
  --navy-deep:#112750;
  --navy-hover:#204688;
  --ink:#0A0A0A;
  --muted:rgba(10,10,10,.58);
  --line:#E8E8E8;
  --wash:#F7F8FA;
  --green:#16A34A;
  --lime:#84CC16;
  --white:#fff;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur-press:130ms;
  --dur:200ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.narrow{max-width:760px}

/* ── header ──────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--line);background:var(--white);
  position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:14px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;
  font-size:1.3rem;letter-spacing:-.02em}
.brand img{width:38px;height:38px;border-radius:9px;flex:none}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;font-family:var(--sans);font-weight:700;letter-spacing:-.01em;
  background:var(--navy);color:#fff;border:0;border-radius:12px;cursor:pointer;
  padding:13px 22px;font-size:.97rem;box-shadow:0 4px 0 var(--navy-deep);
  transition:background var(--dur) var(--ease-out),
             transform var(--dur-press) var(--ease-out),
             box-shadow var(--dur-press) var(--ease-out)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy-deep)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.btn:focus-visible{outline-color:var(--lime)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);
  color:#fff;font-weight:700;padding:12px 18px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--navy-hover)}}

/* ── index ───────────────────────────────────────────────────────────── */
.head{padding-block:clamp(44px,6vw,72px) clamp(24px,3vw,34px)}
.head h1{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(2.1rem,4.4vw,3.2rem);text-wrap:balance}
.head h1 em{font-style:normal;color:var(--navy)}
.head p{margin:14px 0 0;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem);
  max-width:58ch;text-wrap:pretty}

.grid{display:grid;gap:26px;padding-bottom:clamp(56px,8vw,96px)}
@media(min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}

.post{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out)}
.thumb{aspect-ratio:16/10;position:relative;display:flex;align-items:center;
  justify-content:center;padding:26px;overflow:hidden}
.thumb span{position:relative;z-index:1;background:var(--white);border-radius:12px;
  padding:14px 20px;font-weight:800;font-size:clamp(1.02rem,1.5vw,1.24rem);
  letter-spacing:-.024em;line-height:1.2;text-align:center;text-wrap:balance;
  box-shadow:0 2px 0 rgba(10,10,10,.08)}
/* each thumbnail gets its own ground, drawn rather than photographed */
.thumb::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#000 1px,transparent 0);
  background-size:22px 22px}

.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);background:rgba(26,58,117,.09);border-radius:99px;padding:4px 10px}
.post h2{margin:0 0 9px;font-weight:800;font-size:clamp(1.06rem,1.35vw,1.2rem);
  letter-spacing:-.022em;line-height:1.28}
.post p.dek{margin:0;font-size:.9rem;line-height:1.58;color:var(--muted)}
.byline{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:.83rem;color:var(--muted)}
.byline img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  object-position:center top;flex:none;background:var(--wash)}
.byline b{color:var(--ink);font-weight:700}
.byline .dot{opacity:.5}

@media (hover:hover) and (pointer:fine){
  .post:hover{border-color:#D5D9E0;transform:translateY(-3px)}
}

/* ── article ─────────────────────────────────────────────────────────── */
.back{display:inline-flex;align-items:center;gap:7px;margin:clamp(30px,4vw,44px) 0 22px;
  font-weight:700;font-size:.92rem;color:var(--navy)}
.article h1{margin:14px 0 0;font-weight:800;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.9rem,4vw,2.9rem);text-wrap:balance}
.article h1 em{font-style:normal;color:var(--navy)}
.meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:22px 0 clamp(26px,3.4vw,36px);padding-bottom:22px;
  border-bottom:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.meta img{width:42px;height:42px;border-radius:50%;object-fit:cover;
  object-position:center top;flex:none;background:var(--wash)}
.meta b{display:block;color:var(--ink);font-weight:700;font-size:.95rem}
.meta .right{margin-left:auto;text-align:right}
.hero-thumb{border-radius:18px;overflow:hidden;margin-bottom:clamp(28px,3.6vw,40px)}
.hero-thumb .thumb{aspect-ratio:16/9}

.article .body{padding-bottom:clamp(56px,8vw,96px)}
.article .body h2{margin:clamp(30px,3.6vw,42px) 0 12px;font-weight:800;
  font-size:clamp(1.24rem,1.8vw,1.5rem);letter-spacing:-.024em;line-height:1.25}
.article .body p{margin:0 0 16px;font-size:1.02rem;line-height:1.72;
  color:rgba(10,10,10,.78)}
.article .body ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.article .body li{display:flex;gap:11px;align-items:flex-start;
  font-size:1.02rem;line-height:1.66;color:rgba(10,10,10,.78)}
.article .body li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--navy);margin-top:11px}
.article .body strong{color:var(--ink);font-weight:700}

.end-cta{margin-top:clamp(36px,4.5vw,52px);padding:clamp(24px,3vw,34px);
  background:var(--wash);border:1px solid var(--line);border-radius:18px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.end-cta p{margin:0;flex:1 1 260px;font-size:.98rem;line-height:1.6;color:var(--muted)}
.end-cta b{color:var(--ink)}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:32px;font-size:.85rem;
  color:var(--muted)}
.foot-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .post:hover,.btn:active{transform:none}
}

/* ── legal pages ─────────────────────────────────────────────────────── */
.updated{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.legal .body h2{font-size:clamp(1.14rem,1.6vw,1.34rem)}
.legal .body h3{margin:22px 0 8px;font-weight:800;font-size:1rem;letter-spacing:-.018em}
.legal .body p,.legal .body li{font-size:.98rem}
.legal .body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.93rem}
.legal .body th,.legal .body td{text-align:left;vertical-align:top;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.legal .body th{font-weight:800;background:var(--wash)}
.legal-scroll{overflow-x:auto}
.legal .toc{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 30px;padding:16px 18px;
  background:var(--wash);border:1px solid var(--line);border-radius:14px;font-size:.9rem}
.legal .toc a{color:var(--navy);font-weight:700}
/* impossible to miss if one of these ships unfilled */
.todo{background:#FFF3CD;border:1px solid #E0B84C;border-radius:8px;
  padding:2px 7px;font-weight:700;color:#6B4E00}

/* a finger needs about 44px: the footer's blog link is underlined text */
@media(max-width:680px){
  .past-blogs{display:inline-block;padding-block:10px}
}