/* =====================================================================
   midhuns.net — shared stylesheet
   Cached for a year; every page after the first paints with zero CSS cost.
   ===================================================================== */

:root{
  --ink:#0d1319; --ink-mid:#252d36; --ink-soft:#454e58; --ink-faint:#59616b;
  --line:#e3e7eb; --line-soft:#eef1f4; --line-strong:#919599;
  --paper:#ffffff; --raise:#f7faf8; --sunk:#f2f6f3;
  --brand:#15573d; --brand-mid:#2f7a63; --brand-soft:#3d876a; --blue:#2a6f97;
  --grad:linear-gradient(95deg,#15573d 0%,#2f7a63 48%,#2a6f97 100%);
  --grad-soft:linear-gradient(95deg,#e3f3ea 0%,#e6f0f7 60%,#dde9f5 100%);
  --aurora-1:rgba(47,122,99,.15); --aurora-2:rgba(42,111,151,.13); --aurora-3:rgba(95,212,164,.11);
  --on-brand:#ffffff;
  --face:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,serif;
  --wrap:1080px; --read:720px; --r:12px;
  --card-grad:linear-gradient(155deg,#ffffff 0%,#f3f5f7 55%,#e9edf1 100%);
  --gitmod:#b0720e;
  --shadow:0 1px 2px rgba(13,19,25,.04),0 12px 32px -20px rgba(13,19,25,.28);
  --shadow-lift:0 2px 6px rgba(13,19,25,.05),0 22px 48px -24px rgba(13,19,25,.34);
}
/* Dark palette. Applied by the clock (data-theme, set before first paint),
   and by system preference when JavaScript is unavailable.               */
:root[data-theme="dark"]{
    --ink:#f1f4f7; --ink-mid:#ccd4dc; --ink-soft:#a3adb8; --ink-faint:#8d98a3;
    --line:#2a3844; --line-soft:#222f3a; --line-strong:#5c6a76;
    --paper:#141e26; --raise:#1b2933; --sunk:#182631;
    --brand:#5fd4a4; --brand-mid:#54c2a2; --blue:#6cb6e0; --brand-soft:#7fdcb6;
    --on-brand:#04120c;
    --grad:linear-gradient(95deg,#5fd4a4 0%,#54c2a2 48%,#6cb6e0 100%);
    --grad-soft:linear-gradient(95deg,#17342d 0%,#18313b 60%,#172c3a 100%);
    --aurora-1:rgba(95,212,164,.16); --aurora-2:rgba(108,182,224,.14); --aurora-3:rgba(84,194,162,.12);
    --card-grad:linear-gradient(155deg,#1e2c37 0%,#18242e 55%,#15202a 100%);
    --gitmod:#e3b25c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -20px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35),0 22px 48px -24px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f1f4f7; --ink-mid:#ccd4dc; --ink-soft:#a3adb8; --ink-faint:#8d98a3;
    --line:#2a3844; --line-soft:#222f3a; --line-strong:#5c6a76;
    --paper:#141e26; --raise:#1b2933; --sunk:#182631;
    --brand:#5fd4a4; --brand-mid:#54c2a2; --blue:#6cb6e0; --brand-soft:#7fdcb6;
    --on-brand:#04120c;
    --grad:linear-gradient(95deg,#5fd4a4 0%,#54c2a2 48%,#6cb6e0 100%);
    --grad-soft:linear-gradient(95deg,#17342d 0%,#18313b 60%,#172c3a 100%);
    --aurora-1:rgba(95,212,164,.16); --aurora-2:rgba(108,182,224,.14); --aurora-3:rgba(84,194,162,.12);
    --card-grad:linear-gradient(155deg,#1e2c37 0%,#18242e 55%,#15202a 100%);
    --gitmod:#e3b25c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -20px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35),0 22px 48px -24px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{
  margin:0;background:var(--paper);color:var(--ink-mid);
  transition:background-color .35s ease,color .35s ease;
  font-family:var(--face);font-size:17px;line-height:1.62;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.read{width:min(100% - 40px,var(--read));margin-inline:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.16;letter-spacing:-.02em;font-weight:600}
p{margin:0 0 14px}
img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:10px 16px;border-radius:8px;box-shadow:var(--shadow)}
::selection{background:var(--grad-soft);color:var(--ink)}

/* ---------------- scroll progress ---------------- */
.progress{
  position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:60;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

/* ---------------- nav ---------------- */
nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.mark{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:16px;letter-spacing:-.01em}
.mark:hover{text-decoration:none}
  .logo-mark{
  width:28px;height:28px;flex:none;display:block;border-radius:8.5px;
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--brand) 55%,transparent);
  transition:transform .35s cubic-bezier(.34,1.5,.64,1);
}
.mark:hover .logo-mark{transform:rotate(-6deg) scale(1.07)}
.mark-short{display:none}
@media(max-width:620px){
  .mark-full{display:none}
  .mark-short{display:inline;letter-spacing:.02em}
}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--ink-soft);font-size:14.5px;font-weight:500;position:relative;padding:4px 0}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .28s ease;
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--brand);text-decoration:none}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
@media(max-width:860px){.nav-links{display:none}}

/* ---------------- theme toggle ---------------- */
.theme-btn{
  width:38px;height:38px;border-radius:10px;flex:none;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-mid);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .25s ease,color .25s ease,transform .25s ease;
}
.theme-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.theme-btn svg{width:17px;height:17px;display:block}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
}
.nav-right{display:flex;align-items:center;gap:10px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;
  font-size:15px;font-weight:600;border:1px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);color:var(--on-brand);box-shadow:0 6px 18px -8px rgba(21,87,61,.55)}
.btn-primary:hover{box-shadow:0 12px 26px -10px rgba(21,87,61,.6)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn svg{width:16px;height:16px;flex:none}

/* ---------------- hero ---------------- */
header{padding:80px 0 8px;position:relative;overflow:hidden}
.aurora{
  position:absolute;inset:-30% -10% auto -10%;height:150%;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 88%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 88%);
}
.aurora i{
  position:absolute;display:block;border-radius:50%;filter:blur(52px);
  animation:drift 52s ease-in-out infinite alternate;
  will-change:transform;
}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-6%;top:2%;background:var(--aurora-1)}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-4%;top:-10%;background:var(--aurora-2);animation-duration:64s;animation-delay:-18s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:34%;top:14%;background:var(--aurora-3);animation-duration:78s;animation-delay:-33s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4vw,-2.5vw,0) scale(1.12)}
  66%{transform:translate3d(-3vw,3vw,0) scale(.93)}
  100%{transform:translate3d(2vw,1vw,0) scale(1.07)}
}
#net{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.72;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);
}
.hero{
  display:grid;grid-template-columns:1fr auto;column-gap:52px;row-gap:0;
  align-items:center;text-align:left;position:relative;z-index:1;
}
.hero>*{grid-column:1}
.hero .portrait{grid-column:2;grid-row:1 / span 5;align-self:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
  background:var(--grad-soft);padding:6px 13px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--brand) 14%,transparent);
}
.eyebrow i{
  width:7px;height:7px;border-radius:50%;background:var(--brand);font-style:normal;flex:none;
  animation:pulse 5.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:-.034em;margin-bottom:12px}
  .role{
  font-size:clamp(15px,1.7vw,17.5px);font-weight:600;color:var(--brand);
  margin-bottom:18px;letter-spacing:-.008em;line-height:1.45;
  text-wrap:balance;max-width:58ch;
}
  .hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 20px}
