/* ============================================================================
   Operater, blog
   Same Blueprint Terminal language as the landing page: IBM Plex, hairline
   rules on a drafting grid, no radii, no shadows, no gradients. Written to
   match the class names the 35 existing articles already use, so restyling the
   whole blog is this one file rather than 35 edits.
   ========================================================================= */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
img,svg,video{display:block;max-inline-size:100%;height:auto}

:root{
  --ink:#06090C;
  --grid:rgba(126,176,201,.05);
  --rule:rgba(126,176,201,.20);
  --rule-2:rgba(126,176,201,.36);
  --edge:rgba(126,176,201,.54);
  --bone:#E9E7E2;
  --ash:#8E9AA2;
  --dim:#87949D;
  --blue:#7EB0C9;
  --acc:#57CBA0;
  --acc-wash:rgba(87,203,160,.10);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,88px);
  --max:1340px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
html[dir="rtl"],.lang-ar{--sans:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}

html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:104px 104px;background-attachment:fixed}
::selection{background:var(--acc);color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
a{color:inherit}

.wrap{max-inline-size:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip-link{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:99;
  background:var(--bone);color:var(--ink);padding:12px 20px;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip-link:focus{inset-inline-start:0}

/* ---- header ---- */
header[role="banner"]{position:sticky;inset-block-start:0;z-index:50;
  border-block-end:1px solid var(--rule);background:rgba(6,9,12,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
header nav{display:flex;align-items:center;gap:22px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone)}
.brand img{inline-size:20px;block-size:auto}
.navlinks{display:flex;gap:24px;margin-inline-start:auto;flex-wrap:wrap}
.navlinks a{font-family:var(--mono);font-size:12.5px;color:var(--dim);
  text-decoration:none;white-space:nowrap}
.navlinks a:hover{color:var(--bone)}
html[dir="rtl"] .navlinks a{font-family:var(--sans);font-size:14px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 22px;min-height:44px;border:1px solid transparent;
  text-decoration:none;white-space:nowrap;transition:opacity .18s var(--ease)}
html[dir="rtl"] .btn{font-family:var(--sans);font-size:14px;letter-spacing:0;
  text-transform:none;font-weight:600}
.btn-primary{background:var(--bone);color:var(--ink);font-weight:600}
.btn-primary:hover{opacity:.86}
.btn-ghost{background:transparent;border-color:var(--edge);color:var(--bone)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}

/* ---- sections ---- */
main section{padding-block:clamp(48px,7vw,104px)}

/* ---- article hero ---- */
.blog-article-hero{padding-block:clamp(56px,9vw,120px) clamp(28px,4vw,52px);
  border-block-end:1px solid var(--rule)}
.blog-article-hero .wrap{max-inline-size:82ch}
.blog-tag,.blog-card-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--rule-2);padding:5px 11px;margin-block-end:20px}
html[dir="rtl"] .blog-tag,html[dir="rtl"] .blog-card-tag{font-family:var(--sans);
  letter-spacing:0;text-transform:none;font-size:12px}

h1{font-family:var(--mono);font-weight:500;font-size:clamp(30px,5.2vw,58px);
  line-height:1.04;letter-spacing:-.045em;color:var(--bone);margin-block-end:18px}
html[dir="rtl"] h1{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;line-height:1.25}
h2{font-family:var(--mono);font-weight:500;font-size:clamp(21px,2.8vw,30px);
  line-height:1.14;letter-spacing:-.03em;color:var(--bone);
  margin-block:clamp(38px,5vw,60px) 16px}
html[dir="rtl"] h2{font-family:var(--sans);font-weight:600;letter-spacing:0;line-height:1.35}
h3{font-family:var(--mono);font-weight:500;font-size:clamp(16px,1.9vw,20px);
  letter-spacing:-.02em;color:var(--bone);margin-block:30px 12px}
html[dir="rtl"] h3{font-family:var(--sans);font-weight:600;letter-spacing:0}

.doc-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
html[dir="rtl"] .doc-meta{font-family:var(--sans);letter-spacing:.02em;
  text-transform:none;font-size:12.5px}

/* ---- article body ---- */
.doc-body{max-inline-size:74ch;margin-inline:auto}
.doc-body p{font-size:16px;line-height:1.82;color:var(--ash);margin-block-end:20px}
.doc-body strong{color:var(--bone);font-weight:500}
.doc-body a{color:var(--acc);text-decoration:none;
  border-block-end:1px solid rgba(87,203,160,.4)}
.doc-body a:hover{border-block-end-color:var(--acc)}
.doc-body ul,.doc-body ol{list-style:none;margin-block:0 22px}
.doc-body li{position:relative;padding-inline-start:22px;margin-block-end:11px;
  font-size:16px;line-height:1.75;color:var(--ash)}
.doc-body ul li::before{content:"";position:absolute;inset-inline-start:0;
  inset-block-start:12px;inline-size:8px;block-size:1px;background:var(--edge)}
.doc-body ol{counter-reset:n}
.doc-body ol li{counter-increment:n}
.doc-body ol li::before{content:counter(n);position:absolute;inset-inline-start:0;
  font-family:var(--mono);font-size:11.5px;color:var(--acc);inset-block-start:3px}
.doc-body blockquote{border-inline-start:1px solid var(--acc);padding-inline-start:22px;
  margin-block:26px;color:var(--bone);font-size:17px;line-height:1.7}
.doc-body table{inline-size:100%;border-collapse:collapse;margin-block:24px;font-size:14.5px}
.doc-body th,.doc-body td{text-align:start;padding:11px 14px;
  border-block-end:1px solid var(--rule);color:var(--ash)}
.doc-body th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.doc-body code{font-family:var(--mono);font-size:13.5px;color:var(--blue);
  background:rgba(126,176,201,.08);padding:2px 6px}
.doc-body img{margin-block:26px;border:1px solid var(--rule)}
.doc-body hr{border:none;border-block-start:1px solid var(--rule);margin-block:38px}

/* ---- blog index grid ---- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-block-start:clamp(28px,4vw,48px)}
.blog-card{background:var(--ink);padding:clamp(22px,2.6vw,32px);display:flex;
  flex-direction:column;gap:12px;transition:background .2s var(--ease)}
.blog-card:hover{background:rgba(87,203,160,.04)}
.blog-card-tag{margin-block-end:2px}
.blog-card-title{font-family:var(--mono);font-weight:500;font-size:clamp(17px,1.9vw,21px);
  line-height:1.22;letter-spacing:-.025em;color:var(--bone)}
html[dir="rtl"] .blog-card-title{font-family:var(--sans);font-weight:600;letter-spacing:0;
  line-height:1.4}
.blog-card-title a{text-decoration:none}
.blog-card-excerpt{font-size:14.5px;line-height:1.7;color:var(--ash)}
.blog-card-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-block-start:auto;padding-block-start:14px}
html[dir="rtl"] .blog-card-meta{font-family:var(--sans);letter-spacing:0;text-transform:none}
.blog-card-link,.read-more{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
html[dir="rtl"] .blog-card-link,html[dir="rtl"] .read-more{font-family:var(--sans);
  letter-spacing:0;font-size:13.5px}
.blog-card-link:hover,.read-more:hover{color:var(--bone)}
.blog-related{border-block-start:1px solid var(--rule);padding-block-start:clamp(34px,5vw,60px)}

/* ---- footer ---- */
footer[role="contentinfo"]{border-block-start:1px solid var(--rule);
  padding-block:clamp(40px,6vw,72px) 28px;margin-block-start:clamp(48px,7vw,100px)}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr);
  gap:clamp(28px,5vw,64px);align-items:start}
