:root{
  --paper:#F5F3EE;
  --panel:#FFFFFF;
  --ink:#121A1E;
  --slate:#5C6B75;
  --hairline:#D6DCE0;
  --river:#1D4E6B;        /* the one accent */
  --river-light:#3E7FA6;  /* hover / active only */
  --radius:5px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
::selection{background:var(--river);color:#fff;}
body{
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1 0 auto;}
a{color:var(--ink);}
a:focus-visible,button:focus-visible{outline:2px solid var(--river);outline-offset:3px;border-radius:2px;}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px;}

/* ---------- header (light, hairline rule, sticky) ---------- */
header{
  border-bottom:1px solid var(--hairline);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand svg{display:block;}
.wordmark{
  font-family:'Instrument Sans','Segoe UI',sans-serif;color:var(--ink);
  font-weight:500;font-size:19px;letter-spacing:-0.005em;
}
/* header nav ONLY — scoped to #site-nav so these never leak onto the footer's
   <nav class="foot-nav">. */
#site-nav{display:flex;gap:28px;}
#site-nav a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--slate);
  transition:color .15s ease;
}
#site-nav a:hover{color:var(--ink);}
#site-nav a[aria-current="page"]{color:var(--ink);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin:-8px;color:var(--ink);}
.nav-toggle svg{display:block;stroke:currentColor;}
@media(max-width:640px){
  .nav-toggle{display:inline-flex;}
  #site-nav{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--hairline);padding:6px 0;
  }
  #site-nav.open{display:flex;}
  #site-nav a{padding:13px 24px;font-size:15px;}
}

/* ---------- hero (light) ---------- */
.hero{
  position:relative;
  padding:88px 0 80px;display:grid;grid-template-columns:1.05fr auto;gap:60px;align-items:center;
}
@media(max-width:820px){ .hero{grid-template-columns:1fr;padding:52px 0 48px;gap:40px;} .hero-figure{order:-1;justify-self:center;} }
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;letter-spacing:.01em;color:var(--slate);
  display:block;margin-bottom:18px;
}
.eyebrow .idx{color:var(--river);font-weight:500;}
h1{
  font-family:'Instrument Sans','Segoe UI',sans-serif;
  font-size:clamp(34px,5.4vw,54px);
  font-weight:500;line-height:1.08;letter-spacing:-0.02em;
  color:var(--ink);
}
.hero h1{max-width:13ch;}
.lede{margin-top:22px;font-size:18px;color:var(--slate);max-width:52ch;}
.cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:var(--radius);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),background .15s ease,border-color .15s ease,box-shadow .16s ease,color .15s ease;
}
.btn-primary{background:var(--river);color:#fff;}
.btn-primary:hover{background:var(--river-light);transform:translateY(-2px);box-shadow:0 8px 20px rgba(29,78,107,.20);}
.btn-ghost{border:1px solid var(--hairline);color:var(--ink);background:var(--panel);}
.btn-ghost:hover{border-color:var(--river);color:var(--river);}
.ghost-link{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;
}
.ghost-link .arr{color:var(--slate);display:inline-block;margin-left:6px;transition:transform .15s ease,color .15s ease;}
.ghost-link:hover{color:var(--river);}
.ghost-link:hover .arr{transform:translateX(3px);color:var(--river);}

/* the mark at large scale — the entire motion budget lives here */
.hero-figure{width:min(360px,68vw);justify-self:end;}
.hero-mark-svg{width:100%;height:auto;display:block;}
.hbar{transform-box:fill-box;transform-origin:left center;}
.hero-mark-svg.play .hbar{animation:barDraw .45s cubic-bezier(.2,.8,.2,1) both;}
.hero-mark-svg.play .hbar:nth-child(1){animation-delay:0s;}
.hero-mark-svg.play .hbar:nth-child(2){animation-delay:.03s;}
.hero-mark-svg.play .hbar:nth-child(3){animation-delay:.06s;}
.hero-mark-svg.play .hbar:nth-child(4){animation-delay:.09s;}
.hero-mark-svg.play .hbar:nth-child(5){animation-delay:.12s;}
.hero-mark-svg.play .hbar:nth-child(6){animation-delay:.15s;}
.hero-mark-svg.play .hbar:nth-child(7){animation-delay:.18s;}
.hero-mark-svg.play .hbar:nth-child(8){animation-delay:.21s;}
.hero-mark-svg.play .hbar:nth-child(9){animation-delay:.24s;}
.hero-mark-svg.play .hbar:nth-child(10){animation-delay:.27s;}
.hero-mark-svg.play .hriver{stroke-dasharray:1;animation:riverCut .5s ease .78s both;}
@keyframes barDraw{from{transform:scaleX(0);opacity:0;}to{transform:scaleX(1);opacity:1;}}
@keyframes riverCut{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-mark-svg.play .hbar,.hero-mark-svg.play .hriver{animation:none;}
  .btn-primary:hover{transform:none;}
}

/* ---------- interior page header ---------- */
.page-head{padding:64px 0 40px;}
.page-title{margin-top:2px;max-width:20ch;}
.page-lede{margin-top:16px;font-size:18px;color:var(--slate);max-width:58ch;}

/* ---------- subpage layouts, side cards ---------- */
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start;}
@media(max-width:820px){ .split{grid-template-columns:1fr;gap:32px;} }