.brand-tag{
  font-weight:600;letter-spacing:.02em;font-size:14px;
  position:relative;white-space:nowrap;padding-bottom:3px;
  color:var(--blue);                               /* fallback */
  background:linear-gradient(95deg,var(--brand) 0%,var(--brand-mid) 45%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .brand-tag{color:transparent}
}
.brand-tag::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--brand) 70%,transparent),transparent);
}
.lede{font-size:clamp(16.5px,1.8vw,18.5px);color:var(--ink-soft);max-width:58ch;margin:0 0 28px;text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.portrait{
  width:236px;margin:0;padding:0;flex:none;position:relative;
  border-radius:20px;
  box-shadow:var(--shadow-lift);
  border:1px solid var(--line);
}
.portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;
  background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--brand) 26%,transparent) 100%);
}
.portrait img{
  width:100%;height:auto;aspect-ratio:1/1.06;object-fit:cover;display:block;
  background:var(--sunk);border-radius:19px;
}
.portrait.away img{border-radius:50%}
.portrait.pop{animation:gitPop .45s ease}
@keyframes gitPop{40%{transform:scale(.94)}}
@media(max-width:800px){
  header{padding:44px 0 4px}
  .hero{display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero-meta{justify-content:center;margin:22px 0 18px}
  .lede{margin:0 auto 28px}
  .cta{justify-content:center}
  .portrait{width:168px;border-radius:20px}
  .portrait::after{border-radius:20px}
  #net{display:none}
}

/* portrait flight: shrinks to a circular avatar while the canvas carries it */
.portrait{cursor:pointer;transition:transform .5s cubic-bezier(.55,0,.6,1),opacity .45s ease,border-radius .5s ease}
.portrait.away{animation:none;transform:scale(.18);opacity:0;border-radius:50%}
.portrait.away::after{opacity:0}

/* ---------------- "call me" annotation ---------------- */
.name-wrap{position:relative;display:inline-block}
.callme{
  position:absolute;left:calc(100% + 10px);top:-30px;white-space:nowrap;
  display:flex;align-items:flex-start;gap:2px;pointer-events:none;
  opacity:0;animation:callmeIn .7s ease .9s forwards;
}
@keyframes callmeIn{to{opacity:1}}
.callme-arrow{width:52px;height:36px;color:var(--ink-faint);margin-top:26px;flex:none;opacity:.85}
.ca-line{stroke-dasharray:80;stroke-dashoffset:80;animation:caDraw .8s ease 1.15s forwards}
.ca-ghost{animation-delay:1.3s}
.ca-head{opacity:0;animation:callmeGhost .3s ease 1.8s forwards}
@keyframes caDraw{to{stroke-dashoffset:0}}
@keyframes callmeGhost{to{opacity:.85}}
.callme-bubble{
  position:relative;
  font-family:"Bradley Hand","Segoe Print","Ink Free","Comic Sans MS",cursive;
  font-style:normal;font-weight:400;
  font-size:15.5px;letter-spacing:.3px;line-height:1.3;color:var(--ink-soft);
  padding:9px 15px;transform:rotate(-2.5deg);
}
.cb-sketch{position:absolute;inset:-2px -3px;width:calc(100% + 6px);height:calc(100% + 4px);
  color:var(--ink-faint);opacity:.95;pointer-events:none;z-index:-1;
  filter:drop-shadow(0 2px 7px rgba(13,19,25,.10))}
.cb-sketch path:first-child{fill:var(--paper)}
.callme-bubble b{color:var(--ink-mid);font-weight:700;font-style:normal}
@media(max-width:800px){
  .callme{position:static;justify-content:center;margin-top:8px;display:flex}
  .callme-arrow{display:none}
  .callme-bubble{transform:rotate(-1.5deg);font-size:13.5px}
  h1{display:flex;flex-direction:column;align-items:center}
}

/* ---------------- metrics ---------------- */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:52px 0 0;
  position:relative;z-index:1;
}
.metric{background:var(--raise);padding:20px 18px;transition:background .3s ease}
.metric:hover{background:var(--sunk)}
.metric b{
  display:block;font-size:clamp(23px,3vw,30px);font-weight:600;color:var(--brand);
  letter-spacing:-.028em;line-height:1.06;font-variant-numeric:tabular-nums;
}
.metric span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:6px;letter-spacing:.035em;text-transform:uppercase;font-weight:600;line-height:1.35}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}

