@font-face{font-family:"Figtree";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/figtree-300.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/figtree-500.woff2) format("woff2")}
:root{--bg:oklch(98.5% 0.004 90);--ink:oklch(16% 0.006 90);--muted:oklch(48% 0.008 90);--line:oklch(87% 0.006 90);--wash:oklch(96% 0.004 90);--h:250;--hd:250;--hs:16;--c:1;--ga:135deg;--gm:52%;
  --attract:oklch(55% 0.16 355);--influence:oklch(50% 0.17 300);--execute:oklch(46% 0.035 240)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:oklch(22% 0.006 70);--ink:oklch(87% 0.006 80);--muted:oklch(63% 0.008 75);--line:oklch(32% 0.008 75);--wash:oklch(26% 0.008 75);
  --attract:oklch(76% 0.11 352);--influence:oklch(74% 0.13 300);--execute:oklch(74% 0.03 250);}}
:root[data-theme="dark"]{--bg:oklch(22% 0.006 70);--ink:oklch(87% 0.006 80);--muted:oklch(63% 0.008 75);--line:oklch(32% 0.008 75);--wash:oklch(26% 0.008 75);
  --attract:oklch(76% 0.11 352);--influence:oklch(74% 0.13 300);--execute:oklch(74% 0.03 250);}

/* --hs: how far a light gradient travels from its goal hue. Each goal moves inside its own family,
   so no band drifts into pink or green. */
/* The travel below is a fallback. A piece carries its own --hs, chosen from a set per goal,
   so two pieces of the same colour can end up somewhere different. */
[data-goal="attract"]{--hs:14;--hd:352}
[data-goal="influence"]{--hs:-28;--hd:306}
[data-goal="execute"]{--hs:50;--hd:268}

/* The sheet is the coloured ground behind every block. It has to be declared on the element,
   not on :root: a var() inside a custom property resolves where it is declared, so a
   root-level gradient would bake in the root hue and paint every piece the same colour. */
