/* Base */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Fonts, served from this site rather than Google (SIL Open Font License / Apache 2.0).
   DM Sans and Syne are Google's latin subsets; the icon font holds only the icons drawn in dots, and loads when main.js asks for it */
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url(assets/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url(assets/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne'; font-style:normal; font-weight:400 800; font-display:swap; src:url(assets/fonts/syne-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Material Symbols Sharp'; font-style:normal; font-weight:700; font-display:block; src:url(assets/fonts/material-symbols-sharp-subset.woff2) format('woff2')}

/* Layout: one left-aligned column of oversized DM Sans with generous space. Section names sit in a narrow left rail on wide screens. Accent is reserved for things you can click. */
:root{
  /* Palette: one family of greens. Pale sage paper, evergreen ink, a deep evergreen band, and neon as the single bright accent. */
  --bg:#E8EDE5;
  --ink:#0E1F17;
  --muted:#4F6157;
  --line:#C7D1C4;
  --accent:#39FF14;
  --link:#0E1F17;
  --link-hover:#0E1F17;
  --mark-h:.3em;
  --focus:#0E1F17;
  --band:#0F2A1F;
  --band-ink:#E9EFE6;
  --band-muted:#9DB2A5;
  --band-line:#2A4A3B;
  --glow:rgba(57, 255, 20, .2);
  --glow-blend:multiply;
  --atmos:radial-gradient(60vmax 50vmax at 88% 4%, rgba(120, 186, 196, .28), transparent 70%), radial-gradient(55vmax 45vmax at 4% 48%, rgba(232, 208, 168, .3), transparent 70%), radial-gradient(60vmax 40vmax at 70% 104%, rgba(57, 255, 20, .1), transparent 70%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-o:.06;
  --f-sans:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out:cubic-bezier(.23, 1, .32, 1);
  --gutter:max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* clear of the notch with the phone held sideways */
  --rail:11rem;
  --colgap:3rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A130F; --ink:#E4ECE5; --muted:#93A399; --line:#21322A; --accent:#39FF14;
    --link:#39FF14; --link-hover:#0A130F; --mark-h:2px; --focus:#39FF14;
    --band:#0F2219; --band-ink:#E4ECE5; --band-muted:#93A399; --band-line:#2A4336;
    --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --grain-o:.05;
    --glow:rgba(57, 255, 20, .09);
    --glow-blend:screen;
    --atmos:radial-gradient(60vmax 50vmax at 88% 4%, rgba(28, 92, 104, .32), transparent 70%), radial-gradient(55vmax 45vmax at 4% 48%, rgba(52, 44, 96, .24), transparent 70%), radial-gradient(60vmax 40vmax at 70% 104%, rgba(57, 255, 20, .06), transparent 70%);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0A130F; --ink:#E4ECE5; --muted:#93A399; --line:#21322A; --accent:#39FF14;
    --link:#39FF14; --link-hover:#0A130F; --mark-h:2px; --focus:#39FF14;
    --band:#0F2219; --band-ink:#E4ECE5; --band-muted:#93A399; --band-line:#2A4336;
    --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --grain-o:.05;
    --glow:rgba(57, 255, 20, .09);
    --glow-blend:screen;
    --atmos:radial-gradient(60vmax 50vmax at 88% 4%, rgba(28, 92, 104, .32), transparent 70%), radial-gradient(55vmax 45vmax at 4% 48%, rgba(52, 44, 96, .24), transparent 70%), radial-gradient(60vmax 40vmax at 70% 104%, rgba(57, 255, 20, .06), transparent 70%);
    color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  overflow-x:hidden; overflow-x:clip;
  background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-optical-sizing:auto;
  font-size:clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--accent); color:#0E1F17}
a{color:inherit}
a, button{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:var(--gutter); top:.75rem; z-index:30; padding:.7rem 1rem; background:var(--ink); color:var(--bg); font-weight:600; text-decoration:none; transform:translateY(-300%)}
.skip:focus{transform:none}

/* Cursor glow: a soft circle of light drifts after the pointer */
.cursor-glow{position:fixed; left:-180px; top:-180px; z-index:40; width:360px; height:360px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(closest-side, var(--glow), transparent); transform:translate3d(var(--cx, -400px), var(--cy, -400px), 0); mix-blend-mode:var(--glow-blend); transition:opacity .4s ease}
.cursor-glow.is-on{opacity:1}

/* Atmosphere: faint washes of teal, sand and lime under the paper grain */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--atmos)}
.grain{position:fixed; inset:0; z-index:2; pointer-events:none; background-image:var(--grain); background-size:180px 180px; opacity:var(--grain-o)}

