/* Lean portfolio, round 4 (29 Oct 2026). One stylesheet for index.html, coaching-and-mentoring.html,
   resume.html, condition-builder.html (outside its shadow root) and the study pages.
   Type: Mona Sans + Hanken Grotesk (decided). The study pages can still switch it through study/pairs.js.
   Colour: neutral paper; each project card takes one slot of the active palette (data-pal on <html>).
   Container 1280px at desktop (80px margins), 1440 / 1600px on wide screens. 16 columns, 32px gutter, 24px card gap. */
:root{
  --paper:#F5F5F2; --surface:#FFFFFF; --ink:#111111; --ink2:#2E2E2C; --mute:#5E5E59; --line:#DCDCD6; --dark:#111111;
  /* type, decided 29 Oct (round 4): Mona Sans for display, Hanken Grotesk for everything else */
  --display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --dw:800; --dt:-.035em; --dlh:1.06; --dvar:normal;
  --max:1280px; --m:80px; --gut:32px; --gap:20px; --r:24px; --cp:clamp(28px,3.2vw,48px);
  /* spacing, matched to Drew Hansen's site (measured 29 Oct at 1440 and 390): header 112, hero top 160 (11.1vw),
     headline to intro 62 visible, intro to first card ~154 visible, cards 20 apart, sections 178 (12.33vw), contact bottom 144 (10vw).
     Drew stops growing at 1440 (hero 160 / 112, sections 192, headings 96), so these cap there too. Checked by measuring ink, not boxes. */
  --sec:clamp(96px,12.33vw,192px); --bar:112px;
  /* PAGE SPACING SYSTEM (1 Nov 2026): the one source for vertical gaps on every page. Rules: rules/visual-language.md.
     The case pages (shadow roots) inherit these. Check any page with ?gaps. */
  --g-sec:var(--sec); --g-sub:96px; --g-blk:64px; --g-edge:64px; --g-head:24px; --g-eye:16px; --g-para:16px; --g-item:32px; --g-cap:12px; --g-label:8px;
  /* top: the page opening under the header bar (the story heroes: hero padding + opening margin); the menu-to-headline gap is the rest of the bar + this */
  --g-top:calc(clamp(40px,4.44vw,80px) + clamp(48px,5.5vw,80px));
  --hero-top:clamp(80px,11.1vw,160px); --hero-gap:clamp(40px,2.95vw,42px); --hero-end:clamp(80px,10.3vw,148px); --end:clamp(96px,10vw,144px);
  --inout:cubic-bezier(.65,0,.35,1); --out:cubic-bezier(.22,1,.36,1);
  /* palette slots: k1 lead project, k2 second project, k3 the practice. Default: riso (picked 29 Oct, round 4) */
  --k1:#5B2EFF; --k1-ink:#FFFFFF; --k2:#2EDB9C; --k2-ink:#111111; --k3:#FF5C5C; --k3-ink:#111111; --accent:#FF5C5C; --accent-text:#B3261E;
}
:root{--paper:#EDEDED;--rail:transparent}
[data-pal="signal"]{--k1:#1D2FD6;--k1-ink:#FFFFFF;--k2:#00845C;--k2-ink:#FFFFFF;--k3:#D4401F;--k3-ink:#FFFFFF;--accent:#1D2FD6}
[data-pal="jewel"]{--k1:#1D2FD6;--k1-ink:#FFFFFF;--k2:#006F6A;--k2-ink:#FFFFFF;--k3:#B0203E;--k3-ink:#FFFFFF;--accent:#1D2FD6}
[data-pal="bright"]{--k1:#1D2FD6;--k1-ink:#FFFFFF;--accent:#1D2FD6;--k2:#2BD497;--k2-ink:#111111;--k3:#FF6B3D;--k3-ink:#111111}
[data-pal="night"]{--k1:#1D2FD6;--k1-ink:#FFFFFF;--k2-ink:#FFFFFF;--k3-ink:#FFFFFF;--accent:#1D2FD6;--k2:#103C32;--k3:#4A1B14}
[data-pal="violet"]{--k1-ink:#FFFFFF;--k2-ink:#FFFFFF;--k3-ink:#FFFFFF;--k1:#4B2BD9;--k2:#00837A;--k3:#CC3E1F;--accent:#4B2BD9}
/* round 4 palette directions (each: anchor, support, accent card colours, the page surface and the text colour) */
[data-pal="citrus"]{--paper:#F7F6F1;--k1:#14213D;--k1-ink:#FFFFFF;--k2:#C6F432;--k2-ink:#111111;--k3:#FF7A1A;--k3-ink:#111111;--accent:#14213D}
[data-pal="riso"]{--paper:#F4F4F4;--k1:#0078BF;--k1-ink:#FFFFFF;--k2:#FF48B0;--k2-ink:#111111;--k3:#00A95C;--k3-ink:#111111;--accent:#0078BF}
[data-pal="ultra"]{--paper:#EDEDED;--k1:#5B2EFF;--k1-ink:#FFFFFF;--k2:#2EDB9C;--k2-ink:#111111;--k3:#FF5C5C;--k3-ink:#111111;--accent:#FF5C5C;--accent-text:#B3261E}
[data-pal="forest"]{--paper:#F3F1EA;--k1:#0F4D3F;--k1-ink:#FFFFFF;--k2:#B5462F;--k2-ink:#FFFFFF;--k3:#8EC5FF;--k3-ink:#111111;--accent:#0F4D3F}
[data-pal="primary"]{--paper:#F5F5F2;--k1:#1F3FD0;--k1-ink:#FFFFFF;--k2:#D62E1F;--k2-ink:#FFFFFF;--k3:#111111;--k3-ink:#FFFFFF;--accent:#1F3FD0}
/* page surface, a separate choice in the lab (default neutral grey; the cream Riso paper was rejected 29 Oct) */
[data-surface="white"]{--paper:#FFFFFF;--surface:#F4F4F4}
[data-surface="warm"]{--paper:#F5F5F2}
[data-surface="cream"]{--paper:#F4F1EA}
[data-pal]{background-color:var(--paper)}
/* dark theme: designed, not inverted. Near-black paper, raised grey surfaces, warm white text; the project colours keep
   their hue; the accent is lifted from the anchor colour so it reads on dark. System preference first, the toggle wins. */
:root[data-theme="dark"]{--paper:#111213;--surface:#26272B;--ink:#F2F2EF;--ink2:#CFCFCA;--mute:#9C9C96;--line:#2F3033;--dark:#08090A;--rail:#1D1E20;
  --accent:color-mix(in oklab,var(--k1) 52%,#fff);color-scheme:dark}
@media (prefers-color-scheme:dark){:root[data-theme="system"]{--paper:#111213;--surface:#26272B;--ink:#F2F2EF;--ink2:#CFCFCA;--mute:#9C9C96;--line:#2F3033;--dark:#08090A;--rail:#1D1E20;
  --accent:color-mix(in oklab,var(--k1) 52%,#fff);color-scheme:dark}}
@media (min-width:1920px){:root{--max:1440px;--m:96px}}
@media (min-width:2560px){:root{--max:1600px}}
@media (max-width:1055px){:root{--m:48px;--r:20px}}
@media (max-width:1055px){:root{--g-sub:64px;--g-blk:48px}}
@media (max-width:671px){:root{--m:16px;--gut:16px;--gap:20px;--sec:96px;--r:16px;--cp:24px}}

*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;text-wrap:balance}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:8px;z-index:60}
.skip:focus{top:16px}
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.w{max-width:calc(var(--max) + 2*var(--m));margin-inline:auto;padding-inline:var(--m)}
.g{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));column-gap:var(--gut)}
@media (max-width:1055px){.g{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:671px){.g{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- type: one scale for every page ---------- */
.eyebrow{font:600 13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* sizes from Drew Hansen's site (29 Oct): section headings 95px on a 1280 column, 44px on phones; they follow the column, not the window */
:root{--col:min(var(--max),100vw - 2*var(--m));--c1:calc((var(--col) - 15 * var(--gut)) / 16)}
.h2{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(44px,calc(var(--col) * .0744),96px);line-height:var(--dlh)}
.h3{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(24px,2vw,32px);line-height:1.14}
.lead{font-size:clamp(19px,1.45vw,22px);line-height:1.55;color:var(--ink2)}
.link{display:inline-block;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px}
@media (hover:hover){.link:hover{opacity:.7}}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:600 16px/1 var(--sans);padding:16px 28px;border-radius:999px;border:0;cursor:pointer}
@media (hover:hover){.btn:hover{background:var(--ink2)}}

/* ---------- header ---------- */
.top{position:relative;z-index:3}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--bar)}
.name{font-family:var(--display);font-weight:var(--dw);font-variation-settings:var(--dvar);font-size:21px;line-height:1;letter-spacing:-.01em}
.bar nav{display:flex;align-items:center;gap:32px;font-weight:500;font-size:16px;color:var(--ink2)}
.bar nav a{border-bottom:1.5px solid transparent;padding-bottom:2px}
.bar nav a[aria-current]{border-color:currentColor}
@media (hover:hover){.bar nav a:hover{border-color:currentColor}}
/* Lab, not live yet (1 Nov): a quiet menu item with a small "Soon" pill, no link */
.bar nav .nav-soon{display:inline-flex;align-items:center;gap:6px;color:inherit;opacity:.6;cursor:default;padding-bottom:3.5px}   /* faded menu colour: right on light pages and on the coloured case heroes */
.bar nav .nav-soon small{font:600 11px/1 var(--sans);letter-spacing:.02em;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,currentColor 16%,transparent)}
/* Work: the three projects under it on hover or keyboard focus; the page you are on is marked */
.nav-work{position:relative;display:flex}
.nav-menu{position:absolute;top:100%;left:-32px;z-index:20;display:grid;width:max-content;padding:8px;margin-top:8px;background:#FFFFFF;border-radius:16px;box-shadow:0 18px 40px -18px rgba(17,17,17,.35);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-work:hover .nav-menu,.nav-work:focus-within .nav-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.bar nav .nav-menu a{position:relative;display:block;padding:10px 24px;border-radius:10px;border:0;color:#111111;font-weight:500;white-space:nowrap}
.bar nav .nav-menu a::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:transparent}
.bar nav .nav-menu a[aria-current="page"]{font-weight:600}
.bar nav .nav-menu a[aria-current="page"]::before{background:var(--accent)}
@media (hover:hover){.bar nav .nav-menu a:hover{background:#F0F0F0}}
@media (hover:none),(max-width:671px){.nav-menu{display:none}}
@media (prefers-reduced-motion:reduce){.nav-menu{transition:none}}
.theme-tg{width:40px;height:40px;margin-left:-8px;border-radius:50%;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.theme-tg svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
/* the icon shows the theme you switch to */
.theme-tg .sun{display:none}
:root[data-theme="dark"] .theme-tg .moon{display:none}:root[data-theme="dark"] .theme-tg .sun{display:block}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .theme-tg .moon{display:none}:root[data-theme="system"] .theme-tg .sun{display:block}}
@media (hover:hover){.theme-tg:hover{background:var(--line)}}
@media (max-width:671px){.bar{height:var(--bar)}.bar nav{gap:16px;font-size:15px}.bar nav .opt{display:none}}

/* ---------- sections: label, heading, body ---------- */
.sec{padding-top:var(--sec)}
.sec-head{grid-column:1/span 8}
.sec-head .eyebrow + .h2{margin-top:16px}
.sec-body{grid-column:9/-1;align-self:end}
@media (max-width:1055px){.sec-head,.sec-body{grid-column:1/-1}.sec-body{margin-top:32px}}

/* ---------- hero: headline, intro, the portrait blended into the page, the lead project peeking in ---------- */
.hero .g{padding-block:var(--hero-top) var(--hero-end);align-items:end}
.hero h1{grid-column:1/-1;grid-row:1;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(46px,calc(var(--col) * .091),160px);line-height:var(--dlh)}
/* one intentional break on desktop; smaller screens reflow naturally */
.hero h1 .ln{display:block;white-space:nowrap}
h1 .pd,.card h3 .pd,.h2 .pd{margin-left:-.07em}
@media (max-width:671px){.hero h1 .ln{display:inline;white-space:normal}}
.hero .lead{grid-column:1/span 8;grid-row:2;margin-top:var(--hero-gap)}
.hero .lead{grid-column:1/-1}
@media (min-width:672px){.hero .lead .l{display:block;white-space:nowrap}}
@media (max-width:1055px){.hero .lead{grid-column:1/-1}}
.hero .go{grid-column:1/span 8;grid-row:3;margin-top:24px}
.me{grid-column:12/-1;grid-row:1/span 3;align-self:end;margin:0 calc(-1*var(--gut)) -24px 0;position:relative}
/* white studio background multiplies into the paper; the bottom fades so the work below can take over */
.me img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;mix-blend-mode:multiply;filter:brightness(1.05) contrast(1.03);
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 40%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 70% at 50% 40%,#000 55%,transparent 100%)}
@media (max-width:1055px){.hero h1{grid-column:1/-1}.hero .lead,.hero .go{grid-column:1/span 5}.me{grid-column:6/-1;grid-row:2/span 2;margin:0}}
@media (max-width:671px){
  .hero h1{grid-row:2}.me{grid-column:2/-1;grid-row:1;max-width:220px;justify-self:end;margin:0 0 -24px}
  .hero .lead,.hero .go{grid-column:1/-1}.hero .lead{grid-row:3}.hero .go{grid-row:4}
}

/* ---------- selected work: one card system ---------- */
/* the label stays for screen readers; the first card follows the intro directly, as in the reference */
.work-label{margin:0}
.cards{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:var(--gut)}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;clip-path:inset(0 round var(--r));padding:var(--cp);isolation:isolate;background:var(--kb);color:var(--kf)}
.card.k1{--kb:var(--k1);--kf:var(--k1-ink)}
.card.k2{--kb:var(--k2);--kf:var(--k2-ink)}
.card.k3{--kb:var(--k3);--kf:var(--k3-ink)}
@media (min-width:1056px){.card{padding-inline:var(--c1)}}
.card .pat{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.card .txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:32em}
.card .eyebrow{color:inherit}
.card h3{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(28px,2.5vw,40px);line-height:1.12;margin-top:14px}
.card .sum{margin-top:16px;font-size:18px;line-height:1.55}
.card .more{margin-top:24px;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px}
/* the image area is fixed; only what is inside it moves, so the card colour never shows through a gap */
.frame{position:relative;overflow:hidden}
.frame > *{transition:transform .9s var(--out)}
@media (hover:hover){.card:hover .frame > *{transform:translateY(-10px)}}
.card:focus-visible .frame > *{transform:translateY(-10px)}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.frame > *{transition:none}.card:hover .frame > *,.card:focus-visible .frame > *{transform:none}}

/* lead: Condition Builder, full width, text left, the two windows bleeding off the right and bottom edges */
.cards{--cut:64px;--cardH:calc(clamp(520px,42vw,680px) - var(--cut))}
[data-cut="48"] .cards{--cut:48px}
.card.lead{grid-column:1/-1;height:var(--cardH)}
.card.lead .txt{width:36%}
.card.lead .frame{position:absolute;left:40%;right:0;top:12%;bottom:0}
.wins{position:absolute;left:0;top:0;width:150%;aspect-ratio:2499/1222}
.wins img{position:absolute;width:61.46%;border-radius:10px 10px 0 0;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.wins .w1{left:0;top:0}.wins .w2{left:38.54%;top:15.88%}
/* desktop: anchor the pair to the bottom so the front window always runs past the card edge (7.8% of the pair width + 24px for the hover lift) */
@media (min-width:1056px){.card.lead .frame{container-type:size}.card.lead .wins{top:auto;bottom:calc(-11.7cqw - 24px)}.card.lead .wins.one{bottom:calc(-24.8cqw - 24px)}}
.wins.one .w1{width:61.46%}
/* the two halves share rows (subgrid): the text rows take the taller text, so both image frames start on one line and the cards end together */
.card.lead{grid-row:1}
/* the two halves: the same height as the lead card; their text blocks share one height (set in lean.js), so both frames start on one line */
.card.half{grid-column:span 8;height:var(--cardH)}
.card.half .txt{min-height:var(--txtH,0px)}
.card.half .frame{flex:1;margin:36px 0 calc(-1*var(--cp));min-height:0;border-radius:12px 12px 0 0}
.card.half .frame > img{width:100%;height:calc(100% + 24px);object-fit:cover;object-position:top left}
/* Mentoring: one person and their words, as the image */
.voice{position:absolute;inset:0 0 -24px 0;background:#FFFFFF;color:#111111;--mute:#5E5E59;--line:#DCDCD6;--ink:#111111;padding:clamp(24px,2.4vw,36px) clamp(24px,2.4vw,36px) calc(clamp(24px,2.4vw,36px) + 24px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.voice blockquote{margin:0;font-size:18px;line-height:1.55;max-width:30em}
.voice.count{justify-content:flex-start;gap:0}
.voice.count .n{font:var(--dw) clamp(72px,7vw,120px)/1 var(--display);letter-spacing:-.04em;color:#111111}
.voice.count .c{margin-top:8px;font-size:18px;line-height:1.45;max-width:21em;color:#2E2E2C}
.voice .who{display:flex;align-items:center;gap:14px;font-size:14px;line-height:1.4;color:var(--mute)}
.voice .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;clip-path:circle(47%)}
.voice .who b{display:block;color:#111111;font-weight:600}
@media (max-width:1055px){
  .cards{grid-template-columns:1fr}.card.lead,.card.half{grid-column:1/-1}
  .card.lead{min-height:0}.card.lead .txt{width:100%}
  .card.lead .frame{position:relative;left:auto;top:auto;margin:40px calc(-1*var(--cp)) calc(-1*var(--cp)) 0;aspect-ratio:16/9}
  .wins{width:150%}
  .card.half{height:auto}.card.half .txt{min-height:0}.card.half .frame{flex:none;height:auto;aspect-ratio:16/11}
}
@media (max-width:671px){.card .sum{font-size:17px}.wins{width:180%}.card.half .frame{aspect-ratio:4/3}}

/* ---------- expertise ---------- */
#xp-h{letter-spacing:calc(var(--dt) + .02em)}
.xp{grid-column:1/-1;list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.xp li{padding-top:0}
.xp .k{font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--mute)}
.xp .k + h3{margin-top:12px}
/* a controlled line break, only on screens wide enough for the lines it sets */
.br-w{display:none}
@media (min-width:1288px){.br-w{display:inline}}
.xp svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.xp svg .ac{stroke:var(--accent)}
.xp svg .fl{fill:var(--accent);stroke:none}
.xp h3{margin-top:16px;font-size:clamp(22px,1.7vw,26px)}
.xp p{margin-top:10px;color:var(--ink2);font-size:17px}
@media (max-width:1055px){.xp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}}
@media (max-width:671px){.xp{grid-template-columns:1fr;row-gap:36px;margin-top:40px}}

/* ---------- about: the wide portrait blended into the page ---------- */
.about .g{align-items:center}
.about .pic{grid-column:1/span 7;margin:0 0 0 calc(-1*var(--m) * .5)}
.about .pic img{width:100%;aspect-ratio:1672/941;object-fit:cover}
.about .txt{grid-column:9/-1}
.about .txt .lead{margin-top:24px}
.about .txt p:not(.lead){margin-top:16px;color:var(--ink2)}
/* my life outside of work (1 Nov): one headline like "How I work", then four parts, each a square picture, a title and a short text */
@media (min-width:1056px){.off .sec-head{grid-column:1/-1}}   /* "Not on my résumé" on one line (it needs 835px of 1265 at 1440) */
.off-list{grid-column:1/-1;list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.off-list img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--surface)}
.off-list h3{margin-top:24px;font-size:22px;line-height:1.2}
.off-list p{margin-top:8px;color:var(--ink2);font-size:16px}
/* My lab: a playable scene, "Here's a taste" with a launch icon, opens in a new tab (1 Nov) */
.off-list .taste{display:inline-flex;align-items:center;gap:6px;margin-top:var(--g-para);color:var(--ink);font-weight:600}
.off-list .taste span{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.off-list .taste svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1055px){.off-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--g-blk)}}
@media (max-width:671px){.off-list{grid-template-columns:1fr;row-gap:var(--g-blk)}}
@media (max-width:1055px){.about .pic{grid-column:1/-1;margin:0}.about .txt{grid-column:1/-1;margin-top:24px}}

/* ---------- how I work: the plan stays as it is; on hover, focus or tap a play is drawn over all four steps in marker,
   like a football play. Three plays in turn. The zone above the line is reserved, so nothing moves. ---------- */
.flow{grid-column:1/-1;margin-top:56px;--hand:var(--accent);--hand-text:var(--accent-text,var(--accent));--zone:136px;position:relative;outline-offset:12px;border-radius:8px}
.flow-hint{position:absolute;left:0;top:28px;font:500 15px/1.4 var(--sans);color:var(--mute);transition:opacity .4s ease}
.flow-hint .tp{display:none}
@media (hover:none){.flow-hint .hv{display:none}.flow-hint .tp{display:inline}}
html:not(.js) .flow-hint{display:none}
.flow.on .flow-hint{opacity:0}
.flow .steps3{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:var(--zone)}
.flow .steps3::before{content:"";position:absolute;left:0;right:0;top:var(--zone);height:1.5px;background:var(--ink)}
.flow .steps3 li{position:relative;border-top:0;padding-top:28px}
.flow .steps3 li::before{content:"";position:absolute;left:0;top:-6px;width:13.5px;height:13.5px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.play{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s ease}
.flow.on .play{opacity:1}
.play path{fill:none;stroke:var(--hand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.play.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset var(--d,.5s) cubic-bezier(.45,.05,.3,1) var(--w,0s)}
.play path.dash{stroke-dasharray:6 8;stroke-dashoffset:0;opacity:0}
.play.drawn path.dash{opacity:1;transition:opacity .6s ease var(--w,0s)}
.pn{position:absolute;margin:0;max-width:16em;font:600 25px/1.05 "Caveat",var(--sans);color:var(--hand-text);opacity:0;transform:translate(-50%,-100%) rotate(-2deg) translateY(4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;text-align:left}
.play.drawn ~ .pn{opacity:1;transform:translate(-50%,-100%) rotate(-2deg);transition:opacity .5s ease var(--w,.6s),transform .7s var(--out) var(--w,.6s)}
@media (prefers-reduced-motion:reduce){.play,.play.drawn path,.play.drawn path.dash,.pn,.play.drawn ~ .pn,.flow-hint{transition:none}}
/* tablet and phone: the plan runs down the page; the marks are drawn in the left margin, the note sits where the hint was */
@media (max-width:1055px){
  .flow{margin-top:40px;--zone:0px}
  .flow-hint{position:static;min-height:3.6em}
  .flow.on .flow-hint{opacity:0}
  .flow .steps3{grid-template-columns:1fr;row-gap:32px;padding:0 0 0 72px;margin-top:8px}
  .flow .steps3::before{top:8px;bottom:8px;left:38px;right:auto;width:1.5px;height:auto}
  .flow .steps3 li{padding-top:0}
  .flow .steps3 li::before{left:-40px;top:2px}
  .pn{left:0!important;top:calc(var(--i,0) * 1.2em)!important;transform:rotate(-1.5deg) translateY(4px);font-size:22px;max-width:none}
  .play.drawn ~ .pn{transform:rotate(-1.5deg)}
}
.steps3{display:grid;gap:var(--gut);list-style:none}
.steps3 li{padding:16px 0 0;border-top:1px solid var(--line);outline-offset:6px}
.steps3 .k{font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--mute)}
.steps3 h3{margin-top:12px;font-size:22px;line-height:1.2}
.steps3 p{margin-top:8px;color:var(--ink2);font-size:16px}

/* ---------- testimonials: a gallery of six, three in view ---------- */
.gal{grid-column:1/-1;margin-top:56px;position:relative;overflow-x:clip;padding-bottom:8px;container-type:inline-size}
.gal-stage{display:grid;position:relative;outline:none}
.tcard{grid-area:1/1;align-self:start;height:var(--ch,auto);width:calc((100% - 2*var(--gap))/3);justify-self:center;margin:0;background:var(--surface);border-radius:var(--r);padding:clamp(28px,2.6vw,40px);display:flex;flex-direction:column;
  transform:translateX(calc(var(--rel) * (100% + var(--gap)))) scale(var(--sc));opacity:var(--op);transition:transform .8s var(--inout),opacity .6s ease;--rel:0;--sc:.9;--op:0;pointer-events:none}
.tcard.vis{--op:.72;pointer-events:auto;cursor:pointer}
.tcard.cur{--sc:1;--op:1;cursor:auto;z-index:2;box-shadow:0 1px 2px rgba(17,17,17,.04),0 24px 48px -32px rgba(17,17,17,.4)}
.tcard blockquote{margin:0;font-size:18px;line-height:1.6;color:var(--ink)}
.tcard blockquote p + p{margin-top:14px}
.tcard .q p{font-size:clamp(19px,1.45vw,22px);line-height:1.5}
.tcard .full{font-size:17px;line-height:1.6;color:var(--ink2)}
.tcard .full p + p{margin-top:12px}
.tcard.open{height:auto}
.tcard.open .q{display:none}
.tcard.open .full{display:block;animation:noteIn .5s var(--out)}
@media (prefers-reduced-motion:reduce){.tcard.open .full{animation:none}}
.tcard .rm{align-self:flex-start;margin-top:16px;font:600 15px/1.2 var(--sans);color:var(--ink);background:none;border:0;padding:0 0 2px;border-bottom:1.5px solid currentColor;cursor:pointer}
.tcard .rm[hidden]{display:none}
.tcard .person{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:28px;font-size:15px;line-height:1.4;color:var(--mute)}
.tcard .person img,.tcard .person .ini{width:48px;height:48px;border-radius:50%;object-fit:cover;clip-path:circle(47%);flex:none}
.tcard .person .ini{display:grid;place-items:center;background:var(--line);color:var(--ink);font-weight:600;clip-path:none}
.tcard .person b{display:block;color:var(--ink);font-weight:600}
.gal-ctl{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:40px}
.gal-ctl button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.gal-ctl button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter}
@media (hover:hover){.gal-ctl button:hover{background:var(--ink);color:var(--paper)}}
.gal-ctl .cnt{font:500 15px/1 var(--sans);color:var(--mute);font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}}
@media (min-width:1056px){
  .tcard{--p:calc((100cqw + var(--gut)) / 16);--sc:1;justify-self:start;width:calc(5 * var(--p) - var(--gut));transform:translateX(calc(var(--x,0) * var(--p)));transition:transform .8s var(--inout),width .8s var(--inout),opacity .6s ease}
  .tcard.cur{width:calc(6 * var(--p) - var(--gut))}
}
@media (max-width:1055px){.tcard{width:min(560px,100%)}.tcard.vis:not(.cur){--op:0;pointer-events:none}}

/* ---------- experience: a quiet timeline ---------- */
.tl{grid-column:1/-1;list-style:none;margin-top:56px;position:relative}
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1.5px;background:linear-gradient(var(--accent),var(--line) 240px)}
.tl li{display:block;padding:0 0 92px 44px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl .when{font:500 15px/1.4 var(--sans);color:var(--mute);font-variant-numeric:tabular-nums}
.tl .what{position:relative;max-width:46em;margin-top:4px}
.tl li::before{content:"";position:absolute;left:0;top:4px;width:13.5px;height:13.5px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink2)}
.tl li:first-child::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent)}
.tl h3{font-size:clamp(22px,1.8vw,28px);line-height:1.2}
.tl .org{color:var(--mute);margin-top:2px}
.tl .sum{margin-top:10px;color:var(--ink2);font-size:17px}
.tl .award{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--accent-text,var(--accent));background:color-mix(in srgb,var(--accent) 9%,var(--paper));border-radius:99px;padding:6px 12px}
.exp-more{grid-column:1/-1;margin-top:48px}
@media (max-width:671px){.tl li{padding-left:36px}}

/* ---------- contact + footer ---------- */
.contact{background:var(--dark);color:#fff;margin-top:var(--sec);padding-block:var(--sec) var(--end)}
.contact h2{grid-column:1/-1;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(52px,calc(var(--col) * .1025),132px);line-height:var(--dlh)}
.contact .lead{grid-column:1/span 8;margin-top:40px;color:rgba(255,255,255,.82)}
.contact .acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:48px}
.contact .btn{background:#fff;color:#111}
@media (hover:hover){.contact .btn:hover{background:#E6E6E1}}
@media (max-width:1055px){.contact .lead{grid-column:1/-1}}
.foot{padding-block:32px;font-size:14px;color:var(--mute);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ftr{background:var(--dark)}
.foot-l{display:flex;flex-wrap:wrap;gap:8px 24px}
.ftr .foot{color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.14)}

/* ---------- story page (coaching and mentoring), round 5: the case-study model ---------- */
/* a project colour on the header and hero, as on the case studies */
.case-k1 .top{background:var(--k1);color:var(--k1-ink)}.case-k2 .top{background:var(--k2);color:var(--k2-ink)}.case-k3 .top{background:var(--k3);color:var(--k3-ink)}
:is(.case-k1,.case-k2,.case-k3) .bar nav,:is(.case-k1,.case-k2,.case-k3) .theme-tg{color:inherit}
.back{display:inline-flex;gap:8px;font-size:16px;font-weight:500;color:inherit}
@media (hover:hover){.back:hover{text-decoration:underline;text-underline-offset:4px}}
.story-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--k3);color:var(--k3-ink);padding-block:clamp(40px,4.44vw,80px) clamp(64px,7vw,112px)}
.story-hero > .pat{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(60% 80% at 85% 60%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 80% at 85% 60%,#000 30%,transparent 80%)}
.story-hero .g{margin-top:clamp(48px,5.5vw,80px)}
.story-hero h1{grid-column:1/span 12;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(44px,calc(var(--col) * .0744),96px);line-height:var(--dlh)}
.story-hero .sub{grid-column:1/span 10;margin-top:20px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1.3}
.story-hero .snip{grid-column:1/span 8;margin-top:28px;color:inherit}
.story-facts .roles{margin:0;padding-top:128px;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--gut)}
.roles div{font-size:17px;line-height:1.5}
.roles dt{margin-bottom:8px}
.roles dd{margin:0;color:var(--ink)}
/* the opening: the people, then the approach */
.story-open .people{grid-column:1/span 6;margin:0;align-self:start}
.story-open .people .n{font:var(--dw) clamp(88px,9vw,150px)/1 var(--display);letter-spacing:-.04em}
.story-open .people .dots{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;max-width:330px;align-items:center}
.story-open .people .dots i{width:16px;height:16px;border-radius:50%;background:var(--k3)}
.story-open .people .dots b{font:var(--dw) 20px/16px var(--display);color:var(--k3);width:16px;text-align:center}
.story-open .people figcaption{margin-top:20px;max-width:20em;color:var(--ink2)}
.story-open .prose{grid-column:8/-1}
/* the three sections: heading on top, text and a voice from the recommendations beside it; more room between them */
.story-sec{padding-top:calc(var(--sec) * 1.15)}
.story-sec .sec-head{grid-column:1/span 10}
.story-sec .h2{font-size:clamp(32px,calc(var(--col) * .0469),60px);line-height:1.1}
.story-sec .eyebrow + .h2{margin-top:12px}
.story-sec .sec-body{grid-column:1/span 9;margin-top:40px;align-self:start}
.margin-voice{grid-column:11/-1;margin:40px 0 0;align-self:start;padding-left:24px;border-left:3px solid var(--accent)}
.margin-voice blockquote{margin:0;font:600 clamp(20px,1.6vw,24px)/1.4 var(--display);letter-spacing:-.01em}
.margin-voice figcaption{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;line-height:1.4;color:var(--mute)}
.margin-voice figcaption img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.margin-voice figcaption b{display:block;color:var(--ink);font-weight:600}
/* Alicja: one sentence, large; the rest on request */
.story-quote figure{grid-column:1/span 12;margin:0}
.story-quote .big{margin:0;font:var(--dw) clamp(30px,calc(var(--col) * .036),48px)/1.2 var(--display);letter-spacing:-.025em}
.story-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:15px;color:var(--mute)}
.story-quote figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.story-quote figcaption b{display:block;color:var(--ink);font-weight:600}
.full-rec{margin-top:28px;max-width:46em}
.full-rec summary{display:inline-block;cursor:pointer;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px;list-style:none}
.full-rec summary::-webkit-details-marker{display:none}
.full-rec[open] summary{margin-bottom:20px}
.full-rec blockquote{margin:0;color:var(--ink2)}
.full-rec blockquote p + p{margin-top:14px}
/* concept B: a handwritten coaching question above each heading ([DRAFT] wording) */
.ask{display:none;margin-bottom:12px;font:600 26px/1.1 "Caveat",var(--sans);color:var(--accent-text);transform:rotate(-1.5deg);transform-origin:0 100%}
.concept-b .ask{display:block}
@media (max-width:1055px){
  .story-open .people,.story-open .prose,.story-sec .sec-head,.story-sec .sec-body,.margin-voice,.story-quote figure{grid-column:1/-1}
  .story-open .prose{margin-top:40px}
  .story-facts .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:671px){.story-facts .roles{grid-template-columns:1fr;padding-top:64px}.story-hero h1,.story-hero .sub,.story-hero .snip{grid-column:1/-1}}
.testimony{background:var(--dark);color:#F4F4F0;padding-block:var(--sec)}
.testimony .eyebrow{color:#B9B9B2;grid-column:3/span 12}
.testimony blockquote{grid-column:3/span 12;margin:28px 0 0}
.testimony blockquote p{font:500 clamp(21px,1.8vw,27px)/1.5 var(--sans)}
.testimony blockquote p + p{margin-top:24px}
.testimony figcaption{grid-column:3/span 12;margin-top:40px;font-size:16px;color:#B9B9B2}
.testimony figcaption b{display:block;color:#fff;font-weight:600}
@media (max-width:1055px){.testimony blockquote,.testimony figcaption,.testimony .eyebrow{grid-column:1/-1}}
.prose p{color:var(--ink2)}
.prose p + p{margin-top:20px}
.prose .lead{color:var(--ink)}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);grid-column:1/-1;margin:64px 0 var(--sec)}
.next .card{padding:40px;min-height:200px;justify-content:flex-end}
@media (min-width:1056px){.next .card{padding-inline:var(--c1)}}
/* case pages: the next cards sit right before the shared contact block */
.case-next .next{margin:var(--sec) 0 0}
.next .card span{display:block;position:relative}
.next .card .eyebrow{color:inherit;opacity:.8}
.next .card span + span{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-size:clamp(26px,2.2vw,36px);line-height:1.08;margin-top:12px}
@media (hover:hover){.next .card:hover span + span{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}}
@media (max-width:671px){.next{grid-template-columns:1fr}.next .card{padding:28px;min-height:160px}}

/* ---------- résumé page: outcomes dark, the rest quiet ---------- */
.rs-hero .g{padding-block:var(--hero-top) var(--hero-end)}
.rs-hero .eyebrow{grid-column:1/-1}
.rs-hero h1{grid-column:1/-1;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dt);font-variation-settings:var(--dvar);font-size:clamp(52px,6.4vw,112px);line-height:var(--dlh);margin-top:16px}
.rs-title{grid-column:1/-1;margin-top:16px;font-size:clamp(18px,1.4vw,21px);color:var(--mute)}
.rs-title b{color:var(--ink);font-weight:600}
.rs-intro{grid-column:1/span 10;margin-top:32px;font-size:clamp(19px,1.45vw,22px);line-height:1.55;color:var(--mute)}
.rs-intro b,.rs-jobs b{color:var(--ink);font-weight:600}
.rs-acts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:36px}
.rs-body{padding-bottom:var(--sec)}
.rs-body .g{border-top:1px solid var(--line);padding-top:clamp(48px,5vw,88px)}
.rs-main{grid-column:1/span 11}
.rs-side{grid-column:13/-1;display:grid;gap:44px;align-content:start}
/* Recognition starts level with the first job, not with the Experience heading */
@media (min-width:1056px){.rs-side{margin-top:calc(clamp(44px,calc(var(--col) * .0744),96px) * var(--dlh) + 48px)}}
.rs-jobs{list-style:none;margin-top:48px}
.rs-jobs > li{padding:0 0 48px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.rs-jobs > li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.rs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px}
.rs-jobs h3{font-size:clamp(22px,1.8vw,28px);line-height:1.2}
.rs-when{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-org{color:var(--ink2);margin-top:4px;font-weight:500}
.rs-sum{margin-top:14px;color:var(--mute)}
.rs-jobs ul{margin:16px 0 0;padding:0 0 0 20px;color:var(--mute);font-size:17px;max-width:62ch}
.rs-sum{max-width:62ch}
.rs-jobs ul li + li{margin-top:10px}
.rs-jobs ul li::marker{color:#A6A6A0}
.rs-block .eyebrow{margin-bottom:16px}
.rs-item{font-size:16px;line-height:1.5;color:var(--mute)}
.rs-item + .rs-item{margin-top:16px}
.rs-item b{display:block;color:var(--ink);font-weight:600}
.rs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.rs-grp + .rs-grp{margin-top:32px}
/* tag text lines up with the group heading; the pill reaches into the margin */
.rs-grp .rs-tags{margin-left:-12px}
.rs-gh{font:600 15px/1.4 var(--sans);color:var(--ink);margin-bottom:8px}
.rs-tags li{font-size:14px;font-weight:500;background:var(--surface);border-radius:99px;padding:6px 12px;color:var(--ink2)}
.rs-plain{list-style:none;font-size:16px;color:var(--ink2)}
.rs-plain li + li{margin-top:6px}
@media (max-width:1055px){.rs-main,.rs-side,.rs-intro{grid-column:1/-1}.rs-side{margin-top:72px;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px var(--gut)}}
@media (max-width:671px){.rs-side{grid-template-columns:1fr}}
@media print{
  html,body{background:#fff}
  body{font-size:10pt;line-height:1.45}
  .skip,.bar nav,.rs-acts,.ftr{display:none}
  .bar{height:auto}
  .w{max-width:none;padding:0}
  .rs-hero .g{padding:0 0 14pt}
  .rs-hero h1{font-size:28pt}.rs-title{font-size:11pt}
  .rs-intro{font-size:10.5pt;margin-top:8pt;grid-column:1/-1}
  .rs-body{padding:0}.rs-body .g{padding-top:14pt}
  .top,.rs-hero .eyebrow{display:none}
  .rs-hero h1{margin-top:0}
  .rs-main,.rs-side{grid-column:1/-1}
  /* two pages: experience first, then one compact band for skills, recognition, education and languages */
  .rs-side{margin-top:12pt;padding-top:10pt;border-top:1px solid #ddd;grid-template-columns:repeat(3,minmax(0,1fr));gap:10pt 18pt}
  .rs-side .rs-block:nth-child(2){grid-column:1/-1;order:-1}
  .rs-block .eyebrow{margin-bottom:5pt;font-size:8pt}
  .rs-grp{display:grid;grid-template-columns:9em 1fr;gap:0 8pt}.rs-grp + .rs-grp{margin-top:3pt}.rs-gh{margin:0}.rs-grp .rs-tags{margin-left:0}
  .rs-side{margin-top:12pt}.rs-jobs ul,.rs-sum{max-width:none}
  .rs-tags{display:block}.rs-tags li{display:inline;border:0;padding:0;background:none;font-size:9pt;color:#333}
  .rs-tags li + li::before{content:" · ";color:#999}
  .rs-item + .rs-item{margin-top:4pt}
  .h2{font-size:15pt}
  .rs-jobs{margin-top:10pt}
  .rs-jobs > li{padding-bottom:8pt;margin-bottom:8pt;break-inside:avoid}
  .rs-jobs h3{font-size:12pt}.rs-jobs ul{font-size:9.5pt}
  .rs-item,.rs-plain{font-size:9pt}
  .rs-gh{font-size:9pt;margin-bottom:3pt}.rs-grp + .rs-grp{margin-top:8pt}
  .rs-jobs ul li + li{margin-top:3pt}.rs-sum{margin-top:4pt;font-size:9.5pt}
  .rs-jobs > li{break-inside:auto}.rs-head,.rs-org{break-after:avoid}
  .rs-intro b,.rs-jobs b{color:#000}
}

/* no JS: the testimonials sit side by side, full text */
html:not(.js) .gal-stage{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
html:not(.js) .tcard{grid-area:auto;width:auto;transform:none;opacity:1;pointer-events:auto}
html:not(.js) .tcard{height:auto}
html:not(.js) .gal-ctl{display:none}
@media (max-width:1055px){html:not(.js) .gal-stage{grid-template-columns:1fr}}

/* page to page: a short cross-fade instead of a blink (browsers without view transitions just navigate) */

/* lab only: the site grid over the page (16 columns, 32px gutters, the page margins) */
#lean-grid{position:fixed;inset:0;z-index:9999;pointer-events:none}
#lean-grid .w,#lean-grid .g{height:100%}
#lean-grid .g{grid-auto-rows:100%;overflow:hidden;box-shadow:-1px 0 0 rgba(255,72,176,.6),1px 0 0 rgba(255,72,176,.6)}
#lean-grid i{background:rgba(255,72,176,.09);box-shadow:inset 1px 0 0 rgba(255,72,176,.35),inset -1px 0 0 rgba(255,72,176,.35)}
/* Coaching page, 31 Oct: three equal principles, the 30+ figure under its heading, two quotes side by side */
.xp3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.xp3 h3{margin-top:0}
.story-sec .xp3 + .sec-body{margin-top:56px}
.story-open.story-sec .people,.story-open.story-sec .prose{margin-top:48px}
.story-open .prose .settings{margin-top:32px}
.story-open .prose .settings + p{margin-top:8px}
.story-quote.story-sec figure{margin-top:48px}
.voices{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:72px}
.voices .margin-voice{grid-column:auto;margin:0}
@media (max-width:1055px){.xp3{grid-template-columns:1fr;row-gap:36px}}
@media (max-width:671px){.voices{grid-template-columns:1fr;row-gap:40px;margin-top:56px}.xp3{margin-top:40px}}
.story-quote.story-sec .voices figure{margin-top:0}
/* coaching hero: a picture placeholder the size of the case study hero shots (1261 x 665 at 1440), 64px under the text and above the edge */
.story-hero.has-pic{padding-bottom:64px}
.hero-ph{grid-column:1/-1;margin-top:64px;aspect-ratio:1261/665;border-radius:10px;background:var(--surface);color:var(--mute);display:flex;align-items:flex-end;padding:24px;font:500 14px/1.4 var(--sans)}

@media (max-width:1055px){.story-hero h1,.story-hero .sub{grid-column:1/-1}}
@media (max-width:671px){.hero-ph{margin-top:48px;padding:16px}}
/* coaching, 31 Oct round 2: section 02 text left and the figure right, a quieter heading there,
   a smaller lead quote, the two quotes as an even pair, and the closing cards nearer the contact block than the text */
.story-open .h2{font-size:clamp(28px,calc(var(--col) * .0313),40px);line-height:1.15}
@media (min-width:1056px){.story-open.story-sec .prose{grid-column:1/span 8;grid-row:2}.story-open.story-sec .people{grid-column:11/-1;grid-row:2}}
.story-quote .big{font-size:clamp(24px,calc(var(--col) * .025),32px);line-height:1.3;letter-spacing:-.02em}
.voices .margin-voice{align-self:stretch;display:flex;flex-direction:column}
.voices .margin-voice figcaption{margin-top:auto;padding-top:20px}
.story-sec .next{margin:calc(var(--sec) * 1.5) 0 0}
/* coaching facts row: 64px under the coral hero, 128px before the section below (64px on phones) */
.story-facts .roles{padding-top:64px}
.story-open.story-sec{padding-top:128px}
@media (max-width:671px){.story-open.story-sec{padding-top:64px}}
/* framework case page, 1 Nov: the next cards, contact block and footer on the page spacing system
   (section gap before the dark edge, 64px edge to the headline, head 24, block 64/48, sub 96/64, footer 32/32) */
.contact{padding-top:var(--g-edge);padding-bottom:var(--g-sub)}
.contact .lead{margin-top:var(--g-head)}
.contact .acts{margin-top:var(--g-blk)}
/* Coaching on the page spacing system (1 Nov): an h2 starts a chapter (section gap), headline to text 24, text to visual 64/48 */
.case-k3 .story-hero .sub,.case-k3 .story-hero .snip{margin-top:var(--g-head)}
.case-k3 .hero-ph{margin-top:var(--g-blk)}
.case-k3 .story-sec,.case-k3 .story-open.story-sec{padding-top:var(--g-sec)}
.case-k3 .story-sec .sec-body,.case-k3 .story-open.story-sec .prose,.case-k3 .story-open.story-sec .people,.case-k3 .story-open .prose .settings{margin-top:var(--g-head)}
.case-k3 .story-open .prose .settings + p{margin-top:var(--g-label)}
.case-k3 .story-sec .g > .margin-voice{margin-top:var(--g-head)}
.case-k3 .story-sec .eyebrow + .h2{margin-top:var(--g-eye)}
.case-k3 .story-sec .sec-body .eyebrow + .lead{margin-top:var(--g-eye)}
.case-k3 .story-sec .prose p + p{margin-top:var(--g-para)}
.case-k3 .xp3,.case-k3 .story-sec .xp3 + .sec-body,.case-k3 .story-quote.story-sec .g > figure,.case-k3 .voices{margin-top:var(--g-blk)}
.case-k3 .story-quote .g > figure > figcaption,.case-k3 .story-quote .full-rec{margin-top:var(--g-head)}
.case-k3 .story-sec .next{margin-top:var(--g-sec)}
@media (max-width:671px){.case-k3 .story-open.story-sec{padding-top:var(--g-sec)}}
@media (max-width:1055px){.case-k3 .story-open.story-sec .people,.case-k3 .story-sec .g > .margin-voice{margin-top:var(--g-blk)}}
/* Homepage on the page spacing system (1 Nov): the same top as the story pages, head 24 under the headline, the section gap
   to the work cards, block 64/48 from each section headline to its content */
.page-home .hero .g{padding-top:var(--g-top);padding-bottom:var(--g-sec)}
.page-home .hero .lead{margin-top:var(--g-head)}
.page-home .tl,.page-home .xp,.page-home .off-list,.page-home .flow,.page-home .exp-more{margin-top:var(--g-blk)}
.page-home .hero .lead{max-width:30em}
/* Homepage round (1 Nov, later): the headline is always two lines, "I figure systems out." / "Then make them better.";
   the longer line ("Then make them better.", 10.9em) is sized to fit the column, so it shrinks on narrow screens instead of wrapping */
.page-home .hero .g{container-type:inline-size}
.page-home .hero h1{font-size:min(clamp(46px,calc(var(--col) * .091),160px),calc(100cqi / 11))}
.page-home .hero h1 .ln{display:block;white-space:nowrap}
/* the intro in four lines on wide screens (was five), full width on tablets now that there is no picture beside it */
.page-home .hero .lead{max-width:38em;grid-column:1/-1}
/* the About picture 20% larger: the person sits in the middle 65% of a transparent frame, so the picture grows inside its
   own box and only empty sides are clipped (no layout shift sideways, the height grows by 20%) */
/* desktop (1 Nov, the user's guides): the person spans the text block exactly, from the top of the headline's letters
   (.184em of the headline below its box) to the bottom of the last line (4px above its box). The visible person is rows
   21 to 938 of the 941px tall transparent picture (so the picture is 1.0262x that span and starts .0223 of its height
   higher) and columns 326 to 1413 of 1672 (its visible width is 1.1551x the picture height).
   Sideways, the left shoulder (column 331 of the picture, where the shirt edge turns solid) sits one gutter (32px) past
   the content's left edge, the line the Expertise text starts on, for more room between the picture and the text. Where the screen is too narrow for the full height (the text grows taller
   as its column narrows), the picture is capped so the person ends at least 64px before the text, and stays aligned to
   the top of the headline. The empty sides of the picture are clipped */
@media (min-width:1056px){
  .about{overflow-x:clip}
  .about .g{align-items:stretch;container-type:inline-size}
  .about .pic{grid-column:1/span 8;margin:0;position:relative;overflow:visible;
    --it:calc(.184 * clamp(44px,calc(var(--col) * .0744),96px));
    --room:calc(50cqi + var(--gut) / 2 - 64px + var(--gut));
    --h:min(calc((100% - var(--it) - 4px) * 1.0262),calc(var(--room) / 1.1498))}
  .about .pic img{position:absolute;left:0;transform:translateX(calc(-19.8% - var(--gut)));width:auto;max-width:none;
    aspect-ratio:1672/941;height:var(--h);top:calc(var(--it) - .0223 * var(--h))}
}
/* tablet and phone: the picture sits above the text, 20% larger than its column (only the empty sides are clipped) */
@media (max-width:1055px){.about .pic{overflow-x:clip}.about .pic img{width:120%;max-width:none;margin-inline:-10%}}
/* contact: the tail of the "p" in "problem" hangs about .08em below the headline box, so the 24px head gap read as none;
   .19em more puts the same visible space under it as under the hero headline */
.contact h2{margin-bottom:.19em}
/* contact text: a new line before "and organizational challenges meet" from tablet up (hand-set, so shape() leaves it) */
.br-c{display:none}
@media (min-width:672px){.br-c{display:inline}}
.contact .lead{grid-column:1/-1;max-width:30em}
/* Expertise icons in place of the numbers (1 Nov): Tabler outline icons at 40px, a 1.5 stroke (2.5px on screen) to sit with
   the bold headlines; icon to headline 16, the eyebrow gap */
.xp .xi{display:block;width:40px;height:40px;stroke-width:1.5}
.page-home .xp .xi + h3{margin-top:var(--g-eye)}
/* the intro in the user's four lines (1 Nov): hand-set .l lines from 672px up, sized so the longest (36.5em) always fits the
   column; on phones four lines would need 9px text, so there it wraps normally */
@media (min-width:672px){.page-home .hero .lead{max-width:none;font-size:min(clamp(19px,1.45vw,22px),calc(100cqi / 36.8))}}
/* About (1 Nov): both paragraphs at the intro (lead) size, one voice; 16px between them */
.about .txt p:not(.lead){font-size:clamp(19px,1.45vw,22px);line-height:1.55}
/* About text (1 Nov): its lines end at least one gutter (32px) inside the content's right edge, so the longest line never
   sits on the edge the Expertise text above stops short of */
@media (min-width:1056px){.about .txt{padding-right:var(--gut)}}