*{--ha:var(--h);--edge:var(--line);--sheet:linear-gradient(var(--ga),oklch(95.5% calc(0.040 * var(--c) * var(--cf,1)) var(--h)) 0%,oklch(91.5% calc(0.072 * var(--c) * var(--cf,1)) calc(var(--h) + var(--hs) * 0.62)) var(--gm),oklch(95% calc(0.058 * var(--c) * var(--cf,1)) calc(var(--h) + var(--hs))) 100%)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) *{--ha:var(--hd);--edge:oklch(38% calc(0.030 * var(--cf,1)) var(--hd));--sheet:linear-gradient(var(--ga),oklch(29% calc(0.055 * var(--c) * var(--cf,1)) var(--hd)) 0%,oklch(25.5% calc(0.044 * var(--c) * var(--cf,1)) calc(var(--hd) + var(--hs) * 0.62)) var(--gm),oklch(22.5% calc(0.026 * var(--c) * var(--cf,1)) calc(var(--hd) + var(--hs))) 100%)}}
:root[data-theme="dark"] *{--ha:var(--hd);--edge:oklch(38% calc(0.030 * var(--cf,1)) var(--hd));--sheet:linear-gradient(var(--ga),oklch(29% calc(0.055 * var(--c) * var(--cf,1)) var(--hd)) 0%,oklch(25.5% calc(0.044 * var(--c) * var(--cf,1)) calc(var(--hd) + var(--hs) * 0.62)) var(--gm),oklch(22.5% calc(0.026 * var(--c) * var(--cf,1)) calc(var(--hd) + var(--hs))) 100%)}
/* her palette, emm #34, 2026-10-12: rose for attract, charcoal for execute, influence as it was. Execute keeps its blue only in the drawing's line. */
[data-goal="execute"]{--cf:0.18}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 15px/1.55 "Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;max-width:1272px;padding:0 28px 56px;margin-inline:auto}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-weight:300;line-height:1.1;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(33px,4.8vw,66px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400}
h3{font-size:19px;line-height:1.2}
/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;flex-wrap:wrap}
.brand{font-weight:400;font-size:16px}
.top nav{display:flex;gap:20px;align-items:center;font-size:14px;color:var(--muted)}
.theme{width:20px;height:20px;padding:0;border-radius:999px;border:1px solid var(--muted);background:transparent;overflow:hidden;position:relative;flex:0 0 auto}
.theme span{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0 50%,var(--ink) 50% 100%)}
.theme:hover{border-color:var(--ink)}
.top nav a[aria-current=page]{color:var(--ink);border-bottom:1px solid var(--ink)}
.find input{width:120px;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);transition:width .18s ease}
.find input:focus{width:180px;outline:none;border-color:var(--ink)}
/* shared bits */
.meta .n{letter-spacing:.04em;color:var(--ink);opacity:.45}
.meta{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.goal{font-weight:500}.g-attract{color:var(--attract)}.g-influence{color:var(--influence)}.g-execute{color:var(--execute)}
.labels{display:flex;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.labels a:hover{color:var(--ink)}
.badge{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)}
.page-head{padding:32px 0 48px}.page-head h1{font-size:clamp(34px,4.4vw,58px)}.lede{font-size:17px;color:var(--muted);max-width:620px;margin:14px 0 0}
.empty{color:var(--muted);padding:24px 0}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:400;text-transform:capitalize;color:var(--muted)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:hover{text-decoration:none;border-color:var(--ink);color:var(--ink)}.chip.on:hover{color:var(--bg)}
/* a solid white pill is too loud on a dark page: an outline says the same thing */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.on{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}:root:not([data-theme="light"]) .chip.on:hover{color:var(--ink)}}
:root[data-theme="dark"] .chip.on{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
:root[data-theme="dark"] .chip.on:hover{color:var(--ink)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:8px 0 10px}
.who p{margin:0;font-size:14px;color:var(--muted);letter-spacing:.02em}
/* hero: the latest piece paints the page */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center;padding:44px 52px;
  background:var(--sheet);animation:rise .5s ease-out both}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero{animation:none}html{scroll-behavior:auto}}
.hero-text{display:flex;flex-direction:column;gap:18px}.hero h1 a:hover{text-decoration:none}
.deck{font-size:clamp(15px,1.3vw,18px);color:var(--muted);max-width:620px}.deck p{margin:0}
.hero-image{display:block;aspect-ratio:1;border:0;background:transparent;padding:1%;overflow:hidden}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block;margin:0;padding:0}
.illus{display:block;width:100%;height:100%;background:oklch(44% 0.11 var(--ha));opacity:.92;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .illus{background:oklch(78% 0.075 var(--ha))}}
 :root[data-theme="dark"] .illus{background:oklch(78% 0.075 var(--ha))}

/* the list */
.body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;padding:6px 0 44px}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:100px minmax(0,1fr) 170px 96px;gap:18px;align-items:baseline;padding:15px 14px;
  border-left:2px solid var(--line);transition:background .12s ease,border-left-color .12s ease}
