/* ==========================================================================
   Bricks — blog styles
   Shared by /blog (the listing) and every post file.
   Section 1 is the site's shared chrome, lifted verbatim from the landing
   pages so the blog reads as the same product. Sections 2+ are blog-only.
   ========================================================================== */

/* ---------- 1. shared chrome : tokens, reset, nav, footer, cta ---------- */
/* Geist, cut down to the characters the site actually sets. The latin slice is the
   only one the pages here need, so it's the only one preloaded; the latin-ext slice
   exists so an accented name in a future post still comes out in Geist rather than
   dropping to Arial mid-word — the browser fetches it only if such a character is
   rendered. Both are generated from fonts/Geist-VariableFont_wght.ttf (see fonts/README). */
@font-face{
  font-family:"Geist";
  src:url("/fonts/Geist-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190,U+2192,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist";
  src:url("/fonts/Geist-latin-ext.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02AF,U+0300-0301,U+0303,U+0309,U+0323,U+0330,U+1E00-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --page:#F1F1EF;
  --card:#FFFFFF;
  --ink:#141414;
  --gray-6:#5C5C58;
  /* gray-5 is the lightest grey that still clears WCAG AA on white (4.6:1).
     gray-4 stays for hairlines and dots — not for text. */
  --gray-5:#75756F;
  --gray-4:#9C9C97;
  /* the bar's real height, so the space reserved for it is right on the first paint.
     the nav script still measures and overwrites this — the point of the default is
     that the correction is a no-op instead of an 18px shift of everything below. */
  --nav-h:92px;
  --line:#E5E5E1;
  --off:#F4F4F1;
  --blue:#2573F4;
  --green:#1B9E5B;
  --prose:#242422;              /* long-form body text — a touch lighter than --ink */
  --font:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --page-zoom:.92;
  --pad-x:clamp(32px,5.5vw,88px);
  /* the home page's hero plate is the site's horizontal boundary: nothing in the page body
     sits outside its left/right edges. --edge is the gutter that lands on those edges,
     falling back to the plain gutter on windows too narrow for the plate to be the tighter
     of the two. --edge resolves its 100% against the element it's used on, so only apply it
     to full-width blocks. */
  --panel-w:1500px;
  --edge:max(var(--pad-x),calc((100% - var(--panel-w)) / 2));
}
/* the bar loses a couple of pixels once the links collapse */
@media(max-width:880px){:root{--nav-h:90px}}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--card);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  zoom:var(--page-zoom);
}
::selection{background:var(--ink);color:#fff}

/* nav — scoped to the page's own bar, so the contents rail's <nav> is untouched */
body > nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:22px var(--pad-x);
  border:1px solid transparent;border-radius:0;
  /* the glass reads from the very top — docking only changes the bar's shape */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
          backdrop-filter:blur(16px) saturate(1.4);
  transition:left .45s cubic-bezier(.16,1,.3,1),right .45s cubic-bezier(.16,1,.3,1),
             top .45s cubic-bezier(.16,1,.3,1),padding .35s ease,
             background .35s ease,box-shadow .4s ease,
             border-color .35s ease,border-radius .35s ease;
}
nav.dock{
  top:12px;
  left:clamp(24px,14vw,340px);right:clamp(24px,14vw,340px);
  padding:14px clamp(20px,2.6vw,34px);
  border-color:var(--line);
  border-radius:16px;
  box-shadow:0 14px 40px -18px rgba(20,20,20,.3);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);justify-self:start}
