/* ══════════════════════════════════════════════════════════════════════════
   Obexron — site chrome and page layouts.

   Every token used here comes from obexron.css, which is extracted verbatim
   from /scorecard at build time. Nothing new is invented; this file only
   arranges things the scorecard page didn't need: the navbar, the footer, and
   the layouts for the marketing pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* The surface tokens live on .ox-paper and .ox-ink. The navbar sits outside
   both — it is translucent, not a surface — so the paper set is also declared
   on :root as the default. Without this, anything outside a section (the nav
   button, for one) resolves var(--btn) to nothing. */
:root{
  --border:#E4E4E2;
  --heading:#0B0B0B;
  --body:#6E6E76;
  --fine:#6E6E76;
  --link:#1E5AD6;
  --btn:#2E6FF2;
  --btn-hover:#1E5AD6;
  --btn-hover-ink:#FFFFFF;
  --empty:#DCDCD7;
  --ox-card:#FFFFFF;
  --ox-main:#1A1A1A;
  --ox-detail:#8A8A93;
  --ox-faint:#C4C4BF;
  --ox-texture:#E4E4E0;
  --ox-orange:#FF5A1F;
  --ox-blue:#2E6FF2;
  --ox-watermark:#E2E2DE;
  --ox-bg:#F2F2F0;
}

