:root{
  --bg:#fbfbf9; --surface:#fff; --ink:#14140f; --ink2:#3f3e39; --muted:#78766f;
  --rule:#e4e2da; --accent:#1c5cab; --accent2:#c2521f; --code-bg:#f4f3ef;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:Charter,"Iowan Old Style","Source Serif Pro",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f0f0e;--surface:#17171a;--ink:#f2f1ec;--ink2:#c3c2b7;--muted:#8b8981;
        --rule:#2a2a27;--accent:#6ba6f0;--accent2:#e07a4a;--code-bg:#1a1a19;}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
     font-size:19px;line-height:1.66;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}

/* header */
.site{border-bottom:1px solid var(--rule);margin-bottom:56px}
.site .wrap{display:flex;align-items:center;justify-content:space-between;
            padding-top:22px;padding-bottom:22px}
.brand{font-family:var(--sans);font-weight:640;font-size:16px;color:var(--ink);
       text-decoration:none;letter-spacing:-.01em}
.brand span{color:var(--muted);font-weight:400}
.langs{font-family:var(--sans);font-size:13px;display:flex;gap:6px;align-items:center}
.langs a{color:var(--muted);text-decoration:none;padding:4px 9px;border-radius:6px}
.langs a:hover{background:var(--code-bg);color:var(--ink2)}
.langs a.on{background:var(--accent);color:#fff}

/* article */
article{padding-bottom:80px}
.kicker{font-family:var(--sans);font-size:12.5px;font-weight:640;letter-spacing:.13em;
        text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1{font-family:var(--sans);font-size:44px;line-height:1.12;letter-spacing:-.03em;
   font-weight:720;margin:0 0 16px}
.standfirst{font-size:21px;line-height:1.5;color:var(--ink2);font-style:italic;margin:0 0 26px}
.meta{font-family:var(--sans);font-size:14px;color:var(--muted);
      border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
      padding:14px 0;margin:0 0 44px;line-height:1.6}
.meta b{color:var(--ink2);font-weight:600}
h2{font-family:var(--sans);font-size:26px;line-height:1.25;letter-spacing:-.02em;
   font-weight:680;margin:52px 0 16px;padding-top:26px;border-top:1px solid var(--rule)}
h3{font-family:var(--sans);font-size:19px;font-weight:660;margin:32px 0 8px}
p{margin:0 0 20px}
blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
           font-size:22px;line-height:1.45;font-style:italic}
blockquote p{margin:0}
ul,ol{margin:0 0 20px;padding-left:24px}
li{margin-bottom:9px}
strong{font-weight:700}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
code{font-family:var(--mono);font-size:.82em;background:var(--code-bg);
     padding:2px 5px;border-radius:4px}
pre{background:var(--code-bg);border:1px solid var(--rule);border-radius:8px;
    padding:16px 18px;overflow-x:auto;margin:0 0 24px}
pre code{background:none;padding:0;font-size:14px;line-height:1.6}
figure{margin:34px 0;}
figure img{width:100%;display:block;border-radius:10px;border:1px solid var(--rule)}
figcaption{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.5;
           margin-top:10px}
.tablewrap{overflow-x:auto;margin:0 0 24px}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14.5px}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
th{font-size:12px;color:var(--muted);font-weight:620;text-transform:uppercase;
   letter-spacing:.05em}
td{font-variant-numeric:tabular-nums;color:var(--ink2)}
hr{border:none;border-top:1px solid var(--rule);margin:44px 0;display:none}

/* home */
.hero{padding:20px 0 10px}
.hero h1{font-size:38px;margin-bottom:14px}
.hero p{font-size:19px;color:var(--ink2);margin-bottom:8px}
.postlist{list-style:none;padding:0;margin:44px 0 0}
.postlist li{border-top:1px solid var(--rule);padding:26px 0}
.postlist a{text-decoration:none;color:var(--ink)}
.postlist h2{font-size:23px;margin:0 0 8px;border:none;padding:0}
.postlist p{font-size:17px;color:var(--ink2);margin:0 0 8px}
.postlist .when{font-family:var(--sans);font-size:13px;color:var(--muted)}

footer{border-top:1px solid var(--rule);padding:26px 0 60px;font-family:var(--sans);
       font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
@media (max-width:640px){
  body{font-size:18px} h1{font-size:33px} .standfirst{font-size:19px} h2{font-size:22px}
  pre code{font-size:12.5px}
}

/* ---------- figuras clicáveis ---------- */
figure img.zoomable{cursor:zoom-in;transition:border-color .15s ease,box-shadow .15s ease}
figure img.zoomable:hover,figure img.zoomable:focus-visible{
  border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);
  outline:none}
figure{position:relative}
figure::after{content:"⤢";position:absolute;top:12px;right:12px;
  font-family:var(--sans);font-size:15px;line-height:1;color:#fff;
  background:rgba(0,0,0,.55);border-radius:6px;padding:7px 8px;
  opacity:0;transition:opacity .15s ease;pointer-events:none}
figure:hover::after{opacity:1}

/* ---------- lightbox ---------- */
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:9999;display:none;
    background:rgba(8,8,7,.94);backdrop-filter:blur(3px)}
.lb.open{display:block}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:64px 68px 92px}
.lb-stage.scroll{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
.lb-img{max-width:100%;max-height:100%;display:block;border-radius:8px;cursor:zoom-out;
  margin:0 auto;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lb-img.actual{max-width:none;max-height:none;width:auto;border-radius:0}
.lb-x,.lb-nav{position:absolute;z-index:2;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:10px;
  font-family:var(--sans);cursor:pointer;line-height:1;
  transition:background .15s ease}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-x{top:18px;right:20px;width:42px;height:42px;font-size:17px}
.lb-nav{top:50%;transform:translateY(-50%);width:46px;height:64px;font-size:30px}
.lb-prev{left:14px} .lb-next{right:14px}
.lb-bar{position:absolute;left:0;right:0;bottom:0;padding:18px 24px 22px;
  display:flex;gap:20px;align-items:baseline;justify-content:center;
  font-family:var(--sans);font-size:14px;color:#d6d5cd;
  background:linear-gradient(transparent,rgba(8,8,7,.85) 55%);pointer-events:none}
.lb-cap{max-width:70ch;line-height:1.5}
.lb-meta{color:#8b8981;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){
  .lb-stage{padding:56px 12px 88px}
  .lb-nav{width:38px;height:54px;font-size:24px}
  .lb-prev{left:4px} .lb-next{right:4px}
  figure::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  figure img.zoomable,.lb-x,.lb-nav,figure::after{transition:none}
}
/* no zoom real as setas atrapalham a leitura */
.lb.is-actual .lb-nav{opacity:0;pointer-events:none}