.logo b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.logo img{height:26px;width:auto;display:block}
.nav-links{display:flex;gap:46px;justify-self:center;align-items:center;align-self:stretch}
.nav-links > a,.nav-trigger{
  color:var(--gray-6);text-decoration:none;font-size:14.5px;font-weight:500;
  transition:color .15s;
}
.nav-links > a:hover,.nav-item:hover .nav-trigger,.nav-item:focus-within .nav-trigger,
.nav-item.is-open .nav-trigger{color:var(--ink)}
.nav-links > a[aria-current="page"]{color:var(--ink)}
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-trigger{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;font-family:var(--font);padding:0;
}
.nav-trigger svg{transition:transform .25s ease}
.nav-item:hover .nav-trigger svg,.nav-item:focus-within .nav-trigger svg,
.nav-item.is-open .nav-trigger svg{transform:rotate(180deg)}
.nav-drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  margin-top:14px;padding:8px;
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:14px;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
          backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 20px 48px -20px rgba(20,20,20,.32);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;width:max-content;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility .2s;
  z-index:5;
}
/* invisible bridge so the mouse can cross the gap into the menu without it closing */
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop,
.nav-drop.is-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
/* parked on <body>; top/left are written by nav-glass.js each frame */
.nav-drop.is-portal{position:fixed;margin-top:0;z-index:119}
.nav-drop.is-portal::before{display:none}
.nav-drop a{
  display:block;font-size:13.5px;font-weight:500;color:var(--gray-6);
  text-decoration:none;padding:9px 14px;border-radius:9px;white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav-drop a:hover{background:var(--off);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:22px;justify-self:end}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:500;
  padding:11px 20px;border-radius:10px;border:1px solid var(--ink);
  transition:background .15s,color .15s;cursor:pointer;
}
.btn:hover{background:#2E2E2C}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* mobile nav / hamburger */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;margin:0;
  background:none;border:none;cursor:pointer;
}
.nav-burger span{
  display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}
nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.menu-open .nav-burger span:nth-child(2){opacity:0}
nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-cta{display:none}   /* Book a call CTA — only inside the open mobile menu */

@media(max-width:880px){
  .nav-links{display:none}
  .nav-right{grid-column:3}
  .nav-right .btn{display:none}
  .nav-burger{display:flex}

  nav.menu-open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:calc(100% + 10px);left:var(--pad-x);right:var(--pad-x);
    padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 24px 54px -22px rgba(20,20,20,.34);
  }
  nav.dock.menu-open .nav-links{left:clamp(20px,2.6vw,34px);right:clamp(20px,2.6vw,34px)}

  nav.menu-open .nav-links > a,
  nav.menu-open .nav-trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:13px 14px;border-radius:10px;box-sizing:border-box;
    font-size:15px;color:var(--ink);
  }
  nav.menu-open .nav-links > a:active,
  nav.menu-open .nav-trigger:active{background:var(--off)}
  nav.menu-open .nav-links .menu-cta{
    justify-content:center;color:#fff;padding:13px 20px;
    width:100%;margin-top:6px;
  }
  nav.menu-open .nav-links .menu-cta:active{background:#2E2E2C}
  nav.menu-open .nav-item{width:100%;display:block}

  nav.menu-open .nav-item .nav-drop{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:block;width:auto;margin:0;padding:0;
    background:transparent;border:none;box-shadow:none;border-radius:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    max-height:0;overflow:hidden;
    transition:max-height .32s cubic-bezier(.16,1,.3,1);
  }
  nav.menu-open .nav-item.sub-open .nav-drop{max-height:640px;padding:2px 0 6px}
  nav.menu-open .nav-item.sub-open .nav-trigger svg{transform:rotate(180deg)}
  nav.menu-open .nav-drop::before{display:none}
  nav.menu-open .nav-drop a{padding:11px 14px 11px 28px;font-size:14px;color:var(--gray-6)}
}

/* entrance + scroll reveal */
/* each block drifts up out of a soft blur and settles on a long tail, one beat behind
   the last. the drift and the fade run on their own curves — the movement decelerates
   hard and then keeps settling, while the opacity comes up evenly — which is what stops
   it reading as a pop. html.preload holds the whole sequence on frame one until the
   fonts are in (see the script at the end of the head). */
/* the entrance opens at .01 rather than a flat 0 on purpose: chrome treats an element
   painted at *exactly* opacity 0 as not painted at all, so it never becomes a Largest
   Contentful Paint candidate — and with the whole hero fading up from zero the page
   reported no LCP at all. a hundredth of a percent is invisible and puts LCP back on
   the map. (mirrors the note on the same rule in index.html.) */
.rise{
  opacity:.01;transform:translateY(28px);
  animation:riseUp 1.6s cubic-bezier(.16,1,.3,1) both,
            riseIn 1.15s cubic-bezier(.33,0,.25,1) both;
}
.rise.d1{animation-delay:.16s}.rise.d2{animation-delay:.32s}
.rise.d3{animation-delay:.48s}.rise.d4{animation-delay:.64s}.rise.d5{animation-delay:.82s}
@keyframes riseUp{
  from{transform:translateY(28px);filter:blur(8px)}
  to  {transform:none;filter:blur(0)}
}
@keyframes riseIn{from{opacity:.01}to{opacity:1}}
/* two exceptions to the blur: the bar rides on live glass, and a filter of its own would
   flatten the backdrop blur; the product shot is a deep subtree that would have to be
   re-rasterised whole on every frame of it. both get the same move without the focus pull. */