/* the whole site is paper except the closing band and the footer */
body{background:#F2F2F0;}

/* a lead paragraph always follows a heading */
.lead{margin-top:24px;}

/* ─────────────────────────── navbar ─────────────────────────── */
/* Ported from @efferd/header-3: the bar is transparent at the top of the page
   and picks up the blur and the hairline once you scroll. Everything else about
   this navbar was already what header-3 does. */
.nav{
  position:sticky;top:0;z-index:80;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease,backdrop-filter .2s ease;
}
.nav.is-scrolled,
body.nav-open .nav{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:#E4E4E2;
}
.nav__bar{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  height:68px;display:flex;align-items:center;gap:24px;
}
.nav .lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.nav .lockup__mark{width:24px;flex:none;}
.nav .lockup__mark svg{max-width:none !important;width:100%;}
.nav .lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:#0B0B0B;}

.nav__links{display:none;align-items:center;gap:4px;margin-left:8px;}
@media (min-width:900px){ .nav__links{display:flex;} }
.nav__item{position:relative;}

.nav__link{
  display:inline-flex;align-items:center;gap:7px;
  height:44px;padding:0 14px;border:0;background:none;
  font-size:15px;font-weight:500;letter-spacing:-0.012em;
  color:#0B0B0B;text-decoration:none;border-radius:8px;cursor:pointer;
  transition:color .15s ease,background-color .15s ease;
}
.nav__link:hover{color:#1E5AD6;background:#EDEDE9;}
.nav__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__caret{
  width:7px;height:7px;flex:none;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease;
}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(-135deg) translate(-2px,-2px);}
.nav__link[aria-expanded="true"]{color:#1E5AD6;background:#EDEDE9;}

/* three-column panel */
.nav__panel{
  position:absolute;top:calc(100% + 10px);left:-14px;z-index:5;
  background:#FFFFFF;border:1px solid #E4E4E2;border-radius:14px;
  padding:26px 28px;min-width:640px;
}
.nav__panel[hidden]{display:none;}
.nav__panel-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px;}
.nav__col-title{
  font-size:14px;font-weight:500;letter-spacing:-0.007em;color:#1E5AD6;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #E4E4E2;
}
.nav__col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.nav__col a{
  display:block;padding:8px 10px;margin-inline:-10px;border-radius:7px;
  font-size:15px;line-height:1.35;letter-spacing:-0.012em;
  color:#0B0B0B;text-decoration:none;
  transition:color .15s ease,background-color .15s ease;
}
.nav__col a:hover{color:#1E5AD6;background:#F2F2F0;}
.nav__col a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

.nav__cta{
  display:none;margin-left:auto;
  min-height:44px;padding:11px 20px;font-size:15px;
}
@media (min-width:900px){ .nav__cta{display:inline-flex;} }

/* hamburger */
.nav__burger{
  margin-left:auto;width:44px;height:44px;flex:none;
  display:grid;place-content:center;
  background:none;border:1px solid #E4E4E2;border-radius:8px;cursor:pointer;
}
@media (min-width:900px){ .nav__burger{display:none;} }
.nav__burger:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__burger-box{display:grid;gap:4px;width:18px;}
.nav__burger-box i{display:block;height:1.5px;background:#0B0B0B;border-radius:1px;transition:transform .18s ease,opacity .18s ease;}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* full-screen mobile overlay */
.nav__mobile{
  position:fixed;left:0;right:0;top:68px;bottom:0;z-index:79;
  background:#F2F2F0;display:flex;flex-direction:column;
}
.nav__mobile[hidden]{display:none;}
@media (min-width:900px){ .nav__mobile{display:none !important;} }
.nav__mobile-scroll{flex:1;overflow-y:auto;padding:8px var(--gutter) 24px;-webkit-overflow-scrolling:touch;}
.nav__acc{border-bottom:1px solid #E4E4E2;}
.nav__acc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:56px;padding:14px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:17px;font-weight:500;letter-spacing:-0.02em;color:#0B0B0B;
}
.nav__acc-head:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__acc-sign{position:relative;width:14px;height:14px;flex:none;transition:transform .15s ease;}
.nav__acc-sign::before,.nav__acc-sign::after{content:"";position:absolute;background:#6E6E76;}
.nav__acc-sign::before{left:0;right:0;top:6.5px;height:1.5px;}
.nav__acc-sign::after{top:0;bottom:0;left:6.5px;width:1.5px;}
.nav__acc-head[aria-expanded="true"] .nav__acc-sign{transform:rotate(45deg);}
.nav__acc-body{list-style:none;margin:0;padding:0 0 12px;}
.nav__acc-body[hidden]{display:none;}
.nav__acc-body a,.nav__mobile-flat a{
  display:flex;align-items:center;min-height:48px;padding:6px 0;
  font-size:16px;letter-spacing:-0.012em;color:#6E6E76;text-decoration:none;
}
.nav__acc-body a:hover,.nav__mobile-flat a:hover{color:#1E5AD6;}
.nav__acc-body a:focus-visible,.nav__mobile-flat a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.nav__mobile-flat{list-style:none;margin:8px 0 0;padding:0;}
.nav__mobile-flat a{color:#0B0B0B;font-weight:500;min-height:56px;font-size:17px;letter-spacing:-0.02em;}
.nav__mobile-foot{
  padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid #E4E4E2;background:#F2F2F0;
}
.nav__mobile-foot .btn{width:100%;}
body.nav-open{overflow:hidden;}

/* the scorecard page never needed an auto-fitting card grid, so it is not in
   the extracted stylesheet */
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

/* ─────────────────────────── logo strips ───────────────────────────
   Third-party logos, hotlinked from Brandfetch. Rendered flat grey so a row of
   other people's brand colours doesn't fight the orange and the blue. No edge
   fade on the marquee: that would be a mask gradient, and the system allows no
   gradients. */
.logo-row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(20px,3.5vw,44px);
}
/* Brandfetch returns logos at whatever aspect ratio the brand uses, so each one
   gets an identical box and is contained inside it. Sizing by height alone left
   wide wordmarks looking twice the size of square marks. */
.logo{display:flex;align-items:center;justify-content:center;flex:none;width:118px;height:34px;}
.logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.logo a:focus-visible{outline:2px solid #2E6FF2;outline-offset:4px;}
.logo__img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transform:scale(var(--logo-scale,1));
}
/* what a logo becomes when Brandfetch does not return one */
.logo__text{
  font-size:var(--fs-small);font-weight:500;letter-spacing:-0.01em;
  color:var(--fine);white-space:nowrap;
}

/* .split__aside is a grid with its own gap (from the extracted stylesheet), so
   the platform chips must not add a second one */
.split__aside .platforms{margin-top:0;}

.logo-strip{padding-block:clamp(36px,4.5vw,56px);}
.logo-strip__label{
  margin:0 0 22px;font-size:var(--fs-small);font-weight:500;
  letter-spacing:0;color:var(--fine);
}

/* the hero marquee */
/* the track is far wider than the page; the column above is bounded with
   minmax(0,1fr) so this can actually clip rather than stretching the grid */
.marquee{overflow:hidden;width:100%;}
.marquee__track{display:flex;width:max-content;animation:marquee-run 52s linear infinite;}
.marquee__row{flex:none;padding-right:clamp(20px,3.5vw,44px);}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused;}
@keyframes marquee-run{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;}
  .marquee__row[aria-hidden="true"]{display:none;}
  .marquee__row{padding-right:0;justify-content:center;}
}

/* ─────────────────────────── footer ─────────────────────────── */
.site-footer{
  border-top:1px solid var(--border);
  padding-block:clamp(48px,6vw,72px) calc(32px + env(safe-area-inset-bottom));
}
.foot-grid{display:grid;gap:40px;}
@media (min-width:640px){ .foot-grid{grid-template-columns:repeat(2,1fr);gap:40px 32px;} }
@media (min-width:960px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;} }

.site-footer .lockup{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.site-footer .lockup__mark{width:24px;flex:none;}
.site-footer .lockup__mark svg{max-width:none !important;width:100%;}
.site-footer .lockup__word{font-size:16px;font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.foot-tag{margin-top:14px;font-size:var(--fs-small);line-height:1.55;color:var(--fine);letter-spacing:0;max-width:34ch;}

.foot-col__title{
  margin:0 0 14px;font-size:var(--fs-small);font-weight:500;
  letter-spacing:0;color:var(--heading);
}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col a{
  display:inline-flex;align-items:center;min-height:36px;
  font-size:var(--fs-small);letter-spacing:0;line-height:1.4;
  color:var(--fine);text-decoration:none;
}
.foot-col a:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.foot-col a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

.foot-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;
  margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--border);
  font-size:var(--fs-small);color:var(--fine);letter-spacing:0;
}
.foot-bar__link{
  display:inline-flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-size:inherit;letter-spacing:inherit;color:var(--fine);
}
.foot-bar__link:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.foot-bar__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}

/* ─────────────────────── centred hero (from @efferd/hero-1) ───────────────────────
   hero-1's structure: a narrow centred column with vertical rules down its
   edges, a pill badge above the headline, then headline / subhead / CTA all
   centred. Its radial gradient, its fading rules and its shadowed badge are
   dropped — the brand allows neither gradients nor shadows — so the rules here
   are solid hairlines and the badge is a plain bordered pill. Its logo cloud is
   dropped too: there are no clients to put in one. */
.hero-c{padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,88px);}
.hero-c__frame{position:relative;max-width:1024px;margin-inline:auto;}
.hero-c__rail{
  display:none;position:absolute;top:0;bottom:0;width:1px;
  background:var(--border);pointer-events:none;
}
@media (min-width:760px){
  .hero-c__rail{display:block;}
  .hero-c__rail--l{left:0;}
  .hero-c__rail--r{right:0;}
  .hero-c__rail--l2{left:28px;opacity:.5;}
  .hero-c__rail--r2{right:28px;opacity:.5;}
}
.hero-c__inner{
  position:relative;text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;
}
/* the inner padding exists only to clear the edge rails, which are hidden
   below 760px — so on a phone the column uses the full width */
