/* ============================================================================
   Shipnaut, 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}

.post-join{display:flex;flex-wrap:wrap;gap:10px;max-inline-size:560px}
.post-join[hidden],.post-join-fallback[hidden]{display:none}
.post-join input{flex:1 1 240px;min-block-size:48px;padding:0 14px;font:inherit;font-size:16px;
  color:var(--bone,#E9E7E2);background:var(--ink,#06090C);border:1px solid var(--rule-2);border-radius:0}
.post-join input:focus{outline:2px solid var(--acc,#57CBA0);outline-offset:1px}
.post-join .btn{min-block-size:48px}
.post-join-msg{font-size:14.5px;line-height:1.6;color:var(--ash);margin:10px 0 0;min-block-size:1em}
.post-join-msg:empty{display:none}
.post-join-msg.ok{color:var(--acc,#57CBA0)}
.post-join-fast{margin:14px 0 0;font-size:14px}
.post-join-fast a{color:var(--ash)}
.post-cta-early{border:1px solid var(--rule-2);background:var(--acc-wash);padding:18px 20px;margin-block:22px}
.post-cta-early p:first-child{margin:0 0 12px;font-size:15.5px;line-height:1.6}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 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}