.row:first-of-type{border-top:0}
.row:hover{text-decoration:none;background:var(--wash);border-left-color:oklch(55% calc(0.14 * var(--cf,1)) var(--ha))}
.row .goal{font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:8px}
.row .goal .n{color:var(--muted);opacity:.75;font-weight:400}
.row .title{font-size:18px;line-height:1.2;letter-spacing:-.01em}
.row .kind{font-size:12px;color:var(--muted);text-align:right}
.row[hidden]{display:none}
.side{border-left:2px solid var(--line);padding:2px 0 0 20px;align-self:start}.side h2{padding-bottom:10px}
.side .side-row:first-of-type{border-top:0;padding-top:0}.side-row{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-size:14px}
.side-row:hover{text-decoration:none;color:var(--muted)}.side-row .n{font-size:12px;color:var(--muted);width:14px}
/* core strip on home */
.strip{padding:4px 0 8px}.strip h2{padding-bottom:16px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.card{display:flex;flex-direction:column;gap:10px}.card:hover{text-decoration:none}.card:hover h3{text-decoration:underline}
.thumb{aspect-ratio:4/3;background:var(--sheet);padding:2%;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;margin:0}
/* insights page */
.carousel-head{display:flex;justify-content:space-between;align-items:center;padding:4px 0 16px}
.arrows{display:flex;gap:8px}.arrows button{width:32px;height:32px;padding:0;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px;line-height:1}
.arrows button:hover{border-color:var(--ink);color:var(--ink)}
.banners{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.banners::-webkit-scrollbar{display:none}
.banner{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:22px;position:relative;
  background:var(--sheet)}

.banner:hover{text-decoration:none}.banner h3{font-size:22px}.banner p{margin:0;font-size:14px;color:var(--muted)}
/* core page */
.core-list{display:flex;flex-direction:column;padding:8px 0 40px}
.core-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:26px 14px;border-left:2px solid var(--line);transition:background .12s ease,border-left-color .12s ease}
.core-item:hover{text-decoration:none;background:var(--wash);border-left-color:oklch(55% calc(0.14 * var(--cf,1)) var(--ha))}
.core-figure{aspect-ratio:4/3;background:var(--sheet);padding:2%;overflow:hidden}.core-figure img{width:100%;height:100%;object-fit:cover}
.core-text{display:flex;flex-direction:column;gap:10px}.core-text h3{font-size:26px;letter-spacing:-.02em}.core-text .n{font-size:14px;letter-spacing:0}
.core-text .deck{font-size:16px;margin:0}
.core-peek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;font-size:13px;color:var(--muted);padding-top:4px}
.core-peek em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.55;padding-bottom:3px}
.core-item[hidden]{display:none}
/* about page */
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:center;padding:36px 0 44px}
.about-hero h1{font-size:clamp(34px,4.6vw,60px)}.about-text .lede{margin:20px 0 0}
.about-hero{position:relative}
.about-ground{position:absolute;inset:-24px -24px auto -24px;height:calc(100% + 48px);z-index:0;overflow:hidden;pointer-events:none}
.about-ground img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(.35) contrast(.55) brightness(1.18);opacity:.16;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 70%,transparent)}
:root[data-theme="dark"] .about-ground img{filter:grayscale(.3) contrast(.7) brightness(.9);opacity:.3}
.about-text,.about-portrait{position:relative;z-index:1}
.about-portrait{aspect-ratio:1;border:1px solid var(--edge);background:var(--sheet);overflow:hidden;padding:2%}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;padding:32px 0 8px}
.about-grid h2{padding-bottom:10px}.about-grid p{margin:0;font-size:15px;color:var(--muted)}.about-grid a{color:var(--ink);border-bottom:1px solid var(--line)}
/* contact */
.contact{margin-top:0;padding-top:4px}.contact h2{padding-bottom:10px}
.contact p{font-size:17px;margin:0 0 8px;color:var(--muted)}.contact p a{color:var(--ink);border-bottom:1px solid currentColor}
.subscribe{margin-top:16px;max-width:440px}.subscribe label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
.rowf{display:flex;gap:8px;flex-wrap:wrap}.rowf input{flex:1;min-width:200px}
.fineprint{margin:10px 0 0;font-size:13px;color:var(--muted)}
.fineprint a{color:var(--muted);border-bottom:1px solid var(--line)}
input,button{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink)}
button{cursor:pointer;background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:400}button:disabled{opacity:.6;cursor:default}
/* the piece */
.single{max-width:796px;margin:0 auto;padding:0 0 40px}   /* 740 of text plus a 28 gutter each side */
/* One gutter for everything under the header, so the body starts on exactly the same
   vertical line as the title above it. The header had 28 and the body had none. */
.single > :not(.single-head):not(.pull){padding-inline:28px}
/* The colour runs the full width of the page and the text inside it keeps the article's measure,
   so there is no block edge for the body to disagree with. Entering a piece is entering the colour. */
