:root{
  --hue:158;
  --bg:oklch(0.985 0.003 var(--hue));
  --surface:oklch(0.955 0.008 var(--hue));
  --ink:oklch(0.21 0.02 var(--hue));
  --ink-muted:oklch(0.45 0.02 var(--hue));
  --border:oklch(0.88 0.01 var(--hue));
  --felt:oklch(0.31 0.065 var(--hue));
  --felt-2:oklch(0.37 0.07 var(--hue));
  --felt-line:oklch(0.45 0.06 var(--hue));
  --on-felt:oklch(0.96 0.015 var(--hue));
  --on-felt-muted:oklch(0.80 0.03 var(--hue));
  --chip:oklch(0.88 0.18 112);          /* chartreuse: actions + the dominant strategy */
  --chip-ink:oklch(0.22 0.04 130);
  --link:oklch(0.42 0.09 var(--hue));

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s6:1.5rem;--s8:2rem;--s12:3rem;--s16:4rem;--s24:6rem;--s32:8rem;
  --t-sm:clamp(.86rem,.82rem + .2vw,.94rem);
  --t-base:clamp(1.02rem,.97rem + .3vw,1.14rem);
  --t-lg:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-xl:clamp(1.65rem,1.3rem + 1.4vw,2.3rem);
  --t-2xl:clamp(2.3rem,1.6rem + 3vw,3.6rem);
  --t-3xl:clamp(3rem,1.9rem + 5.4vw,6rem);
  --measure:66ch;--radius:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Literata",Georgia,serif;
  --ui:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-.025em;text-wrap:balance;font-weight:700}
p{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--chip);outline-offset:3px;border-radius:4px}
.wrap{width:min(1160px,100% - 2*var(--s6));margin-inline:auto}

/* nav */
.nav{position:absolute;inset:0 0 auto 0;z-index:20}
.nav.solid{position:static;background:var(--felt)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;font-family:var(--ui)}
.brand{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;color:var(--on-felt)}
.nav-links{display:flex;gap:var(--s6);align-items:center}
.nav-links a{text-decoration:none;color:var(--on-felt-muted);font-size:var(--t-sm);font-weight:500;transition:color var(--ease) .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--on-felt)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ui);font-weight:600;font-size:var(--t-sm);text-decoration:none;padding:.85em 1.4em;border-radius:999px;transition:transform .2s var(--ease),background .2s var(--ease)}
.btn-chip{background:var(--chip);color:var(--chip-ink)}
.btn-chip:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--on-felt);box-shadow:inset 0 0 0 1px var(--felt-line)}
.btn-ghost:hover{background:var(--felt-2)}
.btn svg{width:1.1em;height:1.1em}

/* hero */
.hero{background:var(--felt);color:var(--on-felt);padding:calc(72px + var(--s16)) 0 var(--s24);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s16);align-items:center}
.hero h1{font-size:var(--t-3xl);letter-spacing:-.035em;font-weight:800}
.hero .lede{font-family:var(--ui);font-size:var(--t-lg);line-height:1.4;color:var(--on-felt-muted);margin-top:var(--s6);max-width:30ch}
.hero .lede strong{color:var(--on-felt);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}

/* hero photo */
.hero-photo{justify-self:end;width:100%;max-width:420px}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}

/* sections */
section{padding:var(--s24) 0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s16);align-items:start}
.h2{font-size:var(--t-2xl)}
.prose-lg{font-size:var(--t-lg);line-height:1.55;max-width:34ch}
.bio p+p{margin-top:var(--s4)}
.bio p{max-width:var(--measure)}
.headshot{border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover;width:100%;max-width:360px;margin-bottom:var(--s8)}

.path{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s8);font-family:var(--ui);font-size:var(--t-sm);font-weight:600}
.path li{padding:.45em .95em;border-radius:999px;background:var(--surface);color:var(--ink-muted)}
.path li.now{background:var(--felt);color:var(--on-felt)}
.path .arr{background:none;padding:0;color:var(--ink-muted)}