/* ---------------- sections ---------------- */
section{
  padding:80px 0;border-top:1px solid var(--line-soft);position:relative;
  content-visibility:auto;contain-intrinsic-size:auto 780px;  /* skip offscreen render work */
}
.sec-head{margin-bottom:34px;max-width:64ch}
.kicker{
  display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:14px;
}
.kicker::after{content:"";flex:1;height:1.5px;border-radius:1px;background:linear-gradient(90deg,var(--brand-soft),transparent)}
h2{font-size:clamp(25px,3.4vw,34px);margin-bottom:12px}
.sec-head p{color:var(--ink-soft);margin:0}

/* ---------------- experience ---------------- */
.role-card{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-bottom:20px;
  background:var(--paper);box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;
}
.role-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.role-card.in::before{transform:scaleY(1)}
.role-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.role-card:last-child{margin-bottom:0}
.role-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 18px;align-items:baseline;margin-bottom:6px}
.role-card h3{font-size:20px}
.when{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.org{
  display:inline-block;background:var(--grad-soft);color:var(--brand);font-weight:600;font-size:14.5px;
  padding:5px 12px;border-radius:8px;border-left:3px solid var(--brand);margin-bottom:14px;
}
.progression{font-size:14.5px;color:var(--ink-faint);margin-bottom:14px}
.role-card ul{margin:0;padding:0;list-style:none}
.role-card li{position:relative;padding-left:20px;margin-bottom:10px;font-size:16px;line-height:1.6}
.role-card li:last-child{margin-bottom:0}
.role-card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--grad)}
.role-card strong{color:var(--ink);font-weight:600}

