/* Shared blog styling. One file rather than six inline copies — the articles
   are lean HTML and this is cached across the whole section. */

:root{
  --paper:#F7F3EC; --cream:#F7F3EC; --charcoal:#17130C; --paper-soft:#FFFCF6;
  --ink:#17130C; --ink-soft:#5C5546; --gray:#8A8272;
  --line:rgba(23,19,12,.14); --line-inv:rgba(247,243,236,.20);
  --blue:#2438E8; --violet:#7C5CFF; --orange:#FF5C38; --amber:#FFB528; --violet-card:#6E4CF7;
  --sans:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --gutter:clamp(20px,4vw,64px);
  --chamfer-sq:polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--blue);color:#F7F3EC}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
img,svg{max-width:100%}

/* nav + footer, matching the rest of the site */
.brandbar{display:flex;width:100%;height:3px;overflow:hidden}
.brandbar i{flex:1;display:block}
.brandbar i:nth-child(1){background:var(--blue)}.brandbar i:nth-child(2){background:var(--violet)}
.brandbar i:nth-child(3){background:var(--orange)}.brandbar i:nth-child(4){background:var(--amber)}
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:16px var(--gutter);background:rgba(247,243,236,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav .brandbar{position:absolute;left:0;right:0;bottom:0}
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.mark{width:30px;height:30px;flex:0 0 auto;display:block;position:relative;overflow:hidden;clip-path:var(--chamfer-sq);background:#2438E8}
.mark i{position:absolute;inset:0;display:block}
.mark i:nth-child(1){background:#2438E8;clip-path:polygon(-60% 0,2.8% 0,43.6% 100%,-19.2% 100%)}
.mark i:nth-child(2){background:#7C5CFF;clip-path:polygon(2.8% 0,35.7% 0,76.5% 100%,43.6% 100%)}
.mark i:nth-child(3){background:#FF5C38;clip-path:polygon(35.7% 0,67.1% 0,107.9% 100%,76.5% 100%)}
.mark i:nth-child(4){background:#FFB528;clip-path:polygon(67.1% 0,100% 0,140.8% 100%,107.9% 100%)}
.wordmark{font-size:1.06rem;letter-spacing:-.02em;line-height:1}
.wordmark b{font-weight:700}.wordmark span{font-weight:400;color:var(--ink-soft)}
.nav-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-right a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.nav-right a:hover{color:var(--blue)}
.theme-toggle{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);clip-path:var(--chamfer-sq);transition:background .3s}
.theme-toggle svg{width:16px;height:16px;fill:currentColor}
.theme-toggle .i-moon{display:none}
.theme-toggle:hover{background:var(--ink);color:var(--paper)}

.site-footer{background:var(--ink);color:var(--cream);margin-top:clamp(60px,8vw,110px)}
.site-footer .brandbar{height:4px}
.f-in{padding:30px var(--gutter);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,236,.6)}
.f-in a{color:rgba(247,243,236,.85)}
.f-in a:hover{color:var(--amber)}

/* ---------- blog index ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:clamp(110px,14vh,150px) var(--gutter) 0}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px}
.index-head h1{font-size:clamp(2.1rem,5.6vw,3.7rem);margin-bottom:16px}
.index-head p{color:var(--ink-soft);max-width:62ch;font-size:1.04rem}
.index-head .rule{display:flex;height:4px;width:120px;margin-top:28px}
.index-head .rule i{flex:1}
.index-head .rule i:nth-child(1){background:var(--blue)}.index-head .rule i:nth-child(2){background:var(--violet)}
.index-head .rule i:nth-child(3){background:var(--orange)}.index-head .rule i:nth-child(4){background:var(--amber)}

.posts{display:grid;gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,56px)}
.post{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--paper-soft);padding:clamp(24px,3vw,34px);border-left:5px solid var(--pc,var(--blue));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.post:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(23,19,12,.13)}
.post .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pc,var(--blue));display:block;margin-bottom:10px}
.post h2{font-size:clamp(1.2rem,2.3vw,1.6rem);margin-bottom:10px}
.post p{color:var(--ink-soft);font-size:.95rem;max-width:60ch}
.post .meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:14px}
.post .thumb{width:100%;height:auto}
@media(max-width:760px){.post{grid-template-columns:1fr}.post .thumb{order:-1;max-width:220px}}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding:clamp(110px,14vh,150px) var(--gutter) 0}
.crumbs{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-bottom:20px}
.crumbs a:hover{color:var(--blue)}
.article h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:18px}
.standfirst{font-size:1.14rem;line-height:1.5;color:var(--ink-soft);margin-bottom:22px}
.byline{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}

.article h2{font-size:clamp(1.35rem,2.8vw,1.85rem);margin:44px 0 14px}
.article h3{font-size:1.1rem;margin:28px 0 10px}
.article p{margin-bottom:16px;font-size:1.02rem}
.article p a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.article ul.body,.article ol.body{margin:0 0 20px}
.article ul.body li,.article ol.body li{position:relative;padding-left:24px;margin-bottom:9px;font-size:1.02rem}
.article ul.body li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--blue);clip-path:var(--chamfer-sq)}
.article ol.body{counter-reset:n}
.article ol.body li{counter-increment:n}
.article ol.body li::before{content:counter(n);position:absolute;left:0;top:.05em;font-family:var(--mono);font-size:.8rem;color:var(--blue)}
.article strong{font-weight:700}

.pull{border-left:4px solid var(--amber);padding:6px 0 6px 20px;margin:28px 0;
  font-size:1.16rem;line-height:1.45;letter-spacing:-.02em;font-weight:700}
.callout{background:var(--paper-soft);padding:22px 24px;margin:28px 0;border-left:4px solid var(--violet);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.callout b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:400;margin-bottom:8px}
.callout p{margin:0;font-size:.96rem;color:var(--ink-soft)}

/* figures — the diagrams */
figure{margin:34px 0}
figure svg{width:100%;height:auto;display:block}
figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--gray);margin-top:12px;line-height:1.7}
.fig-frame{background:var(--paper-soft);padding:clamp(18px,3vw,30px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}

/* diagram text colours, theme-aware */
.d-ink{fill:var(--ink)} .d-soft{fill:var(--ink-soft)} .d-gray{fill:var(--gray)}
.d-stroke{stroke:var(--line)} .d-mono{font-family:var(--mono)} .d-sans{font-family:var(--sans)}

.endcap{margin:48px 0 0;background:var(--blue);color:var(--cream);padding:clamp(26px,3.6vw,40px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
.endcap h3{font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:10px}
.endcap p{color:rgba(247,243,236,.85);font-size:.98rem;max-width:54ch;margin-bottom:20px}
.endcap .b{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;
  background:var(--cream);color:var(--charcoal);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 62%,90% 100%,0 100%);transition:background .3s}
.endcap .b:hover{background:var(--amber)}

.more{margin-top:clamp(40px,5vw,60px)}
.more h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);font-weight:400;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.more a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:-.02em;transition:color .3s}
.more a:hover{color:var(--blue)}
.more a span{display:block;font-weight:400;font-size:.9rem;color:var(--ink-soft);letter-spacing:0;margin-top:3px}

/* night */
:root[data-theme="night"]{--paper:#0B0913;--paper-soft:#151121;--ink:#F3EFFF;--ink-soft:#BDB5DC;--gray:#8F87AD;--line:rgba(124,92,255,.30);color-scheme:dark}
:root[data-theme="night"] body{background:#0B0913}
:root[data-theme="night"] .nav{background:rgba(11,9,19,.9);box-shadow:0 1px 0 rgba(124,92,255,.35)}
:root[data-theme="night"] .theme-toggle{border-color:rgba(124,92,255,.6);box-shadow:0 0 14px rgba(124,92,255,.4)}
:root[data-theme="night"] .theme-toggle .i-sun{display:none}
:root[data-theme="night"] .theme-toggle .i-moon{display:block}
:root[data-theme="night"] .theme-toggle:hover{background:#7C5CFF;color:#0B0913}
:root[data-theme="night"] .post,:root[data-theme="night"] .callout,:root[data-theme="night"] .fig-frame{
  background:rgba(21,17,33,.75);box-shadow:0 0 0 1px rgba(124,92,255,.24)}
:root[data-theme="night"] .eyebrow,:root[data-theme="night"] .article p a,:root[data-theme="night"] .more a:hover{color:#A78BFF}
:root[data-theme="night"] .brandbar{box-shadow:0 0 16px rgba(124,92,255,.6)}
:root[data-theme="night"] .site-footer{background:rgba(8,6,15,.9)}
:root[data-theme="night"] .article ul.body li::before,:root[data-theme="night"] .article ol.body li::before{background:#A78BFF}
:root[data-theme="night"] .article ol.body li::before{background:none;color:#A78BFF}

@media(max-width:760px){
  .eyebrow,.crumbs,.byline,.post .tag,.post .meta,figcaption,.more h4,.f-in,.nav-right a,.callout b{font-size:.73rem!important}
  .theme-toggle{width:44px!important;height:44px!important}
  .brand,.nav-right a,.f-in a{min-height:44px;display:inline-flex;align-items:center}
  .article h1{font-size:clamp(1.8rem,7vw,2.4rem)}
}
@media print{.nav,.endcap,.more,.site-footer{display:none}}