/* awards */
.awards{background:var(--surface)}
.award-list{list-style:none;padding:0;margin-top:var(--s12);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)}
.award{border-top:2px solid var(--ink);padding-top:var(--s4);font-family:var(--ui)}
.award .res{display:inline-block;font-weight:700;font-size:var(--t-sm);padding:.2em .7em;border-radius:999px;background:var(--felt);color:var(--on-felt)}
.award .res.fin{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.award h3{font-size:var(--t-xl);margin-top:var(--s4);line-height:1.1}
.award p{color:var(--ink-muted);margin-top:var(--s2);font-size:var(--t-sm)}
.brands{margin-top:var(--s16);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s8);font-family:var(--display)}
.brands .lbl{font-family:var(--ui);font-size:var(--t-sm);color:var(--ink-muted);flex-basis:100%}
.logos{list-style:none;padding:0;flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s8) var(--s12);margin-top:var(--s4)}
.logos img{width:auto;max-width:100%;filter:grayscale(1) brightness(.35);opacity:.85;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.logos li:hover img{filter:none;opacity:1}
@media (max-width:600px){.logos{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:var(--s8) var(--s6)}.logos img{max-height:44px}.logos li:first-child img{max-height:60px}}

/* writing list */
.posts{list-style:none;padding:0;margin-top:var(--s8);border-top:1px solid var(--border)}
.posts li{border-bottom:1px solid var(--border)}
.posts a{display:grid;grid-template-columns:8.5rem 1fr auto;gap:var(--s6);align-items:baseline;padding:var(--s6) 0;text-decoration:none;transition:padding .25s var(--ease)}
.posts a:hover{padding-left:var(--s2)}
.posts time{font-family:var(--ui);font-size:var(--t-sm);color:var(--ink-muted)}
.posts h3{font-size:var(--t-lg);line-height:1.2}
.posts p{color:var(--ink-muted);font-size:var(--t-sm);margin-top:var(--s1);max-width:60ch}
.posts .go{font-family:var(--ui);color:var(--link);font-weight:600;font-size:var(--t-sm)}
.more{display:inline-block;margin-top:var(--s6);font-family:var(--ui);font-weight:600;color:var(--link)}

/* closing CTA */
.closer{background:var(--felt);color:var(--on-felt)}
.closer .wrap{display:flex;flex-wrap:wrap;gap:var(--s8);align-items:end;justify-content:space-between}
.closer h2{font-size:var(--t-2xl);max-width:18ch}
.closer p{color:var(--on-felt-muted);margin-top:var(--s4);max-width:44ch;font-size:var(--t-lg);line-height:1.5}

footer{background:var(--felt);color:var(--on-felt-muted);font-family:var(--ui);font-size:var(--t-sm);border-top:1px solid var(--felt-line)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s6) 0;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{color:var(--on-felt)}
footer nav{display:flex;gap:var(--s6)}

/* blog index + post */
.page-head{background:var(--felt);color:var(--on-felt);padding:var(--s16) 0 var(--s12)}
.page-head h1{font-size:var(--t-3xl);letter-spacing:-.035em}
.page-head p{font-family:var(--ui);color:var(--on-felt-muted);font-size:var(--t-lg);margin-top:var(--s4);max-width:46ch;line-height:1.45}
.blog-body{padding:var(--s12) 0 var(--s24)}
.empty{color:var(--ink-muted);padding:var(--s8) 0}

.article-head{background:var(--felt);color:var(--on-felt);padding:var(--s16) 0 var(--s12)}
.article-head .wrap,.article .wrap{max-width:720px}
.crumb{font-family:var(--ui);font-size:var(--t-sm);color:var(--on-felt-muted);text-decoration:none}
.crumb:hover{color:var(--on-felt)}
.article-head h1{font-size:var(--t-2xl);margin-top:var(--s4)}
.article-head .meta{font-family:var(--ui);font-size:var(--t-sm);color:var(--on-felt-muted);margin-top:var(--s4)}
.article{padding:var(--s12) 0 var(--s16)}
.video{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--radius);margin-bottom:var(--s8);background:var(--surface)}
.content>*+*{margin-top:1.15em}
.content h2{font-size:var(--t-xl);margin-top:1.8em}
.content h3{font-size:var(--t-lg);margin-top:1.5em}
.content a{color:var(--link);text-underline-offset:.18em}
.content blockquote{font-family:var(--display);font-size:var(--t-lg);line-height:1.35;font-weight:600;padding:var(--s6);background:var(--surface);border-radius:var(--radius)}
.content ul,.content ol{padding-left:1.3em}.content li+li{margin-top:.4em}
.content code{font-size:.9em;background:var(--surface);padding:.1em .35em;border-radius:4px}
.content img{border-radius:var(--radius)}
.content hr{border:0;border-top:1px solid var(--border);margin:2.4em 0}
.content table{border-collapse:collapse;width:100%;font-family:var(--ui);font-size:var(--t-sm)}
.content th,.content td{border:1px solid var(--border);padding:.6em .8em;text-align:left}
.post-cta{margin-top:var(--s12);padding:var(--s8);border-radius:var(--radius);background:var(--felt);color:var(--on-felt);display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;justify-content:space-between}
.post-cta p{font-family:var(--ui);font-size:var(--t-lg);line-height:1.35;max-width:30ch;font-weight:600}
.pager{display:flex;justify-content:space-between;gap:var(--s6);margin-top:var(--s12);font-family:var(--ui);font-size:var(--t-sm)}
.pager a{text-decoration:none;color:var(--link);font-weight:600;max-width:45%}