nav.rise{transform:translateY(-14px);animation-name:riseBar}
@keyframes riseBar{from{opacity:.01}to{opacity:1;transform:none}}
.ind-shot.rise,.post-hero.rise{animation-name:riseMove,riseIn}
@keyframes riseMove{from{transform:translateY(28px)}to{transform:none}}
html.preload .rise{animation-play-state:paused}
.reveal{
  opacity:.01;transform:translateY(16px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:none}

/* shared bits */
.sec{background:var(--card);padding:clamp(44px,6vw,84px) var(--edge) clamp(20px,3vw,44px);overflow:hidden}
.kicker{
  display:block;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-5);margin-bottom:18px;
}
.textlink{
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .15s;
}
.textlink:hover{border-color:var(--ink)}
.textlink .arr{transition:transform .2s}
.textlink:hover .arr{transform:translateX(3px)}
.uline{position:relative;white-space:nowrap}
.uline svg{position:absolute;left:-2%;right:-2%;width:104%;height:.32em;bottom:-.18em;overflow:visible}
.uline path{
  fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .8s cubic-bezier(.5,0,.3,1) .9s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* final cta (black pill) */
.sec-cta{padding-top:clamp(40px,5vw,70px);padding-bottom:clamp(40px,5vw,70px)}
.cta-pill{position:relative;overflow:hidden;background:var(--ink);border-radius:clamp(36px,5.5vw,72px);padding:clamp(48px,6vw,88px) clamp(24px,4vw,64px)}
.cta-streaks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.streak{position:absolute;top:0;left:0;border-radius:100px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));opacity:0;will-change:transform,opacity}
.cta-inner{
  position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.cta-inner.in{opacity:1;transform:none}
.cta-inner h2{color:#fff;font-size:clamp(38px,4.8vw,68px);font-weight:500;letter-spacing:-.03em;margin:0 0 clamp(48px,7vw,88px)}
.cta-ctas{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-pill .btn{background:#fff;color:var(--ink);border-color:#fff}
.cta-pill .btn:hover{background:#E7E7E2}

/* footer */
.bg-bricks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sec-footer{position:relative;padding-top:clamp(80px,10vw,150px);padding-bottom:clamp(28px,3.5vw,44px)}
.sec-footer .bg-bricks{
  opacity:.055;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 72%);
          mask-image:linear-gradient(to top,#000 8%,transparent 72%);
}
.foot-grid,.foot-legal{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:clamp(72px,9vw,130px)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{font-size:14px;color:var(--gray-6);max-width:30ch;margin-top:16px}
.foot-sub{display:flex;gap:12px;margin-top:64px;max-width:500px}
.foot-sub input{
  flex:1;min-width:0;
  font-family:var(--font);font-size:16px;color:var(--ink);
  padding:14px 22px;background:#fff;border:1px solid var(--line);border-radius:14px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.foot-sub input::placeholder{color:var(--gray-4)}
.foot-sub input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}
.foot-sub .btn{padding:14px 30px;font-size:16px;flex:none;border-radius:14px}
.foot-col h3{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-5);margin-bottom:14px}
.foot-col a{display:block;font-size:14.5px;color:var(--gray-6);text-decoration:none;padding:4.5px 0;transition:color .15s}
.foot-col a:hover{color:var(--ink)}
.foot-legal{padding-top:22px;display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;font-size:12.5px;color:var(--gray-5)}
.foot-legal a{color:var(--gray-5);text-decoration:none}
.foot-legal a:hover{color:var(--ink)}
.foot-legal .links{display:flex;gap:20px}


/* ---------- 2. post covers ---------- */
/* Covers with no image fall back to a brand tint carrying the brick courses
   from the product's card artwork. Tint is picked per-post in blog.js. */
.cover{
  position:relative;overflow:hidden;
  background:var(--tint,var(--off));
  border:1px solid rgba(20,20,20,.07);
  border-radius:16px;
  aspect-ratio:16/10;
}
.cover::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40'%3E%3Cg fill='none' stroke='%23161616' stroke-opacity='.13' stroke-width='1.4'%3E%3Crect x='2' y='2' width='60' height='16' rx='5'/%3E%3Crect x='-30' y='22' width='60' height='16' rx='5'/%3E%3Crect x='34' y='22' width='60' height='16' rx='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 45px;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 0%,#000 38%,transparent 96%);
          mask-image:radial-gradient(125% 105% at 50% 0%,#000 38%,transparent 96%);
}
/* bigger plates get bigger courses, so the texture keeps the same visual weight */
.lead-card .cover::after,.post-hero .cover::after{background-size:112px 70px}
.cover img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.cover.has-img::after{display:none}


/* ---------- 3. blog listing ---------- */
.blog-hero{padding:calc(var(--nav-h,74px) + clamp(52px,7vw,104px)) var(--pad-x) clamp(28px,3.5vw,48px)}
.blog-hero-in{max-width:1200px;margin:0 auto}
.blog-hero h1{
  font-size:clamp(40px,5vw,72px);font-weight:450;line-height:1.04;letter-spacing:-.034em;
  max-width:16ch;margin:0 0 22px;text-wrap:balance;
}
.blog-hero .sub{font-size:clamp(16px,1.25vw,18.5px);color:var(--gray-6);max-width:52ch}

/* category filters */
.blog-filters{
  padding:0 var(--pad-x);
  max-width:calc(1200px + var(--pad-x) * 2);margin:0 auto clamp(28px,3.5vw,48px);
}
.filter-row{
  max-width:1200px;margin:0 auto;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-bottom:clamp(20px,2.5vw,32px);border-bottom:1px solid var(--line);
}
.filter-row.bare{padding-bottom:0}   /* single-category blog: keep the rule, lose the pills */
.filter{
  font-family:var(--font);font-size:13.5px;font-weight:500;
  color:var(--gray-6);background:transparent;
  border:1px solid var(--line);border-radius:100px;
  padding:8px 16px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.filter:hover{color:var(--ink);border-color:#D6D6D1}
.filter[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter .n{opacity:.5;margin-left:6px;font-variant-numeric:tabular-nums}

/* the lead (featured) post */
.blog-lead{padding:0 var(--pad-x);margin-bottom:clamp(40px,5vw,72px)}
.lead-card{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center;
  text-decoration:none;color:inherit;
}
@media(max-width:880px){.lead-card{grid-template-columns:1fr;gap:24px}}
.lead-card .cover{aspect-ratio:16/11;box-shadow:0 40px 80px -50px rgba(20,20,20,.34)}
.lead-card:hover .cover img{transform:scale(1.03)}
.lead-body{min-width:0}
.lead-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);background:var(--off);border-radius:100px;padding:6px 13px;
  margin-bottom:20px;
}
.lead-badge .pip{width:5px;height:5px;border-radius:50%;background:var(--green)}
.lead-body h2{
  font-size:clamp(28px,3.1vw,44px);font-weight:450;line-height:1.08;letter-spacing:-.03em;
  margin:0 0 16px;text-wrap:balance;
}
.lead-card:hover .lead-body h2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lead-body p{font-size:16px;color:var(--gray-6);max-width:48ch;margin-bottom:22px}

/* the grid */
.blog-grid-sec{padding:0 var(--pad-x) clamp(30px,4vw,56px)}
.blog-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px);
}
@media(max-width:1040px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}

.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card .cover{margin-bottom:18px}
.post-card:hover .cover img{transform:scale(1.04)}
.post-card h3{
  font-size:clamp(18.5px,1.5vw,21px);font-weight:500;line-height:1.25;letter-spacing:-.02em;
  margin-bottom:10px;text-wrap:balance;
}
.post-card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.post-card p{
  font-size:14.5px;color:var(--gray-6);margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card .meta-row{margin-top:auto}

/* the shared date · read-time · category line */
.meta-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:var(--gray-5);
}
.meta-row .dot{width:3px;height:3px;border-radius:50%;background:var(--gray-4);flex:none}
.meta-row .cat{
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gray-6);background:var(--off);border-radius:100px;padding:4px 10px;
}

/* load more */
.more-wrap{max-width:1200px;margin:clamp(36px,4.5vw,64px) auto 0;display:flex;justify-content:center}
.more-wrap[hidden]{display:none}

/* empty state */
.blog-empty{
  max-width:1200px;margin:0 auto;
  border:1px dashed #DCDCD6;border-radius:22px;background:var(--off);
  padding:clamp(52px,7vw,96px) clamp(24px,4vw,48px);
  text-align:center;
}
.blog-empty svg{display:block;margin:0 auto 22px;opacity:.35}
.blog-empty h2{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;margin-bottom:12px}
.blog-empty p{font-size:15.5px;color:var(--gray-6);max-width:42ch;margin:0 auto}


/* ---------- 4. article ---------- */
/* reading progress — a hairline that fills as you move down the piece */
.read-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:130;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--ink);
  will-change:transform;
}

.post-head{padding:calc(var(--nav-h,74px) + clamp(44px,6vw,88px)) var(--pad-x) 0}
.post-head-in{max-width:720px;margin:0 auto;text-align:center}
.back-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:500;color:var(--gray-5);text-decoration:none;
  margin-bottom:clamp(26px,3.5vw,44px);transition:color .15s;
}
.back-link:hover{color:var(--ink)}
.back-link .arr{transition:transform .2s}
.back-link:hover .arr{transform:translateX(-3px)}
.post-head h1{
  font-size:clamp(34px,4.4vw,60px);font-weight:450;line-height:1.06;letter-spacing:-.032em;
  margin:0 0 20px;text-wrap:balance;
}
.standfirst{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--gray-6);max-width:44ch;margin:0 auto 28px}
.post-head .meta-row{justify-content:center}
.post-hero{max-width:1000px;margin:clamp(36px,4.5vw,64px) auto 0;padding:0 var(--pad-x)}
.post-hero .cover{aspect-ratio:16/8;box-shadow:0 42px 84px -46px rgba(20,20,20,.4)}
.post-hero figcaption{font-size:13px;color:var(--gray-5);text-align:center;margin-top:12px}