@media (min-width:760px){ .hero-c__inner{padding-inline:clamp(40px,5vw,64px);} }
.hero-c__inner h1{max-width:20ch;margin-top:26px;}
.hero-c__inner .lead{max-width:60ch;margin-top:24px;}
.hero-c__inner .body-cta{margin-top:32px;}
.hero-c__illo{width:100%;max-width:640px;margin-top:clamp(48px,6vw,72px);}
.hero-c__strip{width:100%;margin-top:clamp(40px,5vw,60px);text-align:center;}
.hero-c__strip .logo-row{justify-content:center;}
.hero-c__strip-label{
  margin:0 0 20px;font-size:var(--fs-small);letter-spacing:0;
  color:var(--body);
}

/* the announcement badge — hero-1's pill, without the shadow */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 18px;
  background:var(--ox-card);border:1px solid var(--border);border-radius:999px;
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--heading);text-decoration:none;
  transition:border-color .15s ease;
}
.badge:hover{border-color:#1E5AD6;}
.badge:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.badge__dot{width:6px;height:6px;flex:none;border-radius:50%;background:#2E6FF2;}
.badge__go{color:var(--link);}
/* the mandated eyebrow copy is a little too long for one line on a phone, so
   the break is balanced rather than leaving one orphaned word */
.badge__text{text-wrap:balance;}
@media (max-width:479px){ .badge{padding-inline:13px;gap:8px;} }

/* ─────────────────────────── page shells ─────────────────────────── */
.page-head{padding-block:clamp(56px,7vw,96px) 0;}
.page-head .eyebrow{margin-bottom:14px;}
.page-head h1{max-width:17ch;}
.page-head .lead{
  max-width:62ch;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;color:var(--body);
}
.split-head{display:grid;gap:48px;align-items:center;}
@media (min-width:900px){
  .split-head{grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:64px;}
}

.stack{display:grid;gap:20px;}
.rule-list{list-style:none;margin:40px 0 0;padding:0;max-width:var(--prose);counter-reset:r;}
.rule-list li{
  counter-increment:r;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:20px 0;border-top:1px solid var(--border);line-height:1.7;
}
.rule-list li:last-child{border-bottom:1px solid var(--border);}
.rule-list li::before{
  content:counter(r,decimal-leading-zero);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-0.007em;
  color:var(--link);padding-top:4px;
}
.rule-list--plain{counter-reset:none;}
.rule-list--plain li::before{content:"";}
.rule-list--plain li{grid-template-columns:1fr;gap:0;}

/* fit / doesn't fit */
.fit-grid{display:grid;gap:20px;margin-top:48px;}
@media (min-width:760px){ .fit-grid{grid-template-columns:repeat(2,1fr);} }
.fit-card{background:var(--ox-card);border:1px solid var(--border);border-radius:var(--r-card);padding:28px;}
.fit-card h3{margin-bottom:16px;}
.fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.fit-card li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--body);line-height:1.55;}
.fit-card li::before{
  content:"";width:14px;height:1.5px;margin-top:12px;background:var(--ox-detail);border-radius:1px;
}
.fit-card--yes li::before{background:#2E6FF2;}

/* stage list for /how-it-works */
.stage{padding:40px 0;border-top:1px solid var(--border);}
.stage:last-of-type{border-bottom:1px solid var(--border);}
.stage__n{
  display:block;font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:-0.007em;color:var(--link);margin-bottom:14px;
}
.stage h3{margin-bottom:8px;}
.stage__meta{margin-top:6px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
.stage__body{margin-top:16px;display:grid;gap:32px;}
@media (min-width:760px){ .stage__body{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stage__body h4{
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;
  color:var(--heading);margin:0 0 10px;
}
.stage__body ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.stage__body li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--body);font-size:var(--fs-small);letter-spacing:0;line-height:1.55;}
.stage__body li::before{content:"";width:12px;height:1.5px;margin-top:11px;background:var(--ox-detail);border-radius:1px;}

/* service index groups */
.group{padding-block:clamp(48px,6vw,72px);border-top:1px solid var(--border);}
.group:first-of-type{border-top:0;}
.card-link{
  display:block;text-decoration:none;
  background:var(--ox-card);border:1px solid var(--border);
  border-radius:var(--r-card);padding:28px;
  transition:border-color .15s ease;
}
.card-link:hover{border-color:#1E5AD6;}
.card-link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.card-link h3{margin-bottom:8px;color:var(--heading);}
.card-link p{color:var(--body);}
.card-link__go{
  display:inline-block;margin-top:14px;
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--link);
}

/* contact */
.contact-grid{display:grid;gap:48px;margin-top:48px;}
@media (min-width:900px){ .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);gap:64px;align-items:start;} }
.form-card{background:var(--ox-card);border:1px solid var(--border);border-radius:var(--r-panel);padding:28px;}
@media (min-width:760px){ .form-card{padding:36px;} }
.form-card textarea{
  min-height:150px;padding:14px;font-size:16px;line-height:1.55;
  background:var(--ox-card);color:var(--heading);
  border:1px solid var(--border);border-radius:var(--r-input);width:100%;
  resize:vertical;font-family:inherit;
  transition:border-color .15s ease;
}
.form-card textarea:hover{border-color:#1E5AD6;}
.contact-aside dt{font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--heading);}
.contact-aside dd{margin:6px 0 24px;color:var(--body);}
.contact-aside dd:last-child{margin-bottom:0;}