.side-title{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-bottom:6px;
}
.side-note{color:var(--slate);font-size:15px;max-width:44ch;}
.quick-links{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--hairline);}
.quick-links li{border-bottom:1px solid var(--hairline);}
.quick-links a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 2px;text-decoration:none;color:var(--ink);font-weight:500;font-size:15px;
}
.quick-links a .arr{color:var(--slate);transition:transform .15s ease,color .15s ease;}
.quick-links a:hover{color:var(--river);}
.quick-links a:hover .arr{transform:translateX(3px);color:var(--river);}

/* article: prose + sticky aside */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:56px;align-items:start;}
@media(max-width:900px){ .article-grid{grid-template-columns:1fr;gap:40px;} }
@media(min-width:901px){ .article-aside{position:sticky;top:90px;} }
.aside-cta{margin-top:26px;border-left:2px solid var(--river);padding-left:16px;}
.aside-cta p{color:var(--slate);font-size:14.5px;margin:6px 0 14px;max-width:36ch;}

/* ---------- sections (light, ruled) ---------- */
section{
  padding:72px 0;border-top:1px solid var(--hairline);scroll-margin-top:66px;position:relative;
  background-image:repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 34px);
  background-repeat:no-repeat;background-position:left top;background-size:100% 7px;
}
.sec-head{margin-bottom:40px;max-width:60ch;}
h2{
  font-family:'Instrument Sans','Segoe UI',sans-serif;
  font-size:clamp(24px,3.2vw,32px);font-weight:500;letter-spacing:-0.015em;
  margin-top:6px;
}
.sec-head p{margin-top:12px;color:var(--slate);font-size:16.5px;}