/* career scope bands */
.career-bands{position:absolute;inset:38px 0 34px 138px;pointer-events:none}
.career-bands div{
  position:absolute;left:0;right:0;bottom:calc(var(--b) * 1%);
  border-top:1px dashed var(--line);
}
.career-bands span{
  position:absolute;left:-138px;width:126px;top:-7px;text-align:right;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  line-height:1.3;
}

/* ---------------- career plot ----------------
   Desktop: each dot is anchored exactly at (--x, --y) of the plot area and the
   trend line is drawn through those same coordinates in pixel space, so the
   line always passes through the dots at any width.
   Narrow: identical markup reflows to a vertical rail. */
.career{display:grid;gap:26px}
.career-plot{position:relative;height:380px;padding:38px 0 34px 138px}
.career-line{position:absolute;inset:38px 0 34px 138px;width:calc(100% - 138px);height:calc(100% - 72px);overflow:visible}
.career-track{list-style:none;margin:0;padding:0;position:absolute;inset:38px 0 34px 138px}
.career-track li{position:absolute;left:calc(var(--x) * 1%);bottom:calc(var(--y) * 1%)}

.pt{
  appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;
  position:absolute;left:0;bottom:0;transform:translate(-50%,50%);
  padding:0;display:block;
}
.pt-dot{
  display:block;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--brand);
  transition:transform .3s cubic-bezier(.34,1.5,.64,1),background .3s ease,box-shadow .3s ease;
}
.pt:hover .pt-dot{transform:scale(1.25)}
.pt.on .pt-dot{
  background:var(--grad);border-color:transparent;transform:scale(1.35);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 15%,transparent);
}
.pt-now .pt-dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 12%,transparent)}
.pt-lab{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;
}
.lab-up{bottom:23px}
.lab-down{top:24px;flex-direction:column-reverse}
.lab-first{left:0;transform:none;align-items:flex-start}
.lab-last{left:auto;right:0;transform:none;align-items:flex-end}
.pt-yr{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pt-rl{font-size:11.5px;color:var(--ink-faint);font-weight:600;letter-spacing:.02em}
.pt.on .pt-rl,.pt:hover .pt-rl{color:var(--ink)}

.career-axis{
  position:absolute;left:138px;right:0;bottom:0;display:flex;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:8px;
  font-size:12px;color:var(--ink-faint);font-weight:600;letter-spacing:.06em;
}

.career-card{
  border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
  background:var(--paper);box-shadow:var(--shadow);
}
.career-card + .career-card{margin-top:16px}
.cc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;align-items:baseline;margin-bottom:9px}
.career-card h3{font-size:20px}
.career-card ul{margin:0;padding:0;list-style:none}
.career-card li{position:relative;padding-left:20px;margin-bottom:10px;font-size:16px;line-height:1.6}
.career-card li:last-child{margin-bottom:0}
.career-card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--grad)}
.career-card strong{color:var(--ink);font-weight:600}
.career-card[hidden]{display:none}

@media(max-width:860px){
  .career-plot{height:auto;padding:0}
  .career-bands{display:none}
  .career-line,.career-axis{display:none}
  .career-track{position:static;display:flex;flex-direction:column;gap:0;padding-left:28px;border-left:2.5px solid var(--line)}
  .career-track li{position:relative;left:auto!important;bottom:auto!important}
  .pt{position:relative;transform:none;left:auto;bottom:auto;width:100%;padding:11px 0;text-align:left}
  .pt-dot{position:absolute;left:-35px;top:14px}
  .pt-lab{position:static;transform:none;flex-direction:row!important;align-items:baseline;gap:12px;white-space:normal}
  .pt-yr{min-width:44px}
  .pt-rl{font-size:14.5px}
}