/* about */
.founder{
  display:grid;gap:32px;margin-top:48px;align-items:start;
  padding-top:40px;border-top:1px solid var(--border);
}
@media (min-width:760px){ .founder{grid-template-columns:240px minmax(0,1fr);gap:48px;} }
.founder__name{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;color:var(--heading);}
.founder__role{margin-top:4px;font-size:var(--fs-small);color:var(--fine);letter-spacing:0;}
.founder__links{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;}

/* blog */
.empty-note{
  margin-top:48px;max-width:var(--prose);
  border:1px dashed var(--border);border-radius:var(--r-card);
  padding:32px;background:var(--ox-card);
}

/* ─────────────────────────── legal pages ─────────────────────────── */
.legal{max-width:var(--prose);}
.legal h2{
  margin-top:52px;font-size:var(--fs-h3);
  padding-top:20px;border-top:1px solid var(--border);
}
.legal h3{margin-top:32px;font-size:1.0625rem;}
.legal p{margin-top:16px;color:var(--body);}
.legal ul,.legal ol{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.legal ol{counter-reset:l;}
.legal li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  color:var(--body);line-height:1.6;
}
.legal ul>li::before{content:"";width:12px;height:1.5px;margin-top:13px;background:var(--ox-detail);border-radius:1px;}
.legal ol>li{counter-increment:l;}
.legal ol>li::before{
  content:counter(l,decimal-leading-zero);
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--link);padding-top:2px;
}
.legal strong{color:var(--heading);font-weight:500;}
.legal code{font-size:0.9em;background:var(--ox-card);border:1px solid var(--border);padding:2px 6px;border-radius:4px;}
.legal__summary{
  background:var(--ox-card);border:1px solid var(--border);
  border-radius:var(--r-card);padding:28px;margin-bottom:8px;
}
.legal__summary h2{margin-top:0;padding-top:0;border-top:0;}
/* an unmade decision, marked so it cannot be published by accident */
.legal mark.todo{
  background:none;color:#C63E0E;font-weight:500;
  border-bottom:1px dashed #C63E0E;
}