.single-head{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;padding:0;border:0;
  background:var(--sheet)}

.single-head-inner{max-width:796px;margin:0 auto;padding:76px 28px 68px;display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:40px;align-items:center}
.single-head-text{display:flex;flex-direction:column;gap:22px}   /* title, small line and intro each need their own air */
.single-head-text .deck{margin-top:6px;line-height:1.6}   /* the intro breathes rather than sitting on the small line */
.single-mark{aspect-ratio:1;padding:0;overflow:hidden}.single-mark img{width:100%;height:100%;object-fit:cover;display:block}
.single h1{font-size:clamp(30px,3.8vw,46px)}
.prose{margin:0}   /* the full-width colour is the break now, so no rule is needed */
.single .prose-close{border-top:0;margin-top:0;padding-top:0}
.prose-close > h2:first-child{margin-top:1.15em}   /* the boxes above already give the air */
.single-image{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}.single-image img{width:100%;height:100%;object-fit:cover;display:block}
.pull{position:relative;margin:8px 28px 22px;padding:0 0 0 22px;font-size:17px;line-height:1.62;font-weight:500;color:var(--ink)}   /* the size of the text, bold, underlined like a key phrase (emm #39) */
.pull::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:var(--accent)}   /* centred on its lines, not on its box */
.pull span{background:linear-gradient(transparent 62%,var(--glow) 62%) left/0 100% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.3,.7,.2,1)}
.pull.is-read span{background-size:100% 100%}
.boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:8px 0 14px}
.box{padding:20px 22px;border:1px solid var(--line)}
.box h2{padding-bottom:8px;color:var(--ink);opacity:.6}.box p{margin:0;font-size:15px;color:var(--ink);opacity:.88}
.box-hard{background:var(--wash)}
.box-changed{background:transparent}
@media(prefers-color-scheme:dark){}



