/* The blog: the homepage's paper, ink and signal red, Aspekta for type, Geist Mono for labels.
   Built pages come from tools/build-blog.mjs. */
.bl{background:var(--paper);color:var(--ink);--fg:var(--ink);--fg-soft:var(--soft);--fg-line:rgba(22,17,14,.12)}
.bl main{position:relative;z-index:1;padding-top:72px}
.bl .nav{color:var(--ink)}
.bl .nav-links a[aria-current]::after{transform:scaleX(1)}
.bl-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:80;background:var(--signal);transform:scaleX(0);transform-origin:0 50%}
.bl .kicker{color:var(--soft)}

/* ---- index */
.bl-top{padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(30px,5vh,56px);display:flex;flex-direction:column;gap:20px}
.bl-top h1{font-family:var(--f-display);font-weight:500;font-size:clamp(42px,6vw,92px);line-height:.95;letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.bl-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--soft);max-width:48ch}
.bl-lead{padding-bottom:clamp(48px,8vh,96px)}

.bl-card{display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.bl-card[hidden]{display:none}
/* covers come in every shape: show each whole, framed by a soft blurred copy of itself */
.bl-img,.bp-frame{display:block;position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);isolation:isolate}
.bl-img img,.bp-frame img{position:absolute;inset:0;width:100%;height:100%}
.bl-img .bk,.bp-frame .bk{object-fit:cover;filter:blur(28px) saturate(1.25);transform:scale(1.25);opacity:.85}
.bl-img .fg,.bp-frame .fg{object-fit:contain;transition:transform .9s var(--ease)}
.bl-card:hover .bl-img .fg{transform:scale(1.03)}
.bl-txt{display:flex;flex-direction:column;gap:10px}
.bl-meta{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.bl-meta b{font-weight:500;color:var(--signal)}
.bl-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.bl-title{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.18;letter-spacing:-.025em;text-wrap:balance;transition:color .3s}
.bl-card:hover .bl-title{color:var(--signal)}
.bl-desc{font-size:15px;line-height:1.55;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.bl-card.big{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.bl-card.big .bl-img{aspect-ratio:16/10.5;border-radius:26px}
.bl-card.big .bl-title{font-size:clamp(28px,3.1vw,48px);line-height:1.04;letter-spacing:-.04em}
.bl-card.big .bl-desc{font-size:clamp(15.5px,1.2vw,18px);-webkit-line-clamp:4}
.bl-card.big .bl-txt{gap:16px}
.bl-read{align-self:flex-start;margin-top:10px;display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--cream);font-weight:500;font-size:15px;transition:background .3s}
.bl-read::after{content:"→";margin-left:10px;transition:transform .3s var(--ease)}
.bl-card.big:hover .bl-read{background:var(--signal)}
.bl-card.big:hover .bl-read::after{transform:translateX(3px)}

.bl-list{padding-bottom:clamp(80px,12vh,140px);border-top:1px solid var(--line);padding-top:clamp(36px,5vh,56px)}
.bl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vh,44px)}
.bl-filter button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:14.5px;font-weight:500;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.bl-filter button span{font-family:var(--f-mono);font-size:11px;color:var(--soft);transition:color .25s}
.bl-filter button:hover{border-color:#CFC6B6}
.bl-filter button.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.bl-filter button.on span{color:rgba(243,239,230,.55)}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,36px)}
.bl-grid:not(.filtered) .is-lead{display:none}