.footer-brand p{font-size:14px;line-height:1.7;color:var(--ash);
  max-inline-size:38ch;margin-block-start:14px}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(20px,3vw,40px)}
.footer-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:500;margin-block-end:14px}
html[dir="rtl"] .footer-col h4{font-family:var(--sans);letter-spacing:0;text-transform:none}
.footer-col a{display:block;font-size:14px;color:var(--ash);text-decoration:none;
  margin-block-end:9px}
.footer-col a:hover{color:var(--bone)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;border-block-start:1px solid var(--rule);
  margin-block-start:clamp(30px,4vw,52px);padding-block-start:20px;
  font-family:var(--mono);font-size:11px;color:var(--dim)}
html[dir="rtl"] .footer-bottom{font-family:var(--sans);font-size:12.5px}

@media (max-width:760px){
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .navlinks{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============================================================================
   Post furniture: the blocks blog.py adds around the prose.

   Every one of these exists for a machine as much as a reader: the answer
   block is what an AI overview lifts, the contents list is what tells a
   crawler the page's shape, the Q&A pairs are the FAQPage markup made
   visible. Styling them like the rest of the blueprint keeps that from
   reading as SEO furniture bolted on.
   ========================================================================= */

.post-main{padding-block:clamp(34px,5vw,60px) clamp(56px,8vw,110px)}
.post-main>.wrap{max-inline-size:82ch}
.blog-lede{font-size:17px;line-height:1.75;color:var(--ash);max-inline-size:62ch;
  margin-block-start:6px}

/* ---- breadcrumbs ---- */
.crumbs{margin-block-end:22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.crumbs li{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.crumbs li+li::before{content:"/";margin-inline-end:8px;color:var(--rule-2)}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--acc)}
html[dir="rtl"] .crumbs li{font-family:var(--sans);letter-spacing:0;
  text-transform:none;font-size:12px}

/* ---- byline ---- */
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  padding-block-start:6px}
.byline-a{font-size:13.5px;color:var(--ash)}
.byline-a a{color:var(--bone);text-decoration:none;
  border-block-end:1px solid var(--rule-2)}
.byline-a a:hover{border-block-end-color:var(--acc)}

/* ---- language pills ---- */
.langpills{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
  flex:none}
.langpills a{background:var(--ink);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;color:var(--dim);text-decoration:none;padding:7px 10px}
.langpills a:hover{color:var(--acc)}
.post-langs{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;
  margin-block-start:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.post-langs a{color:var(--acc);text-decoration:none;
  border-block-end:1px solid rgba(87,203,160,.4)}
html[dir="rtl"] .post-langs{font-family:var(--sans);letter-spacing:0;
  text-transform:none;font-size:13px}

/* ---- the answer block ---- */
.tldr{border:1px solid var(--rule-2);border-inline-start:2px solid var(--acc);
  padding:clamp(18px,2.4vw,26px);margin-block-end:30px;background:var(--acc-wash)}
.tldr-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin-block-end:10px}
html[dir="rtl"] .tldr-l{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:12.5px}
.doc-body .tldr-a{color:var(--bone);font-size:16.5px;line-height:1.75;
  margin-block-end:0}

/* ---- contents ---- */
.toc{border-block:1px solid var(--rule);padding-block:18px;margin-block-end:34px}
.toc-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-block-end:12px}
html[dir="rtl"] .toc-l{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:12.5px}
.toc ol{list-style:none;counter-reset:t;columns:2;column-gap:34px}
.toc li{counter-increment:t;margin-block-end:8px;break-inside:avoid;
  font-size:14px;line-height:1.5}