/* ---------------- card grid ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.card{
  border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--paper);
  box-shadow:var(--shadow);position:relative;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.card h3{font-size:17.5px;margin-bottom:9px;display:flex;align-items:center;gap:10px}
.card h3::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--grad);flex:none;transition:width .3s ease}
.card:hover h3::before{width:34px}
.card p{font-size:15.5px;color:var(--ink-soft);margin:0}

/* ---------------- mandate ----------------
   Three pillars of the role, stated as leadership mandates with
   outcome-framed proof lines — not an engineering metrics dashboard. */
.mandate{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.man-card{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease,border-color .3s ease;
}
.man-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.man-card.in::before,.man-card:hover::before{transform:scaleX(1)}
.man-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.man-k{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin-bottom:10px;
}
.man-card h3{font-size:19px;line-height:1.3;letter-spacing:-.018em;margin-bottom:16px;text-wrap:balance}
.man-proof{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);display:grid;gap:10px}
.man-proof li{
  position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);
}
.man-proof li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;
  background:var(--grad);transform:rotate(45deg);
}
.man-proof b{color:var(--ink);font-weight:600}
.man-card .unit-grid{margin-bottom:10px}
.man-card .est-cap{margin-bottom:16px}
@media(max-width:960px){.mandate{grid-template-columns:1fr}}

/* unit chart (kept: used inside the first mandate card) */
.unit-grid{display:flex;flex-wrap:wrap;gap:5px}
.unit-sq{display:flex;gap:3px;padding:5px;border-radius:7px;background:var(--raise);border:1px solid var(--line)}
.unit-dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand-soft);opacity:.6;
  animation:dotIn .5s cubic-bezier(.16,1,.3,1) backwards;
}
.unit-sq:first-child .unit-dot{background:var(--grad);opacity:1}
@keyframes dotIn{from{opacity:0;transform:scale(.3)}}
.est-cap{font-size:12.5px;color:var(--ink-faint);font-style:italic;margin:8px 0 0}

/* ---------------- AI capability stack ---------------- */
.ai-head{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:end;margin-bottom:38px}
.ai-head .sec-head{margin-bottom:0}
.ai-quote{
  margin:0;padding:0 0 4px 22px;border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--brand),var(--blue)) 1;
  font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink);font-style:italic;
}
@media(max-width:860px){.ai-head{grid-template-columns:1fr;gap:26px;align-items:start}}

.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cap{
  position:relative;background:var(--paper);padding:26px 26px 24px;display:flex;gap:18px;
  transition:background .3s ease;
}
.cap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cap:hover{background:var(--raise)}
.cap:hover::before,.cap.in::before{transform:scaleX(1)}
.cap-n{
  font-size:28px;font-weight:700;line-height:1;letter-spacing:-.04em;flex:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.42;transition:opacity .3s ease;
}
.cap:hover .cap-n{opacity:1}
.cap-body h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.015em}
.cap-body p{font-size:15.5px;color:var(--ink-soft);margin:0 0 12px}
.cap-state{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--grad-soft);padding:4px 11px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--brand) 16%,transparent);
}

/* ---------------- stack ---------------- */
.stack-row{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.stack-row:last-child{border-bottom:none}
.stack-row dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.stack-row dd{margin:0;font-size:15.5px;color:var(--ink-soft)}
@media(max-width:680px){.stack-row{grid-template-columns:1fr;gap:5px}}

/* ---------------- certs ---------------- */
.certs{display:flex;flex-wrap:wrap;gap:10px}
.cert{
  border:1px solid var(--line);background:var(--raise);border-radius:99px;
  padding:9px 17px;font-size:14.5px;color:var(--ink-mid);transition:border-color .25s ease,transform .25s ease;
}
.cert:hover{border-color:var(--brand);transform:translateY(-2px)}
.cert b{color:var(--ink);font-weight:600}

/* ---------------- writing list ---------------- */
.tagbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tag-f{
  appearance:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.02em;border:1px solid var(--line-strong);border-radius:99px;
  background:var(--paper);color:var(--ink-mid);padding:8px 16px;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.tag-f:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.tag-f.on{background:var(--grad);border-color:transparent;color:var(--on-brand)}
.posts{display:grid;gap:16px}
@media(min-width:861px){
  #post-list{grid-template-columns:1fr 1fr;align-items:stretch}
  #post-list .post{align-content:start}
}
.post[hidden]{display:none}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px 0 0;flex-wrap:wrap}
.pg{
  appearance:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;
  min-width:38px;height:38px;padding:0 13px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-mid);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.pg:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);text-decoration:none}