.prose{font-size:17px;line-height:1.62;padding:38px 0 8px}.prose p{margin:0 0 1em}
.prose h2{font-size:23px;letter-spacing:-.015em;text-transform:none;color:var(--ink);margin:1.7em 0 .5em;font-weight:300}
.prose h3{font-size:17px;font-weight:500;margin:1.4em 0 .4em;letter-spacing:0}
.prose ul{padding-left:1.15em;margin:0 0 1.2em}.prose li{margin:.35em 0}.prose ul li::marker{color:var(--muted)}
/* numbered steps: counter on a padded li, never a grid (a grid splits inline runs into cells) */
.prose ol{list-style:none;counter-reset:step;padding:0;margin:0 0 1.4em}
.prose ol>li{counter-increment:step;position:relative;padding:14px 0 14px 52px;border-top:1px solid var(--line);margin:0}
.prose ol>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:14px;font-size:21px;font-weight:300;color:var(--muted);line-height:1.3}
.prose blockquote{position:relative;margin:1.6em 0;padding:0 0 0 20px;font-size:17px;line-height:1.62;font-weight:500;color:var(--ink)}
.prose blockquote::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:var(--accent)}.prose blockquote p{margin:0}
.prose .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:1.2em 0 1.6em}
.prose .cols>div{padding:18px;border:1px solid var(--line)}
.prose .cols h3{margin-top:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.prose .cols p{margin:0 0 .6em}.prose .cols ul{margin:0}
.prose img{display:block;width:auto;height:auto;max-width:min(100%,330px);max-height:400px;margin:1.8em auto .4em}
/* pixels, not per cent: this box is 420 wide but its percentage padding would resolve against the
   column around it, which is wider, so the drawing sat smaller than intended. The row variant below
   keeps a percentage, and correctly: there the box IS the width of its grid track. */
.prose-illus{display:block;width:min(100%,420px);height:420px;margin:2em auto .6em;padding:8px;border:1px solid var(--edge);background:var(--sheet)}
/* two or more drawings in one paragraph sit side by side */
.illus-row{display:grid;gap:14px;margin:2em 0 .8em}
.illus-row .prose-illus{width:100%;height:auto;aspect-ratio:1;margin:0;padding:2%}
.illus-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.illus-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.illus-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.illus-row-3,.illus-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prose img + em, .prose p > img + em{display:block;text-align:center}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:15px}
.prose th{text-align:left;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 5px;border:1px solid var(--line);border-radius:4px}
.prose pre{padding:14px 16px;border:1px solid var(--line);overflow-x:auto}.prose pre code{border:0;padding:0}
.take{display:flex;gap:16px;font-size:13px;padding:18px 0;border-top:1px solid var(--line);margin:20px 0 0}
.take button{padding:0;background:none;border:0;color:var(--ink);text-decoration:underline;font-size:13px}
.more{padding-top:16px}.more h2{padding-bottom:6px}.back{color:var(--muted);margin-top:22px;font-size:14px}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px;color:var(--muted);font-size:13px}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:26px}
  .core-item{grid-template-columns:150px minmax(0,1fr);gap:20px}.core-text h3{font-size:22px}
}
@media(max-width:820px){
  body{padding:0 16px 40px;font-size:15px}
  .top{padding:16px 0;gap:10px}.top nav{gap:14px;font-size:13px;width:100%;justify-content:space-between}.find input{width:96px}.find input:focus{width:130px}
  .hero{grid-template-columns:1fr;gap:18px;padding:18px}.hero-image{order:-1;aspect-ratio:16/10;padding:5%}
  .bar{padding-top:22px}
  .body{grid-template-columns:1fr;gap:22px}.side{order:-1}.side .side-row:nth-child(n+5){display:none}
  .row{grid-template-columns:1fr;gap:5px;padding:14px 0 14px 12px}.row .title{font-size:18px}.row .kind{text-align:left}.row .goal{order:-1}
  .cards{grid-template-columns:1fr;gap:18px}
  .banners{grid-auto-columns:82%}
  .core-item{grid-template-columns:1fr;gap:14px;padding:20px 0 20px 12px}.core-figure{aspect-ratio:16/9}.core-peek{grid-template-columns:1fr;gap:8px}
  .about-hero{grid-template-columns:1fr;gap:22px}.about-portrait{max-width:200px;aspect-ratio:1}
  .single-head-inner{grid-template-columns:1fr;gap:16px;padding:34px 16px 30px}.single-mark{order:-1;max-width:190px;padding:0}.single > :not(.single-head):not(.pull){padding-inline:16px}.prose{font-size:17px;padding:26px 0 8px;margin:0}.pull{margin:8px 16px 20px}.boxes{margin:8px 0 14px}.prose .cols{grid-template-columns:1fr;gap:14px}
  .pull{margin:22px 0 20px}.boxes{grid-template-columns:1fr;gap:14px}
}

.illus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:16px 0 48px}
@media(max-width:700px){.illus-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.illus-grid figure{margin:0;display:flex;flex-direction:column;gap:6px}
.illus-pick{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.illus-cell{display:block;aspect-ratio:1;border:1px solid var(--line);background:var(--wash);padding:2%}
.illus-pick:hover .illus-cell{border-color:var(--ink)}
.illus-grid code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;border:0;padding:0;color:var(--ink)}
.illus-cell .illus{background:var(--ink)}   /* neutral on purpose: this page is for judging the line */


.illus-grid figcaption{font-size:11px;letter-spacing:.14em;color:var(--muted)}

.feedback-form{max-width:620px;padding:8px 0 48px}
.feedback-form label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.feedback-form textarea,.feedback-form input{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);resize:vertical}
.feedback-form textarea:focus,.feedback-form input:focus{outline:none;border-color:var(--ink)}
.form-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px}
.form-actions span{font-size:13px;color:var(--muted)}
.form-error{color:var(--attract);font-size:14px;margin:0 0 8px}