.toc li::before{content:counter(t,decimal-leading-zero) "  ";font-family:var(--mono);
  font-size:11px;color:var(--acc)}
.toc a{color:var(--ash);text-decoration:none}
.toc a:hover{color:var(--bone)}
@media (max-width:680px){.toc ol{columns:1}}

/* ---- tables ---- */
.tw{overflow-x:auto;margin-block:24px}
.doc-body .tw table{margin-block:0;min-inline-size:520px}
.doc-body caption{caption-side:bottom;padding-block-start:10px;text-align:start;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
html[dir="rtl"] .doc-body caption{font-family:var(--sans);letter-spacing:0;font-size:12.5px}
.doc-body tbody th{color:var(--bone);font-weight:500;font-family:inherit;
  font-size:14.5px;letter-spacing:0;text-transform:none}

/* ---- takeaways ---- */
.takeaways{border:1px solid var(--rule);padding:clamp(20px,2.6vw,30px);
  margin-block-start:clamp(38px,5vw,56px)}
.doc-body .takeaways h2{margin-block:0 14px;font-size:clamp(17px,2vw,21px)}
.doc-body .takeaways li{color:var(--bone);font-size:15.5px}

/* ---- Q&A ---- */
.post-faq{border-block-start:1px solid var(--rule);
  margin-block-start:clamp(44px,6vw,72px);padding-block-start:clamp(30px,4vw,48px)}
.post-faq>h2{margin-block-start:0}
.qa{border-block-end:1px solid var(--rule)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;padding-block:18px;color:var(--bone);
  font-size:16px;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;inline-size:11px;block-size:11px;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;
  background:var(--acc);inset-block-start:5px;inset-inline-start:0;
  inline-size:11px;block-size:1px;transition:transform .2s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa-a{padding-block-end:20px}
.qa-a p{font-size:15.5px;line-height:1.8;color:var(--ash);margin:0;max-inline-size:70ch}

/* ---- end-of-post CTA ---- */
.post-cta{border:1px solid var(--rule-2);padding:clamp(26px,4vw,48px);
  margin-block-start:clamp(44px,6vw,72px);background:var(--acc-wash)}
.post-cta h2{margin-block:0 12px;font-size:clamp(19px,2.4vw,27px)}
.post-cta p{font-size:15.5px;line-height:1.75;color:var(--ash);
  max-inline-size:58ch;margin-block-end:22px}

/* ---- index extras ---- */
.tagrail{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:22px}
.tagrail span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--rule);
  padding:5px 10px}
html[dir="rtl"] .tagrail span{font-family:var(--sans);letter-spacing:0;
  text-transform:none;font-size:12px}
.blog-grid .blog-card-title{margin:0}
.blog-card .blog-card-link{margin-block-start:auto;padding-block-start:6px}