/* ─────────────────────────── blog ─────────────────────────── */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:var(--prose);}
.post-card a{
  display:block;text-decoration:none;
  background:var(--ox-card);border:1px solid var(--border);
  border-radius:var(--r-card);padding:28px;
  transition:border-color .15s ease;
}
.post-card a:hover{border-color:#1E5AD6;}
.post-card a:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
.post-card__meta{font-size:var(--fs-small);letter-spacing:0;color:var(--fine);}
.post-card__tag{font-weight:500;color:var(--link);}
.post-card__title{
  margin-top:12px;font-size:var(--fs-h3);line-height:1.3;
  letter-spacing:-0.02em;color:var(--heading);font-weight:500;
}
.post-card__lead{margin-top:10px;color:var(--body);}

.post-head-inner{max-width:var(--prose);margin-inline:auto;}
.post-h1{max-width:20ch;}
.post-lead{max-width:64ch;}
.post-meta{margin-top:20px;font-size:var(--fs-small);letter-spacing:0;color:var(--fine);}
.post-illo{margin-top:clamp(40px,5vw,56px);max-width:var(--prose);margin-inline:auto;}
.post-list{margin-inline:auto;}

.post-body{max-width:var(--prose);margin-inline:auto;}
.post-body>p{margin-top:20px;color:var(--body);line-height:1.7;}
.post-body>p:first-child{margin-top:0;}
.post-body h2{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--border);
  font-size:clamp(1.5rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-0.025em;
}
.post-body h3{margin-top:36px;font-size:1.125rem;}
.post-body ul,.post-body ol{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.post-body ol{counter-reset:b;}
.post-body li{display:grid;grid-template-columns:auto 1fr;gap:14px;color:var(--body);line-height:1.65;}
.post-body ul>li::before{content:"";width:12px;height:1.5px;margin-top:14px;background:var(--ox-detail);border-radius:1px;}
.post-body ol>li{counter-increment:b;}
.post-body ol>li::before{
  content:counter(b,decimal-leading-zero);
  font-size:var(--fs-small);font-weight:500;letter-spacing:0;color:var(--link);padding-top:3px;
}
.post-body strong{color:var(--heading);font-weight:500;}
.post-body em{font-style:italic;}
.post-body code{font-size:0.9em;background:var(--ox-card);border:1px solid var(--border);padding:2px 6px;border-radius:4px;}
.post-back{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);max-width:var(--prose);margin-inline:auto;}

/* shared helpers */
.illo{width:100%;}
.illo--tight{max-width:620px;}
.illo--center{margin-inline:auto;}
.text-link{
  display:inline-block;margin-top:32px;
  font-size:var(--fs-body);color:var(--link);
  text-decoration:underline;text-underline-offset:3px;
}
.section--tight{padding-block:clamp(48px,6vw,80px);}

/* ─────────────────────── social row ───────────────────────
   Outline glyphs at the illustration library's stroke weight, inheriting
   currentColor. The hover is blue like every other link on the site — orange
   is never interactive. The negative left margin pulls the 44px touch target
   back so the first glyph optically lines up with the text above it. */
.social{
  display:flex;flex-wrap:wrap;gap:2px;
  list-style:none;margin:14px 0 0 -12px;padding:0;
}
.social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;
  color:var(--fine);text-decoration:none;
  transition:color .15s ease;
}
.social__link svg{display:block;}
.social__link:hover{color:var(--link);}
.social__link:focus-visible{outline:2px solid #2E6FF2;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ .social__link{transition:none;} }

/* ─────────────────────── booking embed (Cal.com) ───────────────────────
   Cal's own snippet puts height:100%;overflow:scroll on the host div. That
   assumes a parent with a resolved height — on an ordinary page height:100%
   resolves against nothing and the calendar collapses to a scrollbar. Cal
   measures its own content and drives the iframe height over postMessage, so
   the host wants a width and a floor and nothing else. The floor is what
   holds the page still while the calendar is still loading. */
.booking-embed{width:100%;min-height:560px;}
.booking-embed > div{width:100%;}
.booking-embed iframe{display:block;width:100%;border:0;}
.booking-embed noscript{display:block;padding:28px 0;}
.booking-embed noscript p{max-width:52ch;margin:0;color:var(--fine);line-height:1.6;}