.download{display:inline-block;padding:10px 22px;border-radius:6px;background:var(--ink);color:var(--bg);font-size:15px}
.download:hover{text-decoration:none;opacity:.88}
.soon{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:9px 16px;border-radius:6px;display:inline-block}

.contents{display:flex;flex-direction:column;padding:6px 0 44px}
.entry{display:grid;grid-template-columns:70px minmax(0,1fr) 150px;gap:26px;align-items:baseline;padding:22px 14px;border-left:2px solid var(--line);transition:background .12s ease,border-left-color .12s ease}
.entry:hover{text-decoration:none;background:var(--wash);border-left-color:oklch(55% calc(0.14 * var(--cf,1)) var(--ha))}
.entry-n{font-size:22px;font-weight:300;color:var(--muted);letter-spacing:.02em}
.entry-body{display:flex;flex-direction:column;gap:7px}
.entry-title{font-size:22px;line-height:1.15;letter-spacing:-.02em}
.entry-deck{font-size:14px;color:var(--muted);max-width:62ch}
.entry-meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.entry[hidden]{display:none}
@media(max-width:820px){.entry{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 0 18px 12px}.entry-title{font-size:20px}.entry-n{font-size:19px}.entry-meta{grid-column:2;flex-direction:row;gap:12px;text-align:left}}


