/* Side navigator for Field notes. Rendered from /blog/posts.json by
   blog-nav.js, so it scales to hundreds of posts with zero per-post edits.
   Wide screens: a persistent rail in the left margin. Narrow screens: a
   slide-in drawer behind a toggle. */
#blog-nav-toggle{
  position:fixed; top:0.65rem; left:0.8rem; z-index:60;
  background:rgba(247,247,245,0.92); border:1px solid rgba(0,0,0,0.12);
  border-radius:6px; padding:0.4rem 0.7rem; cursor:pointer;
  font-family:'Outfit',-apple-system,sans-serif; font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; color:#1a1a1a;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#blog-nav-scrim{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,0.25);
  opacity:0; visibility:hidden; transition:opacity .2s;
}
#blog-nav{
  position:fixed; top:0; left:0; bottom:0; width:286px; z-index:58;
  background:#ffffff; border-right:1px solid rgba(0,0,0,0.08);
  padding:1.1rem 0 2rem; overflow-y:auto;
  transform:translateX(-100%); transition:transform .22s ease;
  font-family:'Outfit',-apple-system,sans-serif; font-weight:300;
}
#blog-nav.open{ transform:translateX(0); }
#blog-nav.open ~ #blog-nav-scrim{ opacity:1; visibility:visible; }
#blog-nav .bn-head{
  display:block; padding:0 1.3rem 0.85rem;
  border-bottom:1px solid rgba(0,0,0,0.06); margin-bottom:0.4rem;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:#1a1a1a; text-decoration:none;
}
#blog-nav .bn-head span{ display:block; margin-top:0.25rem;
  font-size:0.6rem; letter-spacing:0.08em; text-transform:none; color:#6a6a6a; }
#blog-nav ol{ list-style:none; margin:0; padding:0; }
#blog-nav li a{
  display:block; padding:0.55rem 1.3rem; text-decoration:none;
  color:#2a2a2a; border-left:2px solid transparent; line-height:1.35;
}
#blog-nav li a:hover{ background:rgba(0,0,0,0.035); color:#1a1a1a; }
#blog-nav li a.current{ border-left-color:#b44444; background:rgba(180,68,68,0.05); color:#1a1a1a; }
#blog-nav .bn-date{ display:block; font-size:0.58rem; letter-spacing:0.09em;
  text-transform:uppercase; color:#6a6a6a; margin-bottom:0.1rem; }
#blog-nav .bn-title{ font-size:0.82rem; }
@media (min-width:1280px){
  #blog-nav{ transform:translateX(0); top:3.1rem; width:248px;
    background:transparent; border-right:none; }
  #blog-nav-toggle, #blog-nav-scrim{ display:none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   STEVE PASS — Field-notes post restyle. Loads after each post's inline
   <style>, so it restyles every post (and future ones) from one file.
   Addresses: structured left rail, 2-column grid, authoritative hierarchy,
   monospace "engineered" metadata, looser vertical rhythm. */

/* Metadata: monospace, spaced, with air before the headline */
article .post-eyebrow{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:#8a8a8a; margin-bottom:1.9rem;
}
/* Headline: authoritative */
article h1{
  font-weight:500; letter-spacing:-0.02em; line-height:1.12; color:#141414;
  font-size:clamp(2.1rem,4vw,3.25rem); margin-bottom:1.7rem;
}
article h2{ font-weight:500; letter-spacing:-0.004em; margin:3rem 0 1.05rem; }
/* Body: breathe */
main{ max-width:720px; }
article{ padding:4.25rem 0 5.5rem; }
article p{ line-height:1.8; margin-bottom:1.35rem; }
article p.lede{ font-size:1.16rem; line-height:1.78; margin-bottom:1.7rem; }

/* Wide screens: a real two-column grid — fixed structured rail on the left,
   all page content shifted clear of it. */
@media (min-width:1280px){
  body{ padding-left:272px; }
  #blog-nav{
    width:272px; top:0; padding-top:4.4rem; padding-bottom:3rem;
    background:rgba(255,255,255,0.6); border-right:1px solid rgba(0,0,0,0.09);
    box-shadow:inset -10px 0 18px -18px rgba(0,0,0,0.25);
  }
  #blog-nav .bn-head{ padding-left:1.6rem; padding-right:1.5rem; }
  #blog-nav li a{ padding-left:1.6rem; padding-right:1.4rem; }
}

/* ── STEVE PASS 2 — landing-strip lede, intentional gutter, muted metadata,
   end-of-entry mark. ── */
article p.lede{
  font-size:1.34rem; line-height:1.6; font-weight:300; color:#3c3c3c;
  margin-bottom:2rem;
}
article .post-eyebrow{ color:#9a9a9a; font-size:0.63rem; }   /* recede further */
/* End-of-entry mark: signal the log entry is complete before site nav */
article::after{
  content:""; display:block; width:46px; height:1px;
  background:rgba(0,0,0,0.18); margin:3.4rem 0 0;
}
@media (min-width:1280px){
  /* Hug the rail with a deliberate gutter instead of a centred void */
  main{ margin-left:3.5rem; margin-right:auto; }
}

/* ── STEVE PASS 3 — typographic rhythm: pull-quote to break body density. ── */
article .pullquote{
  font-size:1.5rem; line-height:1.32; font-weight:300; color:#141414;
  border-left:2px solid #b44444; padding-left:1.3rem; margin:2.6rem 0;
  letter-spacing:-0.01em;
}