.wrap{position:relative; z-index:1; max-width:1360px; margin-inline:auto; padding-inline:var(--gutter)}

/* Header */
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 1rem; padding-block:.5rem}
/* The header's own colours. The strip takes the colour of the surface under it (data-over, set in main.js), and its text follows */
.top{--t-bg:var(--bg); --t-ink:var(--ink); --t-muted:var(--muted); --t-link:var(--link); --t-bar:var(--accent); --t-bar-h:var(--mark-h); --t-hover:var(--link-hover)}
.top[data-over="band"]{--t-bg:var(--band); --t-ink:var(--band-ink); --t-muted:var(--band-muted); --t-link:var(--band-ink); --t-bar:var(--accent); --t-bar-h:2px; --t-hover:var(--band)}
.top[data-over="neon"]{--t-bg:#39FF14; --t-ink:#0E1F17; --t-muted:#1F4D2C; --t-link:#0E1F17; --t-bar:#0E1F17; --t-bar-h:2px; --t-hover:#39FF14; --focus:#0E1F17}
.wordmark{display:inline-flex; align-items:baseline; padding-block:.75rem; font-family:'Syne', var(--f-sans); font-weight:800; font-size:1.125rem; letter-spacing:0.01em; text-decoration:none; color:var(--t-ink, var(--ink)); white-space:nowrap}
.wordmark b{display:inline-block; font-weight:inherit; white-space:pre}
.wordmark .logo{flex:none; align-self:center; width:1.2em; height:1.2em; margin-right:.5em; fill:currentColor}
.wordmark .fold{display:inline-flex; max-width:0; overflow:hidden}
.wordmark .fold b{opacity:0}
.wordmark:focus-visible .fold{max-width:8em}
.wordmark:focus-visible .fold b{opacity:1}
/* Scrolling folds the letters into the mark and grows it (--p and --q set in JS). The header stays pinned on a
   full-width frosted strip that fades in, so the mark reads over every surface while the page shows through.
   Folded, only the mark takes clicks and the hover unfold is held shut */
.top{position:sticky; top:0; z-index:5}
.top::before{content:""; position:absolute; top:0; bottom:var(--strip-b, -1rem); left:calc(50% - 50vw); right:calc(50% - 50vw); z-index:-1; pointer-events:none; background:color-mix(in srgb, var(--t-bg) 72%, transparent); -webkit-mask-image:linear-gradient(#000 calc(100% - 1rem), transparent); mask-image:linear-gradient(#000 calc(100% - 1rem), transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:var(--p, 0)}
.wordmark .logo{transform:scale(calc(1 + var(--p, 0) * .75)); transform-origin:left center}
.wordmark > b{transform:translateX(calc(var(--q, 0) * var(--dx, 0) * -1px)) scale(calc(1 - var(--q, 0) * .6)); opacity:calc(1 - var(--q, 0) * 2)}
.top.is-folded{flex-wrap:nowrap}
.top.is-folded .wordmark{pointer-events:none; min-width:0; flex-shrink:1}   /* the hidden letters give up their space, so Let's talk never pushes the header onto two rows */
.top.is-folded .wordmark .logo{pointer-events:auto}
.top.is-folded .wordmark .fold{max-width:0}
.top.is-folded .wordmark .fold b{opacity:0}
.still{min-height:44px; padding:0; font:inherit; font-size:.875rem; font-weight:560; color:var(--t-muted, var(--muted)); background:none; border:0; cursor:pointer}
.top.is-folded .still{color:var(--t-ink)}
/* Let's talk: unfolds beside Pause motion once the header has folded, and folds away again while Contact is on screen */
.top-end{display:flex; flex:none; align-items:center; margin-left:auto; white-space:nowrap}
.top-talk{display:inline-block; max-width:0; overflow:hidden; padding-block:.75rem; white-space:nowrap; opacity:0; visibility:hidden; font-size:.9375rem; font-weight:650; color:var(--t-link); text-decoration:none; background-image:linear-gradient(var(--t-bar), var(--t-bar)); background-repeat:no-repeat; background-size:100% var(--t-bar-h); background-position:0 100%; background-origin:content-box}
.top.is-talk .top-talk{max-width:8rem; margin-left:1.5rem; opacity:1; visibility:visible}
.top.is-talk .still[hidden] + .top-talk{margin-left:0}
@media (prefers-reduced-motion: no-preference){
  .top::before{transition:background-color .3s ease}
  .top .wordmark, .still{transition:color .3s ease}
  .top-talk{transition:max-width .4s var(--ease-out), margin .4s var(--ease-out), opacity .25s ease, visibility 0s .4s, background-size .22s var(--ease-out), color .15s ease}
  .top.is-talk .top-talk{transition-delay:0s}
}
:root.is-still .top::before, :root.is-still .top .wordmark, :root.is-still .still, :root.is-still .top-talk{transition:none}

/* Hero */
.hero{padding-block:clamp(3rem, 10vw, 9rem) 0}
.headline{margin:0; font-weight:740; font-size:clamp(min(3.1rem, 15.8vw), 15.8vw, 14rem); line-height:.9; letter-spacing:-0.035em; cursor:default}
.hl-line{display:block; white-space:nowrap}
.hl-line + .hl-line{margin-left:-0.035em}
.slot{position:relative; display:inline-block; transition:width .5s var(--ease-out)}
.slot-word{transition:opacity .18s ease}
.slot-bl{display:inline-block; width:0; height:0; vertical-align:baseline}
.slot-cv{position:absolute; left:0; top:-.15em; width:1.2em; height:1.25em; pointer-events:none}
.hero-sub{display:grid; gap:1.5rem; margin-top:clamp(2.25rem, 5vw, 4.25rem)}
.hero-copy{display:grid; gap:1rem; max-width:37rem; min-width:0}
.lede{margin:0; font-size:clamp(1.375rem, 1.1rem + 1vw, 1.9375rem); font-weight:680; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance; margin-left:-0.04em}
.hero-copy p{margin:0}
.actions{display:flex; flex-wrap:wrap; gap:0 2rem; margin-top:.25rem}
/* Hero cloud (phones, with JavaScript): faint dots float above the headline, which drops to about mid-screen */
.hero-cloud{display:none}
@media (max-width: 639px){
  .js .hero{padding-top:.5rem}
  .js .hero-cloud{display:block; height:clamp(96px, min(50vh - 8.5rem, 100vh - 30rem), 380px); height:clamp(96px, min(50svh - 8.5rem, 100svh - 30rem), 380px); margin-bottom:1.75rem}   /* shrinks on short phones so the links stay on the first screen */
  .hero-cloud svg{display:block; width:100%; height:100%; overflow:visible}
  .hero-cloud circle, .hero-cloud path{fill:var(--muted)}
}
@media (max-width: 374px){ .actions{column-gap:1.25rem} }
@media (max-width: 359px){ .actions{column-gap:1rem; font-size:1rem} }
/* A phone held sideways: the headline, main line and links share the first screen, and the drawings in Working together stay short */
@media (max-height: 500px) and (orientation: landscape){
  .hero{padding-top:clamp(1.5rem, 6svh, 3rem)}
  .headline{font-size:clamp(3.1rem, (100svh - 16rem) / 1.8, min(15.8vw, 24svh))}   /* sized from the height left after the main line and links */
  .hero-sub{margin-top:1.25rem}
  .mode-vis{max-width:min(100%, 80svh)}
}
.cta{display:inline-block; padding-block:.6rem; font-weight:600}
.cta, .prose a, .work a, .meet-go a, .email{color:var(--link); text-decoration:none; background-image:linear-gradient(var(--accent), var(--accent)); background-repeat:no-repeat; background-size:100% var(--mark-h); background-position:0 100%; background-origin:content-box; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .22s var(--ease-out), color .15s ease}

/* Sections */
.section{display:grid; gap:1.25rem 2rem; padding-block:clamp(6rem, 14vw, 12rem) 0}
.section > *{min-width:0}
.label{margin:0; padding-top:.35rem; color:var(--muted); font-size:.9375rem; font-weight:600}
@media (min-width: 900px){ .section{grid-template-columns:var(--rail) minmax(0,1fr); align-items:baseline} .label{padding-top:0} }
.prose{display:grid; gap:1rem; max-width:37rem}
.prose p{margin:0; text-wrap:pretty}
.prose a, .work a{font-weight:600}
/* Key phrases: in body text they go bold; in big lead lines the set-up drops to muted and the payoff stays in ink */
.prose strong, .work strong{font-weight:620}
.about-lead:has(strong), .statement:has(strong){color:var(--muted)}
.about-lead strong, .statement strong{color:var(--ink); font-weight:inherit}
.prose h2{margin:1rem 0 -.5rem; font-size:1rem; font-weight:680}

/* Working together: a full-width deep evergreen band */
.band{position:relative; --ink:var(--band-ink); --muted:var(--band-muted); --line:var(--band-line); --ring:var(--band); --dot:var(--accent); color:var(--ink); margin-top:clamp(6rem, 14vw, 12rem); padding-block:clamp(4.5rem, 9vw, 7.5rem)}
.band{scroll-margin-top:4.25rem}   /* lands just below the header strip */
.band::before{content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:var(--band); z-index:-1}
.band + .band{margin-top:0}
/* Contact: a neon band with evergreen ink. Links invert: an ink bar that fills ink on hover, with neon text. */
.band-neon{--band:#39FF14; --band-ink:#0E1F17; --band-muted:#1F4D2C; --band-line:rgba(14, 31, 23, .3); --bg:#39FF14; --accent:#0E1F17; --link:#0E1F17; --link-hover:#39FF14; --mark-h:2px; --focus:#0E1F17}
.band-neon ::selection{background:#0E1F17; color:#39FF14}
.statement{margin:0 0 clamp(1.5rem, 3vw, 2.25rem) -0.04em; max-width:16ch; font-size:clamp(2.1rem, 5.6vw, 5rem); font-weight:750; letter-spacing:-0.02em; line-height:.98; text-wrap:balance}
.axis{display:flex; align-items:center; gap:1rem; margin:clamp(2.75rem, 5.5vw, 4rem) 0 .9rem; color:var(--muted); font-size:.875rem; font-weight:560}
.axis span{white-space:nowrap; font-size:clamp(.75rem, 3.7vw, .875rem)}
.axis i{position:relative; flex:1; min-width:1.5rem; height:1px; background:var(--accent); opacity:.6}
.axis i::after{content:""; position:absolute; right:0; top:-4px; border-style:solid; border-width:4.5px 0 4.5px 7px; border-color:transparent transparent transparent var(--accent)}
/* Work: three headline results first, then everything else as a quiet list, both in the page's three tracks */
.work ul{display:grid; gap:0 var(--colgap); margin:0; padding:0; list-style:none}
.work li{position:relative; min-width:0}
.work span{display:block; margin-bottom:.2rem; color:var(--muted); font-size:.875rem; font-weight:600}
.work p{margin:0; font-size:1.0625rem; line-height:1.4; text-wrap:pretty}
.results{border-top:1px solid var(--ink)}
.results li{padding-block:1.5rem 2rem; border-bottom:1px solid var(--line)}
.work .result{margin:.15rem 0 .6rem; font-size:clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); font-weight:740; letter-spacing:-0.03em; line-height:1.05}
.work .work-list{gap:1.5rem var(--colgap); margin-top:2rem}
@media (min-width: 640px){ .work-list{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width: 1000px){
  .work ul{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .results{border-bottom:1px solid var(--line)}
  .results li{border-bottom:0}
  .results li + li::before{content:""; position:absolute; top:0; bottom:0; left:calc(var(--colgap) / -2); width:1px; background:var(--line)}
}
/* Thinking about: each topic is a small label over the business question it raises, with a line on where it's already happening */
/* A short break between the constellation and the six wider topics */
.topics-lead{margin:clamp(4rem, 8vw, 6rem) 0 1.25rem; font-size:clamp(1.25rem, 1.05rem + .8vw, 1.625rem); font-weight:680; letter-spacing:-0.02em; line-height:1.15}
.topics{display:grid; gap:0 var(--colgap); margin:0; padding:0; list-style:none; border-top:1px solid var(--ink)}
.topics li{padding-block:1.25rem 1.75rem; border-bottom:1px solid var(--line)}
.topics h3{display:flex; align-items:center; gap:.625rem; margin:0 0 .5rem; color:var(--muted); font-size:.9375rem; font-weight:600}
.topic-ico{display:none; flex:none; width:1.75rem; height:1.75rem; background:var(--ink); -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat}
.topic-ico.is-ready{display:block}
.topics p{margin:0; max-width:24rem; font-size:clamp(1.1875rem, 1.05rem + .4vw, 1.4375rem); font-weight:620; letter-spacing:-0.015em; line-height:1.25; text-wrap:balance}
.topics p.now{margin-top:.75rem; color:var(--muted); font-size:.9375rem; font-weight:400; letter-spacing:0; line-height:1.4}
/* Thinking about: the constellation, an evergreen panel with a small live copy of the map. The whole panel links to it. */
.meet{--ink:var(--band-ink); --muted:var(--band-muted); --line:var(--band-line); --link:var(--band-ink); --link-hover:var(--band); --mark-h:2px; --focus:var(--accent); position:relative; padding:clamp(1.5rem, 4vw, 3rem); background:var(--band); color:var(--ink)}
.meet ::selection{background:var(--accent); color:var(--band)}
.meet-name{margin:0 0 .75rem; color:var(--muted); font-size:.9375rem; font-weight:600}
.meet-lead{margin:0; max-width:32ch; color:var(--muted); font-size:clamp(1.375rem, 1.05rem + 1.2vw, 2.125rem); font-weight:680; letter-spacing:-0.025em; line-height:1.1; text-wrap:balance}
.meet-lead strong{display:block; color:var(--ink); font-weight:inherit}
.meet-intro{margin:.875rem 0 0; max-width:37rem; color:var(--muted); font-size:1.0625rem; line-height:1.45; text-wrap:pretty}
.meet-vis{display:none}
.js .meet-vis{display:block; width:100%; height:clamp(13rem, 32vw, 25rem); margin-top:clamp(1.25rem, 3vw, 2rem)}
.meet-go{margin:clamp(1.25rem, 2.5vw, 2rem) 0 0}
.meet-go a{font-weight:600}
.meet-go a::after{content:""; position:absolute; inset:0}
@media (hover: hover) and (pointer: fine){ .meet:hover .meet-go a{background-size:100% 100%; color:var(--link-hover)} }
@media (min-width: 640px){ .topics{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width: 1000px){ .topics{grid-template-columns:repeat(3, minmax(0, 1fr))} }

.modes{display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--ink)}
.mode{position:relative; display:grid; align-content:start; padding-block:1.5rem 2rem; border-bottom:1px solid var(--line)}
.mode > *{min-width:0}
@media (min-width: 1000px){
  .modes{grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:repeat(6, auto); column-gap:var(--colgap); border-bottom:1px solid var(--line)}
  .mode{grid-row:span 6; grid-template-rows:subgrid; border-bottom:0}
  .mode + .mode::before{content:""; position:absolute; top:0; bottom:0; left:calc(var(--colgap) / -2); width:1px; background:var(--line)}
}
.mode-vis{position:relative; aspect-ratio:2 / 1; max-width:100%; margin:0 0 1.25rem}
@media (min-width: 1000px){ .mode-vis{aspect-ratio:16 / 10} }
.mode-vis canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.mode h3{margin:0 0 .45rem; font-size:clamp(1.375rem, 1.15rem + .6vw, 1.75rem); font-weight:720; letter-spacing:-0.025em; line-height:1.1}
.mode > p{margin:0 0 1.5rem; max-width:24rem; text-wrap:pretty}
.facts{display:contents}
.facts div{display:grid; align-content:start; gap:.1rem; margin:0 0 .8rem}
.facts div:first-child{padding-top:1rem; border-top:1px solid var(--line)}
.facts div:last-child{margin-bottom:0}
.facts dt{color:var(--muted); font-size:.8125rem; font-weight:600}
.facts dd{margin:0; font-size:.9375rem; line-height:1.4; text-wrap:pretty}
.fit{margin:clamp(2rem, 4vw, 2.75rem) 0 0; max-width:37rem; color:var(--muted); text-wrap:pretty}
/* Scroll highlight: a soft neon wash sweeps through the sentence line by line as it scrolls up the screen, and the words it
   passes brighten from muted to ink. Both backgrounds run across the line breaks as one strip (box-decoration-break: slice),
   so 0 to 100% of their width sweeps the lines in reading order. --p (0 to 1) is set by main.js */
.hl{background:linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / calc(var(--p, 0) * 100%) 100%; -webkit-box-decoration-break:slice; box-decoration-break:slice; --hl:color-mix(in srgb, var(--accent) 24%, transparent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl-t{color:transparent; -webkit-background-clip:text; background-clip:text; background-image:linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--muted), var(--muted)); background-repeat:no-repeat; background-size:calc(var(--p, 0) * 100%) 100%, 100% 100%; -webkit-box-decoration-break:slice; box-decoration-break:slice}
}

/* About */
.about-lead{margin:0 0 clamp(1.5rem, 3vw, 2.25rem) -0.04em; max-width:22ch; font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight:680; letter-spacing:-0.025em; line-height:1.1; text-wrap:balance}

.about-grid{display:grid; gap:3rem var(--colgap)}
.about-grid > *{min-width:0}
.portrait{position:relative; margin:0; max-width:26rem}
.portrait img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover}
.portrait-dots{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
/* Wide screens: the portrait sits beside the lead and prose, top aligned with the lead, right edge on its column.
   It grows to run the full height of the text where it can, spreading left into the space the prose leaves
   (prose stops at 37rem, short of its two columns), always keeping 2rem clear of the text */
@media (min-width: 1100px){
  .about-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start}
  .about-text, .path{grid-column:1 / span 2}
  .about-text{grid-row:1}
  .portrait{grid-column:3; grid-row:1; align-self:stretch; max-width:none; container-type:size}
  .portrait img, .portrait-dots{position:absolute; inset:0 0 auto auto; max-width:none; width:min(100cqw + max(0px, 200cqw + var(--colgap) * 2 - 39rem), 80cqh); height:auto; aspect-ratio:4 / 5}
}
.path h3{margin:0 0 .75rem; color:var(--muted); font-size:.875rem; font-weight:600}
.path ol{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.path li, .path-axis{display:grid; grid-template-columns:3.25rem minmax(0, 1fr); gap:0 .75rem; align-items:baseline}
.path li{padding-block:.7rem; border-bottom:1px solid var(--line); line-height:1.35}
.path time{color:var(--muted); font-size:.9375rem; font-variant-numeric:tabular-nums}
.path b{display:block; font-weight:650}
.path li span{display:block; color:var(--muted); font-size:.9375rem}

/* Experience as dots: one faint dot per year from 2008 to now, and a solid dot on the year each role started.
   Read down the list, the solid dots step through time. They land in year order when the list comes into view. */
.dots{grid-column:2; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); align-items:center; height:14px; margin-top:.55rem}
.dots i{justify-self:center; width:5px; height:5px; border-radius:50%; background:var(--line)}
.dots i.mark{width:9px; height:9px; background:var(--ink); transform:scale(0)}
.is-drawn .dots i.mark{transform:none}
.path-axis{margin-top:.6rem; color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums}
.path-axis div{grid-column:2; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr))}
.path-axis span{grid-row:1; justify-self:center; white-space:nowrap}
.path-axis span:last-child{grid-column:-2}
@media (min-width: 640px){
  .path li, .path-axis{grid-template-columns:3.25rem minmax(11rem, 15rem) minmax(0, 1fr)}
  .dots{grid-column:3; align-self:center; margin-top:0}
  .path-axis div{grid-column:3}
}
@media (prefers-reduced-motion: no-preference){
  .dots i.mark{transition:transform .32s var(--ease-out) calc(var(--d) * 70ms), background-color .15s ease, box-shadow .15s ease}
}
@media (hover: hover) and (pointer: fine){
  .path li:hover .dots i.mark{background:var(--accent); box-shadow:0 0 0 1.5px var(--ink)}
}

/* Contact */
.ask{margin:0 0 clamp(1.25rem, 2.5vw, 1.75rem); font-size:clamp(2.6rem, 9.4vw, 8.25rem); font-weight:760; letter-spacing:-0.02em; line-height:.92; text-wrap:balance}
.email-row{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:1.75rem}
.email{min-height:44px; padding-block:.35rem; font-size:clamp(1.3rem, 1rem + 1.3vw, 2.125rem); font-weight:650; letter-spacing:-0.02em; overflow-wrap:anywhere}
.copy, .more{min-height:44px; padding:0 1rem; font:inherit; font-size:.9375rem; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--ink); border-radius:2px; cursor:pointer; transition:background-color .15s ease, color .15s ease, transform .12s var(--ease-out)}
.copy:active, .more:active{transform:scale(.97)}
.copy-status{min-height:1.4em; margin:.6rem 0 0; color:var(--muted); font-size:.9375rem}
.contact-meta{display:flex; flex-wrap:wrap; align-items:center; gap:0 1.75rem; margin:.75rem 0 0; color:var(--muted); font-size:.9375rem}
.contact-meta a{display:inline-block; padding-block:.65rem; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1.5px; text-underline-offset:.25em}
/* Joining dots: above the question on phones, bottom right beside the email on wide screens */
#contact > div{position:relative}
.joins{display:block; width:clamp(5.5rem, 18vw, 15rem); height:auto; margin-bottom:2rem; overflow:visible; fill:var(--ink)}
@media (min-width: 1000px){ .joins{position:absolute; right:0; bottom:0; margin:0} }

/* Phones: break up the long stretches of text.
   About leads with the portrait; the ways of working and the topics become rows of cards you swipe through,
   the next card peeking in from the right; the longer work list goes compact and shows its first few (JS adds the button) */
.more{display:none}
@media (max-width: 639px){
  .about-grid{gap:2rem}
  .about-text{display:contents}
  .about-text .about-lead{margin-bottom:0}
  .portrait{order:1}
  .about-text .prose, .path{order:2}
  .path{margin-top:1rem}

  .modes, .topics{display:flex; gap:2rem; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; border-top:0}
  .modes::-webkit-scrollbar, .topics::-webkit-scrollbar{display:none}
  .modes::after, .topics::after{content:""; flex:0 0 max(1px, calc(18% - 2rem))}   /* 18% matches the 82% cards and 2rem the gap, so the last card snaps flush to the gutter */
  .axis{gap:.75rem}
  .mode, .topics li{position:relative; flex:0 0 82%; scroll-snap-align:start; border-top:1px solid var(--ink); border-bottom:0}
  .mode + .mode::before, .topics li + li::before{content:""; position:absolute; top:0; bottom:0; left:-1rem; width:1px; background:var(--line)}
  .topics h3{flex-direction:column; align-items:flex-start; gap:.75rem}
  .topic-ico{width:3rem; height:3rem}

  .work .work-list{gap:0; margin-top:1.5rem}
  .work-list li{display:grid; grid-template-columns:6rem minmax(0, 1fr); gap:0 .75rem; align-items:baseline; padding-block:.75rem; border-bottom:1px solid var(--line)}
  .work .work-list span{margin:0}
  .work .work-list p{font-size:.9375rem}
  .work-list.is-short li:nth-child(n+5){display:none}
  .more{display:inline-block; margin-top:1.5rem}
}

/* Footer */
.foot{display:grid; gap:.5rem 2rem; padding-block:clamp(2.5rem, 5vw, 4rem) calc(1.5rem + env(safe-area-inset-bottom, 0px)); color:var(--muted); font-size:.8125rem; line-height:1.6}
@media (min-width: 900px){ .foot{grid-template-columns:var(--rail) minmax(0, 1fr) auto; align-items:baseline} }
.foot p{margin:0; max-width:46rem}
.foot a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; white-space:nowrap}
.foot-links{display:flex; gap:1.5rem}