/* principles — ruled editorial list */
.principles{border-top:1px solid var(--hairline);}
.principle{
  display:grid;grid-template-columns:236px 1fr;gap:6px 32px;
  padding:24px 0;border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
@media(max-width:820px){
  .principle{grid-template-columns:1fr;gap:4px;}
}
.principle h3{
  font-family:'Instrument Sans','Segoe UI',sans-serif;font-size:18px;font-weight:500;letter-spacing:-0.01em;
}
.principle p{font-size:15px;color:var(--slate);}
.principle-link{font-size:14px;font-weight:500;margin-top:4px;}
@media(min-width:821px){ .principle-link{grid-column:2;} }
.principle-link a{color:var(--ink);text-decoration:none;}
.principle-link a .arr{color:var(--slate);display:inline-block;margin-left:6px;transition:transform .15s ease,color .15s ease;}
.principle-link a:hover{color:var(--river);}
.principle-link a:hover .arr{transform:translateX(3px);color:var(--river);}
.fine-print{margin-top:24px;font-size:13.5px;color:var(--slate);max-width:66ch;}

/* ---------- about / prose ---------- */
.about-copy p{color:var(--slate);font-size:16.5px;}
.about-copy p + p{margin-top:16px;}
.about-copy .pull{
  color:var(--ink);font-family:'Instrument Sans','Segoe UI',sans-serif;
  font-size:19px;line-height:1.45;font-weight:500;letter-spacing:-0.01em;
  border-left:2px solid var(--river);padding-left:18px;margin-top:22px;
}
.prose{max-width:70ch;}
.prose h2{font-size:20px;margin-top:36px;letter-spacing:-0.01em;}
.prose h2:first-of-type{margin-top:0;}
.prose h3{font-family:'Instrument Sans','Segoe UI',sans-serif;font-size:16.5px;font-weight:500;margin-top:22px;letter-spacing:-0.01em;}
.prose h3 + p{margin-top:6px;}
.prose p{color:var(--slate);font-size:16px;margin-top:12px;}
.prose ul{margin:12px 0 0 20px;color:var(--slate);font-size:16px;}
.prose li{margin-top:6px;}
.prose a{font-weight:600;}
.prose a:hover{color:var(--river);}
.prose .updated{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin:0 0 8px;
}
.prose h2 + p{margin-top:8px;}
.prose .fine-print{margin-top:20px;}

/* article index */
.post-list{border-top:1px solid var(--hairline);max-width:74ch;}
.post{display:block;padding:24px 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;}
.post .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}
.post h3{font-family:'Instrument Sans','Segoe UI',sans-serif;font-size:20px;font-weight:500;margin-top:6px;letter-spacing:-0.01em;}
.post p{color:var(--slate);font-size:15.5px;margin-top:6px;max-width:70ch;}
.post:hover h3{color:var(--river);}
.article-meta{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-bottom:8px;
}

/* ---------- contact: email address + copy lockup ---------- */
.contact-actions{display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap;padding-top:4px;}
.mail-lockup{position:relative;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mail-link{
  font-family:'IBM Plex Mono',monospace;font-size:16.5px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px;
  transition:color .15s ease,border-color .15s ease;
}
.mail-link:hover{color:var(--river);border-color:var(--river);}
.copy-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;cursor:pointer;
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);color:var(--slate);
  transition:color .15s ease,border-color .15s ease;
}
.copy-btn:hover{color:var(--river);border-color:var(--river);}
.copy-btn:focus-visible{outline:2px solid var(--river);outline-offset:2px;}
.copy-btn svg{display:block;stroke:currentColor;}
.copy-status{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--river);
  opacity:0;transition:opacity .2s ease;
}
.copy-status.show{opacity:1;}

/* ---------- footer (light) ---------- */
footer{
  margin-top:24px;background:var(--paper);color:var(--slate);
  border-top:1px solid var(--hairline);
}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;padding:30px 0;flex-wrap:wrap;font-size:14px;}
.foot a{color:var(--ink);text-decoration:none;font-weight:500;}
.foot a:hover{color:var(--river);}
.foot .fbrand{display:flex;align-items:center;gap:10px;font-family:'Instrument Sans','Segoe UI',sans-serif;letter-spacing:-0.005em;font-weight:500;color:var(--ink);font-size:15px;}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap;}
.foot-nav a{color:var(--slate);font-weight:500;}
.foot-nav a:hover{color:var(--river);}
.colophon{border-top:1px solid var(--hairline);}
.colophon p{
  padding:16px 0 24px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.04em;color:var(--slate);
}

/* ---------- scroll reveal (added only by JS; safe without it) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
.reveal-rows{overflow:hidden;}
.row-reveal{opacity:0;transform:translateX(-32px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);}
.row-reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .row-reveal{opacity:1;transform:none;transition:none;}
}