.pg.on{background:var(--grad);border-color:transparent;color:var(--on-brand)}
.pg[disabled]{opacity:.4;pointer-events:none}
.related{padding:8px 0 70px}
.related .kicker{margin-bottom:18px}
.posts-related .post h3{font-size:17px;margin-bottom:8px}
.post{
  display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;background:var(--paper);
  box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease,border-color .3s ease;
}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));text-decoration:none}
.post h3{font-size:19.5px;margin-bottom:7px;transition:color .25s ease}
.post:hover h3{color:var(--brand)}
.post p{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:66ch}
.post-meta{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}
.tag{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);background:var(--grad-soft);padding:4px 11px;border-radius:99px;
}
.post time,.mins{font-size:13px;color:var(--ink-faint)}
.arrow{
  align-self:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--brand);flex:none;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .3s ease,border-color .3s ease;
}
.post:hover .arrow{transform:translateX(4px);background:var(--grad-soft);border-color:var(--brand)}
@media(max-width:620px){.post{grid-template-columns:1fr}.arrow{display:none}}

/* ---------------- article ---------------- */
.article-head{padding:66px 0 34px;position:relative;overflow:hidden}
.article-head h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px;max-width:22ch}
.article-head .lede{font-size:clamp(17px,2vw,19.5px);margin-bottom:22px;max-width:60ch}
.byline{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:14px;color:var(--ink-faint);padding-top:18px;border-top:1px solid var(--line-soft)}
.byline img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.byline b{color:var(--ink);font-weight:600}
article{padding:8px 0 70px;font-size:18px;line-height:1.75}
article h2{font-size:clamp(22px,2.9vw,28px);margin:44px 0 14px;letter-spacing:-.022em}
article h3{font-size:19.5px;margin:32px 0 10px}
article p{margin:0 0 20px;color:var(--ink-mid)}
article ul,article ol{margin:0 0 22px;padding-left:22px}
article li{margin-bottom:10px}
article li::marker{color:var(--brand-soft)}
article strong{color:var(--ink);font-weight:600}
article blockquote{
  margin:28px 0;padding:18px 24px;border-left:3px solid var(--brand);
  background:var(--raise);border-radius:0 10px 10px 0;
  font-family:var(--serif);font-size:19.5px;line-height:1.6;color:var(--ink);font-style:italic;
}
article blockquote p:last-child{margin:0}
.pull{
  margin:34px 0;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--raise);position:relative;overflow:hidden;
}
.pull::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.pull h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.pull p:last-child{margin:0}
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:30px 0}
.numbers div{background:var(--raise);padding:16px 18px}
.numbers b{display:block;font-size:24px;color:var(--brand);font-weight:600;letter-spacing:-.02em}
.numbers span{display:block;font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:4px;line-height:1.3}
.share{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line-soft);
}
.share-lab{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:4px;
}
.share-btn{
  width:40px;height:40px;border-radius:11px;flex:none;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-mid);
  display:grid;place-items:center;padding:0;
  transition:border-color .22s ease,color .22s ease,transform .22s ease,background .22s ease;
}
.share-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);text-decoration:none}
.share-btn svg{width:19px;height:19px}
.share-btn.copied{background:var(--grad);color:var(--on-brand);border-color:transparent}
.share-done{
  font-size:13px;font-weight:600;color:var(--brand);opacity:0;
  transition:opacity .3s ease;
}
.share-done.show{opacity:1}

.article-foot{border-top:1px solid var(--line-soft);padding:30px 0 0;margin-top:44px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.back{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:7px}

/* ---------------- newsletter ---------------- */
.newsletter{
  display:grid;grid-template-columns:1.1fr 1fr;gap:16px 36px;align-items:center;
  margin:46px 0 0;padding:30px 32px;border-radius:16px;
  border:1px solid var(--line);background:var(--raise);
  position:relative;overflow:hidden;
}
.newsletter::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.nl-h{font-size:21px;letter-spacing:-.018em;margin-bottom:8px}
.nl-p{font-size:14.5px;color:var(--ink-soft);margin:0}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.nl-input{
  flex:1 1 200px;min-width:0;font-family:inherit;font-size:15px;
  padding:11px 15px;border-radius:10px;color:var(--ink);
  border:1px solid var(--line-strong);background:var(--paper);
  transition:border-color .2s ease;
}
.nl-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.nl-input::placeholder{color:var(--ink-faint)}
.nl-btn{flex:none}
.nl-note{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--brand);font-weight:600;min-height:1em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.newsletter{grid-template-columns:1fr;padding:24px 20px}}