/* the local editor, only ever served by preview.sh on her own machine */
.editor{display:flex;flex-direction:column;gap:16px;padding:8px 0 40px}
.ed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.editor label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.editor input,.editor select,.editor textarea{font:400 15px/1.5 inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);padding:9px 11px;width:100%}
.editor textarea{font:400 15px/1.62 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.editor input:focus,.editor select:focus,.editor textarea:focus{outline:2px solid var(--ha,var(--ink));outline-offset:-1px}
/* the padding is in pixels on purpose. A percentage resolves against the containing block's width,
   not the box's own, so 5% of a 1216px form was 61px of padding inside a 150px square and the
   drawing came out at a sixth of the size. Her report, emm #17. */
.ed-preview{width:220px;aspect-ratio:1;border:1px solid var(--line);background:var(--sheet);padding:8px}
.ed-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* the way back, beside the Save button. The link at the top of the page was always there and she
   could not find it after saving, which is fair: the Save button is at the foot of a long form and
   the way out was a word inside a file path at the top. Her report, emm #22. */
.ed-back,.ed-saved a{font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ed-saved{margin:10px 0 0;font-size:15px;color:var(--ink)}
.ed-saved a{font-size:inherit}
@media(max-width:820px){.ed-grid{grid-template-columns:1fr}}

.sub-foot{margin-top:0;padding-top:6px}
.sub-inline{max-width:460px}
.sub-said{max-width:460px;margin:0;font-size:17px;color:var(--ink)}
.sub-inline label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
.single .sub-foot{margin-top:0}

.drew{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start;padding:8px 0 26px}
.drew-cell{aspect-ratio:1;border:1px solid var(--line);background:var(--wash);padding:2%}
.drew-cell .illus{background:var(--ink)}
.drew-said{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);white-space:pre-wrap;margin:10px 0}
.drew-err{color:var(--influence);font-size:15px;margin:0 0 14px}
@media(max-width:820px){.drew{grid-template-columns:1fr}}

.dz{border:1px dashed var(--line);background:var(--wash);display:grid;place-items:center;min-height:220px;padding:22px;text-align:center;cursor:pointer;position:relative}
.dz.over{border-color:var(--ha,var(--ink));border-style:solid;background:var(--bg)}
.dz strong{display:block;font:500 17px/1.4 inherit;color:var(--ink)}
.dz span{font-size:13px;color:var(--muted)}
.dz button{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.dz-shot{position:relative;line-height:0;max-width:100%;cursor:crosshair;touch-action:none;overflow:hidden}
.dz-shot img{max-width:100%;max-height:60vh;display:block;-webkit-user-drag:none;user-select:none}
.dz-box{position:absolute;outline:1px solid var(--ink);box-shadow:0 0 0 9999px color-mix(in oklab,var(--bg) 70%,transparent)}
.dz-hint{font-size:13px;color:var(--muted);margin:-6px 0 0}
.dz-hint button{font:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.dz-note{font-size:14px;color:var(--influence);margin:-6px 0 0}
.ed-more{border-top:1px solid var(--line);padding-top:16px;margin-top:2px}
.ed-more summary{font-size:14px;color:var(--ink);cursor:pointer;padding:4px 0}
.ed-more .ed-grid{margin-bottom:18px}
.ed-more label{gap:4px}
.ed-more .fineprint{font-size:11px;line-height:1.45;color:var(--muted)}
.ed-more button{font:inherit;font-size:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.ed-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:18px 0 10px}

/* Her About copy now comes from content/about.md, so the paragraphs arrive as plain <p> from
   markdown rather than carrying a class. They still read as the lede they always were. */
.about-lede p{font-size:17px;color:var(--muted);max-width:620px;margin:20px 0 0}

/* The 2030s stop of her museum, brought home (emm #34): a piece reads like a conversation. Each section
   carries a rail that fills as you reach it, the bold phrases underline themselves in the piece's own
   colour, the short ones are gathered into a strip to skim before reading, and between two sections a
   line draws itself toward the next. Headings go quiet so the text does the work. */
.single,.hero{--accent:oklch(58% 0.14 var(--ha));--glow:oklch(90% 0.09 var(--ha))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .single,:root:not([data-theme="light"]) .hero{--accent:oklch(74% 0.11 var(--ha));--glow:oklch(40% 0.12 var(--ha))}}
:root[data-theme="dark"] .single,:root[data-theme="dark"] .hero{--accent:oklch(74% 0.11 var(--ha));--glow:oklch(40% 0.12 var(--ha))}
.part{position:relative;padding:0 0 4px 22px;margin:0 0 10px}
.part::after{content:"";position:absolute;left:0;top:6px;width:2px;height:0;background:var(--accent);transition:height 1.2s cubic-bezier(.3,.7,.2,1),opacity .6s ease}
.part::after{opacity:0}
.part.is-now::after{height:calc(100% - 16px);opacity:1}   /* one section at a time: the one under your eye */
.part>h2:first-child{margin-top:0}
.prose h2{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin:1.6em 0 .5em}
.prose strong,.deck strong{font-weight:500;color:var(--ink);background:linear-gradient(transparent 62%,var(--glow) 62%) left/0 100% no-repeat;transition:background-size .9s cubic-bezier(.3,.7,.2,1)}
.part.is-read strong,.single-head.is-read .deck strong,.hero.is-read .deck strong{background-size:100% 100%}   /* a note that is only its paragraph gets the same bold and underline (emm #40) */
.part.is-read p:nth-of-type(2) strong,.part.is-read li:nth-of-type(2) strong{transition-delay:.3s}
.part.is-read p:nth-of-type(3) strong,.part.is-read li:nth-of-type(3) strong{transition-delay:.6s}
.part.is-read p:nth-of-type(n+4) strong,.part.is-read li:nth-of-type(n+4) strong{transition-delay:.9s}
.keypoints{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 -16px;padding:0}
.keypoints li{font-size:12.5px;line-height:1.4;padding:5px 11px;background:var(--wash);color:var(--ink);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * .15s)}
.keypoints li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;background:var(--accent);vertical-align:1px}
.keypoints.rise li{opacity:0;transform:translateY(6px)}
.keypoints.rise.is-read li{opacity:1;transform:none}
@counter-style dots{system:additive;additive-symbols:1 "\25A0";suffix:""}
body{counter-reset:flow}
.flow{display:flex;align-items:center;gap:12px;height:22px;margin:14px 0 0 22px;counter-increment:flow}
.flow::before{content:counter(flow,dots);font:7px/1 system-ui,sans-serif;letter-spacing:5px;color:var(--muted);opacity:.55;animation:typing 1.4s ease-in-out infinite}
.flow b{flex:1;height:1.5px;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:left;animation:draw 2.8s cubic-bezier(.3,.7,.2,1) infinite}
.flow.is-done::before{animation:none;opacity:.3}.flow.is-done b{animation:none;transform:none;opacity:.35}   /* the page settles behind you */
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:.9}}
@keyframes draw{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
/* links underline themselves on approach, and the latest piece carries a live dot */
.top nav a,.labels a,footer a,.back a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .3s ease,color .2s}
.top nav a:hover,.labels a:hover,footer a:hover,.back a:hover{text-decoration:none;background-size:100% 1px}
.hero .meta>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--accent);vertical-align:0;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
/* Reduce Motion, in the system settings, stops what loops: the dots, the pulse, the line that keeps
   drawing. The one-shot reveals, a bar growing and an underline drawing itself once, are kept. */