/* ---- post */
.bp-head{padding-top:clamp(48px,8vh,96px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:980px}
.bp-crumbs{display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.bp-crumbs a:hover{color:var(--signal)}.bp-crumbs a:last-child{color:var(--signal)}
.bp-crumbs i{font-style:normal;opacity:.5}
.bp-head h1{font-family:var(--f-display);font-weight:500;font-size:clamp(36px,4.9vw,72px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.bp-lede{font-size:clamp(16.5px,1.35vw,20px);line-height:1.55;color:var(--soft);max-width:60ch;text-wrap:pretty}
.bp-by{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px;font-size:14.5px}
.bp-av{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.bp-av svg{width:20px;height:20px}
.bp-by>span:nth-child(2){display:flex;flex-direction:column;text-align:left;line-height:1.3}
.bp-by b{font-weight:500}.bp-by em{font-style:normal;color:var(--soft);font-size:13.5px}
.bp-share{display:flex;gap:6px;margin-left:14px;padding-left:18px;border-left:1px solid var(--line)}
.bp-share a,.bp-share button{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-weight:500;display:inline-flex;align-items:center;cursor:pointer;transition:border-color .25s,color .25s}
.bp-share a:hover,.bp-share button:hover{border-color:var(--ink)}
.bp-share button.done{color:var(--signal);border-color:var(--signal)}
.bp-cover{margin-top:clamp(36px,6vh,64px);max-width:1180px}
.bp-frame{aspect-ratio:16/9;border-radius:28px}

.bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-top:clamp(48px,7vh,80px);padding-bottom:clamp(70px,10vh,120px);max-width:1320px}
.bp-toc{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 130px);overflow:auto;padding-right:6px}
.bp-toc p{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.bp-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.bp-toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1.5px solid transparent;font-size:13.5px;line-height:1.35;color:var(--soft);transition:color .25s,border-color .25s}
.bp-toc a:hover{color:var(--ink)}
.bp-toc a.on{color:var(--ink);border-left-color:var(--signal)}

/* the article itself */
.bp-body{font-size:clamp(16.5px,1.2vw,18px);line-height:1.72;color:#2A231E;min-width:0}
.bp-body>*+*{margin-top:1.15em}
.bp-body h2{font-family:var(--f-display);font-weight:500;font-size:clamp(25px,2.1vw,32px);line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin-top:2.1em;scroll-margin-top:96px;text-wrap:balance}
.bp-body h3{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin-top:1.8em}
.bp-body h4{font-weight:500;font-size:1em;margin-top:1.6em;color:var(--ink)}
.bp-body h2+*,.bp-body h3+*{margin-top:.7em}
.bp-body strong,.bp-body b{font-weight:500;color:var(--ink)}
.bp-body a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(245,54,44,.55);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .25s}
.bp-body a:hover{color:var(--signal)}
.bp-body ul,.bp-body ol{padding-left:1.3em}
.bp-body li+li{margin-top:.45em}
.bp-body li::marker{color:var(--signal)}
.bp-body li p{margin:0}
.bp-body blockquote{margin-left:0;padding:6px 0 6px 24px;border-left:2px solid var(--signal);font-family:var(--f-display);font-size:1.15em;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.bp-body blockquote p+p{margin-top:.6em}
.bp-body code{font-family:var(--f-mono);font-size:.84em;padding:.12em .42em;border-radius:6px;background:var(--paper-2);border:1px solid var(--line)}
.bp-body pre{font-family:var(--f-mono);font-size:13.5px;line-height:1.65;background:#16110E;color:#F3EFE6;padding:18px 20px;border-radius:14px;overflow-x:auto;white-space:pre}
.bp-body pre code{background:none;border:0;padding:0;font-size:inherit}
.bp-body img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);margin-block:.6em}
.bp-body figure.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bp-body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;min-width:520px}
.bp-body th,.bp-body td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.bp-body tr:last-child td{border-bottom:0}
.bp-body th{font-weight:500;color:var(--ink);background:rgba(22,17,14,.03)}
.bp-body td p,.bp-body th p{margin:0}
.bp-body hr{border:0;height:1px;background:var(--line);margin-block:2.4em}
.bp-body iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}

.bp-more{padding-bottom:clamp(80px,12vh,140px);border-top:1px solid var(--line);padding-top:clamp(40px,6vh,64px)}
.bp-more-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(26px,4vh,40px)}
.bp-more-head h2{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em}

/* ---- closing CTA and footer: the homepage's dark ink */
.bl-hire{background:var(--ink);color:var(--cream);padding-block:clamp(70px,11vh,120px)}
.bl-hire-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:end}
.bl-hire .kicker{color:rgba(243,239,230,.55);margin-bottom:20px}
.bl-hire h2{font-family:var(--f-display);font-weight:500;font-size:clamp(38px,5vw,76px);line-height:.95;letter-spacing:-.045em;max-width:13ch}
.bl-hire p:not(.kicker){margin-top:20px;font-size:17px;line-height:1.55;color:rgba(243,239,230,.62);max-width:46ch}
.bl-hire-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bl-hire-cta span{font-size:13.5px;color:rgba(243,239,230,.5)}
.bl-foot{background:#0B0A0D;color:var(--cream);padding-top:clamp(56px,8vh,90px)}
.bl-foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14.5px}
.bl-foot-cols>div{display:flex;flex-direction:column;gap:10px;color:rgba(243,239,230,.55)}
.bl-foot-cols b{color:var(--cream);font-weight:500;margin-bottom:4px}
.bl-foot-cols a{transition:color .25s}.bl-foot-cols a:hover{color:var(--cream)}
.bl-foot-brand svg{height:30px;width:auto;color:var(--cream)}
.bl-foot-brand p{font-family:var(--f-display);font-size:24px;letter-spacing:-.03em;color:var(--cream);font-weight:500;line-height:1.15;max-width:14ch;margin-top:12px}
.bl-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:rgba(243,239,230,.4);padding-block:22px 28px;margin-top:clamp(48px,7vh,80px);border-top:1px solid rgba(243,239,230,.08)}

/* ---- smaller screens */
@media (max-width:1100px){
  .bp-grid{grid-template-columns:minmax(0,1fr);max-width:780px}
  .bp-grid>aside{display:none}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  .bl-card.big{grid-template-columns:minmax(0,1fr)}
  .bl-hire-in{grid-template-columns:minmax(0,1fr)}
  .bl-foot-cols{grid-template-columns:1fr 1fr}.bl-foot-brand{grid-column:1/-1}
  .bp-share{margin-left:0;padding-left:0;border-left:0;width:100%;justify-content:center}
}
@media (max-width:640px){
  .bl-grid{grid-template-columns:minmax(0,1fr)}
  .bl-filter{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .bl-filter::-webkit-scrollbar{display:none}
  .bl-filter button{flex:none}
  .bp-frame{border-radius:18px;aspect-ratio:4/3}
  .bp-body pre{font-size:12.5px;padding:14px 16px}
  .bl-img{border-radius:16px}
}