/* ---------------- contact ---------------- */
.contact-box{
  border:1px solid var(--line);border-radius:16px;padding:46px;background:var(--raise);
  position:relative;overflow:hidden;
}
.contact-box::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.contact-box h2{margin-bottom:12px}
.contact-list{display:flex;flex-wrap:wrap;gap:14px 32px;margin:24px 0 28px;padding:0;list-style:none}
.contact-list li{font-size:15.5px;color:var(--ink-soft)}
.contact-list b{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;font-weight:700}

footer{padding:34px 0 46px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-faint)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* ---------------- bottom navigation (mobile) ---------------- */
.bnav{display:none}
@media(max-width:860px){
  .bnav{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:55;
    display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:end;
    gap:2px;padding:6px 8px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
    border-top:1px solid var(--line-soft);
    box-shadow:0 -8px 28px -18px rgba(13,19,25,.35);
  }
  .bnav-i{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px 5px;border-radius:12px;
    color:var(--ink-soft);font-size:11px;font-weight:600;letter-spacing:.03em;
    text-decoration:none;position:relative;
    transition:color .25s ease;
  }
  .bnav-i:hover{text-decoration:none}
  .bnav-i svg{width:22px;height:22px;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
  .bnav-i::after{
    content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%) scaleX(0);
    width:22px;height:2.5px;border-radius:2px;background:var(--grad);
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .bnav-i.on,.bnav-i[aria-current]{color:var(--brand)}
  .bnav-i.on::after,.bnav-i[aria-current]::after{transform:translateX(-50%) scaleX(1)}
  .bnav-i.on svg{transform:translateY(-1px) scale(1.06)}
  .bnav-fab{
    width:50px;height:50px;border-radius:50%;margin:0 6px -2px;
    background:var(--grad);color:var(--on-brand);
    display:grid;place-items:center;align-self:center;
    box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand) 60%,transparent);
    transform:translateY(-12px);
    transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s ease;
  }
  .bnav-fab:active{transform:translateY(-10px) scale(.94)}
  .bnav-fab svg{width:22px;height:22px}
  /* keep page content clear of the bar */
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:92px}
}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv-d1.in{transition-delay:.07s}.rv-d2.in{transition-delay:.14s}
.rv-d3.in{transition-delay:.21s}.rv-d4.in{transition-delay:.28s}.rv-d5.in{transition-delay:.35s}

/* hero entrance */
.enter{opacity:0;transform:translateY(18px);animation:enter 1.05s cubic-bezier(.16,1,.3,1) forwards}
.enter-1{animation-delay:.05s}.enter-2{animation-delay:.14s}.enter-3{animation-delay:.23s}
.enter-4{animation-delay:.32s}.enter-5{animation-delay:.41s}.enter-6{animation-delay:.5s}
@keyframes enter{to{opacity:1;transform:none}}

/* ---------------- motion + print safety ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.enter{opacity:1!important;transform:none!important}
  .callme,.ca-head{opacity:1!important}
  .ca-line{stroke-dashoffset:0!important}
  .role-card::before{transform:scaleY(1)!important}
  .tl-fill{height:100%!important}
  .tl-item .tl-dot{border-color:transparent;background:var(--grad)}
  .progress{display:none}
  #net,.aurora{display:none}
}
@media print{
  nav,.bnav,.progress,.cta,#net,.aurora,.arrow{display:none!important}
  .rv,.enter{opacity:1!important;transform:none!important}
  body{font-size:12px;background:#fff;color:#000}
  .card,.role-card,.post,.tl-card{box-shadow:none;break-inside:avoid}
  .tl-fill{height:100%!important}
}

/* ---- Books ---- */
.bookcard{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--card-grad);box-shadow:var(--shadow)}
.bk-cover{display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 10px 24px -10px rgba(13,19,25,.45)}
.bk-coverlink{display:block;transition:transform .3s ease}
.bk-coverlink:hover{transform:translateY(-4px)}
.bk-series{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-mid);margin-bottom:10px}
.bk-title{font-size:30px;line-height:1.15;margin-bottom:8px}
.bk-title a{color:var(--ink)}
.bk-title a:hover{color:var(--brand);text-decoration:none}
.bk-sub{font-family:var(--serif);font-style:italic;font-size:17.5px;color:var(--ink-mid);margin-bottom:10px;max-width:52ch}
.bk-meta{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}
.bk-desc{color:var(--ink-mid);max-width:58ch;margin-bottom:20px}
.bk-cta{align-items:center}
.bk-soon{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  letter-spacing:.04em;color:var(--brand);border:1px dashed var(--line-strong);
  border-radius:999px;padding:9px 18px;background:var(--sunk)}