@media(prefers-reduced-motion:reduce){
  .flow::before,.flow b,.hero .meta>span:first-child::before{animation:none}
}
@media(max-width:820px){.part{padding-left:16px}.flow{margin-left:16px}.keypoints{margin-top:24px}.take{padding:16px 0;margin:16px 0 0}}

/* The list pages follow (her word on #34, "better yes"): the lines between rows become one rail that fills
   with each piece's colour as the row comes into view, the boxes lose their borders and keep their colour,
   and the lines between sections become the same dividers as in a piece. */
.row,.core-item,.entry{transition:background .12s ease,border-left-color .5s ease;transition-delay:0s,calc(var(--i,0) * .05s)}
.row.is-read,.core-item.is-read,.entry.is-read{border-left-color:oklch(58% calc(0.14 * var(--cf,1)) var(--ha))}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .row.is-read,:root:not([data-theme="light"]) .core-item.is-read,:root:not([data-theme="light"]) .entry.is-read{border-left-color:oklch(72% calc(0.11 * var(--cf,1)) var(--ha))}}
:root[data-theme="dark"] .row.is-read,:root[data-theme="dark"] .core-item.is-read,:root[data-theme="dark"] .entry.is-read{border-left-color:oklch(72% calc(0.11 * var(--cf,1)) var(--ha))}
.row:hover,.core-item:hover,.entry:hover{border-left-color:var(--ink)}
.banner::after,.card .thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:oklch(58% calc(0.14 * var(--cf,1)) var(--ha));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.card .thumb{position:relative}
.banner:hover::after,.card:hover .thumb::after{transform:scaleX(1)}
.flow-page{margin:26px 0 8px}.flow-page b{background:linear-gradient(90deg,var(--muted),transparent)}   /* no piece colour at page level: the line is neutral */
.row:first-of-type{border-top:0}
@media(max-width:820px){.side{padding-left:14px}.flow-page{margin:18px 0 8px}}

/* the colour options page, local editor only */
.swatches{display:grid;gap:18px;padding:0 0 40px}
.swatch{padding:28px 36px;gap:28px;grid-template-columns:minmax(0,1fr) 200px;animation:none}
.swatch h1{font-size:clamp(24px,2.6vw,34px)}.swatch .meta>span:first-child::before{display:none}
.swatch .goal{font-weight:500}
@media(max-width:820px){.swatch{grid-template-columns:1fr;padding:18px}}

/* the dark ground options, local editor only: each block carries its own ground and the ink that goes with it */
.grounds{display:grid;gap:18px;padding:8px 0 40px}
.ground{padding:26px 32px;background:var(--bg);color:var(--ink)}
.ground h2{margin-bottom:14px}
.ground .swatch{margin:0 0 14px;padding:22px 28px;gap:22px;grid-template-columns:minmax(0,1fr) 150px}
.ground .swatch h1{font-size:24px}
.ground .row{border-left-color:oklch(72% calc(0.11 * var(--cf,1)) var(--ha))}
.ground .keypoints{margin:0 0 14px}