/* --- the measure ---
   Geist's ch is unusually wide (~0.66em), so ch units overshoot badly here.
   680px at 17.5px lands at roughly 75 characters a line. */
:root{--measure:680px}

/* three columns keep the measure centred while the toc rides the left rail */
.post-wrap{
  max-width:1320px;margin:0 auto;
  padding:clamp(40px,5vw,72px) var(--pad-x) clamp(24px,3vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:40px;
}
@media(min-width:1180px){
  .post-wrap{grid-template-columns:200px minmax(0,1fr) 200px;gap:0 clamp(24px,3vw,40px)}
  .post-wrap .post-body{grid-column:2}
}
.post-toc{display:none}
@media(min-width:1180px){
  .post-toc{
    display:block;grid-column:1;grid-row:1;
    position:sticky;top:calc(var(--nav-h,74px) + 40px);align-self:start;
    max-height:calc(100vh - var(--nav-h,74px) - 80px);overflow-y:auto;
  }
}
.post-toc h2{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-5);margin-bottom:12px;
}
.post-toc a{
  display:block;font-size:13.5px;line-height:1.35;color:var(--gray-6);text-decoration:none;
  padding:7px 0 7px 14px;border-left:1.5px solid var(--line);
  transition:color .15s,border-color .15s;
}
.post-toc a:hover{color:var(--ink)}
.post-toc a.on{color:var(--ink);border-color:var(--ink);font-weight:500}