.bk-soon::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-soft)}
.bookhero{display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:center;padding-top:8px;padding-bottom:10px}
.bk-cover-lg{max-width:280px}
.bk-hero-info h1{margin-bottom:10px}
.bk-hero-info .bk-sub{font-size:19px}
.bk-section{padding:56px 0}
.read-narrow{max-width:var(--read)}
.bk-blurb p{font-size:17px;line-height:1.75;color:var(--ink-mid);margin-bottom:14px;max-width:62ch}
.sellpts{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sell{grid-column:span 2;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);padding:24px;
  background:var(--card-grad);box-shadow:var(--shadow);
  transition:transform .35s ease,box-shadow .35s ease}
.sell::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.sell:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.sell:hover::before{transform:scaleX(1)}
.sell:nth-child(4),.sell:nth-child(5){grid-column:span 3}
.sell-ic{width:40px;height:40px;border-radius:11px;background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--brand);transition:transform .35s ease}
.sell:hover .sell-ic{transform:rotate(-6deg) scale(1.08)}
.sell-ic svg{width:20px;height:20px}
.sell h3{font-size:16.5px;margin-bottom:8px;color:var(--brand)}
.sell p{font-size:14.5px;line-height:1.65;color:var(--ink-mid)}
.bk-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:22px}
.bk-part{border-left:3px solid var(--brand-soft);padding:4px 0 4px 18px}
.bk-part h3{font-size:15.5px;margin-bottom:6px}
.bk-part p{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.bk-chapters{border:1px solid var(--line);border-radius:var(--r);background:var(--raise)}
.bk-chapters summary{cursor:pointer;padding:16px 22px;font-weight:600;color:var(--brand)}
.bk-chapters summary:hover{color:var(--brand-mid)}
.bk-chapters ol{columns:2;gap:40px;padding:4px 22px 20px 42px;color:var(--ink-mid)}
.bk-chapters li{margin-bottom:8px;break-inside:avoid;padding-left:4px}
.bk-audience{list-style:none;display:grid;gap:10px;margin-bottom:26px}
.bk-audience li{padding-left:26px;position:relative;color:var(--ink-mid)}
.bk-audience li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--grad)}
.bk-author{color:var(--ink-soft);font-size:15px;border-top:1px solid var(--line);padding-top:20px;max-width:62ch}
@media (max-width:760px){
  .bookcard{grid-template-columns:1fr;padding:22px}
  .sellpts{grid-template-columns:1fr}
  .sell,.sell:nth-child(4),.sell:nth-child(5){grid-column:auto}
  .bk-cover{max-width:230px;margin:0 auto}
  .bookhero{grid-template-columns:1fr;gap:30px;text-align:center}
  .bk-cover-lg{margin:0 auto}
  .bookhero .bk-cta{justify-content:center}
  .bk-chapters ol{columns:1}
}

/* ---- small-screen text weight: one notch more contrast ---- */
@media (max-width:800px){
  :root[data-theme="light"]{--ink-mid:#1f262e;--ink-soft:#3b434d;--ink-faint:#4d555f}
  :root[data-theme="dark"]{--ink-mid:#d5dce3;--ink-soft:#adb7c1;--ink-faint:#97a2ad}
}

/* ---- portrait git-status badge ---- */
.git-state{position:absolute;right:9px;bottom:9px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:999px;
  padding:2px 9px;opacity:.55;z-index:1;
  transition:opacity .35s ease,color .4s ease,border-color .4s ease}
.portrait:hover .git-state{opacity:.92}
.git-state i{width:6px;height:6px;border-radius:50%;background:var(--gitmod);
  animation:gitPulse 2.2s ease-in-out infinite}
@keyframes gitPulse{0%,100%{opacity:1}50%{opacity:.45}}
.git-state.done{color:var(--brand);border-color:var(--brand-soft)}
.git-state.done i{background:none;width:auto;height:auto;border-radius:0;animation:none}
.git-state.done i::before{content:"\2713";font-weight:700;color:var(--brand);font-size:10px;line-height:1}