/* Hover only where there is a real pointer */
@media (hover: hover) and (pointer: fine){
  .foot a{transition:color .15s ease}
  .foot a:hover{color:var(--ink)}
  .still:hover{color:var(--t-ink, var(--ink))}
  .cta:hover, .prose a:hover, .work a:hover, .meet-go a:hover, .email:hover{background-size:100% 100%; color:var(--link-hover)}
  .top-talk:hover{background-size:100% 100%; color:var(--t-hover)}
  .copy:hover, .more:hover{background:var(--ink); color:var(--bg)}
  .contact-meta a:hover{text-decoration-color:var(--ink)}
}
/* Touch: links fill their highlighter while pressed (main.js adds an empty touchstart listener so iOS applies :active) */
@media (hover: none){
  .cta:active, .prose a:active, .work a:active, .meet-go a:active, .email:active{background-size:100% 100%; color:var(--link-hover); transition-duration:0s}
  .top-talk:active{background-size:100% 100%; color:var(--t-hover); transition-duration:0s}
  .foot a:active{color:var(--ink)}
  .contact-meta a:active{text-decoration-color:var(--ink)}
}
@media (prefers-reduced-motion: no-preference){
  .wordmark .fold{transition:max-width .2s var(--ease-out)}
  .wordmark .fold b{transition:opacity .12s ease}
  .wordmark:focus-visible .fold{transition-duration:.5s}
  .wordmark:focus-visible .fold b{transition:opacity .24s ease calc(var(--i) * 40ms)}
}
/* One weight wave runs through the whole name as it unfolds */
@keyframes wordmark-wave{0%, 100%{font-weight:800} 45%{font-weight:400}}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine){
  .wordmark:hover .fold{max-width:8em; transition-duration:.5s}
  .wordmark:hover .fold b{opacity:1; transition:opacity .24s ease calc(var(--i) * 40ms)}
  :root:not(.is-still) .wordmark:hover b{animation:wordmark-wave .6s var(--ease-out) calc(var(--i) * 40ms) both}
}