/* ---------------------------------------------------------------- themes
   The brand band (hero, closer, footer, headers) = --felt. Switch with
   SETTINGS["theme"] in app.py. */
[data-theme="sunshine"]{
  --hue:265;
  --felt:oklch(0.90 0.16 95);--felt-2:oklch(0.86 0.17 92);--felt-line:oklch(0.24 0.06 265 / .35);
  --on-felt:oklch(0.24 0.06 265);--on-felt-muted:oklch(0.36 0.06 265);
  --chip:oklch(0.58 0.21 30);--chip-ink:oklch(0.99 0.01 30);--link:oklch(0.50 0.19 30);
}
[data-theme="tangerine"]{
  --hue:40;
  --surface:oklch(0.96 0.012 50);
  --felt:oklch(0.76 0.16 55);--felt-2:oklch(0.72 0.17 50);--felt-line:oklch(0.22 0.05 20 / .35);
  --on-felt:oklch(0.20 0.04 20);--on-felt-muted:oklch(0.30 0.05 25);
  --chip:oklch(0.30 0.09 330);--chip-ink:oklch(0.97 0.02 60);--link:oklch(0.50 0.16 40);
}
[data-theme="sky"]{
  --hue:240;
  --felt:oklch(0.76 0.12 230);--felt-2:oklch(0.70 0.13 232);--felt-line:oklch(0.18 0.05 255 / .35);
  --on-felt:oklch(0.18 0.05 255);--on-felt-muted:oklch(0.28 0.06 255);
  --chip:oklch(0.91 0.17 98);--chip-ink:oklch(0.20 0.05 255);--link:oklch(0.46 0.14 250);
}
[data-theme="mint"]{
  --hue:175;
  --felt:oklch(0.89 0.09 168);--felt-2:oklch(0.84 0.10 168);--felt-line:oklch(0.25 0.05 200 / .35);
  --on-felt:oklch(0.24 0.05 200);--on-felt-muted:oklch(0.36 0.05 200);
  --chip:oklch(0.60 0.21 12);--chip-ink:oklch(0.99 0.01 12);--link:oklch(0.48 0.17 12);
}
/* the yellow chip was the old accent on the dark band; on light bands keep chip-coloured highlights legible */
[data-theme] .page-head a{color:var(--link)!important}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s var(--ease) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr;gap:var(--s12)}
  .award-list{grid-template-columns:1fr;gap:var(--s8)}
  .posts a{grid-template-columns:1fr;gap:var(--s1)}
  .posts .go{display:none}
  section{padding:var(--s16) 0}
  .hero{padding-bottom:var(--s16)}
}
@media (max-width:480px){
  .nav-links{gap:var(--s4)}
}