/* Blog — same design contract as the homepage, so the site reads as one thing. */
:root{
  --black:#000000; --band:#0A0A0A; --card:#0E0E0E;
  --ink:#FFFFFF; --sub:#8A8A8A; --subd:#6A6A6A;
  --line:rgba(255,255,255,.10); --hair:rgba(255,255,255,.07);
  --or:#FF4423; --or-hi:#FF5C3D;
  --sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--black);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
::selection{background:var(--or);color:#fff}

.wrap{max-width:720px;margin:0 auto;padding:0 26px}
.wrap-wide{max-width:940px;margin:0 auto;padding:0 26px}
.sec{padding:clamp(70px,10vw,120px) 0}

h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
em{font-style:italic}
.or{color:var(--or)}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);font-weight:700}
.byline{font-family:var(--mono);font-size:12.5px;color:var(--subd);margin-top:16px}

/* nav — bordered boxes, matching the homepage */
nav{position:sticky;top:0;z-index:70;background:rgba(0,0,0,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 26px;height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.brand span{width:9px;height:9px;background:var(--or);border-radius:2px;display:inline-block}
.nav-r{display:flex;gap:9px;align-items:center}
.nbox{border:1px solid var(--line);padding:10px 18px;font-size:13.5px;font-weight:600;transition:border-color .18s}
.nbox:hover{border-color:rgba(255,255,255,.34)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;padding:15px 28px;transition:transform .18s var(--ease),background .18s}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:var(--or-hi);transform:translateY(-1px)}

/* article */
article h1{font-size:clamp(32px,5.2vw,58px);margin:18px 0 22px}
article .dek{font-size:clamp(17px,2vw,21px);color:var(--sub);line-height:1.55;font-weight:500}
.prose{font-size:17px;color:#C8C8C8;line-height:1.75}
.prose p{margin:0 0 22px}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin:56px 0 18px;color:var(--ink)}
.prose h3{font-size:clamp(19px,2.3vw,23px);margin:36px 0 14px;color:var(--ink);letter-spacing:-.02em}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:10px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.prose code{font-family:var(--mono);font-size:.87em;background:var(--card);border:1px solid var(--line);padding:2px 6px}
.prose blockquote{border-left:2px solid var(--or);padding:2px 0 2px 22px;margin:30px 0;color:var(--ink);font-size:19px;font-weight:600;font-style:italic}
hr.rule{border:none;border-top:1px solid var(--hair);margin:52px 0}

.codeblock{background:var(--card);border:1px solid var(--line);padding:20px 22px;margin:22px 0 28px;overflow-x:auto}
.codeblock code{font-family:var(--mono);font-size:13.5px;line-height:1.75;color:var(--ink);white-space:pre}
.flagtable{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:14.5px}
.flagtable td{padding:11px 14px 11px 0;vertical-align:top;border-bottom:1px solid var(--hair)}
.flagtable td:first-child{font-family:var(--mono);color:var(--or);white-space:nowrap;font-weight:700}
.flagtable td:last-child{color:var(--sub)}
.compare{width:100%;border-collapse:collapse;margin:24px 0 32px;font-size:14.5px}
.compare th,.compare td{padding:14px 15px;text-align:left;border-bottom:1px solid var(--hair)}
.compare th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--or);font-weight:700}
.compare td{color:var(--sub)}

.callout{border:1px solid var(--line);background:var(--card);padding:30px 32px;margin:40px 0}
.callout .k{font-family:var(--mono);font-size:11.5px;color:var(--or);text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.callout p{color:var(--ink);margin:12px 0 20px;font-size:16px;line-height:1.6}
.callout .btn{font-size:14px;padding:13px 24px}

/* faq */
.faq{margin:34px 0 0;border-top:1px solid var(--hair)}
details{border-bottom:1px solid var(--hair)}
summary{list-style:none;cursor:pointer;padding:21px 0;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:18px;align-items:center}
summary::-webkit-details-marker{display:none}
summary .pl{color:var(--or);font-size:19px;transition:transform .22s var(--ease);flex:none}
details[open] summary .pl{transform:rotate(45deg)}
details .a{color:var(--sub);font-size:14.5px;padding:0 0 22px;max-width:64ch;line-height:1.7}

/* index list */
.post-list{display:flex;flex-direction:column;margin-top:6px}
.post-row{display:block;padding:28px 0;border-top:1px solid var(--hair);transition:opacity .18s}
.post-row:hover{opacity:.68}
.post-row .k{font-family:var(--mono);font-size:11px;color:var(--or);text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.post-row h2{font-size:clamp(20px,2.6vw,26px);margin:9px 0 9px}
.post-row p{color:var(--sub);font-size:15px;max-width:60ch;line-height:1.55}

footer{border-top:1px solid var(--hair);padding:56px 0 44px}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-end}
.foot .fl{font-family:var(--mono);font-size:12.5px;color:var(--subd);line-height:1.9}
.foot .fl b{color:var(--ink);font-family:var(--sans);font-size:16px;letter-spacing:-.02em}
@media(max-width:640px){.nav-r .hide-sm{display:none}}