/* --- prose --- */
.post-body{
  width:min(var(--measure),100%);margin:0 auto;
  font-size:17.5px;line-height:1.72;color:var(--prose);
}
.post-body > * + *{margin-top:1.35em}
.post-body h2{
  font-size:clamp(24px,2.3vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.025em;
  color:var(--ink);margin-top:2.1em;margin-bottom:.05em;scroll-margin-top:110px;
}
.post-body h3{
  font-size:clamp(18.5px,1.5vw,21px);font-weight:600;line-height:1.3;letter-spacing:-.015em;
  color:var(--ink);margin-top:1.9em;margin-bottom:-.15em;scroll-margin-top:110px;
}
.post-body h2 + p,.post-body h3 + p,.post-body h2 + ul,.post-body h3 + ul{margin-top:.75em}
.post-body a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:#C9C9C3;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:text-decoration-color .15s;
}
.post-body a:hover{text-decoration-color:var(--ink)}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body ul,.post-body ol{padding-left:0;list-style:none}
.post-body li{position:relative;padding-left:26px}
.post-body li + li{margin-top:.5em}
.post-body ul > li::before{
  content:"";position:absolute;left:6px;top:.72em;
  width:5px;height:5px;border-radius:1.5px;background:var(--gray-4);
}
.post-body ol{counter-reset:pb}
.post-body ol > li{counter-increment:pb}
.post-body ol > li::before{
  content:counter(pb) ".";position:absolute;left:0;top:0;
  font-size:14.5px;font-weight:600;color:var(--gray-5);line-height:1.95;
  font-variant-numeric:tabular-nums;
}
.post-body blockquote{
  border-left:2px solid var(--ink);padding:2px 0 2px 22px;margin-top:1.9em;margin-bottom:1.9em;
  font-size:19.5px;line-height:1.5;letter-spacing:-.012em;color:var(--ink);
}
.post-body blockquote cite{
  display:block;margin-top:12px;font-size:13.5px;font-style:normal;
  letter-spacing:.02em;color:var(--gray-5);
}
.post-body hr{border:none;height:1px;background:var(--line);margin:2.4em 0}
.post-body code{
  font-family:var(--mono);font-size:.87em;
  background:var(--off);border:1px solid var(--line);border-radius:5px;padding:.12em .38em;
}
.post-body pre{
  background:var(--ink);color:#EDEDE8;border-radius:14px;
  padding:20px 22px;overflow-x:auto;font-size:14px;line-height:1.6;
}
.post-body pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit}
.post-body figure{margin-top:2em;margin-bottom:2em}
.post-body figure img,.post-body > img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:16px;
}
.post-body figcaption{font-size:13px;color:var(--gray-5);text-align:center;margin-top:12px;line-height:1.5}
/* let figures, tables and code breathe past the text measure on wide screens */
.post-body .bleed{width:min(880px,92vw);margin-left:50%;transform:translateX(-50%)}
.post-body table{width:100%;border-collapse:collapse;font-size:15px}
.post-body thead th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gray-5);padding:0 14px 10px 0;border-bottom:1px solid var(--line);
}
.post-body tbody td{padding:12px 14px 12px 0;border-bottom:1px solid #F1EFEA;vertical-align:top}
.post-body tbody tr:last-child td{border-bottom:none}
.callout{
  background:var(--off);border:1px solid var(--line);border-left:2px solid var(--ink);
  border-radius:12px;padding:18px 22px;font-size:16px;
}
.callout > * + *{margin-top:.7em}
.callout .callout-label{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  /* gray-5 only reaches 4.2:1 on the callout's blue tint — this clears 4.9:1 */
  color:#69696E;margin-bottom:8px;
}
.callout.tip{background:#F0F5F1;border-color:#DFEBE2;border-left-color:var(--green)}
.callout.note{background:#EFF3FB;border-color:#DFE7F6;border-left-color:var(--blue)}

/* share */
/* sized to line up with .post-body's left edge, which is page-centred */
.post-share{
  width:min(var(--measure),calc(100% - var(--pad-x) * 2));
  margin:clamp(36px,4.5vw,60px) auto 0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.post-share .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-5)}
.share-btn{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--gray-6);
  cursor:pointer;text-decoration:none;font-family:var(--font);
  transition:background .15s,color .15s,border-color .15s;
}
.share-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.share-btn.copied{background:var(--green);border-color:var(--green);color:#fff}

/* keep reading */
.related{padding:clamp(48px,6vw,84px) var(--pad-x) clamp(10px,2vw,24px)}
.related-in{max-width:1200px;margin:0 auto}
.related-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:clamp(28px,3.5vw,44px);border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,44px);
}
.related-head h2{font-size:clamp(22px,2.1vw,28px);font-weight:500;letter-spacing:-.022em}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,36px)}
@media(max-width:1040px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.related-grid{grid-template-columns:1fr}}


/* ---------- 5. reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  /* animation:none as well as the resting values — otherwise html.preload's pause
     (which outranks these rules) would hold the hero blank until the gate lets go */
  .rise,nav.rise,.ind-shot.rise,.post-hero.rise{opacity:1;transform:none;filter:none;animation:none}
  .reveal,.cta-inner{opacity:1;transform:none}
  .streak{animation:none!important;opacity:0}
  .uline path{stroke-dashoffset:0}
  .cover img{transform:none!important}
}